brunch

매거진 디자인 공부

라이킷 14 댓글

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by 그냥 성빈 Just Seongbin Jun 07. 2024

[HCI] 휴먼-컴퓨터 인터랙션 개론 읽기 pt.2

3,4장 유용성, 사용성의 원리 요약 및 적용 (세이코 메트로놈 시계)

들어가며

고백컨대 이 책을 너무 호락호락하게 본 것 같다. 생각보다 책 진도가 나가지 않아 답답하다. 하지만 포기하는 기분이 더 참기 어려워서 천천히라도 읽어야겠다.

이번에는 유용성, 사용성 그리고 감성의 원리에 대한 파트를 정리해보고자 한다. 이전글처럼 내용 그대로를 정리하기보다 조금 더 정제된 형태로 글을 쓰고자 한다. 일을 하다 보니 결국 내 노동 가치의 핵심 중 하나는 어떻게 줄이는가가 1/5은 되는 것 같다(절대 전부 옮기기가 힘들어서가 아니다).

시계에 적용

이전 글에서는 영화 [그녀]를 각 원리/용어를 설명하는 예시로 사용했다면 이번에는 시계를 사용하는 경험을 풀어서 설명하기로 했다. 아래 시계는 세이코의 "메트로놈 시계"로 불리는 [SMW006]이다. 원형 다이얼의 시계에 두 개의 바늘이 있어 시간도 알려주지만 음악활동을 위해 BPM박자를 알려주는 메트로놈 기능과 톤조절을 위한 소리를 제공해 재미있는 기믹이 있는 시계이다.

어떤 기능인지 상상이 안되는가? 그럼 시계를 리뷰한 아래 영상을 보자.

https://www.youtube.com/watch?v=lFgTdlti8fg

시계유튜버 Teddy Baldassarre. 나는 가끔 본다.

3장

유용성의 원리

주요 내용

문제공간과 디자인공간

심성모형

추상화 차원에 따른 심성모형 종류

3-1. 문제 공간과 디자인 공간이란?

먼저 유용성이란 사용자가 목적을 효과적으로 달성할 수 있도록 돕는 것을 뜻한다.

문제 공간(Problem Space)과 디자인 공간(Design Space)이란 무엇일까? 아주 처음 듣는 개념이다. 문제 공간이란, 사용자가 문제에 처한 초기 상태부터 최종 목표를 달성한 상태까지 문제를 해결할 수 있는 상태의 집합이다. 무슨 말인지 모르겠는가? 나도 그렇다. 더 쉽게 풀어보면 문제를 직면한 초기상태, 문제를 해결하는 목표 상태 그리고 그 사이에 있을 가능성(정보, 제한조건)들을 전부 아우르는 말이다. 즉, 문제를 분석할 때 필수적으로 파악해야 할 부분이라 할 수 있다.

문제 공간에서 초기상태와 목표 상태 사이를 설명하는 "여덟 타일"도식. 출처:인지 심리학과 그 응용 : John R. Anderson 저서

디자인 공간이란, 위에서 말한 문제를 해결해 줄 수 있는 모든 제품이나 서비스 대안의 집합이라 할 수 있다. 즉, 유저가 서비스나 제품의 구성과 용도 그리고 방법을 이해하고 있는 것을 뜻한다. 이 두 공간 사이의 원활한 관계를 통해 유용한 시스템이 만들어진다고 한다.

디자인 공간이 무엇인지 이해가 가는가? 난 잘 모르겠다... 좀 더 익숙한 말로 다시 시도해 보자. 디자인 공간을 이해한다는 것은 모형(Model)이 사용자에게 어떤 의미를 가지는지 이해하는 것과 같다. 모형이란 복잡한 시스템을 사람이 이해하기 쉽게 추상화한 결과라고 할 수 있다. 모형을 만드는 이유는 "단순화"에 있다.

