#08. UX 관점에서 보는 가독성 원칙
모바일 앱 UI/UX 가이드
안녕하세요. UX 컨설턴트 전민수입니다.
제가 최근 홀릭스에서 365 day 하루도 빠지지 않고 UX 라이브 Zoom 강의를 진행하고 있습니다.
4개 UX 강좌 진행 중에 있습니다.
[Live UX 강좌1] 홀릭스에서 매일 UX Quiz 풀어보면서 자신의 UI/UX 지식의 체크해 보세요~
[Live UX 강좌2] 홀릭스에서 두 달 만에 완성하는 UX 포트폴리오 스터디를 통해 UX 포트폴리오 만들어 보고, 1:1 코칭받아 보세요~
[Live UX 강좌3] 홀릭스에서 UX 리서치 A-Z 기초부터 고급 실력까지 쌓아보고, 1:1 코칭받아 보세요~
[Live UX 강좌4] 홀릭스에서 UX 설계 A-Z 스킬을 쌓아보고, 1:1 코칭받아보세요~
위 모든 Live 강좌에 대해 일주일 무료 체험 쿠폰을 드리고 있으니, 관심 있는 분은 아래 링크를 클릭해 주세요. 더 자세한 Live 강의 커리큘럼 살펴볼 수 있습니다.
가독성은 단순히 정보를 전달하는 것이 아니라 시각적으로 전달된 정보를 사용자가 이해할 수 있도록 구성해야 합니다. UI 모형에서를 이를 가독성이라고 합니다.
모바일 앱에서 가독성 적용 사례는 다음과 같습니다.
중요 콘텐츠 알림 (속보성 콘텐츠, 나의 주요 활동 알림)
사용자 행위에 따른 인터랙션 발생 (현재 메뉴 상태, 현재 과업 단계, 에러 메시지 발생)
정보 전달 (제목 강조, 화면 영역 강조, 글자 크기 조절, 폰트 조절)
강조 색상 적용 (검색 키워드 시각화. 액션 버튼 시각화, 빠른 시각적 피드백)
중요 콘텐츠 알림
속보성 콘텐츠 인지
사용자에게 반드시 알려야 할 속보성 콘텐츠가 있다면 색상 대비 등을 통해 사용자 눈에 잘 띄도록 합니다. 예를 들어 네이버와 Daum 모바일 웹 뉴스에서 뉴스 속보가 발생하면 다른 뉴스 영역에 비해 색상 대비 및 폰트 크기를 키우고 있습니다.
나의 주요 활동 알림
시스템은 사용자가 알아야 되는 사항에 대해 바로 인지할 수 있도록 해당 기능을 시각적으로 구성해 눈에 잘 띌 수 있게 해야 합니다. 예를 들어 페이스북과 카카오톡은 사용자에게 알려야 할 사항에 대해 페이지 하단 메뉴 영역에 숫자로 명시하고 있습니다.
페이스북 하단 영역: Messages 및 Notifications 알림 사용자 행위에 따른 인터랙션 인지
현재 메뉴 상태
시스템은 사용자가 선택한 메뉴를 시각화해 현재 어떤 정보를 조회하는지 직관적으로 알 수 있도록 구성해야 합니다. 네이버 밴드는 현재 사용자가 조회 중인 정보가 어느 위치(메뉴)인지 시각적으로 알 수 있게 구성했습니다.
네이버 밴드: 하단 선택 메뉴(피드) 활성화 현재 과업 단계
사용자가 원하는 페이지에 쉽게 이동할 수 있도록 과업 단계는 직관적으로 인지할 수 있게 구성해야 합니다. AXA다이렉트는 보험료 계산 산출이 어느 단계인지 쉽게 인지할 수 있도록 색상으로 활성화하고 있습니다.
에러 메시지 발생
에러 메시지 발생 시 문구가 눈에 잘 띌 수 있도록 다른 영역에 비해 강조가 되어야 합니다. 예를 들어 카카오택시의 경우 현재 위치를 재확인하기까지 다른 선택을 비활성화 처리하여 오류 메시지를 강조합니다.
하나은행. 오류 메시지 강조 정보 전달
제목 강조
콘텐츠 페이지 상단 영역에 제목을 상시 노출해 사용자가 어떤 콘텐츠를 조회하는지 알 수 있어야 합니다. ‘인스타그램’에서는 사용자가 정보 검색을 할 경우, 어떤 정보를 검색한 결과 값인지 알 수 있게 해시태그 검색어(토마토)가 상위에 직관적으로 명시되어 있습니다.
인스타그램: 페이지 상단에 '검색어(토마토)' 상시 고정 화면 영역 강조
화면 영역 내 강조 부분은 시각적으로 눈에 잘 띄게 해야 합니다. 해외 온라인 강좌 사이트인 Udemy는 강좌 목록 영역에 별점을 눈에 잘 띄게 노출해 강좌에 대한 평판(인지도 등)을 바로 알 수 있습니다.
Udemy 추천 강좌 목록에 별점이 눈에 잘 띈다
글자 크기 조절
연령층을 고려해 콘텐츠 제공 시 글자 크기 조절 기능을 제공해야 합니다. 네이버 뉴스의 경우 콘텐츠 페이지에 우측 영역에 글자 크기 조절 기능을 제공해 가독성을 높였습니다.
네이버 뉴스: 글자 크기 조절 버튼 제공 글자 폰트 변경
본문 페이지에 글꼴 설정(굴림, 돋움, 바탕, 맑은고딕, 나눔고딕) 기능이 제공되어 본문에 대한 가독성을 높일 수 있습니다.
강조 색상 적용
검색 키워드 시각화
검색 결과, 키워드를 한 눈에 인지할 수 있도록 눈에 띄는 색상 등으로 표시하여 눈에 잘 띄도록 해야 합니다. 예를 들면 서울시 정보소통광장의 경우 검색 결과 페이지에서 검색 키워드를 한 눈에 인지할 수 있도록 노란색 색상으로 표시하고 있습니다.
액션 버튼 시각화
액션 버튼은 시각적으로 눈에 잘 띄게하여 사용자의 다음 행동을 유도해야 합니다. 아마존은 Add to Caet 기능을 눈에 잘 띄는 버튼으로 구성했습니다.
아마존: Add to Cart 버튼 인지 여부 빠른 시각적 피드백
화면에 선택 사항이 많은 경우 사용자가 어디를 선택했는지 바로 인지할 수 있도록 빠른 시각적 피드백이 요구됩니다. 예를 들면 CGV는 어디 좌석을 선택했는지 알 수 있도록 붉은색으로 표시해 좌석 선택이 쉽습니다.
전민수 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
