UX

• User Experience : 사용자 경험
• 사용자가 어떤 시스템, 제품, 서비스를 직·간접적으로 이용하면서 느끼고 생각하는 총체적 경험

UI와 UX의 관계

UI-UX 관계에서 주의할 점!

• 좋은 UX가 좋은 UI를 의미하지는 않는다.
• 좋은 UI가 좋은 UX를 의미하지는 않는다.
• 하지만 좋은 UI를 가지고 있으면 좋은 UX가 따라 오기도 한다.

---

좋은 UX를 만드는 요소

<피터 모빌(Peter Morvile)의 벌집 모형>

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

• 유용성은 제품이나 서비스가 목적에 맞는, 사용 가능한 기능을 제공하고 있는가에 관한 요소

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

• 사용성은 제품이 본연의 기능을 제공하는 것을 넘어서 사용하기 쉬운가에 관한 요소

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

• 매력성은 말 그대로 제품이 사용자들에게 매력적인가에 대한 요소

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

• 신뢰성은 사용자가 제품이나 서비스를 믿고 사용할 수 있는가에 관한 요소

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

• 접근성은 나이, 성별, 장애 여부를 떠나서 누구든지 제품이나 서비스에 접근할 수 있는가에 관한 요소

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

• 검색 가능성은 사용자가 원하는 기능이나 정보를 쉽게 찾을 수 있는가에 관한 요소

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

• 가치성은 위에서 언급된 모든 요소들을 총합하여 고객에게 가치를 제공하고 있는가에 관한 요소

이러한 피터 모빌의 벌집 모형은 UX 뿐만 아니라 UI에서도 적용할 수 있다!

---

User Flow

• 사용자 흐름(User Flow)은 사용자가 제품에 진입한 시점을 시작으로 취할 수 있는 모든 행동을 뜻하며, 보통 다이어그램을 그려서 정리한다.
  

다이어그램 작성법

• 세 가지 요소를 사용한다.

직사각형 : 사용자가 보게 될 화면

다이아몬드 : 사용자가 취하게 될 행동

화살표 : 직사각형(화면)과 다이아몬드(행동)를 연결시켜주는 화살표

User Flow 다이어그램의 장점

• 사용자 흐름 상 어색하거나 매끄럽지 않은 부분을 발견하여 수정할 수 있다.
• 있다면 좋은 기능을 발견하여 추가하거나 없어도 상관 없는 기능을 발견하고 삭제할 수 있다.

---

제이콥 닐슨의 10가지 사용성 평가 기준

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

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

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

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

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

• 사용자의 실수를 상정하고 현재 진행 중인 작업에서 벗어날 수 있는 방법, 혹은 실수로 수행한 작업을 취소할 수 있는 방법, ’탈출구’를 명확하게 제공한다.

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

• 외부 일관성 : 일관적인 사용자 경험을 제공하기 위해서 플랫폼 및 업계의 관습을 따른다.
  (사용자에게 익숙한 UI를 제공, 잘 알려진 UI 디자인 패턴을 사용하는 것이 좋다)
• 내부 일관성 : 사용자가 혼란스럽지 않도록 제품의 인터페이스나 정보 제공에 일관성이 있어야 한다.
  (한 제품 내에서 같은 인터페이스를 유지한다. ex)버튼의 모양, 위치, 아이콘 크기 등등)

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)

• 사용자가 이해할 수 있는 언어를 사용하여 문제가 무엇인지 정확하게 표시하고, 해결 방법을 제안해야 한다.
• 영문 성(Family Name)을 입력해야하는 폼에서는 한글이 아닌 영어를 입력해야 함을 정확하게 알려준다.

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

• 추가 설명이 필요 없는 것이 가장 좋지만, 상황에 따라 이해하는 데 도움이 되는 문서를 제공해야 한다.
• 간단한 안내를 통해 검색에 도움을 줍니다.