5강 5th.Lecture.What.Is.Information.Architecture 사용자 경험 디자인과 정보 설계의 관계를 이해한다. 정보 설계의 4가지 구성요소를 습득한다.

1. KAYWON UNIVERSITY OF ART & DESIGN
INDUSTRIAL DESIGN LAB
USER EXPERIENCE
DESIGN
사용자경험디자인 2
kwonjeongeun@naver.com
/ 32
1
5강 정보 설계의 이해
정보 설계의 4가지 구성 요소

2. 정보 설계 복습
정보 설계의 4가지 구성 요소
팀 과제 진행
Adobe XD 레슨
/ 32
2

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

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

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

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

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

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

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

10. 정보 설계 복습
정보 설계의 4가지 구성 요소
팀 과제 진행
Adobe XD 레슨
/ 32
10

11. 정보 구조 -> 정보의 분류
내비게이션 시스템 -> 지도
레이블링 시스템 -> 정보 그룹의 이름
콘텐츠 구성 -> 정보 노출의 방식과 순서
정보 설계(IA), 구성 요소
출처 : 다음 UX랩 <스토리로 이해하는 UX 디자인 프로세스>
/ 32
11

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

13. 정보 구조
✓ 계층 구조 ✓ 계열 구조
그리드 구조 네트워크 구조
정보를 어떻게 분류할 것인가
/ 32
13
메뉴 트리

14. 4 depth 계층 구조
정보 구조
정보를 어떻게 분류할 것인가
/ 32
14

15. 3 depth 계층 구조
정보 구조
정보를 어떻게 분류할 것인가
/ 32
15

16. 계열 구조
정보 구조
정보를 어떻게 분류할 것인가
/ 32
16
이전 다음
같은 정보 레벨
순차적 접근
주로 어디서?

17. 계층 & 계열 구조
정보 구조
정보를 어떻게 분류할 것인가
/ 32
17

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

19. Navigation 항해, 항법
즉 사용자가 자신의 목적지를 향해 순항할 수 있도록
도와주는 항해 지도
Internet Explorer
내비게이션 시스템
정보를 어떻게 탐색할 것인가
/ 32
19

20. 글로벌 내비게이션
로컬
내비게이션
컨텍스츄얼
내비게이션
내비게이션 시스템
정보를 어떻게 탐색할 것인가
/ 32
20
글로벌 Global ***
- 로컬 Local
- 컨텍스츄얼 Contextual

21. 정보 구조
내비게이션 시스템
레이블링 시스템
#사용자의언어로더쉽게 #UX writing #UX writer
#금융 #법률 #의료
콘텐츠 구성
정보 설계(IA), 구성 요소
출처 : 다음 UX랩 <스토리로 이해하는 UX 디자인 프로세스>
/ 32
21

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

23. 콘텐츠 구성
정보의 순서와 정렬을 어떻게 결정지을 것인가
날짜별 구성
알파벳 구성 주제별 구성
/ 32
23

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

25. 1. 메뉴 트리를 완료한다.
2. 화면을 스케치한다.
UI Ideation_Template_mobile_ios.pptx를 프린트해서
서비스의 주요 테스크 그리고 흐름을 보여 줄 주요 화면들을 스케치한다.
주요 테스크가 하나는 아닐 것.
3. 1인 1 스케치 세트를 원칙으로 한다. - 1 세트는 한 번에 나오지 않는다. 개인 최종을 기대
예 : 팀 구성원 2명(팀장 포함)이면 2개 스케치 세트
4. 스케치 완료 후, 팀원 피드백을 받는다. - 완료 아님.
개인 스케치를 보완해서 업로드한다. - 서로 의논하고 각자 개인 스케치 보완 후, 개인 최종 스케치 제출
5. 저와 팀 미팅으로 팀 스케치를 도출한다. - 차주
6. 팀은 2번이 반영된 팀 스케치를 업로드한다. - 차주
스케치 일정
/ 32
25

26. 1. 우측 상단에 날짜, 이름, 메뉴명(화면)을 적는다.
2. 서비스의 큰 구조(글로벌 내비게이션)에 대한 안을 잡는다.
3.첫 화면과 주요 화면에 글로벌 내비게이션 적용 및
로컬 내비게이션과 콘텐츠를 상세하게 스케치한다.
4. 주요 테스크의 흐름을 알 수 있게 필요한 여러 화면들을 스케치한다.
5. 1인 1 스케치 완료 후, 팀원 피드백을 주고받는다.
6. 개인 스케치를 보완해서 업로드한다.
스캔해서 pdf 파일로, 차주 수업 전까지 slack 팀 방에 업로드
스케치 준수사항, 큰 구조 -> 상세
/ 32
26

27. 스케치 업로드 준수사항
/ 32
27
1. pdf 파일로 올린다.
낱장으로 올리지 말 것.
2. 모든 스케치는 올바른 방향으로 구성한다.
돌아간 방향으로 올리지 말 것.
3. 순서대로 정렬한다.
4. 뒤에 35명이 있습니다.
보는 사람 입장에서 & 함께 공부하는 동료를 배려하는 마음으로.
이상 가이드대로 올리지 않은 파일은 과제 수행으로 인정하지 않습니다.

28. 정보 설계 복습
정보 설계의 4가지 구성 요소
팀 과제 진행
Adobe XD 레슨
/ 32
28

29. Adobe XD 레슨 5강 Assignment
Q.툴을 능숙하게 다루고
디자인 능력을 단시간에 향상 시키는 방법은?
A.잘 만든 디자인을
그대로 만들어 보는 훈련이 최선입니다.
COPY
/ 32
29

30. Adobe XD 레슨 5강 Assignment
숙제 : 총 7칸 Card + 메뉴 바 영역 포함
✓메뉴 아이콘 스크린샷 X, Ai로 그리기
✓그 외 폰트, 컬러, 실제 이미지 최대한 비슷한 것을
찾아서 적용한다.
볼 줄 아는 눈 중요. 디테일을 읽는 눈.
시작 전 Tip.
/ 32
30

31. Adobe XD 레슨 5강 Assignment
다음 주 6강에서 Zoom 랜덤 호명 공유 예정
/ 32
31

32. 끝.
다음 주 과제 :
XD 레슨 5강 복습.
팀 서비스 ‘메뉴 트리’ 바탕으로 1인 1 스케치 업로드.
다음 주 준비물 : 스케치한 종이, 스카치 테이프.
/ 32
32
kwonjeongeun@naver.com