SlideShare a Scribd company logo
KAYWON UNIVERSITY OF ART & DESIGN

INDUSTRIAL DESIGN LAB

USER EXPERIENCE

DESIGN
사용자경험디자인2
kwonjeongeun@naver.com

7강 정보 설계의 4가지 구성 요소
/ 311
복습
정보 설계의 4가지 구성 요소
팀 과제 진행
Adobe XD 레슨
/ 312
메뉴 트리기능 리스트주요 특징서비스 컨셉
UI 디자인
OO OO 단계서비스 정의 단계
/ 313
프로토타이핑와이어프레임스케치플로우 차트
No color
UI 디자인
OO OO 단계
/ 314
‘정보 설계’ 라… 어디서부터 시작?
IA
Information Architecture
Architecture 건축/건출물/설계
Architect 건축가
/ 315
사용자 경험 디자인 - 정보 설계?
/ 316
정보	설계	이즈	베리	임폴턴트
/ 316
인터넷 기반 지식 플랫폼 TED의 창시자
집을 짓는 건축가(Architect)
현재, 정보를 건축하는 크리에이터
왜, 정보 설계(IA)?
OOO OO OO
/ 317
성공한 IA
• 신속하게 원하는 정보를 찾을 수 있어
서 사용자의 시간과 비용이 절약된다.
• 좋은 IA로부터 나온 사용자 경험은 브
랜드 가치를 제고시킨다.
• 쇼핑몰 등 구매와 연결된 경우에는 수
익 문제와 직결된다.
• 목적물의 신뢰성이 하락하고 나아가
브랜드 이미지의 추락과 연결된다.
실패한 IA
• 사용자는 불편함과 좌절감을 느껴 재
방문을 꺼리게 된다.
• 각인된 실패 경험은 결국 경쟁 사이
트를 찾게 한다.
• 쇼핑몰 등 구매와 연결된 경우에는
수익 문제와 직결된다.
• 목적물의 신뢰성이 하락하고 나아가
브랜드 이미지의 추락과 연결된다.
정보 설계(IA), 왜 중요한가
출처 : 다음 UX랩 <스토리로 이해하는 UX 디자인 프로세스>/ 318
인류 역사 이래 생산된 정보의 양
저장 장치로 훌륭하지 않은 뇌
용량이 부족하다.
특정한 유형의 정보만 저장하도록 되어 있다.
저장 기간이 1세기도 되지 않는다.
어떻게 하면 정보를 체계적으로 분류할 수 있을까
빙하시대의 분류법
수메르인들의 문서보관소
그리스인의 도서관
중세의 수도원 도서관
정보와 인간의 뇌
출처 : 유발 하라리 <사피엔스>, 알렉스 라이트 <분류의 역사>/ 319
복습
정보 설계의 4가지 구성 요소
팀 과제 진행
Adobe XD 레슨
/ 3110
정보 구조(Information Structure)
내비게이션 시스템
레이블링 시스템
콘텐츠 구성
정보 설계(IA), 구성 요소
출처 : 다음 UX랩 <스토리로 이해하는 UX 디자인 프로세스>/ 3111
정보 구조(Information Structure)
내비게이션 시스템
레이블링 시스템
콘텐츠 구성
정보 설계(IA), 구성 요소
출처 : 다음 UX랩 <스토리로 이해하는 UX 디자인 프로세스>/ 3112
정보 구조
계층 구조 계열 구조
그리드 구조 네트워크 구조
정보를 어떻게 분류할 것인가
/ 3113
계층 구조
메뉴 트리
홈 핫 트렌드 베스트 아이템 실시간 이슈 My 환경설정
잇걸
지난 호 보기 패션 지난 아이템 스포티걸 구매내역 로그인 설정
내가 본 상품 뷰티 과거 베스트 빈티지걸 장바구니 이용내역관리
탭 메뉴 헤어 MD 추천 럭셔리걸 찜리스트 어플정보
도시 브랜드별 추천 러블리걸 위시리스트
스타 내가 본 상품
개인정보관리
예시 : 잇걸 메뉴 트리
출처 : 다음 UX랩 <스토리로 이해하는 UX 디자인 프로세스> 中 잇걸 서비스/ 3114
정보 구조
? depth 계층 구조
정보 구조
정보를 어떻게 분류할 것인가
/ 3115
? depth 계층 구조
정보 구조
정보를 어떻게 분류할 것인가
/ 3116
계열 구조
정보 구조
정보를 어떻게 분류할 것인가
/ 3117
이전 다음
계층 & 계열 구조
정보 구조
정보를 어떻게 분류할 것인가
/ 3118
정보 설계(IA), 구성 요소
출처 : 다음 UX랩 <스토리로 이해하는 UX 디자인 프로세스>/ 3119
정보 구조(Information Structure)
내비게이션 시스템
레이블링 시스템
콘텐츠 구성
Navigation 항해, 항법
즉 사용자가 자신의 목적지를 향해 순항할 수 있도록
도와주는 항해 지도
Internet Explorer
내비게이션 시스템
정보를 어떻게 탐색할 것인가
/ 3120
글로벌 내비게이션
로컬
내비게이션
컨텍스츄얼
내비게이션
내비게이션 시스템
정보를 어떻게 탐색할 것인가
/ 3121
Global
- Local
- - Contextual
-
정보 설계(IA), 구성 요소
출처 : 다음 UX랩 <스토리로 이해하는 UX 디자인 프로세스>/ 3122
정보 구조(Information Structure)
내비게이션 시스템
레이블링 시스템
콘텐츠 구성
정보 설계(IA), 구성 요소
출처 : 다음 UX랩 <스토리로 이해하는 UX 디자인 프로세스>/ 3123
정보 구조(Information Structure)
내비게이션 시스템
레이블링 시스템
콘텐츠 구성
콘텐츠 구성
정보의 순서와 정렬을 어떻게 결정지을 것인가
/ 3124
날짜별 구성알파벳 구성 주제별 구성
홈 핫 트렌드 베스트 아이템 실시간 이슈 My 환경설정
잇걸
지난 호 보기 패션 지난 아이템 스포티걸 구매내역 로그인 설정
내가 본 상품 뷰티 과거 베스트 빈티지걸 장바구니 이용내역관리
탭 메뉴 헤어 MD 추천 럭셔리걸 찜리스트 어플정보
도시 브랜드별 추천 러블리걸 위시리스트
스타 내가 본 상품
개인정보관리
기능 리스트
메뉴 트리
스케치(IA 4가지 구성 요소 포함)
팀의 정보 설계(IA)는?
/ 3125
1. 모바일 기능 리스트를 Excel 템플릿에 맞춰 상세하게 리스트업한다.
2. 세부 기능을 먼저 리스트업 한 후,
각 항목의 상세 기능을 하나하나 작성한다.
3. 세부 - 상세 기능을 기능 단위(큰 단위)로 묶는다.
4. 전체 항목을 리스트를 중요도 순으로 정렬한다.
5. 기능 리스트가 완성되면 메뉴 트리를 설계한다.
-> 메뉴 트리까지 다음 주(10/16, 금) 수업 전까지 완료
기능 리스트 & 메뉴트리 준수사항
/ 3126
1. 메뉴 트리를 설계한다.
2. 화면을 Sketch 한다.
UI Ideation Sheet.pptx 활용해서
홈 화면 및 주요 화면을 스케치 한다.
주요 테스크를 보여 줄 주요 화면들을 Sketch 한다.
3. 1인 1 Sketch 세트를 원칙으로 한다.
예 : 팀 구성원 2명이면 2개 Sketch 세트
4. Sketch 완료 후, 팀원 피드백을 받는다.
5. 각자 업로드(pdf) 후, 저와 팀 미팅을 하면서 최종안을 다듬는다.
-> 다음 주 수업(10/23, 금) 전까지 완료
스케치 준수사항
/ 3127
스케치 준수사항
/ 3128
스케치 예시
복습
정보 설계의 4가지 구성 요소
팀 과제 진행
Adobe XD 레슨
/ 3129
복습
정보 설계의 4가지 구성 요소
팀 과제 진행
Adobe XD 레슨
/ 3130
끝.
다음 주 과제 : 기능 리스트 & 메뉴 트리 작성(Excel) 완료.
1인 1 스케치.
kwonjeongeun@naver.com

