좋은 UX를 만드는 요소

 

1. 유용성(Useful) : 사용 가능한가?

2. 사용성(Usable) : 사용하기 쉬운가?

3. 매력성(Desirable) : 매력적인가?

4. 신뢰성(Credible) : 신뢰할 수 있는가?

5. 접근성(Accessible) : 접근하기 쉬운가?

6. 검색 가능성(Findable) : 찾기 쉬운가?

7. 가치성(Valuable) : 가치를 제공하는가?

 


 

User Flow

 

 

User Flow 다이어그램을 그리면 좋은 이유

 

 

1. 사용자 흐름 상 어색하거나 매끄럽지 않은 부분을 발견하여 수정할 수 있음

2. 있으면 좋은 기능을 발견하여 추가하거나 없어도 상관없는 기능을 발견하고 삭제할 수 있음

 


 

제이콥 닐슨의 10가지 사용성 평가 기준 (Jakob's Ten Usability Heuristics)

여기서, Heuristic(휴리스틱)이란? '체험적인'이라는 뜻으로, 완벽한 지식 대신 직관과 경험을 활용하는 방법론

 

1. 시스템 상태의 가시성 (Visibility of system status)

합리적인 시간 내에 적절한 피드백을 통해 사용자에게 진행 상황에 대한 정보를 항상 제공해야 한다.

Visibility of system status

 

2. 시스템과 현실 세계의 일치 (Match between system and the real world)

내부 전문용어가 아닌 사용자에게 친숙한 단어, 구문 및 개념을 사용

Match between system and the real world

 

3. 사용자 제어 및 자유 (User control and freedom)

사용자는 종종 실수를 한다.

현재 진행 중인 작업에서 벗어날 수 있는 방법,

혹은 실수로 수행한 작업을 취소할 수 있는 방법, ’탈출구’를 명확하게 제공해야 한다.

User control and freedom

 

4. 일관성 및 표준 (Consistency and standards)

외부 일관성 : 일관적인 사용자 경험을 제공하기 위해서 플랫폼 및 업계의 관습을 따르자.

사용자에게 익숙한 UI를 제공해라. 잘 알려진 UI 디자인 패턴을 사용하는 것이 좋다.

내부 일관성 : 사용자가 혼란스럽지 않도록 제품의 인터페이스나 정보 제공에 일관성이 있어야 한다.

예시) 한 제품 내에서 같은 인터페이스를 유지한다.(버튼의 모양, 위치, 아이콘 크기 등)

 

Consistency and standards

 

5. 오류 방지 (Error prevention)

오류가 발생하기 쉬운 상황을 제거하여 사용자의 실수를 방지해야 한다.

Error prevention

 

6. 기억보다는 직관 (Recognition rather than recall)

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

Recognition rather than recall

 

7. 사용의 유연성과 효율성 (Flexibility and efficiency of use)

초보자와 전문가 모두에게 개별 맞춤 기능을 제공하도록 한다.

Flexibility and efficiency of use

 

8. 미학적이고 미니멀한 디자인 (Aesthetic and minimalist design)

인터페이스에는 관련이 없거나 불필요한 정보가 포함되지 않도록 한다.

콘텐츠와 기능의 우선순위를 정하고 우선순위가 높은 것을 잘 제공하고 있는지 확인해야 한다.

Aesthetic and minimalist design

 

9. 오류의 인식, 진단, 복구를 지원 (Help users recognize, diagnose, and recover from errors)

사용자가 이해할 수 있는 언어를 사용하여 문제가 무엇인지 정확하게 표시하고, 해결 방법을 제안해야 한다.

Help users recognize, diagnose, and recover from errors)

 

10. 도움말 및 설명 문서 (Help and documentation)

추가 설명이 필요 없는 것이 가장 좋지만, 상황에 따라 이해하는 데 도움이 되는 문서를 제공해야 한다.

Help and documentation

 

'코드스테이츠 프론트과정' 카테고리의 다른 글

[사용자 친화 웹] 웹 표준 & 접근성  (0) 2023.06.28
[React] 상태 관리  (0) 2023.06.23
[사용자 친화 웹] UI/UX -1  (2) 2023.06.13
[객체 지향 프로그래밍]  (0) 2023.05.11
[클래스와 인스턴스]  (0) 2023.05.11

+ Recent posts