UI와 UX, UX 디자인

UI (User Interface)

사람과 컴퓨터 시스템의 프로그램 간 상호작용을 의미한다.
그러므로 UI 디자인은 사용자와 컴퓨터 프로그램 간 의사소통의 효과성과 효율성을 극대화하기 위해 인간,환경,기술 요소를 통합하는 활동이라 할 수 있다. 사용자가 제품을 어떤 방식으로 이용하도록 시각화 하는 것.

유명한 디자인 가이드로는 구글의 머트리얼 가이드가 있다

UI : 사용자와 시스템 간의 상호작용, 그렇게 정의하고 설계하는 행위

UX (User Experience)

사용자가 시스템, 제품, 서비스를 직/간접적으로 이용하면서 느끼고 생각하게 되는 총체적 경험이다.
단순히 기능이나 절차상의 만족뿐만 아니라 전반적인 지각 가능한 모든 면에서 사용자가 참여, 사용, 관찰하고 상호교감을 통해 알 수 있는 가치있는 경험

UX : 사용자가 서비스를 이용하며 느끼는 총체적인 경험

- UX의 분야

IT에서의 UX
- 현재 UX 개념이 가장 많이 쓰이고 있는 분야.
- 앱이나 웹에 접속한 순간부터 사용자가 원하는 업무 수행까지의 프로세스를 편리하고 간소하게 설계하여, 서비스와 사용자 간 원활한 상호작용을 할 수 있도록 한다.
자동차에서의 UX
- ‘자동차 대시보드’, ‘버튼식 또는 다이얼식 기어 디자인’, ‘헤드업 디스플레이’와 같이 주행 중에도 자동차와 사용자가 안전하게 상호작용할 수 있도록 설계한다
Voice UX
- 사용자와 서비스 간의 원활한 대화 경험을 설계

UX Design

사용자의 경험을 설계하는 행위

예 : 고속도로의 주행 유도선, 지하철 노선도의 호선에 따라 다른 색상

사용자의 요구사항 충족 + 좋은 사용성 = 좋은 UX?

아니다.
사용자의 요구와 사용성 + 비즈니스 요구사항이 모두 충족되어야한다.

비즈니스 요구사항

비즈니스에서 꼭 필요한 요구사항을 수립
UX 디자인 시 큰 방향을 제시하게 되는 기준
업무 진척도를 파악할 수 있게, 개별적인 단위로 분할해 진행하는 것이 좋다

사용자 요구사항

사용자들은 무엇이 필요한지, 무앗이 불편한지 모를 때가 많다.
그래서 UX 디자이너들은 설문, 로그분석, 데스크 리서치, 인뎁스 인터뷰, 포커스 그룹 인터뷰, 컨텍스추얼 인쿼리, 사용성 테스트, 휴리스틱 평가, 카드소팅 등의 다양한 방법으로 사용자도 인지 못하는 불편사항을 파악하여 제품이 반영해야한다.

- 좋은 UX의 순서

비즈니스 요구사항 파악
사용자 요구사항 파악
요구사항 취합
우선순위 설정

적응형과 반응형

적응형

미리 설정된 사이즈에 맞춰 디자인을 표출하는 방식
설정된 사이즈에서만 디자인이 표출되기 때문에, 특정 환경에서 깨지는 현상이 발생
반응형보다 디자인이 쉽고 로드가 빠른 장점

예시 (네이버, 구글)

네이버
- 가로 1920px ~ 1000px 해상도까지 고정된 레이아웃으로 대응
- PC에서는 www.naver.com의 주소로 레이아웃 제공, 모바일에서는 m.naver.com 주소로 또 다른 레이아웃을 제공

반응형

하나의 UI가 모든 화면에 대응이 되도록 디자인을 하는 것
모든 디바이스에 대응이 되기 때문에 최상의 사용성을 제공하지만, 그만큼 디자인 및 유지보수의 난이도가 높다
로드 시간도 적응형보다 오래걸릴 수 있음. 디자인이 단순해야 반응형 대응이 쉬워서, 디자인의 한계가 있다

유연한 칼럼(Fluid Columns)
- 해상도 변화에 따라 그리드가 유연하게 변함
고정된 박스 유지, 위치만 달라지는 형태(Fixed Boxes)
- 박스 크기는 변하지 않고 위치와 개수만 변화

- 브레이크 포인트

반응형 웹에서 레이아웃이 변화되는 해상도 지점
머트리얼 가이드, 또는 카본 디자인 시스템 같은 범용적 가이드를 참고하면 훨씬 수월

해상도 높이

OS / 브라우저 / 사용자 이용형태 별 차이가 있지만 평균 930~980 px 사이에서 디자인

디자인 시스템

디자인 시스템이란?

디자인 원칙과 중요한 UX 전략에 의해 결합된 UI 구성 요소의 모음
더 큰 사용자 경험 내에서 각 구성 요소가 어떻게 생활하는지에 대한 지침을 제공한다.

그러면 팀은 이런 구성 요소를 다양한 조합으로 재사용하여 일반적인 상호 작용 패턴을 재설계하는 데 시간을 낭비하지 않고 제품을 빌드하거나 업데이트할 수 있다.

비유하자면 대규모 디지털 제품을 위한 레고 세트

스타일 가이드로 디자인 정보를 포함한다.
UI 요소 전체에서 사용되는 색상, 타이포그래피 및 스타일, 표준, 원칙 및 일관된 UI 요소의 모음은 디자인 시스템을 전체 조직에 대한 단일소스로서 가치 있게 만든다.

디자인 시스템의 이점

UI/UX 팀이 프로젝트에서 작업하는 여러 디자이너가 있는 경우에도, 제품과 인터페이스에서 일관성을 유지할 수 있도록 도와준다
제품과 인터페이스에서 일관성을 유지할 수 있도록 도와준다.