u cmap 워크숍 강의코칭자료집 종합-v1.0(ucamp2기)

Copyright ⓒ2013 Limepaper, Inc. All rights reserved.

UX design trigger for STARTUP Teams.

[워크숍]앱센터와 라임페이퍼가 함께하는

스타트업을 위한

UX디자인 실전 워크숍


IntroductionDesign Thinking:

Prototype to Test & Refine


UX 진단검증 UX 컨셉메이킹 UX프로토타이핑 UX 평가개선

U.Camp 는 빠르게 프로토타이핑 해서 진단하고 검증하는 과정을 통해 제품과 서비스가 현실에서

어떻게 적용되고, 사용자와 상호작용하는지 미리 살펴보는 워크숍입니다.

Program


IntroductionIntroduction


UX triggerTM:

UX design & producing Tool kit

기대하는 UX 가치와 성과에 대한 빠른 테스트/검증 수행하기![UX trigger]는 ㈜라임페이퍼가 개발한 ‘스타트업 대상 UX 디자인&프로듀싱’ 툴킷으로, 독립 서비스 브랜드인 U.camp 프로그램의 핵심 방법론입니다.

Program


IntroductionGood or Bad UX

?


Way Finding: 방식의 전환결국 사용자의 행동 본질에 관한 접근

User experience (UX) is the way a person feels about

using a product, system or service. @위키피디아

제품(또는 시스템,서비스)을 사용하면서 느끼는 방식.

What UX: perspective


Introduction

UX design trigger for STARTUP Teams.What UX: perspective

Meaningful UX

& Narrative UX

통합적 경영 측면에서의 UX,

사용자에게 형성되는 네러티브의 확장으로서의 UX!

거창한 '기능명세＇를 만들어 내는 것이 아니라, 비즈니스 성과를

예측/달성하기 위한 핵심 UX concept를 찾는 것이 목표입니다.


IntroductionOptimal eXperience

UX design trigger for STARTUP Teams.Why UX: insight

최적경험, ‘주인인 듯한 느낌＇

최적경험은 환경적, 외적 조건들에 의해 압도되지 않고 사용자가 행동을

스스로 조절할 수 있으며, 기술과 상호작용에서 주인인 듯한 느낌이 드는

순간.

최적경험을 넘어선 궁극적인 UX의 목적은,

사용자의 의지를 보다 자유롭게 하고,

창의력을 증진시키고,

인간 사이의 의사소통과 협력을 증진

시키는 데 있다.


Chasm을 넘어:

Killer-UX concept

UX design trigger for STARTUP Teams.Objective

캐즘은 early adopter에서 majority로 넘어가는 장벽을 극복에버릿 로저스(Everett Rogers)는 대중을 다섯 가지 부류로 구분

패드(fad) 트랜드(trend)

Chasm

혁신적 수용자 얼리어덥터

새로운것을받아들이고 시험과정

다수수용자(전기)

실용주의자

다수수용자(후기)

보수주의자

지각수용자(후기)

회의주의자

Killer-UX concept 당신의 비즈니스 모델은?6~7%의 영향력



IntroductionUX value proposition(UVP)

on your business!


UX전략과 컨셉, 비즈니스 핵심가치 찾기!

거창한 '기능명세＇를 만들어 내는 것이 아니라, 비즈니스 성과를 예측/달성하기 위한 핵심 UX concept를 찾는 것이 목표입니다.

[U.Cmap]에서의 UX 디자인이란,

단순히＇사용자들이 원하는 것을 만든다＇가 아니라

‘사용자니즈 – 비즈니스 성과 - 기술적 타당성 – 시장 적합성'을 결합

시키는 과정과 그 성과에 대한 실제 사용자의 감각, 인지, 정서 등의 경험에 대한

feedback을 포함하여 정의.


IntroductionUX value proposition(UVP)

on your business!


UX 진단 및 UVP의 정의

적합성

지속성실현가능성

사람들이 진심으로 바라고원하는 것이 무엇인가?

기술적, 조직적 측면에서실현 가능한 것은 무엇인가?

Human

Tech. biz.

경제적, 재정적으로지속 가능하게 하는 것은무엇인가?

Killer-UX value on your business• 사람들이 일상에서 무엇을 원하고 필요로 하는지, 특정 제품을

제작/포장/홍보/판매/지원하는 과정에서 사람들이 어떤 것을 좋아하고 싫어하는지

직접적인 관찰을 통해 얻어지는 혁신

• 기술적으로 구현할 수 있고 고객가치와 시장기회로 전환 가능한 비즈니스 전략을

사람들의 니즈와 맞추기 위해 디자이너의 감성과 방법론을 활용하는 과정

UX 핵심가치는사람들의 니즈에 적합하게 부응해야 하고, 기술적으로 조직이 실현할 수 있어야 하며,

경제적으로 자생 능력을 갖추고 지속적이고 활발한 피드백이 가능해야 한다.


Introduction

UX design trigger for STARTUP Teams.Today’s Keywords(1)

Optimal eXperience:

Re-context

UX 가치 추구를 위한 최적의 경험은 결국, 컨텍스트의 재구성본질적인 인간의 가치추구를 위해 인간과 제품뿐만 아니라 상호작용 행위가 일어나는

총체적 상황(CONTEXT)를 중시해야 함.

