SlideShare a Scribd company logo
2018 FALL KAYWON UNIVERSITY OF ART & DESIGN
INDUSTRIAL DESIGN LAB
USER EXPERIENCE
DESIGN
사용자경험디자인
kwonjeongeun@naver.com
11/23(금)
10강 어떻게 만들 것인가 : 사용성에 대해
인터랙션, 어떻게 만들 것인가
인터페이스, 어떻게 만들 것인가
팀 과제 진행
! / 242
! / 243
사용성 도미노
정보 구조 설계
(IA)
인터랙션
디자인
인터페이스
디자인
…
! / 244
IA, 무엇을 만드는 것인가
홈 메뉴 1 메뉴 2 메뉴 3 … …
서비스명
???
???
???
화면 단위로 표현할 메뉴를 결정한다.
! / 245
인터랙션과 인터페이스, 무엇을 만드는 것인가
실제 화면을 어떻게 설계하고
화면들 그리고 화면 내 요소들을
서로 유기적으로 어떻게 연결,
운용할 것인지 표현한다.
! / 246
인터랙션 디자인이란?
커뮤니케이션객체 객체
! / 247
사용자 조작
목적물의 반응
환경
인터랙션을 만들려면
! / 248
사용자의 조작/입력, Input Interaction
인터랙션을 만들려면
좋은 를 확보한다.어
(Affordance 또는 Feed-Forward)
포 던 스
사용자 서비스
Click
! / 249
Affordance, 행동 유도성
인터랙션을 만들려면
이용하거나 조작하면
어떤 결과가 일어날지
쉽고 명확하게 누구나 알 수 있는 것을 말한다.
Affordance, 행동 유도성
인터랙션을 만들려면
! / 2410
! / 2411
인터랙션을 만들려면
Affordance, 행동 유도성
적절한 피드백 (Feed-Back)
! / 2412
목적물의 반응, Output Interaction
인터랙션을 만들려면
사용자 서비스
Click
Flick
Drag
Text
시각
음성
음향
진동
피 드 백
조작의 확신/에러/실수에 대해 명확한 판단을 하게 한다.
! / 2413
환경, Context
인터랙션을 만들려면
사용자 서비스
시간 공간
가정집 화장실 스위치
공장 절삭 장치 스위치
즉각
지연
끊김
인터랙션, 어떻게 만들 것인가
인터페이스, 어떻게 만들 것인가
팀 과제 진행
! / 2414
인터페이스 디자인이란?
! / 2415
세계 세계
인터페이스
계면 (界⾯, 지경 계, 낯 면)
예 : 계면활성제의 원리
인터페이스, 왜 중요한가?
! / 2416
사용자
완벽한
AI 서비스
인터페이스, 왜 중요한가?
! / 2417
사용자
완벽한
AI 서비스
사용자는 시각.
인터페이스를 통해 서비스의 가치를 측정한다.
인터페이스를 만들려면
! / 2418
레이아웃
색상
타이포그라피
그래픽
한정된 공간 내 배치, 레이아웃
! / 2419
인터페이스를 만들려면
영역 정의
영역별 콘텐츠와 컨트롤* 위치
콘텐츠 양
콘텐츠 순서
정보의 성격, 색상
! / 2420
인터페이스를 만들려면
정보별 성격/의미 부여
3~5가지 이상 쓰지 않기
예 : 검은색, 빨간색, 초록색, ...
빨간색 - 중요, 에러, 삭제 확인
문자적 요소, 타이포그래피
! / 2421
인터페이스를 만들려면
서체
크기
자간, 행간
비문자적 요소, 그래픽
! / 2422
인터페이스를 만들려면
이미지
다이어그램
그래프
테이블
선
아이콘(메타포, Metaphor)
인터랙션, 어떻게 만들 것인가
인터페이스, 어떻게 만들 것인가
팀 과제 진행
! / 2423
끝.
kwonjeongeun@naver.com
/ 2424
다음 주 과제 : 주제, 페르소나, 컨셉, IA, 스케치 초안까지 준비
학기 중 일독하게 될 것이다.
마스다 무네야키 <지적자본론>
2018 FALL KAYWON UNIVERSITY OF ART & DESIGN
INDUSTRIAL DESIGN LAB
USER EXPERIENCE
DESIGN
사용자경험디자인
kwonjeongeun@naver.com
11/30(금)
11강 어떻게 측정할 것인가 : 사용성 테스트에 대해

More Related Content

