인식성이란 무엇인가?
UX 디자인 원칙
인식성이란 무엇인가?
인식성의 원칙 1. 메뉴 색상은 배경색과 대비되어야 합니다.
메뉴가 한눈에 잘 인지되기 위해서는 메뉴 색상과 배경 색상은 대비되어야 합니다.
개편 전 이마트는 상단 배경 색상 영역이 노란색임에도 불구하고 하얀색의 로고 색상에 맞춰 메뉴, 장바구니, '몰이동'의 색도 하얗게 보여줘 상단 영역에서 제공하는 메뉴 등이 눈에 잘 띄지 않습니다.
개편 전 이마트몰반면, 이후 바로 개편된 이마트의 경우, 상단 영역에 배경 색상인 노란색을 사용하며, '메뉴, 알림, 몰이동'은 노란색과 대비되는 검은색으로 보여줘 눈에 잘 띕니다.
바로 개편된 이마트몰
인식성의 원칙 2. 숫자는 한눈에 인지되어야 합니다.
입력한 숫자를 한눈에 알아보기 위해서는, 숫자에 천 단위별 콤마가 자동적으로 제공되어야 합니다.
롯데닷컴은 필터에서 가격 대 설정 시 천 단위별 콤마가 나타나, 가격이 제대로 입력되었는지 확인하기 쉽습니다.
반면, 인터파크는 필터에서 가격대 설정 시 천 단위별 콤마가 없어, 가격이 제대로 입력되었는지 인식성이 떨어집니다. 예를 들어 콤마가 없어 백만원으로 입력했는지, 십만원으로 입력했는지 한눈에 파악하기 어렵습니다.
인식성의 원칙 3. 상위 메뉴와 하위 메뉴는 명확하게 구분되어야 합니다.
스타벅스에서 스마트 오더 선택 시 나의 위치에서 2km 이내의 '가까운 매장과 나의 매장'을 선택할 수 있도록 탭 메뉴 형태로 보여주고 있습니다.
그런데 자세히 살펴보지 않으면 가까운 매장 하위 옵션인 '지도로보기와 리스트보기'도 옵션이 아닌 탭 메뉴처럼 보입니다.
마치 4개의 탭 메뉴가 있는 것 같습니다.
'지도로 보기와 리스트로 보기'는 '가까운 매장'의 하위 옵션이므로 탭 메뉴가 아닌, 선택 옵션 버튼으로 보여주는 것이 더 좋을 듯합니다.
최근 스타벅스의 경우, 상단 탭 메뉴(가까운 매장, 자주 가는 매장)만 있고 하위 메뉴는 제공되고 있지 않아 이전에 비해 사용성이 더 좋아졌습니다.
최근 스타벅스인식성의 원칙 4. CTA 버튼은 한눈에 잘 인지가 되어야 합니다.
개편 전 해피포인트에서 로그인 페이지에서 패스워드 입력 시 키패드가 주요 액션 버튼인 로그인을 가리고 있어 버튼 선택이 불편합니다. 주요 액션 버튼은 사용자의 눈에 잘 띄워야 하므로 키패드는 주요 액션 버튼 아래에서 펼쳐져야 합니다.
개편 전 해피포인트 반면, 최근 해피포인트 로그인 시 키패드는 주요 액션 버튼인 로그인을 가리지 않아 버튼 선택이 쉽습니다.
개편 이후 해피포인트 전민수 UX 컨설턴트 소개
(UX 실무 경력: 27년차 UX 전문가: LG전자, 서울시청 등 약 300회 이상 UX 컨설팅 수행)
(UX 강사 경력: 23년차: 삼성, SK, KT 등 약 1,000회 이상 UX 강의 진행)
https://brunch.co.kr/@ebprux/1332
[실시간 Live 강좌] (PM/PO/UI/UX/리서치) 수강생 모집 중
(이비피알유엑스 라이브클래스에서 매월 최소 1개에서 최대 4개 강좌 (온라인) 줌 Live 강좌 진행) (PM/PO/UI/UX/리서치/UX 방법론&프로세스 프레임웍)
[VOD 강좌] (PM/PO/UI/UX/리서치) 수강생 모집 중
(인프런에서 총 20개 VOD UX 강좌를 오픈했습니다)
(PM/PO/UI/UX/리서치/UX 방법론&프로세스 프레임웍)
https://www.inflearn.com/users/196290