http://www.dinnerinthesky.be/bru/en/


http://www.youtube.com/watch?v=9b7emYH4JZE



IntroductionUX biz = Eco-system(cluster)

UX design trigger for STARTUP Teams.Today’s Keywords(2)

先서비스 생태계/관계접점 구성, 後사용자경험 디자인

제품 성능과 UI디자인보다는, 사용자가 직접 제품 혹은 서비스와 소통하는 접점이 중요.

서비스 생태계를 먼저 구성하고

이에 맞는 플랫폼과 하드웨어를 나들어 가는

UX 접근이 앞으로의 우리 세상을 리드해 간다.

소니의 몰락


IntroductionVertical prototyping

UX design trigger for STARTUP Teams.Today’s Key words(3)

수직적 프로토타이핑 – ‘언제든 변경이 가능한 유연성’

수직적 프로토타이핑(Vertical prototyping)은 제공해야 할 수많은 기능 중에서 주요 핵심기능만 선별

해서 세부 기능까지 자세하게 구현하는 방법.

서비스의 핵심이 되는 인터페이스의 한 두 가지 경로만 고려하고

나머지 경로는 전혀 포함시키지 않는다.

아이디어 도출과 분석이 아니라,

당장 만들어 검증과 평가 받고 반영하는 것이 목표이며,

팀 동려나 고객과의 협업, 의사결정 프로세스에 매우 효과적인 방법.

Part-1.

UX Actually

사용자(고객)를 정확이 이해한다.

비즈니스 목표와 범위 내에서 사용자(고객)의 환경과 현상, 그리고 그들이 처한

문제점에 대한 진단 및 해결 방향을 설정하는 과정을 통해 사업아이템 이면에 숨

겨진 사용자 경험가치의 본질 찾아 가는 것이 목적입니다.

Understanding

User exactly!

Definition

• 목표 사용자(고객)에 대한 당신의 관점은 무엇인가?

• 그들의 어떤 시간(라이프스타일)을 만들어 주고 싶은가??Key Question

Tip. 특정 제품/서비스를 사용하는 사용자 층의 행동, 라이프스타일, 성향 등의 조사를 통해 해당 제품/서비스에 투영되는 소비자들의 니즈를 발견하고, 목표 사용자 층에 대한 특징을 파악할 수있다. 이는 향후 제품/서비스 전략 및 디자인개발 전략에 중요한 정보를 제공한다.

UX 진단 및 killer-UX concept 도출


Part-1.

UX ActuallyUX 진단 및 killer-UX concept 도출

U.camp

제품/서비스 이면에 숨겨진 사용자 니즈의 본질 찾기!

사용자가 무엇을 원하고 필요로 하는지,UX 시나리오를 구체화하여, 궁극적으로 제

품/서비스 사업아이템이 근본적으로 해결해야 할 사용자니즈의 본질을 찾는다.

Insight

Finding

User Needs, Not a function

• 사용자는 이 앱을 통해 어떤 욕구를 해결할 수 있는가?

?Key Question


Part-1.

UX Actually

U.camp

사업아이템의 사용자경험(UX) 핵심 컨셉을 정의한다.

기술적으로 구현할 수 있고 고객가치와 시장기회로 전환 가능한 비즈니스 전략

을 사람들의 니즈와 맞추기 위한 핵심 UX value를 정의한다.

Describing

Killer-UX concept on your business!

?Key Question

• 사용자가 이 앱을 사용하는 하는 단 한가지 이유는?

• 사용자들은 당신의 앱서비스를 어떻게 기억하는가?

Insight



서비스 아이템을 정의하시오

목표 사용자 정의 왜 필요한가?

어떤 상황에서, 핵심 기능은?

어떻게 사용하는가? 사용자 가치는?

Part-1.

UX Actually

U.camp

사용자 입장에서 UX key-concept 작성하고 감동시키기!

• Who you are (User) 나는 어떤 사람인데…

• What you do (Goal) 뭘 하려고 하는데…

• Where/When it takes place (Context of Use) 언제, 어디서…

• Why you do it (Desire/Motivation) 왜 이걸 쓰냐면…

• How you reach to the goal (Flow) 이렇게 사용하면 되는데…

• What you get from the activity (Benefit) 그래서 이게 너무 좋아…

http://www.youtube.com/watch?v=idHrz_xqwsk

Practice(1)

User scenario

100sec SpeechUX 진단 및 killer-UX concept 도출


http://www.youtube.com/watch?v=idHrz_xqwsk

100sec SpeechUX Scenario

사용자 입장에서 UX key-concept 작성하고 이야기 하기!

User scenario

100초 내에 사용자의 입장에 서서 UX key-concept 발표하기.

1. (User identity) 어떤 사용자인지?

2. (Needs/Problem) 사용하는 가장 큰 이유는?

3. (Context of Use) 어떤 상황에서 사용하는지?

4. (Function) 어떤 기능 때문에 사용하는지?

5. (User Task Flow) 그 기능을 어떻게 사용하는지?

6. (Benefit/Value) 그래서 어떤 의미가 있는지?

Keyword+ 짧은 문장

Practice

• Think User/Customer





Practice

User scenario • Think User/Customer1. (User identity) 어떤 사용자(고객)인지?

