SlideShare a Scribd company logo
1 of 23
Download to read offline
KAYWON UNIVERSITY OF ART & DESIGN

INDUSTRIAL DESIGN LAB

USER EXPERIENCE

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

6강 정보 설계의 이해
/ 231
메뉴 트리기능 리스트주요 특징서비스 컨셉
UI 디자인
정보 설계 단계서비스 정의 단계
/ 232
프로토타이핑와이어프레임스케치플로우 차트
No color
UI 디자인
정보 설계 단계
/ 233
정보 설계란
팀 과제 진행
Adobe XD 레슨
/ 234
‘정보 설계’ 라… 어디서부터 시작?
?
/ 235
‘정보 설계’ 라… 어디서부터 시작?
“무언가를 디자인해야 할 때,
그(아킬레 카스틸리오니)는 가장 먼저 사전을 펼치고,
디자인해야 하는 물건 이름의 정의를 찾아보았다.
오브제의 일반적인 개념을 확인하는 것으로 디자인을 시작했다.”
- 이코 밀리오레 & 마라 세르베토 인터뷰 중
/ 236
‘정보 설계’ 라… 어디서부터 시작?
IA
Information Architecture 건축/건출물/설계
Architect 건축가
AI
Artificial Intelligence
Adobe Illustrator
/ 237
사용자 경험 디자인 - 정보 설계?
/ 238
정보	설계	이즈	베리	임폴턴트
/ 238
인터넷 기반 지식 플랫폼 TED의 창시자
집을 짓는 건축가(Architect)
현재, 정보를 건축하는 크리에이터
왜, 정보 설계(IA)?
리처드 사울 워먼
/ 239
정보 관점 -> 사용자 경험 디자인
정보 - 궁금증, 알고 싶다? 이해 - 사람
정보 - 이해에 대한 이야기
이해, 어떻게 시킬건데?
더 논리적 만들어 -> 더 이해하기 쉬어 -> 직관적인 시스템 구축
접근성 accessibility
효율성 efficiency
정보 설계(IA)란?
리처드 사울 워먼
/ 2310
홈 핫 트렌드 베스트 아이템 실시간 이슈 My 환경설정
잇걸
지난 호 보기 패션 지난 아이템 스포티걸 구매내역 로그인 설정
내가 본 상품 뷰티 과거 베스트 빈티지걸 장바구니 이용내역관리
탭 메뉴 헤어 MD 추천 럭셔리걸 찜리스트 어플정보
도시 브랜드별 추천 러블리걸 위시리스트
스타 내가 본 상품
개인정보관리
예 : 잇걸 메뉴 트리
출처 : 다음 UX랩 <스토리로 이해하는 UX 디자인 프로세스> 中 잇걸 서비스/ 2311
성공한 IA
• 신속하게 원하는 정보를 찾을 수 있어
서 사용자의 시간과 비용이 절약된다.
• 좋은 IA로부터 나온 사용자 경험은 브
랜드 가치를 제고시킨다.
• 쇼핑몰 등 구매와 연결된 경우에는 수
익 문제와 직결된다.
• 목적물의 신뢰성이 하락하고 나아가
브랜드 이미지의 추락과 연결된다.
실패한 IA
• 사용자는 불편함과 좌절감을 느껴 재
방문을 꺼리게 된다.
• 각인된 실패 경험은 결국 경쟁 사이
트를 찾게 한다.
• 쇼핑몰 등 구매와 연결된 경우에는
수익 문제와 직결된다.
• 목적물의 신뢰성이 하락하고 나아가
브랜드 이미지의 추락과 연결된다.
정보 설계(IA), 왜 중요한가
출처 : 다음 UX랩 <스토리로 이해하는 UX 디자인 프로세스>/ 2312
정보와 인간의 뇌
인류 역사 이래 생산된 정보의 양
저장 장치로 훌륭하지 않은 뇌
용량이 부족하다.
특정한 유형의 정보만 저장하도록 되어 있다.
저장 기간이 1세기도 되지 않는다.
어떻게 하면 정보를 체계적으로 분류할 수 있을까
빙하시대의 분류법
문서보관소
도서관
중세의 수도원 도서관
출처 : 유발 하라리 <사피엔스>, 알렉스 라이트 <분류의 역사>/ 2313
출처 : 영화 <인사이드 아웃>
정보와 인간의 뇌
/ 2314
출처 : 영화 <인사이드 아웃>
정보와 인간의 뇌
/ 2315
인류 역사 이래 생산된 정보의 양
저장 장치로 훌륭하지 않은 뇌
용량이 부족하다.
특정한 유형의 정보만 저장하도록 되어 있다.
저장 기간이 1세기도 되지 않는다.
어떻게 하면 정보를 체계적으로 분류할 수 있을까
빙하시대의 분류법
수메르인들의 문서보관소
그리스인의 도서관
중세의 수도원 도서관
정보와 인간의 뇌
출처 : 유발 하라리 <사피엔스>, 알렉스 라이트 <분류의 역사>/ 2316
예 : 2000년대 초 포털 서비스
/ 2317
정보 구조
내비게이션 시스템
레이블링 시스템
콘텐츠 구성
정보 설계(IA), 구성 요소
출처 : 다음 UX랩 <스토리로 이해하는 UX 디자인 프로세스>/ 2318
홈 핫 트렌드 베스트 아이템 실시간 이슈 My 환경설정
잇걸
지난 호 보기 패션 지난 아이템 스포티걸 구매내역 로그인 설정
내가 본 상품 뷰티 과거 베스트 빈티지걸 장바구니 이용내역관리
탭 메뉴 헤어 MD 추천 럭셔리걸 찜리스트 어플정보
도시 브랜드별 추천 러블리걸 위시리스트
스타 내가 본 상품
개인정보관리
기능 리스트
메뉴 트리
팀의 정보 설계(IA)는?
/ 2319
1. 모바일 기능 리스트를 Excel 템플릿에 맞춰 상세하게 리스트업한다.
2. 세부 기능을 먼저 리스트업 한 후,
각 항목의 상세 기능을 하나하나 작성한다.
3. 세부 - 상세 기능을 기능 단위(큰 단위)로 묶는다.
4.전체 항목을 리스트를 중요도 순으로 정렬한다.
5. 기능 리스트가 완성되면 메뉴 트리를 설계한다.
-> 메뉴 트리까지 다음 주 수업 전까지 완료
준수사항
/ 2320
정보 설계란
팀 과제 진행
Adobe XD 레슨
/ 2321
정보 설계란
팀 과제 진행
Adobe XD 레슨
/ 2322
끝.
다음 주 과제 : 기능 리스트 & 메뉴 트리 작성(Excel).
XD lesson 복습
kwonjeongeun@naver.com

