UI(User Interface)
- 사람들이 컴퓨터와 상호 작용하는 시스템
- 사용자가 제품/서비스와 상호작용할 수 있도록 만들어진 매개체
UX(User Experience)
- 사용자가 어떤 시스템, 제품, 서비스를 직•간접적으로 이용하면서 느끼고 생각하는 총체적 경험(사용 경험, 홍보, 접근성, 사후처리 등)
📌 이해하기 쉽게 정리하면 다음과 같다.
UI : 구리면 눈이 썩는다.
UX : 구리면 속이 썩는다.
UI와 UX의 관계
UI는 UX에 포함되는 개념이지만, UI가 좋으면 UX가 좋다고 할 수 없으며 반대의 경우도 마찬가지이다.
그림에서 아이에게 예쁜 모빌을 만들어 달아주었는데, 사용하는 아이의 입장에서는 예쁘지 않는 모빌이 되어버린다. 즉, 아무리 UI를 보기좋게 잘 만들어도 UX를 고려하지 않고 만든다면 사용하기는 꺼려지게 될 것이다.
따라서 우리는 UI와 UX를 모두 상황에 맞게 고려하여 제작을 해야 한다.
UI 디자인 패턴
- 자주 사용되는 UI 컴포넌트 Design patterns
- 모달 (Modal) : 기존 화면 위에 오버레이 되는 창
- 토글 (Toggle) : On/Off 스위치
- 탭 (Tab) :
- 태그 (Tag) : 콘텐츠를 설명하는 키워드를 사용해서 라벨을 붙이는 것
- 자동완성 (Autocomplete) : 사용자가 입력하고자 하는 내용의 항목을 보여주는 것
- 드롭다운 (Dropdown) : 선택할 수 있는 항목들을 숨겨놓았다가, 펼쳐지면서 선택할 수 있게 하는 것
- 아코디언 (Accordion) : 접었다 폈다 할 수 있는 컴포넌트
- 캐러셀 (Carousel) : 광고와 같이 옆으로 넘어가며 콘텐츠를 표시한다.
- 페이지네이션 (Pagination) : 번호를 붙여 페이지를 구분해 주는 것
- 무한 스크롤 (Infinite Scroll) : 페이지의 맨 아래에 도달하면 추가 콘텐츠를 로드해 오는 방식
- GNB (Global Navigation Bar) : 어느 페이지에 들어가든 사용할 수 있는 최상위 메뉴
- LNB (Local Navigation Bar) : GNB에 종속되는 서브 메뉴
그리드 시스템 (Grid System)
- 웹 디자인 분야에서는 화면을 세로의 영역으로 나누는 컬럼 그리드 시스템(Column Grid System)을 사용한다.
Margin
- 화면 양쪽의 여백
- 절대단위(px 등)와 상대단위(vw, % 등)을 이용하여 설정한다.
Column
- 세로로 나누어진 영역
- 개수는 임의로 나눌 수 있다.
- 표준적으로 휴대폰(4개), 태블릿(8개), PC(12개)의 Column으로 나눈다.
- 화면의 크기에 따라 바꿀 수 있게 상대단위를 이용하여 설정하는 것이 좋다.
Gutter
- 각 Column을 구분해주는 Column 사이의 공간
- 간격이 좁을수록 콘텐츠들이 연관성 있어 보이고, 넓을수록 각 콘텐츠가 독립적인 느낌을 준다.
- Column의 너비보다는 작게 설정하는 것이 좋다.
UX 디자인
좋은 UX를 만들기 위해서는 피터 모빌의 벌집 모형을 참고하여 만드는 것이 좋다.
위의 그림이 피터 모빌의 벌집 모형이다. 각각 해당 분야에 대해 질문하는 것이라고 볼 수 있다. 그렇다면 어떤것들이 있는지 알아보자.
1. 유용성 (Useful)
- 해당 서비스가 목적에 맞는가?
- 해당 서비스가 사용 가능한 기능을 제공하는가?
- 목적에 맞지 않더라도 추가적인 기능을 제공하는가?
2. 매력성 (Desirable)
- 디자인이 보기에 좋은가?
- 이미지, 브랜딩 등의 여러 요소가 좋은가?
- 사용자들이 사용하기에 매력적인가?
3. 접근성 (Accessible)
- 남녀노소 누구나 해당 서비스에 쉽게 접근할 수 있는가?
- 돋보기 기능, 음성 안내 기능과 같은 장애인을 고려한 장치들이 있는가?
4. 검색 가능성 (Findable)
- 사용자가 원하는 기능을 쉽게 찾을 수 있는가?
- 사용자가 원하는 정보를 쉽게 찾을 수 있는가?
5. 신뢰성 (Credible)
- 해당 서비스에 결함이 있는가?
- 해당 서비스의 가치가 과장되어 있는가?
- 사용자의 개인 정보 보안에 대해 신뢰할 수 있는가?
6. 사용성 (Usable)
- 해당 서비스를 사용하기 쉬운가?
- 해당 서비스의 기능들이 단순하고 직관적인가?
7. 가치성 (Valuable)
- 위의 모든 요소들을 총합하여 고객에게 가치를 제공하고 있는가?
위에서 나온것들을 만족시키기 위해서 User Flow 다이어그램을 이용하는 것이 좋다.
User Flow 다이어그램이란?
- 사용자가 제품에 진입한 시점을 시작으로 취할 수 있는 모든 행동을 다이어그램으로 나타낸 것이다.
직사각형 : 사용자가 보게 될 화면 ( ex. 회원 가입 페이지, 로그인 페이지 … )
다이아몬드 : 사용자가 취하게 될 행동 ( ex. 로그인, 버튼 클릭, 업로드 … )
화살표 : 화면과 행동을 연결시킴
User Flow 다이어그램을 사용하면, 흐름 상 어색하거나 매끄럽지 않은 부분을 발견하여 수정할 수 있고, 필요한 기능을 추가하거나 필요없는 기능을 삭제할 수 있다.
이를 통해 다듬어 나가는 과정을 거치면 보다 더 좋은 UX로 개선해 나아갈 수 있다.
제이콥 닐슨의 10가지 사용성 평가
- 제이콥 닐슨이 제시한 UI/UX의 사용성 평가이다.
- 서비스 중인 애플리케이션의 평가에 사용된다.
- 제품 설계 단계에서 완성도를 높이기 위해 사용할 수 있다.
1. 시스템 상태의 가시성 (Visibility of system status)
- 합리적인 시간 내에 적절한 피드백을 통해 사용자에게 진행 상황에 대한 정보를 항상 제공해야 한다.
- ex) 다운로드 상황
2. 시스템과 현실 세계의 일치 (Match between system and the real world)
- 내부 전문용어가 아닌 사용자에게 친숙한 단어, 구문 및 개념을 사용한다.
3. 사용자 제어 및 자유 (User control and freedom)
- 현재 진행 중인 작업에서 벗어날 수 있어야 한다.
- 실수로 수행한 작업을 취소할 수 있어야 한다.
- 탈출구를 명확하게 제공해야 한다.
- ex) 휴지통에서 삭제 취소, 다운로드 중지
4. 일관성 및 표준 (Consistency and standards)
- 외부 일관성 : 일관적인 사용자 경험을 제공하기 위해서 플랫폼 및 업계의 관습을 따라야 한다.
- 내부 일관성 : 사용자가 혼란스럽지 않도록 제품의 인터페이스나 정보 제공에 일관성이 있어야 한다.
5. 오류 방지 (Error prevention)
- 오류가 발생하기 쉬운 상황을 제거하여 사용자의 실수를 방지해야 한다.
- ex) 데이터를 삭제하기 전에 한번 더 확인한다.
6. 기억보다는 직관 (Recognition rather than recall)
- 사용자가 기억해야 하는 정보를 직접적으로 보여준다.
- ex) 자동완성, 연관검색
7. 사용의 유연성과 효율성 (Flexibility and efficiency of use)
- 초보자와 전문가 모두에게 개별 맞춤 기능을 제공해준다.(ex. 단축키)
8. 미학적이고 미니멀한 디자인 (Aesthetic and minimalist design)
- 인터페이스에는 관련이 없거나 불필요한 정보는 포함되지 않도록 한다.
- 콘텐츠와 기능의 우선순위를 정하고 우선순위가 높은 것에 대해 잘 제공하고 있는지 확인한다.
9. 오류의 인식, 진단, 복구를 지원 (Help users recognize, diagnose, and recover from errors)
- 사용자가 이해할 수 있는 언어를 사용하여 문제가 무엇인지 정확하게 표시한다.
- 문제에 대한 해결 방법을 제안한다.
10. 도움말 및 설명 문서 (Help and documentation)
- 추가 설명이 필요 할 것 같은 곳에 설명을 한다.
- 상황에 따라 이해하는데 도움이 되는 문서를 제공한다.
