사물인터넷(iot)/웨어러블 ux 디자인툴킷_ux-trigger for iot/wearable_v1

UX-driven IoT design Tool-Kit

for IoT/Wearable

사물인터넷(IoT) UX 디자인툴킷

Ver.1.0

Find your own UX design-way

TM

[UX trigger ] 은

UX design Trigger for STARTUP Team

Copyright ⓒ2015 Limepaper, Inc. All rights reserved.

사물인터넷(IoT)/웨어러블 기반의 스타트업 비즈니스모델의 UX진단 및 UX/UI 디자인 워크샵입니다.

스타트업의 Lean-UX에 최적화하여 개발한 IOT/Wearable-UX디자인 툴킷을 활용하여,

서비스개발 초기단계에서부터 스타트업의 빠른 Time-to-Market 적용을 목표로 서비스의 UX/UI완성도를 높일 수 있는

UX/UI디자인 방법론을 체득할 수 있으며, 궁극적으로 스타트업의 사업아이템의 UX경쟁력 강화를 목적으로 진행합니다.

for IoT/Wearable

for IOT/Wearable


Design thinking, User Centered Design!

Methodology

디자인사고와 사용자중심디자인

for IoT/Wearable

Approach


답은 사용자들에게 있다!사용자중심디자인(UCD) 프로세스는

사람들의 니즈와 의도, 그리고 그들의 삶의 방식을 파악하는 것에서부터 시작.

‘Think(진단검증)–De�ne(컨셉메이킹)–Act(프로토타이핑)–Re�ne(평가개선)’의

4단계 활동을 통해 UX/UI 디자인의 진단 및 검증을 하고, 평가개선을 거쳐 디자인 완성도를 높여 갑니다.

Mindset

User/Customer사용자(고객) 중심 사고

Think : UX진단검증

Killer-UX Function킬러 UX 컨셉 구체화 전개

De�ne : UX컨셉메이킹

Feedback피드백/평가개선 및 협업

Re�ne : UX평가개선

Vertical prototypingUI스토리보드/GUI 시각화

Act : UX/UI 프로토타이핑

UX



01 UX ActuallyUX 진단 및 사용자 분석

02 UI Storyboard사용자테스크 분석과 사용자 인터페이스/인터렉션 설계

03 GUI moodboard어플리케이션(App) 비주얼 컨셉 플레닝

Stage 01.User scenario & User analysis

step-1. User scenario & Journey Map

step-2. UX �ow & behavior data analysis

step-3. Human needs set

Stage 02.Killer-UX function & UX-service concept

step-4. UX context analysis & UX touch-point

step-5. Killer-UX function

step-6. UX-service concept planning

Stage 03.User modeling & UXD requirement

6h/day 6h/day 6h/day

step-7. Persona – User modeling

step-8. Design requirement

Stage 04. User task-�ow & User-device Interaction

step-9. User task analysis & UI feature

Step-10. User-Device Interaction

Stage 05.App. UI key-screen & Work�ow

step-11. UI key-screen(Wireframe)

Step-12. Work�ow

Stage 06.User task-�ow & User-device Interaction

step-13. Visual concept – ‘Look & Feel’

Step-14. GUI moodboard – ‘Tone & Manner’

Stage 07.Demoday

Evaluation & feedback

for IoT/Wearable



User scenario & User analysis

UX Actually UX진단 및 사용자 분석

Insight & Analysis

Understanding

User exactly!

UX 진단 및 사용자 분석 단계

사용자(고객)를 정확히 이해한다: 사용자는 어떤 사람들인가?

제품과 서비스를 사용하는 사용자의 행동, 라이프스타일, 성향 등을 분석하여 제품과 서비스에

반영되어야 할 사용자 니즈를 발견하고, 목표 사용자의 경험 가치의 본질을 파악하여 제품서비스의 UX 시나리오를 구체화한다.

for IoT/Wearable

Stage - 01 Think

