80
2015.06.17 김진용

UX', 'UX Design' and 'Good UX

Embed Size (px)

Citation preview

Page 1: UX', 'UX Design' and 'Good UX

2015.06.17 김진용

Page 2: UX', 'UX Design' and 'Good UX

6 years

SW Engineer UX Designer

7 years +

+ Operating

안녕하세요. 김진용 입니다.

Page 3: UX', 'UX Design' and 'Good UX

오늘 들려드릴 이야기

Define User eXperience

How to UX Design

Distinguish a Good UX

Page 5: UX', 'UX Design' and 'Good UX

오늘 다룰 이야기들 ?

"시작과 끝은 사용자입니다."

Page 6: UX', 'UX Design' and 'Good UX

1. UX가 무엇인지 자신만의 정의를 내릴 수 있다.

2. 각자가 생각하는 좋은 UX에 대해 이야기 할 수 있다.

강의 목표

Page 7: UX', 'UX Design' and 'Good UX

1. UX의 정의

2. 우리들 삶 속의 UX

3. UX를 디자인 한다는 것?

I. UX와 UX Design

Page 8: UX', 'UX Design' and 'Good UX

쿨하게 시작해요! 멋지게 제작된 UX 디자인 컨셉 영상

A Futuristic Short Film HD: by Sight Systems , https://www.youtube.com/watch?v=lK_cdkpazjI

Page 9: UX', 'UX Design' and 'Good UX

User eXperience

[나레이션] 뭔가 쉬운 것 같은데 막연하고, 추상적이면서도 가까이에 있는 것 같은, 그렇게 친한 듯 친하지 않은, 명절에만 보는 사촌 동생 같은 느낌 …

I. UX와 UX Design 1. UX의 정의

Page 10: UX', 'UX Design' and 'Good UX

I. UX와 UX Design 1. UX의 정의

[나레이션] UX 이야기만 시작하면, 항상 식탁 위에 올라가는 주제입니다.

Page 11: UX', 'UX Design' and 'Good UX

UI UX is not

I. UX와 UX Design 1. UX의 정의

[나레이션] 시리얼, 우유 : 사용자가 섭취할 컨텐츠/정보 숟가락과 그릇 : 도구들(플랫폼) 먹는 행위와 만족감 : 사용자의 경험

Page 12: UX', 'UX Design' and 'Good UX

VS.

I. UX와 UX Design 1. UX의 정의

[나레이션] ① 단순한 ‘제품’ 디자인 : 내용을 담을 병, 뚜껑, 상표 ② 훌륭한 ‘경험’ 디자인 : 사용자가 케찹을 짜는 일상적인 경험를 배려한 디자인 ③ 교훈 : 디자이너의 의도와는 전혀 다른 방식으로, 실제 사용자는 제품/서비스를 사용할 수 있다.

1 2 3

UI UX is not

Page 13: UX', 'UX Design' and 'Good UX

I. UX와 UX Design 1. UX의 정의

Refer to http://klare.io/how-the-ux-designer-killed-design.html

Page 14: UX', 'UX Design' and 'Good UX

위키피디아에서 한 번 볼까요?

User eXperience A person's behaviors, attitudes, and emotions about using a particular product, system or service. User experience includes the practical, experiential, affective, meaningful and valuable aspects of human–computer interaction and product ownership. Additionally, it includes a person’s perceptions of system aspects such as utility, ease of use and efficiency. User experience may be considered subjective in nature to the degree that it is about individual perception and thought with respect to the system. User experience is dynamic as it is constantly modified over time due to changing usage circumstances and changes to individual systems as well as the wider usage context in which they can be found.

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

I. UX와 UX Design 1. UX의 정의

Page 15: UX', 'UX Design' and 'Good UX

ISO 9241-210, Human-centred design for interactive systems

국제 표준도 있습니다.

I. UX와 UX Design 1. UX의 정의

Page 16: UX', 'UX Design' and 'Good UX

Donald Norman “I invented the term UX because I thought human interface and usability were too narrow. I wanted to cover all aspects of the person’s experience with the system including industrial design, graphics, the interface, the physical interaction, and the manual.

UXnet.org User Experience is the quality of experience a person has when interacting with a specific design. This can range from a specific artifact, such as a cup, toy or website, up to larger, integrated experiences such as a museum or an airport.

Nielsen/Norman Group User Experience encompasses all aspects of the end-user’s interaction with the company, its services, and its products.

Since then the term has spread widely, so much so that it is starting to lose it’s meaning… user experience, human centered design, usability; all those things, even affordances. They just sort of entered the vocabulary and no longer have any special meaning. People use them often without having any idea why, what the word means, its origin, history, or what it’s about.”

세계적인 전문가들은 어떻게 이야기할까요?