*사용자의 성격, 선호도, 라이프스타일, 직업, 성향, 태도, 가치관 등 목표 사용자 정의

워킹맘

도시에 거주하며 4세 자녀를 둔 맞벌이, 가사일에 항상 시간이 없는 워킹맘

1차 작성

2차 작성(수정보안)




Practice

User scenario • Think User/Customer2. (Needs/Problem) 사용하는 가장 큰 이유는?

* 제품/서비스가 해결, 또는 제공하고자 하는 핵심적인 사용자니즈


시간해야 할 일을 시간에 구애 받지 않고 실수 없이 처리하고 싶은 니즈

1차 작성





Practice

User scenario • Think User/Customer3. (Context of Use) 어떤 상황에서 사용하는지?

* 시간(언제), 장소(어디서), 또는 특정 상황 등 사용 전후 맥락


1차 작성



퇴근길 만원 지하철움직일 틈 없는 퇴근길 만원 지하철, 10분 내로 집 근처 마트에 쇼핑리스트 작성해야하는 상황



Practice

User scenario • Think User/Customer4. (Function) 어떤 기능 때문에 사용하는지?

* 다른 제품/서비스에는 없는, 또는 개선된 기능


1차 작성



최단시간 경로 추천작성한 구매물품 매대 위치를 최단시간 경로로 추천해주는 기능



Practice

User scenario • Think User/Customer5. (User Task Flow) 그 기능을 어떻게 사용하는지?

* 사용자 니즈를 충족시킬 해당기능을 사용하는 방법, 또는 인터랙션 방식


1차 작성



실시간/위치기반 최단경로 선택쇼핑리스트 작성, 실시간 마트에 전송, 위치기반으로 해당 매대 경로선택



Practice

User scenario • Think User/Customer6. (Benefit/Value) 그래서 어떤 의미가 있는지?

* 사용자 가치효용 - 만족, 기억, 피드백


1차 작성



줄 서서 기다리지 않고쇼핑리스트 전송과 동시에 결제가능, 줄 서서 계산하지 않고 10분만에 쇼핑완료


“사용자 내면에 근본적으로 원하는 게 무엇인지 깨닿기!”

• 인간의 동기이론_ 인간의 동기이론은 인간의 행동은 욕구에 의해 동기유발된다는 전제하

에, 인간의 기본욕구는 무엇이며, 그것은 어떠한 과정을 거쳐 동기를 불러일으키게 되는지에

관심을 둔다.

• Human Needs의 재해석_Maslow. A의 인간 욕구 구분을 기초로 [Alderfer의 ERG이론]과

[McClelland의 성취동기이론]을 오늘날 사용자 라이프스타일 흐름을 반영하고, 디지털-모바

일앱 서비스의 제 반 특성을 고려하여 재해석하였다. 궁극적으로 사용자 경험을 통한 User

value Keyword 중심의 인간 욕구를 모바일앱 서비스가 충족시키고자 함이다.

제품/서비스의 어떤 요소들이 사용자에게 어떤 유형의 동기로 작용하여 사용자에

게서 특정 행동을 이끌어내는지를 파악합니다.

Part-1.

UX Actually

Insight

Realized

Fundamental

Human Needs


사용자는 어떤 욕구의 소유자인가? 사용자가 원하는 기능은 무엇인가?

서비스 아이템을 정의하시오

목표 사용자 정의 왜 필요한가?

어떤 상황에서, 핵심 기능은?

어떻게 사용하는가? 사용자 가치는?

Human Needs Set v.1.1

Fundamental Needs(3) Key-Words(10) Sub-Keywords(33)

Existence존재의 욕구_안전, 생리적 욕구

• Security 안전, 보안, 프라이버시타인들로부터 자신의 안전과 정보의 보안을 유지하려는 욕구 뿐만 아니라, 자신의 감정, 신체 또는 경제적 사안의 노출을 꺼리는 욕구.개인에게 축적되는 수많은 정보자산(Information property)가치가 확장, 오용되면서 보안과 프라이버시는 요구는 높아짐.

Protection

Safety

Privacy

• Stability 조화, 안정, 지속변화보다는 지속가능한 안정된 라이프스타일을 영위하고자하는 욕구.

미래지향적이기 보다는 과거의 기억과 향수를 동경하고 현실 속에서 정신적인 힐링(healing)을 추구하려는 욕구.

Balance

Care

Relaxation

Retrospect

• Hedonism 쾌락, 일탈, 자극일상으로부터의 탈출과 함께 자극적인 것들을 감각적으로 수용하려는 욕구. 특히 인터넷 환경에서의 익명성, 가상세계(Virtual reality) 속에서 제2의 자아를 드러내려는 욕구.

Fantasy

Stimulation

Self-Indulgence

Entertainment

Relation관계의 욕구_자존, 친화욕구

• Identity 자기표현, 자아투영, 개성중시자신이 속한 사회, 타인과의 관계에 대해 누적된 경험에 대한 자기만의 표현욕구. 선호 브랜드 소유와 공유 등, 자기만의 세계를 적극적으로 들어내려는 욕구

Personality

Expression

Interdependence

• Friendship 소속감, 애정, 친화다른 사람들과 좋은 관계를 유지하려고 노력하며, 특정 소셜 그룹의 소속감을 중시하는 욕구. 긍정적인 사고와 열린 사고로 타인을 자신의 영역에 함께하려는 욕구.