step-1. User scenario & Journey Mapstep-2. UX �ow & behavior data analysisstep-3. Human needs set

Method

01-1 UX Actually UX시나리오진단 및 User Analysis

Step 1User Scenario & Journey map 사용자 입장에서 use case 작성하고 사용자 이해하기!사용자가 무엇을 원하고 필요로 하는지에 대해 UX시나리오를 구체화하여, 궁극적으로 제품/서비스 사업아이템이 근본적으로 해결해야 할 사용자 니즈의 본질을 찾는다.

Step 2UX �ow & User behavioral data; 행위 데이터와 UX흐름

경험의 흐름을 파악하고 사용자에게 형성될 UX의 구조와 요소를 이해한다. 제품/서비스의 어떤 요소들이 사용자에게 어떤 유형의 동기로 작용하여 사용자에게서 특정 행동을 이끌어내는지를 파악한다.

Item 사물인터넷(IOT)서비스아이템은 무엇인지 간단히 작성해 보시오.

User de�nition2어떤 사용자(고객)인지?사용자의 성격, 선호도, 라이프스타일, 직업, 태도, 가치관 등 목표 사용자 정의

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

Needs/Problem3무엇이 문제인지?

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

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

ex) 쇼핑목록 작성과 동시에 구매,결제 서비스

User Task Flow6기능/서비스 사용방법은?

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

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

Bene�t/Meaning7사용하는 가장 큰 이유는?

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

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

Human needs set(ERA Model)

* 타킷 사용자에 해당되는 human needs에 체크. 중복가능

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

Step 3Human Needs ; 인간 근본 욕구 및 동기 분석

당신의 제품/앱서비스 이면에 숨겨진 사용자 니즈의 근본 원인 찾기!

Q. 사용자는 이 서비스를 통해 어떤 욕구를 해결할 수 있는가?Q. 사용자가 이 서비스를 사용하는 단 한가지 이유는?Q. 사용자는 이 서비스를 통해 얻을 수 있는 경험적 가치는 무엇인가?


1

User Identity : 사용자는 어떤 욕구의 소유자인가?(인간 본질적 욕구) WIW : 궁극적으로 사용자가 원하는 기능은 무엇인가?(앱의 Key-function)


ex) 개인 프라이버시에 민감하며, 사회적 소속감을 중시 ex) 자신의 개인정보를 친한 지인과 안전하게 공유할 수 있는 자신만의 접속 방법의 획득

기억/태도Memory & Attitude

결과에 대한 만족 수준의 기억,

다음 행동 영향을 주는 요인

사용자 행동에 대한 어떤 인터렉션/인터페이스가

필요한지 판단하는데 도움이 됨.

사용자 행동이 일어나게 되는

직접적인 이유(목표)

의도/원했던 목표와 결과의 비교평가와

인식한 것에 대한 경험적 해석

사용자 행동 패턴 User behavior pattern

기대 결과의 평가/피드백Evaluation & Feedback

동기/계기(의도)Motivation & Goal

안전, 보안, 프라이버시

타인들로부터 자신의 안전과 정보의

보안을 유지하려는 욕구 뿐만 아니라,

자신의 감정, 신체 또는 경제적 사안의

노출을 꺼리는 욕구.

개인에게 축적되는 수많은

정보자산(Information property)가치가

확장, 오용되면서 보안과 프라이버시

요구는 높아짐.

Privacy

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

자신이 속한 사회, 타인과의 관계에

대해 누적된 경험에 대한 자기만의

표현욕구.

선호 브랜드 소유와 공유 등,

자기만의 세계를 적극적으로

드러내려는 욕구

Identity

소속감, 애정, 친화

다른 사람들과 좋은 관계를 유지하려고

노력하며, 특정 소셜 그룹의 소속감을

중시하는 욕구.

긍정적인 사고와 열린 사고로 타인을

자신의 영역에 함께하려는 욕구.

Friendship