/ 2323

More Related Content

What's hot

What's hot (20)

[Seminar]1st.lecture.designers.job.in.industry.4.0 20210615
[Seminar]1st.lecture.designers.job.in.industry.4.0 20210615[Seminar]1st.lecture.designers.job.in.industry.4.0 20210615
[Seminar]1st.lecture.designers.job.in.industry.4.0 20210615
 
4th.lecture.interface.design.process
4th.lecture.interface.design.process4th.lecture.interface.design.process
4th.lecture.interface.design.process
 
11th.lecture.about. usability.2.20181130
11th.lecture.about. usability.2.2018113011th.lecture.about. usability.2.20181130
11th.lecture.about. usability.2.20181130
 
[Seminar]2nd.lecture.uxui.consulting.20210713
[Seminar]2nd.lecture.uxui.consulting.20210713[Seminar]2nd.lecture.uxui.consulting.20210713
[Seminar]2nd.lecture.uxui.consulting.20210713
 
2nd.lecture.who.are.we
2nd.lecture.who.are.we2nd.lecture.who.are.we
2nd.lecture.who.are.we
 
3rd.lecture.why.user.experience
3rd.lecture.why.user.experience3rd.lecture.why.user.experience
3rd.lecture.why.user.experience
 
3rd.lecture.why.user.experience
3rd.lecture.why.user.experience3rd.lecture.why.user.experience
3rd.lecture.why.user.experience
 
