[번역] 사용자 인터페이스 디자인을 위한 10가지 유용한 지침

사용자 인터페이스 디자인을 위한 10가지 유용한 지침

요약: Jakob Nielsen의 상호작용 디자인에 대한 10가지의 일반적인 원칙. 구체적인 사용성 지침이 아닌 광범위한 경험적인 규칙이기 때문에 '휴리스틱'이라고 부릅니다.

 

1. 시스템 상태의 가시성

디자인은 항상 합리적인 시간 내에 적절한 피드백을 통해 사용자에게 무슨 일이 일어나고 있는지 알려야 한다.

 

사용자가 현재 시스템 상태를 알아야 이전 상호작용의 결과를 파악하고 다음 단계를 결정한다. 예측 가능한 상호작용은 제품과 브랜드에 대한 신뢰를 형성한다.

 

#1 예시: 쇼핑몰 지도의 "현 위치" 표시는 사람들이 현재 어디에 있는지 보여주며 그들이 어디로 가야 할지 이해하는 데 도움을 준다.

 

팁

- 시스템의 상태를 사용자에게 명확하게 전달한다 — 사용자에게 알리지 않고 결과를 초래하는 행동을 취하지 않는다.

- 가능한 한 빨리(가장 이상적인 것은 즉시) 사용자에게 피드백을 제공한다.

- 열린 소통과 지속적인 커뮤니케이션을 통해 신뢰를 구축한다.

 

2: 시스템과 실제 세계의 일치

디자인은 사용자의 언어로 말해야 한다. 내부에서 사용하는 전문용어 대신 사용자에게 익숙한 단어, 문구 및 개념을 사용한다. 정보가 자연스럽고 논리적인 순서로 나타나도록 실제 세계의 규약을 따른다.

 

설계 방식은 특정 사용자에 따라 크게 달라진다. 당신과 동료에게는 완벽하게 명확해 보이는 용어, 개념, 아이콘 및 이미지가 사용자에게는 익숙하지 않거나 혼란스럽게 느껴질 수 있다.

 

디자인의 컨트롤이 실제 세계의 규약을 따르고 원하는 결과에 부합할 때(자연 매핑), 사용자는 인터페이스 작동 방식을 더 쉽게 배우고 기억할 수 있다. 이는 직관적인 경험을 구축하는 데 도움이 된다.

 

#2 예시: 가스레인지 조절 요소가 가열판의 배치와 일치할 때, 사용자는 어떤 컨트롤이 어떤 가열판에 매핑되는지 빠르게 이해할 수 있다.

 

팁

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

- 단어나 개념에 대한 당신의 이해가 사용자의 이해와 일치할 것이라고 절대 상정하지 않는다.

- 사용자 연구를 통해 사용자에게 익숙한 용어와 중요한 개념에 대한 사용자의 멘탈 모델을 발견할 수 있다.

(* 멘탈 모델(Mental model) : 시스템, 사물이 실제로 어떠한 방식으로 작동할 것이라고 생각하는 인간의 사고 과정을 구조화한 것)

 

3: 사용자 제어 및 자유

사용자는 종종 실수를 한다. 그들은 긴 과정을 거치지 않고도 원하지 않는 작업에서 벗어날 수 있는 명확하게 표시된 "비상구"가 필요하다.

 

사람들이 프로세스에서 빠져나오거나 작업을 취소하기 쉽게 하여 자유와 자신감을 느끼도록 조성할 수 있다. 출구는 사용자가 시스템을 제어하고 막히거나 좌절감을 느끼지 않도록 도와준다.

 

 

#3 예시: 디지털 공간도 물리적 공간처럼 빠른 비상구가 필요하다.

 

팁

- 실행 취소 및 다시 실행을 지원한다.

- 취소 버튼과 같이 현재 상호작용에서 빠져나갈 수 있는 명확한 방법을 보여준다.

- 출구가 명확하게 표시되고 발견하기 쉬운지 확인한다.

 

 

 

 

4: 일관성 및 표준

사용자는 서로 다른 단어, 상황 또는 작업이 동일한 의미를 갖는지 의문을 가지지 말아야 한다. 플랫폼 및 산업 표준을 따르면 된다.

 

Jakob의 법칙에 따르면 사람들은 대부분의 시간을 자신의 제품이 아닌 다른 디지털 제품을 사용한다. 다른 제품에 대한 사용자 경험이 그들의 기대치를 설정한다. 일관성을 유지하지 못하면 사용자는 새로운 것을 배워야 하는 인지적 부담이 증가할 수 있다.

 

#4 예시: 체크인 카운터는 보통 호텔 입구에 위치한다. 이러한 일관성이 고객의 기대를 충족시킨다.

 

팁

- 내부 및 외부 일관성을 모두 유지하여 학습 가능성을 향상시킨다.

- 단일 제품 또는 제품군 내에서 일관성을 유지한다(내부 일관성).

- 확립되어 있는 업계 관행을 따른다(외부 일관성).

 

 

 

5: 오류 방지

좋은 오류 메시지는 중요하지만, 최상의 디자인은 문제가 발생하지 않도록 신중하게 방지하는 것이다. 오류가 발생하기 쉬운 조건을 제거하거나, 이를 확인하고 사용자가 작업을 확정하기 전에 확인 옵션을 제시한다.

 

오류에는 두 가지 유형이 있다: 실수와 착각이다. 실수는 부주의로 인한 무의식적 오류다. 착각은 사용자의 멘탈 모델과 디자인 간의 불일치에 기반한 의식적인 오류다.

 

#5 예시: 구불구불한 산길의 가드레일은 운전자가 절벽에서 떨어지는 것을 방지한다.

팁

- 노력의 우선순위를 정한다: 먼저 고비용 오류를 방지하고, 그 다음 작은 혼란을 방지한다.