심미성, 미적 가치 추구

특정한 관점에서 독특한 미적

욕구를 가지고 있으며, 기능보다는

상징적 또는 주관적인 미적 가치를

성취하려는 욕구.

Beauty

쾌락, 자극, 일탈

일상으로부터의 탈출과 함께

자극적인 것들을 감각적으로

수용하려는 욕구. 특히 인터넷

환경에서의 익명성, 가상세계(Virtual

reality) 속에서 제2의 자아를

드러내려는 욕구.

Hedonism

신뢰, 믿음, 자신감

다른 사람과의 약속을 이행하는데 있어

확신과 믿음을 주려는 욕구.

신뢰가 있는 타인과의 관계가

만들어진다면 뭐든지 잘 할 수 있다는

자신감을 가지려는 욕구.

Con�dence

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

높은 권력욕구를 가지고 리더로써 남을

통제하며, 남들로 하여금 자신이

비교우의에 있고자 하는 욕구.

Power

탐구, 호기심, 진리

모호하거나 잘 알지 못하는 외부

환경에 대해 알려고 노력하는 욕구.

스스로의 호기심, 알고자 하는

대상에 대한 명쾌한 해결 능력을

성공적으로 발휘함으로써 자긍심을

높이려는 욕구.

Explore

모험, 프론티어

도전의식이 투철하고, 미지의

세상에 대한 강한 동경으로 새로운

능력을 개발하고자 하는 욕구.

Adventure

조화, 안정, 노스텔지아

변화보다는 지속가능한 안정된

라이프스타일을 영위하고자하는 욕구.

미래지향적이기 보다는 과거의 기억과

향수를 동경하고 현실 속에서 정신적인

힐링(healing)을 추구하려는 욕구.

Stable

Existence존재의 욕구

Relation관계의 욕구

Accomplishment성취의 욕구

HumanNeeds

Context of Use4어떤 상황에서 사용하는지?시간(언제), 장소(어디서), 또는 특정 상황 등 사용 전후 맥락

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

Function5주요기능 및 기술은 무엇인지?

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

ex) 작성한 구매물품의 매대위치를 최단시간 경로로 추천 기능

Data 수집,생성 Data 해석,인식 Data 가공,전달

IOT/Wearable



Killer-UX function & UX-service concept


Insight & Analysis

Finding

UX touch-Point!

UX 핵심 기능과 UX서비스 컨셉 메이킹

UX 터치포인트: 서비스의 사용자경험 발화지점은 어디인가?

사용자 컨텍스트 분석으로부터 그들의 니즈와 행동패턴을 이해할 수 있는 정량적, 정성적인 데이터를 수집하고,

이 서비스의 UX접점과 Killer-UX Function을 찾아 서비스모델을 완성한다.

for IoT/Wearable

Stage - 02 De�ne

step-4. UX context analysis & UX touch-pointstep-5. Killer-UX functionstep-6. UX-service concept making

Methodology

UX Actually killer-UX Function 및 UX-service concept 도출

Step 4UX Context Analysis & UX touch-point 사용자와 외부 환경,사물 간의 맥락 분석을 통한 UX-서비스 모델링

사용자 컨텍스트(User Context) 분석

UX touch-point: 사물-사용자 행위 접점 IOT/Wearable Key-feature: 기능목록

UX Needs&Goal 사용자 니즈와 목표(의도,계기)


Step 6UX-Service Concept Planning; IOT의 서비스화

IOT서비스를 위한 UX design 컨셉은 무엇인가? 거창한 ‘기능명세’ 를 만들어 내는 것이 아니라, 서비스 모델을 완성하기 위한 UX 핵심컨셉과 목표시장의 서비스전략을 찾는 것이 목표

Step 5killer-UX FunctionUX성과 달성을 위한 핵심기능 우선 순위 정하기

User Scenario에서 정의된 User Needs 관점에서의 UX아이디어와 User touch-point에서 발굴된 feature를 결합(integrated)하여 killer-UX Function을 정의한다.

