SlideShare une entreprise Scribd logo
1  sur  17
Télécharger pour lire hors ligne
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
UX design Trigger for STARTUP Team
Design thinking, User Centered Design!
Methodology
디자인사고와 사용자중심디자인
for IoT/Wearable
Approach
Copyright ⓒ2015 Limepaper, Inc. All rights reserved.
답은 사용자들에게 있다!
사용자중심디자인(UCD) 프로세스는
사람들의 니즈와 의도, 그리고 그들의 삶의 방식을 파악하는 것에서부터 시작.
‘Think(진단검증)–Define(컨셉메이킹)–Act(프로토타이핑)–Refine(평가개선)’의
4단계 활동을 통해 UX/UI 디자인의 진단 및 검증을 하고, 평가개선을 거쳐 디자인 완성도를 높여 갑니다.
Mindset
User/Customer
사용자(고객) 중심 사고
Think :
UX진단검증
Killer-UX Function
킬러 UX 컨셉 구체화 전개
Define :
UX컨셉메이킹
Feedback
피드백/평가개선 및 협업
Refine :
UX평가개선
Vertical prototyping
UI스토리보드/GUI 시각화
Act :
UX/UI 프로토타이핑
UX
UX design Trigger for STARTUP Team
Copyright ⓒ2015 Limepaper, Inc. All rights reserved.
01 UX Actually
UX 진단 및 사용자 분석
02 UI Storyboard
사용자테스크 분석과 사용자 인터페이스/인터렉션 설계
03 GUI moodboard
어플리케이션(App) 비주얼 컨셉 플레닝
Stage 01.
User scenario & User analysis
step-1. User scenario & Journey Map
step-2. UX flow & 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-flow & User-device Interaction
step-9. User task analysis & UI feature
Step-10. User-Device Interaction
Stage 05.
App. UI key-screen & Workflow
step-11. UI key-screen(Wireframe)
Step-12. Workflow
Stage 06.
User task-flow & User-device Interaction
step-13. Visual concept –‘Look & Feel’
Step-14. GUI moodboard –‘Tone & Manner’
Stage 07.
Demoday
Evaluation & feedback
for IoT/Wearable
UX design Trigger for STARTUP Team
Copyright ⓒ2015 Limepaper, Inc. All rights reserved.
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 Map
step-2. UX flow & behavior data analysis
step-3. Human needs set
Method
01-1 UX Actually
UX시나리오진단 및 User Analysis
Step 1
User Scenario & Journey map
사용자 입장에서 use case 작성하고 사용자 이해하기!
사용자가 무엇을 원하고 필요로 하는지에 대해 UX시나리오를 구체화하여, 궁극적으로
제품/서비스 사업아이템이 근본적으로 해결해야 할 사용자 니즈의 본질을 찾는다.
Step 2
UX flow & User behavioral data; 행위 데이터와 UX흐름
경험의 흐름을 파악하고 사용자에게 형성될 UX의 구조와 요소를 이해한다. 제품/서비스의 어떤 요소들이 사용자에게 어떤 유형의 동기로 작용하여 사용자에게서 특정 행동을 이끌어내는지를 파악한다.
Item 사물인터넷(IOT)서비스아이템은 무엇인지 간단히 작성해 보시오.
User definition2
어떤 사용자(고객)인지?
사용자의 성격, 선호도, 라이프스타일, 직업, 태도, 가치관 등 목표 사용자 정의
ex) 도시에 거주하며 4세 자녀를 둔 맞벌이, 가사일에 항상 시간이 없는 워킹맘
Needs/Problem3
무엇이 문제인지?
제품/서비스가 해결, 또는 제공하고자 하는 핵심적인 사용자니즈
ex) 해야 할 일을 시간에 구애 받지 않고 실수 없이 처리하고 싶은 니즈
ex) 쇼핑목록 작성과 동시에 구매,결제 서비스
User Task Flow6
기능/서비스 사용방법은?
사용자 니즈를 충족시킬 해당기능을 사용하는 방법, 또는 인터랙션 방식
ex) 쇼핑리스트 작성, 실시간 마트에 전송, 위치기반으로 해당 매대 경로선택
Benefit/Meaning7
사용하는 가장 큰 이유는?
사용자 가치효용 - 만족, 기억, 피드백
ex) 쇼핑리스트 전송과 동시에 결제가능, 줄서서 계산하지 않고 10분만에 쇼핑완료
Human needs set(ERA Model)
* 타킷 사용자에 해당되는 human needs에 체크. 중복가능
제품/서비스를 사용하는 사용자 층의 행동, 라이프스타일, 성향 등의 조사를 통해 해당
제품/서비스에 투영되는 소비자들의 니즈를 발견하고, 목표 사용자 층에 대한 특징을 파악할
수 있다. 이는 향후 제품/서비스 전략 및 디자인개발 전략에 중요한 정보를 제공한다.
Step 3
Human Needs ; 인간 근본 욕구 및 동기 분석
당신의 제품/앱서비스 이면에 숨겨진 사용자 니즈의 근본 원인 찾기!
Q. 사용자는 이 서비스를 통해 어떤 욕구를 해결할 수 있는가?
Q. 사용자가 이 서비스를 사용하는 단 한가지 이유는?
Q. 사용자는 이 서비스를 통해 얻을 수 있는 경험적 가치는 무엇인가?
UX design Trigger for STARTUP Team
1
User Identity : 사용자는 어떤 욕구의 소유자인가?(인간 본질적 욕구) WIW : 궁극적으로 사용자가 원하는 기능은 무엇인가?(앱의 Key-function)
Copyright ⓒ2015 Limepaper, Inc. All rights reserved.
ex) 개인 프라이버시에 민감하며, 사회적 소속감을 중시 ex) 자신의 개인정보를 친한 지인과 안전하게 공유할 수 있는 자신만의 접속 방법의 획득
기억/태도
Memory & Attitude
결과에 대한 만족 수준의 기억,
다음 행동 영향을 주는 요인
사용자 행동에 대한 어떤 인터렉션/인터페이스가
필요한지 판단하는데 도움이 됨.
사용자 행동이 일어나게 되는
직접적인 이유(목표)
의도/원했던 목표와 결과의 비교평가와
인식한 것에 대한 경험적 해석
사용자 행동 패턴
User behavior pattern
기대 결과의 평가/피드백
Evaluation & Feedback
동기/계기(의도)
Motivation & Goal
안전, 보안, 프라이버시
타인들로부터 자신의 안전과 정보의
보안을 유지하려는 욕구 뿐만 아니라,
자신의 감정, 신체 또는 경제적 사안의
노출을 꺼리는 욕구.
개인에게 축적되는 수많은
정보자산(Information property)가치가
확장, 오용되면서 보안과 프라이버시
요구는 높아짐.
Privacy
자기표현, 자아투영, 개성
자신이 속한 사회, 타인과의 관계에
대해 누적된 경험에 대한 자기만의
표현욕구.
선호 브랜드 소유와 공유 등,
자기만의 세계를 적극적으로
드러내려는 욕구
Identity
소속감, 애정, 친화
다른 사람들과 좋은 관계를 유지하려고
노력하며, 특정 소셜 그룹의 소속감을
중시하는 욕구.
긍정적인 사고와 열린 사고로 타인을
자신의 영역에 함께하려는 욕구.
Friendship
심미성, 미적 가치 추구
특정한 관점에서 독특한 미적
욕구를 가지고 있으며, 기능보다는
상징적 또는 주관적인 미적 가치를
성취하려는 욕구.
Beauty
쾌락, 자극, 일탈
일상으로부터의 탈출과 함께
자극적인 것들을 감각적으로
수용하려는 욕구. 특히 인터넷
환경에서의 익명성, 가상세계(Virtual
reality) 속에서 제2의 자아를
드러내려는 욕구.
Hedonism
신뢰, 믿음, 자신감
다른 사람과의 약속을 이행하는데 있어
확신과 믿음을 주려는 욕구.
신뢰가 있는 타인과의 관계가
만들어진다면 뭐든지 잘 할 수 있다는
자신감을 가지려는 욕구.
Confidence
권력, 능력, 관심, 신분, 주목
높은 권력욕구를 가지고 리더로써 남을
통제하며, 남들로 하여금 자신이
비교우의에 있고자 하는 욕구.
Power
탐구, 호기심, 진리
모호하거나 잘 알지 못하는 외부
환경에 대해 알려고 노력하는 욕구.
스스로의 호기심, 알고자 하는
대상에 대한 명쾌한 해결 능력을
성공적으로 발휘함으로써 자긍심을
높이려는 욕구.
Explore
모험, 프론티어
도전의식이 투철하고, 미지의
세상에 대한 강한 동경으로 새로운
능력을 개발하고자 하는 욕구.
Adventure
조화, 안정, 노스텔지아
변화보다는 지속가능한 안정된
라이프스타일을 영위하고자하는 욕구.
미래지향적이기 보다는 과거의 기억과
향수를 동경하고 현실 속에서 정신적인
힐링(healing)을 추구하려는 욕구.
Stable
Existence
존재의 욕구
Relation
관계의 욕구
Accomplishment
성취의 욕구
Human
Needs
Context of Use4
어떤 상황에서 사용하는지?
시간(언제), 장소(어디서), 또는 특정 상황 등 사용 전후 맥락
ex) 움직일 틈 없는 퇴근길 만원 지하철, 10분 내로 집 근처 마트에 쇼핑리스트 작성해야하는 상황
Function5
주요기능 및 기술은 무엇인지?
다른 제품/서비스에는 없는, 또는 개선된 기능/기술
ex) 작성한 구매물품의 매대위치를 최단시간 경로로 추천 기능
Data 수집,생성 Data 해석,인식 Data 가공,전달
IOT/Wearable
UX design Trigger for STARTUP Team
Copyright ⓒ2015 Limepaper, Inc. All rights reserved.
Killer-UX function & UX-service concept
UX Actually UX진단 및 사용자 분석
Insight & Analysis
Finding
UX touch-Point!
UX 핵심 기능과 UX서비스 컨셉 메이킹
UX 터치포인트: 서비스의 사용자경험 발화지점은 어디인가?
사용자 컨텍스트 분석으로부터 그들의 니즈와 행동패턴을 이해할 수 있는 정량적, 정성적인 데이터를 수집하고,
이 서비스의 UX접점과 Killer-UX Function을 찾아 서비스모델을 완성한다.
for IoT/Wearable
Stage - 02 Define
step-4. UX context analysis & UX touch-point
step-5. Killer-UX function
step-6. UX-service concept making
Methodology
UX Actually
killer-UX Function 및 UX-service concept 도출
Step 4
UX Context Analysis & UX touch-point
사용자와 외부 환경,사물 간의 맥락 분석을 통한 UX-서비스 모델링
사용자 컨텍스트(User Context) 분석
UX touch-point: 사물-사용자 행위 접점 IOT/Wearable Key-feature: 기능목록
UX Needs&Goal 사용자 니즈와 목표(의도,계기)
제품/서비스를 사용하는 사용자 층의 행동, 라이프스타일, 성향 등의 조사를 통해 해당
제품/서비스에 투영되는 소비자들의 니즈를 발견하고, 목표 사용자 층에 대한 특징을 파악할
수 있다. 이는 향후 제품/서비스 전략 및 디자인개발 전략에 중요한 정보를 제공한다.
Step 6
UX-Service Concept Planning; IOT의 서비스화
IOT서비스를 위한 UX design 컨셉은 무엇인가?
거창한‘기능명세’를 만들어 내는 것이 아니라, 서비스 모델을 완성하기 위한 UX 핵심컨셉과 목표시장의 서비스전략을 찾는 것이 목표
Step 5
killer-UX Function
UX성과 달성을 위한 핵심기능 우선 순위 정하기
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
제품/서비스와
사용자 간 소통의‘접점’
Copyright ⓒ2015 Limepaper, Inc. All rights reserved.
행위 패턴(behavior pattern)
테스크 시나리오(task scenario)
시간(Time)의 분리와 결합
공간(Place/Location)의 분리와 결합
사람/이벤트(People/Event)의 분리와 결합
조건/상황(Condition/Situation)의 분리와 결합
대상 (things/devices)
속성 (attributes/element)
조작,기능 (operation)
User Behavioral Patterns/Data
사용자 행위 패턴과 데이터Killer-UX Function 제품/서비스의 핵심기능
UX design Trigger for STARTUP Team
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 경쟁우위 - 비지니스적 성공을 확신하는 핵심 사용자 가치효용은 무엇입니까?
핵심기술의 활용 전략은 무엇입니까?
이 서비스의 수익모델과 마케팅 전략은 무엇입니까?
UX design Trigger for STARTUP Team
Copyright ⓒ2015 Limepaper, Inc. All rights reserved.
User modeling & UXD requirement
UX Actually UX진단 및 사용자 분석
Insight & Analysis
Verification
UX value proposition!
퍼소나 기반 사용자모델링과 UX 디자인요구사항 도출
사용자가치 검증: 제품/서비스를 이용하는 하는 단 한가지 이유는?
사용자가 기대하는 UX에 대한 사용자가치 수준과 피드백 검증을 위해 퍼소나 기반으로 UX 시나리오를 완성한다.
퍼소나가 달성하고자 목표를 구체적으로 작성하고, 목표에 도달하기까지의‘의도/계기–실행–기대결과–평가/피드백’의 사용 상황시나리오를 작성한다.
for IoT/Wearable
Stage - 03 Refine
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 7
Persona - User modeling
Step 8
Design 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
UX design Trigger for STARTUP Team
Copyright ⓒ2015 Limepaper, Inc. All rights reserved.
User task-flow & 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 feature
step-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 9
User Task & UI feature list-up
UX Needs/Killer-UX concept의 구현에 필요한 기능 리스트 작성. 사용자 Task에 따른 세부적인 기능들 간의 인터렉션 방식, 정보의 흐름과 관계망을 파악한다.
User Behavior Pattern & Data: 사용자 행동 패턴과 사용자 데이터 정의
ex)사진촬영 후 메시지 작성하여 sns 자동업로드 할수 있다.
Step 10
User-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):
Device
Form-Giving
Device Tech
C(Feedback):
A(Goal):
B(Behavior):
C(Feedback):
A(Goal):
B(Behavior):
C(Feedback):
사용자는 (A)를 하기 위해서 (B)를 하면 (C)가 된다.
사용자는 (A)를 하기 위해서 (B)를 하면 (C)가 된다.
사용자는 (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
UX design Trigger for STARTUP Team
Copyright ⓒ2015 Limepaper, Inc. All rights reserved.
App. UI key-screen & Workflow
UI Storyboard 사용자 테스크 분석과 사용자 인터페이스/인터렉션 설계
Insight & Analysis
Simulation
Vertical prototyping!
사용자인터페이스(UI) 시각화를 위한 와이어프레임과 워크플로우 설계
프로토타이핑 : 사용자가 경험하게 되는 인터렉션의 실체는 무엇인가?
사용자가 경험할 실체, 정보/기능/서비스의 전달 방식과 인터페이스를 빠르게 시각화하여
사용자 경험하게 될 어플리케이션(App)의 실체와 인터렉션 방식을 시뮬레이션해 본다
for IoT/Wearable
Stage - 05 Act
step-11. UI key-screen(Wireframe)
step-12. Workflow
Method
Key-screen Layout UI Element Description
No. Naming(명칭) Description(기능설명)
개발이슈
No. Naming Description
(개발환경에 따른 예외사항, 또는 적용 규칙 등 개발 시 고려해야 하는 이슈)
Step 11
UI Key-screen(Wireframe)
해당기능 구현을 위한 인터페이스와 메인화면 그려보기(wireframe)
User task-flow에서 정의된 주요 components와 세부 feature의 화면 레이아웃을 구성한다.
Step 12
Workflow
key-screen 간 상호작용 및 시뮬레이션 해보기
정의된 화면 별로 각 버튼이나 컴포넌트의 동작에 의해 필요한 추가 화면을 연결한다. 순서에 맞게 배열된 앱화면 단위로 시뮬레이션을 해보면서 제품/서비스 사용절차를 검증한다.
User Interaction
화면을 손가락으로 짧게(briefly) 터치
아이템을 선택하거나 조작할 때
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 설계하기
UX design Trigger for STARTUP Team Copyright ⓒ2015 Limepaper, Inc. All rights reserved.
02-2
User Task : User Task : User Task :
* Workflow-2
* Workflow-1
User Task : User Task : User Task :
ex) 사진촬영 후 sns에 공유하고 사진내용입력
IOT/Wearable
UX design Trigger for STARTUP Team
Copyright ⓒ2015 Limepaper, Inc. All rights reserved.
GUI concept planning:‘Look & Feel’,‘Tone & Manner’
GUI moodboard 어플리케이션(App) 비주얼 컨셉 플레닝
Insight & Analysis
Understanding
Visual narrative!
그래픽 유저인터페이스(GUI) 컨셉 플레닝
시각적 네러티브 : 어플리케이션(App)의 시각적 인상과 개성은 무엇인가?
어플리케이션의 성격이나 목적에 맞는 시각적 언어로 GUI 컨셉을 계획한다. 사용자가 제품과 서비스를 사용하기 전의
첫인상이나 사용 후 사용자가 기억할 만한 인상과 개성을 표현하는 것인 관건이다.
for IoT/Wearable
Stage - 06 Refine
step-13. Visual concept –‘Look & Feel’
step-14. GUI moodboard –‘Tone & Manner’
Method
GUI Moodboard
완성해야 할 제품/앱의 비주얼 컨셉과 시각적 사용자경험 미리보기!
Step 13
Visual concept‘look & Feel’
Step 14
GUI moodboard -‘Tone & Manner’
사용자가 쉽고 편리하게 사용할 수 있도록 입출력 따위의 기능을 알기 쉬운 아이콘 따위의 그래픽으로 표현한다. 앱의 성격이나 목적, 사용자들에게 제공하려는 핵심가치에 따라서 그에 맞는
감성을 제공하는 것이 중요하다. 시스템을 사용하기 전에 느끼는 첫인상이나 시스템을 사용하고 나서 사용자가 기억할 수 있을 만한 개성을 표현하는 것이 중요하다.
Visual Concept & Motive
제품/앱의 직관적인 미적 인상(개성)
제품/앱의 컨셉을 반영할 비주얼 모티브를 찾는다. 타깃 사용자의 성향, 라이프스타일, 미적 선호도 등에
영향을 미치는 디자인컨셉 키워드 를 작성한다.
타깃 사용자의 감성어휘 모티브
GUI Moodboard 란,
UX Concept이 반영된 앱서비스 화면의 직관적인
UX - Look & Feel, 앱서비스 Brand Identity를 일관되게 반영한 Tone
& Manner로 최적의 디자인컨셉을 도출하는 과정
Q. 정보의 범주를 시각적으로 어떻게 나누어 줄 것인가?
Q. 시각적 구성 요소들에 대한 화면 상의 전반적인 배열과 느낌은 어떻게 보여줄 것인가?
Q. 해당 앱서비스 화면의 시각적 인상, 또는 개성은 무엇인가?
UX design Trigger for STARTUP Team Copyright ⓒ2015 Limepaper, Inc. All rights reserved.
사용자의 성향, 감정, 정서 등의 표현
시각적 인상, 매력 등 시각적 차별화 된
‘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 / ucamp@lime-paper.com
UX trigger 커뮤니티(페이스북):
https://www.facebook.com/groups/ucampcommunity/
교육 컨설팅 문의
TM

