2023. 4. 9. 04:16ㆍDesign/UXUI
일전에 내가 UX 공부를 시작하게 된 계기를 적은 적이 있다.
깊이 있고 복잡한 UX 프로세스를 익히기 전, 내가 어렴풋이 느끼고 있던 것들부터 확고히 하는 과정이 필요했는데,
그 과정에서 만나게 된 책 중에 하나가 'UX/UI의 10가지 심리학 법칙'이다.
완독한 후기를 우선적으로 말해보자면, 각 챕터가 간결하여 비교적 쉽게 읽을 수 있었고
'잘 만들었다'고 평가되어지는 UX디자인의 특징과 그 과정에 심리학 법칙이 어떻게 작용하는지 그 핵심이 잘 정리되어있어서 좋았다.
그 법칙을 공부하는 것이 왜 중요한지는, 아래 인용으로 대신하겠다.
인간이 공간을 경험하는 방식을 잘 아는 건축가가 더 좋은 건물을 지을 수 있듯이, 인간의 행동 방식을 잘 이해하는 디자이너는 더 훌륭한 디자인을 만든다. 따라서 깊이 있는 지식을 쌓고 이를 디자인 프로세스에 잘 적용하는 것이 관건이다.
- UX/UI의 10가지 심리학 법칙 中
나는 이 책을 앞으로 내가 하는 디자인의 근거이자 기초로 사용하기 위하여 선택하였으며,
기록과 함께 적용된 서비스를 분석해보고자 이 글을 작성하게 되었다.
10가지 심리학 법칙
1. 제이콥의 법칙
📃 이론
사용자는 자신에게 익숙한 제품을 통해 구축한 기대치를 그와 비슷해 보이는 다른 제품에도 투영한다.
기존의 멘탈 모델(mental model)을 활용하면 사용자가 새 모델을 익히지 않아도 바로 작업에 돌입할 수 있다. (UX ⬆️)
익숙하다는 건 엄청난 가치다.
인터페이스를 익히는 데 드는 정신적 에너지가 줄어들수록, 사용자가 목표달성에 투자할 에너지는 늘어난다.
🔺 주의
변화를 꾀할 때는, 사용자에게 익숙한 모델을 한시적으로 이용할 권한을 부여해서 불협화음을 최소화하여야 한다.
⭐️⭐️ 모든 제품과 경험이 똑같아야 한다는 법칙이 X
⭐️⭐️ 사용자가 새로운 경험을 이해하기 위해 기존 경험을 활용한다는 사실을 상기시키는 지침으로 생각할 것.
🔎 예시
우리가 하루에도 몇 번씩 들어가는 쇼핑APP은 서로 닮아있다.
각각의 앱을 처음 이용할 때에도 따로 시간을 내어 익히지 않아도 된다.
2. 피츠의 법칙
📃 이론
대상에 도달하는 시간은 대상까지의 거리와 대상의 크기와 함수 관계에 있다.
터치 대상은 인터페이스 상에서 쉽게 도달할 수 있는 영역에 배치하여야 한다.
인터랙티브 요소의 크기와 위치를 적절하게 지정함으로써, 사용자가 해당 요소를 손쉽게 선택하게 하고, 선택 가능 영역에 관한 사용자의 기대에 부응시켜야 한다.
🔺 주의
터치 영역은 충분히 커야 한다.
터치 대상 사이에 충분한 거리를 확보해야한다.
| 회사/조직 | 권장 규격 |
| 휴먼 인터페이스 가이드라인 (애플) | 44 X 44 pt |
| 머티리얼 디자인 가이드라인 (구글) | 48 X 48 dp |
| 웹 콘텐츠 접근성 가이드라인 (WCAG) | 44 X 44 CSS px |
| 닐슨 노먼 그룹 | 1 X 1 cm |
🔎 예시
🟢 Do
간단한 예시로 mui의 Checkbox가 있다.
실질적인 체크박스의 영역뿐만 아니라 주변부까지 터치 영역을 확보하여, 체크박스를 누르려는 사용자가 주변에 커서를 가져다 대도 체크할 수 있다.
❌ Don't
컬쳐랜드 App의 우측 상단 버튼은 충분한 패딩 없이 아이콘 영역만큼의 터치 영역을 제공한다.
또한 그렇게 만들어진 버튼 두개가 아주 가깝게 붙어있어, 터치가 어렵다.
3. 힉의 법칙
📃 이론
의사결정에 걸리는 시간은 선택지의 개수와 복잡성과 비례해 늘어난다.
의사결정 시간이 반응 시간에 큰 영향을 받을 때는 선택지의 개수를 최소화해야한다.
TIP 1) 인지부하를 줄이려면 복잡할 작업을 잘게 나누고, 신규사용자에게는 온보딩을 점진적으로 진행하기
TIP 2) 추천 선택지를 강조해서 사용자 부담 줄이기
ℹ️ 사용자가 하는 모든 작업에는 정신적 자원(mental resource)이 소모된다.
인터페이스를 익히고 인터렉션하는 데 필요한 정신적 자원의 양을 인지부하(cognitive load)라고 한다.
🔺 주의
선택지 항목이 너무 많으면 인지 부하가 커지며, 반대로 너무 적어도 관련도가 높은 항목을 구별하기 어려워진다.
지나친 단순화를 피해야한다.
인터페이스/프로세스를 단순하게 만들면 사용자가 느끼는 정신적 긴장은 줄어들지만, 디자이너는 사용자가 쉽게 알아보도록 맥락에 관한 단서를 제공해야 한다.
🔎 예시
토스의 핸드폰 요금제 선택 플로우는 이 힉의 법칙이 아주 잘 녹아있는 예시라고 할 수 있다.
여타 통신사 App과 같이 처음부터 토스가 가진 모든 휴대폰 요금제의 설명을 늘어놓는 것이 아닌, '나'에 대해 물어본 후 적합한 요금제에 대한 정보만 보여주고있다.
그 후에 또 다른 요금제에 대해 궁금할 때, [전체 요금제 보기] 버튼을 통해 추가적으로 그 정보를 제공하고 있다.
'나'에 대해 물어보는 과정 또한 적절한 선택지의 내용과 개수를 사용하여 내가 실질적으로 내 요금제를 선택하는데까지는 몇 초 걸리지 않았다.
또한 STEP1에서 '2개의 질문에만 대답하면 돼요'의 경우, 목표 그라데이션 효과와도 연결되는 좋은 UX라이팅 예시라고 할 수 있다.
4. 밀러의 법칙
📃 이론
'마법의 숫자 7' - 보통사람은 작업 기억에 7(±2)개의 항목밖에 저장하지 못한다.
핵심은 '덩어리화'. 사용자가 쉽게 처리/이해/기억할 수 있게 콘텐츠 덩어리를 작게 나눠 정리하자.
🔺 주의
'마법의 숫자 7'을 내세워 불필요한 디자인 제약을 정당화하지 말아야 한다.
내비게이션 항목 개수는 7개 이하로 제한해야 한다. (X) -> 항목 같은 작은 단위가 아닌 '덩어리'를 기준으로 말하는 것.
🔎 예시
여기서의 핵심은 '덩어리화'이다. 강제로 네비게이션을 7(±2)개에 맞추려고 하는 것이 아니라, 정보의 묶음의 갯수를 제한하는 것이다.
이 예시는 책의 내용을 가지고 왔는데, 메뉴 항목을 7개로 제한하지 않아도 나이키닷컴의 내비게이션 메뉴는 쉽게 이해할 수 있다.
5. 포스텔의 법칙
📃 이론
"자신이 행하는 일은 엄격하게, 남의 것을 받아들일 때는 너그럽게."
인터페이스/시스템은 안정성과 접근성을 보장해야 하며, 사용자의 다양한 입력방식을 고려해야 한다. (디바이스~네트워크 등 전부)
ℹ️ HCI : 인간-컴퓨터 인터렉션
🔺 주의
사용자에게 요청하는 정보의 양을 보수적으로 책정하는 것을 가장 우선적으로 고려해야한다.
사용자가 채워야 할 필드가 늘어날수록, 디자이너가 사용자에게 부과하는 인지적 에너지와 노력도 커진다. (=의사결정 피로감)
🔎 예시
반응형 웹디자인은 웹의 유동적인 특성을 포용한 대표적인 사례다.
6. 피크엔드 법칙
📃 이론
인간은 경험 전체의 평균이나 합계가 아닌, 절정의 순간과 마지막 순간에 느낀 감정을 바탕으로 경험을 판단하는 경향이 있다.
TIP 1) 사용자 여정 중 가장 강렬한 순간과 마지막 순간을 세심하게 신경 쓰기
TIP 2) 제품이 사용자에게 가장 큰 도움을 주는 순간, 가장 중요하게 여겨지는 순간, 가장 큰 즐거움을 주는 순간을 알아내어 공략하기
피크엔드 법칙은 인지 편향의 한 종류이며 '기억 편향(memory bias)'이라고도 알려져 있다.
인지 편향에 대해 더 알아보고 싶다면 아래 글을 참고해도 좋다. 🥳
인지 편향, 그리고 UX
우리는 선택의 기로에서 종종 비합리적인 사고를 한다. 쇼핑 APP에서 어떤 것이 '나'에게 더 적합한 제품인지를 하나하나 따지기보다는, 인기순으로 나열된 리스트의 '100만개가 판매된', '3초에
layercco.com
🔺 주의
사람들은 긍정적인 순간보다 부정적인 순간을 더 생생하게 기억한다.
🔎 예시
아래 앱들은 마지막 순간에 신경을 기울여서 더 긍정적인 인상을 남겼다.
여러 레퍼런스를 확인해 본 결과, 이런 방법은 교육과 쇼핑 서비스에서 더 두드러지게 나타났다.
7. 심미적 사용성 효과
📃 이론
사용자는 보기 좋은 디자인을 사용성이 더 뛰어난 디자인으로 인식한다.
보기 좋으면, 사용자는 사소한 사용성 문제에 비교적 관대해진다.
🔺 주의
시각적으로 만족스러운 디자인은 사용성 문제를 가리고 사용성 테스트 중에 문제가 드러나는 것을 방해할 수 있다.
8. 폰 레스토프 효과
📃 이론
비슷한 사물이 여러 개 있으면 그중에서 가장 차이가 나는 한 가지만 기억할 가능성이 크다.
🔺 주의
특정 요소를 강조할 때 색상에만 의존하면 색맹이나 저시력인 사용자가 배제된다는 사실을 유념하기. (컬러로만 강조하면 X)
🔎 예시
아틀라시안의 디자인 시스템에서는 색상만으로 시각적 신호를 사용하지 말라고 가이드했다.
색상만으로 상태를 표시할 경우, 색맹이나 저시력인 사용자를 배제하는 것이기 때문에 좋지 않다.
9. 테슬러의 법칙
📃 이론
복잡성 보존의 법칙. 모든 시스템에는 더 줄일 수 없는 일정 수준의 복잡성이 존재한다.
디자이너는 복잡성을 관리할 책임이 있다.
🔺 주의
추상적으로 느껴질 정도로 인터페이스를 단순화해서는 안된다.
인터페이스의 복잡성을 줄이려고 시각정보의 양을 무턱대고 줄이면 사용자가 프로세스를 정상적으로 진행하고 필요한 정보를 얻는 게 불가능해질 수도 있다.
🔎 예시
현대카드 DIVE App은 많은 요소를 덜어내고 단순화하였다.
덕분에 심미성 면에서 이상적이고 간결한 GUI를 얻었지만, 사용자는 그만큼 추측하고 학습하여야한다.
특히나 앱바(app bar)의 중간에 위치한 '현대카드 Space•Culture'의 아이콘은 그 의미를 해석하기가 어려웠다.
아이콘에 텍스트 레이블만 추가해도 의미가 더 명확해질 뿐 아니라 사용자들이 더 수월하게 아이콘을 발견하고 인식한다는 걸 밝힌 연구가 많다. 내비게이션처럼 중요한 요소에 아이콘을 사용할 때는 더더욱 이런 방법을 활용하는게 좋다.
텍스트 레이블을 붙이면 의미를 전달하고 사용성을 높이는 추가정보가 더해져서 추상성은 효과적으로 감소한다.
- UX/UI의 10가지 심리학 법칙 56p
물론 반드시 텍스트 레이블을 붙여야 한다는 것은 아니지만, 레이블을 없애기로 마음먹었다면 반드시 그 의미를 이해할 수 있는 것이어야 사용자의 혼란을 막을 수 있다.
10. 도허티 임계
📃 이론
컴퓨터와 사용자가 서로를 기다리지 않아도 되는 속도(0.4초 이하)로 인터랙션 하면 생산성은 급격히 늘어난다.
사용자의 주의가 분산되는 것을 막고 생산성을 향상시키려면 시스템 피드백을 0.4초 이내에 제공해야 한다.
0.1초 이내 : 즉각적이라고 느낌
0.1~0.3초 지연 : 시스템이 자신의 통제에서 벗어나고 있다고 느낌(맨눈으로 감지되는 수준)
1초 이상 지연 : 사용자가 집중하기 어려워지고, 필요한 정보를 놓치기 시작함
TIP 1) 10초 이상 기다려야 할 때는 진행표시줄과 예상 대기시간, 수행 중인 작업에 대한 설명을 추가로 제공하면 좋다.
🔺 주의
집중을 유지할 수 있는 한계는 일반적으로 10초.
성능은 개발팀만 고려하면 되는 기술적인 문제가 아니라 본질적인 디자인 요소다.
마무리
책에서는 10가지의 심리학 법칙만 소개하고 있지만, 저자인 존 야블론스키의 UX법칙 공식홈페이지에 접속하면 총 21가지의 심리학 법칙에 대해 설명하고 있다.
더 다양한 시각을 가지고싶다면, 아래 레퍼런스 문서에 추가한 Laws of UX페이지를 방문하여 보기를 추천한다.
Ref.
Home | Laws of UX
Laws of UX is a collection of best practices that designers can consider when building user interfaces.
lawsofux.com
CC
주니어 디자이너의 주관 기르기
오늘도 디자이너들은 수많은 레퍼런스를 수집한다. 내 디자인의 완성도를 높여줄 레퍼런스는 무엇일까? 👀 (기웃기웃) 하지만 이 때, 나와 같은 주니어 디자이너는 빠지기 쉬운 함정이 있는데,
layercco.com
'Design > UXUI' 카테고리의 다른 글
| 그로스해킹(Growth Hacking), 데이터를 '제대로' 활용하는 방법 (0) | 2023.12.26 |
|---|---|
| 인지 편향, 그리고 UX (0) | 2023.04.03 |