인간-컴퓨터 상호작용

상호작용 디자인

강원대학교 컴퓨터공학과 최우혁

강의 순서

• 상호작용 디자인 원칙
• 상호작용 디자인 과정

2

상호작용 디자인 원칙

3

좋은 디자인의 중요성

상호작용 디자인 원칙

• (Revisit) 하와이의 탄도 미사일 위협 안내 오발송

4

좋은 디자인의 중요성

상호작용 디자인 원칙

• “The results show that in today's applications, an average of 48% of the code is devoted to the user interface portion. The average time spent on the user interface portion is 45% during the design phase, 50% during the implementation phase, and 37% during the maintenance phase.” [Myers & Rosson, CHI ‘92]

5

좋은 디자인의 중요성

상호작용 디자인 원칙

• American Airlines Flight 965
• 조종사가 TULUA 경유지(비콘)에서 관제탑과 교신하는 것을 잊어버림
• 조종사는 다음 경유지인 ROZO로 향하기 위하여 R버튼을 입력
• 조종 소프트웨어는 R로 시작하는 경유지를 ROMEO로 입력
• 조종사는 ROZO로 입력되었다고 생각함
• 비행 유도 시스템은 저고도에서 급격히 ROMEO 경유지로 이동
• 9초 후, 산과 충돌해서 159명 사망, 4명 생존

6

좋은 디자인의 중요성

상호작용 디자인 원칙

• American Airlines Flight 965: 누구의 잘못인가?
• 조종사
• 비행 유도 시스템
• 조종 소프트웨어
• American Airlines

7

좋은 디자인의 중요성

상호작용 디자인 원칙

• American Airlines Flight 965: 누구의 잘못인가?
• 조종사: 0%
• 비행 유도 시스템: 17%
• 조종 소프트웨어: 8%
• American Airlines: 75%

8

좋은 디자인의 중요성

상호작용 디자인 원칙

9

인지과학자 및 사용성 공학자

노스웨스턴대학교 명예 교수, UC San Diego 명예 교수, KAIST 산업디자인학과 자문위원회, (전) 애플 부사장

사용자 경험(User Experience) 용어의 창시자

2023년 12월 27일 기준 논문 인용수 146,665회

“Human error?

No, bad design.”

[Don Norman]

사용성Usability

상호작용 디자인 원칙

• “A central concern of interaction designs is to develop interactive products that are USABLE, which means products are easy to learn, effective to use, provide an enjoyable experience for the intended people.” [Yvonne Rogers, Interaction Design]
• “The extent to which a product can be used by specified users to achieve specific goals with effectiveness, efficiency, and satisfaction in a specified context of use.” [ISO]

10

사용성 목표Usability Goals

상호작용 디자인 원칙

• Effectiveness
• Utility
• Efficiency
• Learnability
• Safety/Errors
• Memorability
• Satisfaction

11

Jakob Nielsen’s

Usability Goals

웹 사용성 컨설턴트, 인간-컴퓨터 상호작용 연구자

Nielsen Norman Group 공동창립자

“Guru of Web page usability” and “King of usability”

사용성 목표Usability Goals

상호작용 디자인 원칙

• Effectiveness: 시스템이 의도한 과업을 사용자가 잘 수행할 수 있는지?
• 예. 온라인 마켓에서 특정 상품을 사용자가 살 수 있는지?
• 새로운 서비스/시스템/응용프로그램의 가장 기본적인 개발 목표

12

사용성 목표Usability Goals

상호작용 디자인 원칙

• Utility: 시스템이 사용자가 필요한 기능을 적절하게 제공하는지?
• 예. 온라인 마켓에서 특정 상품에 대한 정보를 사용자가 확인할 수 있는지?
• 최초 설계 단계에서부터 사용자가 필요한 기능을 찾고 서비스 내에 구현해야 하므로, 이 또한 가장 기본적인 목표

13

사용성 목표Usability Goals

상호작용 디자인 원칙

• Efficiency: 사용자가 시스템에 의해 의도된 과업을 얼마나 효율적으로 수행할 수 있는지?
• 예. 온라인 마켓에서 특정 상품을 구매하는 데 필요한 입력 횟수는 몇 회인지?
• 예. 스마트TV의 유투브 앱에 로그인하기 위해 계정 정보를 입력하는 데 얼마나 걸리는지?

14

사용성 목표Usability Goals

상호작용 디자인 원칙

• Learnability: 사용자가 시스템의 사용법을 얼마나 쉽게 배울 수 있는지?
• 예. 온라인 마켓에서 특정 상품을 구매하기 위한 방법을 얼마나 쉽게(빨리) 배우는지?
• 사용자는 별다른 노력없이(예. 안내 문서 숙지 등) 금방 기본적인 기능 사용에 익숙해지기를 원함

15

사용성 목표Usability Goals

상호작용 디자인 원칙

• Safety/Errors: 시스템이 위험하거나 의도하지 않은 상황으로부터 사용자를 보호할 수 있는지?
• 예. 온라인 마켓에서 사용자가 배송지를 잘못 입력했을때 쉽게 확인 및 수정할 수 있도록 하는지?

16

사용성 목표Usability Goals

상호작용 디자인 원칙

• Memorability: 사용자가 시스템의 사용법을 (한번 배웠다면) 얼마나 쉽게 기억하거나 다시 떠올릴 수 있는지?
• 예. 온라인 마켓에서 특정 카테고리에 속하는 물건을 얼마나 빨리 찾을 수 있는가?
• 비슷한 물품들을 한 곳에 위치시킴으로써 다시 떠올리는 것을 도와줌
• 사용자는 시스템 사용을 위해 사용법을 재학습하길 원하지 않음

17

사용성 목표Usability Goals

상호작용 디자인 원칙

