HCI - Learnability

저번 글에서 UI에 대해 학습했다.

그러면 우리가 UI를 만들고 유저에게 어떻게 사용을 하게 해야할까?

단적으로, UI를 어떻게 사용해야하는지 수업을 시켜야할까? (Excel 처럼)

자세한 매뉴얼을 제공할까?

뭘 생각하든 일단 UI를 사용하기 위해서 무언가 도움말이나 확인해야한단 점은 확실한 마이너스 요소이다.

단적으로 나의 경험을 생각해보면, 하다못해 게임을 할 때도 초기 설명을 다 스킵하고 시작부터 하는 편이다.

 

무언가 User가 "사용"한단 것은 결국 Goal이 있기 때문이다.

다시 말하면 어떤 소프트웨어를 사용하던 결국 무언가 얻기 위해 사용한다는 것이다.

(ex: 게임 - 재미, 포토샵 - 편집된 사진)

 

User는 이 목표를 이루기 위해 interface를 탐색하게 된다.

이 과정 중, 문제가 발생하면 사용자는 당연히 도움을 구하게 된다.

이러한 경험이 많이 발생하면 발생할 수록 단점이 되겠지만, 이를 없에겠다고 초기부터 과도한 과정을 집어 넣는 것은 좋은 것일까?

정답은 "모른다."이다. 이는 다양한 것을 종합하여 생각해야한다. 주로 Accuracy 와 efficiency는 Trade-off 관계이기 때문이다.

따라서 우리는 디자인할 때 User의 목표를 파악하는 것이 중요하다.

UI는 어떻게 작동하는지, 어떻게 사용 가능한지를 알려줘야한다. 또한 도움말은 검색할 수 있어야하며, goal-oriented여야한다.

- Learning by Watching : Invisible UI는 동영상 시청을 통해 학습할 수 있다. (ex: 제스쳐 등)

---

* Recognition Vs Recall

 

- Recognation : visual cue를 통해 간접적으로 기억해내는 것이다.

- Recall : 스스로 기억해내는 것이다.

예를 들어 로그인을 할 때 b 만 쳐도 beige@gmail.com이 자동으로 예상 입력에 띄워지는 것이 Recognation.

직접 beige@gmail.com이라고 다 치는 것이 Recall이다.

 

# Interaction Style 1. Command Language

리눅스 커널을 사용하는 경우를 생각하면 된다. 이 경우 Recognation보단 Recall이 많다. 따라서 Low Learnability를 지닌다.

 

# Interaction Style 2. Menus and Forms

 

메뉴에서 양식화된 버튼을 눌러 기능을 실행할 수 있다.  Command Language에 비해 높은 Learnability를 지닌다.

 

# Interaction Style 3. Direct Manipulation

직접 시각적으로 표현된 아이콘과 물리적으로 상호작용한다.

이 경우 신속하게 상호작용 효과가 눈으로 보인다.

 

# Interaction Style 4. Speech Dialog

User는 자연어로 말하고, system도 같은 언어로 대답해준다. (기가 지니 등)

-> 이렇게 나열한 4개의 Interaction Style들은 다음과 같은 요소로 비교될 수 있다.

(Learnability, Error messages, Efficiency, UX, Synchrony, Programming difficulty, Accessibility)

---

* Self Disclosure

자동 완성 기능이다. 해당 기법을 적용하면 command language 기법을 조금 더 visible하게 해줄 수 있다.

 

* Mental Model

- 실제 세계에서 어떤 것이 어떻게 작동하는지에 대한 사람의 생각 과정에 대한 설명.

Interaction style과 관계없이 새로운 시스템을 배우는 것은 사용자로써 시스템이 어떻게 작동하는지 새로운 멘탈 모델을 구축하도록 요구한다.

-> Learnability는 model을 구축하는데 있어서의 난이도에 의해 크게 영향받는다.

=> 사람의 Mental Model은 지속적으로 변화한다. 즉, 새로운 정보와 경험을 통해 계속해서 업데이트된다. 