/ 3131

More Related Content

PDF
14th.lecture.about.usability
PDF
4th.lecture.service.design.process
PDF
5th.lecture.what.is.information.architecture
PDF
3rd.lecture.why.user.experience
PDF
6th.lecture.what.is.information.architecture
PDF
3rd.lecture.step1.understanding.20180914
PDF
[Seminar]2nd.lecture.uxui.consulting.20210713
PDF
1st.lecture.introduction
14th.lecture.about.usability
4th.lecture.service.design.process
5th.lecture.what.is.information.architecture
3rd.lecture.why.user.experience
6th.lecture.what.is.information.architecture
3rd.lecture.step1.understanding.20180914
[Seminar]2nd.lecture.uxui.consulting.20210713
1st.lecture.introduction

What's hot (20)

PDF
4th.lecture.interface.design.process
PDF
14th.lecture.the.critical.view.about.ux.20180608
PDF
[Seminar]1st.lecture.designers.job.in.industry.4.0 20210615
PDF
11th.lecture.about. usability.2.20181130
PDF
[Seminar]3rd.lecture.uxui.proposal.20210727
PDF
[Seminar]4rd.lecture.open.discussion.the.latest.uxui.challenges.20210824
PDF
5th.Lecture.Purpose.of.Project.pdf
PDF
7th.lecture.step5.prototyping.20181012
PDF
2nd.lecture.who.are.we
PDF
3rd.lecture.why.user.experience
PDF
1st.lecture.introduction
PPTX
Research method
PDF
3rd.Lecture.Why.User.Experience.20180323
PDF
1st.lecture.introduction h
PDF
10th.lecture.gui.design
PDF
6th.lecture.step4.ideation.20181005
PDF
13th.lecture.step4.ideation 2
PDF
9th.lecture.step3.analysis
PDF
10th.lecture.step4.ideation
PDF
11th.lecture.step4.ideation
4th.lecture.interface.design.process
14th.lecture.the.critical.view.about.ux.20180608
[Seminar]1st.lecture.designers.job.in.industry.4.0 20210615
11th.lecture.about. usability.2.20181130
[Seminar]3rd.lecture.uxui.proposal.20210727
[Seminar]4rd.lecture.open.discussion.the.latest.uxui.challenges.20210824
5th.Lecture.Purpose.of.Project.pdf
7th.lecture.step5.prototyping.20181012
2nd.lecture.who.are.we
3rd.lecture.why.user.experience
1st.lecture.introduction
Research method
3rd.Lecture.Why.User.Experience.20180323
1st.lecture.introduction h
10th.lecture.gui.design
6th.lecture.step4.ideation.20181005
13th.lecture.step4.ideation 2
9th.lecture.step3.analysis
10th.lecture.step4.ideation
11th.lecture.step4.ideation
Ad