• Satisfaction: 사용자가 시스템을 사용했을 때 얼마나 만족스러운지?
• 일반적으로 시스템에 대한 사용자의 만족도를 의미

18

사용성 휴리스틱Usability Heuristics

상호작용 디자인 원칙

• Visibility of system status
• Match between system and real world
• User control and freedom
• Consistency and standards
• Error prevention
• Recognition over recall
• Flexibility and efficiency of use
• Aesthetic and minimalist design
• Help users recognize, diagnose, and recover from errors
• Help and documentation

19

사용성 휴리스틱Usability Heuristics

상호작용 디자인 원칙

• Visibility of system status: 적절한 피드백을 통해 합리적인 시간 내에 시스템 상태를 항상 사용자에게 보여주어야 함

20

사용성 휴리스틱Usability Heuristics

상호작용 디자인 원칙

• Match between system and real world: 목표로 하는 사용자 계층이 사용하는 언어와 개념을 사용하고, 자연스럽고 논리적이며 현실 세계와 유사한 방식으로 정보를 제공해야 함

21

사용성 휴리스틱Usability Heuristics

상호작용 디자인 원칙

• User control and freedom: 사용자가 원치 않는 기능을 사용했을 때 복잡한 과정 없이 복귀할 수 있어야 함

22

사용성 휴리스틱Usability Heuristics

상호작용 디자인 원칙

• Consistency and standards: 서비스에서 활용되는 단어, 레이아웃, 기능 등은 항상 일관적이어야 함

​

23

사용성 휴리스틱Usability Heuristics

상호작용 디자인 원칙

• Error prevention: 오류가 발생할 수 있는 상황을 막거나, 오류가 발생할 수 있는 기능에 대해서는 사용자의 사전 확인이 가능하도록 해야 함

​

24

사용성 휴리스틱Usability Heuristics

상호작용 디자인 원칙

• Recognition over recall: 시스템 사용을 위한 정보를 사용자가 기억하게 하지말고, 자연스럽게 인터페이스 내에서 알아차릴 수 있도록 해야함

25

사용성 휴리스틱Usability Heuristics

상호작용 디자인 원칙

• Flexibility and efficiency of use: 단축키와 개인화를 통해 사용자 선호 및 숙련도 수준별로 효율적인 시스템 사용을 지원해야 함

26

사용성 휴리스틱Usability Heuristics

상호작용 디자인 원칙

• Aesthetic and minimalist design: 상관이 없거나 거의 필요하지 않는 정보를 제공하지 않아야 함

27

사용성 휴리스틱Usability Heuristics

상호작용 디자인 원칙

• Help users recognize, diagnose, and recover from errors: 오류 메시지는 사용자가 이해할 수 있고 명료하며 해결책을 제시해야 함

28

사용성 휴리스틱Usability Heuristics

상호작용 디자인 원칙

• Help and documentation: 도움말 및 관련 문서를 쉽게 찾을 수 있도록 할 것

29

상호작용 디자인 과정

30

전통적 서비스 디자인: 폭포수 모델Waterfall Model

상호작용 디자인 과정

Getting the Design Right

31

Preece의 상호작용 디자인

상호작용 디자인 과정

Getting the Right Design

32

사용자 중심적 디자인User-centered Design

상호작용 디자인 과정

“Get out of the building.”

Steve Blank, 린 스타트업 운동의 창시자

“If I had asked people what they wanted,

they would have said faster horses.”

Henry Ford, 포드 자동차의 창립자

“It is not your customer’s job to know what they want.”

Steve Jobs, 전 애플 CEO

33

디자인 과정: Laseau의 Elaboration and Reduction

상호작용 디자인 과정

• Elaboration: 많은 해결책을 생성
• Reduction: 발전시킬만한 가치가 있는 해결책을 선택
• Repeat: Elaboration과 Reduction을 계속 반복

34

Paul Laseau

건축가, 디자이너

Freehand Sketching and Design Drawing 교육의 대가

디자인 과정: Buxton의 디자인 깔대기Design Funnel

상호작용 디자인 과정

35

디자인 과정: 반복적 디자인 과정Iterative Design Process

상호작용 디자인 과정

36

디자인 과정: 반복적 디자인 과정Iterative Design Process

상호작용 디자인 과정

• Step 1 - Needfinding: “What to Design?”
• 목적: 사용자와 사용자의 니즈를 이해/발견하는 것
• 예. 사용자 또는 이해당사자가 누구인지? 어디에서 무슨 일과 행동을 하는지?
• 방법론: 관찰, 인터뷰, 설문
• 핵심 질문: 발견한 니즈가 정말 사용자의 니즈가 맞는지?

37

디자인 과정: 반복적 디자인 과정Iterative Design Process

상호작용 디자인 과정

• Step 2 - Ideation and Sketching: “How to Solve?”
• 목적: (주어진 제약사항 내에서) 발견한 니즈를 해결하기 위한 해결책을 생성
• 방법론: 스토리보딩, 저수준 프로토타이핑
• 핵심 질문: 생성한 해결책이 정말 니즈를 해결할 수 있는지?

38

디자인 과정: 반복적 디자인 과정Iterative Design Process

상호작용 디자인 과정

• Step 3 - Prototyping and Evaluation
• 목적: 생성한 해결책을 구현하고 검증
• 방법론
• Prototyping: Paper → Computer/Digital → Fully working
• Evaluation: Heuristic evaluation, user testing
• 핵심 질문: 구현한 프로토타입이 해결책을 제대로 반영했는지?

39

디자인 과정: 반복적 디자인 과정Iterative Design Process

상호작용 디자인 과정

• Step 4 - Design Crits
• 목적: 아이디어/해결책/프로토타입의 발전을 위해 발표 및 피드백 반영

​

40

다음 시간에…

• Need Finding

41