I. UX와 UX Design 1. UX의 정의

[나레이션] 보통 도널드 노먼의 인용문에서 윗부분만을 소개하는데, 그가 정말 말하고 싶은 내용은 아래쪽에 담겨 있습니다.

Page 17: UX', 'UX Design' and 'Good UX

User Experience Design The process of enhancing user satisfaction by improving the usability, accessibility, and pleasure provided in the interaction between the user and the product. User experience design encompasses traditional human–computer interaction(HCI) design, and extends it by addressing all aspects of a product or service as perceived by users.

사용자 경험 디자인 사용자가 제품, 서비스 혹은 시스템을 사용하거나 체험하는 데 있어 지각하는 것이 가능한 조직적 상호교감적인 모델을 창조하고 개발하는 디자인의 한 분야이다. 사용자 경험 디자인은 사용자 중심 디자인의 원리에 기반하고 있어 인간공학, 인간과 컴퓨터 상호 작용, 정보 아키텍처, 휴먼 팩터스, 사용자 인터페이스 디자인, 사용성 공학(Usability Engineering) 분야와 많은 공통된 요소를 가지고 있다. 또한 사용자 경험 디자인은 다학제적인 성격을 가지고 있어 심리학, 인류학, 컴퓨터 공학, 마케팅, 그래픽 디자인 및 산업 디자인 분야와 깊은 관련을 맺고 있다. 사용자 경험 디자인은 사용자가 특정한 인터랙션 시스템으로 받는 전체적인 경험, 그리고 그것의 제공자 혹은 경험을 통해 사용자가 갖게 되는 긍정적 영향 이상의 것들을 포함한다. 사용자 경험 디자인은 일반적으로 사용자 개인과 사용자의 요구나 목표를 지원하거나 충족하기 위해 기획된 시스템(가상 혹은 실제의 시스템), 혹은 요구 사항과 조직의 목표를 만족하기 위한 시스템 간의 인터랙션 순서를 정립한다.

I. UX와 UX Design 1. UX의 정의

그럼, UX Design 은 어떤 의미일까요?

[나레이션] “User satisfaction” 이라는 키워드가 가장 중요합니다. 다시 말하지만, CEO나 Designer가 아닌 User 입니다. *

Page 18: UX', 'UX Design' and 'Good UX

모든 관점을 포함하는 복잡한 정의보다,

핵심을 이해하는 것이 중요합니다.

그리고 자신만의 정의를 만들어 보세요.

I. UX와 UX Design 1. UX의 정의

Page 19: UX', 'UX Design' and 'Good UX

어떤 단어가 핵심인가요?

I. UX와 UX Design 1. UX의 정의

User

Context

eXperience

Satisfaction

All aspects

Product

Service

Iteration

Page 20: UX', 'UX Design' and 'Good UX

"사용자가 주어진 맥락 속에서 만족할 수 있는 가치 있는 경험”

"좋은 UX, 목표에 적합한 UX를 만들기 위해, 다양한 관점을 고려해서, 체계적으로 실행하는 반복적인 과정/절차”

I. UX와 UX Design 1. UX의 정의

UX

UXD

[나레이션] 다년간의 짓밟힘 속에서 피어난 잡초 같은 제 생각 입니다.

Page 21: UX', 'UX Design' and 'Good UX

I. UX와 UX Design 2. 우리들 삶 속의 UX

우리 주변의 제품 or 서비스들은, 어떤 사용자 경험을 디자인했는지 살펴볼까요?

Page 22: UX', 'UX Design' and 'Good UX

거실 (같은 공간의 다른 경험)

Smart Home (Nest)

Car Dashboard

I. UX와 UX Design 2. 우리들 삶 속의 UX

Page 23: UX', 'UX Design' and 'Good UX

여러분의 가장 가까운 곳에, 가장 복잡한 UX가 있습니다.

‘Phono-Sapiens’ Today about half the adult population owns a smartphone. By 2020, 80% will. - Economist, Feb 28th 2015 -

I. UX와 UX Design 2. 우리들 삶 속의 UX

Page 24: UX', 'UX Design' and 'Good UX

제품 디자인 / 사양 (Form factor / Specs)

Physical specification - Hardware size - Color - Material - Finishing Device Capacity - Network - Battery - LCD resolution - Sensors

1

I. UX와 UX Design 2. 우리들 삶 속의 UX

[나레이션] 스마트폰 UX에 대해 떠오르는 대로 나열해 봅니다.

Page 25: UX', 'UX Design' and 'Good UX

정보 구조 / Information Architecture 2

기능의 선택 메뉴 구성 화면 내 정보 레이아웃 전체 비주얼 테마 상태 메뉴로의 접근성 멀티태스킹 제약 사항 동일 센서에 대한 App간 충돌 설정 메뉴 링크와 동영상 가이드 국제 표준 용어의 사용과 다국어 지원 …

