[내일배움캠프 본캠] 4/22 TIL

디자인 카타

UI 디자인의 모든 것

숙제

 

 

 

디자인 카타

https://designus.io/topic/233

B 선택

 

왜 해당 UI가 더 좋은지 작성합니다.
○ 청소기 버튼으로 기능을 직관적으로 이해할 수 있어 사용이 간편함

○  버튼 조작으로 손목의 부담이 줄어듦

 

나머지 하나의 UI는 왜 별로인지, 왜 선택하지 않았는지 작성합니다.
○ 실제 본가에서 사용하는 A형식의 청소기의 경우, 빠르게 전원을 껐다 켰다 하는 방식은 편함. 하지만 계속해서 홀딩한 상태로 작동해야 하다 보니 손목의 무리가 있음.

○ 추가로 무언가 기능이 있어도 알아보기 어려울 것 같음

 

 

 

UI 디자인의 모든 것

1-1

사용자 중심 디자인

▷ 제품이나 서비스를 설계할 때 사용자를 공감하여 사용자의 문제를 이해하고, 이를 해결하기 위한 개선안을 제공함으로써 사용자에게 만족스러운 경험을 제공하는 접근방식

 

UI 디자인 핵심 원리

 

가장 먼저, 사용자 이해하기

· 디자인의 목적- 사용자 경험을 향상시키고 참여를 유도하는 것

· 참여를 유도하기 위해서는 지속적으로 제품에 대한 긍정적인 인상과 신뢰감을 줄 수 있어야 함

· 사용자가 원하는 정보를 쉽게 탐색할 수 있어야 하고 제품이나 서비스를 사용할 때 어려움이 없어야 함

· 이러한 긍정적인 경험들이 쌓여야 비로소 사용자는 우리 서비스가 좋은 디자인이라고 느끼기 시작함

· 모든 의사결정은 사용자의 니즈와 기대를 중심으로 이루어져야 함

 

직관적인 디자인 

1. 사용자의 행동 유도

▷ 버튼

· 배경색 혹은 콘텐츠와 대비되는 컬러를 사용하여 버튼 강조

· 흐름에 맞게 필요한 위치에 배치

▷ 링크

· 일반적으로 웹에서는 파란색이 링크를 나타냄

· 링크된 텍스트에 밑줄을 넣어 클릭이 가능함을 전달

 

2. 정보를 시각적으로 표현

▷ 픽토그램

· 사용자가 정보를 더 쉽고 빠르게 이해하기 위해 시각적으로 디자인

· 텍스트로 되어있는 정보를 픽토그램이나 아이콘 활용

▷ 아이콘

문화적 , 언어적 차이를 넘어 사용자가 즉각적으로 이해할 수 있음

 

3. 직관적인 디자인 핵심 요소 

▷ 대비 높은 색상 조합

· 배경과 텍스트의 색상을 대비하여 강조

▷ 간단한 레이아웃

· 정보 구성과 디자인 요소를 적절하게 배치

▷ 유연한 인터페이스

· 사용자가 원하는 요구사항을 편하게 설정할 수 있도록 설정 기능 제공

▷ 아이콘 및 픽토그램 이미지 사용 

· 사용자의 상호작용을 쉽게 도와줌

 

일관된 디자인

▷ 사용자가 환경이나 상황에 구애받지 않고 동일한 서비스 경험을 느낄 수 있게 하는 것이 중요 (TV & 모바일)

1. 일관된 사용자 경험

▷ 신뢰성 향상

· 제품의 인터페이스를 숙지하고 지속적으로 긍정적인 경험을 하게 되면 제품 신뢰

· 사용자가 원하는 정보를 탐색하고 과업을 수행할 때 만족도 향상

▷ 업무 효율성 증대

· 일관된 경험을 통해 업무 시간을 단축시키고 빠른 결과물을 만들어 낼 수 있음

· 새로운 기능이 업데이트되어도 익숙한 상호작용으로 빠르게 이해하고 적응

 

2. 일관된 디자인 핵심 요소

▷ 디자인 시스템 구축

· 컬러, 타이포그래피, 아이콘, 버튼 등 시각적인 요소와 레이아웃, 그리드, UX 라이팅, 인터렉션, 브랜드 메시지 등 요소의 기준을 명확히 하여 일관된 디자인