participation

Sharing

affection

Oneness

• Confidence 신뢰, 믿음다른 사람과의 약속을 이행하는데 있어 확신과 믿음을 주려는 욕구. 신뢰가 있는 타인과의 관계가 만들어진다면 뭐든지 잘 할 수 있다는 자신감을 가지려는 욕구.

Belief

Integrity

Trust

• Power 권력, 능력, 관심, 평판, 신분, 주목높은 권력욕구를 가지고 리더로써 남을 통제하며, 남들로 하여금 자신이 비교우의에 있고자 하는 욕구.

Respect

Control

Leadership

Attention

Accomplishment성취의 욕구_성취의 욕구

• Exploration 탐구, 지식, 진리모호하거나 잘 알지 못하는 외부 환경에 대해 알려고 노력하는 욕구. 스스로의 호기심, 알고자 하는 대상에 대한 명쾌한 해결 능력을 성공적으로 발휘함으로써 자긍심을 높이려는 욕구.

Wonder

Truth

Education

• Adventure 모험, 프론티어 정신도전의식이 투철하고, 미지의 세상에 대한 강한 동경으로 새로운 능력을 개발하고자 하는 욕구.

Competition

Challenge

Excitement

• Beauty 심미성, 미적 가치 추구특정한 관점에서 독특한 미적 욕구를 가지고 있으며, 기능보다는 상징적 또는 주관적인 미적 가치를 성취하려는 욕구.

Creation

Freedom

Symbolic

ERA 모형 : 인간의 기본욕구는 무엇이며, 그것은 어떠한 과정을 거쳐 동기를 불러일으키게 되는지에 관심을 둔다.

Human needs set.Insight



01

쾌락, 자극, 일탈

일상으로부터의 탈출과 함께 자극적인 것들을 감각적으로 수용하려는 욕구.

특히 인터넷 환경에서의 익명성, 가상세계(Virtual reality) 속에서 제2의 자아를 드러내려는 욕구.

Existence: 존재의 욕구

HedonismHuman Needs Cards









안전, 보안, 프라이버시

타인들로부터 자신의 안전과 정보의 보안을 유지하려는 욕구 뿐만 아니라, 자신의 감정, 신체 또는 경제적 사안의 노출을 꺼리는 욕구.

개인에게 축적되는 수많은 정보자산(Information property)가치가 확장, 오용되면서 보안과 프라이버시는 요구는 높아짐.

02Existence: 존재의 욕구

SecurityHuman Needs Cards





Human Needs Cards

조화, 안정, 노스텔지아

변화보다는 지속가능한 안정된 라이프스타일을 영위하고자하는 욕구.

미래지향적이기 보다는 과거의 기억과 향수를 동경하고 현실 속에서 정신적인 힐링(healing)을 추구하려는 욕구.

03Existence: 존재의 욕구

Stable





자기표현, 자아투영, 개성

자신이 속한 사회, 타인과의 관계에 대해 누적된 경험에 대한 자기만의 표현욕구.

선호 브랜드 소유와 공유 등, 자기만의 세계를 적극적으로 들어내려는 욕구

Human Needs Cards04Relation: 관계의 욕구

Identity






소속감, 애정, 친화

다른 사람들과 좋은 관계를 유지하려고 노력하며, 특정 소셜 그룹의 소속감을 중시하는 욕구.

긍정적인 사고와 열린 사고로 타인을 자신의 영역에 함께하려는 욕구.

Friendship






Confidence

신뢰, 믿음, 자신감

다른 사람과의 약속을 이행하는데 있어 확신과 믿음을 주려는 욕구.

신뢰가 있는 타인과의 관계가 만들어진다면 뭐든지 잘 할 수 있다는 자신감을 가지려는 욕구.






Power

권력, 능력, 관심, 신분, 주목

높은 권력욕구를 가지고 리더로써 남을 통제하며, 남들로 하여금 자신이 비교우의에 있고자 하는 욕구.





http://www.youtube.com/watch?v=2Gcn4wJvbR8

http://www.youtube.com/watch?v=2Gcn4wJvbR8

Human Needs Cards08Accomplishment: 성취의 욕구

Beauty

심미성, 미적 가치 추구

특정한 관점에서 독특한 미적 욕구를 가지고 있으며, 기능보다는 상징적 또는 주관적인 미적 가치를 성취하려는 욕구.






Explore

탐구, 호기심, 진리

모호하거나 잘 알지 못하는 외부 환경에 대해 알려고 노력하는 욕구.

스스로의 호기심, 알고자 하는 대상에 대한 명쾌한 해결 능력을 성공적으로 발휘함으로써 자긍심을 높이려는 욕구.






Adventure

모험, 프론티어

도전의식이 투철하고, 미지의 세상에 대한 강한 동경으로 새로운 능력을 개발하고자 하는 욕구.






UX Needs (What I Want)(needs/problem/pain)

User Context

Time(언제)

이동 중에 _나를 추적하는 위치정보로 부터 보호 받고 싶다.

Place(어디서) 자동차 안에서 _나만이 알 수 있는 자신만의 접속 방법이 필요하다.

Occasion(상황) 모바일결제 중