=> Mental model은 제품이나 서비스의 경험에 크게 영향을 미친다.

=> User들의 Mental model을 잘 이해한다면 제품 디자인을 user들의 기대와 필요에 더 잘 맞출 수 있다.

따라서 Mental model을 찾아내기 위한 관찰, 인터뷰 등이 필요하다.

Ex)

1. Booking a flight : 어떤 절차로 예약이 진행될 건지 기본적인 예상이 된다. 또한 그 과정에서 필요한 정보도 알고 있다.

2. A chat app : 누군가에게 문자가 올 시 바로 알림이 올것이라고 예상한다.

3. Driving a car : 핸들을 오른쪽으로 돌리면 오른쪽으로 차가 돌 것이라고 예상한다.

 

* Conceptual Model

- Conceptual Model은 어떻게 product가 작동할지에 대해 디자이너에 의해 작성되는 high-level plan이다.

이는 시스템의 조직을 형성하는 다양한 요소로 형성되며, 궁극적으로 고객이 상호 작용하는 인터페이스에 표현된다.

 

1. Information architecture : 각각의 영역이 어떻게 grouping되고 구성되는가? 어디가 사용자들이 그들의 mental model로써 해답을 찾길 기대하는 부분일까?

2.Terminology : User들이 단어들에 대해 익숙하게 느끼고 있을까? 고객이 매일 사용하는 단어들과 비슷한가? 단어들이 고객들에게 어떤 기능을 제공할지 잘 알려줄까?

 

* Conceptual Model의 요소들

1. Content strategy : 각 페이지에 나타나는 guiding concept이나 rule은 무엇일까?

2. Channel Strategy : 일관되고 연속적이며 상호보완적인 경험을 제공하는가?

3. Interaction models : 잘 알려진 패턴으로 디자인을 하였는가? 어떤 것이 새로운 것인지를 소개했는가? 사람들이 어떻게 시스템과 상호작용하는가?

 

-> Conceptual model이 user들의 mental model과 닮을 수록 user의 learnablilty가 올라갈 것이다.

---

* Personalizing the UI

이런 식으로 아예 개인화된 경험을 제공할 수도 있다.

 

=> Mental model과 Conceptual model이 일치하지 않은 디자인은 User가 interface를 이해하지 못한다.

따라서 Interaction의 cost가 상승하며, UX가 하락한다.(Low Learnability)

 

* Learning Curve

=> 사람들이 얼마나 배우기 어려워하는지를 시각화하는 것이다.

=> 결국 LC를 완전 가파르게하거나, 짧게만드는 것이 목표이다.

---

* Consistency

- 한눈에 봤을 때 비슷한 것들은 실제로도 똑같이 기능해야하고, 생김새가 확연히 다른 것은 실제로 다르게 기능해야한다.

(least surprise 법칙)

- Consistency를 지키면 사용자가 기존 지식을 새로운 UI로 쉽게 가져올 수 있다. (Learnability가 좋아진다.)

=> Consistency의 종류 : 1.Internal 2.External 3.Metaphrical

Internal : application 내부

External : 같은 platform에 다른 application 들

Metaphrical : 인터페이스 Metaphor 혹은 실제 세계의 물체와 비슷하게 생긴 것들

 

* Metaphors

장점 : 적절하게 사용하면 Learnability가 높아진다, 사용자의 기존 Mental Model에 매우 쉽게 접근 가능하다.

단점 : 오해의 소지가 있을 수 있다, 제약이 있을 때가 있다(디자인 고정), 적절한 디자인을 찾는 것은 어렵다.

 

* Function Mapping

- Direct Mapping

제어 장치의 물리적 배치가 기능의 물리적 배열과 일치한다. 예를들어 핸들을 오른쪽으로 돌라면 차도 오른쪽으로 간다.

(직접적 관계 이해가 쉬워짐)

- Natural Mapping