14th.lecture.the.critical.view.about.ux.20180608
14th.lecture.the.critical.view.about.ux.2018060814th.lecture.the.critical.view.about.ux.20180608
14th.lecture.the.critical.view.about.ux.20180608
 
14th.lecture.about.usability
14th.lecture.about.usability14th.lecture.about.usability
14th.lecture.about.usability
 
Research method
Research methodResearch method
Research method
 
2nd.lecture.who.i.am.as.a.designer
2nd.lecture.who.i.am.as.a.designer2nd.lecture.who.i.am.as.a.designer
2nd.lecture.who.i.am.as.a.designer
 
3rd.Lecture.Why.User.Experience.20180323
3rd.Lecture.Why.User.Experience.201803233rd.Lecture.Why.User.Experience.20180323
3rd.Lecture.Why.User.Experience.20180323
 
[Seminar]3rd.lecture.uxui.proposal.20210727
[Seminar]3rd.lecture.uxui.proposal.20210727[Seminar]3rd.lecture.uxui.proposal.20210727
[Seminar]3rd.lecture.uxui.proposal.20210727
 
1st.lecture.introduction h
1st.lecture.introduction   h 1st.lecture.introduction   h
1st.lecture.introduction h
 
13th.lecture.step4.ideation 2
13th.lecture.step4.ideation 213th.lecture.step4.ideation 2
13th.lecture.step4.ideation 2
 
10th.lecture.step4.ideation 20190510
10th.lecture.step4.ideation 2019051010th.lecture.step4.ideation 20190510
10th.lecture.step4.ideation 20190510
 
1st.lecture.introduction
1st.lecture.introduction1st.lecture.introduction
1st.lecture.introduction
 
[Seminar]why.uxui.design.in.industry.4.0
[Seminar]why.uxui.design.in.industry.4.0[Seminar]why.uxui.design.in.industry.4.0
[Seminar]why.uxui.design.in.industry.4.0
 
9th.lecture.step3.analysis
9th.lecture.step3.analysis9th.lecture.step3.analysis
9th.lecture.step3.analysis
 
11th.lecture.step4.ideation
11th.lecture.step4.ideation11th.lecture.step4.ideation
11th.lecture.step4.ideation
 

Similar to 6th.lecture.what.is.information.architecture

Similar to 6th.lecture.what.is.information.architecture (6)

4th.Lecture.Service.Design.Process.pdf
4th.Lecture.Service.Design.Process.pdf4th.Lecture.Service.Design.Process.pdf
4th.Lecture.Service.Design.Process.pdf
 
4th.Lecture.Service.Design.Process.pdf
4th.Lecture.Service.Design.Process.pdf4th.Lecture.Service.Design.Process.pdf
4th.Lecture.Service.Design.Process.pdf
 
5th.Lecture.What.is.Information.Architecture.pdf
5th.Lecture.What.is.Information.Architecture.pdf5th.Lecture.What.is.Information.Architecture.pdf
5th.Lecture.What.is.Information.Architecture.pdf
 
“No powers, man!” : A Student Perspective on Designing University Smart Buil...
“No powers, man!”  : A Student Perspective on Designing University Smart Buil...“No powers, man!”  : A Student Perspective on Designing University Smart Buil...
“No powers, man!” : A Student Perspective on Designing University Smart Buil...
 
라이트브레인 UX/UI Trend 2022
라이트브레인 UX/UI Trend 2022라이트브레인 UX/UI Trend 2022
라이트브레인 UX/UI Trend 2022
 
5th.Lecture.What.is.Information.Architecture.pdf
5th.Lecture.What.is.Information.Architecture.pdf5th.Lecture.What.is.Information.Architecture.pdf
5th.Lecture.What.is.Information.Architecture.pdf
 

More from Jeongeun Kwon

More from Jeongeun Kwon (20)

DesignThinking_9th.Lecture.Understanding.Design.Thinking.pdf 자료
DesignThinking_9th.Lecture.Understanding.Design.Thinking.pdf 자료DesignThinking_9th.Lecture.Understanding.Design.Thinking.pdf 자료
DesignThinking_9th.Lecture.Understanding.Design.Thinking.pdf 자료
 