_나의 접속 경로는 숨기되 원하는 정보만를 얻고 싶다.

_나의 개인정보를 타인과 안전하게 공유하고 싶다.

WIW Table

WIW table: UX key-Function finding

앱서비스에서 해결해야 할 핵심 사용자 니즈 정의하기

Insight WIW : What I really Want to, 인간동기 욕구에 부합하는 도구적 니즈 ‘타깃 유저가 진정 원하는 니즈는 무엇인가?’

Fundamental Human Needs

Security 안전, 보안, 프라이버시


“앱서비스의 도구적 니즈(UX Needs)의 구체화”

Fundamental Human Needs_인간 근원적 니

즈

UX Needs(functional Needs)_도구적 니즈


WIW table: UX Needs finding

앱서비스에서 해결해야 할 핵심 사용자 니즈 정의하기

Insight WIW : What I really Want to, 인간동기 욕구에 부합하는 도구적 니즈 ‘타깃 유저가 진정 원하는 니즈는 무엇이가?’


Killer-UX FunctionUX Needs

S

Ex) Kids mobile App.

UX Needs Issues

Integrated Function

Biz. Strategy

Technology Issues

미취학 아동 타켓

크리스마스 선물로 사주기에부담 없는 가격

놀이와 학습을 동시에 제공

…

고급기능을 제거하고 관심 있어 하는 기능, 스타일 요구

자가 학습기능 필요

…

블루투스 기능 적용

타 게임기와 호환

크라우드 서비스 기술

…

부모와 직접적이고 간단한 커뮤니케이션 필요

원터치 방식의 직접 대화기능

단순한 인터페이스, 케릭터를이용한 인터페이스

현재 위치를 실시간으로 파악, 제한법위를 벗어나면 자동호출

선호 게임기의 에뮬레이터가탑재된 인터랙티브 학습용 APP

…

가중치(1~3)

…

평가(1~5)

◀UX concept

가중치(3) x 평가(5)

2

4

8

15

6

UX concept finding

Practice

• Think User/CustomerUser Needs- Biz. 전략 – UX 성과 달성을 위한 핵심기능 우선순위 정하기

User Needs 관점에서 발굴된 아이디어와 Seeds(Technology) 관점에서 발굴된 아이디어를 결합(integrated)하여 UX concept을 도출한다.

UX concept: 거창한 ‘기능명세’ 를 만들어 내는 것이 아니라, 비즈니스 성과를 달성하기 위한 핵심컨셉을 찾는 것이 목표.

Persona

Part-1.

UX Actually UX concept planning

U.camp

UX 구체화하기 위한 UX개발 헌장(charter) 작성하기!

UX Concept

핵심 UX컨셉

Killer-UX FunctionCore UX-Value

사용자(고객)의 UX 가치 제품/서비스

주요 기능

Target User

목표사용자

UX Needs

Target Market

목표 시장

사용자 니즈

Identity

제품/서비스

아이덴티티

Core Tech.Brand Concept

브랜드 컨셉 제품/서비스

구현 기술, 리소스


Practice(1)


Practice UX concept: 거창한 ‘기능명세’ 를 만들어 내는 것이 아니라, 비즈니스 성과를 달성하기 위한 핵심컨셉을 찾는 것이 목표.

차별화 포인트 기술 활용 전략

경쟁우위 전략 마케팅 전략

당신의 서비스에만 있는

Killer-Function/Service는 무엇인가?


제품/서비스

핵심 UX컨셉

Killer-UX FunctionCore UX Value

제품/서비스 주요 기능

Target User

목표사용자

UX Needs

Target Market

목표 시장

사용자 니즈

Identity

제품/서비스 아이덴티티

Core Tech.Brand Concept

브랜드 컨셉 제품/서비스 구현 기술, 리소스

UX design 컨셉 플레닝Practice UX Concept Charter: 이 앱에서 UX design 컨셉은 무엇인가?

• Think User/CustomerUX Concept Charter

UX Concept

사용자(고객)의 UX 가치

어떠한 UX를 통해서 어떻게 User의 라이프스타일에 긍정적인 영향을 주는지?

5min. datingBreak

Part-2.

UI Storyboard

U.camp

UI Storyboard 란,

UX key-concept 구현에 수반되는 사용자

태스크와 UI feature 간의 상호작용을시각화하여, 개발자/디자이너와의

의사소통을 돕는 도구이자,

완성해야 할 앱서비스와 예상되는

사용자경험 미리보기!

Define

앱서비스의 기능과 사용자 간상호작용 미리보기


Part-2.

UI Storyboard

U.camp

UI Storyboard 작성


Practice

• 사용자 시나리오를 시각화하면서 평가하는 과정을 거친다.

• 사용자 Task에 따른 세부적인 기능들 간의 흐름과 관계망을 파악할 수 있다.

• 개발자와 사용자 간의 피드백을 받으면 스토리보드를 재정비할 수 있다.

Feature List

Task Flow

Process Diagra

mIA

Wire-frame

Work-flow

Feature list: Killer-UX concept/UX Needs의 구현에 필요한 기능 리스트

User Task-flow: 해당 기능수행과 사용자의 행위 매핑 및 흐름도

Information Architecture(IA): 정보의 구조화와 위계관계망(우선순위)

Key-screen: 해당기능 구현을 위한 인터페이스 요소와 메인화면