1

I. UX와 UX Design 2. 우리들 삶 속의 UX

모델을 정보 개념을 활용하여 복합 시스템으로 명확하게 표현하는 것

Page 26: UX', 'UX Design' and 'Good UX

터치 인터랙션

3

2

1

I. UX와 UX Design 2. 우리들 삶 속의 UX

싱글 터치 (Single touch) 멀티 터치 (Multi touch) 면 터치 (Surface touch)

Page 27: UX', 'UX Design' and 'Good UX

3

2

1

한 손 조작, 양손 조작, 모바일 접근성 (Accessibility)

4

I. UX와 UX Design 2. 우리들 삶 속의 UX

Page 28: UX', 'UX Design' and 'Good UX

RGB Light sensor (자동 화면 밝기 조절)

5

3

2

1

4

I. UX와 UX Design 2. 우리들 삶 속의 UX

센서의 성능 고도화 저전력화 센서간 커뮤니케이션

Page 29: UX', 'UX Design' and 'Good UX

버튼 타입 / 배치

6

6

5

3

2

1

4

I. UX와 UX Design 2. 우리들 삶 속의 UX

파워 버튼과 볼륨 버튼의 좌우 배치 홈 버튼 vs. 터치 버튼 카메라 버튼 지원 홈버튼 지문인식 지원 접근성 높은 인터랙션 선점을 위한 보이지 않는 경쟁

Page 30: UX', 'UX Design' and 'Good UX

6

6

5

3

2

1

4

모션 / 제스쳐

7 Accelerometer / Geomagnetic sensor / Gyro sensor

IR Proximity sensor / Touch screen sensitivity

7

I. UX와 UX Design 2. 우리들 삶 속의 UX

Page 31: UX', 'UX Design' and 'Good UX

IoT, Connectivity, Accessories

6

6

5

3

2

1

4

7

7

8

Devotec Fuel (Emergency battery charger)

Samsung Gear fit (Fitness accessory)

Samsung Wireless chargable S-View cover

BlueSYNC BR2 (Portable BT Stereo Speaker)

I. UX와 UX Design 2. 우리들 삶 속의 UX

“ Smartphone as a Gateway ”

Page 32: UX', 'UX Design' and 'Good UX

1. 제품 디자인 / 사양 2. 정보 구조 / Information Architecture 3. 터치 인터랙션 4. 한 손 조작, 양손 조작, 모바일 접근성 5. RGB light sensor 6. 버튼 타입 / 배치 7. 모션 / 제스쳐 8. IoT / Connectivity / Accessories …

I. UX와 UX Design 2. 우리들 삶 속의 UX

Page 33: UX', 'UX Design' and 'Good UX

I. UX와 UX Design 2. 우리들 삶 속의 UX

인간이 만든 모든 사물, 서비스는 (의도했건 하지 않았건) 사용자의 경험을 디자인합니다.

좋은 UX는 사용자가 별다른 고민 없이 사용할 수 있습니다. 원하는 목적을 달성할 수 있도록, 자연스럽게 사용자의 경험/행동을 이끄는 시각적/물리적 단서를 Affordance라고 합니다.

Page 34: UX', 'UX Design' and 'Good UX

I. UX와 UX Design 3. UX를 디자인 한다는 것?

그렇다면, UX 디자이너는 어떤 일들을 하는 걸까요?

Page 35: UX', 'UX Design' and 'Good UX

I. UX와 UX Design 3. UX를 디자인 한다는 것?

좋은 UX를 만들기 위해

체계적으로 접근합니다.

[나레이션] 그냥 포토샵 열어서 그림 그리고, PPT로 도형 몇 개 연결하는 게 아닙니다.

Page 36: UX', 'UX Design' and 'Good UX

https://www.youtube.com/watch?v=Q5763pPchvw

I. UX와 UX Design 3. UX를 디자인 한다는 것?

[나레이션] 몇 가지 UX 작업 산출물들을 슬쩍 둘러볼 수 있는 짧은 영상입니다.

Page 37: UX', 'UX Design' and 'Good UX

UX

DESIGN

I. UX와 UX Design 3. UX를 디자인 한다는 것?

전통적인 방식입니다.

[나레이션] 개발 방법론으로 따지자면 폭포수 방법론 정도이지만, 각각의 요소는 나름의 ‘정수’를 담고 있습니다. http://www.nautilus.cat/wp-content/uploads/ux_chart.png

Page 38: UX', 'UX Design' and 'Good UX

38

I. UX와 UX Design 3. UX를 디자인 한다는 것?

그런데 이젠 새로운 바람이 불고 있습니다.

Agile / Lean 문화로의 적응

Cross-Functional Team