DT_7th.Lecture.Design.for.5000.KWN.Workshop.pdf
DT_7th.Lecture.Design.for.5000.KWN.Workshop.pdfDT_7th.Lecture.Design.for.5000.KWN.Workshop.pdf
DT_7th.Lecture.Design.for.5000.KWN.Workshop.pdf
 
DesignThinking_6th.Lecture.Shape.Mix.Workshop.Part.2.pdf 자료
DesignThinking_6th.Lecture.Shape.Mix.Workshop.Part.2.pdf 자료DesignThinking_6th.Lecture.Shape.Mix.Workshop.Part.2.pdf 자료
DesignThinking_6th.Lecture.Shape.Mix.Workshop.Part.2.pdf 자료
 
DesignThinking_5th.Lecture.Shape.Mix.Workshop.Part.1.pdf 자료
DesignThinking_5th.Lecture.Shape.Mix.Workshop.Part.1.pdf 자료DesignThinking_5th.Lecture.Shape.Mix.Workshop.Part.1.pdf 자료
DesignThinking_5th.Lecture.Shape.Mix.Workshop.Part.1.pdf 자료
 
DesignThinking_4th.Lecture.Scale.Mix.Workshop.pdf 자료
DesignThinking_4th.Lecture.Scale.Mix.Workshop.pdf 자료DesignThinking_4th.Lecture.Scale.Mix.Workshop.pdf 자료
DesignThinking_4th.Lecture.Scale.Mix.Workshop.pdf 자료
 
DesignThinking_3rd.Lecture.Context.Mix.Workshop.pdf 자료
DesignThinking_3rd.Lecture.Context.Mix.Workshop.pdf 자료DesignThinking_3rd.Lecture.Context.Mix.Workshop.pdf 자료
DesignThinking_3rd.Lecture.Context.Mix.Workshop.pdf 자료
 
DesignThinking_2nd.Lecture.Warm-Up.pdf 자료
DesignThinking_2nd.Lecture.Warm-Up.pdf 자료DesignThinking_2nd.Lecture.Warm-Up.pdf 자료
DesignThinking_2nd.Lecture.Warm-Up.pdf 자료
 
DesignThinking_1st.Lecture.Introduction.pdf 자료
DesignThinking_1st.Lecture.Introduction.pdf 자료DesignThinking_1st.Lecture.Introduction.pdf 자료
DesignThinking_1st.Lecture.Introduction.pdf 자료
 
14th.Lecture.Final.Assignment.Guideline.pdf
14th.Lecture.Final.Assignment.Guideline.pdf14th.Lecture.Final.Assignment.Guideline.pdf
14th.Lecture.Final.Assignment.Guideline.pdf
 
13th.Lecture.Prototyping.and.Usability.Test.pdf
13th.Lecture.Prototyping.and.Usability.Test.pdf13th.Lecture.Prototyping.and.Usability.Test.pdf
13th.Lecture.Prototyping.and.Usability.Test.pdf
 
7th.Lecture.UI.Design.and.Middle.Team.Assignment.Guideline.pdf
7th.Lecture.UI.Design.and.Middle.Team.Assignment.Guideline.pdf7th.Lecture.UI.Design.and.Middle.Team.Assignment.Guideline.pdf
7th.Lecture.UI.Design.and.Middle.Team.Assignment.Guideline.pdf
 
6th.Lecture.Personal.Assignment.Guideline.pdf
6th.Lecture.Personal.Assignment.Guideline.pdf6th.Lecture.Personal.Assignment.Guideline.pdf
6th.Lecture.Personal.Assignment.Guideline.pdf
 
3rd.Lecture.What.is.Interaction.pdf
3rd.Lecture.What.is.Interaction.pdf3rd.Lecture.What.is.Interaction.pdf
3rd.Lecture.What.is.Interaction.pdf
 
2nd.Lecture.What.is.Interface.pdf
2nd.Lecture.What.is.Interface.pdf2nd.Lecture.What.is.Interface.pdf
2nd.Lecture.What.is.Interface.pdf
 
1st.Lecture.Introduction.pdf
1st.Lecture.Introduction.pdf1st.Lecture.Introduction.pdf
1st.Lecture.Introduction.pdf
 
