사용성을 점검한다.

1. KAYWON UNIVERSITY OF ART & DESIGN
INDUSTRIAL DESIGN LAB
USER EXPERIENCE
DESIGN
사용자경험디자인2
kwonjeongeun@naver.com
14강 사용성에 대해
/ 321

2. 사용성
/ 322
사용 가능한 - Use ->Usable
사용성 - Usability
사용성 테스트 - Usability Test(UT)

3. 정보 설계
(IA)
인터랙션
디자인
인터페이스
디자인
…
사용성 도미노
/ 323

4. 복습
인터랙션, 어떻게 만들 것인가
인터페이스, 어떻게 만들 것인가
팀 과제 미팅/개인 기말 과제 진행
인사
/ 324

5. 2개의 시스템이 만나서? 소통
인 터 랙 션
문화 용어 : 소통 = 커뮤니케이션
공학 용어 : 상호 작용 = 인터랙션
/ 325
시스템 시스템소통

6. 인터랙션 디자인이란?
인 터 랙 션
시스템과 시스템 간의 상호작용을 설계하는 일
/ 326
시스템 시스템소통

7. 사용자 조작
목적물의 반응
환경 Context
출처 : 다음 UX랩 <스토리로 이해하는 UX 디자인 프로세스>
인터랙션 디자인, 3가지 구성 요소
/ 327

8. 좋은 를 확보한다.
(Affordance 또는 Feed-Forward)
사용자 시스템
어 포 던 스
사용자의 조작/입력, Input Interaction
인터랙션 디자인
/ 328
Click
Flick
Drag
Text

9. Affordance, 행동 유도성
인터랙션 디자인
이용하거나 조작하면
어떤 결과가 일어날지
쉽고 명확하게
누구나 알 수 있는 것을 말한다.
/ 329

10. Affordance, 행동 유도성
인터랙션 디자인
/ 3210

11. Affordance, 행동 유도성
인터랙션 디자인
/ 2711/ 3211

12. 목적물의 반응, Output Interaction
인터랙션 디자인
/ 3212
적절한 백 (Feed-Back)
사용자 시스템
Click
Flick
Drag
Text
시각
음성
음향
진동
피 드 백
조작의 확신/에러/실수에 대해 명확한 판단을 하게 한다.

13. 목적물의 반응, Output Interaction
인터랙션 디자인
/ 3213
시각 : ‘이동했다’ Snackbar 안내
음향 : - ‘파삭’ 소리
실수 방지 : [Undo(복원)] 버튼

14. 환경, Context
인터랙션 디자인
/ 3214
사용자 시스템
시간 공간
가정집 화장실 스위치
공장 절삭 장치 스위치
즉각
지연
끊김

15. 환경, Context
인터랙션 디자인
/ 3215
지연

16. 환경, Context
인터랙션 디자인
/ 3216
끊김

17. 복습
인터랙션, 어떻게 만들 것인가
인터페이스, 어떻게 만들 것인가
팀 과제 미팅/개인 기말 과제 진행
인사
/ 3217

18. 인터페이스란?
/ 3218
사람 시스템커뮤니케이션
소통이 일어나는 장소 & 방법

19. / 3219
사람 시스템커뮤니케이션
시스템과 시스템 간의 접점을 표현하는 일
인터페이스 디자인이란?

20. / 3220
사용자
완벽한
AI 서비스
인터페이스 디자인, 왜 중요한가?

21. 인터페이스 디자인, 왜 중요한가?
사용자는 시각.
인터페이스를 통해 서비스의 가치를 판단한다.
/ 3221
사용자
완벽한
AI 서비스

22. / 3222
인터페이스 디자인, 구성 요소
레이아웃
색상
타이포그라피
그래픽
출처 : 다음 UX랩 <스토리로 이해하는 UX 디자인 프로세스>

23. / 3223
한정된 공간 내 배치, 레이아웃
인터페이스 디자인
영역 정의
영역별 콘텐츠와 컨트롤* 위치
콘텐츠 사용 빈도, 우선 순서
콘텐츠 양

24. 정보의 성격, 색상
인터페이스 디자인
정보별 성격/의미 부여
3~5가지 이상 쓰지 않기
예 : 검은색, 빨간색, 초록색, ...
빨간색 - 중요, 에러, 삭제 확인
/ 3224

25. 문자적 요소, 타이포그래피
인터페이스 디자인
서체
크기
자간, 행간
/ 3225

26. 비문자적 요소, 그래픽
인터페이스 디자인
이미지
다이어그램
그래프
테이블
선
아이콘(메타포, Metaphor)
예 : 설정
/ 3226

27. 복습
인터랙션, 어떻게 만들 것인가
인터페이스, 어떻게 만들 것인가
팀 과제 미팅/개인 기말 과제 진행
인사
/ 3227

28. 개인 기말 과제 제출 준수사항
/ 3228
1. 팀 XD 파일을 개인이 받습니다.
2. 주요 화면과 나머지 화면에 대해 GUI 디자인을 적용합니다.
3. 오늘 내용을 반영해 사용성을 보완합니다.
4. 개인 과제 제출 기한은 12/11(금) 오후 6시,
kwonjeongeun@naver.com 메일에 제출.
파일명 : [1조]권정은_개인기말과제_20201211(제출날짜).xd
+ 팀원크로스평가.doc <기말편> 함께 제출.

29. GUI 디자인, 프로토타이핑 제작 준수사항
Point 1. 팀 파일을 개인이 완성해서 제출한다. (개인 과제)
Point 2. 컬러, 아이콘, 이미지 적용 허용
Point 3. 왼쪽 패널 : 색상, 문자 스타일, 구성 요소를 정리할 것.
✦ 최소한으로 운영한다.
패널 내 요소 위 > 마우스 우 클릭 > ‘캔버스에서 강조 표시’ 메뉴 이용
Point 4. Menu tree 기준으로 아트보드 명칭, 구조 정렬할 것.
다음 화면 참조
Point 5. 프로토타이핑 - 트랜지션 설정할 것.
‘프로토타이핑’ 탭 상태에서 [▶] 버튼 or Ctrl + A 이용
/ 3229

30. / 1030
GUI 디자인, 프로토타이핑 제작 준수사항
아트보드명 = Menu Tree 기준. 메뉴명으로 작성
/ 3230

31. Adobe 공식 블로그에서
최신 업데이트 확인
October 2020 release of Adobe XD(최신 업데이트)
페이스북 계정
Follow하기
Adobe XD 페이스북 공식 계정(미국)
Adobe XD User Group(한국)
Adobe XD, 계속 공부하고 싶다면
/ 3231
XD는 매달 업데이트 중…

32. 끝.
다음 주 과제 : 개인 기말 과제 XD 파일 + 팀원 크로스 평가 제
출.
kwonjeongeun@naver.com
/ 3232