UI(User Interface, 사용자 인터페이스)는 사람들이 컴퓨터와 상호 작용하는 시스템. GUI(Graphical User Interface)와 물리적 UI를 모두 포함하지만 프론트엔드 개발자로서의 UI는 대부분 GUI를 의미한다.
UX(User Experience, 사용자 경험)는 사용자가 어떤 시스템, 제품, 서비스를 직•간접적으로 이용하면서 느끼고 생각하는 총체적 경험
UI와 UX의 관계
UX는 UI를 포함한다. 하지만 좋은 UI가 항상 좋은 UX를 보장하지는 않는다.
UX에 영향을 주는 이 많은 요소 중에 프론트엔드 개발자에게 가장 중요한 요소는 바로 UI다. 좋은 프론트엔드 개발자라면 제품이나 서비스의 UI가 사용자로 하여금 가능하면 좋은 UX를 가질 수 있도록 해야한다.
UI/UX 사용성 평가
제이콥 닐슨(Jakob Nielsen)의 10가지 사용성 평가 기준을 잘 충족하면 더 보기좋고 효율적인 UI, UX를 만들 수 있다.
제이콥 닐슨의 10가지 사용성 평가 기준 (Jakob’s Ten Usability Heuristics)
1. 시스템 상태의 가시성 (Visibility of system status)
- 합리적인 시간 내에 적절한 피드백을 통해 사용자에게 진행 상황에 대한 정보를 항상 제공해야 한다.
2. 시스템과 현실 세계의 일치 (Match between system and the real world)
- 사용자에게 친숙한 단어, 구문 및 개념을 사용한다.
3. 사용자 제어 및 자유 (User control and freedom)
- 사용자는 종종 실수를 한다. 현재 진행 중인 작업에서 벗어날 수 있는 방법, 혹은 실수로 수행한 작업을 취소할 수 있는 방법을 명확하게 제공해야 한다.
4. 일관성 및 표준 (Consistency and standards)
- 외부 일관성 : 일관적인 사용자 경험을 제공하기 위해서 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)
- 추가 설명이 필요 없는 것이 가장 좋지만, 상황에 따라 이해하는 데 도움이 되는 문서를 제공해야 한다.
제품 설계 단계부터 사용성 평가 기준을 고려하여 더 완성도 있는 앱을 기획하자.