- 도움이 되는 제약과 좋은 기본값을 제공하여 실수를 피한다.

- 기억의 부담을 제거하고, 실행 취소를 지원하며, 사용자에게 경고함으로써 착오를 방지한다.

 

 

 

 

6: 인식보다는 기억

요소, 작업 및 옵션을 보이게 하여 사용자의 기억 부담을 최소화한다. 사용자는 인터페이스의 한 부분에서 다른 부분에 대한 정보를 기억할 필요가 없어야 한다. 디자인을 사용하는 데 필요한 정보(예: 필드 레이블 또는 메뉴 항목)는 필요할 때 눈에 보이거나 쉽게 검색할 수 있어야 한다.

 

인간은 단기 기억의 한계가 있다. 인식을 촉진하는 인터페이스는 사용자가 해야하는 인지적인 노력을 줄인다.

 

#6 예시: 대부분의 사람들은 국가의 수도를 기억하는 것보다 인식하는 것이 더 쉽다. 사람들은 "포르투갈의 수도는 무엇인가요?"라는 질문보다 "리스본이 포르투갈의 수도인가요?"라는 질문에 더 정확하게 대답할 것이다.

팁

사용자에게 정보를 기억("회상")하도록 강요하는 대신 인터페이스에서 정보를 인식할 수 있게 한다.

사용자에게 기억해야 할 긴 튜토리얼을 제공하는 대신 맥락에 맞는 도움말을 제공한다.

사용자가 기억해야 할 정보를 줄인다.

 

 

 

7: 사용성의 유연함과 효율

초보 사용자에게는 숨겨진 단축키가 전문 사용자의 상호작용 속도를 높이면서 디자인이 초보자와 경전문 사용자 모두를 수용할 수 있게 한다. 사용자가 자주 하는 작업을 맞춤화하도록 한다.

 

유연한 프로세스는 다양한 방법으로 수행될 수 있기 때문에 사람들이 자신에게 맞는 방법을 선택할 수 있다.

 

#7 예시: 지도에는 일반 경로가 표시되지만, 그 지역을 잘 아는 현지인은 지름길을 이용할 수 있다.

 

팁

- 키보드 단축키 및 터치 제스처와 같은 가속기를 제공한다.

- 개별 사용자에 맞게 콘텐츠와 기능을 조정하여 개인화를 제공한다.

- 사용자가 제품이 작동하는 방식에 대해 선택할 수 있도록 맞춤 설정을 허용한다.

 

 

 

8: 미적이고 최소한의 디자인

인터페이스는 관련이 없거나 필요하지 않은 정보가 포함해서는 안 된다. 인터페이스의 모든 추가 정보 단위는 관련된 정보 단위와 경쟁하고 상대적으로 보이지 않게 한다.

 

이 휴리스틱은 밋밋한 디자인을 사용해야 한다는 의미가 아니라 콘텐츠와 시각적 디자인을 필수적인 요소에 집중시키는 것에 관한 것이다. 인터페이스의 시각적 요소가 사용자의 주된 목표를 지원하는지 확인한다.

 

#8 예시: 장식이 과도한 티포트는 불편한 손잡이나 씻기 어려운 노즐과 같은 과도한 장식 요소가 사용성을 방해할 수 있다.

 

팁

- UI의 콘텐츠와 시각적 디자인을 필수적인 요소에 집중시킨다.

- 불필요한 요소가 사용자가 실제로 필요한 정보를 방해하지 않도록 한다.

- 주요 목표를 지원하는 콘텐츠와 기능의 우선순위를 정한다.

 

 

 

9: 오류 인식, 진단 및 복구 지원

오류 메시지는 일반적인 언어로 표현되어야 하며(오류 코드 없이), 문제를 정확히 지적하고, 건설적인 해결책을 제안해야 한다.

 

이러한 오류 메시지는 사용자가 눈치채고 인식할 수 있도록 시각적인 처리도 함께 제시되어야 한다.

 

#9 예시: 도로의 잘못된 방향 표지판은 운전자들이 잘못된 방향으로 향하고 있음을 상기시키고 멈추게 한다.

 

팁

- 굵은 빨간색 텍스트와 같은 전통적인 오류 메시지의 시각적 요소를 사용한다.

- 기술적인 용어를 피하고 사용자가 이해할 수 있는 언어로 무엇이 잘못되었는지 알려준다.

- 오류를 즉시 해결할 수 있는 단축키와 같은 해결책을 제공한다.

 

 

10: 도움말 및 문서

시스템은 추가적인 설명 없이 사용할 수 있는 것이 가장 좋다. 그러나 사용자가 작업을 완료할 수 있도록 돕기 위해 문서를 제공해야 할 수도 있다.

 

도움말 및 문서 내용은 검색하기 쉽고 사용자의 작업에 초점을 맞추어야 한다. 간결하게 유지하고 수행해야 할 구체적인 단계를 나열한다.

 

#10 예시: 공항의 정보 키오스크는 쉽게 인식할 수 있으며 고객의 문제를 맥락에 맞게 즉시 해결한다.

 

팁

- 도움말 문서가 검색하기 쉬운지 확인한다.

- 가능하다면 사용자가 필요로 하는 순간에 맥락에 맞는 문서를 제공한다.

- 수행해야 할 구체적인 단계를 나열한다.

 

 

 

 

---

🔗 게시글의 원본 링크는 다음과 같습니다.

https://www.nngroup.com/articles/ten-usability-heuristics/

10 Usability Heuristics for User Interface Design

 

🍀 한국어로 읽기 편하게 일부 의역한 부분도 있지만, 오탈자나 잘못된 번역이 있다면 댓글로 알려주시면 감사하겠습니다.