손으로 사고하기 (Prototyping)

학습주기를 빠르게 자주 반복하기

Page 39: UX', 'UX Design' and 'Good UX

User-Centered Design 모든 패러다임의 기본. 언제나 사용자가 중심에 위치한다.

I. UX와 UX Design 3. UX를 디자인 한다는 것?

UX 디자인의 패러다임

Design Thinking 디자인이 사용자에게 만족스러운 경험을 선사하는 일이라면, 디자인적 사고는 (조직 내) 모든 사람들이 그러한 경험에 참여할 수 있는 기회를 만들어내는 일이다.

Service UX Design 서비스의 처음부터 끝까지, 사용자와의 모든 접점(Touch point)을 파악하고 디자인한다. 디자이너가 직접 Context 속으로 뛰어들어야 한다.

Lean UX Design ‘생존’을 위한 기민하고 유연한 시스템 속에서, 효율성과 정확도를 극대화한 방법론.

[나레이션] 이 것 외에도 다른 패러다임들이 있지만, 자주 언급되는 것 중심으로 나열합니다.

Page 40: UX', 'UX Design' and 'Good UX

I. UX와 UX Design 3. UX를 디자인 한다는 것?

전통적인 UX 디자인 프로세스의 (막대한) 산출물

- Key path scenario - Sequence Model - Cultural Model - Touch Point Matrix - Stakeholder map - Mood board - Copywriting - Brainstorming

- Physical Model - Desktop Walkthrough - Business Model Canvas - Data Visualization - Usability test - Requirements - Information Architecture - Prototype - Terminology creation

- Field research - User interview - Persona - User Journey Map - Wire frame - Flow chart - Service Blueprint - Life Cycle Map

- Use case Diagram - Actors Map - Value Web Diagram - Function Structure Diagram - Logic Tree - Artifact Model

Page 41: UX', 'UX Design' and 'Good UX

I. UX와 UX Design 3. UX를 디자인 한다는 것?

전통적인 UX 디자인 프로세스의 (막대한) 산출물

- Key path scenario - Sequence Model - Cultural Model - Touch Point Matrix - Stakeholder map - Mood board - Copywriting - Brainstorming

- Physical Model - Desktop Walkthrough - Business Model Canvas - Data Visualization - Usability test - Requirements - Information Architecture - Prototype - Terminology creation

- Field research - User interview - Persona - User Journey Map - Wire frame - Flow chart - Service Blueprint - Life Cycle Map

- Use case Diagram - Actors Map - Value Web Diagram - Function Structure Diagram - Logic Tree - Artifact Model

지속적으로 반복하고 검증해야 하는 것

UX가 길을 잃지 않고, 비즈니스 목표로 Alignment 하기 위해 필요한 것

기본적으로 꾸준히 준비하는 것

[나레이션] 마킹 안 했으면 생략? 이라고 생각하면 안되겠죠. 모든 걸 다 하진 않더라도, 요약해서 통합할 수는 있습니다.

Page 42: UX', 'UX Design' and 'Good UX

I. UX와 UX Design 3. UX를 디자인 한다는 것?

그 중에서도 다음의 것들은

꼭 기억합시다

[나레이션] 현업에서의 개인 경험을 바탕으로 썼습니다.

Page 43: UX', 'UX Design' and 'Good UX

(1) 정확한 문제 정의가 전체 업무의 80%다.

(2) 한 번에 하나씩. 지금은 이 것을 해결하는 것이 최우선이다.

(3) 사용자들이 더 자주 느끼고 더 심각하게 생각하는 최우선 문제에 집중하고, “Nice-to-have”는 기록만.

(4) 검증된 해결방안은 우리 제품/서비스의 핵심가치가 된다.

I. UX와 UX Design 3. UX를 디자인 한다는 것?

난 무조건 ‘한’ 놈만 팬다.

UX를 통해 무엇을 해결하고자 하는가? 문제 정의

Page 44: UX', 'UX Design' and 'Good UX

e.g. NEST가 정의한 문제 : 가정마다 냉난방으로 인한 에너지 전력 소모가 절반이나 됨! 해결방안 : 스스로 학습하는 온도조절기를 이용하여 에너지 절약 및 자동화

I. UX와 UX Design 3. UX를 디자인 한다는 것?

UX를 통해 무엇을 해결하고자 하는가?

https://www.youtube.com/watch ?t=45&v=L8TkhHgkBsg

문제 정의

Page 45: UX', 'UX Design' and 'Good UX

I. UX와 UX Design 3. UX를 디자인 한다는 것?

(1) 틀림없이 지구상의 다른 누군가도 같은 문제를 고민하고 있다. Market/Field research

(2) 백문이 불여일견, 책상을 벗어나서 직접 사용자를 만나라.(겐치겐부쓰) 그 컨택스트 속으로 직접 뛰어 들어라. User interview, Experiment(직접 체험하기)