Contenu connexe

Tendances

모바일 앱(App) 디자인과 모바일 시장변화의 이해
모바일 앱(App) 디자인과 모바일 시장변화의 이해모바일 앱(App) 디자인과 모바일 시장변화의 이해
모바일 앱(App) 디자인과 모바일 시장변화의 이해SeungBeom Ha
 
2015 ux관점으로 바라본 보험 서비스 디자인
2015 ux관점으로 바라본 보험 서비스 디자인2015 ux관점으로 바라본 보험 서비스 디자인
2015 ux관점으로 바라본 보험 서비스 디자인Donghoo Kim
 
사용자경험 이야기 요약본
사용자경험 이야기 요약본사용자경험 이야기 요약본
사용자경험 이야기 요약본sangyong lee
 
UX 프로젝트 가이드 (UX Project Guide)
UX 프로젝트 가이드 (UX Project Guide) UX 프로젝트 가이드 (UX Project Guide)
UX 프로젝트 가이드 (UX Project Guide) RightBrain inc.
 
UX/UI 개념과 방향성
UX/UI 개념과 방향성UX/UI 개념과 방향성
UX/UI 개념과 방향성Billy Choi
 
UX discovery 7th rightbrain_part2
UX discovery 7th rightbrain_part2UX discovery 7th rightbrain_part2
UX discovery 7th rightbrain_part2RightBrain inc.
 