사용자의 마음속에 그려지는 시스템에 대한 모형을 심성모형, 멘탈모델(Mental Model)이라 한다. 사람의 제한된 인지력으로 외부환경을 효과적으로 활용하기 위해서는 머릿속에 심성 모형이 필요하다. 심성모형은 제품의 유용성과도 관계있는데 적합한 심성 모형이 구축하도록 하는 것은 사용자와 시스템이 유용한 상호작용을 하는데에 중요한 전제 조건이다.

시계에 적용

메트로놈 시계를 보는 행위에서 문제공간은 시간을 알고자 하는 상태라는 것, 혹은 다이얼 위에 메트로놈 기능을 암시하는 단어들을 보고 메트로놈 기능을 기대하는 것이다. 이때 디자인 공간은 그 해당 기능들을 어떻게 사용할 수 있을지 아는 것이다. 이 세이코 시계의 경우 누구에게나 친숙한 아닐로그 시계의 외관을 해서 시간을 읽을 수 있는 기능을 을 제공하고 4개의 버튼이 있어 시간 측정 이외의 기능을 할 수 있음을 알 수 있다.

심성 모형 또한 일반적인 시계의 작동법을 따라 사용자는 혼란스럽지 않게 예상할 수 있다.

두 개의 바늘이 평소에는 시간을 알려주고 메트로놈 기능 시에는 추처럼 움직이며 박자와 톤을 소리로 알려준다. 출처 : Fratello

3-2. 심성모형

심성모형은 사람들의 행동 패턴을 단순화한, "예상되는" 사물의 패턴이라 할 수 있겠다. 예를 들어 윈도 OS에서 나는 오른쪽 아래를 보면 시간과 날짜를 알 수 있을 것이라 예상하고 왼쪽 아래를 누르면 컴퓨터를 끌 수 있을 것이라 예상한다.

심성모형은 세 가지 특징이 있다.

첫째, 사람에 따라 같은 대상에 대해 다른 심성 모형을 가질 수 있다.

둘째, 동적이다. 머릿속에서 가상으로 작동시켜 볼 수 있다.

셋째, 불완전하고 상충적이다. 첫째 특징과도 이어지는 이야기이다. 사람마다 다를 수 있으니 의도대로 심성 모형이 구축되지 않을 수 있다.

심성 모형의 순기능과 역기능이 있다.

심성 모형의 역할

- 현상을 묘사하기 :시스템의 현재 상태를 설명하는 것이다. 인터넷 연결의 현재 상태는 이렇다 등등

- 이유 설명하기 : 시스템의 작동과 관련된 인과를 설명하는 것이다. 현재 작동이 안 되는 이유는 이렇다 등등

- 미래 예측하기 : 시스템 작동에 대한 미래상태를 예측할 수 있다. 현재는 이러니 다음은 이럴 것이다 등등

심성 모형의 부작용

반면 심성 모형이 잘못 사용될 경우 갖가지 부작용이 일어날 수 있다. 아래가 그 대표적인 예시이다.

피쳐폰 시대에는 응답하기가 왼쪽, 거절하기 버튼이 오른쪽이었지만 아이폰은 그 반대라 서로 상충하는 심성모델을 가지고 있다. 이 때문에 초기 사용자들은 무심코 전화를 끊어버리는 실수를 저지르곤 했다.

서로 다른 위치에 있는 아이폰과 피쳐폰의 응답-거절 버튼

시계에 적용

메트로놈 시계를 보는 행위에서 심성모형은 크게 두 가지이다.

1. 손목시계의 심성 모형 : 전형적인 시계의 멘탈 모델을 따른다. 1~12까지의 숫자가 있고 시침과 분침이 있다. 하지만 두 개의 핸즈의 길이가 같아 사용자가 헷갈릴 여지가 있다.

2. 메트로놈 튜너의 심성 모형 : 메트로놈이 어떻게 생겼는지 아는가? 평소에 써본 적이 있는가? 아마 음악을 하지 않는다면 형태만 생각나고 구체적인 사용법은 모를 것이다. 추가 왔다 갔다 하는 형상만은 어렴풋 떠오를 것이다. 고로 대부분의 비 은악인 사용자는 메트로놈의 멘탈 모델이 구성되지 않았다고 할 수 있다.