(3) 고객에 대한 이해를 문서화. 고객이 처한 상황(Context)도 같이 정의하기. Persona modeling

사용자 이해 문제 정의

Page 46: UX', 'UX Design' and 'Good UX

I. UX와 UX Design 3. UX를 디자인 한다는 것?

Market / Field research Persona modeling User interview

경쟁사의 영업성과가 중요한 것이 아니라, 그들이 제시한 문제 해결방법이 유효했는가 를 파악하는 것이 중요하다.

Biological factors, Family and social Factors, Situational factors, Interest, Character, Motive, Temperament, Finance, … 당신의 고객이 누구인지 설명 할 수 있는가?

프로토타입이 없어도 상관없다. 우리가 정의한 문제를 사용자들이 얼마나 심각하게 느끼는지 알아보고, 경쟁사 솔루션을 대신 들고 가서 그들의 기대 반응을 예측해 볼 수도 있다.

Image from LINK Image from LINK Image from LINK

사용자 이해 문제 정의

Page 47: UX', 'UX Design' and 'Good UX

I. UX와 UX Design 3. UX를 디자인 한다는 것?

*팀 브라운이 그의 책 [Change by Design]에서 소개한 IDEO만의 “Unfocus Group” 방법론이란? 평균에서 극단으로 벗어나는 Extreme user만을 모아서 그들의 개성 있는 의견들을 촉매제로 새로운 아이디어를 도출하는 방법. Extreme user들은 같은 문제일지라도 더욱 섬세하게 자각하고 반응하며, 때론 전혀 다른 시각에서 나름의 해결방법을 찾으려 한다. 그가 강조하는 ‘Design thinking’은 사회통념이나 일반적인 상식에서 벗어난 개성과 자유로운 상상력을 존중함.

여기서 잠깐, Persona가 일반적인 (대다수의) 고객에 대한 이해라면, Extreme user는?

Image from LINK

?

사용자 이해 문제 정의

Page 48: UX', 'UX Design' and 'Good UX

I. UX와 UX Design 3. UX를 디자인 한다는 것?

(1) 내 안의 돌+i를 깨워라. 현장에서 보고 듣고 겪고 느껴라. Brainstorming

(2) 그리고, 자르고, 붙이고, 끼우고, 던지고. Prototyping

(3) 그래서 도대체, 가장 이상적인 시나리오가 뭡니까? Key path scenario

Prototyping 사용자 이해 문제 정의 헐렁하고 조잡해도 일단 만들면서 업그레이드!

Page 49: UX', 'UX Design' and 'Good UX

I. UX와 UX Design 3. UX를 디자인 한다는 것?

Brainstorming Prototyping Key path scenario

회의실에 틀어박혀서는, 그 나물에 그 밥. 현장의 목소리를 듣고, 다양한 경험을 직접 해보고, 평소에도 끊임없이 공부하기.

IDEO의 유명한 프로토타이핑 사례. 모든 단계에서 소통하며, 끊임없이 반복하고 발전시켜 나가야 한다. 첫 술에 배부르랴? 진심으로.

가장 이상적인 문제 해결 시나리오에 대해서 그려본다. 전체 User journey map을 그리기 에는 이른 단계에서, TASK의 흐름을 이해한다.

From 미생 Image from LINK Image from IDEO

Prototyping 사용자 이해 문제 정의 헐렁하고 조잡해도 일단 만들면서 업그레이드!

Page 50: UX', 'UX Design' and 'Good UX

I. UX와 UX Design 3. UX를 디자인 한다는 것?

★ 실패를 학습의 기회로 생각하고,

계속 도전하도록 장려하는 조직 문화가 반드시 필요!!!

“Judge a man by his questions rather than by his answers.”

- Voltaire (1694-1778)

여기서 잠깐, 적극적인 Prototyping으로 팀 전체의 실행력 향상을 위한 필수 조건.

Image from LINK

Prototyping 사용자 이해 문제 정의 헐렁하고 조잡해도 일단 만들면서 업그레이드!

Page 51: UX', 'UX Design' and 'Good UX

I. UX와 UX Design 3. UX를 디자인 한다는 것?

Wire frame

Prototyping 은 컨셉(가설)을 검증할 수 있는 최소한의 필요 수준으로만 구현해야 합니다. (MVP) 어정쩡하게 시안을 입혀 놓으면 테스트 참석자를 오해하게 만들어 기대치만 높이는 악영향을 끼칩니다.

Flow chart “아니 아니 아니요. 전혀요.”

Image from LINK Image from LINK Image from LINK

정말 멋지구만! 시안도 됐고,

그럼 바로 만들어서 내일쯤 볼 수 있겠군?

