brunch

매거진 UX 디자인의 모든 것

라이킷 77 댓글 38

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by UX 컨설턴트 전민수 Oct 04. 2016

#07. UX 관점에서 보는 이해성 원칙

모바일 앱 UI/UX 가이드

UX 컨설턴트 전민수입니다.

지난 5년간 브런치에서 아티클 작성한 것을 토대로, 여러분께 UX 아티클의 내용을 더 쉽게 전달 시키는 목적으로 별도 강의 촬영하게 되었습니다. 그간 UX 강의 촬영했던 영상을 편집해서 UX 라이브클래스 패키지 사이트에 오픈하게 되었습니다.

UX 라이브클래스 패키지를 통해 전체 178여개 UX 강좌를 하나의 패키지 형태(총 121시간 이상) 대 공개합니다. 특히, 브런치 구독자에 한해 2023년 3월 한정 이벤트 판매로 할인율 98%(정가 5,340,000원 > 할인가 99,000원, 평생 소장) 제공하고 있으니 여러분의 많은 관심 부탁드립니다.

https://ebprux.liveklass.com/packages/137053

(3월 한정 이벤트) UX 라이브클래스 패키지(총 121시간): 178개 UX 강의묶음, 할인율 98%, 할인가 99,000

매일 !!!! UX 방법론 A-Z, UX 리서치 A-Z 등 강의 진행합니다.

ebprux.liveklass.com

앞으로도 국내 환경에 맞는 UX 방법론을 더 연구하고, 브런치에 최대한 많이 공유하겠습니다.

감사합니다.

전달된 정보나 기능은 사용자가 쉽게 이해할 수 있어야 합니다. UI 모형에서는 이를 이해성이라고 합니다.

이해성 적용 사례는 다음과 같습니다.

튜토리얼 (학습 안내, 기능 업그레이드 안내)

메뉴 제공 목적 설명

다음 행위 예측

명확한 메뉴 레이블

명확한 컴포넌트 구성(아이콘/버튼, 조작 행위)

입력 필드 도움(텍스트 안내,아이콘 안내)

전문 용어에 대한 부연 설명

명확한 의미 전달

튜토리얼

학습 안내

애플리케이션을 이용 또는 조작하는 방법은 누구나 쉽게 이해할 수 있게 도움말을 제공해야 합니다. 예를 들어 토스 어플은 튜토리얼 통해 조작 방법에 대한 도움말을 순차적으로 보여준 뒤 어플을 시작하도록 도움을 주고 있습니다.

기능 업그레이드 안내

애플리케이션 업데이트 시 튜토리얼 통해 새로 변경된 기능은 누구나 알기 쉽도록 알려줘야 합니다. 예를 들어 다음(Daum) 어플은 튜토리얼 통해 이전과 다른 버전(탭 메뉴 제공과 알림 여부 기능)의 주요 업데이트 기능을 튜토리얼 통해 알려주고 있습니다.

메뉴 제공 목적 설명

콘텐츠 제공시 페이지에 대한 명확한 목적이 나타나야 합니다.

문화포털은 페이지 상단 타이틀 아래에 메뉴 제공 목적이 잘 나타나 있습니다.

다음 행위 예측

사용자가 어떤 행위를 하고자 할 때 다음에 어떤 페이지가 열리는지 인지할 수 있어야 합니다. 예를 들면 네이버 포탈은 콘텐츠 목록에 정보 출처가 명시되어 어느 영역으로 이동하는지 인지할 수 있습니다.

명확한 메뉴 레이블

메뉴 레이블 제공 시 직관적이고 의미 전달이 명확해야 합니다. 레이블 의미가 이중적이거나 불명확하면 사용자가 레이블 선택 시 사용자의 기대와 다른 형태로 보여줘 이용에 혼선을 가질 수가 있기 때문입니다. 예를 들면 페이스북의 경우 하단 영역에 직관적인 레이블과 아이콘이 있어 메뉴 의미를 이해하는데 도움이 됩니다.

페이스북. 하단 영역 메뉴의 레이블은 직관적인 의미를 담고 있습니다

명확한 컴포넌트 구성

아이콘/버튼

아이콘이나 버튼은 시각적으로 명확하고 직관적인 의미를 전달해야 합니다. 아이콘이나 버튼이 시각적으로 명확하면 사용자가 과업을 수행하는 데 있어 혼란을 겪는 일이 줄어들기 때문입니다. 예를 들어 페이스북 같은 경우는 하단 영역에 카테고리(뉴스피드, 요청, Messenger, 알림, 더보기)를 직관적으로 인지할 수 있게 관련 아이콘으로 제공해 카테고리의 의미를 보다 쉽게 파악할 수 있습니다.

조작 행위

화면 내 조작행위가 있다면 그 의미를 아이콘 등을 통해 명확히 전달해야 합니다. 예를 들면 유튜브의 경우 다음 동영상을 자동 재생할 것인지, 그렇지 않을 것인지를 켜짐과 꺼짐 스위치를 통해 의미를 전달하고 있습니다.

입력 필드 도움

텍스트 안내

사용자가 필드에 입력하는데 어려움이 없도록 도움말이 제공되어야 합니다. 예를 들어 코레일은 회원 가입 시 본인인증 과정이 있는 데 휴대폰 번호 입력 시 '-' 제외하고 숫자만 입력하라고 친절하게 안내하고 있어 회원가입하는데 불편함이 없습니다.

아이콘 안내

필드 입력에 대한 도움을 높이기 위해 도움말 아이콘이 제공될 수 있습니다.

예를 들어 네이버의 경우 아이콘 선택 시 덧글 작성 및 유의사항 안내가 제시되고 있습니다.

전문 용어에 대한 부연 설명

전문 용어 제공 시 사용자 누구나 쉽게 이해할 수 있도록 부연 설명이 제공되어야 합니다.

예를 들면 문화포털의 경우 '인문학강연이란?' 링크 선택 시 레이어 형태로 용어에 대한 부연 설명이 제공됩니다.

명확한 의미 전달

사용자가 실수 시 시스템은 현재 상태를 명확하게 표현하여 사용자가 다음 행위를 하는데 도움을 줘야 합니다. 예를 들어 은행 이체 시 인증서의 암호를 잘 못 입력하는 경우 '입력하신 인증서의 암호가 틀렸습니다. 암호를 다시 입력하십시오. 암호 총 5회(현재 4회 남음) 오류시 재시도하여 주시기 바랍니다.' 라는 암호의 잘 못 입력한 횟수를 명확하게 보여주고 있습니다.