Similar to 7th.lecture.4.components.of.information.architecture (20)

PDF
5th.Lecture.What.is.Information.Architecture.pdf
PDF
5th.Lecture.What.is.Information.Architecture.pdf
PDF
5th.lecture.what.is.information.architecture.2 20191004
PDF
4th.lecture.what.is.information.architecture 20190927
PDF
4th.Lecture.Service.Design.Process.pdf
PPT
3주차 ppt용
PDF
InterfaceDesign_6th.Lecture.InformationArchitecture_1.pdf 자료
PDF
Information Architecture
PDF
프로젝트실무와기획의역할
PDF
프로젝트실무와 기획의 역할
PDF
4th.Lecture.Service.Design.Process.pdf
PDF
Elements of user experience
PDF
Lecture 2 afternoon session
PDF
디자인 시스템 디자인하기
PDF
How to Make Money from Data - Global Cases
PDF
[아꿈사/110903] 도메인주도설계 4장
PDF
InterfaceDesign_10th.lecture.Introduction.of.Final.Exam.pdf 자료
PDF
중간관리자를 위한 모바일 어플리케이션 _ WETEAM
PDF
iOS Human_Interface_Guidlines_#2_SYS4U
PDF
UX디자인_기획서.pdf
5th.Lecture.What.is.Information.Architecture.pdf
5th.Lecture.What.is.Information.Architecture.pdf
5th.lecture.what.is.information.architecture.2 20191004
4th.lecture.what.is.information.architecture 20190927
4th.Lecture.Service.Design.Process.pdf
3주차 ppt용
InterfaceDesign_6th.Lecture.InformationArchitecture_1.pdf 자료
Information Architecture
프로젝트실무와기획의역할
프로젝트실무와 기획의 역할
4th.Lecture.Service.Design.Process.pdf
Elements of user experience
Lecture 2 afternoon session
디자인 시스템 디자인하기
How to Make Money from Data - Global Cases
[아꿈사/110903] 도메인주도설계 4장
InterfaceDesign_10th.lecture.Introduction.of.Final.Exam.pdf 자료
중간관리자를 위한 모바일 어플리케이션 _ WETEAM
iOS Human_Interface_Guidlines_#2_SYS4U
UX디자인_기획서.pdf
Ad