Q. 사용자는 이 서비스를 통해 어떤 욕구를 해결할 수 있는가?Q. 사용자가 이 서비스를 사용하는 단 한가지 이유는?Q. 사용자는 이 서비스를 통해 얻을 수 있는 경험적가치는 무엇인가?

Target Market : USP 전략 (목표시장)Eco-system collaboration관련 제품/서비스 생태계 콜라보레이션

Core Tech. 제품/서비스 구현 기술, 시스템Brand Concept 브랜드 컨셉/마케팅전략

UX Service Concept 제품/서비스 핵심UX컨셉

UX touch-point 제품/서비스와 사용자 간 소통의‘접점’


행위 패턴(behavior pattern)

테스크 시나리오(task scenario)

시간(Time)의 분리와 결합

공간(Place/Location)의 분리와 결합

사람/이벤트(People/Event)의 분리와 결합

조건/상황(Condition/Situation)의 분리와 결합

대상 (things/devices)

속성 (attributes/element)

조작,기능 (operation)

User Behavioral Patterns/Data사용자 행위 패턴과 데이터Killer-UX Function 제품/서비스의 핵심기능


01-2

Killler-UX Function 당신의 제품/서비스/앱만이 갖고 있는 (unique) UX핵심포인트를 우선순위를 고려하여 나열해보세요.

Killler-UX Function 1정보·데이터 관점

기능(도구)적 사용성관점

서비스 유용성 관점

Killler-UX Function 2

Killler-UX Function 3

이 IOT/Wearable은 을/를 할 수 있다.(가능하다)

ex) TV리모컨

ex) 숫자,전원버튼,외부입력,선호채널

ex) on/off,채널변경,음량조절

1 사물 컨텍스트(Object Context) 분석2

IOT/Wearable

서비스 전략(UX관점)

차별화된 UX 포지셔닝 전략은 무엇입니까?

UX 경쟁우위 - 비지니스적 성공을 확신하는 핵심 사용자 가치효용은 무엇입니까?

핵심기술의 활용 전략은 무엇입니까?

이 서비스의 수익모델과 마케팅 전략은 무엇입니까?



User modeling & UXD requirement


Insight & Analysis

Veri�cation

UX value proposition!

퍼소나 기반 사용자모델링과 UX 디자인요구사항 도출

사용자가치 검증: 제품/서비스를 이용하는 하는 단 한가지 이유는?

사용자가 기대하는 UX에 대한 사용자가치 수준과 피드백 검증을 위해 퍼소나 기반으로 UX 시나리오를 완성한다.

퍼소나가 달성하고자 목표를 구체적으로 작성하고, 목표에 도달하기까지의‘의도/계기–실행–기대결과–평가/피드백’의 사용 상황시나리오를 작성한다.

for IoT/Wearable

Stage - 03 Re�ne

step-7. Persona – User modeling step-8. Design requirement

Methodology

ex) 촬영 후 메시지 작성하여 sns업로드(공유)하기

사용 상황 시나리오 퍼소나가 달성하고자 하는 목표에 도달하기 까지의 의도-실행-기대결과-평가-피드백의 과정을 ‘상황과 대상, 사용자 행위’를 시간 순서로 작성하기

① 목표(Goal) ② 의도(Intention) ③ 행동계획(Action plan) ④ 실행(Action) ⑤ 지각(Perceiving) ⑥ 해석(Interpreting) ⑦ 평가(Evaluation)

* Donald Norman’s 7 stage of Action Model

UX Scenario(in detail)1

UX Actually(Advanced) 퍼소나 기반 UX 진단 및 사용자 모델링

Step 7Persona - User modeling

Step 8Design Requirement

퍼소나가 달성하고자 하는 목표와 그 동기는 무엇인가?


