목차
- UI/ UX
- UI 디자인
- UX 디자인
- UI/UX 사용성 평가
- Wireframe/ Prototype
📌 UI/ UX
UI (User Interface)
: 사람들이 컴퓨터와 상호작용하는 시스템
보통 UI라고 하면 떠오르는 것은 화면상의 그래픽 요소 외에도 키보드, 마우스 등의 물리적 요소도 컴퓨터와 상호작용하기 위한 시스템이라고 하여 UI라고 볼 수 있음
GUI (Graphical User Interface)
: 사용자가 그래픽을 통해 컴퓨터와 정보를 교환하는 작업 환경
-> 요즘은 스마트폰과 컴퓨터뿐만 아니라 스마트워치, 키오스크, 대중교통 터치스크린 등 화면과의 상호 작용을 통해 사용하는 기기들이 많아지면서 GUI가 굉장히 중요한 역할을 함
UX (User Experience>
: 사용자가 어떤 시스템, 제품, 서비스를 직/간접적으로 이요하면서 느끼고 생각하는 경험
-> 홍보, 접근성, 사후 처리등 모든 경험을 사용자 경험이라고도 함 (총체적 경험)
- 웹사이트에 접속시 광고창이 많이 떠서 메인화면이 아예 보이지 않는다면??
- 기사의 글씨체가 너무 작아서 읽기 힘들다면??
- 화면에 담긴 정보가 너무 많아서 내가 찾고자 하는 정보를 보기가 힘들다면?
➡️ 좋은 UX를 위해서 좋은 UI를 만들어야함.
UI와 UX관계
- UX는 UI를 포함한다.
- 좋은 UX가 좋은 UI를 의미하거나, 좋은 UI가 항상 좋은 UX를 보장하지 않음
하지만, 나쁜 UI는 보통 나쁜 UX를 유발함 - UI와 UX는 다르지만 서로의 단점을 보완하는 역할을 함.
📌 UI 디자인
- 모달 (Modal) : 기존에 이용하던 화면 위에 오버레이 되는 창
닫기 버튼, 모달 범위 밖을 클릭하면 닫히는 것이 일반적이며 닫기전에는 기존 화면과의 상호작용 안됨
-> 브라우저 설정에 영향을 받지 않아서 꼭 보여주고 싶은 내용을 보여줄 때 사용
- 토글 (Toggle) : on/off스위치 사용 버튼
여러 옵션이 있을 경우에도 사용이 가능하지만 어느 옵션을 선택한지 직관적으로 보이지 않기 때문에 옵션의 개수가 많다면 탭 사용을 권장 - 탭 (Tab) : 콘텐츠를 분리해서 보여주고 싶을 때 사용하는 UI디자인 패턴
- 태그 (Tag) : 콘텐츠를 설명하는 키워드를 사용해서 라벨을 붙이는 역할
- 자동완성 (Autocomplete) : 사용자가 입력하고자 하는 내용과 일치할 가능성이 높은 항목 보여주는것(관련검색어)
- 드롭다운 (Dropdown): 선택할 수 있는 항목들을 숨겨두었다가 펼쳐지면서 선택할 수 있게 해줌
- 아코디언 (Accordion) : 트리 구조의 콘텐츠를 렌더링 할 때 사용하거나, 콘텐츠를 담는 용도로 사용
- 캐러셀 (carousel) : 회전목마처럼 돌아가면서 콘텐츠를 보여주는 패턴
사용자가 옆으로 넘겨야 되너가, 자동으로 넘어가는 형태로 제작됨
- 페이지네이션 (Pagination) : 한 페이지에 보여줄 정보가 많은 경우 책페이지를 넘기듯이 번호를 붙여 구분해주는것
- 무한 스크롤 (Infinite Scroll) : 모든 콘텐츠를 불러올때까지 무한으로 스크롤을 내리는 것
-> 페이지 네이션과 같이 멈춰서 페이지를 선택할 필요가 없어 더 나은 사용자 경험을 제공하지만, 콘텐츠의 끝이 어딘지 알 수 없고 지나간 콘텐츠를 찾기 힘들다는 단점이 있음 - GNB, LNB
- GNB(Global Navigation Bar) : 어느 페이지에 들어가든 사용할 수 있는 최상위 메뉴
- LNB(Local Navigation Bar) : GNB에 종속되는 서브 메뉴 혹은 특정 페이지에서만 볼 수 있는 메뉴
그리드 시스템 (Grid System)
: UI를 구성할 수 있게 도와줌
- Margin : 양쪽의 여백을 의미
- Column : 콘텐츠가 위치하게 될 세로로 나누어진 영역
휴대폰은 4개, 태블릿 8개, pc는 12개 - Gutter : cloumn 사이의 공간으로 콘텐츠를 구분
간격이 좁을수록 콘텐츠들이 연관성 있어 보이고, 넓을수록 콘텐츠가 독립적인 느낌을 줌
컬럼그리드 시스템 예시
📌 UX디자인
좋은 UX 요소 만들기
- 유용성 : 사용 가능한지
- 사용성 : 사용자가 쉽게 사용할 수 있나
- 매력성 : 사용자들에게 매력적인가
ex) 애플 감성 한스푼 - 신뢰성 : 사용자가 믿고 사용할만한지
ex) 개인 정보 유출등과 같은 신뢰성을 떨어트릴 일이 없어야함 - 접근성 : 모든 사용자에게 접근이 용이한지
ex) 시력이 좋지 않은 고연령층도 사용하기 편한지 - 검색 가능성 : 사용자가 원하는 정보를 쉽게 찾을 수 있는지
- 가치성 : 위의 모든 요소들이 고객에게 가치를 제공하는지
➡️ 각 요소들의 의미를 파악하고 부족한 부분을 개선한다면 좋은 UX 제작이 가능
User Flow
: 사용자가 제품에 진입한 시점을 시작으로 취할 수 있는 모든 행동
1. User Flow 다이어그램 작성법
- 직사각형 : 사용자가 보게 될 화면
ex) 회원가입, 로그인 페이지 - 다이아몬드 : 사용자가 취할 행동
ex) 로그인, 버튼 클릭 - 화살표 : 화면과 행동을 연결시켜 주는 화살표
2. User Flow 장점
- 사용자의 흐름을 읽고 단점을 파악하고 보완할 수 있음
- 불필요한 Flow가 있을 경우 삭제 가능
[예시_게시판 사이트]
➡️ 사용자의 입장에서 생각하고 흐름을 읽고 보완하다보면 보다 나은 사용자 경험을 제공할 수 있음
📌 UI/UX 사용성 평가
제이콥 닐슨의 10가지 사용성 평가 기준(Jakon's Ten Usability Heuristics)
Heuristics는 체험적인 뜻으로 직관과 경험을 활요한느 방법론
- 시스템 상태의 가시성 : 사용자에게 즉각적이고 정확한 피드백주기
- 시스템과 현실 세계의 일치 : 전문프로그램언어가 아니라 사용자에게서 친숙한 언어를 사용
- 사용자 제어 및 자유 : 사용자가 자유롭게 직접 제어할 수 있어야 함
ex) 삭제 직후에 취소할 수 있는 버튼 뜨기 - 일관성 및 표준
- 외부 일관성 : 친숙한 UI 제공
- 내부 일관성 : 사용자가 혼란스럽지 않게 일관성 있는 인터페이스와 정보 제공
ex) 같은 인터페이스를 유지 (버튼의 모양, 위치, 아이콘 크기)
- 오류 방지 : 오류가 발생하기 쉬운 상황을 방지할 수 있어야 함
ex) 삭제 클릭시 재의사 전달 - 기억보다는 직관 : 사용자가 기억해야하는 정보를 줄임
ex) 검색어 저장 - 사용의 유연성과 효율성 : 초보자와 전문가 모두를 위한 개별 맞춤 기능
ex) 프로그램 단축키 직접 설정 - 미학적이고 미니멀한 디자인 : 불필요한 정보는 없애고 콘텐츠의 기능에 맞는 우선순위를 정해 제공하기
- 오류의 인식,진단,복구를 지원 : 어떤 오류인지 어떻게 해결하면 되는지 전달
ex) 영문 입력란에 한글을 입력했을 경우
- 도움말 및 설명 문서 : 추가설명이 없는게 best, 상황에 따른 간단한 설명 제공
📌 Wireframe/ Prototype
와이어프레임(Wireframe)
: 제품 기획 단계에서 페이지 구성할 것인지 구조를 잡기 위한 목적
와이프레임_피델리티(fidelity)표현
- Lo-Fi Wireframe (Low Fidelity Wireframe)
: 스케치/ 아이디어 구체화를 위한 큰그림잡기 - Mid-Fi Wireframe (Middel Fidelity Wireframe)
: 아이디어가 어느 정도 구체화 되고 확정된 후에 보기 좋게 다듬어주기
-> 해당 수준이 되면 페이지가 어떻게 작동이 될지 예상할 수 있음 - Hi-Fi Wireframe (High Fidelity Wireframe)
: 완성본에 가까움
-> 작성하는데 많은 시간과 노력이 들며 수정도 힘들어서 해당 수준까지 만드는 경우가 적음
프로토타입 (prototype)
: 실제 제품과 거의 흡사하게 구현한것으로 페이지 이동과 상호작용이 가능함/ 개발에 들어가기 전 단계에 작성하며, UI의 상호 작용을 시물레이션하는 것이 목적
프로토타입_피델리티(fidelity)표현
- Lo-Fi Wireframe (Low Fidelity Wireframe)
: 구체적인 내용이 작성된 상태에서 간단한 상호작용과 페이지 이동 테스트
-> User flow를 보완할 수 있음 - Mid-Fi Wireframe (Middel Fidelity Wireframe)
: 완성도가 높지는 않지만 사용성 테스트를 하기 위함 - Hi-Fi Wireframe (High Fidelity Wireframe)
: 완성본에 가까우며 디자인을 거의 확정하고 실제 제품과 거의 동일하게 작동하기 때문에 사용성 테스트가 가능함
-> 테스트를 통해 개발 비용이 들어가기전에 UI/UX 문제 보완하여 비용 절감 효과 있음
차이점 정리
| 와이어프레임 | 프로토타입 | |
|---|---|---|
| 작성 시기 | 기획 단계 | 개발 전 단계 |
| 작성 목적 | 화면 구조 설계 | UI 상호작용 시물레이션 |
| 특징 | 정적 | 동적 |
| 피델리티 | Low ~ Middle (High는 거의 작성하지 않음) | Middle ~ High (Low는 테스트에 적합하지 않음) |
