본문 바로가기

Learn/CSS

UI 와 UX

UI

UI(User Interface, 사용자 인터페이스)는 사람들이 컴퓨터와 상호 작용하는 시스템

 

떠오르는 화면상의 그래픽 요소 외에도,

키보드, 마우스 등의 물리적 요소도 컴퓨터와 상호 작용하기 위한 시스템이므로 UI라고 볼 수 있다.

ex) 핸드폰의 물리적 버튼

 

하지만 꾸준히 UI 발전하고 중요하게 됨에 따라 GUI가 중요한 역할을 하게 됨

 

GUI(Graphical User Interface, 그래픽 사용자 인터페이스)

사용자가 그래픽을 통해 컴퓨터와 정보를 교환하는 작업 환경

EX) 우리가 보는 운영체제(Window, Mac OS)의 화면, 애플리케이션 화면, 키오스크 등등

 

UX

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

특정 정황과 목표를 갖는, 정보기기/서비스 사용자의 "느낌,태도,행동"

 

좋은 UX를 만드는 요소

 

피터 모빌(Peter Morville)의 벌집 모형

 

UI와 UX의 관계

UX는 UI를 포함

좋은 UX가 좋은 UI를 의미하거나,

은 UI가 항상 좋은 UX를 보장하지는 않는다.

나쁜 UI는 보통 나쁜 UX를 유발

서로를 보완하는 역할

UX가 좋지 않은 곳을 찾아냄으로써 UI 개선점을 찾아낼 수 있고,

UI를 개선함으로써 UX가 좋아지기도 한다.

 

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)
  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)

'Learn > CSS' 카테고리의 다른 글

브라우저와 반응형 웹  (0) 2023.03.17
HTML/CSS 활용 복습  (0) 2022.12.26
CSS 기초 정리  (0) 2022.12.22