Q. 사용자가 달성하고자 하는 목표와 그 동기는 무엇인가?Q. 사용자는 어떤 사고와 행동 패턴을 갖고 있는가?Q. 사용자의 목표 달성을 위한 디자인 요구사항은 무엇인가?

Copyright ⓒ2015 Limepaper, Inc. All rights reserved.UX design Trigger for STARTUP Team

01-3

Goal & Motivation

경험적 목표

제품/서비스를

사용하면서 어떻게

느끼고 싶어하는가?

ex) 사용하는 동안 스스로 스마트하다고 느끼고 싶다

궁극적 목표

사용자가 마음 속으로

기대하는 바는 무엇인가?

ex) 심각한 문제가 발생하기 전에 미리 알고 싶다

인생의 목표

사용자 인생의 목표에 이

제품/서비스는 어떤

의미인가?

ex) 이 분야의 전문가가 되고 싶다

목표 퍼소나의 사고와 행동 패턴은 무엇인가?

사용내역

사용자는 어떤 행동을

하는가? 얼마나 자주,

얼마나 오래 사용하는가?

태도/관점

사용자가 제품과

서비스를 바라보는

생각과 관점은 무엇인가?

적성/지식

사용자는 어떤 교육을

받았는가?

이 제품/서비스를 이해하는

능력 수준은 얼마인가?

의도/계기

이 제품/서비스를

사용하게 된 이유, 계기는

무엇인가?

기술활용 능력

이 제품/서비스의 영역과

관련된 사용자의 능력과

기술은 무엇인가?

Behavioral patterns

퍼소나 기반 사용자 모델링

1 2

디자인 요구사항퍼소나의 목표달성을 위해 디자인 해야 하는 IOT 서비스는 어떻게 구성할 것인가?

하드웨어/기기(HW/Device) 네트워크와 인프라(Network) 소프트웨어/어플리케이션(SW/APP)

Design Requirment

Function 관점 Connecting 관점 User Interace 관점

2

IOT/Wearable



User task-�ow & User-device Interaction

UI Storyboard 사용자 테스크 분석과 사용자 인터페이스/인터렉션 설계

Insight & Analysis

Understanding

User behavior data!

사용자 테스크와 사용자-디바이스 인터렉션 디자인

사용자 데이터: 디바이스/사물은 사용자와 어떻게 소통하는가 ?

사용자의‘행위’를 중심으로 사물/디바이스와 사용자가 능동적으로 소통하는 방식을 구조화하고,

실제 디바이스/사물인터넷의 하드웨어 디자인에 요구되는 기술요소와 형태요소(form-factor)를 설계한다.

for IoT/Wearable

Stage - 04 Act

step-9. User task analysis & UI featurestep-10. User-Device Interaction

Method

User Task-Domain & Goal: 사용자의 목표와 테스크 도메인 설정하기

UX Storyboard란,UX key-concept 구현에 수반되는 사용자 태스크와 UI feature 간의 상호작용을 시각화하여, 개발자/디자이너와의 의사소통을 돕는 도구이자, 완성해야 할 앱서비스와 예상되는 사용자경험 미리보기!

Q. 도출한 핵심 UX 컨셉이 UI에 충분히 반영되었는가?Q. 기능 별 우선순위가 적절히 고려되었는가?Q. 각 기능 간 위계 및 관계가 효율적으로 구성되었는가?

UI Storyboard (Device) UI/인터렉션 방식을 정의하고, 사용자 테스크와 UI Feature 간 상호작용 설계하기

Step 9User Task & UI feature list-up UX Needs/Killer-UX concept의 구현에 필요한 기능 리스트 작성. 사용자 Task에 따른 세부적인 기능들 간의 인터렉션 방식, 정보의 흐름과 관계망을 파악한다.

User Behavior Pattern & Data: 사용자 행동 패턴과 사용자 데이터 정의

ex)사진촬영 후 메시지 작성하여 sns 자동업로드 할수 있다.

Step 10User-Device Interaction