Prototyping 사용자 이해 문제 정의 헐렁하고 조잡해도 일단 만들면서 업그레이드!

Page 52: UX', 'UX Design' and 'Good UX

I. UX와 UX Design 3. UX를 디자인 한다는 것?

프로토타이핑을 위한 많은 툴들. (무료 & 유료)

http://www.fluidui.com/ http://www.axure.com/ https://balsamiq.com/products/mockups/ https://www.flinto.com/ https://www.lucidchart.com/ http://silverbackapp.com/ http://ovenapp.io/

https://facebook.github.io/origami/ http://framerjs.com/ https://marvelapp.com/

Image from LINK

Prototyping 사용자 이해 문제 정의 헐렁하고 조잡해도 일단 만들면서 업그레이드!

Page 53: UX', 'UX Design' and 'Good UX

I. UX와 UX Design 3. UX를 디자인 한다는 것?

User interview & Usability Test Data-driven

우리가 만든 것이 의도대로 잘 동작하고 있는가? 앞서 정의한 Key path scenario대로 사용자가 잘 진행 하고 있는가? 사용자가 목표를 달성하였는가?

미리 측정 지표를 정하고 시작해야 한다. 정성적인 피드백과 정량적인 수치의 조합을 통해 최종 의사결정 할 수 있어야 한다.

Image from LINK Image from LINK

우리의 가설을 검증하고, 실패로부터 배운다. UX 검증 Prototyping 사용자 이해 문제 정의

Page 54: UX', 'UX Design' and 'Good UX

I. UX와 UX Design 3. UX를 디자인 한다는 것?

Usability Test는 정말 중요하다. 당신이 이때다! 라고 생각하는 시점보다 더 빨리 시작할 것.

관찰 포인트 - 시각적 정보 인지 (IA 이해)

- 예측성

- 학습 용이성

- 사용 특이성

- User pattern

- 주요 측정 지표

UT 기획 순서 1. 검증하려는 ‘가설’ 수립 2. 사용자가 달성해야 하는 ‘과제(TASK)’ 설정 3. 과제를 기반으로 ‘시나리오’ 만들기 4. Pilot UT를 통해 다듬기

명심해야 할 UT 원칙 1. “말하지 않으면 알 수 없어요“ 참가자가 입으로 소리 내어 중얼거리면서 TASK를 계속 진행하도록 독려하기 절대 어림짐작하거나 추측해선 안 됨 2. 중립을 유지하기 참여자의 생각이나 행동에 영향을 끼쳐선 안 된다. 무엇을 해야 한다고 말하거나, 작은 힌트도 주어서는 안 됨. 사용자의 생각을 이끌어내야만 유의미한 결과를 도출 가능!

우리의 가설을 검증하고, 실패로부터 배운다. UX 검증 Prototyping 사용자 이해 문제 정의

Page 55: UX', 'UX Design' and 'Good UX

I. UX와 UX Design 3. UX를 디자인 한다는 것?

이렇게 계~속 반복 합니다. 더 이상 그 서비스가 존재하지 않을 때까지 (혹은 퇴사 전까지?)

Image from LINK

Page 56: UX', 'UX Design' and 'Good UX

UX 입문의 6 단계

https://www.youtube.com/watch?v=78MGzBNHn8k

[나레이션] 쉬어가기. UXer가 되어 보려는 사람들을 위한 6가지 단계 ?

Page 57: UX', 'UX Design' and 'Good UX

1. UX 평가 기준

2. 좋은 UX란?

3. UX 디자인 프로젝트 사례

II. 좋은 UX에 대하여

Page 59: UX', 'UX Design' and 'Good UX

II. 좋은 UX에 대하여 1. UX 평가 기준

(1) 평가의 주체 사장님: “삼시세끼 수시로 노티가 날아가야지!” 앱을 지우게 됩니다. 소비자: “특별한 이벤트가 있을 때, 이벤트 제목만 노출하는 정도로 적당히” 사장님: “상품 탐색부터 구매 완료까지 최단시간에! 장바구니 꼭 필요해??” 또 지웁니다. 소비자: “원하는 상품 빠른 탐색 > 세부 정보 확인 > 결제 > 배송 > A/S 관리까지 완벽하게!”

(2) UX의 목적 운영 시스템 인터페이스: 안정성, 하위 호환성과 효율성을 보다 중요하게 평가. 쇼핑몰 페이지 구성: 직관성, 학습 용이성과 심미성을 보다 중요하게 평가.

Page 60: UX', 'UX Design' and 'Good UX

II. 좋은 UX에 대하여 1. UX 평가 기준

(1) 기존의 UX 평가 요소 사용성, 학습 용이성, 지속성, 유용성, 유효성, 효율성, 심미성, 직관성, 보편성, 확장성, 하위 호환성, 신규성, 기억 용이성, 접근성, ... 평가자의 주관을 완전하게 배제하기는 어렵다.

