4강 4th.Lecture.Service.Design.Process 서비스 디자인 프로세스를 이해한다.

1. KAYWON UNIVERSITY OF ART & DESIGN
INDUSTRIAL DESIGN LAB
USER EXPERIENCE
DESIGN
사용자경험디자인 2
kwonjeongeun@naver.com
/ 32
1
4강 서비스 디자인 프로세스

2. 인터페이스와 인터랙션 복습
서비스 디자인 프로세스
정보 설계란
팀 과제 진행
Adobe XD 레슨
/ 32
2

3. 비슷하지만 서로 달라
인 터 랙 션
/ 32
3
인 터 페 이 스
기계
시스템
정보

4. 새로운 창문, 너의 이름은
System(계) System(계)
/ 32
4
Face(면) Face(면)
만나
소통
장소/수단
Machine
Everyday Things
Auto-Mobile
AI
Robot
Machine
Human

5. 기계
시스템
정보
소통
의사소통
2개의 시스템이 만나서? 소통
/ 32
5
?
인 터 랙 션
문화용어 : 의사소통 Communication
과학용어 : 상호작용 Interaction

6. QUIZ
/ 32
6
H C I
Computer Human
Interaction
? ? ?

7. 사람과 사람의 인터랙션
/ 32
7
의사소통
대화
Communication

8. UX/UI 디자이너 자격요건
• HCI 관련 학과 전공자
• HCI 학과 X
• 심리학과, 인지심리학과, 문화인류학과, 산업공학과 …
• (디지털 미디어) 시각 디자인 전공자
• 산업 디자인 전공자, 제품 디자인 전공자
• Communication 능한 자
/ 32
8

9. QUIZ
/ 32
9
…
사람 + 사람
사람 + 탈 것
HMI
AVN
사람 + 공간
WALL PAD
사람 + 사물

10. 인터페이스와 인터랙션 복습
서비스 디자인 프로세스
정보 설계란
팀 과제 진행
Adobe XD 레슨
/ 32
10

11. 서비스 디자인
콘셉트 보드
서비스 시나리오
서비스 청사진
UX 디자인
정보 구조
테스크 흐름
세부 인터랙션
UI 디자인
비주얼 콘셉트 보드
화면 디자인
서비스 디자인 프로세스
/ 32
11
디자인 가이드
콘셉트
서비스 디자인
전달
서비스 개발
목표
프로젝트 범위
가설
고객 여정 지도
문제 취약점

12. 메뉴 트리
기능 리스트
주요 특징
서비스 컨셉
UX 디자인
/ 32
12 ★ : 팀 과제 산출물

13. 프로토타입
와이어프레임
스케치
플로우 차트
No color
UX 디자인
/ 32
13 ★ : 팀 과제 산출물

14. 인터페이스와 인터랙션 복습
서비스 디자인 프로세스
정보 설계란
팀 과제 진행
Adobe XD 레슨
/ 32
14

15. 서비스 정의 단계 정보 설계 단계
메뉴 트리
기능 리스트
주요 특징
서비스 컨셉
UX 디자인
/ 32
15 ★ : 팀 과제 산출물

16. 정보 설계 단계
프로토타입
와이어프레임
스케치
플로우 차트
No color
UX 디자인
/ 32
16 ★ : 팀 과제 산출물

17. ‘정보 설계’ 라… 어디서부터 시작?
정보 설계
IA
Information + Architecture
정보 + 건축/건축물/설계
/ 32
17

18. 사용자 경험 디자인 - 정보 설계?
/ 32
18
정보 설계 이즈 베리 임포턴트
/ 32
18

19. 인터넷 기반 지식 플랫폼 TED의 창시자
집을 짓는 건축가(Architect)
현재, 정보를 건축하는 크리에이터
왜, 정보 설계(IA)?
리처드 사울 워먼
/ 32
19

20. 사람의 입장, 정보의 덩어리!
정보, 어떻게이해 시킬 건데?
규칙, 논리 -> 이해하기 쉬운 시스템 구축하는 일 = 사용자 경험 디자인
도구의 접근성 Accessibility, 도구의 효율성 E
ffi
ciency 높아짐
정보 설계(IA)란?
리처드 사울 워먼
/ 32
20
사용자
경험
디자인
이해
정보

21. 홈 핫 트렌드 베스트 아이템 실시간 이슈 마이 메뉴 환경설정
잇걸
지난 호 보기 패션 지난 아이템 스포티걸 구매내역 로그인 설정
내가 본 상품 뷰티 과거 베스트 빈티지걸 장바구니 이용내역관리
탭 메뉴 헤어 MD 추천 럭셔리걸 찜리스트 어플정보
도시 브랜드별 추천 러블리걸 위시리스트
스타 내가 본 상품
개인정보관리
예 : 잇걸 메뉴 트리
출처 : 다음 UX랩 <스토리로 이해하는 UX 디자인 프로세스> 中 잇걸 서비스
/ 32
21