UX design Trigger for STARTUP Team Copyright ⓒ2015 Limepaper, Inc. All rights reserved.

02-1

① 사용자는 (목표,의도) 을/를 하고자 한다.

② 이 제품/앱은 (기능/서비스) 을/를 할수 있다 .

1. 시간 데이터(Time) 2. 공간 데이터(Place/Location) 3. 사람/이벤트 데이터(People/Event) 4. 조건 데이터(Condition)

Device Form-Giving (Sketch)

UI Feature List 해당 user task 수행을 위해 제품/앱이 갖춰야 할 UI요소User Task 수행 (Task domain: )

① 특정 용도(기능) 측면 A(Goal):

B(Behavior):

DeviceForm-Giving

Device Tech

C(Feedback):

A(Goal):

B(Behavior):

C(Feedback):

A(Goal):

B(Behavior):

C(Feedback):

사용자는 (A)를 하기 위해서 (B)를 하면 (C)가 된다.



② 선호/취향(좋아하는 이유) 측면

③ 문제·부정적 측면(싫어하는)

ex) 제품/SW/서비스는

~해야 한다. ~ 갖추고 있다 등

Operation & Interaction Type (조작 및 인터렉션 방식)

IOT/Wearable

IOT Device와 인터렉션 기술분석 및 디바이스 형태요소 도출

Device Technologies (디바이스 기술)

① Sensing Tech & User Data센싱기술과 사용자 데이터 수집/가공/전달

② Connecting Tech & Device커넥팅 기술과 디바이스 연결

③ Networking Tech & Infra네트워킹 기술과 인프라

ex) ~이 가능하다.

ex) ~을 할수 있다.

ex) ~이 된다.

① Top view

② Front view

④ Perspective

③ Side view



App. UI key-screen & Work�ow

UI Storyboard 사용자 테스크 분석과 사용자 인터페이스/인터렉션 설계

Insight & Analysis

Simulation

Vertical prototyping!

사용자인터페이스(UI) 시각화를 위한 와이어프레임과 워크플로우 설계

프로토타이핑 : 사용자가 경험하게 되는 인터렉션의 실체는 무엇인가?

사용자가 경험할 실체, 정보/기능/서비스의 전달 방식과 인터페이스를 빠르게 시각화하여

사용자 경험하게 될 어플리케이션(App)의 실체와 인터렉션 방식을 시뮬레이션해 본다

for IoT/Wearable

Stage - 05 Act

step-11. UI key-screen(Wireframe)step-12. Work�ow

Method

Key-screen Layout UI Element Description

No. Naming(명칭) Description(기능설명)

개발이슈

No. Naming Description

(개발환경에 따른 예외사항, 또는 적용 규칙 등 개발 시 고려해야 하는 이슈)

Step 11UI Key-screen(Wireframe) 해당기능 구현을 위한 인터페이스와 메인화면 그려보기(wireframe)

User task-�ow에서 정의된 주요 components와 세부 feature의 화면 레이아웃을 구성한다.

Step 12Work�owkey-screen 간 상호작용 및 시뮬레이션 해보기

정의된 화면 별로 각 버튼이나 컴포넌트의 동작에 의해 필요한 추가 화면을 연결한다. 순서에 맞게 배열된 앱화면 단위로 시뮬레이션을 해보면서 제품/서비스 사용절차를 검증한다.

User Interaction

화면을 손가락으로 짧게(brie�y) 터치

아이템을 선택하거나 조작할 때

Tap

화면을 탭한 직후 한번 더 탭한 채로 손가락을 화면에서 떼지 않고 위쪽이나 아래쪽 방향으로 이동하여 뗌

한 손가락으로 화면을 확대하거나(아래쪽으로 이동) 축소할 때(위쪽으로 이동)

Double Touch Drag

화면을 터치한 채로 재빠르게 이동

화면을 좀 더 빠르게 스크롤 할 때화면 내 요소를 좀 더 빠르게 이동시킬 때