전형적인 바우하우스 스타일의 실용적인 그래픽의 융한스 손목시계와 일반적인 메트로놈

3-3. 추상화 차원에 따른 심성 모형의 종류

추상화의 정도에 따라서도 동일한 대상에 대해서도 다양한 모형이 만들어질 수 있다. 디지털 시스템에 대해서는 아래 세 가지 차원의 모형이 있다.

구조모형(대리모형) : 시스템이 어떤 세부 요소들로 구성되어 있는지 묘사하는 모형이다. 추상화의 정도가 낮고 사실적이다. 대표적인 예시로는 네이버 지도가 있다. 길이나 지역 이름뿐만 아니라 시각적 특성도 자세히 보여준다.

네이버 지도 - 그냥 지도, 구조모형의 예시이다

기능모형(작업 행위 모형) : 시스템이 어떻게 구성되어 있는지에 대한 모형이라기보다는 사람들이 시스템을 어떻게 사용하는지에 대한 모형이다. 사람들이 작업을 수행하기 위해 어떤 행위를 하는지 묘사한다. 대표적인 예시로는 로드뷰가 있다. 마치 도로를 달리듯 실제로 돌아다니는듯한 경험을 통해 기능모형을 구축한다.

네이버 지도 - 로드뷰, 기능모형의 예시이다

가치모형 : 시스템을 통해 사람들이 어떤 문제를 해결할 수 있는지 표기한다. 사용자가 시스템이 자기에게 어떤 가치를 어떤 가치를 제공해 줄 것인가에 대한 심성 모형으로 추상성이 높다. 제품이나 서비스가 사용자에게 어떠한 가치를 전달해 줄 것인가는 유용성에 있어 매우 중요하다. 이때 기능적 가치 - 유희적 가치와 개인적 가치 - 사회적 가치라는 두 가지 차원에서 논의된다.

시계에 적용

메트로놈 시계는 추상화 정도가 매우 높다고 할 수 있다. 앞서 말한 것처럼 크게 시계 기능과 메트로놈 기능으로 나눌 수 있는데 두 기능은 둘 다 "시간" 구획하고 측정한다. 눈에 보이지 않는 대상을 표현하기 위해 지구자전을 365로 쪼개고 그걸 다시 24시간으로 쪼개 원 한 바퀴를 돌며 사용자에게 정보를 전달하는 것이 시계이고 흐르는 시간을 인간이 즐길 수 있는 음악을 위해 더 잘게 쪼개 소리로 알려주는 게 메트로놈이다.

위 모형 중에는 가치 모형에 해당될 것이다. 그중에서도 시간 정보를 전달하고 악기연주 및 조율을 도와준다는 점에서는 기능적이고 이 시계를 사용함으로"음악인"임을 표현한다는 측면에서는 개인적 가치를 담고 있다.

시계는 때로 자신의 정체성을 떠오르게 하는 도구가 되기도 한다 출처 : Fratello

4장

사용성의 원리

주요 내용

사용성의 정의와 중요성

사용성의 속성

사용성 속성 간의 상충관계

핵심속성 선정

4-1. 사용성의 정의와 중요성

사용성은 흔하게 쓰이는 단어이다. 그래서 사용성은 좁은 의미와 넓은 의미를 나누어 볼 수 있다.

협의의 사용성 : 효용성과 반대되는 개념으로 수행하는 과정이 얼마나 "효율적"인가를 뜻한다.

광의의 사용성 : 시스템이 사용자의 목표달성을 얼마나 도와주는가와 첫인상, 사용자의 적응화 정도 등 편의성 외 많은 요소를 포함한다. 즉, 사용품질을 뜻하며 이는 효율성, 효과성, 만족도를 포함하는 개념이다.

이중 책은 넓은 의미를 채택했는데 다음과 같다.

사용성이란, 제품을 사용하면서 효율적, 정확하게 작업을 수행하고, 그 과정에서 의미 전달이 확실히 일어나며 유연하고 일관성 있는 사용이 가능한 정도라고 정의한다.

간단히 말해 "쉽게 잘 조작/사용할 수 있는 정도"라고 생각할 수 있겠다!