PDF
4th.lecture.interface.design.process
PDF
3rd.lecture.what.is.interface 2
PDF
10th.lecture.gui.design
PDF
14th.lecture.about.usability
PDF
Blog 오래가는 ux 디자인
PDF
9th.lecture.about.usability 20191129
PDF
14th.lecture.the.critical.view.about.ux.20180608
PDF
6th.lecture.step4.ideation.20181005
4th.lecture.interface.design.process
3rd.lecture.what.is.interface 2
10th.lecture.gui.design
14th.lecture.about.usability
Blog 오래가는 ux 디자인
9th.lecture.about.usability 20191129
14th.lecture.the.critical.view.about.ux.20180608
6th.lecture.step4.ideation.20181005

What's hot (17)

PPTX
당신이 UX Design Project에 참여할 때 알아야 할 것들
PPTX
Da
PPTX
UX/UI Trends Seminar 2019
PPTX
UX디자인
PDF
2nd.lecture.what.is.interface
PDF
8th.lecture.about.good.user.uxperience.design.20181102
PDF
실무를위한모바일 UI UX step up
PDF
7th.lecture.4.components.of.information.architecture
PDF
[Seminar]3rd.lecture.uxui.proposal.20210727
PPTX
Bsw ui ux정의
PDF
사용자 중심의 소프트웨어 개발을 위한 UI/UX 참조모델 가이드
PDF
5th.lecture.what.is.information.architecture
PDF
3rd.lecture.why.user.experience
PDF
4th.lecture.service.design.process
PDF
7th.lecture.step5.prototyping.20181012
KEY
UX디자인 bookstudy
PPTX
Ui vs ux
당신이 UX Design Project에 참여할 때 알아야 할 것들
Da
UX/UI Trends Seminar 2019
UX디자인
2nd.lecture.what.is.interface
8th.lecture.about.good.user.uxperience.design.20181102
실무를위한모바일 UI UX step up
7th.lecture.4.components.of.information.architecture
[Seminar]3rd.lecture.uxui.proposal.20210727
Bsw ui ux정의
사용자 중심의 소프트웨어 개발을 위한 UI/UX 참조모델 가이드
5th.lecture.what.is.information.architecture
3rd.lecture.why.user.experience
4th.lecture.service.design.process
7th.lecture.step5.prototyping.20181012
UX디자인 bookstudy
Ui vs ux
Ad

Similar to 10th.lecture.about. usability.20181123 (20)

PDF
2nd.Lecture.What.is.Interface.pdf
PDF
2nd.lecture.what.is.interface
PDF
4th.Lecture.Service.Design.Process.pdf
PDF
3rd.Lecture.What.is.Interaction.pdf
PDF
4th.Lecture.Service.Design.Process.pdf
PDF
3rd.Lecture.What.is.Interaction.pdf
PDF
오래가는 Ux 디자인 파이널 1414905 이서현
PDF
2nd.Lecture.What.is.Interface.pdf
PDF
Elements of user experience
PDF
인터렉1주차 1310728 정선지
PDF
인터랙션 디자인 1310585 최하늘
PDF
강의 개요 및 교안 2013 4차수_font
PDF
3rd.Lecture.Why.User.Experience.pdf
PDF
책정리 _1312808 최고은
PDF
강의 개요 및 교안 2014 1차수_font
PDF
최영현 강의 개요 및 교안샘플 배포용_font
PDF
InterfaceDesign_6th.Lecture.InformationArchitecture_1.pdf 자료
PDF
3rd.lecture.what.is.interaction
PDF
3rd.lecture.why.user.experience
PDF
1st.lecture.introduction 20190830
2nd.Lecture.What.is.Interface.pdf
2nd.lecture.what.is.interface
4th.Lecture.Service.Design.Process.pdf
3rd.Lecture.What.is.Interaction.pdf
4th.Lecture.Service.Design.Process.pdf
3rd.Lecture.What.is.Interaction.pdf
오래가는 Ux 디자인 파이널 1414905 이서현
2nd.Lecture.What.is.Interface.pdf
Elements of user experience
인터렉1주차 1310728 정선지
인터랙션 디자인 1310585 최하늘
강의 개요 및 교안 2013 4차수_font
3rd.Lecture.Why.User.Experience.pdf
책정리 _1312808 최고은
강의 개요 및 교안 2014 1차수_font
최영현 강의 개요 및 교안샘플 배포용_font
InterfaceDesign_6th.Lecture.InformationArchitecture_1.pdf 자료
3rd.lecture.what.is.interaction
3rd.lecture.why.user.experience
1st.lecture.introduction 20190830
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_10th.lecture.Introduction.of.Final.Exam.pdf 자료
PDF
InterfaceDesign_8th.lecture.MidTerms.Guideline.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_10th.lecture.Introduction.of.Final.Exam.pdf 자료
InterfaceDesign_8th.lecture.MidTerms.Guideline.pdf 자료