(2) 최신 트렌드

초기 UX 기획단계부터, 목표의 달성여부를 평가 가능한 ‘지표’를 잡고 시작한다. (KPI) 소수의 주관적인 판단이나 정성적인 평가 결과만으로 의사결정을 내리지는 않는다. e.g. Funnel 구간별 전환율(Conversion Rate), 평균결제금액(Average Order Value) 등

(3) 데이터 분석과 정성 평가의 밸런스가 필요하다.

Page 61: UX', 'UX Design' and 'Good UX

II. 좋은 UX에 대하여 1. UX 평가 기준

(4) Steve Krug이 말하는 사용성의 주요 3 요소 - 유효성 : 평균 수준의 능력이나 경험을 가진 사람이 무언가를 성취하는데 있어서 - 학습 용이성 : 사용할 특정 물건의 사용법을 스스로 알아낼 수 있으며 - 효율성 : 얻는 가치에 비해 수고를 적게 들여야 한다.

(5) 표준에 따른 평가 - Heuristic evaluation / ISO 9241, Part 151 Web page

(6) 궁극적으로, 사용자의 목표를 달성하는데 해당 UX가 얼마나 효과적이었는지가 중요 - 지표의 정량적 측정 + 사용자 인터뷰를 통한 정성적 인지 결과 Image from LINK

Page 62: UX', 'UX Design' and 'Good UX

II. 좋은 UX에 대하여 2. 좋은 UX란?

좋은 UX의 특징 1. 목표 지향적이다

2. 직관적이다

3. 사용자의 Context에 최적화 되었다

4. 배려와 진정성이 느껴지며, 신뢰감을 준다

Page 63: UX', 'UX Design' and 'Good UX

II. 좋은 UX에 대하여 2. 좋은 UX란?

Dark UX ? Dark Pattern ?

※ Dark Pattern : A user interface that has been carefully crafted to trick users into doing things, such as buying insurance with their purchase or signing up for recurring bills. http://darkpatterns.org/

응???? 내가 이것들을 언제 깔았지?

Page 65: UX', 'UX Design' and 'Good UX

II. 좋은 UX에 대하여 3. UX 디자인 사례와 교훈

다양한 UX 디자인 사례

Page 66: UX', 'UX Design' and 'Good UX

II. 좋은 UX에 대하여 3. UX 디자인 사례와 교훈

https://www.youtube.com/watch?v=fi7E7LvFDXc

https://www.youtube.com/watch?v=7j66pZqbifQ

Key points 정말 다이내믹하게 풀어낸 App 사용 경험. 퀴즈를 푸는 순간의 몰입감도 높고, 전체적인 구성도 짜임새 있음

Page 67: UX', 'UX Design' and 'Good UX

II. 좋은 UX에 대하여 3. UX 디자인 사례와 교훈

Cardboard 360º Movie

360도 모든 각도에서 촬영된 영상을 하나로 이어 붙여서,

사용자가 원하는 방향과 각도로 시청 가능한 색다른 경험 제공

Key points 단돈 2만원이 되지 않는 골판지로 증강현실을 체험할 수 있는 훌륭한 툴을 만들어냄 기존 안경에 기능을 Add-on 하려 했던 구글 글래스 대비, 단순하고 효과적인 디자인임

Page 68: UX', 'UX Design' and 'Good UX

II. 좋은 UX에 대하여 3. UX 디자인 사례와 교훈

Summer lesson

소니의 VR 프로젝트 ‘모피어스’ 전용 게임임

플레이스테이션 4와 연동하여 동작인식이 가능하고,

210도의 광시야각을 제공

Key points 스마트폰을 이용한 저가 조립식 모델인 구글 Card board가 아직까진 좀 어지러운 퀄리티인 점에 비해서, 기존 게임 콘솔을 적극 활용한 증강현실 프로젝트는 보다 수준 높은 퀄리티를 보여줌 (UnReal 엔진 + 택견팀)

https://www.youtube.com/watch?v=PQqudiUdGuo

Page 69: UX', 'UX Design' and 'Good UX

II. 좋은 UX에 대하여 3. UX 디자인 사례와 교훈

Samsung Gear VR

HMD (Head Mounted Display) 악세서리 라인으로 Gear VR 출시 영화관, 달과 같은 가상 공간의 증강현실 디스플레이를 제공.

Key points 너도 나도 다 하는 증강현실 서비스. Card board 대비 확실한 차별성을 보여주려면 어떻게 해야 할까요?

https://www.youtube.com/watch?feature=player_detailpage&v=JjRxCbyhTik#t=304

Page 70: UX', 'UX Design' and 'Good UX