Flick

화면을 누른채로 일정시간 이상 유지

- 화면 내 텍스트를 확대해서 볼 때- 화면 내 요소에서 추가 액션을 할 때 직전에 수행했던 액션을 취소할 때

Touch and Hold

스마트폰을 손에 쥔 채로 흔들어 댐

Shake두 손가락을 이용해 화면을 바깥쪽으로 벌리거나(Pinch Close)안쪽으로 오므림(Pinch Open)

두 손가락으로 화면을 확대하거나 축소 할 때

Pinch Open/Close

화면을 재빠르게 두번 터치

지도 비율을 확대하거나 텍스트 영역을 선택할 때

Double Tap화면을 한 방향으로 천천히 이동하며 터치

- 화면 전체를 이동할 때(Scroll, Paging)- 화면 바깥 부분의 위젯을 꺼낼 때(Bezel Swipe)- 화면 내 요소에서 추가 액션을 할 때(List)- 이전 화면으로 갈 때(iOS7)

Swipe화면에서 특정 아이템을 선택한 채로 화면에서 손가락을 떼지 않고 손가락을 이동하여 원하는 지점에서 뗌

화면 내 요소를 특정 위치로 옮길 때

Drag

UX Storyboard란,UX key-concept 구현에 수반되는 사용자 태스크와 UI feature 간의 상호작용을 시각화하여, 개발자/디자이너와의 의사소통을 돕는 도구이자, 완성해야 할 앱서비스와 예상되는 사용자경험 미리보기!

Q. 도출한 핵심 UX 컨셉이 UI에 충분히 반영되었는가?Q. 기능 별 우선순위가 적절히 고려되었는가?Q. 각 기능 간 위계 및 관계가 효율적으로 구성되었는가?

UI Storyboard (App) 어플리케이션(App)의 인터페이스(UI)시각화를 위한 Wireframe/Workflow 설계하기


02-2

User Task : User Task : User Task :

* Work�ow-2

* Work�ow-1

User Task : User Task : User Task :

ex) 사진촬영 후 sns에 공유하고 사진내용입력

IOT/Wearable



GUI concept planning: ‘Look & Feel’, ‘Tone & Manner’

GUI moodboard 어플리케이션(App) 비주얼 컨셉 플레닝

Insight & Analysis

Understanding

Visual narrative!

그래픽 유저인터페이스(GUI) 컨셉 플레닝

시각적 네러티브 : 어플리케이션(App)의 시각적 인상과 개성은 무엇인가?

어플리케이션의 성격이나 목적에 맞는 시각적 언어로 GUI 컨셉을 계획한다. 사용자가 제품과 서비스를 사용하기 전의

첫인상이나 사용 후 사용자가 기억할 만한 인상과 개성을 표현하는 것인 관건이다.

for IoT/Wearable

Stage - 06 Re�ne

step-13. Visual concept – ‘Look & Feel’step-14. GUI moodboard – ‘Tone & Manner’

Method

GUI Moodboard 완성해야 할 제품/앱의 비주얼 컨셉과 시각적 사용자경험 미리보기!

Step 13Visual concept ‘look & Feel’

Step 14GUI moodboard - ‘Tone & Manner’

사용자가 쉽고 편리하게 사용할 수 있도록 입출력 따위의 기능을 알기 쉬운 아이콘 따위의 그래픽으로 표현한다. 앱의 성격이나 목적, 사용자들에게 제공하려는 핵심가치에 따라서 그에 맞는 감성을 제공하는 것이 중요하다. 시스템을 사용하기 전에 느끼는 첫인상이나 시스템을 사용하고 나서 사용자가 기억할 수 있을 만한 개성을 표현하는 것이 중요하다.

Visual Concept & Motive

제품/앱의 직관적인 미적 인상(개성)

제품/앱의 컨셉을 반영할 비주얼 모티브를 찾는다. 타깃 사용자의 성향, 라이프스타일, 미적 선호도 등에

