[UX 리서치] 휴리스틱 10가지 원칙 사용성 User Interface 디자인

요약 : 10가지 일반적인 유저 인터페이스 디자인 원칙으로 광범위한 적용내용이기에 "Heuristics 휴리스틱"이라고 불린다. 

 

-

1.시스템 상태 가시성

사용자에게 진행 상황에 대한 정보를 제공해야한다. 

사용자가 현재 시스템 상태를 알 수 있도록 해야한다. 지금 어느 단계에 있는지 알고 다음 단계를 쉽게 결정 할 수 있도록 학습시킬 수 있어야한다. 예측 가능한 상호작용은 서비스뿐만 아니라 브랜드에 대한 신뢰를 높인다.

 

- 시스템 상태를 명확하게 전달

- 사용자에게 알리지 않고 결과가 초래되지 않도록 해야함

- 사용자에게 피드백을 최대한 빨리 제공 (즉시 제공이 바람직함)

- 개방적이고 지속적인 커뮤니테이션을 통해 신뢰를 쌓을 수 있음

 

예시

쇼핑몰에서 결제를 하기전단계에 있다면 어느 버튼을 눌러야지 결제가 가능한지 예측 할 수 있도록 디자인되야한다.

결제방법에 대해 의문 또는 에러가 생긴다면 즉시 문제의 해결방안을 찾을 수 있도록 안내해야한다.

 

-

2.시스템과 현실 세계의 매칭하기

디자인은 사용자의 언어를 사용해야한다. 전문용어보다는 사용자에게 친숙한 단어, 개념을 사용하여 자연스럽게 정보를 순서대로 그리고 논리적으로 인지 할 수 있도록 해야한다.

 

- 사용자가 단어의 정의를 찾아보지 않고도 의미를 이해 할 수 있도록 해야함

- 단어나 개념에 대한 이해도가 서비스를 만드는 제작자와 동일하다고 가정하지 말것

- 사용자 조사에서 사용자의 친숙한 용어를 발견하는 것도 해야함

 

예시

가스렌지 스위치가 가스렌지의 레이아웃과 동일하면같은 위치 어떤 렌지가 가열될 것인지 빠르게 파악 할 수 있다. 

배송이 지연되는 쇼핑몰에서 시스템에서 사용하는 에러코드 'Error: outOFst1129' 를 그대로 보여주는 것이 아닌 '제품의 재고 상태를 파악 중입니다. 시간이 걸리는 점 양해부탁드립니다.'라는 메세지를 보여준다. 

 

-

3.사용자의 선택권 및 자유도

사용자가 실수로 작업을 하게되는 경우가 많다. 실수를 하게 된 경우 원치 않은 행동을 취소하기 위한 '비상 출구'가 필요하다. 

취소 또는 단계를 뒤로 돌리는 방법을 사용자가 익히게 되면 어느 한 단계에서 갇히거나 좌절감을 느끼지 않을 수 있다. 

 

- 실행 취소 및 다시 실행 기능을 지원 

- 취소 단추와 같이 현재 상호 작용을 종료하는 명확한 방법을 보여줌

- 출구에 대해 명확하게 인지 시키고 찾을 수 있는지 확인하기

 

예시

빠르게 실행을 취소하고 다시 복구 할 수 있도록 새로고침 또는 삭제 버튼을 둔다.

 

-

 

4.일관성 유지 및 표준 준수 

사용자는 다른 말, 상황 또는 행동이 같은 것을 의미하는지 궁금해 할 필요가 없다. 플랫폼 및 업계에서 통용되는 일반적인 방식을 따라 일반적인 디자인을 적용한다. Jakob의 법칙은 사람들은 대부분 우리가 만든 것이외 다른 디지털 제품을 사용한다고 말한다. 다른 제품들에서 사용자가 경험하는 기대를 우리 제품에서 적용하는 것이 더 효율적이다. 그렇지 않으면 새로운 것을 배우도록 강요하여 학습시간이 비효율적으로 소요된다.

 

- 시장에서 통용되고 있는 업계의 관례를 준수하기

- 우리 제품, 서비스에서 사용되는 일관성 유지하기

 

예시

체크인 카운터는 보통 호텔 앞에 있다. 이런 기대는 고객의 기대와 일치하여 학습시간을 줄인다. 만약 체크인 카운터가 제일 꼭대기 층에 있거나 호텔 지하에 있다면 고객의 기대와 시장에서 통용되는 업계 관례가 아니기에 헤맬 수 있다.

 

-

 

5.에러예방

좋은 오류 메세지도 좋지만 가장 좋은 디자인은 애초에 문제가 발생하지 않도록 예방하는 것이다. 오류가 발생하기 쉬운 조건을 제거하거나 사용자에게 조건을 확인할 수 있도록 확인 옵션을 제공하는 것이다. 실수에는 두가지 유형이 있는데 무의식적인 실수와 사용자의 인지 모델과 서비스 설계의 불일치에 의한 의식적인 실수가 있다.

 

- 예방해야하는 오류 우선순위 정하기 :  비용이 많이 드는 오류를 먼저 예방한 다음 작은 오류들을 예방한다

- 유용한 제약 조건과 좋은 기본값을 제공해서 실수를 줄이기