20150307 abcd발표_ux디자이너 실력으로 살아남기
20150307 abcd발표_ux디자이너 실력으로 살아남기20150307 abcd발표_ux디자이너 실력으로 살아남기
20150307 abcd발표_ux디자이너 실력으로 살아남기SANGBUM HA
 
2016 3rd UX 트렌드 리포트_1부
2016 3rd UX 트렌드 리포트_1부2016 3rd UX 트렌드 리포트_1부
2016 3rd UX 트렌드 리포트_1부RightBrain inc.
 
Rightbrain UX DISCOVERY 4th-part2
Rightbrain UX DISCOVERY 4th-part2Rightbrain UX DISCOVERY 4th-part2
Rightbrain UX DISCOVERY 4th-part2RightBrain inc.
 
최신 UX/UI 디자인 트렌드
최신 UX/UI 디자인 트렌드최신 UX/UI 디자인 트렌드
최신 UX/UI 디자인 트렌드Billy Choi
 
UX Planning Training Course_SYS4U I&C
UX Planning Training Course_SYS4U I&CUX Planning Training Course_SYS4U I&C
UX Planning Training Course_SYS4U I&Csys4u
 
앱개발자를 위한 UX디자인실무_인트로
앱개발자를 위한 UX디자인실무_인트로앱개발자를 위한 UX디자인실무_인트로
앱개발자를 위한 UX디자인실무_인트로Junsang Dong
 
Best Practice for Mobile UX Design
Best Practice for Mobile UX DesignBest Practice for Mobile UX Design
Best Practice for Mobile UX DesignJunsang Dong
 
Scenario-Based Interactive UI Design
Scenario-Based Interactive UI DesignScenario-Based Interactive UI Design
Scenario-Based Interactive UI DesignHyunjin Ahn
 
실무를위한모바일 UI UX step up
실무를위한모바일 UI UX step up실무를위한모바일 UI UX step up
실무를위한모바일 UI UX step upAmy Young Ah Kim
 
Mobile UX Design Essential
Mobile UX Design EssentialMobile UX Design Essential
Mobile UX Design EssentialJunsang Dong
 
라이트브레인 UX 아카데미 4기 오픈프로젝트 - Smart Toy for kidult,Wakee
라이트브레인 UX 아카데미 4기 오픈프로젝트 - Smart Toy for kidult,Wakee라이트브레인 UX 아카데미 4기 오픈프로젝트 - Smart Toy for kidult,Wakee
라이트브레인 UX 아카데미 4기 오픈프로젝트 - Smart Toy for kidult,WakeeRightBrain inc.
 

Tendances (20)

모바일 앱(App) 디자인과 모바일 시장변화의 이해
모바일 앱(App) 디자인과 모바일 시장변화의 이해모바일 앱(App) 디자인과 모바일 시장변화의 이해
모바일 앱(App) 디자인과 모바일 시장변화의 이해
 
2015 ux관점으로 바라본 보험 서비스 디자인
2015 ux관점으로 바라본 보험 서비스 디자인2015 ux관점으로 바라본 보험 서비스 디자인
2015 ux관점으로 바라본 보험 서비스 디자인
 
사용자경험 이야기 요약본
사용자경험 이야기 요약본사용자경험 이야기 요약본
사용자경험 이야기 요약본
 
UX 프로젝트 가이드 (UX Project Guide)
UX 프로젝트 가이드 (UX Project Guide) UX 프로젝트 가이드 (UX Project Guide)
UX 프로젝트 가이드 (UX Project Guide)
 
UX/UI 개념과 방향성
UX/UI 개념과 방향성UX/UI 개념과 방향성
UX/UI 개념과 방향성
 