▷ 사용자 피드백

· 사용자로부터 지속적으로 피드백을 받아 분석하고 이를 디자인에 적용하여 사용자에게 친숙하고 일관된 경험 전달

 

3. 대표적인 사례

▷ 애플

· 다양한 디바이스 간의 일관성

 

가독성을 고려한 디자인

1. 여백 활용

· 화이트 스페이스, 여백도 디자인 요소 중 하나 

· 깔끔하고 정돈된 느낌, 중요한 요소 강조

 

2. 콘텐츠 그룹화

· 비슷한 의미, 주제를 갖고 있는 콘텐츠 그룹화하여 사용자의 편의성을 높임

 

3. 크기와 비율

· 요소의 중요도에 따라 크기 조절하여 배치

 

4. 계층 구조

· 시각적 계층 구조 설정

· 텍스트의 크기, 컬러, 위치 활용 가능

 

명확한 피드백 제공

1. 즉각적인 반응 제공

· 사용자의 행동에 따라 시각적 또는 청각적 반응을 피드백으로 제공하여 사용자가 다음 행동을 쉽게 결정할 수 있도록 도움

· 파일을 업로드하고 난 후 전달사항을 즉시 전달하여 사용자의 불만을 줄이고 이해를 높임

 

2. 시각적 변화

· 입력 필드에 정보를 모두 입력하거나 필요한 조건이 충족되었을 때 시각적으로 변화를 주어 사용자가 인지할 수 있도록 함

 

접근성을 고려한 디자인

▷ 모든 사용자가 디자인에 접근할 수 있도록 하여 정보의 평등한 사용 보장

▷ 다양한 사용자층이 제품을 이용할 수 있게 되므로 비즈니스 기회가 확장됨

1. 접근성을 고려한 디자인

▷ 텍스트 + 아이콘

▷ 입력필드

· 오류 상태를 표현할 때 텍스트로 정보 전달

▷ 텍스트 콘텐츠

· 링크나 버튼을 분리해서 작업해야 스크린 리더가 위치 파악하기가 쉬워짐

▷ 텍스트 + 라인(Bar)

· 테두리 또는 라인 활용하여 형태적 차이 표현

 

2. 명도 대비

· 텍스트와 배경의 명도 대비 4.5:1 이상

3. 접근성을 위한 디자인 전략

▷ 명확한 텍스트와 디자인 요소

▷ 명도 대비

▷ 키보드 내비게이션

· 마우스 없이 키보드만으로 웹사이트의 모든 기능을 사용할 수 있게 설계

▷  스크린 리더

 

사용자 경험을 향상 시키는 방법

 

직관적인 네비게이션

1. 명확한 메뉴 구조

▷ 예상 가능한 카테고리

▷ 일관된 메뉴 구조

▷ 메뉴 depth 최소화

· 3번 이상 클릭하지 않고도 원하는 페이지 도달

 

2. 비주얼 요소 활용

▷ 픽토그램, 아이콘 사용

▷ 활성화 효과

 

다양한 디바이스 지원

1. 반응형 디자인

▷ 디바이스 최적화

▷ 그리드 시스템

 

2. 터치 스크린 최적화

· 버튼, 아이콘 요소의 최소 사이즈 

	IOS	Android
버튼	44	48
아이콘	44	48

 

사용자 피드백 반영

피드백 수집 방법

▷ 사용자 VOC 분석

· Voice Of Customar 고객의 소리

▷ 사용자 설문 조사

▷ 사용자 인터뷰

 

1-2

 

컬러

 

컬러의 역할

1. 중요한 정보 강조

▷ 계층 구조

▷ 강조

· 채도, 명도

2. 사용자의 행동 유도

· 강조하고 싶은 주요 요소에 브랜드 컬러

· 보조 요소에는 채도가 낮은 그레이 컬러 

· 녹색- 시작, 출발/ 빨간색- 종료, 도착

3. 상태(State)

▷ 텍스트 필드 입력

▷ 버튼의 활성화와 비활성화

▷ 토글

▷ 탭

4. 브랜드 아이덴티티

· 브랜드가 가지고 있는 이미지, 가치관, 성향을 담을 수 있는 대표 컬러 선정

 

숙제

1-1 숙제

1-2 숙제