안녕하세요 오늘은 사용성 평가 기준 10가지에 대한 내용을 알아 보겠습니다.
사용성 평가 기준은 닐슨 노먼 그룹(Nielsen Norman Group)의 공동 설립자인 제이콥 닐슨(Jakob Niels)이 제시하였는데요. 사용자 경험을 높이고, 직관적이고 사용하기 쉬운 시스템 설계를 위한 체크리스이며 UX/UI 디자인 평가와 개선에 유용한 척도가 되었습니다. 각 항목을 알아보겠습니다.
사용성 기준 (Usability Heuristics) 10가지
1. 사용자에게 시스템의 현재 상태를 시각화하여 보여준다.
2. 현실세계와 부합하도록 시스템을 설계한다.
3. 사용자에게 적절한 통제권을 부여한다.
4. 일관성과 표준성을 높인다.
5. 사용자의 실수를 방지할 수 있도록 설계한다.
6. 사용자가 적은 인지적 노력으로 시스템을 사용할 수 있게 한다.
7. 시스템을 유연하게 사용할 수 있도록 한다.
8. 심미적으로 간결한 시스템을 제공한다.
9. 에러 발생 시 스스로 문제를 파악하고 수정할 수 있게 설계한다.
10. 충분한 도움말을 제공한다.
출처 : https://www.nngroup.com/articles/ten-usability-heuristics/
이렇게만 보니 어렴풋이 알 것 같지만 아직 머릿속에 구체적으로 그려지진 않아 여러 앱들의 사례와 함께 자세한 내용을 살펴보겠습니다. 😊
1. 사용자에게 시스템의 현재 상태를 시각화하여 보여준다.
☑️ 적절한 피드백을 통해 사용자에게 진행 상태를 알려준다.
GOOD
현재 상태 피드백을 알기 쉽게 주는 서비스로 삼쩜삼과 토스 예시를 가져와 보았습니다.
삼쩜삼의 경우, "거의 다 됐어요! 조금만 기다려 주세요." 와 같이 친숙한 어투로 진행률에 따라 안내 멘트와 진행률이 표시되는 인터렉션과 함께 보여줘 진행 상황을 알려줍니다.
토스의 경우에도 각 항목별로 진행 상태에 따라 체크(완료), 점 3개(진행중), 연결 필요 문구 (앱에 연동되지 않은 정보)로 인터랙션을 통해 실시간으로 알려줍니다.
2. 현실세계와 부합하도록 시스템을 설계한다.
☑️ 컨트롤이 실제 세상에서의 규칙을 따르고, 사용자가 현실에서 사용하는 사물 형태와 언어를 사용한다.
GOOD
아이폰 계산기 앱은 실제 계산기의 디자인을 동일하게 적용해 처음 사용하는 사람도 사용법을 알기 쉽도록 하였습니다.
기타 튜너 앱의 경우에도 기타에 익숙하지 않은 초심자도 화면만 보고 그대로 따라하면 튜닝을 할 수 있도록 실제 기타 줄의 위치와 음을 매칭하였습니다.
3. 사용자에게 적절한 통제권을 부여한다.
☑️ 사용자가 원할 때 프로세스에서 물러나거나 작업을 취소하고 이전 상태로 돌아갈 수 있게 한다.
BAD
채용 정보를 위해 이용하던 앱인 수퍼루키의 경우, 뒤로 가기 버튼이 없어 많은 불편함을 겪었는데요. 채용 공고를 확인 후 뒤로 가려고 해도 뒤로 갈 수 있는 수단이 없었습니다. 다시 채용 공고 목록을 보려면 아예 앱을 종료하고 다시 들어가야 하는 불편이 개선되지 않아 언젠가부턴 쓰지 않게 되었던 앱입니다.
4. 일관성과 표준성을 높인다.
☑️ 고객이 일반적으로 기대하는 관례를 따르고, 같은 기능일 때엔 같은 표시와 언어를 사용하여 일관성을 유지한다.
(일관성을 유지하지 못하면 새로운 것을 배우도록 강요하여 사용자의 인지 부하가 증가할 수 있음)
GOOD BAD
카테고리 기능은 많은 앱에서 햄버거 버튼을 누르거나, 상단 카테고리 바를 통해 들어가게 됩니다. H&M의 경우 아이콘에 대해 기대하는 기능을 적절한 아이콘으로 잘 나타내 주고 있습니다. (햄버거 버튼 : 카테고리 / 돋보기 : 서치 검색)
그런데 유니클로의 경우, 카테고리를 찾는 과정에서 조금 버벅일 수 밖에 없었는데요. 햄버거 버튼이 없어서 상단에 카테고리 레이블로 보이는 영역을 클릭해도 카테고리가 열리지 않았기 때문입니다. 가운데 돋보기 버튼을 누르고 나서야 서치 검색 기능과 함께 카테고리가 펼쳐졌습니다.
돋보기가 찾는다는 의미라면, 카테고리 역시 상품을 찾기 위한 기능으로 의미 상 관련이 없진 않습니다. 하지만 검색을 해서 찾는 영역이 주로 돋보기로 표시되기에 멘탈모델과 어긋나서 헤맸던 부분입니다.
5. 사용자의 오류를 방지할 수 있도록 설계한다.
☑️ 실수가 발생하기 쉬운 조건에서 사용자에게 작업을 실행하기 전에 확인 옵션을 제공한다.
☑️ 오해로 인한 오류가 생길 수 있는 환경을 방지하기 위해 사용자의 멘탈모델에 맞는 용어 및 표시를 사용한다.
GOOD
1인 가구다보니 집 계약기간이 끝나면 이사를 가게 되고, 배달앱이나 쇼핑앱엔 자연스럽게 여러개의 주소가 남아있게 됩니다. 그래다보니 이사를 한 지 얼마 되지 않았을 때엔 이전 집이 기본 주소로 등록되어 있어 그 쪽으로 배달을 하는 실수를 종종 하곤 했습니다.
두잇의 주소 확인 문구는 이러한 실수를 방지해 줍니다. 배경과 대비가 강한 색과 나타나는 인터랙션으로 눈에 띄기 때문에 지나칠 일도 없습니다. (이 문구 덕분에 또다시 잘못된 주소로 배달할 뻔한 일을 막은 적이 있어 정말 감사했던 부분 중 하나입니다.)
6. 사용자가 적은 인지적 노력으로 시스템을 사용할 수 있게 한다.
☑️ 사용자가 기억해야 할 정보를 줄이고, 필요할 것으로 예상되는 정보를 미리 알려준다.
GOOD
로그인을 위해 간편 로그인 수단을 선택하다 보면 가끔 이 앱을 예전에 어떤 수단과 연동해서 로그인 했었는지 기억이 안나곤 합니다. 로그인 했던 것과 다른 수단을 선택하고 나서 해당 수단을 연동해 회원가입 하는 창이 뜨고 나서야 이 수단과 연동된 것이 아님을 깨닫고 다시 돌아가 다른 수단으로 로그인을 시도하는게 흔한 일이었습니다.
하지만 지그재그에서는 이전에 연동했던 로그인 수단 옆에 최근 로그인이라는 안내 문구를 덧붙여 이전 로그인 수단을 기억해 내야하는 수고로움을 덜어줍니다.
7. 시스템을 유연하게 사용할 수 있도록 한다.
☑️ 각 사용자에 맞게 기능과 콘텐츠를 편집할 수 있도록 한다.
GOOD
하나 은행 앱에서는 홈 설정을 통해 인터페이스를 커스터마이징 할 수 있습니다. 다크모드/화이트 모드 설정, 기본 홈/맞춤 홈, 큰글씨 모드, 계좌 순서 등의 편집을 통해 나에게 가장 편리한 형태로 사용할 수 있습니다.
또 유용했던 기능 중 하나는 잔액 숨김 기능입니다. 가끔 한 명이 결제하고 그 자리에서 송금해 줄 때 잔액이 크게 보이는 게 괜히 신경 쓰일 때가 있었는데요. 잔액을 숨김으로 표시해두면 앱을 끄고 다시 실행해도 숨겨진 채로 송금이 가능합니다. 섬세한 기능이라는 생각이 드네요.
8. 심미적으로 간결한 시스템을 제공한다.
☑️ 필수 요소에 집중해 디자인한다. 인터페이스의 시각적 요소가 사용자가 수행하려는 일에 필요한 것인지 확인한다.
BAD
알람앱을 찾다가 아래쪽에서 음악 알람이라는 앱을 발견해 호기심에 다운받아 보았는데요. 팝업창 문구에서 읽기 불편한 개행과 어울리지 않는 이모티콘, 정각 알림이라는 문구 앞에 알 수 없는 풍경 아이콘이 삽입되고, 앱 배경 역시 단색이 아닌 풍경 사진 혹은 일러스트로 채워져 있는 걸 보실 수 있습니다. 필수 요소에 집중해 디자인 해야 하는 것이 왜 중요한지를 알 수 있었습니다.
9. 오류 발생 시 스스로 문제를 파악하고 수정할 수 있게 설계한다.
☑️ 문제가 무엇인지 이해할 수 있는 언어로 안내하고, 오류를 해결할 수 있는 바로가기 솔루션을 제공한다.
BAD GOOD
와이파이 연결이 끊긴 상황에서 컬리 앱은 위와 같이 문제 발생 원인을 제시해 주지 않는 안내 문구를 띄워 주었는데요. 듀오링고의 경우엔 현재 오류의 원인(오프라인 상태)와 해결책(인터넷 연결), 현 상태에서 이용 가능한 기능(홈 화면 레슨)까지 친절하게 안내해 주고 있었습니다.
10. 충분한 도움말을 제공한다.
☑️ 도움말은 검색하기 쉽고, 구체적이고 명료하게 안내한다.
GOOD
궁금한 점이 생기면 저는 주로 자주 묻는 질문을 찾곤 합니다. 메뉴얼은 딱딱한 문구와 용어로 장황하게 쓰여 있어 읽기 꺼려지고, 고객 센터로 전화 연결이 어려운 상황에서 유용한데요. 특히 절차도 복잡하고 발급 받아야 하는 서류 종류들도 여러 종류인 일들을 처리할 때엔 자주 묻는 기능이 필수인 것 같습니다.
***
이렇게 사용성 평가 기준을 알아보았는데요. 좋은 사용성이라는 것이 알 듯 하면서도 추상적인 느낌이었는데 사용성 평가 기준과 같이 참고할 수 있는 가이드가 있어 이해하는데에 도움이 되었습니다. 추후 UX 기획 프로젝트에서도 해당 기준들을 잘 유념해서 진행해 보도록 하겠습니다. 오늘 학습한 내용 중 부족하거나 더 알아야 할 점이 있다면 언제든지 알려주세요! 더 나은 성장을 위해 피드백은 언제나 환영입니다 😊
'UXUI 학습일지' 카테고리의 다른 글
| [UI 이론] UI 구성 요소를 알아보자 (0) | 2024.10.11 |
|---|---|
| [UX 이론] UX와 관련된 여러가지 개념들 (8) | 2024.10.09 |
| [UX 이론] 사용자 조사 방법을 알아보자 (5) | 2024.10.03 |
| [UX 이론] UX 기획 프로세스 : UCDC (User Centered Design Canvas) (1) | 2024.10.02 |
| [툴/Figma] 피그마를 쓰는 이유 (0) | 2024.09.04 |