UX discovery 7th rightbrain_part2
UX discovery 7th rightbrain_part2UX discovery 7th rightbrain_part2
UX discovery 7th rightbrain_part2
 
20150307 abcd발표_ux디자이너 실력으로 살아남기
20150307 abcd발표_ux디자이너 실력으로 살아남기20150307 abcd발표_ux디자이너 실력으로 살아남기
20150307 abcd발표_ux디자이너 실력으로 살아남기
 
2016 3rd UX 트렌드 리포트_1부
2016 3rd UX 트렌드 리포트_1부2016 3rd UX 트렌드 리포트_1부
2016 3rd UX 트렌드 리포트_1부
 
Ui vs ux
Ui vs uxUi vs ux
Ui vs ux
 
Rightbrain UX DISCOVERY 4th-part2
Rightbrain UX DISCOVERY 4th-part2Rightbrain UX DISCOVERY 4th-part2
Rightbrain UX DISCOVERY 4th-part2
 
최신 UX/UI 디자인 트렌드
최신 UX/UI 디자인 트렌드최신 UX/UI 디자인 트렌드
최신 UX/UI 디자인 트렌드
 
UX Planning Training Course_SYS4U I&C
UX Planning Training Course_SYS4U I&CUX Planning Training Course_SYS4U I&C
UX Planning Training Course_SYS4U I&C
 
앱개발자를 위한 UX디자인실무_인트로
앱개발자를 위한 UX디자인실무_인트로앱개발자를 위한 UX디자인실무_인트로
앱개발자를 위한 UX디자인실무_인트로
 
Best Practice for Mobile UX Design
Best Practice for Mobile UX DesignBest Practice for Mobile UX Design
Best Practice for Mobile UX Design
 
Ux design approach
Ux design approachUx design approach
Ux design approach
 
Scenario-Based Interactive UI Design
Scenario-Based Interactive UI DesignScenario-Based Interactive UI Design
Scenario-Based Interactive UI Design
 
실무를위한모바일 UI UX step up
실무를위한모바일 UI UX step up실무를위한모바일 UI UX step up
실무를위한모바일 UI UX step up
 
UX trend report (August) by rightbrain
UX trend report (August) by rightbrainUX trend report (August) by rightbrain
UX trend report (August) by rightbrain
 
Mobile UX Design Essential
Mobile UX Design EssentialMobile UX Design Essential
Mobile UX Design Essential
 
라이트브레인 UX 아카데미 4기 오픈프로젝트 - Smart Toy for kidult,Wakee
라이트브레인 UX 아카데미 4기 오픈프로젝트 - Smart Toy for kidult,Wakee라이트브레인 UX 아카데미 4기 오픈프로젝트 - Smart Toy for kidult,Wakee
라이트브레인 UX 아카데미 4기 오픈프로젝트 - Smart Toy for kidult,Wakee
 

En vedette

라이트브레인 UX 아카데미 4기 오픈프로젝트 - Smart Toy for kidult, SMART PET
라이트브레인 UX 아카데미 4기 오픈프로젝트 - Smart Toy for kidult, SMART PET라이트브레인 UX 아카데미 4기 오픈프로젝트 - Smart Toy for kidult, SMART PET
라이트브레인 UX 아카데미 4기 오픈프로젝트 - Smart Toy for kidult, SMART PETRightBrain inc.
 
0914 인터랙 3주차
0914 인터랙 3주차0914 인터랙 3주차
0914 인터랙 3주차tae1141
 
[인터랙티브] 중간발표 (최종)
[인터랙티브] 중간발표 (최종)[인터랙티브] 중간발표 (최종)
[인터랙티브] 중간발표 (최종)Yeonsin
 
2016 3rd UX 트렌드 리포트_4부
2016 3rd UX 트렌드 리포트_4부2016 3rd UX 트렌드 리포트_4부
2016 3rd UX 트렌드 리포트_4부RightBrain inc.
 
Ru5th open project wearable next mobile service
Ru5th open project wearable next mobile serviceRu5th open project wearable next mobile service
Ru5th open project wearable next mobile serviceRightBrain inc.
 
[Rightbrain U] UX Winter School 1조발표자료 - 1인 가구의 라이프스타일에 기반한 서비스 디자인
[Rightbrain U] UX Winter School 1조발표자료 - 1인 가구의 라이프스타일에 기반한 서비스 디자인[Rightbrain U] UX Winter School 1조발표자료 - 1인 가구의 라이프스타일에 기반한 서비스 디자인
[Rightbrain U] UX Winter School 1조발표자료 - 1인 가구의 라이프스타일에 기반한 서비스 디자인RightBrain inc.
 
2016 커머스 ux 트랜드
2016 커머스 ux 트랜드2016 커머스 ux 트랜드
2016 커머스 ux 트랜드RightBrain inc.
 
IoT 관점에서 본 2015년 디자인 트랜드 및 2016년 전망
IoT 관점에서 본 2015년 디자인 트랜드 및 2016년 전망IoT 관점에서 본 2015년 디자인 트랜드 및 2016년 전망
IoT 관점에서 본 2015년 디자인 트랜드 및 2016년 전망RightBrain inc.
 
[Rightbrain] Journal & Media Digital Service CASE STUDY
[Rightbrain] Journal & Media Digital Service CASE STUDY[Rightbrain] Journal & Media Digital Service CASE STUDY
[Rightbrain] Journal & Media Digital Service CASE STUDYRightBrain inc.
 
[라이트브레인] 모바일 관점에서 본 UX 디자인 트렌드 및 전망
[라이트브레인] 모바일 관점에서 본 UX 디자인 트렌드 및 전망[라이트브레인] 모바일 관점에서 본 UX 디자인 트렌드 및 전망
[라이트브레인] 모바일 관점에서 본 UX 디자인 트렌드 및 전망RightBrain inc.
 
Smart toy ux trend report_RightBrain
Smart toy ux trend report_RightBrain Smart toy ux trend report_RightBrain
Smart toy ux trend report_RightBrain RightBrain inc.
 
Connected car 중심의 2016 UX 트렌드
Connected car 중심의 2016 UX 트렌드 Connected car 중심의 2016 UX 트렌드
Connected car 중심의 2016 UX 트렌드 RightBrain inc.
 
라이트브레인 UX 아카데미 3기 오픈 프로젝트_CATCH
라이트브레인 UX 아카데미 3기 오픈 프로젝트_CATCH라이트브레인 UX 아카데미 3기 오픈 프로젝트_CATCH
라이트브레인 UX 아카데미 3기 오픈 프로젝트_CATCHRightBrain inc.
 
[Rightbrain U] UX Winter School 2조발표자료 - 1인 가구의 라이프스타일에 기반한 서비스 디자인
[Rightbrain U] UX Winter School 2조발표자료 - 1인 가구의 라이프스타일에 기반한 서비스 디자인 [Rightbrain U] UX Winter School 2조발표자료 - 1인 가구의 라이프스타일에 기반한 서비스 디자인
[Rightbrain U] UX Winter School 2조발표자료 - 1인 가구의 라이프스타일에 기반한 서비스 디자인 RightBrain inc.
 
RU5th Open Project_COACH
RU5th Open Project_COACHRU5th Open Project_COACH
RU5th Open Project_COACHRightBrain inc.
 
IoT 제품 리뷰 - 약 20개의 IoT 제품 리뷰
IoT 제품 리뷰 - 약 20개의 IoT 제품 리뷰IoT 제품 리뷰 - 약 20개의 IoT 제품 리뷰
IoT 제품 리뷰 - 약 20개의 IoT 제품 리뷰봉조 김
 

En vedette (16)

라이트브레인 UX 아카데미 4기 오픈프로젝트 - Smart Toy for kidult, SMART PET
라이트브레인 UX 아카데미 4기 오픈프로젝트 - Smart Toy for kidult, SMART PET라이트브레인 UX 아카데미 4기 오픈프로젝트 - Smart Toy for kidult, SMART PET
라이트브레인 UX 아카데미 4기 오픈프로젝트 - Smart Toy for kidult, SMART PET
 
0914 인터랙 3주차
0914 인터랙 3주차0914 인터랙 3주차
0914 인터랙 3주차
 