영향을 미치는 디자인컨셉 키워드 를 작성한다.

타깃 사용자의 감성어휘 모티브

GUI Moodboard 란,UX Concept이 반영된 앱서비스 화면의 직관적인

UX - Look & Feel, 앱서비스 Brand Identity를 일관되게 반영한 Tone & Manner로 최적의 디자인컨셉을 도출하는 과정

Q. 정보의 범주를 시각적으로 어떻게 나누어 줄 것인가?Q. 시각적 구성 요소들에 대한 화면 상의 전반적인 배열과 느낌은 어떻게 보여줄 것인가?Q. 해당 앱서비스 화면의 시각적 인상, 또는 개성은 무엇인가?


사용자의 성향, 감정, 정서 등의 표현

시각적 인상, 매력 등 시각적 차별화 된 ‘Look & Feel’

제품/앱 화면 디자인의 모티브

ex) 남성적, 여성적, 신뢰성 등 ex) 반딧불, 폭포수, 무지개 등

ex) Fun, Sexy, Casual, Classic

03

Simple & Intuition Realistic & Decorative

Shape

GUI 요소의 크기나 형태에 대한 계획.매우 기본적인 요소이기 때문에 그 자체보다는 서체와 같이 여러가지 복합적인 형태로 사용된다.

Mono tone Colorful

Color&Tone

일상 생활에서 매우 빈번하게사용하는 디자인 요소.

디자인 컨셉은 전반적으로 색의 사용에 의해 좌우된다.

GUI 전체 공간에 대한 디자인 컨셉을 작성하시오.(배경,레이아웃 등)

2D Flat 3D Dynamic

Space

Persona

GUI 전체 공간에 대한 계획.2D+Flat 또는 3D+Realistic 등의 공간을 활용한 컨셉도출이 가능하다.

퍼소나 이미지 공간 정의하기(체크)

Matt Grossy

Texture

실제 사물의 재질감 표현 요소.

스큐어모피즘 또는 리얼메타포 컨셉디자인 시 활용한다.

San-Serif Serif Script

Typography

전통적인 그래픽 디자인에서도 매우 중요한 요소.

기능적으로 의미전달이 가장 중요하나 조형미를

표현하는 그래픽 요소로도 활용 가능하다.

Senior Junior

Classic Modern

Formal Informal

GUI 요소의 크기나 형태에 대한 계획을 작성하시오.(그래픽 요소의 모양,크기,형태 등)

Color 계획을 작성하시오.(컬러톤,색조,대비 등)

재질감 표현 계획을 작성하시오.(질감 등 시각요소의 디테일)

타이포디자인 컨셉을 작성하시오.

IOT/Wearable

UX-driven IoT design Tool-Kit

for IoT/Wearable

사물인터넷(IoT) UX 디자인툴킷

Find your own UX design-way

[UX trigger for IOT/Wearable]는 Mobile Computing 분야와 Ubiquitous Computing 분야에서 선도적인 기술을 보유하고,

혁신적이고 풍부한 사용자경험(UX을 창출하고자 설립된 UX 디자인 전문 벤처기업인 ㈜라임페이퍼에서 개발하였습니다.

라임페이퍼는 국내 대기업과 중소기업 뿐 아니라 설립 직후의 스타트업까지 다양한 규모의 회사들과 협력하여,

Smartphone/Smart TV/Digital Signage/IoT/wearable device를 비롯한 ICT embedded SW, AR, 모바일앱 서비스개발 등 다양한 UX 과제를 수행해오고 있습니다.

M 010. 7111. 0722 T 070. 8222. 5463 F 050. 5959. 5463 137-863 서울시 서초구 서운로 26-1 보일빌딩 6층 ㈜라임페이퍼

www.lime-paper.com / [email protected] trigger 커뮤니티(페이스북):

https://www.facebook.com/groups/ucampcommunity/

교육 컨설팅 문의

TM