UI란?
UI(User Interface, 사용자 인터페이스)는 사람들이 컴퓨터와 상호 작용하는 시스템을 의미한다.
화면상 그래픽 요소 외에도, 키보드, 마우스 등의 물리적 요소도 UI라고 볼 수 있다.
스마트폰이 등장하면서 화면 터치를 통한 상호작용의 비중이 높아졌다. => 모바일 디바이스에서 그래픽 UI가 매우 중요해졌다.
GUI(Graphical User Interface, 그래픽 사용자 인터페이스)
GUI는 사용자가 그래픽을 통해 컴퓨터와 정보를 교환하는 작업 환경을 말한다.
ex) 운영체제의 화면 or 애플리케이션 화면
프론트엔드 개발자로서의 UI는 대부분 GUI를 의미한다.
UX란?
UX(User Experience, 사용자 경험)의 사전적 의미는 사용자가 어떤 시스템, 제품, 서비스를 직·간접적으로 이용하면서 느끼고 생각하는 총체적 경험이다.
=> 제품, 서비스 그 자체에 대한 사용자가 느끼는 모든 경험
UX에 영향을 주는 요소 중 프론트엔드 개발자에게 가장 중요한 요소는 바로 UI이다. 좋은 프론트엔드 개발자라면 제품이나 서비스의 UI가 사용자로 하여금 좋은 UX를 가질 수 있도록 해야한다.
UI와 UX의 관계
UX는 UI를 포함한다.
보통 좋은 UX가 좋은 UI를 의미하거나, 좋은 UI가 항상 좋은 UX를 보장하지는 않는다.
하지만 나쁜 UI는 나쁜 UX를 유발한다. 그도 그럴것이 우리가 웹사이트를 들어가서 무엇을 눌러야할지 모를정도로 복잡하게 배치되어 있다면 이용하기 불편해서 바로 웹사이트를 나가버릴 것이다.
=> UI와 UX는 서로 다르지만 떼려야 뗄 수 없는 관계이고 서로를 보완하는 역할을 한다.
UX가 좋지 않은 곳을 찾아 UI 개선점을 찾아낼 수 있고, UI를 개선함으로써 UX가 좋아지기도 한다.
좋은 UX를 만드는 요소
좋은 UX를 만들기 위해 고려해야 할 피터 모빌이 제시한 UX의 7가지 요소
1. 유용성(Useful) : 사용 가능한가?
제품이나 서비스가 목적에 맞는, 사용 가능한 기능을 제공하고 있는가에 관한 요소
2. 사용성(Usable) : 사용하기 쉬운가?
가능한 단순하면서 직관적이고 사용하기 쉬운 제품이나 서비스 만들어야 함
3. 매력성(Desirable) : 매력적인가?
사용자들이 해당 제품이나 서비스 이용하고 싶어 하는가
4. 신뢰성(Credible) : 신뢰할 수 있는가?
서비스를 믿고 사용할 수 있는가
5. 접근성(Accessible) : 접근하기 쉬운가?
나이, 성별, 장애 여부를 떠나서 누구든지 제품이나 서비스에 접근할 수 있어야 함
6. 검색 가능성(Findable) : 찾기 쉬운가?
사용자가 원하는 기능이나 정보를 쉽게 찾을 수 있는가
7. 가치성(Valuable) : 가치를 제공하는가?
위에서 언급된 모든 요소들을 총합하여 고객에게 가치를 제공하고 있는가
피터 모빌의 벌집 모형은 UX를 위해 고려해야할 7가지의 요소를 제시해 줌과 동시에 그래프를 활용하여 UX를 얼마나 고려했는지 평가하기 위한 척도로도 사용될 수 있다. 후에 UX개선하고자 할 때, 사용자 설문 조사를 통해 개선점을 찾아낼 수도 있다.
UI/UX 사용성 평가
10 Usability Heuristics for User Interface Design
Jakob Nielsen's 10 general principles for interaction design. They are called "heuristics" because they are broad rules of thumb and not specific usability guidelines.
www.nngroup.com
- Heuristic(휴리스틱)이란 ?
: '체험적인'이란 뜻으로, 완벽한 지식 대신 직관과 경험을 활용하는 방법론
1. 시스템 상태의 가시성
합리적인 시간 내에 적절한 피드백을 통해 사용자에게 진행 상황에 대한 정보 항상 제공
2. 시스템과 현실 세계의 일치
내부 전문용어가 아닌 사용자에게 친숙한 단어, 구문 및 개념을 사용
3. 사용자 제어 및 자유
사용자는 종종 실수를 하기 때문에 수행한 작업을 취소할 수 있는 방법, '탈출구'를 명확하게 제공해야 함
4. 일관성 및 표준
외부 일관성 : 일관적인 사용자 경험을 제공하기 위해 플랫폼 및 업계을 관습을 따르자
내부 일관성 : 사용자가 혼란스럽지 않도록 제품의 인터페이스나 정보 제공에 일관성이 있어야 함
5. 오류 방지
오류가 발생하기 쉬운 상황을 제거하여 사용자의 실수를 방지해야 함
6. 기억보다는 직관
사용자가 기억해야 하는 정보를 줄인다.
7. 사용자의 유연성과 효율성
초보자와 전문가 모두에게 개별 맞춤 기능을 제공
8. 미학적이고 미니멀한 디자인
인터페이스에 관련이 없거나 불필요한 정보가 포함되지 않도록 해야함.
콘텐츠와 기능의 우선순위를 정하고 우선순위가 높은 것을 제공하고 있는지 확인
9. 오류의 인식, 진단, 복구를 지원
사용자가 이해할 수 있는 언어를 사용하여 문제가 무엇인지 정확하게 표시하고 해결 방법 제안
10. 도움말 및 설명 문서
추가 설명이 필요 없는 것이 가장 좋지만, 상황에 따라 이해하는데 도움이 되는 문서 제공해야 함
'CS 지식' 카테고리의 다른 글
| [ Cookie / Session] (0) | 2023.05.02 |
|---|---|
| [웹 표준 / 웹 접근성] (0) | 2023.04.28 |
댓글