7. Smart UX & UI Design : 4th - Work Process
우리는우리는
어디까지 왔나?어디까지 왔나?
8. Service Design
Method
Double
Diamond
M d l
Discover Define Develop Deliver
Model
확산적 사고와 수렴적 사고의 반복으로
창의적인 디자인사고 통해
확산적 사고
•고객에 대한 이해
•맥락적 조사
•문헌조사
•전문가와 의견공유
수렴적 사고
•다양한 방법론을
활용하여 서비스
개념 도출
확산적 사고
•다양한 디자인 제시
•프로토타이핑
•컨셉 수정 및 개선
•효과적 적용방안 연구
수렴적 사고
•디자인 결정
•고객평가
•디자인 검증 실행
창의적인 디자인사고 통해
예민하게 문제점을 찾고
혁신적인 아이디어로 해결책 도출하여
지속 가능한 서비스 디자인 모델 제안
•전문가와 의견공유 효과적 적용방안 연구
서비스디자인 방법론의 시초는 1982년 유럽 마케팅 저널에 소개된 린 쇼스탁
(Lynn G Shostack)의 “서비스를 디자인하는 방법”이라는 논문을 통해서 알려지
게 되었다. 그 이후2005년에 영국 디자인협의에서 발표한 서비스디자인 방법론인
Double Diamond는 Discover > Define > Develop> Deliver의 4단계의 과정
을 통해서 혁신서비스를 도출하는 방법론으로 각각의 이니셜을 따서 형식상 4D
Process를 갖춰지게 되었다. 이 방법론의 특징은 확산과 수렴이라는 디자인적인
사고방식에 민족지학(民族誌學)이라는 ethnography라는 관찰기법으로 디자이
너들의 예민한 감수성을 통해서 문제점을 찾아내고 기발한 아이디어를 구체화시
8
켜 혁신서비스로 만들어 2005년에 영국 디자인협회에서 발표한 Double
Diamond 서비스디자인 방법론 가는 과정이다.
9. Service Design
Method
Double
Diamond
M d l
Discover Define Develop Deliver
Model
확산적 사고와 수렴적 사고의 반복으로
창의적인 디자인사고 통해
확산적 사고
•고객에 대한 이해
•맥락적 조사
•문헌조사
•전문가와 의견공유
수렴적 사고
•다양한 방법론을
활용하여 서비스
개념 도출
확산적 사고
•다양한 디자인 제시
•프로토타이핑
•컨셉 수정 및 개선
•효과적 적용방안 연구
수렴적 사고
•디자인 결정
•고객평가
•디자인 검증 실행
창의적인 디자인사고 통해
예민하게 문제점을 찾고
혁신적인 아이디어로 해결책 도출하여
지속 가능한 서비스 디자인 모델 제안
•전문가와 의견공유 효과적 적용방안 연구
서비스디자인 방법론의 시초는 1982년 유럽 마케팅 저널에 소개된 린 쇼스탁
(Lynn G Shostack)의 “서비스를 디자인하는 방법”이라는 논문을 통해서 알려지
게 되었다. 그 이후2005년에 영국 디자인협의에서 발표한 서비스디자인 방법론인
Double Diamond는 Discover > Define > Develop> Deliver의 4단계의 과정
을 통해서 혁신서비스를 도출하는 방법론으로 각각의 이니셜을 따서 형식상 4D
Process를 갖춰지게 되었다. 이 방법론의 특징은 확산과 수렴이라는 디자인적인
사고방식에 민족지학(民族誌學)이라는 ethnography라는 관찰기법으로 디자이
너들의 예민한 감수성을 통해서 문제점을 찾아내고 기발한 아이디어를 구체화시
9
켜 혁신서비스로 만들어 2005년에 영국 디자인협회에서 발표한 Double
Diamond 서비스디자인 방법론 가는 과정이다.
10. Warming up
Service Design Method
What is SD Method?
Service design | Smart device UX, UI design
Service Design Method
“서비스디자인”이란 무엇인가?
디자인적 사고를 통해서 다학제적인 접근으로 혁신적인 아이디어(가치중심)를 발굴하고
지속적으로 실현 가능하게 할 수 있도록 최적화 하는 방법론입니다.
타 서비스 분야와 서비스디자인의 차이점
타 서비스 분야 서비스디자인
타 서비스 분야와 서비스디자인의 차이점
타 서비스 분야 서비스디자인
서비스디자인 혁신은…
고객경험을 통해 가치 창출한다.
그러므로 “가치를 중심의 서비스”를 제공한다.
10* 출처 : 서비스디자인의 동향과 정책방향
11. Warming up
Service Design Method
What is SD Method?
Service design | Smart device UX, UI design
Service Design Method
“서비스디자인”이란 무엇인가?
디자인적 사고를 통해서 다학제적인 접근으로 혁신적인 아이디어(가치중심)를 발굴하고
지속적으로 실현 가능하게 할 수 있도록 최적화 하는 방법론입니다.
타 서비스 분야와 서비스디자인의 차이점
타 서비스 분야
타 서비스 분야와 서비스디자인의 차이점
서비스디자인타 서비스 분야 서비스디자인
서비스디자인 혁신은…
고객경험을 통해 가치 창출한다.
그러므로 “가치를 중심의 서비스”를 제공한다.
11* 출처 : 서비스디자인의 동향과 정책방향
12. Warming up
Service Design Method
What is SD Method?
Service design | Smart device UX, UI design
Service Design Method
“서비스디자인”이란 무엇인가?
디자인적 사고를 통해서 다학제적인 접근으로 혁신적인 아이디어(가치중심)를 발굴하고
지속적으로 실현 가능하게 할 수 있도록 최적화 하는 방법론입니다.
타 디자인분야와 서비스디자인의 차이점
타 디자인 분야 서비스디자인
타 디자인분야와 서비스디자인의 차이점
타 디자인 분야 서비스디자인
서비스디자인은…
“맥락적” 연구를 통해 “보이지 않는 시스템”을 이해관계자에게
12* 출처 : 서비스디자인의 동향과 정책방향
“새로운 경험의 가치”를 디자인하여 제공한다.
13. Warming up
Service Design Method
What is SD Method?
Service design | Smart device UX, UI design
Service Design Method
“서비스디자인”이란 무엇인가?
디자인적 사고를 통해서 다학제적인 접근으로 혁신적인 아이디어(가치중심)를 발굴하고
지속적으로 실현 가능하게 할 수 있도록 최적화 하는 방법론입니다.
타 디자인분야와 서비스디자인의 차이점
타 디자인 분야
타 디자인분야와 서비스디자인의 차이점
서비스디자인타 디자인 분야 서비스디자인
서비스디자인은…
“맥락적” 연구를 통해 “보이지 않는 시스템”을 이해관계자에게
13* 출처 : 서비스디자인의 동향과 정책방향
“새로운 경험의 가치”를 디자인하여 제공한다.
17. Good design is Good business
정보, 지식, 지혜를 향한 발걸음
IA Structuring 이란 무엇인가?
스마트기기 UX/UI 2차 교육스마트기기 UX/UI 2차 교육
2013년 6월 17일 : 참고자료
최영현 컨설턴트 |
18. Good design is Good business
정보, 지식, 지혜를 향한 발걸음
Part1
IA의 이해 I 28일 13:00~13:50
Part2
IA의 실습 I 28일 14 00 14 50 | 15 00 15 50
• Data Gathering
• Grouping
• Categorize
• GNB (Global navigation Bar)
N i i
IA
IA의 실습 I
P 3
28일 14:00~14:50 | 15:00~ 15:50 • Navigation
Part3
IA의 평가 I 28일 16:00~16:50 | 17:00~ 17:50
19. PART 1
IA(Information Architecture)의 이해 IIA(Information Architecture)의 이해 I
인포메이션 아키텍처의 궁극적인 목적은 이용자가 원하는 정보를 편안하고 불편함 없이
이동하기 위함입니다 이러한 세심한 노력은 서비스의 충성도와 지속성을 강화켜 줍니다이동하기 위함입니다. 이러한 세심한 노력은 서비스의 충성도와 지속성을 강화켜 줍니다.
: What is Information Architecture?
20.
21.
22. PART 1
IA(Information Architecture)의 이해 I
Overview
Smart UX & UI Study : 4th
( )의 이해
IA는 왜 필요한가?
IA Overview
1 필요한 데이터를 수집하고
서비스 콘텐츠 제공에 필요한 데이터 수집 (D t G th i )
Date 1 서비스, 콘텐츠 제공에 필요한 데이터 수집 (Data Gathering)
2 원하는 정보를 찾아내어
콘텐츠에 대한 분류(G i ) 서비스를 위한 콘텐츠의 분류 (C i )
Information 2 콘텐츠에 대한 분류(Grouping), 서비스를 위한 콘텐츠의 분류 (Categorize)
Knowledge
3 이용자가 필요한 정보를 쉽게 찾아갈 수 있게
정보의 접근이 용이하도록 GNB (Global navigation Bar) 정의
Knowledge
(사용자정보암호화)
Wisdom
(사용자경험결합)
4 정보를 구조화 하는 기초작업으로 필요하고 중요 한 작업이다.
콘텐츠에 대한 분류(Grouping), 메뉴의 위계질서 (Hierarchy), 정보의 접근이 용이하도록 GNB (Global
i ti B ) 정의 서비스를 위한 콘텐츠의 분류 (C t i ) 정보탐색 (N i ti )하는데 필요navigation Bar) 정의, 서비스를 위한 콘텐츠의 분류 (Categorize), 정보탐색 (Navigation)하는데 필요
한 구조정의
22
23. 왜 IA가 중요한가?왜, IA가 중요한가?
빠르게 정보 찾기!- 빠르게 정보 찾기!
정보를 찾는데 드는 비용(시간과 노력 포함)을 최대한으로 줄이기 위해서 필요
회사의 인트라넷에서 그것만 위치가 제대로 박혔어도 직원들이 덜 고생하게 됨인 넷 것만 박혔 직원들 덜 생 됨
잘못된 IA 때문에 애먹은 직원들의 시간을 비용으로 산정해보라..
충실한 좋은 경험제공- 충실한 좋은 경험제공
IA가 엉망으로 되면 이용자가 그 사이트에서 불쾌한 경험
기업 자체에 대한 나쁜 이미지, 제품도 그렇게 엉성하게 만들 것 같은 느낌
IA는 브랜드 가치와도 직결
효율적인 자원 투자- 효율적인 자원 투자
잘못 설계된 사이트는 반드시 재 구축을 경험
잘못된 IA 재설계 비용은 크고,
어떨 때는 아예 다시 만드는 편이 덜 비용이 효과적
24. IA와 밀접하게 연결된 다른 영역IA와 밀접하게 연결된 다른 영역
그래픽 디자인- 그래픽 디자인
- 인터랙션 디자인- 인터랙션 디자인
- 유용성 공학유용성 공학
- 경험 디자인
- 소프트웨어 개발
- 콘텐츠 관리
- 프로젝스 메니지
25.
26. 무질서한 정보의 세계무질서한 정보의 세계
질서정연한 찾기 쉬운질서정연한
정보의 세계
찾기 쉬운
정보의 세계정보의 세계
i ti
정보의 세계
hnavigation search
27. 정보를 구조화 하는 기초작업으로정보를 구조화 하는 기초작업으로
필요하고 중요 한 작업이다.
콘텐츠에 대한 분류(Grouping)
메뉴의 위계질서 (Hierarchy)메뉴의 위계질서 (Hierarchy)
정보의 접근이 용이하도록 GNB (Global navigation Bar) 정의
서비스를 위한 콘텐츠의 분류 (Categorize)서비 를 위한 콘텐 의 분류 ( g )
정보탐색 (Navigation)하는데 필요한 구조정의
28. “The map is not the territory.”Alfred Korzybski
32. IA 3가지 환경요소에 대해가지 환경 에 대해
사용자 : 고객, 업무, 욕구, 정보 추구 행동, 경험사용자 : 고객, 업무, 욕구, 정보 추구 행동, 경험
콘텐츠 : 문서,데이터 형태,컨텐츠 객체, 양, 기존 구조
컨텍스트 : 사업목적,자금,정치,문화,기술,자원,제약조건
40. Smart Banking Branch 개선
금융 서비스 중심 : 동선, 아날로그 감성, 시청각 피드백 개선1
여성전문병원 (산부인과 인식)개선
의료서비스 중심 : 명칭의 일반 인식, 청소년 여성전문진료 인식
2
Story Bank book 비대면 서비스 개선3 y
금융서비스 중심 : 1인 재무 대면&비대면 컨설팅 및 상품판매 서비스 개선
3
유아병원 서비스 개선
의료서비스 중심 : 유아 통증 커뮤니케이션,놀이를 통한 병원 공포감 개선4
환자와 보호자 감성소통 서비스
의료서비스 중심 : 환자, 보호자, 코디네이터를 위한 감성소통 커뮤니케이션 서비스
5
62. 시장의 성장 : 기기 보급
2009 20132010
ICT 산업 전체가 스마트 시대로 급전환
디지털 텐츠의 저작권 제와 헬 원격 육 같은 마디지털 콘텐츠의 저작권 문제와 U헬스, 원격 교육 같은 스마트
융합 산업을 육성하기 위한 스마트형 통신 정책이 시급
63. 시장의 성장 : 통신사별 스마트폰 사용자 추이
국내 이동통신 시장이
바야흐로 ‘스마트 시대’로 급전환바야흐로 ‘스마트 시대’로 급전환
디지털 콘텐츠의 저작권 문제와 U헬스 원격 교육 같은 스마트디지털 콘텐츠의 저작권 문제와 U헬스, 원격 교육 같은 스마트
융합 산업을 육성하기 위한 스마트형 통신 정책이 시급
64.
65. 여러분이 선택한
Smart Device는?
AS-IS To-be
현재 사용하고 있는 것 미래 사용할 것
DID
Kiosk
??
Kiosk
…
실현 가능한 시나리오 미래시나리오실현 가능한 시나리오
즉시 실행이 가능하 미래비전에
도록 산출물 제작 공감이 가는 산출물 제작
68. 현재사용하고 있는 Smart Device현재사용하고 있는 Smart Device
Cloud + Multi touch Screen
PUI : Physical User Interface
CUI : Character User Interface
GUI : Graphic User Interface
NUI : N t l U I t fNUI : Natural User Interface
Context UI : 상황인식 UI
69.
70. MS가 만든 윈도우8,
혁신적인 메트로UI 과연 사용자가 원할까?혁신적인 메 과연 사용자가 원할까
윈도우8 혁신과 사용자 경험의 차이를 인정해야 한다.
반대로 Mac OSX는 터치기능과 앱스토어 기능을 넣었지만
아이폰/아이패드의 경험을 PC까지 연장하는 부분은 아직 적용하지 않고 있다는 사실
71.
72. 북마킹/큐레이션이라는 서비스는북마킹 큐레이션이라는 서비 는
앞으로 소셜커머스와 더불어 더욱 발전할 것으로 전망
“In The Box” 소셜 UI
디자인 렌 를 바꾼 Pi (핀터레스 )디자인 트렌드를 바꾼 Pinterest(핀터레스트)
간단한 글로벌 네비게이션, 이미지 (공유버튼/원본소스로의 링크), 이미지에 관한 간단한 설명
Like/Repin 수의 카운트, Like를 누른 사람 / 코멘트를 단 사람의 리스트
73. 뇌와 정보
고객의 언어로 말하세요!고객의 언어로 말하세요!
대규모의 생산시설과 대량생산시스템에 의해 생산량이 시장수요를 초과함에 따라대규모의 생산시설과 대량생산시스템에 의해 생산량이 시장수요를 초과함에 따라
재고를 어떻게 처리할 것인지에 대해 고민하고 있다. 반면, 소비자는 시장에서
제품 선택의 폭이 크게 늘어나 과거와 달리 훨씬 까다로워진 구매행동을 보이고 있다.
74. 상황인식 UI
시리’는 사용자가 질문이나 요청을 하면 여러 단어와 문맥을시리 는 사용자가 질문이나 요청을 하면 여러 단어와 문맥을
조합해 최상의 대답을 찾아주고 명령을 수행하는 기능이다
75. 디지로그 UI디지로그 UI
온오프라인의 연결된 경험을 원한다.
펜은 펜 굵기 실제 펜에 가까운 향상된 립감을 제공하며S펜은 6.5mm 펜 굵기로 실제 펜에 가까운 향상된 그립감을 제공하며,
필기감도 대폭 개선되어 섬세하고 자연스러운 표현이 가능해졌습니다
81. 미래에 사용될 Smart Device미래에 사용될 Smart Device
Ubiquitous intelligent systemq g y
Hologram display
Flexible display
인공지능 시스템 : 기계가 사람과 동일한 기능을 수행
홀로그램 디스플레이 : 가상의 상이지만 빛을 통해 실물과 같게 재현
플렉서블 디스플레이 : 형태변형이 자유로운 영상재생 스크린
89. Designing web navigation > 네비게이션 레이블링
1. 회사 전문 용어를 쓰지 않는다.
2. 기술 용어를 쓰지 않는다.
A. 사용자 언어로 말하기
3. 너무 똑똑하거나 재미있는 용어를 쓰지 않는다.
4. 약자를 쓰지 않는다.
5 적절한 보이스톤을 사용한다5. 적절한 보이스톤을 사용한다.
B. 설명적인 레이블
C. 상호 배타적인 레이블
D. 명확한 초점을 나타내는 레이블
1. 정밀도
2. 구문론
E. 일관된 레이블
2. 구문론
3. 동일한 UI적 표현
4. 기능적 공통용어 사용
F. 레이블의 길이
90. The Rules of IDEO Brainstorming
1. Defer judgment
2. Encourage wild ideas
3 Build on the ideas of others3. Build on the ideas of others
4. Stay focused on the topic
5 O ti t ti5. One conversation at a time
6. Be visual.
7. Go for quantity
98. Good design is Good business
정보, 지식, 지혜를 향한 발걸음
Part1
IA의 이해 II 29일 13:00~13:50
Part2
IA의 실습 II 29일 14 00 14 50 | 15 00 15 50
• Wireframe
• Paper Prototyping
IA
IA의 실습 II
P 3
29일 14:00~14:50 | 15:00~ 15:50
p yp g
Part3
IA의 평가 II 29일 16:00~16:50 | 17:00~ 17:50
99. en 번째 실습en 번째 실습
WireframeWireframe
만들기!만들기!
사용하기www.cacoo.com 사용하기!
118. Develop스토리보드 p
런던 히드로 공항 서비스 제공 시 문제가 있는 영역에서 해결책을
찾기 위해 조사된 상황에 맞춰 특정 시나리오 만든다찾기 위해 조사된 상황에 맞춰 특정 시나리오 만든다.
이때 정의된 캐릭터가 스토리보드 상에 시각화된 결과물을 만든다.
만들어진 스토리보드는 이해관계자들이 문제해결을 위해 참여하여
다양한 지식공유를 가능하게 해준다.다양한 지식공유를 가능하게 해준다.
*출처: 엔진 서비스디자인 | 버진항공사 런던 히드로 공항 서비스개선
Experience Prototyping
133. 사용성 테스트 ( bilit t t)에 대한사용성 테스트 (usability test)에 대한
정의는 ISO 9126에서 보면 사용성을 세가지로 정의
효과성효과성
(effectiveness: accuracy & completeness)
효율성
( ffi i ti )(efficiency: time)
만족도
(satfisfation)의( )의