[인터랙티브] 중간발표 (최종)
[인터랙티브] 중간발표 (최종)[인터랙티브] 중간발표 (최종)
[인터랙티브] 중간발표 (최종)
 
2016 3rd UX 트렌드 리포트_4부
2016 3rd UX 트렌드 리포트_4부2016 3rd UX 트렌드 리포트_4부
2016 3rd UX 트렌드 리포트_4부
 
Ru5th open project wearable next mobile service
Ru5th open project wearable next mobile serviceRu5th open project wearable next mobile service
Ru5th open project wearable next mobile service
 
[Rightbrain U] UX Winter School 1조발표자료 - 1인 가구의 라이프스타일에 기반한 서비스 디자인
[Rightbrain U] UX Winter School 1조발표자료 - 1인 가구의 라이프스타일에 기반한 서비스 디자인[Rightbrain U] UX Winter School 1조발표자료 - 1인 가구의 라이프스타일에 기반한 서비스 디자인
[Rightbrain U] UX Winter School 1조발표자료 - 1인 가구의 라이프스타일에 기반한 서비스 디자인
 
2016 커머스 ux 트랜드
2016 커머스 ux 트랜드2016 커머스 ux 트랜드
2016 커머스 ux 트랜드
 
IoT 관점에서 본 2015년 디자인 트랜드 및 2016년 전망
IoT 관점에서 본 2015년 디자인 트랜드 및 2016년 전망IoT 관점에서 본 2015년 디자인 트랜드 및 2016년 전망
IoT 관점에서 본 2015년 디자인 트랜드 및 2016년 전망
 
[Rightbrain] Journal & Media Digital Service CASE STUDY
[Rightbrain] Journal & Media Digital Service CASE STUDY[Rightbrain] Journal & Media Digital Service CASE STUDY
[Rightbrain] Journal & Media Digital Service CASE STUDY
 
[라이트브레인] 모바일 관점에서 본 UX 디자인 트렌드 및 전망
[라이트브레인] 모바일 관점에서 본 UX 디자인 트렌드 및 전망[라이트브레인] 모바일 관점에서 본 UX 디자인 트렌드 및 전망
[라이트브레인] 모바일 관점에서 본 UX 디자인 트렌드 및 전망
 
Smart toy ux trend report_RightBrain
Smart toy ux trend report_RightBrain Smart toy ux trend report_RightBrain
Smart toy ux trend report_RightBrain
 
Connected car 중심의 2016 UX 트렌드
Connected car 중심의 2016 UX 트렌드 Connected car 중심의 2016 UX 트렌드
Connected car 중심의 2016 UX 트렌드
 
라이트브레인 UX 아카데미 3기 오픈 프로젝트_CATCH
라이트브레인 UX 아카데미 3기 오픈 프로젝트_CATCH라이트브레인 UX 아카데미 3기 오픈 프로젝트_CATCH
라이트브레인 UX 아카데미 3기 오픈 프로젝트_CATCH
 
[Rightbrain U] UX Winter School 2조발표자료 - 1인 가구의 라이프스타일에 기반한 서비스 디자인
[Rightbrain U] UX Winter School 2조발표자료 - 1인 가구의 라이프스타일에 기반한 서비스 디자인 [Rightbrain U] UX Winter School 2조발표자료 - 1인 가구의 라이프스타일에 기반한 서비스 디자인
[Rightbrain U] UX Winter School 2조발표자료 - 1인 가구의 라이프스타일에 기반한 서비스 디자인
 
RU5th Open Project_COACH
RU5th Open Project_COACHRU5th Open Project_COACH
RU5th Open Project_COACH
 
IoT 제품 리뷰 - 약 20개의 IoT 제품 리뷰
IoT 제품 리뷰 - 약 20개의 IoT 제품 리뷰IoT 제품 리뷰 - 약 20개의 IoT 제품 리뷰
IoT 제품 리뷰 - 약 20개의 IoT 제품 리뷰
 

Similaire à 사물인터넷(IoT)/웨어러블 UX 디자인툴킷_UX-trigger for Iot/Wearable_v1

Appendix uxtrigger toolkit_v1_iot_2019
Appendix uxtrigger toolkit_v1_iot_2019Appendix uxtrigger toolkit_v1_iot_2019
Appendix uxtrigger toolkit_v1_iot_2019Potentialeyes, Inc.
 
Uxtrigger template v5.compressed_2019
Uxtrigger template v5.compressed_2019Uxtrigger template v5.compressed_2019
Uxtrigger template v5.compressed_2019Potentialeyes, Inc.
 
모바일 UX디자인의 개요
모바일 UX디자인의 개요모바일 UX디자인의 개요
모바일 UX디자인의 개요Junsang Dong
 
UX디자인 bookstudy
UX디자인 bookstudyUX디자인 bookstudy
UX디자인 bookstudy정인 주
 
UX 디자인 기본 개념과 프로세스
UX 디자인 기본 개념과 프로세스UX 디자인 기본 개념과 프로세스
UX 디자인 기본 개념과 프로세스Hyun-june Kwon
 
Ux research guide
Ux research guideUx research guide
Ux research guideKim Taesook
 
CEO & UX Designers' R&R
CEO & UX Designers' R&RCEO & UX Designers' R&R
CEO & UX Designers' R&RBilly Choi
 
ux 2.0 시대의 ceo와 디자이너의 역할
ux 2.0 시대의 ceo와 디자이너의 역할ux 2.0 시대의 ceo와 디자이너의 역할
ux 2.0 시대의 ceo와 디자이너의 역할Billy Choi
 
사용자조사 계획 Skt_제안서_fin
사용자조사 계획 Skt_제안서_fin사용자조사 계획 Skt_제안서_fin
사용자조사 계획 Skt_제안서_finJongHo Lee
 
퍼소나로 완성하는 인터랙션 디자인
퍼소나로 완성하는 인터랙션 디자인퍼소나로 완성하는 인터랙션 디자인
퍼소나로 완성하는 인터랙션 디자인정인 주
 
11th.Lecture.Step3.AnalysisUX.Modeling.pdf
11th.Lecture.Step3.AnalysisUX.Modeling.pdf11th.Lecture.Step3.AnalysisUX.Modeling.pdf
11th.Lecture.Step3.AnalysisUX.Modeling.pdfJeongeun Kwon
 
모바일 UX/UI : 트랜드와 원칙으로써의 UX - 1부
모바일 UX/UI : 트랜드와 원칙으로써의 UX - 1부모바일 UX/UI : 트랜드와 원칙으로써의 UX - 1부
모바일 UX/UI : 트랜드와 원칙으로써의 UX - 1부RightBrain inc.
 
인터랙션 디자인 1310585 최하늘
인터랙션 디자인  1310585 최하늘인터랙션 디자인  1310585 최하늘
인터랙션 디자인 1310585 최하늘하늘 최
 
오래가는 Ux 디자인 파이널 1414905 이서현
오래가는 Ux 디자인 파이널  1414905 이서현오래가는 Ux 디자인 파이널  1414905 이서현
오래가는 Ux 디자인 파이널 1414905 이서현서현 이
 
[Seminar]4rd.lecture.open.discussion.the.latest.uxui.challenges.20210824
[Seminar]4rd.lecture.open.discussion.the.latest.uxui.challenges.20210824[Seminar]4rd.lecture.open.discussion.the.latest.uxui.challenges.20210824
[Seminar]4rd.lecture.open.discussion.the.latest.uxui.challenges.20210824Jeongeun Kwon
 
[교육리뷰] 스토리텔링을 통한 모바일 서비스 시나리오 작성 110321
[교육리뷰] 스토리텔링을 통한 모바일 서비스 시나리오 작성 110321[교육리뷰] 스토리텔링을 통한 모바일 서비스 시나리오 작성 110321
[교육리뷰] 스토리텔링을 통한 모바일 서비스 시나리오 작성 110321Kyungeun Kim
 

Similaire à 사물인터넷(IoT)/웨어러블 UX 디자인툴킷_UX-trigger for Iot/Wearable_v1 (20)

Appendix uxtrigger toolkit_v1_iot_2019
Appendix uxtrigger toolkit_v1_iot_2019Appendix uxtrigger toolkit_v1_iot_2019
Appendix uxtrigger toolkit_v1_iot_2019
 
