NEW 기획 디자인 개발 프로덕트 아웃소싱 프리랜싱

디자인

디자이너가 알아야 할 10가지 심리학 법칙 (上)

좋은 디자인은 사용자를 고민하게 하지 않습니다.

저는 심리학을 전공했습니다. 디자인을 하기 위해 전공을 선택한 건 아니지만, 디자인을 할 때 심리학에 대해 얕게나마 학습한 지식이 도움이 될 때가 있습니다. 최근에는 디자인에서 사용성에 대한 중요도가 점점 더 커지면서 멘탈 모델이나 인지 부하 등 사용자가 하는 행동을 이해하기 위해 심리학에 대한 디자이너의 관심도 커졌습니다. 좋은 디자인은 사용성이 뛰어나다는 데 이견이 없다면 심리학 법칙을 알아두는 건 굉장히 비용 효율적입니다. 좋은 디자인이라고 할 수 있는 사례들은 이런 법칙을 고려했고, 이건 법칙이 절대적이라기보다 인간에 대한 이해를 탐구한 학문인 심리학이 발견한 행동 특성이 여전히 유효하기 때문입니다. 오늘 소개해드리는 사용성과 관련한 10가지 심리학 법칙을 알아두면 사용성 테스트를 거쳐 A/B 테스트를 하기 전에, 또는 사용성 이슈가 생겨서 이를 개선하기 위한 솔루션을 고민할 때 유용할 수 있습니다.

 

“인간의 뇌 용량은 1년마다 바뀌는 게 아닙니다. 그러니까 인간 행동에 대한 연구에서 얻은 통찰은 시효가 길 수밖에 없습니다. 20년 전에 사용자들이 어려워했던 부분은 오늘 사용자도 어려워할 겁니다.” – 제이콥 닐슨, 닐슨 노먼 그룹 설립자로 심리학 박사


[사용성이 가진 특성]

  • 유용성 – 사용자가 필요로 하는 작업을 하는가?
  • 유효성 - 하려고 한 작업을 완료할 수 있는가?
  • 효율성 – 작업을 수행하는데 들이는 시간과 노력은 합리적인 수준인가?
  • 호감도 – 사용자가 이것을 갖고 싶어 하는가?
  • 재미 – 사용자가 사용할 때 재미있다고 느끼는가?
  • 학습 용이성 – 사용자가 사용방법을 알아볼 수 있는가?
  • 기억 용이성 – 사용할 때마다 사용자가 사용법을 다시 익혀야 하는가?

 

존 야블론스키가 『UX/UI의 10가지 심리학 법칙』에서 소개한 10가지 법칙을 두 차례에 걸쳐 소개하겠습니다. 책에 나오지 않는 사례를 최근의 사례를 추가해 시의성을 높이고 제 해석을 곁들이겠습니다. 10가지 법칙은 모두 사용성과 깊은 관련이 있습니다.

 

1. 제이콥의 법칙

멘탈 모델(mental model)[1]을 떠올리시면 됩니다. 사용자는 여러 사이트를 이동하면서 시간을 보냅니다. 따라서 새로운 사이트를 이용할 때에도 이미 알고 있는 다른 사이트들과 같은 방식으로 작동하길 원합니다. 사람은 경험을 통해 학습하기 때문에 자신이 익숙한 제품을 통해 유사한 제품을 사용하려고 합니다. 따라서 새로운 디자인을 할 때 기존의 멘탈 모델을 활용하면 사용자가 새로운 모델을 학습하지 않아도 되므로 학습에 걸리는 시간과 비용이 줄어듭니다.

[구글 머터리얼 디자인에서 사용하는 토글 버튼, 라디오 버튼, 스위치 버튼은 실제 물리적 기계에서 사용하던 제어판 패널에서 유래했습니다 ©Google]
[2020년 10월에 구글이 새롭게 선보인 3세대 스마트 온도계. 네스트 온도조절기는 출시 당시에 적용했던 다이얼식 온도조절 기능 대신 오른쪽 측면을 스와이프 해서 온도를 조절하는 방식을 처음으로 적용했습니다. 멘탈 모델을 활용해서 스마트홈 시대에 새로운 제품에 대한 익숙함을 형성하고 그 이후에 새로운 디자인을 적용하는 방식을 참고할 수 있습니다 ©Google]

 

 

2. 피츠의 법칙