DM과 다르게 정확히 물리적 배치가 기능의 물리적 배열에 일치하지는 않지만, 간단한 mental model을 이용해 제어 장치를 기능에 매핑할 수 있다. 예를 들면 온도 조절기는 오른쪽으로 돌리면 온도가 올라간다고 생각된다.

 

* Internal Consistency in Wording / Image

- 인터페이스 전체적으로 동일한 단어 혹은 이미지(아이콘, 메타포)를 사용한다.

 

* External Consistency : Speak the User's Language

- 전문적이고 난해한 단어보다 범용적인 단어를 사용한다. (그러나 상황에 따라 전문적인 용어를 사용하는 것이 명확할 때가 있다.)

- 동의어를 지원해주면 좋다. 이용자가 꼭 해제하기 라고 입력해야만 검색이 되는 것보다 풀기, 제거하기 등으로 검색해도 검색이 되는 것이 이에 해당된다.

 

* Affordances

- 사물이 어떻게 사용될 수 있는지를 결정하는 사물의 지각되고 실제적인 속성.(사용자와 비언어적으로 소통한다.)

예를들어 문 손잡이의 크기가 손으로 잡고 돌리는 구조를 암시하면 사용자는 그에 맞게 행동할 것이다.

(마우스 커서의 모양 변화 등)

무엇이 잘못되었을까? 입력 상자와 버튼이 시각적으로 분리되어 있어 한세트로 작동하는 것이 명확하지 않을 수 있다.

또한 남은 공간이 너무 커서 누르면 검색이 시작되는 건지, 해당 공간에 텍스트를 쓰면 검색이 되는 건지 등이 불명확할 수 있다.

 

* Feedback 

=> Action에 대한 반응은 즉각적이고 시각적인 반응이 있어야한다.

(입력이 허가되었는지, 잘못 되었는지 혹은 입력의 처리가 지연되는지, 완료되었는지에 대한 것을 의미한다.)

- low level feedback : push button 등. (간단한 피드백)

- high level feedback : 새로운 페이지의 로딩 등. (복잡한 피드백)

 

* Perceptual Fusion

- 우리의 인지 시스템이 매우 짧은 시간 간격으로 발생하는 여러 개의 자극을 하나오 인지하는 것.

=> 여러 자극이 동일한 지각 주기 내에 발생하면 그것들은 하나로 융합되어 인지된다.

(반응시간이 인지 시간보다 작으면 사용자는 그 응답을 즉각적으로 느낀다.)

-> 만약 사용자가 키를 누르고 화면에 변화가 일어나는 시간이 T_p ms라고 하면 사용자는 자신의 입력이 이벤트를 일으켰다고 느낀다.

-> 이 개념은 사용자 인터페이스 응답 시간에 대한 상한, 하한선이 될 수 있다.

 

* Response Time

0.1s 미만 : 즉각적으로 보이므로 따로 처리 x

0.1-1s : 사용자가 딜레이를 눈치챈다

1-5s : busy indicator가 필요하다.

 

* Feedback

- Feedback은 중요하지만, 남용해서는 안된다. 따라서 좋은 피드백 디자인은 사용자에게 적절한 정보를 적절한 시기에 제공하여 다음에 수행해야할 동작을 명확히하는 것이 중요하다.

 

* Locus of Attention

- 사용자의 주의가 집중되는 영역 혹은 포인트를 말한다. Feedback visibility는 locus of attention에 의해 영향을 크게 받는다. 사용자의 주의가 기울여져있을 것으로 예상되는 부분에 피드백을 띄워야 확인이 빠르다.

- 사람의 attetion 초점은 한 번에 하나의 입력 channel에만 가있을 확률이 크며, 따라서 이 점을 주의해서 피드백을 주어야한다.

 

* Visible Navigation State:

1. Breadcrumbs : 사용자가 웹사이트 내에서 현재 위치를 추적할 수 있도록 해주는 힌트이다. (위치 기반, 경로 기반 등으로 가능)

