목차
2024학년도 1학기 충남대학교 김재정 교수님의 인간-컴퓨터 상호작용 수업 정리자료입니다.
사람들은 새로운 인터페이스를 어떻게 학습할까?
새로운 유저 인터페이스가 도입되었을때, 사람들은 강의를 수강하거나, 매뉴얼을 읽거나, 도움말을 읽으면서 배우지 않는다. 사람들은 직접 경험하면서 배운다. 사용자는 특정 목적을 이루기 위해 프로그램을 사용하고, 이 목표를 달성하는 특징들에 대한 인터페이스를 경험한다. 예를 들면 사진에서 방해물을 제거하고싶을 때, 포토샵 프로그램을 이용하고, '제거하기' 기능을 경험하는 것과 같다.
사용자는 그 이후 문제가 생기고 나서야 도움을 요청한다. 그렇다면 아예 프로그램을 시작할 때 튜토리얼, 설명, 데모 등을 이용해서 많은 도움을 주면 어떨까?
Lessons for Designers
- 디자인할 때 사용자의 목표를 파악해야한다.
- 사용자 인터페이스는 작동 방식과 사용방법을 전달할 수 있어야한다.
- 도움말은 검색이 가능해야하고, 목표 지향적이야한다.
Learning by Watching
보이지 않는 UI는 보면서 배울 수 있다.
직접 하면서 배우는 시간을 단축시킬 수 있다.
온라인 혹은 오프라인으로, 유튜브, 소셜미디어 등에서 볼 수 있다.
Recognition VS Recall
- Recognition(인식) : 시각적 단서의 도움으로 기억하는 것. 눈으로 볼 수 있는 세상의 지식을 사용한다.
- Recall(호출) : 도움 없이 기억하는 것. 머리 속 지식을 사용한다.
예를 들면 로그인 화면에서 옛날에 입력했던 아이디를 드롭다운 박스에서 확인하고 이를 이용해서 로그인하는것은 Recognition, 이러한 힌트 없이 그냥 로그인하는 것은 Recall이다.
Recognition이 훨씬 쉽다!
Interaction Style
1. Command Language
- 사용자가 인공적인 언어로 명령을 입력한다.
- 사용자가 관련 지식을 모두 머릿속에 가지고 있어야한다.
- Learnability가 낮아 배우기가 어렵다.
2. Menues and Forms
- 사용자에게 여러 옵션 중 선택하거나 필요한 정보를 양식에 입력한다.
- 전 세계적으로 알려진 지식에 기반하고 있다.
- Learnability가 높아 학습하기 쉽다.
3. Direct Manipulation
- 사용자는 데이터 객체의 연속적인 시각적 표현과 상호작용한다.
- 예를 들어, 물리적으로 끌어당기는 등의 행동을 하거나, 라벨이 표시된 버튼을 누름을 통해 조작한다.
- 빠르고, 점진적이며, 되돌릴 수 있고, 즉시 보이는 효과가 있다.
4. Speech Dialog
- 사용자가 자연 언어로 말하고 시스템이 같은 방식으로 응답한다.
- Text 기반의 AI 챗봇이 대표적이다.
Interaction Style 비교
각 Interaction Style은 장단점을 가지고 있으며, 각 스타일을 비교할 때는 아래 사항들을 기준으로 한다.
- Learnability(학습성) : 머릿속 지식 vs. 외부에서 접근 가능한 지식
- Error messages : 각 스타일이 오류를 통보하는 방법과, 사용자가 이를 이해하는 방법
- Efficiency(효율성) : 작업을 완료하는데 소요되는 시간과 노력
- User Experience : 사용자가 시스템을 사용하면서 느끼는 경험 및 만족도
- Synchrony(동기화) : 작업의 흐름이 얼마나 연속적이고 반응적인지.
- 프로그래밍 난이도 : 시스템 구현 난이도
- Accessibility(접근성) : 다양한 사용자 그룹들이 시스템을 사용할 수 있는 용이성
Self Disclosure
command language를 더욱 눈에 띄게 만들어 사용자가 사용 가능한 command와 syntax를 배울 수 있도록 도와줄 수 있다.
Mental Model & Conceptual Model
1. Mental Model
- 실제 세계에서 어떤 것이 어떤 방식으로 작동하는지에 대한 인간의 사고과정을 설명한 것.
- Interaction style에 관계 없이, 새로운 시스템을 학습하기 위해서는 사용자가 시스템 작동 방식에 대한 mental model을 구축해야한다.
- Learnability(학습가능성)은 mental model을 구축하는 데 어려움이 있는 경우 크게 영향받을 수 있다.
- 사람의 mental model은 지속적으로 진화하고 변경될 수 있다.
- 제품, 다른 기술, 일상생활 등 에 대한 새로운 경험으로부터 영향받는다.
- 고객의 일반적인 패턴을 발견할 수 있다. 프로젝트 시작 시 이런 사항을 식별하면 사용이 쉽고 성공적인 제품을 설계할 가능성이 높아진다. => 관찰, 인터뷰, 업무 분석이 필요하다.
Example
- 비행기 예약 : 어떤 단계를 거치고, 그 과정에서 필요한 정보가 무엇인지에 대한 기본적인 기대가 있다.
- 채팅 앱 : 메세지가 실시간으로 오가고, 사진이나 첨부파일을 보낼 수 있다고 기대된다. 누군가 답장하면 즉시 알림받을 것으로 기대한다.
- 자동차 운전 : 상호작용이 가능할 수 있는 주요 요소들, 자동차가 할 수 있는 기능, 규제에 따라 적절히 운전할 수 있는 방법 등에 대한 기대가 있다.
2. Conceptual Model
제품이 어떻게 작동하고 조합되는지에 대한 고차원적 계획으로, 디자이너에 의해 설계된다.
시스템을 이루는 다양한 요소들로 구성되고, 최종적으로 고객이 상호작용하는 인터페이스를 통해 표현된다.
개념 모델에는 다음과 같은 요소들이 포함된다.
- 정보 구조(Information architecture) : 서로 다른 영역들이 어떻게 그룹화되고 구조화되었는지, 고객이 제품 내에서 자신의 Mental model에 대한 답을 어디서 찾을 것으로 예상하는지, 이 예상들이 기대와 부합하는지.
- 용어(Terminology) : 유저가 사용되는 단어에 익숙한지, 단어가 제품의 각 부분에서 수행할 수 있는 것들을 시사할 수 있는 넓은 용어인지, 그 용어들이 고객이 매일 사용하는 용어와 얼마나 일치하는지.
- 콘텐츠 전략(Content strategy) : 각 페이지에 나타나는 콘텐츠 유형에 대한 지침적 개념이나 규칙이 무엇인지.
- 채널 전략(Channel strategy) : 일관적이고, 지속적이고, 보완적인 경험을 만들고 있는지.
- 상호작용모델(Interaction Model) : 잘 알려진 패턴을 사용중인지 새로운 것을 제품 내에 도입중인지, 사람들이 시스템과 어떻게 상호작용하는지.
Conceptual Model이 사용자의 Mental Model과 비슷해질수록, 사용자가 제품을 이해하고 사용하기 쉬워진다.
Mental model 불일치의 결과
예를 들면 스크롤을 위로 올리면 화면이 위로 올라가는지, 아래로 내려가는지에 대해 사용자가 기대하는 바가 있는데, 이를 만족시키지 못하는 경우, 시스템에 대한 mental model이 불일치한다고 할 수 있다.
- 사용자가 인터페이스를 이해하지 못한다.
- 상호 작용 비용 증가
- 사용자가 좌절하고 포기한다.
Learning Curve(학습 곡선)
Learning Curve란 사람들이 작업을 배우는 데 얼마나 어려운지를 나타내며, 가파르고 짧을수록 좋다.
Consistency
- least surprise(최소 놀라움의 원칙) : 유사한 것들은 같은 생김새를 가져야 하고 같은 방식으로 작동해야하며, 다른 것들은 확실히 다르게 보여야한다.
- Consistency(일관성)은 사용자가 새로운 UI로 기존의 지식을 쉽게 옮길 수 있도록 돕는다.
Types of Consistency
1. 내부적 일관성(Internal)
- 어플리케이션 내부에서의 일관성을 말한다.
- 사용자 인터페이스 전반에 걸쳐 동일한 용어와 아이콘(메타포)를 사용해야한다.
- e.g. 리뷰라는 단어와 평가라는 단어는 비슷한 맥락에서 사용 가능하지만, 일관성을 위해 둘 중 하나를 선택해 사용한다.
2. 외부적 일관성(External)
- 동일한 플랫폼의 다른 어플리케이션 사이에서의 일관성을 말한다.
- 기술용어가 아닌 일반적인 용어를 사용하되, 적절한 경우에는 도메인에 특정한 용어를 사용한다.
- 유연성을 위해 command languages에서는 동의어 사용을 허용하기도 한다.
3. 은유적 일관성(Metaphorical)
- 인터페이스 메타포와 유사한 실제 세계 객체 사이의 일관성을 말한다.
Metaphors
| 장점 | 단점 |
|
|
Function Mapping
기능 매핑(Function Mapping)이란, 사용자 인터페이스 디자인에서 컨트롤과 그들이 수행하는 기능 사이의 관계를 정립하는 방법이다.
1. 직접 매핑(Direct Mapping)
- 컨트롤의 물리적 레이아웃이 그들의 기능의 물리적 배치와 일치한다.
- e.g. 버너의 위치와 스위치의 위치가 일치하는 경우 사용자가 직관적으로 어떤 스위치가 어떤 버너의 것인지 알 수 있다.
2. 자연스러운 매핑(Natural Mapping)
- 물리적 배치가 정확히 일치하지 않아도, 간단한 mental model을 통해 컨트롤과 기능을 매핑할 수 있다.
- e.g. 운전대에서 방향지시등 스위치를 위로 올리는 경우 오른쪽, 아래로 내리는 경우 왼쪽 방향지시등을 제어한다.
Affordances
사물이 지닌 인지된 특성 및 실제 특성이 사용자에게 사물을 이용할 수 있는 방식을 암시해주는 개념. 즉, 사용자가 해당 사물을 어떻게 사용할 수 있는지를 비언어적으로 전달한다. 일반적으로 버튼, 링크, 마우스 커서의 변화, 마우스 오버 시 강조 표시 등의 기능을 통해 제공한다.
예를 들어 왼쪽 'Buy now' 버튼은 '클릭 가능함'을 암시한다.
Feedback
사용자가 어떠한 행동을 수행하면 즉각적으로 가시적인 반응이 나타나야한다. 이때 사용자의 행동에 대한 반응을 피드백이라고 한다.
피드백에는 다음과 같은 종류가 있다.
- 입력이 수락되었음을 확인한다.
- 입력이 올바른 형식인지, 혹은 잘못된 형식인지를 검증한다.
- 처리가 지연되는 경우 설명한다.
- 요청이 완료되었는지, 완료되지 않았는지 확인한다.
- Low-level feedback : 버튼을 클릭할 때, 마우스를 눌렀을 때와 이후 클릭 상태를 풀었을 때 버튼의 생김새가 다르다. 즉, 버튼이 클릭 이후 상태가 변화하면서 '버튼이 클릭되었음'을 인식하고 확인하는 피드백이다.
- High-level feedback : 사용자가 어떤 데이터를 수정했을 때 모델 상태가 변경되거나, 새 웹페이지가 로딩되는 등의 피드백이다.
Locus of Attention
피드백 가시성은 사용자가 화면에서 무엇을 주목하고있는지에 따라 결정된다. 이때 주목한다는 것은 집중하는 것과는 조금 다른 개념이며, 사용자가 전반적으로 인지하고 있는 것을 말한다.
Spotlight of attention : 한 번에 하나의 입력 채널에 주의가 집중됨을 의미한다. 예를 들어 시각적인 영역 내에서 특정 부분에 사용자의 시선이 집중되곤 한다.
Perceptual Fusion
같은 Perceptual(인지적) 주기 내에 두 개 이상의 자극이 있다면, 이는 융합된 하나의 이벤트처럼 보인다. 즉, 어떤 버튼을 클릭한 후 화면 상의 변화를 인지하기까지의 시간이 Tp(약 100ms, 50~200ms)보다 작을 경우, 사용자는 첫번째 사건이 두번째 사건을 유발했다고 느낀다.
Perceptual Fusion은 인과관계를 인식하는 데 영향을 끼친다.
Perceptual Fusion의 결과 다음과 같은 사항들을 느낄 수 있다.
- 1/Tp frames/sec로 움직이는 사진을 인지할 수 있다. 인지적 주기는 약 100ms이므로, 1/Tp = 10 fps이다. 즉 10fps 정도를 인지할 수 있으며, 그 이상으로 fps 수가 늘어나면 부드럽다고 느낄 수 있다.
- 컴퓨터의 반응 속도가 Tp보다 빠르면 반응이 즉시 왔다고 느껴진다.
Visible State
Visible Navigation State
사용자가 현재 위치를 파악하고, 어플리케이션 내에서 경로를 추적할 수 있도록 하는 UI 요소를 말한다.
- Breadcrumbs : 웹사이트나 어플리케이션 내에서 사용자의 현재 위치를 계층적으로 표시한다.
- Pagination(페이지네이션) : 사용자가 다른 페이지로 쉽게 이동할 수 있는 숫자나 아이콘으로 페이지를 나눈다.
- Tabs : 다양한 섹션 혹은 페이지 사이를 전환할 수 있는 인터페이스 요소이다.
Visible Model State
어플리케이션의 모델 상태를 지속적이고 시각적으로 나타낸다. 어떤 요소를 시각화할지는 사용자의 작업에 의해 결정된다. 이는 사용자가 어플리케이션에서 수행하고있는 작업의 현재 상태를 한 눈에 볼 수 있도록 도와준다.
Visible View State
사용자가 현재 무엇을 선택하고 있고, 어디에 포커스가 맞춰져 있는지를 나타내는 UI 요소이다. 에를 들어, 객체 선택 시 주위의 하이라이트, 선택 핸들, 드래그 앤 드롭 마우스 커서, 키보드 커서 등이 있다.
Information Scent
이론에 따르면, 사람들이 정보를 수집하는 방식은 동물들이 먹이를 찾는 방식과 유사하게 모델링될 수 있다. 사람들은 정보를 수집할 때 그 정보를 얻기 위한 비용 대비 수집할 수 있는 정보의 양을 지속적으로 평가하고, 최대의 정보를 효율적으로 수집하기 위한 결정을 내린다.
이때 Information Scent란 링크에 대한 단서로서, 해당 링크를 따라갔을때 얼마나 유익할지를 나타낸다.
사용자 인터페이스는 아이콘, 레이블 등을 통해 사용자가 클릭하려는 링크 뒤에 어떤 정보가 있는지 단서를 제공한다. 이 과정에서 좋은 Information Scent를 제공하는 것 뿐만 아니라, Consistency(일관성)도 중요하게 고려해야한다.
탐색 비용 계층