피츠의 법칙은 1954년 미국의 심리학자 폴 피츠(Paul Fitts)가 발견한 수학 모델입니다. 터치 대상에 도달하는 시간은 대상까지의 거리, 대상의 크기와 함수 관계에 있다는 법칙입니다. 사용성을 생각하면 세 가지 측면에서 점검할 수 있는데요. 터치할 수 있는 버튼 크기가 사용자가 정확하게 선택할 수 있을 만큼 충분히 커야 한다는 점, 버튼과 버튼 사이에는 잘못 누르지 않도록 충분한 거리를 확보해야 한다는 점, 터치할 수 있는 버튼은 화면에서 구석자리가 아니라 쉽게 마우스나 손가락이 닿을 수 있는 영역에 배치해야 한다는 점을 고려해야 합니다. 다음은 터치할 수 있는 대상에 대해 권장하는 최소한의 규격입니다. 참고로 MIT Touch Lab에서 연구한 결과 성인 손가락 지문 면의 면적은 10~14mm, 손끝 평균 면적은 8~10mm입니다.

기업가이드규격 (단위)
애플인터페이스 가이드라인44 x 44 (pt)
구글머터리얼 디자인 가이드라인48 x 48 (dp)
WCAG웹 콘텐츠 접근성 가이드라인44 x 44 (CSS px)
닐슨 노먼 그룹 1 x 1 (cm)
[아이폰에서 ‘화면 상단 간편 접근’ 기능을 사용하면 화면 상단에 쉽게 접근할 수 있습니다. ©REDBUSBAGMAN]

 

 

3. 힉의 법칙

[힉의 법칙은 선택지 개수가 늘어날수록 결정하는데 걸리는 시간이 늘어나는 것을 보여줍니다 ©CRO-tool]

 

힉의 법칙은 1952년 심리학자 윌리업 에드먼드 힉과 레이 하이먼이 ‘자극의 개수와 자극에 대한 반응 사이의 상관관계에 관해 진행한 실험’을 통해 만들었습니다. 의사결정에 걸리는 시간은 선택할 수 있는 보기의 개수와 복잡성과 비례해 늘어납니다. 실생활에서도 힉의 법칙은 유효합니다. 점심시간이라고 생각해보세요. 점심메뉴를 골라야 하는데 메뉴가 10가지가 넘으면 사진과 함께 메뉴를 보면서 천천히 고르는 경우가 많습니다. 거꾸로 ‘순댓국’을 먹는다고 하면 양을 선택하거나, 순대만 넣어달라는 간단한 요구사항으로 ‘주문’이라는 과업이 끝이 나죠. 메뉴가 많으면 사용자가 정보를 얻는데 더 많은 인지 부하[2]가 발생합니다. 이럴 때에 도움이 되는 건 처음 간 식당을 자주 와봤다는 동료가 “여기는 두 번째 메뉴가 가장 맛있어요”라고 추천해주는 겁니다. 또는 메뉴판에 ‘BEST’ 메뉴라고 적혀있는 것을 보고 부담을 덜고 선택할 수 있습니다.

 

‘할머니용 리모컨’이라는 말을 들어보신 적이 있나요? 복잡해진 리모컨을 사용하기 어려운 할머니, 할아버지가 쓰실 수 있도록 꼭 필요한 리모컨 버튼만 남기고 나머지는 테이프로 가려서 실수로 다른 버튼을 누르지 않도록 만든 겁니다. 반복적으로 사용하는 인터페이스에서 정말 모든 기능이 다 필요한 건지 사용하는 방식을 관찰한 후 결정해야 합니다. 50개가 넘는 버튼을 가진 리모컨이 집에 3개씩 있는 상황에서 결코 사용성이 좋아질 수 없으니까요.

[TV 기능이 점점 늘어나면서 리모컨 버튼도 늘어났습니다. 버튼은 더 작아졌고 리모컨은 커졌죠. 두 손으로 조작해야 하는 상황에 이르렀습니다. 버튼을 늘리는 대신 줄이는 방법이 디자이너가 고민해야 할 포인트였습니다. 애플 TV 리모컨처럼 꼭 필요한 버튼만 남길 수도 있습니다. ©apple]

 

 

4. 밀러의 법칙

매직 넘버 7이라고 이야기하는 법칙입니다. 평균적으로 사용자는 작업기억(working memory)에 7±2개의 항목밖에 저장하지 못합니다. 밀러의 법칙에서 디자이너가 기억해야 할 핵심은 사용자가 쉽게 처리하고 이해할 수 있도록 청크(의미 단위의 덩어리)로 구분하고 정리하는 것입니다. “메뉴를 7개로 제한해야 한다”와 같이 밀러의 법칙을 디자인에 제약사항으로 두는 경우도 있지만 이는 법칙을 곡해하는 겁니다. 

 

1956년 하버드대학교 심리학과 교수였던 조지 밀러(George Miller)가 「마법의 숫자 7, 더하거나 빼기 2: 정보 처리 용량에 관한 몇 가지 한계」라는 논문에서 주장한 것의 본질은 글자 7개나 단어 7개나 단기 기억에 저장하기 위해 들여야 하는 노력은 유사했다는 점입니다. “인간의 단기 기억에는 한계가 있고 정보를 덩어리로 만들면 효과적으로 기억할 수 있다”로 요약할 수 있죠. 따라서 내비게이션 메뉴에 7개만 노출할 필요는 없습니다. 카테고리에 따라 명확히 구분하고 여백이나 선을 활용하면 사용자가 충분히 내비게이션 영역을 쉽게 사용할 수 있기 때문이죠. 핵심은 덩어리로 묶어서 보여준다는 원리입니다.

 