Workflow: key-screen 내 상작용 및 key-screen 간 전개과정


행당 앱서비스의 핵심 UX 가치명제(UVP)

UVP를 구현할 유저인터페이스설계의 목적, 고려사항 등

해당 기능 별사용자 행위흐름도

User Task 별 UI 구현에 필요한 기능 리스트

Part-2.

UI Storyboard

U.camp

• 앱 설계에 필요한 조각들을 모아서 순서대로 놓고, 배치해보고, 쌓아서 조립하는 과정

• 실제 계발 단계에서 발생할 수 있는 문제점을 미리 발견하고 대처하기 위한 과정

앱 서비스에 필요한

기능 조각들 간의 관계 설계

Insight


>

Killer-UX

Concept

GUIMood board

(1) 기능

(3) 관계 (4) 구조

(5) 설계

(6) 연결(7) 검증

>

(2) 순서

UIStory board


Part-2.

UI Storyboard

U.camp

UI Feature ListKiller-UX Function에 수반되는 앱시스템, 서비스, 장치 등인터페이스 Feature 목록 나열하기

(1) 필수적이고 가장 먼저 구현되어야 하는 기능

기능

“기능 조각 모으기”

방법

- 사용자의 니즈를 충족시키기 위한 앱의 기능들을 나열한다.

- 우선순위 설정 방법에 따라 기술된 기능의 우선순위를 정한다.

- 기능간의 포함관계를 고려하여 삭제 및 추가한다.

- 정의된 기능들에 대해 우선순위를 설정한다.

개발에 필요한 기능들을 추출하고 우선순위 정의

Feature List

Task Flow

Process Diagram

IAWire-frame

Work-flow



Part-2.

UI StoryboardUX design & producing Workshop Program for STARTUP Teams.

U.camp

User Task Flow

Feature List

Task Flow

Process Diagram

IAWire-frame

Work-flow

영화정보 보기예매정보페이지

예매모드 진입

사용자 인증실시간 결제예매 알람 등록

영화 정보 검색 영화 정보 검색

예매

예매

결제

리뷰

평점

예시

기능수행을 위한 사용자의 행위 순서(흐름)로 나열하기


Part-2.


U.camp

Information Architecture

Feature List

Task Flow

Process Diagram

IAWire-frame

Work-flow

예시

리뷰하기 예매 내역 보기

Main Page

작성 확인

영화 감상평 보기

영화 감상평 쓰기

감상평 작성

설정

영화 예매 알람

소리 설정

내용 설정

영화 검색

달력으로 찾기

영화 선택

상영관 선택

날짜 선택

수정하기

삭제하기

영화 감상평 쓰기

찜한 영화 목록

기능들을 정보의 위계와 관계망으로 구조화하기


행당 앱서비스의 핵심 UX 가치명제(UVP)

UVP를 구현할 유저인터페이스설계의 목적, 고려사항 등

해당 기능 별사용자 행위흐름도

User Task 별 UI 구현에 필요한 기능 리스트

UI 메인화면-1

- Components- Feature

UI 메인화면-2


UI 메인화면-3


Part-2.


U.camp

Key Screen(wireframe)해당기능 구현을 위한 인터페이스와 메인화면 그려보기

“실제 화면에 기능 적용하기”

각 기능의 구조와 특성을 반영하여 실제 화면에 그려넣기

방법

- 앞서 정의되었던 중요도, 관계, 위계 질서에 따라 UI 단위의 상대적인 크기나 위치를 결정한다.

- 전체 큰 레이아웃에서 하위 단계로 내려오며 디자인 한다. (Pattern → Component)

- 이후 검색창과 버튼, 검색결과 목록, 관계 정보와 같은 세부 UI element를 정의한다.

- 마지막으로, 현재 화면에서 빠진 기능이나 UI 요소는 없는지 확인해본다.

Feature List

Task Flow

Process Diagram

IAWire-frame

Work-flow

영화제목 ________________

별점

줄거리 ___________________________

주인공 ______________________

영화제목 ________________

별점

줄거리 ___________________________

주인공 ______________________

영화제목 ________________

별점

줄거리 ___________________________

주인공 ______________________

뒤로 Search


Key-screen 간 상호작용, 화면전환 등 시뮬레이션

UI pattern & Interaction

Part-2.


U.camp

Workflow화면전환 및 key-screen 간 상호작용 및 시뮬레이션 해보기

“기능 별로 연결된 화면 검증해보기”연속된 화면을 살펴보면서 앱 사용절차 검증

방법

- 정의된 화면 별로 각 버튼이나 컴포넌트의 동작에 의해 필요한 추가 화면을 연결한다.

- 순서에 맞게 배열된 화면 단위로 시뮬레이션을 해보면서 앱 사용절차를 검증한다.

Feature List

Task Flow

Process Diagram

IAWire-frame

Work-flow

영화제목 ________________

별점

줄거리 ___________________________

주인공 ______________________

영화제목 ________________

별점

줄거리 ___________________________

주인공 ______________________

영화제목 ________________

별점

줄거리 ___________________________

주인공 ______________________

뒤로 Search

영화제목 ________________

별점

줄거리 ____________________________________________________

____________________________________________________________

____________________________________________________________

_________________________________________________________

_________________________________________________________