- 실수를 예방하기 위해 기억해야하는 많은 것이 있지 않도록 부담을 줄이고, 실행취소와 경고 알리기

 

예시

굴곡이 많은 산길의 가드 레일은 운전자가 절벽에서 떨어지는 것을 방지합니다. 

쇼핑몰에서 품절된 상품의 경우 미리 옵션에서 제거 또는 선택불가 하도록 조치를 취합니다.

 

-

 

6.직관성

사용자가 모든 정보를 기억하지 않아도 사용 할때 필요한 정보들은 쉽게 확인, 검색 할 수 있어야한다. (예-필터 또는 메뉴 항목을 만들어서 제공) 인간의 단기 기억력은 제한되어 있습니다. 사용자가 인지해야하는 정보의 양을 줄여주도록 인터페이스는 디자인되어야한다.

 

- 사용자가 인터페이스의 정보를 기억할 필요 없이  인식 할 수 있도록 

- 사용자에게 외워야 하는 긴 튜토리얼대신 상황에 맞는 도움말 제공

- 사용자가 기억해야하는 정보를 줄이기

 

예시

엑셀의 필터 기능은 쉽게 정보를 기억하지 않고도 찾아낼 수 있다.

이메일함에서 중요한 이메일 라벨 기능을 활용하여 표시를 해두면 다음에 쉽게 정보를 기억하지 않도록 확인 할 수 있다.

 

-

 

7.유연함과 효율성

사용자 중에는 초보자와 전문가가 있을 수 있다. 전무가들에게는 단축키 같은 것으로 작업을 할 수 있도록 경로를 제공하고 초보자는 단축키를 알지 못해도 작업을 할 수 있도록 설계한다. 

 

- 단축키 또는 터치 제스쳐들을 제공하여 효율을 높일 수 있도록

- 사용자가 원하는 방식으로 제품을 조정 할 수 있도록 맞춤 옵션 제공

 

예시

지도에서 길찾기를 누르게 되면 골목으로 빨리 갈 수 있는 최단거리 옵션과 큰길로 돌아가지만 지역정보를 잘 모르는 초보자가 갈 수 있는 두가지 루트를 제공하고 선택하도록 한다. 

 

-

 

8.핵심 정보를 심미적이고 심프하게 보여주기

관련이 없거나 필요없는 정보는 제거하여 가시성을 증대한다. 사용자가 확인해야하는 컨텐츠와 디자인에 초점이 맞춰져있는지 확인해야한다. 사용자가 수행할 수 있는 기본 목표들이 지원되는 디자인으로 구성되야한다.

 

- 필수적인 컨텐츠와 UI 시각디자인을 표현함

- 필요헚는 요소들로 유저가 원하는 정보 이외의 것을 제공하지 않아야 함

- 해당 디자인을 지원하는 목적과 기능의 우선순위를 정해야함

 

예시

지나치게 화려하고 긴 애니메이션 효과 때문에 로딩 속도가 늘어나 유저가 이탈하는 경우가 있다면 간단하고 필요한 간단한 이미지로 바꿔야한다.

 

이커머스 상품 상세 페이지에서 해당페이지와 관련없는 도움말 또는 상품에 대한 설명문구때문에 지나치게 페이지가 길어지는 경우 다음 정보를 빠르게 확인 할 수 있도록 펼치기 접기 버튼을 만들어 스크롤을 줄여야 한다. 

 

-

9. 명확한 에러문구로 오류를 인식하고 복구하도록 지원

오류는 쉬운언어로 표현해야하며, 문제를 정확하게 표시하고 건설적으로 해결책을 제시해야한다.

 

- 굵은 빨간색 텍스트와 같은 기존 오류 메세지를 시각적으로 사용

- 사용자에게 이해할 수 있는 언어로 잘못된 점을 알려주고 전문용어 피하기

- 오류를 즉시 해결할 수 있도록 바로가기 솔루션같은 것을 제공하기

 

예시

잘못된 이메일 주소를 입력하면 에러메세지를 보여주고 바르게 입력하도록 안내 할 수 있다. 

입력 할 수 있는 최대 값의 숫자보다 더큰 값을 입력했다면 입력 할 수 있는 최대값을 안내하고 값을 교정해준다.

 

-

 

10. 도움말 서비스

시스템에 별도의 설명이 필요 없는 것이 최선이다. 하지만 사용자가 서비스에서 원하는 것을 수행하기 위해 도움이 필요할때는 정보를 제공해야한다. 도움말 및 문서 내용은 검색하기 쉬워야 하고 사용자 입장에서 쓰여져야한다. 간결하고 수행해야하는 구체적인 단계를 나열한다. 

 

- 도움말을 쉽게 찾을 수 있도록 제공하기

- 사용자가 필요로 하는 시점에 도움말을 볼 수 있도록 제시하기

- 수행해야 할 구체적인 단계를 나열하기

 

예시

부득이 하게 사용해야하는 서비스특성의 어려운 용어의 경우 툴팁을 활용하여 용어에 대한 설명을 쉽게 확인하고 끌 수 있도록 한다.

 

-

-

참고자료 : nngroup - 10 Usability Heuristics for User Interface Design