[뉴욕타임스는 웹페이지에서 스크롤을 내릴 때 밀도가 높은 정보를 덩어리로 나누어 독자가 대강 훑어도 콘텐츠를 빠르게 알아볼 수 있도록 페이지를 구성했습니다 ©TheNewYorkTimes]
[2020년 7월, 2년 만에 새롭게 디자인한 한국일보는 정보 단위에 따른 덩어리화를 효과적으로 적용한 사례입니다 ©한국일보]
[매치스패션에서는 수십개의 브랜드를 카테고리 메뉴에서 제공하고 있습니다. 카테고리 기준, 여백, 구분선, 하위 그룹 개념을 활용하면 7개라는 숫자에 연연할 필요가 없다는 것을 쉽게 이해할 수 있습니다. ©matchesfation]

 

 

5. 포스텔의 법칙

존 포스텔은 인터넷을 형성한 여러 프로토콜을 체계화하는데 크게 기여한 컴퓨터 과학자입니다. 네트워크를 통해 데이터를 주고받는 ‘전송 제어 프로토콜(TCP, Trasmission Control Protocol)’ 초기 모델을 구현했는데 이때 “TCP 구현은 견고함의 원칙을 따른다. 자신이 행하는 일은 엄격하게 하고, 남에게 받는 것은 너그럽게 받아라”는 ‘견고함의 원칙’을 세웠습니다. 데이터를 다른 기계로 보낼 때 프로그램은 약속한 규약을 철저하게 따라야 하며, 데이터를 받는 프로그램은 의미만 잘 통하면 너그럽게 받아들여야 한다는 의미였죠. 포스텔의 법칙은 인간의 가변적인 입력을 너그럽게 수용해서 구조적이고 기계 친화적인 출력으로 해석할 수 있는 시스템으로 디자인하면 할수록 사용자 부담은 줄고 더욱 인간적인 사용자 경험이 보장된다는 의미가 있습니다.

 

심리학에서 보는 인간은 합리적인 동시에 감정에 큰 영향을 받습니다. 사용자가 어떤 동작이나 입력을 하더라도 시스템은 공감하는 태도로 유연하고 관대하게 대처할 수 있도록 설계할 필요가 있습니다. 동시에 인터페이스는 안정적이면서 뛰어난 연결 속도, 접근성을 보장해야 하죠. 왜냐하면 사용자는 자신이 행하는 일에는 엄격하게, 남의 것은 상대적으로 너그럽게 받아들이는 경향이 있기 때문입니다. 대표적으로 사용자가 폼에 입력하는 것은 포맷이나 규칙을 지키지 않더라도 시스템을 디자인할 때에는 가능한 수용하도록 노력해야 합니다.

[페이스 ID를 이용하면 아이폰, 아이패드 잠금 해제부터 결제, 앱 로그인 등 기능을 이용할 수 있습니다. 사용자가 더 적은 노력으로 인증을 할 수 있도록 만드는 것이 포스텔 법칙에서 이야기하는 ‘너그럽게 받아라’는 요소입니다. 지난 5월 14일, 코로나 이후에는 마스크를 쓴 상태에서도 애플 워치와 아이폰을 이용해 인증을 하도록 업데이트한 것도 포스텔 법칙에 따른 디자인이라고 볼 수 있습니다. ©apple]

 

웹 사이트 반응속도는 빠를수록 좋습니다. 사용성을 개선하기 위해서는 웹사이트 반응속도를 느리게 만드는 원인을 파악하고 개선해야 하죠. 문제는 “얼마나 빨라야 하는가?”라는 질문에 대해 쉽게 답을 하기 어렵다는 건데요. 실제 일을 할 때 필요한 건 “어디까지 개선해야 하는가?”라는 물음에 대해 답을 찾는 겁니다. 다음 하편에서는 적절한 사용성을 확보하기 위한 기준이 될 수 있는 도허티 임계를 포함한 다섯 가지 법칙을 이어서 소개하겠습니다.

 

 