Uxtrigger template v5.compressed_2019
Uxtrigger template v5.compressed_2019Uxtrigger template v5.compressed_2019
Uxtrigger template v5.compressed_2019
 
U&I Insgiht
U&I InsgihtU&I Insgiht
U&I Insgiht
 
모바일 UX디자인의 개요
모바일 UX디자인의 개요모바일 UX디자인의 개요
모바일 UX디자인의 개요
 
Uxtrigger brochure v4(2019)-rev
Uxtrigger brochure v4(2019)-revUxtrigger brochure v4(2019)-rev
Uxtrigger brochure v4(2019)-rev
 
UX디자인 bookstudy
UX디자인 bookstudyUX디자인 bookstudy
UX디자인 bookstudy
 
UX 디자인 기본 개념과 프로세스
UX 디자인 기본 개념과 프로세스UX 디자인 기본 개념과 프로세스
UX 디자인 기본 개념과 프로세스
 
Ux research guide
Ux research guideUx research guide
Ux research guide
 
CEO & UX Designers' R&R
CEO & UX Designers' R&RCEO & UX Designers' R&R
CEO & UX Designers' R&R
 
ux 2.0 시대의 ceo와 디자이너의 역할
ux 2.0 시대의 ceo와 디자이너의 역할ux 2.0 시대의 ceo와 디자이너의 역할
ux 2.0 시대의 ceo와 디자이너의 역할
 
사용자조사 계획 Skt_제안서_fin
사용자조사 계획 Skt_제안서_fin사용자조사 계획 Skt_제안서_fin
사용자조사 계획 Skt_제안서_fin
 
퍼소나로 완성하는 인터랙션 디자인
퍼소나로 완성하는 인터랙션 디자인퍼소나로 완성하는 인터랙션 디자인
퍼소나로 완성하는 인터랙션 디자인
 
11th.Lecture.Step3.AnalysisUX.Modeling.pdf
11th.Lecture.Step3.AnalysisUX.Modeling.pdf11th.Lecture.Step3.AnalysisUX.Modeling.pdf
11th.Lecture.Step3.AnalysisUX.Modeling.pdf
 
사용자 경험품질향상 가이드 - 한국디자인진흥원
사용자 경험품질향상 가이드 - 한국디자인진흥원사용자 경험품질향상 가이드 - 한국디자인진흥원
사용자 경험품질향상 가이드 - 한국디자인진흥원
 
모바일 UX/UI : 트랜드와 원칙으로써의 UX - 1부
모바일 UX/UI : 트랜드와 원칙으로써의 UX - 1부모바일 UX/UI : 트랜드와 원칙으로써의 UX - 1부
모바일 UX/UI : 트랜드와 원칙으로써의 UX - 1부
 
인터랙션 디자인 1310585 최하늘
인터랙션 디자인  1310585 최하늘인터랙션 디자인  1310585 최하늘
인터랙션 디자인 1310585 최하늘
 
오래가는 Ux 디자인 파이널 1414905 이서현
오래가는 Ux 디자인 파이널  1414905 이서현오래가는 Ux 디자인 파이널  1414905 이서현
오래가는 Ux 디자인 파이널 1414905 이서현
 
[Seminar]4rd.lecture.open.discussion.the.latest.uxui.challenges.20210824
[Seminar]4rd.lecture.open.discussion.the.latest.uxui.challenges.20210824[Seminar]4rd.lecture.open.discussion.the.latest.uxui.challenges.20210824
[Seminar]4rd.lecture.open.discussion.the.latest.uxui.challenges.20210824
 
[교육리뷰] 스토리텔링을 통한 모바일 서비스 시나리오 작성 110321
[교육리뷰] 스토리텔링을 통한 모바일 서비스 시나리오 작성 110321[교육리뷰] 스토리텔링을 통한 모바일 서비스 시나리오 작성 110321
[교육리뷰] 스토리텔링을 통한 모바일 서비스 시나리오 작성 110321
 
UX디자인
UX디자인UX디자인
UX디자인
 

