UX 디자인

❤️‍🔥 UX 디자인

🤔 좋은 UX를 만드는 요소

💡 유용성(Useful)

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

💡 사용성(Usable)

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

💡 매력성(Desirable)

• 제품이 사용자들에게 매력적인가에 대한 요소

💡 신뢰성(Credible)

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

💡 접근성(Accessible)

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

💡 검색 가능성(Findable)

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

💡 가치성(Valuable)

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

---

🤔 피터 모빌의 벌집 모형

• UX를 위해 고려해야 하는 7가지 요소를 제시함과 동시에, 아래 이미지처럼 그래프를 활용해 UX를 얼마나 고려했는지, 혹은 사용자가 얼마나 좋은 UX를 경험했는지 평가하기 위한 척도로 사용될 수 있다.

---

❤️‍🔥 User Flow

• 사용자가 제품에 진입한 시점을 시작으로 취할 수 있는 모든 행동을 뜻한다.

🤔 User Flow 다이어그램 작성법

💡 직사각형

• 사용자가 보게 될 화면
• ex) 회원 가입 페이지, 로그인 페이지

💡 다이아몬드

• 사용자가 취하게 될 행동
• ex) 로그인, 버튼 클릭, 업로드

💡 화살표

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

---

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

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

---

❤️‍🔥 UI/UX 사용성 평가

🤔 제이콥 닐슨의 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 디자인 패턴을 사용하는 것이 좋다.
• 내부 일관성: 사용자가 혼란스럽지 않도록 제품의 인터페이스나 정보 제공에 일관성이 있어야 한다. 한 제품 내에서는 같은 인터페이스를 유지하는 것이 좋다.

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)

• 추가 설명이 필요없는 것이 가장 좋지만, 상황에 따라 이해하는 데 도움이 되는 문서를 제공. 기능 안내 등

---

제이콥 닐슨의 10가지 휴리스틱 원칙 더 보러가기