1. 시스템 상태의 가시성(Visibility of system status) 2. 시스템과 현실 세계의 연결성(Match between system and the real world)
3. 사용자 통제와 자유(User control and freedom)
4. 일관성과 표준(Consistency and standards)
5. 오류방지(Error prevention)
6. 기억보다는 인지(Recognition rather than recall)
7. 사용의 유연성과 효율성(Flexibility and efficiency of use)
8. 심미적이고 최소화한 디자인(Aesthetic and minimalist design)
9. 사용자가 스스로 오류를 인식, 진단, 복구하도록 지원 (Help users recognize, diagnose, and recover from errors)
10. 도움과 문서화 (Help and documentation)
사용자 인터페이스(User Interface)를 위한 휴리스틱 평가
# 1. 시스템 상태의 가시성(Visibility of system status)
사용자가 지금 어느 시스템에 있고, 어디로 갈 수 있고, 어디를 지나왔는지 쉽게 이해시켜줄 필요가 있습니다가능한 빨리(이상적으로는 즉시) 사용자에게 피드백을 제공합니다. 사용자가 현재 상태를 알게 되면, 이전 상호 작용의 결과를 학습하고 다음 단계를 결정할 수 있습니다. 예측 가능한 상호 작용은 제품과 브랜드에 대한 신뢰를 만듭니다.
예시 : 당근 마켓 내가 판매하고 있는 상품의 [판매내역] "판매 중"인 상품, "거래 완료" 로 중고 상품의 현재 상황을 정리하여 보여준다
[시스템 상태의 가시성]을 잘 보여주는 당근마켓 사례
# 2. 시스템과 현실 세계의 연결성(Match between system and the real world)
: 디자인은 사용자의 언어로 말해야합니다. 타겟 고객이 실제 사용하는 언어, 개념 아이콘을 사용해서 사용자가 인터페이스 작동 방식을 더 쉽게 배우고 기억할 수 있습니다. 이는 직관적인 경험을 구축하는데 도움이 되기 때문입니다.
예시 : 슈퍼마켓의 물품 데이터 베이스 알파벳 순서로 물품 진열 VS 실 사용 카테고리별 상품 진열 어떤 마트를 가도, 알파벳 순서로 물품이 진열 된 곳을 찾기는 힘들 것입니다.
# 3. 사용자 통제와 자유(User control and freedom)
사용자가 실수를 할 때에도, 행위를 취소할 수 있는 방법과, 행위로 무슨 일이 일어날지 명확히 알 수 있는 정보를 제공해야 합니다. 사람들이 프로세스에서 뒤로 가거나 작업을 취소할 수 있어야 제품 사용의 자신감이 생겨납니다. 취소버튼과 같은 현재 상호 작용을 종료하는 명료한 방법을 알려줄 필요가 있습니다. 애플리케이션에서 출구가 명확하게 표시되고 발견 가능한지 확인하세요
예시 : 슬랙(slack) 이미 보낸 메시지를 편집, 삭제 할 수 있는 기능 사용자 통제와 자유 - slack
# 4. 일관성과 표준(Consistency and standards)
사용자는 우리 제품만 사용하지 않습니다. 대부분의 시간을 타사 제품을 이용합니다. 다른 제품에 대한 사용자의 경험은 자사 제품을 사용자에 대한 경험의 기대치를 설정합니다. 사용자가 어느 페이지를 보든지, 쉽게 이해할 수 있도록 기존의 유저 경험을 파악하고, 제품 안에서도 제목, 콘텐츠 영역은 일관적인 스타일을 유지하여 추가적인 학습이 없어도 경험을 원활히 진행할 수 있도록 사용자를 안내하세요.
예시 : 노션(notion) 일관적인 포맷으로 메모, 서류를 작성할 수 있도록 도와주는 노션 워드(word) 사용 경험이 있는 사용자라면 누구나 노션을 시작할 수 있을 정도로 직관적이고 심플하다 일관성과 표준 - 노션 화면
# 5. 오류방지(Error prevention)
사용자가 오류를 발생시키지 않도록 명확한 안내와 설명을 제공하고, 사용자에게 친숙한 방식으로 메시지를 작성할 필요가 있습니다. 예를 들어 [삭제], [저장]과 같은 버튼은 분리하여야 사용자가 어렵게 작성한 데이터가 손실되지 않습니다. 물론 실수를 저질렀다고 해도 시스템적으로 알려주는 것도 중요합니다.
예시 : Gmail 수신자를 깜빡하고 "보내기" 버튼만 눌렀을 때, 오류 메시지를 띄워 받는 사람을 지정하라고 안내해준다. 오류방지 - gmail
# 6. 기억보다는 인지(Recognition rather than recall)
시스템이 직관적일수록 연상을 통해 기억하기 쉽고, 학습 관련 비용이 절감됩니다. 예를 들어 “리스폰은 포르투갈의 수도입니까?”라는 질문과, “포르투갈의 수도는 무엇입니까?” 비교해보면 당연히 전자에 대답할 가능성이 더 큽니다. 원하는 것이 무엇인지 기억을 이끌어내게 하는 것보다는, 인지적인 노력을 줄여줄 선택지 옵션을 나열해주는 것이 사용자가 참여도가 높을 것입니다
예시 : 네이버 쇼핑 검색 시, 카테고리 노출 원하는 검색어를 입력하면 소비자가 원하는 스타일을 명확히 찾아갈 수 있도록, 카테고리/브랜드/컬러 등 다양한 선택지 옵션을 나열해 준다 기억보다는 인지 - 네이버 쇼핑 화면
# 7. 사용의 유연성과 효율성(Flexibility and efficiency of use)
초보자에서부터, 숙련자까지 모두에게 적합한 디자인을 제공하면 어떨까요? 새로운 사용자를 위해 설명이 충분하면서도 직관적인 인터페이스를 제공하면서, 사용자의 작업속도를 위한 단축키 또는 맞춤 설정 기능을 포함해 주면, 사용자들은 자신에게 적합한 방법을 선택할 수 있습니다.
예시 : photoshop 포토샵 첫 화면을 열면, 초보자를 위한 상세 가이드와 새로 도입된 신기능에 대해서 설명해 주며, 다양한 프리셋과 단축키를 제공한다. 사용의 유연성과 효율성 - 포토샵
# 8. 심미적이고 최소화한 디자인(Aesthetic and minimalist design)
예쁜 게 다입니다. 하지만 사용자 입장에서는 불필요한 디자인이 아닌, 가시성 높은 심플한 디자인이 가장 아름다운 디자인입니다. 사용자가 필요한 정보를 놓치게 만드는 인터페이스 요소를 찾아서 수정할 필요가 있습니다.
예시 : 카카오뱅크 기존 복잡해 보이는 은행 상품과 달리 기능을 한눈에 파악할 수 있는 이미지와 특징을 요약한 슬로건으로 금융 상품 이해를 돕는다 심미적이고 최소화한 디자인 - 카카오 뱅크
# 9. 사용자가 스스로 오류를 인식, 진단, 복구하도록 지원 (Help users recognize, diagnose, and recover from errors)
양식을 제출할 때 오류가 발생하면, 시스템은 어디에서 무엇이 잘못되었는지, 그 문제를 어떻게 해결하는지 알려 줘야 합니다. 물론 이때 나타나는 오류 메시지는 일반 언어(오류코드가 아닌)로 표현되어야 하며, 문제를 정확하게 표시하고 고쳐야 할 항목을 쉽게 연결해줘야 합니다.
예시 : 윈도우 문제 해결 관련된 문제들을 점검하고, 어떻게 해결해야하는지 도움을 제공하는 윈도우 문제 해결 솔루션을 클릭하면 현재 문제의 원인과 어떤 해결이 필요한지 알려준다. 사용자가 스스로 오류를 인식, 진단, 복구하도록 지원 - 윈도우
# 10. 도움과 문서화 (Help and documentation)
시스템에 추가 설명이 없으면 가장 좋겠지만, 사용자가 작업을 완료하는 방법을 이해시키게 하기 위한 문서를 제공해야 합니다. 도움말과 설명서는 검색하기 편리하고, 사용자의 작업 스텝에 발맞춰 보여줘야 합니다. 간결하게 수행해야 할 구체적인 단계를 나열하세요
예시 : 구글 고객 센터 자주 묻는 질문들을 카테고라이징 하고, 사용 흐름에 따른 상황별 해결책을 문서화로 정리하였다. 도움과 문서화 - 구글 고객 센터