More from Judy Kwon (20)

PDF
DesignThinking_14th.Lecture.Final.PT.Guideline.pdf 자료
PDF
DesignThinking_13th.Lecture.Step.3.Ideate.pdf 자료
PDF
DesignThinking_12th.Lecture.Step.2.Define.a.Problem.pdf 자료
PDF
DesignThinking_11th.Lecture.Step.1.Empathize.pdf 자료
PDF
DesignThinking_10th.Lecture.Step.1.Empathize.pdf 자료
PDF
DesignThinking_9th.Lecture.Understanding.Design.Thinking.pdf 자료
PDF
DesignThinking_7th.Lecture.3.5.Dollar.Design.Workshop.pdf 자료
PDF
DesignThinking_6th.Lecture.Shape.Mix.Workshop.Part.2.pdf 자료
PDF
DesignThinking_5th.Lecture.Shape.Mix.Workshop.Part.1.pdf 자료
PDF
DesignThinking_4th.Lecture.Scale.Mix.Workshop.pdf 자료
PDF
DesignThinking_3rd.Lecture.Context.Mix.Workshop.pdf 자료
PDF
DesignThinking_2nd.Lecture.Warm-Up.pdf 자료
PDF
DesignThinking_1st.Lecture.Introduction.pdf 자료
PDF
InterfaceDesign_14th.lecture.Final.Exam.Guideline.pdf 자료
PDF
InterfaceDesign_13th.lecture.UI.Design.pdf 자료
PDF
InterfaceDesign_12th.lecture.Wireframe.and.Prototype.pdf 자료
PDF
[SpecialLecture] Design.and.User.Experience.Design.pdf
PDF
InterfaceDesign_11th.lecture.Sketch.pdf 자료
PDF
InterfaceDesign_8th.lecture.MidTerms.Guideline.pdf 자료
PDF
InterfaceDesign_7th.Lecture.InformationArchitecture_2.pdf 자료
DesignThinking_14th.Lecture.Final.PT.Guideline.pdf 자료
DesignThinking_13th.Lecture.Step.3.Ideate.pdf 자료
DesignThinking_12th.Lecture.Step.2.Define.a.Problem.pdf 자료
DesignThinking_11th.Lecture.Step.1.Empathize.pdf 자료
DesignThinking_10th.Lecture.Step.1.Empathize.pdf 자료
DesignThinking_9th.Lecture.Understanding.Design.Thinking.pdf 자료
DesignThinking_7th.Lecture.3.5.Dollar.Design.Workshop.pdf 자료
DesignThinking_6th.Lecture.Shape.Mix.Workshop.Part.2.pdf 자료
DesignThinking_5th.Lecture.Shape.Mix.Workshop.Part.1.pdf 자료
DesignThinking_4th.Lecture.Scale.Mix.Workshop.pdf 자료
DesignThinking_3rd.Lecture.Context.Mix.Workshop.pdf 자료
DesignThinking_2nd.Lecture.Warm-Up.pdf 자료
DesignThinking_1st.Lecture.Introduction.pdf 자료
InterfaceDesign_14th.lecture.Final.Exam.Guideline.pdf 자료
InterfaceDesign_13th.lecture.UI.Design.pdf 자료
InterfaceDesign_12th.lecture.Wireframe.and.Prototype.pdf 자료
[SpecialLecture] Design.and.User.Experience.Design.pdf
InterfaceDesign_11th.lecture.Sketch.pdf 자료
InterfaceDesign_8th.lecture.MidTerms.Guideline.pdf 자료
InterfaceDesign_7th.Lecture.InformationArchitecture_2.pdf 자료