근데 이게 왜 중요할까? 어떤 제품이 정말 다양하고 기발한 기능들이 있지만 사용하기 너무 어렵다면 무슨 소용일까? 한편 같은 기능을 제공해도 사용성 때문에 성패가 갈린 케이스도 있다.

전자책 기능을 하는 애플의 아이패드와 아마존 킨들이 그렇다. 킨들에 비해 아이패드는 자연스럽게 페이지를 넘기는 사용성을 제공해서 시장의 승자가 될 수 있었다. 일상생활에 익숙한 사용성을 제품에 적용한 것이 "좋은 사용성"을 제공한 케이스이다.

아마존 킨들. 출처:전자신문

시계에 적용

메트로놈 시계 사용에서 사용성은 "시간을 잘 읽기"와 "박자를 잘 파악하고 음정 맞추기"이다. 후자는 안 써봐서 잘 모르겠다. 하지만 전자는 아쉬운 점이 있는데 시침과 분침의 식별이 어렵다는 것이다.

아래 사진을 보면 왼쪽의 다른 세이코 다이버 시계는 시침과 분침의 형태가 명확히 달라서 곁눈질로도 시간을 알 수 있다. 그래서 회의 중에 힐끔 시간을 봐도 아무도 핀잔을 주지 않는다. 하지만 이 메트로놈 시계는 시/분침의 길이도 같고 형태도 유사하다. 다른 점은 뿌리 쪽 구멍이 뚫린 정도와 바늘 끝 얇게 발린 빨간 도료뿐이다. 분명 익숙해지기 전까지는 꽤나 시간이 걸릴게 뻔하다.

왼쪽은 누가 봐도 다른 형태의 핸즈를 사용한다.

4-2. 사용성의 속성

사용성은 구체적이고 측정가능한 상호작용에 대한 속성이다. 사용성은 크게 기본적 차원(효율성, 정확성)과 부수적 차원(의미성, 유연성, 일관성)이 있다. 각 사용성의 속성을 아래 정리해 보겠다.

[기본적 차원]

효율성

사용자가 주어진 과업을 얼마나 효율적으로 달성할 수 있는지를 뜻한다.

- 반응성 : 시간이 키워드이다. 사용자의 행동에 시스템이 반응하는 속도와 관련된 속성으로 안정성이 중요하고 또한 지체를 최소화하여야 한다.

- 단축성 : 절차가 키워드 인다. 사용자가 원하는 과업을 간단하게 마무리할 수 있는 정도를 뜻한다.

정확성

사용하며 저지를 수 있는 오류와 관련된 사용성의 속성이다.

- 사전 방지성 : 오류 가능성을 미연에 제거하거나 줄이는 것이다.

- 오류 발생 감지성 : 오류가 발생할 수 있다는 사실을 사용자가 빨리 인식하고 조치를 취할 수 있게 하는 것이다.

- 오류 회복성 : 이미 벌어진 오류를 쉽게 정정할 수 있는 기능을 제공하는 것이다.

다시 한번 물어봐서 실수를 미연에 방지한다. 출처 : 아트인사이트

[부수적 차원]

의미성

사용자가 보고 싶은 정보나 실행하고 싶은 기능이 제공되어야 하는 속성임

- 변화제시성 : 사용자가 알아야 하는 시스템의 상태변화를 사용자가 감지할 수 있게 표시하는 것

- 이해 가능성 : 전달된 정보가 사용자가 이해가능한 형태여야 한다는 것이다. 가독성과 논리성 측면에서 평가할 수 있다.

- 학습성 : 시스템에 대한 어느 정도 수준의 지식을 얼마나 쉽게 취득하는지를 뜻한다. 즉 초보자도 쉽게 시스템 사용법을 학습하는지에 관한 정도이다. 이때 시스템의 사용 빈도에 따라 설계해야 하는 학습성 속성이 달라진다.

유연성

사용자가 원하는 작업을 원하는 방식으로 진행할 수 있도록 하는 것이다.