14th.Lecture.Final.PT.Guideline.pdf
14th.Lecture.Final.PT.Guideline.pdf14th.Lecture.Final.PT.Guideline.pdf
14th.Lecture.Final.PT.Guideline.pdf
 
12th.Lecture.Step3.AnalysisUX.Modeling_2_JourneyMap.pdf
12th.Lecture.Step3.AnalysisUX.Modeling_2_JourneyMap.pdf12th.Lecture.Step3.AnalysisUX.Modeling_2_JourneyMap.pdf
12th.Lecture.Step3.AnalysisUX.Modeling_2_JourneyMap.pdf
 
11th.Lecture.Step3.AnalysisUX.Modeling_1_Persona.pdf
11th.Lecture.Step3.AnalysisUX.Modeling_1_Persona.pdf11th.Lecture.Step3.AnalysisUX.Modeling_1_Persona.pdf
11th.Lecture.Step3.AnalysisUX.Modeling_1_Persona.pdf
 
8th.Lecture.Step3.Analysis.pdf
8th.Lecture.Step3.Analysis.pdf8th.Lecture.Step3.Analysis.pdf
8th.Lecture.Step3.Analysis.pdf
 
7th.Lecture.Step2.Observation.pdf
7th.Lecture.Step2.Observation.pdf7th.Lecture.Step2.Observation.pdf
7th.Lecture.Step2.Observation.pdf
 

