📌 UI
UI(User Interface, 사용자 인터페이스)는 사람들이 컴퓨터와 상호 작용하는 시스템을 의미합니다.
사용자가 확인하게 되는 디자인이나 레이아웃 같은 개념을 포함합니다.
📌 UX
UX란 사용자가 어떤 시스템, 서비스, 제품 등을 직, 간접적으로 이용하면서 느끼는 총체적 경험이라고 할 수 있습니다.
예를 들어, 어느 한 쇼핑 사이트를 이용한다고 해보겠습니다.
사이트에서 광고가 마구마구 뜨는지, 로딩 시간, 제품의 정보가 명확하게 표시되는지, 제공하는 로그인의 종류 등 이런 모든 경험들이 모두 UX라고 할 수 있습니다.
📌 UI와 UX의 관계
UX는 UI를 포함합니다. 그런데 좋은 UX가 좋은 UI를 의미하는 것도 아니고 좋은 UI가 좋은 UX를 보장하는 것은 아닙니다.
UI가 특별하게 화려하지 않더라도 명확한 정보를 제공하고 필요한 기능을 제공한다면 좋은 UX라고 할 수 있습니다.
UI를 세련되고 예쁘게 디자인 했더라도 원하는 동작이 제대로 되지 않는다면 UX가 좋지 않을 것입니다.
하지만 아래와 같이 나쁜 UI는 보통 나쁜 UX를 유발합니다.
📌 좋은 UX를 만드는 7가지 요소
유용성 ( Useful ) - 사용이 가능한가?
유용성은 제품이나 서비스가 목적에 맞는, 사용 가능한 기능을 제공하고 있는가에 관한 요소입니다.
목적에 맞지 않더라도 추가적인 기능을 제공하는지도 관련이 있습니다. ( ex) 디자인 )
사용성 ( Usable ) - 사용하기 쉬운가?
사용성은 제품이 본연의 기능을 제공하는 것을 넘어서 사용하기 쉬운지에 관한 요소입니다.
기능이 잘 작동하더라도 사용자가 사용하기 어렵다면 좋은 UX가 아닙니다.
가능한 단순하면서 직관적이고 사용하기 쉬운 제품이나 서비스를 만들어야 합니다.
매력성 ( Desirable ) - 매력적인가?
매력성은 제품이 사용자들에게 매력적인지에 관한 요소입니다.
그냥 디자인이 보기에 좋은지에서부터 브랜드의 이미지, 철학 등의 여러 요소들이 사용자들에게 영향을 미칠 수 있는지가 중요합니다.
신뢰성 ( Credible ) - 신뢰할 수 있는가?
신뢰성은 사용자들이 제품이나 서비스를 믿고 사용할 수 있는지에 관한 요소입니다.
과장 광고, 사기, 개인 정보 유출 등의 사용자의 신뢰성을 떨어뜨리면 안됩니다.
접근성 ( Accessible ) - 접근하기 쉬운가?
접근성은 나이, 성별, 장애 여부를 떠나서 모두 쉽게 제품이나 서비스에 접근할 수 있는지에 관한 요소입니다.
예를 들어, 청각 장애인을 위한 수화서비스, 자막서비스, 시각 장애인을 위한 음성 기능 등이 있습니다.
검색 가능성 ( FIndable ) - 찾기 쉬운가?
검색 가능성은 사용자가 원하는 기능이나 정보를 쉽게 찾을 수 있는가에 관한 요소입니다.
내비게이션 바, 정보 검색 기능, 직관적인 콘텐츠 배치 등이 도움이 됩니다.
가치성 ( Valuable ) - 가치를 제공하는가?
가치성은 위에서 다룬 모든 요소를 합하여 고객에게 가치를 제공하는가에 관한 요소입니다.
📌 제이콥 닐슨의 10가지 사용성 평가 기준
시스템 상태의 가시성
합리적인 시간 내에 적절한 피드백을 통해 사용자에게 진행 상황에 대한 정보를 항상 제공해야 합니다.
시스템과 현실 세계의 일치
내부 전문용어가 아닌 사용자에게 친숙한 단어, 구문, 개념을 사용합니다.
사용자 제어 및 자유
사용자가 실수를 했을 때, 현재 작업을 취소할 수 있는 방법을 명확하게 제공해야합니다.
일관성 및 표준
- 외부 일관성: 일관적인 사용자 경험을 제공하기 위해서 관습을 따라야 합니다.
- 내부 일관성: 사용자가 혼란스럽지 않도록 제공하는 인터페이스나 정보에 일관성이 있어야 합니다.
오류 방지
오류가 발생하기 쉬운 상황을 제거해야합니다.
기억보다는 직관
사용자가 기억해야 하는 정보를 줄입니다. ( 검색어 저장 )
사용의 유연성과 효율성
초보자와 전문가 모두에게 개별 맞춤 기능을 제공해야 합니다.
미학적이고 미니멀한 디자인
인터페이스에 관련 없거나 불필요한 정보를 제거합니다.
오류의 인식, 진단, 복구를 지원
사용자가 이해할 수 있는 언어를 사용하여 문제를 정확하게 표시하고 해결법을 제안해야 합니다.
도움말 및 설명 문서
추가 설명이 없는 것이 제일이지만, 상황에 따라 추가적인 정보를 제공하는 문서가 있어야 합니다.
'코드스테이츠 프론트엔드' 카테고리의 다른 글
웹 표준성과 웹 접근성 (1) | 2023.04.28 |
---|---|
Section 2 회고 (0) | 2023.04.10 |
[SEB_FE] Section 1 회고 (2) | 2023.03.18 |
[SEB_FE] 나만의 아고라 스테이츠 만들기 (1) | 2023.03.18 |
[SEB_FE] 유효성 검사 예제 (0) | 2023.03.18 |