[하편에서 소개할 5가지 법칙]

  1. 피크엔드 법칙
    인간은 경험 전체의 평균이나 합계가 아니라, 절정의 순간과 마지막 순간에 느낀 감정을 바탕으로 경험을 판단하는 경향이 있습니다.
     
  2. 심미적 사용성 효과
    사용자는 보기 좋은 디자인을 사용성이 더 뛰어나다고 인식하는 경향이 있습니다.
     
  3. 폰레스토프 효과
    비슷한 사물이 여러 개 있으면 그중에서 가장 눈에 띄는 차이가 나는 한 가지만 기억할 가능성이 큽니다.
     
  4. 테슬러의 법칙
    모든 시스템에는 더 줄일 수 없는 일정 수준의 복잡성이 존재합니다. 복잡성 보존의 법칙이라고도 합니다.
     
  5. 도허티 임계
    컴퓨터와 사용자가 서로를 기다리지 않아도 되는 속도(0.4초 이하)로 인터랙션 하면 생산성이 급격히 높아집니다.

[1]멘탈 모델이란 사용자가 어떤 시스템에 대해, 특히 작동되는 원리나 방식에 대해 알고 있다고 생각하는 바를 가리킵니다. 모바일앱이든 키오스크든, 백화점 지하 푸드코트 정수기와 같은 디지털부터 물리적 시스템까지 포괄합니다. 시스템 작동 방식에 대한 축적된 경험이 멘탈 모델을 형성하고 이를 새로운 대상과 인터랙션 할 때 사용합니다.

 

[2] 인지 부하는 스마트폰이나 노트북의 기억 용량처럼 사용자가 인터페이스를 처음 익히고 사용하는데 필요한 정신적 자원의 양을 의미합니다. 스마트폰에서 동시에 너무 많은 앱을 사용하면 배터리는 급격히 줄어들고 처리하는 속도도 느려집니다. 만약 지금 수행하는 작업이 더 많은 기억 용량을 요구하면 뇌는 새로운 정보를 수용하기 위해 기존에 있던 정보를 지우는 방식으로 작동합니다.

댓글 0

WHTM

WOODHANDLETUMBLRMAN

온라인 설문조사를 완성하는 10가지 방법

기획

5가지 불확실성을 줄이는 디자인

디자인

UX 리서처가 질문을 참아야만 하는 이유

기획

디자이너의 휴리스틱 평가방법 10가지: 하편

디자인

디자이너의 휴리스틱 평가방법 10가지: 상편

디자인

UX 리서치, 큰 숫자의 함정에 빠지지 않기

디자인

UX 리서처에게 필요한 역량, 반복하는 실수 (下)

기획

UX 리서처에게 필요한 역량, 반복하는 실수 (上)

기획

확인해야 하는 디자인

디자인

더 읽고 싶은 디자인

기획

신뢰를 주는 디자인

디자인

디자인을 바꾸는 계기, UX 리서치

디자인

호감을 키우는 디자인 (下)

디자인

호감을 키우는 디자인 (上)

디자인

관례를 활용한 디자인

디자인

Z세대 일잘러가 알아야 할 7가지 일 법칙

기획

디자이너가 알아야 할 5가지 패턴

디자인

디자이너가 알아야 할 10가지 심리학 법칙 (下)

디자인

디자인에 유용한 말하기

디자인

디자인에 유용한 데이터 (下)

디자인

디자인에 유용한 데이터 (上)

디자인

소비재와 ICT 플랫폼의 한 끗 다른 컬래버레이션

기획

디자이너의 단어 선택: 카카오의 운영정책 변경을 중심으로

디자인

디자이너의 북마크

디자인

디자이너의 공유하기

디자인

소수를 고려해야만 하는 디자인, 3편

디자인

소수를 고려해야만 하는 디자인, 2편

디자인

소수를 고려해야만 하는 디자인, 1편

디자인

세대 특성과 디자인 2부: 세대 특성을 고려한 디자인

디자인

세대 특성과 디자인 1부: 세대 특성

디자인

공간의 의미, 사용자 경험 (下)

디자인

공간의 의미, 사용자 경험 (上)

디자인

텍스트로 세분화하는 사용자 경험: 하편

디자인

텍스트로 세분화하는 사용자 경험: 상편

디자인

문제를 해결하는 디자인: 라스트마일 모빌리티 서비스를 살펴봅시다. 2편

디자인

문제를 해결하는 디자인: 라스트마일 모빌리티 서비스를 살펴봅시다. 1편

디자인

디자이너의 글쓰기

프리랜싱

디자이너의 글쓰기 2편

프리랜싱

문제를 해결하는 디자인, 경험을 만드는 디자인

디자인

디자이너 기록의 힘 : 하편

디자인

디자이너 기록의 힘 : 상편

디자인

같은 분야를 다룬 글들을 권해드려요.

요즘 인기있는 이야기들을 권해드려요.

일주일에 한 번!
전문가들의 IT 이야기를 전달해드려요.

[구독하기] 버튼을 누르면 개인정보 처리방침에 동의됩니다.

일주일에 한 번! 전문가들의 요즘IT 이야기를 전달해드려요.

[구독하기] 버튼을 누르면 개인정보 처리방침에 동의됩니다.