6th.lecture.what.is.information.architecture

  • 1. KAYWON UNIVERSITY OF ART & DESIGN INDUSTRIAL DESIGN LAB USER EXPERIENCE DESIGN 사용자경험디자인2 kwonjeongeun@naver.com 6강 정보 설계의 이해 / 231
  • 2. 메뉴 트리기능 리스트주요 특징서비스 컨셉 UI 디자인 정보 설계 단계서비스 정의 단계 / 232
  • 4. 정보 설계란 팀 과제 진행 Adobe XD 레슨 / 234
  • 5. ‘정보 설계’ 라… 어디서부터 시작? ? / 235
  • 6. ‘정보 설계’ 라… 어디서부터 시작? “무언가를 디자인해야 할 때, 그(아킬레 카스틸리오니)는 가장 먼저 사전을 펼치고, 디자인해야 하는 물건 이름의 정의를 찾아보았다. 오브제의 일반적인 개념을 확인하는 것으로 디자인을 시작했다.” - 이코 밀리오레 & 마라 세르베토 인터뷰 중 / 236
  • 7. ‘정보 설계’ 라… 어디서부터 시작? IA Information Architecture 건축/건출물/설계 Architect 건축가 AI Artificial Intelligence Adobe Illustrator / 237
  • 8. 사용자 경험 디자인 - 정보 설계? / 238 정보 설계 이즈 베리 임폴턴트 / 238
  • 9. 인터넷 기반 지식 플랫폼 TED의 창시자 집을 짓는 건축가(Architect) 현재, 정보를 건축하는 크리에이터 왜, 정보 설계(IA)? 리처드 사울 워먼 / 239
  • 10. 정보 관점 -> 사용자 경험 디자인 정보 - 궁금증, 알고 싶다? 이해 - 사람 정보 - 이해에 대한 이야기 이해, 어떻게 시킬건데? 더 논리적 만들어 -> 더 이해하기 쉬어 -> 직관적인 시스템 구축 접근성 accessibility 효율성 efficiency 정보 설계(IA)란? 리처드 사울 워먼 / 2310
  • 11. 홈 핫 트렌드 베스트 아이템 실시간 이슈 My 환경설정 잇걸 지난 호 보기 패션 지난 아이템 스포티걸 구매내역 로그인 설정 내가 본 상품 뷰티 과거 베스트 빈티지걸 장바구니 이용내역관리 탭 메뉴 헤어 MD 추천 럭셔리걸 찜리스트 어플정보 도시 브랜드별 추천 러블리걸 위시리스트 스타 내가 본 상품 개인정보관리 예 : 잇걸 메뉴 트리 출처 : 다음 UX랩 <스토리로 이해하는 UX 디자인 프로세스> 中 잇걸 서비스/ 2311
  • 12. 성공한 IA • 신속하게 원하는 정보를 찾을 수 있어 서 사용자의 시간과 비용이 절약된다. • 좋은 IA로부터 나온 사용자 경험은 브 랜드 가치를 제고시킨다. • 쇼핑몰 등 구매와 연결된 경우에는 수 익 문제와 직결된다. • 목적물의 신뢰성이 하락하고 나아가 브랜드 이미지의 추락과 연결된다. 실패한 IA • 사용자는 불편함과 좌절감을 느껴 재 방문을 꺼리게 된다. • 각인된 실패 경험은 결국 경쟁 사이 트를 찾게 한다. • 쇼핑몰 등 구매와 연결된 경우에는 수익 문제와 직결된다. • 목적물의 신뢰성이 하락하고 나아가 브랜드 이미지의 추락과 연결된다. 정보 설계(IA), 왜 중요한가 출처 : 다음 UX랩 <스토리로 이해하는 UX 디자인 프로세스>/ 2312
  • 13. 정보와 인간의 뇌 인류 역사 이래 생산된 정보의 양 저장 장치로 훌륭하지 않은 뇌 용량이 부족하다. 특정한 유형의 정보만 저장하도록 되어 있다. 저장 기간이 1세기도 되지 않는다. 어떻게 하면 정보를 체계적으로 분류할 수 있을까 빙하시대의 분류법 문서보관소 도서관 중세의 수도원 도서관 출처 : 유발 하라리 <사피엔스>, 알렉스 라이트 <분류의 역사>/ 2313
  • 14. 출처 : 영화 <인사이드 아웃> 정보와 인간의 뇌 / 2314
  • 15. 출처 : 영화 <인사이드 아웃> 정보와 인간의 뇌 / 2315
  • 16. 인류 역사 이래 생산된 정보의 양 저장 장치로 훌륭하지 않은 뇌 용량이 부족하다. 특정한 유형의 정보만 저장하도록 되어 있다. 저장 기간이 1세기도 되지 않는다. 어떻게 하면 정보를 체계적으로 분류할 수 있을까 빙하시대의 분류법 수메르인들의 문서보관소 그리스인의 도서관 중세의 수도원 도서관 정보와 인간의 뇌 출처 : 유발 하라리 <사피엔스>, 알렉스 라이트 <분류의 역사>/ 2316
  • 17. 예 : 2000년대 초 포털 서비스 / 2317
  • 18. 정보 구조 내비게이션 시스템 레이블링 시스템 콘텐츠 구성 정보 설계(IA), 구성 요소 출처 : 다음 UX랩 <스토리로 이해하는 UX 디자인 프로세스>/ 2318
  • 19. 홈 핫 트렌드 베스트 아이템 실시간 이슈 My 환경설정 잇걸 지난 호 보기 패션 지난 아이템 스포티걸 구매내역 로그인 설정 내가 본 상품 뷰티 과거 베스트 빈티지걸 장바구니 이용내역관리 탭 메뉴 헤어 MD 추천 럭셔리걸 찜리스트 어플정보 도시 브랜드별 추천 러블리걸 위시리스트 스타 내가 본 상품 개인정보관리 기능 리스트 메뉴 트리 팀의 정보 설계(IA)는? / 2319
  • 20. 1. 모바일 기능 리스트를 Excel 템플릿에 맞춰 상세하게 리스트업한다. 2. 세부 기능을 먼저 리스트업 한 후, 각 항목의 상세 기능을 하나하나 작성한다. 3. 세부 - 상세 기능을 기능 단위(큰 단위)로 묶는다. 4.전체 항목을 리스트를 중요도 순으로 정렬한다. 5. 기능 리스트가 완성되면 메뉴 트리를 설계한다. -> 메뉴 트리까지 다음 주 수업 전까지 완료 준수사항 / 2320
  • 21. 정보 설계란 팀 과제 진행 Adobe XD 레슨 / 2321
  • 22. 정보 설계란 팀 과제 진행 Adobe XD 레슨 / 2322
  • 23. 끝. 다음 주 과제 : 기능 리스트 & 메뉴 트리 작성(Excel). XD lesson 복습 kwonjeongeun@naver.com / 2323