7th.lecture.4.components.of.information.architecture

  • 1. KAYWON UNIVERSITY OF ART & DESIGN INDUSTRIAL DESIGN LAB USER EXPERIENCE DESIGN 사용자경험디자인2 kwonjeongeun@naver.com 7강 정보 설계의 4가지 구성 요소 / 311
  • 2. 복습 정보 설계의 4가지 구성 요소 팀 과제 진행 Adobe XD 레슨 / 312
  • 3. 메뉴 트리기능 리스트주요 특징서비스 컨셉 UI 디자인 OO OO 단계서비스 정의 단계 / 313
  • 5. ‘정보 설계’ 라… 어디서부터 시작? IA Information Architecture Architecture 건축/건출물/설계 Architect 건축가 / 315
  • 6. 사용자 경험 디자인 - 정보 설계? / 316 정보 설계 이즈 베리 임폴턴트 / 316
  • 7. 인터넷 기반 지식 플랫폼 TED의 창시자 집을 짓는 건축가(Architect) 현재, 정보를 건축하는 크리에이터 왜, 정보 설계(IA)? OOO OO OO / 317
  • 8. 성공한 IA • 신속하게 원하는 정보를 찾을 수 있어 서 사용자의 시간과 비용이 절약된다. • 좋은 IA로부터 나온 사용자 경험은 브 랜드 가치를 제고시킨다. • 쇼핑몰 등 구매와 연결된 경우에는 수 익 문제와 직결된다. • 목적물의 신뢰성이 하락하고 나아가 브랜드 이미지의 추락과 연결된다. 실패한 IA • 사용자는 불편함과 좌절감을 느껴 재 방문을 꺼리게 된다. • 각인된 실패 경험은 결국 경쟁 사이 트를 찾게 한다. • 쇼핑몰 등 구매와 연결된 경우에는 수익 문제와 직결된다. • 목적물의 신뢰성이 하락하고 나아가 브랜드 이미지의 추락과 연결된다. 정보 설계(IA), 왜 중요한가 출처 : 다음 UX랩 <스토리로 이해하는 UX 디자인 프로세스>/ 318
  • 9. 인류 역사 이래 생산된 정보의 양 저장 장치로 훌륭하지 않은 뇌 용량이 부족하다. 특정한 유형의 정보만 저장하도록 되어 있다. 저장 기간이 1세기도 되지 않는다. 어떻게 하면 정보를 체계적으로 분류할 수 있을까 빙하시대의 분류법 수메르인들의 문서보관소 그리스인의 도서관 중세의 수도원 도서관 정보와 인간의 뇌 출처 : 유발 하라리 <사피엔스>, 알렉스 라이트 <분류의 역사>/ 319
  • 10. 복습 정보 설계의 4가지 구성 요소 팀 과제 진행 Adobe XD 레슨 / 3110
  • 11. 정보 구조(Information Structure) 내비게이션 시스템 레이블링 시스템 콘텐츠 구성 정보 설계(IA), 구성 요소 출처 : 다음 UX랩 <스토리로 이해하는 UX 디자인 프로세스>/ 3111
  • 12. 정보 구조(Information Structure) 내비게이션 시스템 레이블링 시스템 콘텐츠 구성 정보 설계(IA), 구성 요소 출처 : 다음 UX랩 <스토리로 이해하는 UX 디자인 프로세스>/ 3112
  • 13. 정보 구조 계층 구조 계열 구조 그리드 구조 네트워크 구조 정보를 어떻게 분류할 것인가 / 3113 계층 구조 메뉴 트리
  • 14. 홈 핫 트렌드 베스트 아이템 실시간 이슈 My 환경설정 잇걸 지난 호 보기 패션 지난 아이템 스포티걸 구매내역 로그인 설정 내가 본 상품 뷰티 과거 베스트 빈티지걸 장바구니 이용내역관리 탭 메뉴 헤어 MD 추천 럭셔리걸 찜리스트 어플정보 도시 브랜드별 추천 러블리걸 위시리스트 스타 내가 본 상품 개인정보관리 예시 : 잇걸 메뉴 트리 출처 : 다음 UX랩 <스토리로 이해하는 UX 디자인 프로세스> 中 잇걸 서비스/ 3114 정보 구조
  • 15. ? depth 계층 구조 정보 구조 정보를 어떻게 분류할 것인가 / 3115
  • 16. ? depth 계층 구조 정보 구조 정보를 어떻게 분류할 것인가 / 3116
  • 17. 계열 구조 정보 구조 정보를 어떻게 분류할 것인가 / 3117 이전 다음
  • 18. 계층 & 계열 구조 정보 구조 정보를 어떻게 분류할 것인가 / 3118
  • 19. 정보 설계(IA), 구성 요소 출처 : 다음 UX랩 <스토리로 이해하는 UX 디자인 프로세스>/ 3119 정보 구조(Information Structure) 내비게이션 시스템 레이블링 시스템 콘텐츠 구성
  • 20. Navigation 항해, 항법 즉 사용자가 자신의 목적지를 향해 순항할 수 있도록 도와주는 항해 지도 Internet Explorer 내비게이션 시스템 정보를 어떻게 탐색할 것인가 / 3120
  • 22. 정보 설계(IA), 구성 요소 출처 : 다음 UX랩 <스토리로 이해하는 UX 디자인 프로세스>/ 3122 정보 구조(Information Structure) 내비게이션 시스템 레이블링 시스템 콘텐츠 구성
  • 23. 정보 설계(IA), 구성 요소 출처 : 다음 UX랩 <스토리로 이해하는 UX 디자인 프로세스>/ 3123 정보 구조(Information Structure) 내비게이션 시스템 레이블링 시스템 콘텐츠 구성
  • 24. 콘텐츠 구성 정보의 순서와 정렬을 어떻게 결정지을 것인가 / 3124 날짜별 구성알파벳 구성 주제별 구성
  • 25. 홈 핫 트렌드 베스트 아이템 실시간 이슈 My 환경설정 잇걸 지난 호 보기 패션 지난 아이템 스포티걸 구매내역 로그인 설정 내가 본 상품 뷰티 과거 베스트 빈티지걸 장바구니 이용내역관리 탭 메뉴 헤어 MD 추천 럭셔리걸 찜리스트 어플정보 도시 브랜드별 추천 러블리걸 위시리스트 스타 내가 본 상품 개인정보관리 기능 리스트 메뉴 트리 스케치(IA 4가지 구성 요소 포함) 팀의 정보 설계(IA)는? / 3125
  • 26. 1. 모바일 기능 리스트를 Excel 템플릿에 맞춰 상세하게 리스트업한다. 2. 세부 기능을 먼저 리스트업 한 후, 각 항목의 상세 기능을 하나하나 작성한다. 3. 세부 - 상세 기능을 기능 단위(큰 단위)로 묶는다. 4. 전체 항목을 리스트를 중요도 순으로 정렬한다. 5. 기능 리스트가 완성되면 메뉴 트리를 설계한다. -> 메뉴 트리까지 다음 주(10/16, 금) 수업 전까지 완료 기능 리스트 & 메뉴트리 준수사항 / 3126
  • 27. 1. 메뉴 트리를 설계한다. 2. 화면을 Sketch 한다. UI Ideation Sheet.pptx 활용해서 홈 화면 및 주요 화면을 스케치 한다. 주요 테스크를 보여 줄 주요 화면들을 Sketch 한다. 3. 1인 1 Sketch 세트를 원칙으로 한다. 예 : 팀 구성원 2명이면 2개 Sketch 세트 4. Sketch 완료 후, 팀원 피드백을 받는다. 5. 각자 업로드(pdf) 후, 저와 팀 미팅을 하면서 최종안을 다듬는다. -> 다음 주 수업(10/23, 금) 전까지 완료 스케치 준수사항 / 3127
  • 29. 복습 정보 설계의 4가지 구성 요소 팀 과제 진행 Adobe XD 레슨 / 3129
  • 30. 복습 정보 설계의 4가지 구성 요소 팀 과제 진행 Adobe XD 레슨 / 3130
  • 31. 끝. 다음 주 과제 : 기능 리스트 & 메뉴 트리 작성(Excel) 완료. 1인 1 스케치. kwonjeongeun@naver.com / 3131