22. 성공한 IA
• 신속하게 원하는 정보를 찾을 수 있어
서 사용자의 시간과 비용이 절약된다.
• 좋은 IA로부터 나온 사용자 경험은 브
랜드 가치를 제고시킨다.
• 쇼핑몰 등 구매와 연결된 경우에는 수
익 문제와 직결된다.
• 목적물의 신뢰성이 하락하고 나아가
브랜드 이미지의 추락과 연결된다.
실패한 IA
• 사용자는 불편함과 좌절감을 느껴 재
방문을 꺼리게 된다.
• 각인된 실패 경험은 결국 경쟁 사이
트를 찾게 한다.
• 쇼핑몰 등 구매와 연결된 경우에는
수익 문제와 직결된다.
• 목적물의 신뢰성이 하락하고 나아가
브랜드 이미지의 추락과 연결된다.
정보 설계(IA), 왜 중요한가
출처 : 다음 UX랩 <스토리로 이해하는 UX 디자인 프로세스>
/ 32
22

23. 정보와 인간의 뇌
출처 : 유발 하라리 <사피엔스>, 알렉스 라이트 <분류의 역사>
/ 32
23
사용자
경험
디자인
이해
정보 뇌
인류 역사 이래 생산된 정보의 양
저장 장치로 훌륭하지 않은 뇌
용량이 부족하다.
특정한 유형의 정보만 저장하도록 되어 있다.
저장 기간이 1세기도 되지 않는다.
어떻게 하면 정보를 체계적으로 분류할 수 있을까?
빙하시대의 분류법
고대 수메르인의 문서 보관소 문서 분류법
중세의 수도원 도서관 도서 분류법

24. 출처 : 영화 <인사이드 아웃>
정보와 인간의 뇌
/ 32
24

25. 출처 : 영화 <인사이드 아웃>
정보와 인간의 뇌
/ 32
25

26. 정보와 인간의 뇌
출처 : 유발 하라리 <사피엔스>, 알렉스 라이트 <분류의 역사>
/ 32
26
인류 역사 이래 생산된 정보의 양
저장 장치로 훌륭하지 않은 뇌
용량이 부족하다.
특정한 유형의 정보만 저장하도록 되어 있다.
저장 기간이 1세기도 되지 않는다.
어떻게 하면 정보를 체계적으로 분류할 수 있을까?
빙하시대의 분류법
고대 수메르인의 문서 보관소 문서 분류법
중세의 수도원 도서관 도서 분류법
사용자
경험
디자인
이해
정보 뇌

27. 예 : 2000년대 초 포털 서비스
/ 32
27

28. 정보 구조
내비게이션 시스템
레이블링 시스템
콘텐츠 구성
정보 설계(IA), 구성 요소
출처 : 다음 UX랩 <스토리로 이해하는 UX 디자인 프로세스>
/ 32
28

29. 홈 핫 트렌드 베스트 아이템 실시간 이슈 마이 메뉴 환경설정
잇걸
지난 호 보기 패션 지난 아이템 스포티걸 구매내역 로그인 설정
내가 본 상품 뷰티 과거 베스트 빈티지걸 장바구니 이용내역관리
탭 메뉴 헤어 MD 추천 럭셔리걸 찜리스트 어플정보
도시 브랜드별 추천 러블리걸 위시리스트
스타 내가 본 상품
개인정보관리
팀의 정보 설계(IA)는?
출처 : 다음 UX랩 <스토리로 이해하는 UX 디자인 프로세스> 中 잇걸 서비스
/ 32
29
기능 리스트
✓ 메뉴 트리

30. 기능 리스트 Excel 파일 내 이어서, 메뉴 트리 작성 완료.
목적 : 1. 바로 서비스를 만들 수 없다. 담을 화면과 담을 콘텐츠가 필요함.
2. 서비스 - 주요 특징 - 주요 기능 - 메뉴 트리 - 콘텐츠(정보) 대한 생각이 중심을 잡고 있
는지 확인.
1. 기능 리스트와 메뉴 트리를
Excel 탬플릿에 맞춰 상세하게 작성한다.
2. 기능 리스트를 먼저 완료 후, 메뉴 트리를 설계한다.
중요) 기능 리스트와 메뉴 트리 차이를 이해해야
작성이 편합니다.
메뉴 트리 준수사항
/ 32
30

31. 인터페이스와 인터랙션 복습
서비스 디자인 프로세스
정보 설계란
팀 과제 진행
Adobe XD 레슨
/ 32
31

32. 끝.
다음 주 과제 :
모든 팀 메뉴 트리 작성하기.
XD 레슨 4강 복습.
다음 주 준비물 : 연필, 지우개.
/ 32
32
kwonjeongeun@naver.com