10th.lecture.about. usability.20181123

  • 1. 2018 FALL KAYWON UNIVERSITY OF ART & DESIGN INDUSTRIAL DESIGN LAB USER EXPERIENCE DESIGN 사용자경험디자인 kwonjeongeun@naver.com 11/23(금) 10강 어떻게 만들 것인가 : 사용성에 대해
  • 2. 인터랙션, 어떻게 만들 것인가 인터페이스, 어떻게 만들 것인가 팀 과제 진행 ! / 242
  • 3. ! / 243 사용성 도미노 정보 구조 설계 (IA) 인터랙션 디자인 인터페이스 디자인 …
  • 4. ! / 244 IA, 무엇을 만드는 것인가 홈 메뉴 1 메뉴 2 메뉴 3 … … 서비스명 ??? ??? ??? 화면 단위로 표현할 메뉴를 결정한다.
  • 5. ! / 245 인터랙션과 인터페이스, 무엇을 만드는 것인가 실제 화면을 어떻게 설계하고 화면들 그리고 화면 내 요소들을 서로 유기적으로 어떻게 연결, 운용할 것인지 표현한다.
  • 6. ! / 246 인터랙션 디자인이란? 커뮤니케이션객체 객체
  • 7. ! / 247 사용자 조작 목적물의 반응 환경 인터랙션을 만들려면
  • 8. ! / 248 사용자의 조작/입력, Input Interaction 인터랙션을 만들려면 좋은 를 확보한다.어 (Affordance 또는 Feed-Forward) 포 던 스 사용자 서비스 Click
  • 9. ! / 249 Affordance, 행동 유도성 인터랙션을 만들려면 이용하거나 조작하면 어떤 결과가 일어날지 쉽고 명확하게 누구나 알 수 있는 것을 말한다.
  • 11. ! / 2411 인터랙션을 만들려면 Affordance, 행동 유도성
  • 12. 적절한 피드백 (Feed-Back) ! / 2412 목적물의 반응, Output Interaction 인터랙션을 만들려면 사용자 서비스 Click Flick Drag Text 시각 음성 음향 진동 피 드 백 조작의 확신/에러/실수에 대해 명확한 판단을 하게 한다.
  • 13. ! / 2413 환경, Context 인터랙션을 만들려면 사용자 서비스 시간 공간 가정집 화장실 스위치 공장 절삭 장치 스위치 즉각 지연 끊김
  • 14. 인터랙션, 어떻게 만들 것인가 인터페이스, 어떻게 만들 것인가 팀 과제 진행 ! / 2414
  • 15. 인터페이스 디자인이란? ! / 2415 세계 세계 인터페이스 계면 (界⾯, 지경 계, 낯 면) 예 : 계면활성제의 원리
  • 16. 인터페이스, 왜 중요한가? ! / 2416 사용자 완벽한 AI 서비스
  • 17. 인터페이스, 왜 중요한가? ! / 2417 사용자 완벽한 AI 서비스 사용자는 시각. 인터페이스를 통해 서비스의 가치를 측정한다.
  • 18. 인터페이스를 만들려면 ! / 2418 레이아웃 색상 타이포그라피 그래픽
  • 19. 한정된 공간 내 배치, 레이아웃 ! / 2419 인터페이스를 만들려면 영역 정의 영역별 콘텐츠와 컨트롤* 위치 콘텐츠 양 콘텐츠 순서
  • 20. 정보의 성격, 색상 ! / 2420 인터페이스를 만들려면 정보별 성격/의미 부여 3~5가지 이상 쓰지 않기 예 : 검은색, 빨간색, 초록색, ... 빨간색 - 중요, 에러, 삭제 확인
  • 21. 문자적 요소, 타이포그래피 ! / 2421 인터페이스를 만들려면 서체 크기 자간, 행간
  • 22. 비문자적 요소, 그래픽 ! / 2422 인터페이스를 만들려면 이미지 다이어그램 그래프 테이블 선 아이콘(메타포, Metaphor)
  • 23. 인터랙션, 어떻게 만들 것인가 인터페이스, 어떻게 만들 것인가 팀 과제 진행 ! / 2423
  • 24. 끝. kwonjeongeun@naver.com / 2424 다음 주 과제 : 주제, 페르소나, 컨셉, IA, 스케치 초안까지 준비 학기 중 일독하게 될 것이다. 마스다 무네야키 <지적자본론>
  • 25. 2018 FALL KAYWON UNIVERSITY OF ART & DESIGN INDUSTRIAL DESIGN LAB USER EXPERIENCE DESIGN 사용자경험디자인 kwonjeongeun@naver.com 11/30(금) 11강 어떻게 측정할 것인가 : 사용성 테스트에 대해