_________________________________________________________

_________________________________________________________

_________________________________________________________

_________________________________________________________

_________________________________________________________

주인공 ______________________

뒤로 Favorite



5min. datingBreak

Part-3.

GUI MoodboardUX design & producing Workshop Program for STARTUP Teams.

UXTriggertm

GUI Moodboard 란,

UX Concept이 반영된 앱서비스

화면의 직관적인 UX - Look & Feel,

앱서비스 Brand Identity를 일관되게 반영한

Tone & Manner로 최적의

디자인컨셉을 도출하는 과정

완성해야 할 앱서비스의 비주얼 컨셉과 시각적

사용자경험 미리보기!

Define


Part-3.


UXTriggertm

GUI Moodboard 목적

Define

• 수십만 개의 앱이 등록된 시장에서 차별화를 위해 개성있는 디자인은 필수이다.

• 앱의 핵심 기능이 드러나고 본래의 목적에 따른 사용에 도움이 되어야 하며

• 참신함과 전략적인 요구를 담아낼 수 있어야 한다.

바로 보고 쉽게 이해하고 아름다움을 느끼고 기억하게 한다.

시각적 계층 구조

가독성

미적 인상 개성

직관적 사용성 비주얼 네러티브+


TIP

Part-3.


UXTriggertm

모양 Shape매우 기본적인 요소이기 때문에 그 자체보다는 서체와 같이 여러가지 복합적인 형태로 사용됨.

기기별 디스플레이 사이즈와 해상도가 다른 안드로이드의 경우 이미지 크기에 대한 문제를 나인패치와 dp개념으로 보완한다.

크기 Size정보의 중요도 및 우선순위, 시인성 또는 가독성, 버튼 터치 오류 등을 좌우.

시력이 좋지 않은 노인이나 터치 정확도가 떨어지는 유아를 대상으로 하는앱의 경우 버튼 사이즈를보통보다 크게 디자인.

공간 Space2D 두께나 깊이가 없는 플랫한 형태ex)픽토그램

3D 앞, 옆, 위(아래)등이 3면이 고루 묘사되어있으며그림자, 반사 등을 통해 공간이 표현됨.

2.5D 약간의 두께와 깊이를 주어 볼록한 느낌이 있으나 플랫한 공간 위에 배치됨.ex) ios6 아이콘

형태 Form다양한 속성을 나타낼 수 있음. 직선/곡선, 정형/비정형,외곽선의 두께, 모서리 라운딩등

다양한 해상도를 고려하라


Insight

TIP

Part-3.


UXTriggertm

레이아웃 Layout시각적 구성 요소들에 대한 화면 상의 전반적인 배열.정보를 어떻게 보여줄 것인가?

정보의 양이나 분류등은 정보설계 Information Architecture와 UI 화면설계UI Wireframe 및 워크플로우Work flow 단계에서 상당부분 정리 되지만 GUI 컨셉이나 가독성 등에 따라 변경될 여지가 있다. UI설계자, 개발자와 긴밀히 협업하여 보완해 나가야 한다.

분량Amount and Density얼마나 많은 양의 정보를 한 화면에 보여줄것인가가 레이아웃에 있어서 가장 근본적인디자인요소.가장 일반적인 법칙은 꼭 보여 주어야 하는정보만 제공하는 것.

분류 Grouping정보의 범주를 시각적으로 어떻게 나누어줄 것인가?공백과 색, 윤곽선과 같은 시각적 경계 이용

정렬 Alignment정보의 그룹들을 어떤 순서에 따라 화면에배치할 것인가?정보의 사용 순서 : 먼저 사용하는 정보를좌측 상단, 나중에 사용하는 정보를 우측하단에 제공.정보의 일반적인 순서, 중요도, 사용 빈도 등..

공간적 관계Spatial Relation일반적으로 관련된 자료는 수평보다 수직으로 배열하는 것이 더 좋다.문자정보는 좌측정렬, 숫자정보는 우측정렬권장. 파일 구조와 같은 계층적 관계는 들여쓰기.

정보의 구성은 긴밀한 협업을 통해 보완하라


Insight

TIP

Part-3.


UXTriggertm

타이포그라피Typography

플랫,메트로 UI 디자인에서 타이포그라피의 비중이 훨씬 커지게 되었다. 웹이나 모바일 디스플레이에서는 산세리프체의 가독성이 더 좋다. iOS기본서체 Helvetica와 Android기본서체인 Roboto도산세리프체이다.

서체 Typeface폰트Font라고 불리우는 글자의 형태산세리프San-serif : Arial, Helvetica, 고딕계열세리프Serif : Time, Garamond, 명조계열

HelveticaArial

Time New Roman

GaramondBradley Hand

돋움체나눔고딕나눔명조바탕체궁서체

기능적 역할: 의미 전달, 가독성과 정보전달 강조형태적 역할: 조형미 표현

크기 Size주로 Point 단위로 나타내며, 같은 크기라도서체에 따라 다를 수 있다.

굵기 WeightThin, Light, Regular, Medium, Bold, Black etc.

스타일 StyleItalic, Condensed, Expended

행간 Line Space문장과 문장의 사이 간격

자간 Letter Space글자와 글자 간격

산세리프의 가독성이 좋다.


Insight

Part-3.