II. 좋은 UX에 대하여 3. UX 디자인 사례와 교훈

Hologram weather Clock

실시간 기상 정보를 조그마한 큐브에서

홀로그램으로 재현하는 제품

Key points 증강현실 컨셉을 활용한 다양한 UX 디자인 사례가 많이 등장하고 있음

https://www.youtube.com/watch?v=2k8CnQend2w

Page 71: UX', 'UX Design' and 'Good UX

II. 좋은 UX에 대하여 3. UX 디자인 사례와 교훈

Tempescope

가짜 증강현실이 아니라, 실제로 조그마한 큐브 안에서 내일의 날씨를 그대로 재현함

Key points 작은 아이디어 제품이지만, 실제로 구름이 생기고 비가 오는 것을 그대로 재현함으로써 많은 관심을 받음 (단, 눈은 안 됨)

https://www.youtube.com/watch?v=Euw6ebwXlMI

http://www.tempescope.com/

Page 72: UX', 'UX Design' and 'Good UX

II. 좋은 UX에 대하여 3. UX 디자인 사례와 교훈

Project 'Ara'

구글에서 진행중인 교체 삽입이 가능한 다양한

기능 모듈을 지원하는 스마트폰 프로젝트

Key points 모토로라가 구글에 인수되기 전부터 진행해 오던 프로젝트. 전원이 켜져 있는 상태에서도 배터리를 교환하는 Hot-swap 기능 등을 제공할 것으로 예상.

https://www.youtube.com/watch?v=PQqudiUdGuo

Page 73: UX', 'UX Design' and 'Good UX

II. 좋은 UX에 대하여 3. UX 디자인 사례와 교훈

Design thinking

세계적인 디자인 에이전시인 IDEO에서 중요하게 여기는 가치인 디자인적 사고의

프로세스를 통해서 제작한 마트용 카트 디자인

Key points 단 5일만에 환상적인 쇼핑 카트를 디자인 해내어 뉴스에서도 방영될 정도로 화제가 되었던 장면(2013). “우리는 특정 분야의 전문가들은 아니다. 다만 우리는 디자인 프로세스의 전문가이다.”

https://www.youtube.com/watch?v=M66ZU2PCIcM

Page 74: UX', 'UX Design' and 'Good UX

II. 좋은 UX에 대하여 3. UX 디자인 사례와 교훈

하나씩 열거하자면 끝도 없습니다. 세상에는 “경험을 디자인할 것들”이 너무너무 많기 때문입니다.

Page 75: UX', 'UX Design' and 'Good UX

II. 좋은 UX에 대하여 3. UX 디자인 사례와 교훈

직접 진행했던 UX 디자인

프로젝트들과 교훈

Page 77: UX', 'UX Design' and 'Good UX

UX Bookmark Essential UX Bibles

III. Reference

Page 78: UX', 'UX Design' and 'Good UX

III. Reference 1. UX Bookmark

Category Title Link

UX Guru

Don Norman, Jacob Nielsen http://jnd.org/about.html http://www.nngroup.com/people/jakob-nielsen/

Steve Krug http://www.sensible.com/about.html

Jesse James Garret http://www.jjg.net/about/

Insightful website

한국 디자인 진흥원 http://kidp.or.kr/ http://designdb.com

Nielsen Norman Group http://www.nngroup.com/

UX Matter http://uxmatters.com/

UX Booth http://http://www.uxbooth.com/

Visual inspiration

http://www.lovelyui.com http://mobile-patterns.com

http://pttrns.com http://www.brinda.com

http://vinyl-ux.com http://dribbble.com

http://sixux.com http://www.behance.net

http://designsnips.com http://simpledesktops.com

Standardization ISO 9241 - 210 http://www.iso.org/iso/catalogue_detail.htm?csnumber=52075

Prototyping toolkit 프로토타이핑 관련

http://www.fluidui.com

http://www.axure.com

https://balsamiq.com/products/mockups/

http://silverbackapp.com/

https://www.flinto.com/

https://www.lucidchart.com/

http://ovenapp.io/

Page 79: UX', 'UX Design' and 'Good UX

III. Reference 2. Essential UX Bibles

Title Author

DON’T MAKE ME THINK Steve Krug

ROCKET SURGERY MADE EASY Steve Krug

CHANGE BY DESIGN Tim Brown

SERVICE DESIGN Andy Polaine

LEAN UX Jeff Gothelf and Josh Seiden

DESIGNING WEB USABILITY, MOBILE USABILITY Jakob Nielsen

USABLE USABILITY Eric Reiss

THE DESIGN OF EVERYDAY THINGS Donald A. Norman

SEDUCTIVE INTERACTION DESIGN Stephen P Anderson

네… 맞아요… 저는 번역본 사서 읽었어요…