2. Pagination : 검색 엔진의 결과에서 페이지별로 검색을 제공하는 것

3. Tabs : 크롬 등 브라우저의 탭

 

* Visible Model State

- 계속해서 변화를 반형하는 상태 표시법. 예를들면 다음 사진에서 내가 PPT에 수정을 가할 때마다 옆의 탭의 사진에 계속해서 변화 피드백이 생긴다.

 

* Visible View State

- User에게 현재 어떤 요소가 선택되었는지, 어떤 동작을 할 수 있는지 등을 가시적으로 표현하는 것이다.

- 선택 강조, 마우스 커서 변화, 선택 핸들, 입력이 가능함을 시사하는 키보드 커서의 깜빡임 등이 있다.

(선택 핸들의 예시 : ppt에서 도형을 누르면 도형의 상하좌우에 작은 사각형이 생겨 사이즈 조절이 가능함을 보여준다.)

 

* Information Scent

- Information foraging theory : 사람이 정보를 수집하는 방식을 동물이 먹이에 찾는 것에 비유한 이론. User는 수집할 정보의 가치를 평가하고, 그 정보를 얻는데 드는 비용을 고려햐여 최적의 결정을 내리려고 한다. 따라서 Information Scent를 잘 구현해놓으면 사람들이 더 편하게 정보를 수집할 수 있다.

- Information Scent : 사용자가 웹 링크나 UI 요소에 근접했을 때, 그것을 추적하거나 따라갈 가치가 있는지를 나타내는 단서다. 예를 들어, 링크의 텍스트가 목적의 내용에 대한 좋은 단서를 제공하거나, 아이콘과 색상이 사용자에게 해당 접근이 유용한 정보로 이어질 것이라는 것을 암시할 수 있다.

=> Information Scent와 Consistency를 유지한다면 사용자는 필요한 정보를 찾을 때 직관적으로 어디를 봐야 하는지 알 수 있게 된다.

 

* User들이 느끼는 탐색에 대한 Cost

Glance -> Read -> Hover or press -> Click through -> invoke

Glance : 대충 아이콘을 훑는 정도

Read : 설명이나 키워드를 읽는 비용

Hover or press : 미리보기, 하위 메뉴 등 추가 정보를 보는 단계

Click through : 링크를 클릭하는 단계

Invoke : 시스템 상태에 영향을 미치는 피드백 활성화.

=> 비용이 무거워질 수록 더 많은 상호 작용과 복잡한 정보를 제공이 가능하다.

 

해당 사이트는 Information Scent는 많지만, 너무 많은 링크와 버튼이 있어 glance 단계의 cost로는 스캔이 불가능하고 최소 Read까지는 넘어와야하는 사례이다.

첫 사이트 홈페이지는 간결하고 간단한 키워드를 통한 Information Scent를 제공하여 가벼운 cost로 검색이 되어야한다.

따라서 랜딩 페이지의 정보를 줄이고, 사용자 로그 데이터 분석을 통해 어떤 작업을 수행하고 얼마나 많은 시간을 소비하는 지를 알아내 페이지를 최적화해야한다. 또한 사용자들의 정보를 찾는 방식에 대한 시각적 분석이 필요하다.

 

* Affordance

1. Explicit Affordance

=> 직접적으로 어떤 기능을 하는지 표시해주는 경우.

 

2. Hidden Affordance

=> 사용자의 어떠한 action 결과로 보여지는 Affordance

 

3. Metaphorical Affordance

=> 흔한 Affordance이다. 사용자의 Mental model에 기인해 은유적으로 기능을 표시한다.

 

4. Animated Affordance

=> action의 결과로 움직이며 상태를 표시하는 Affordance이다.

 

5. Negative Affordance (Anti - Affordance)

=> 특정 처리로 사용자에게 상호작용 불가능 상태임을 알린다.

 

6. False Affordance

=> 그려져있는 것과 다른 상호작용을 하는 Affordance들이다.

(ex: 닫기를 눌렀는데 창이 켜짐)