UXTriggertm

그래픽Graphic

비문자적인 형태의 복합 디자인 요소

TIP

아이콘의 경우 모바일 디스플레이 환경에 매우 유용하다. 심미적 표현 여지가 많고 디자인 컨셉표현에 중요한 포인트이기 때문에 간혹 남용하는 경우가 있다. 지나친 생략으로 인해 사용자의혼란을 야기할 수 있기 때문에 사용성에 입각하여 사용 여부를 고민해야 한다.

이미지 Image실제 세상이나 상상 속의 세상을 그대로 표현하기 위한 수단사진, 일러스트레이션

다이어그램 Diagram복잡한 시스템을 추상화하여 상징적으로 표현추상화 정도가 높을수록 전반적인 내용, 추상화 정도가 낮을 수록 구체적인 내용 설명

아이콘 Icon조작부의 기능을 표현. 이미지나 다이어그램은 시스템을 표현, 아이콘은 시스템 표현과 동시에 사용자로 하여금 기능 조작 유도추상화 정도 : 가능한 단순한 아이콘 형태 제공, 메타포 : 조작방법보다 조작하는 대상을표현하는 것이 효과적,텍스트와 함께 제공 : 사용오류 낮아짐.

테이블과 그래프Table and Graph수치 표현에 효과적테이블 : 가로축과 세로축을 통해 격자형으로 표현하는 방식정확한 연산이 필요한 경우. 특정 자료를찾는 경우 적합.그래프 : 꺾은 선 그래프나 막대 그래프 등 다양한 그래픽 요소를 통해 표현작업 진행 방향. 추세분석. 미래예측 표현.


그래픽요소의 남용을 피하라.

Insight

Part-3.


UXTriggertm

인지적 효과

시각적 계층구조화면 구성 요소의 위치와 구성 요소 간의 관계를 단계적으로 인지하도록 설계. 사용자의 시선을 유도하여 원하는 정보를 빨리 찾고 이해하도록 함.

미적 인상디지털컨텐츠가 사용자들에게 제공하려는핵심가치에 따라서 그에 맞는 감성을 제공하는 것이 중요. 시스템을 사용하기 전에 느끼는 첫인상이나 시스템을 사용하고 나서사용자가 풍부한 감성을 받을 수 있는 지의여부가 제품의 선택에 매우 중요한 기준이됨.앱에서 풍기는 분위기라고 볼 수 있다. 미적인상이 정해지면 GUI디자인 요소의 활용 기준이 정해진다. 앱의 성격이나 목적, 사용자의 성별, 연령 등을 고려하여 정하도록 한다. 가독성

얼마나 효율적을 정보를 읽을 수 있는지를의미. 거의 모든 시각요소들이 가독성에 영향을 미침.특별한 이유로 가독성을 낮추려는 의도가아니라면 가독성에 대한 규칙은 철저하게지켜주는 것이 좋다. 특히 주사용자가 노인일 경우 폰트의 크기가 중요하다. 또한 텍스트 컨텐츠가 비중이 큰 e-book 같은 경우 가독성과 함께 눈의 피로를 최소화 시킬 수 있게 디자인해야 한다.

브랜드 아이덴티티독특성과 지속성을 지님. 다른 제품과 구별되며 오랜시간 동안 지속됨. 한번 구축된 BI는 경쟁사들이 모방하기 어려움.

감성적 효과


GUI 디자인 효과

Insight

• 수십만 개의 앱이 등록된 시장에서 차별화를 위해 개성있는 디자인은 필수이다.

• 앱의 핵심 기능이 드러나고 본래의 목적에 따른 사용에 도움이 되어야 하며

• 참신함과 전략적인 요구를 담아낼 수 있어야 한다.

바로 보고 쉽게 이해하고 아름다움을 느끼고 기억하게 한다.

Part-3.


UXTriggertm

앱 UI/GUI 디자인 원칙개성 있는

앱디자인 사례

기본적인 디자인 원칙을 토대로 앱의 성격에 맞으면서사용자에게 감성적으로 어필 할 수 있는 포인트를 찾아본다.

시각적 계층 구조

가독성

미적 인상 개성


개성있는 디자인

Insight

Part-3.


UXTriggertm

Step 1. 머리 속에 흩어져있는 아이디어의 조각을 모아 각자 하나씩 Moodboard를 완성한다.

Step 2. 팀원들과의 토의를 통해 각자의 Moodboard를 하나의 컨셉으로 재구성한다.

Step 3. 다양한 가설에 따라 여러가지 컨셉이 나올 수 있다.

Step 4. 최대한 빠르게 앱에 적용해보고 결과에 따라 디자인을 발전시킨다.


GUI MoodboardPractice

사용자 감성어휘 앱서비스 시각적 모티브

미적 인상(개성)

앱서비스의 전체공간 이미지

앱서비스의 부분 요소 이미지

디테일_컬러톤

디테일_질감/패턴

디테일_폰트 스타일

Part-3.


UXTriggertm



[워크숍]앱센터와 라임페이퍼가 함께하는

스타트업을 위한

UX디자인 실전 워크숍

u cmap 워크숍 강의코칭자료집 종합-v1.0(ucamp2기)

Design

Transcript of u cmap 워크숍 강의코칭자료집 종합-v1.0(ucamp2기)