사물인터넷(IoT)/웨어러블 UX 디자인툴킷_UX-trigger for Iot/Wearable_v1

  • 1. UX-driven IoT design Tool-Kit for IoT/Wearable 사물인터넷(IoT) UX 디자인툴킷 Ver.1.0 Find your own UX design-way TM
  • 2. [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
  • 3. UX design Trigger for STARTUP Team Design thinking, User Centered Design! Methodology 디자인사고와 사용자중심디자인 for IoT/Wearable Approach Copyright ⓒ2015 Limepaper, Inc. All rights reserved. 답은 사용자들에게 있다! 사용자중심디자인(UCD) 프로세스는 사람들의 니즈와 의도, 그리고 그들의 삶의 방식을 파악하는 것에서부터 시작. ‘Think(진단검증)–Define(컨셉메이킹)–Act(프로토타이핑)–Refine(평가개선)’의 4단계 활동을 통해 UX/UI 디자인의 진단 및 검증을 하고, 평가개선을 거쳐 디자인 완성도를 높여 갑니다. Mindset User/Customer 사용자(고객) 중심 사고 Think : UX진단검증 Killer-UX Function 킬러 UX 컨셉 구체화 전개 Define : UX컨셉메이킹 Feedback 피드백/평가개선 및 협업 Refine : UX평가개선 Vertical prototyping UI스토리보드/GUI 시각화 Act : UX/UI 프로토타이핑 UX
  • 4. UX design Trigger for STARTUP Team Copyright ⓒ2015 Limepaper, Inc. All rights reserved. 01 UX Actually UX 진단 및 사용자 분석 02 UI Storyboard 사용자테스크 분석과 사용자 인터페이스/인터렉션 설계 03 GUI moodboard 어플리케이션(App) 비주얼 컨셉 플레닝 Stage 01. User scenario & User analysis step-1. User scenario & Journey Map step-2. UX flow & 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-flow & User-device Interaction step-9. User task analysis & UI feature Step-10. User-Device Interaction Stage 05. App. UI key-screen & Workflow step-11. UI key-screen(Wireframe) Step-12. Workflow Stage 06. User task-flow & User-device Interaction step-13. Visual concept –‘Look & Feel’ Step-14. GUI moodboard –‘Tone & Manner’ Stage 07. Demoday Evaluation & feedback for IoT/Wearable
  • 5. UX design Trigger for STARTUP Team Copyright ⓒ2015 Limepaper, Inc. All rights reserved. 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 Map step-2. UX flow & behavior data analysis step-3. Human needs set Method
  • 6. 01-1 UX Actually UX시나리오진단 및 User Analysis Step 1 User Scenario & Journey map 사용자 입장에서 use case 작성하고 사용자 이해하기! 사용자가 무엇을 원하고 필요로 하는지에 대해 UX시나리오를 구체화하여, 궁극적으로 제품/서비스 사업아이템이 근본적으로 해결해야 할 사용자 니즈의 본질을 찾는다. Step 2 UX flow & User behavioral data; 행위 데이터와 UX흐름 경험의 흐름을 파악하고 사용자에게 형성될 UX의 구조와 요소를 이해한다. 제품/서비스의 어떤 요소들이 사용자에게 어떤 유형의 동기로 작용하여 사용자에게서 특정 행동을 이끌어내는지를 파악한다. Item 사물인터넷(IOT)서비스아이템은 무엇인지 간단히 작성해 보시오. User definition2 어떤 사용자(고객)인지? 사용자의 성격, 선호도, 라이프스타일, 직업, 태도, 가치관 등 목표 사용자 정의 ex) 도시에 거주하며 4세 자녀를 둔 맞벌이, 가사일에 항상 시간이 없는 워킹맘 Needs/Problem3 무엇이 문제인지? 제품/서비스가 해결, 또는 제공하고자 하는 핵심적인 사용자니즈 ex) 해야 할 일을 시간에 구애 받지 않고 실수 없이 처리하고 싶은 니즈 ex) 쇼핑목록 작성과 동시에 구매,결제 서비스 User Task Flow6 기능/서비스 사용방법은? 사용자 니즈를 충족시킬 해당기능을 사용하는 방법, 또는 인터랙션 방식 ex) 쇼핑리스트 작성, 실시간 마트에 전송, 위치기반으로 해당 매대 경로선택 Benefit/Meaning7 사용하는 가장 큰 이유는? 사용자 가치효용 - 만족, 기억, 피드백 ex) 쇼핑리스트 전송과 동시에 결제가능, 줄서서 계산하지 않고 10분만에 쇼핑완료 Human needs set(ERA Model) * 타킷 사용자에 해당되는 human needs에 체크. 중복가능 제품/서비스를 사용하는 사용자 층의 행동, 라이프스타일, 성향 등의 조사를 통해 해당 제품/서비스에 투영되는 소비자들의 니즈를 발견하고, 목표 사용자 층에 대한 특징을 파악할 수 있다. 이는 향후 제품/서비스 전략 및 디자인개발 전략에 중요한 정보를 제공한다. Step 3 Human Needs ; 인간 근본 욕구 및 동기 분석 당신의 제품/앱서비스 이면에 숨겨진 사용자 니즈의 근본 원인 찾기! Q. 사용자는 이 서비스를 통해 어떤 욕구를 해결할 수 있는가? Q. 사용자가 이 서비스를 사용하는 단 한가지 이유는? Q. 사용자는 이 서비스를 통해 얻을 수 있는 경험적 가치는 무엇인가? UX design Trigger for STARTUP Team 1 User Identity : 사용자는 어떤 욕구의 소유자인가?(인간 본질적 욕구) WIW : 궁극적으로 사용자가 원하는 기능은 무엇인가?(앱의 Key-function) Copyright ⓒ2015 Limepaper, Inc. All rights reserved. ex) 개인 프라이버시에 민감하며, 사회적 소속감을 중시 ex) 자신의 개인정보를 친한 지인과 안전하게 공유할 수 있는 자신만의 접속 방법의 획득 기억/태도 Memory & Attitude 결과에 대한 만족 수준의 기억, 다음 행동 영향을 주는 요인 사용자 행동에 대한 어떤 인터렉션/인터페이스가 필요한지 판단하는데 도움이 됨. 사용자 행동이 일어나게 되는 직접적인 이유(목표) 의도/원했던 목표와 결과의 비교평가와 인식한 것에 대한 경험적 해석 사용자 행동 패턴 User behavior pattern 기대 결과의 평가/피드백 Evaluation & Feedback 동기/계기(의도) Motivation & Goal 안전, 보안, 프라이버시 타인들로부터 자신의 안전과 정보의 보안을 유지하려는 욕구 뿐만 아니라, 자신의 감정, 신체 또는 경제적 사안의 노출을 꺼리는 욕구. 개인에게 축적되는 수많은 정보자산(Information property)가치가 확장, 오용되면서 보안과 프라이버시 요구는 높아짐. Privacy 자기표현, 자아투영, 개성 자신이 속한 사회, 타인과의 관계에 대해 누적된 경험에 대한 자기만의 표현욕구. 선호 브랜드 소유와 공유 등, 자기만의 세계를 적극적으로 드러내려는 욕구 Identity 소속감, 애정, 친화 다른 사람들과 좋은 관계를 유지하려고 노력하며, 특정 소셜 그룹의 소속감을 중시하는 욕구. 긍정적인 사고와 열린 사고로 타인을 자신의 영역에 함께하려는 욕구. Friendship 심미성, 미적 가치 추구 특정한 관점에서 독특한 미적 욕구를 가지고 있으며, 기능보다는 상징적 또는 주관적인 미적 가치를 성취하려는 욕구. Beauty 쾌락, 자극, 일탈 일상으로부터의 탈출과 함께 자극적인 것들을 감각적으로 수용하려는 욕구. 특히 인터넷 환경에서의 익명성, 가상세계(Virtual reality) 속에서 제2의 자아를 드러내려는 욕구. Hedonism 신뢰, 믿음, 자신감 다른 사람과의 약속을 이행하는데 있어 확신과 믿음을 주려는 욕구. 신뢰가 있는 타인과의 관계가 만들어진다면 뭐든지 잘 할 수 있다는 자신감을 가지려는 욕구. Confidence 권력, 능력, 관심, 신분, 주목 높은 권력욕구를 가지고 리더로써 남을 통제하며, 남들로 하여금 자신이 비교우의에 있고자 하는 욕구. Power 탐구, 호기심, 진리 모호하거나 잘 알지 못하는 외부 환경에 대해 알려고 노력하는 욕구. 스스로의 호기심, 알고자 하는 대상에 대한 명쾌한 해결 능력을 성공적으로 발휘함으로써 자긍심을 높이려는 욕구. Explore 모험, 프론티어 도전의식이 투철하고, 미지의 세상에 대한 강한 동경으로 새로운 능력을 개발하고자 하는 욕구. Adventure 조화, 안정, 노스텔지아 변화보다는 지속가능한 안정된 라이프스타일을 영위하고자하는 욕구. 미래지향적이기 보다는 과거의 기억과 향수를 동경하고 현실 속에서 정신적인 힐링(healing)을 추구하려는 욕구. Stable Existence 존재의 욕구 Relation 관계의 욕구 Accomplishment 성취의 욕구 Human Needs Context of Use4 어떤 상황에서 사용하는지? 시간(언제), 장소(어디서), 또는 특정 상황 등 사용 전후 맥락 ex) 움직일 틈 없는 퇴근길 만원 지하철, 10분 내로 집 근처 마트에 쇼핑리스트 작성해야하는 상황 Function5 주요기능 및 기술은 무엇인지? 다른 제품/서비스에는 없는, 또는 개선된 기능/기술 ex) 작성한 구매물품의 매대위치를 최단시간 경로로 추천 기능 Data 수집,생성 Data 해석,인식 Data 가공,전달 IOT/Wearable
  • 7. UX design Trigger for STARTUP Team Copyright ⓒ2015 Limepaper, Inc. All rights reserved. Killer-UX function & UX-service concept UX Actually UX진단 및 사용자 분석 Insight & Analysis Finding UX touch-Point! UX 핵심 기능과 UX서비스 컨셉 메이킹 UX 터치포인트: 서비스의 사용자경험 발화지점은 어디인가? 사용자 컨텍스트 분석으로부터 그들의 니즈와 행동패턴을 이해할 수 있는 정량적, 정성적인 데이터를 수집하고, 이 서비스의 UX접점과 Killer-UX Function을 찾아 서비스모델을 완성한다. for IoT/Wearable Stage - 02 Define step-4. UX context analysis & UX touch-point step-5. Killer-UX function step-6. UX-service concept making Methodology
  • 8. UX Actually killer-UX Function 및 UX-service concept 도출 Step 4 UX Context Analysis & UX touch-point 사용자와 외부 환경,사물 간의 맥락 분석을 통한 UX-서비스 모델링 사용자 컨텍스트(User Context) 분석 UX touch-point: 사물-사용자 행위 접점 IOT/Wearable Key-feature: 기능목록 UX Needs&Goal 사용자 니즈와 목표(의도,계기) 제품/서비스를 사용하는 사용자 층의 행동, 라이프스타일, 성향 등의 조사를 통해 해당 제품/서비스에 투영되는 소비자들의 니즈를 발견하고, 목표 사용자 층에 대한 특징을 파악할 수 있다. 이는 향후 제품/서비스 전략 및 디자인개발 전략에 중요한 정보를 제공한다. Step 6 UX-Service Concept Planning; IOT의 서비스화 IOT서비스를 위한 UX design 컨셉은 무엇인가? 거창한‘기능명세’를 만들어 내는 것이 아니라, 서비스 모델을 완성하기 위한 UX 핵심컨셉과 목표시장의 서비스전략을 찾는 것이 목표 Step 5 killer-UX Function UX성과 달성을 위한 핵심기능 우선 순위 정하기 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 제품/서비스와 사용자 간 소통의‘접점’ Copyright ⓒ2015 Limepaper, Inc. All rights reserved. 행위 패턴(behavior pattern) 테스크 시나리오(task scenario) 시간(Time)의 분리와 결합 공간(Place/Location)의 분리와 결합 사람/이벤트(People/Event)의 분리와 결합 조건/상황(Condition/Situation)의 분리와 결합 대상 (things/devices) 속성 (attributes/element) 조작,기능 (operation) User Behavioral Patterns/Data 사용자 행위 패턴과 데이터Killer-UX Function 제품/서비스의 핵심기능 UX design Trigger for STARTUP Team 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 경쟁우위 - 비지니스적 성공을 확신하는 핵심 사용자 가치효용은 무엇입니까? 핵심기술의 활용 전략은 무엇입니까? 이 서비스의 수익모델과 마케팅 전략은 무엇입니까?
  • 9. UX design Trigger for STARTUP Team Copyright ⓒ2015 Limepaper, Inc. All rights reserved. User modeling & UXD requirement UX Actually UX진단 및 사용자 분석 Insight & Analysis Verification UX value proposition! 퍼소나 기반 사용자모델링과 UX 디자인요구사항 도출 사용자가치 검증: 제품/서비스를 이용하는 하는 단 한가지 이유는? 사용자가 기대하는 UX에 대한 사용자가치 수준과 피드백 검증을 위해 퍼소나 기반으로 UX 시나리오를 완성한다. 퍼소나가 달성하고자 목표를 구체적으로 작성하고, 목표에 도달하기까지의‘의도/계기–실행–기대결과–평가/피드백’의 사용 상황시나리오를 작성한다. for IoT/Wearable Stage - 03 Refine step-7. Persona – User modeling step-8. Design requirement Methodology
  • 10. 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 7 Persona - User modeling Step 8 Design 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
  • 11. UX design Trigger for STARTUP Team Copyright ⓒ2015 Limepaper, Inc. All rights reserved. User task-flow & 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 feature step-10. User-Device Interaction Method
  • 12. User Task-Domain & Goal: 사용자의 목표와 테스크 도메인 설정하기 UX Storyboard란, UX key-concept 구현에 수반되는 사용자 태스크와 UI feature 간의 상호작용을 시각화하여, 개발자/디자이너와의 의사소통을 돕는 도구이자, 완성해야 할 앱서비스와 예상되는 사용자경험 미리보기! Q. 도출한 핵심 UX 컨셉이 UI에 충분히 반영되었는가? Q. 기능 별 우선순위가 적절히 고려되었는가? Q. 각 기능 간 위계 및 관계가 효율적으로 구성되었는가? UI Storyboard (Device) UI/인터렉션 방식을 정의하고, 사용자 테스크와 UI Feature 간 상호작용 설계하기 Step 9 User Task & UI feature list-up UX Needs/Killer-UX concept의 구현에 필요한 기능 리스트 작성. 사용자 Task에 따른 세부적인 기능들 간의 인터렉션 방식, 정보의 흐름과 관계망을 파악한다. User Behavior Pattern & Data: 사용자 행동 패턴과 사용자 데이터 정의 ex)사진촬영 후 메시지 작성하여 sns 자동업로드 할수 있다. Step 10 User-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): Device Form-Giving Device Tech C(Feedback): A(Goal): B(Behavior): C(Feedback): A(Goal): B(Behavior): C(Feedback): 사용자는 (A)를 하기 위해서 (B)를 하면 (C)가 된다. 사용자는 (A)를 하기 위해서 (B)를 하면 (C)가 된다. 사용자는 (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
  • 13. UX design Trigger for STARTUP Team Copyright ⓒ2015 Limepaper, Inc. All rights reserved. App. UI key-screen & Workflow UI Storyboard 사용자 테스크 분석과 사용자 인터페이스/인터렉션 설계 Insight & Analysis Simulation Vertical prototyping! 사용자인터페이스(UI) 시각화를 위한 와이어프레임과 워크플로우 설계 프로토타이핑 : 사용자가 경험하게 되는 인터렉션의 실체는 무엇인가? 사용자가 경험할 실체, 정보/기능/서비스의 전달 방식과 인터페이스를 빠르게 시각화하여 사용자 경험하게 될 어플리케이션(App)의 실체와 인터렉션 방식을 시뮬레이션해 본다 for IoT/Wearable Stage - 05 Act step-11. UI key-screen(Wireframe) step-12. Workflow Method
  • 14. Key-screen Layout UI Element Description No. Naming(명칭) Description(기능설명) 개발이슈 No. Naming Description (개발환경에 따른 예외사항, 또는 적용 규칙 등 개발 시 고려해야 하는 이슈) Step 11 UI Key-screen(Wireframe) 해당기능 구현을 위한 인터페이스와 메인화면 그려보기(wireframe) User task-flow에서 정의된 주요 components와 세부 feature의 화면 레이아웃을 구성한다. Step 12 Workflow key-screen 간 상호작용 및 시뮬레이션 해보기 정의된 화면 별로 각 버튼이나 컴포넌트의 동작에 의해 필요한 추가 화면을 연결한다. 순서에 맞게 배열된 앱화면 단위로 시뮬레이션을 해보면서 제품/서비스 사용절차를 검증한다. User Interaction 화면을 손가락으로 짧게(briefly) 터치 아이템을 선택하거나 조작할 때 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 설계하기 UX design Trigger for STARTUP Team Copyright ⓒ2015 Limepaper, Inc. All rights reserved. 02-2 User Task : User Task : User Task : * Workflow-2 * Workflow-1 User Task : User Task : User Task : ex) 사진촬영 후 sns에 공유하고 사진내용입력 IOT/Wearable
  • 15. UX design Trigger for STARTUP Team Copyright ⓒ2015 Limepaper, Inc. All rights reserved. GUI concept planning:‘Look & Feel’,‘Tone & Manner’ GUI moodboard 어플리케이션(App) 비주얼 컨셉 플레닝 Insight & Analysis Understanding Visual narrative! 그래픽 유저인터페이스(GUI) 컨셉 플레닝 시각적 네러티브 : 어플리케이션(App)의 시각적 인상과 개성은 무엇인가? 어플리케이션의 성격이나 목적에 맞는 시각적 언어로 GUI 컨셉을 계획한다. 사용자가 제품과 서비스를 사용하기 전의 첫인상이나 사용 후 사용자가 기억할 만한 인상과 개성을 표현하는 것인 관건이다. for IoT/Wearable Stage - 06 Refine step-13. Visual concept –‘Look & Feel’ step-14. GUI moodboard –‘Tone & Manner’ Method
  • 16. GUI Moodboard 완성해야 할 제품/앱의 비주얼 컨셉과 시각적 사용자경험 미리보기! Step 13 Visual concept‘look & Feel’ Step 14 GUI moodboard -‘Tone & Manner’ 사용자가 쉽고 편리하게 사용할 수 있도록 입출력 따위의 기능을 알기 쉬운 아이콘 따위의 그래픽으로 표현한다. 앱의 성격이나 목적, 사용자들에게 제공하려는 핵심가치에 따라서 그에 맞는 감성을 제공하는 것이 중요하다. 시스템을 사용하기 전에 느끼는 첫인상이나 시스템을 사용하고 나서 사용자가 기억할 수 있을 만한 개성을 표현하는 것이 중요하다. Visual Concept & Motive 제품/앱의 직관적인 미적 인상(개성) 제품/앱의 컨셉을 반영할 비주얼 모티브를 찾는다. 타깃 사용자의 성향, 라이프스타일, 미적 선호도 등에 영향을 미치는 디자인컨셉 키워드 를 작성한다. 타깃 사용자의 감성어휘 모티브 GUI Moodboard 란, UX Concept이 반영된 앱서비스 화면의 직관적인 UX - Look & Feel, 앱서비스 Brand Identity를 일관되게 반영한 Tone & Manner로 최적의 디자인컨셉을 도출하는 과정 Q. 정보의 범주를 시각적으로 어떻게 나누어 줄 것인가? Q. 시각적 구성 요소들에 대한 화면 상의 전반적인 배열과 느낌은 어떻게 보여줄 것인가? Q. 해당 앱서비스 화면의 시각적 인상, 또는 개성은 무엇인가? UX design Trigger for STARTUP Team Copyright ⓒ2015 Limepaper, Inc. All rights reserved. 사용자의 성향, 감정, 정서 등의 표현 시각적 인상, 매력 등 시각적 차별화 된 ‘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
  • 17. 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 / ucamp@lime-paper.com UX trigger 커뮤니티(페이스북): https://www.facebook.com/groups/ucampcommunity/ 교육 컨설팅 문의 TM