- 사용자 주도권 : 사용자가 원하는 대로 시스템과 상호작용 할 수 있게끔 해주는 시스템 속성이다. 사용자에게 큰 주도권을 주면 효율성이나 학습성이 높아지나 너무 많이 주면 학습성이 낮아지기도 한다.

- 대체성 : 원하는 작업의 수행 방법이 두 가지 이상이어서 사용자가 적절한 방법을 선택하게 하는 것이다. 이때 대안들 간의 차이를 명확히 해주는 것이 중요하다.

- 다중성 : 사용자가 동시에 두 가지 이상을 작업할 수 있게 하는 시스템 속성이다. 다중성은 크게 두 가지로 구분된다. 동시적 다중성(글 읽으며 음악 듣기)과 교차적 다중성(더블모니터로 두 가지를 띄어놓고 왔다 갔다 하기)

- 개인화 : 사용자가 시스템의 상태를 개인에 맞춰 변화시킬 수 있는 속성. 크게 응용성(블로그 꾸미기)과 적응성(유튜브 알고리즘 내 관심사 반영)으로 나눌 수 있다.

- 연결성 : 여러 기기간 연결과 사용이 유연하게 연결되는 것. IOT기기간 통신을 통해 심리스 한 경험을 하는 것이 대표적인 예시일 것이다.

일관성

시스템의 정보나 기능이 다른 대상과 비슷한 모습이나 역할을 가지는 것을 의미한다.

- 예측가능성 : 과거 자신의 경험에 비추어 예측하는 것을 뜻한다. 가령 복붙의 경우 윈도 OS에서는 컨트롤 + C, V인 것이 대표적이다.

- 친숙성 : 실제 세상의 경험을 바탕으로 시스템을 사용하는 데에 필요한 지식을 습득하게 하는 시스템 속성이다. 애플 초기의 스큐어모피즘이 대표적인 예시이다.

- 일반화 가능성 : 사용자가 과거에 사용한 명령이나 메뉴를 새로운 상황에서도 사용하게 해주는 시스템 속성이다. 여러 시스템을 왔다 갔다 해도 일관성 있는 사용성을 제공하는 것이 그것이다.

기존 계산기의 모습을 본떠 일관성을 부여한 애플 UI 출처 : 일일일

시계에 적용

이 부분에 있어서는 딱히 할 말이 없다. 위 여러 속성이 두루 반영되어 있을 것이다.

하지만 한 가지 아쉬운 점이 있다면 시계에 있는 네 개의 버튼이다. 보통의 쓰리핸즈 시계(그냥 수능시계)는 크라운(시계옆에 돌리는 거)으로 시간을 조작한다. 하지만 메트로놈 시계는 네 개의 버튼이 달려있고 각 버튼은 기능이 다르다. 각 기능은 시계의 뒷면을 봐야 그 용도를 알 수 있는데 매일 사용하는 기능이 아닌 이상 뭐가 무슨 버튼인지 사용자는 잊기 마련다. 그럴 때마다 시계를 풀어서 확인해야 한다는 점은 "효율성"차원에서 아쉬운 부분이다.

각 버튼의 기능이 케이스백에 새겨있다. 출처 : Fratello

4-3. 사용성 속성 간의 상충관계

상충관계는 각 사용성들은 각기 다른 장단이 있어 초보자에게 좋은 사용성은 전문가에겐 효율이 떨어지고 그 반대로 전문가에게 유용한 사용성은 초보자 학습이 어려운 상황을 뜻한다. 상충관계를 어떻게 효과적으로 대처하는가가 HCI의 중요한 연구 주제가 되었다.

이러한 상충관계를 효과적으로 대처하는 방법으로 다중적 시스템이 있다. 가령 초보자일 때는 메뉴기능을 사용하고 숙련자가 되면 명령어 시스템을 사용하는 식이다. 다중적 시스템의 예로 DSLR카메라를 들 수 있다. 조리개 값이나 셔터 스피드 조정은 초보자에겐 어려운 기능이다. 그래서 초보자에게는 자동모드 등 손쉬운 기능을 제공하지만 숙련자는 매뉴얼 모드로 직접 모든 값을 지정할 수 있게 해 준다.