brunch

라이킷 132 댓글 2

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by Hyemin Jung Nov 01. 2021

UX/UI의 10가지 심리학 법칙 ①

디자이너가 엿본 사용자의 마음

UX/UI 디자이너가 왜 심리학을 알아야 하는 것 일까?

유저의 경험을 설계하고 디자인하기 위해서는 인간의 행동과 마음을 연구하는 심리학이 설명의 근거가 될 수 있기 때문이다.

입문자에게 10가지의 심리학 법칙은 디자인에 이유를 더하기 편한 근거이자 기존 앱 서비스의 사례가 되었다.

이 책은 https://lawsofux.com/에서 자세히 살펴볼 수 있다.

1장 | 제이콥의 법칙

사용자는 여러 사이트에서 대부분의 시간을 보낸다. 그래서 여러분의 사이트도 자신이 이미 알고 있는 다른 사이트들과 같은 방식으로 작동하길 원한다.

1. 사용자는 자신에게 익숙한 제품을 통해 구축한 기대치를 그와 비슷해 보이는 다른 제품에도 투영한다.
2. 기존의 멘탈 모델을 활용하면 사용자가 새 모델을 익히지 않아도 바로 작업에 돌입할 수 있는 뛰어난 사용자 경험이 완성된다.
3. 변화를 꾀할 때는, 사용자에게 익숙한 모델을 한시적으로 이용할 권한을 부여해서 불협화음을 최소화하라.

✔️사용자가 새로운 경험을 이해하기 위해 기존 경험을 활용한다는 사실

핀테크 서비스들의 UI에서 제이콥의 법칙을 찾아볼 수 있었다. 카드형 디자인 방식을 통해 여러 기능을 그룹 지어 인식하도록 했다. 쉬운 사용성의 멘탈 모델(카드형 컴포넌트)을 활용하여 낯설지 않으며 이해하기 쉬워 사용자가 빠르게 적응하도록 유도했다.

인터페이스를 익히는 데 드는 정신적 에너지가 줄어들수록, 사용자가 목표 달성에 투자할 에너지는 늘어난다.

2장 | 피츠의 법칙

대상에 도달하는 시간은 대상까지의 거리와 대상의 크기와 함수 관계에 있다.

1. 터치 대상의 크기는 사용자가 정확하게 선택할 수 있을 정도로 충분히 커야 한다.
2. 터치 대상 사이에 최소 8dp이상의 충분한 거리를 확보해야 한다.
3. 터치 대상은 인터페이스상에서 쉽게 도달할 수 있는 영역에 배치해야 한다.

✔️ 모바일 인터페이스를 디자인할 때는 화면이 작으므로, 피츠의 법칙을 각별히 유념

유튜브에서 명확하게 클릭할 수 있는 버튼 크기는 최소 50px이상이었으며, 버튼 사이의 간격은 최소 8px이상이었다.

(* Pixel : 화면을 구성하는 가장 기본이 되는 단위 / Dpi : Dots per inch로 해상도를 의미

/ Dp : 안드로이드 기기마다 스크린 크기와 해상도가 달라 통합적으로 사용될 수 있는 가상의 Pixel 개념)

쇼츠에선 Thumb Zone을 고려하여 가장 편안하고 쉽게 도달할 수 있는 영역에 주요 기능을 배치했다.

3장 | 힉의 법칙

의사결정에 걸리는 시간은 선택지의 개수와 복잡성과 비례해 늘어난다.

1. 의사결정 시간이 반응 시간에 큰 영향을 받을 때는 선택지의 개수를 최소화하라.
2. 인지 부하를 줄이려면 복잡한 작업을 잘게 나눠라.
3. 추천 선택지를 강조해서 사용자의 부담을 줄여라.
4. 신규 사용자의 인지 부하를 줄이려면 온보딩(onboarding)을 점진적으로 진행하라.
5. 추상적이라고 느껴질 정도로 단순화하지 않도록 주의하라.

✔️ 디자이너는 효율적이고 간결한 방식으로 복잡성을 단순화해야 함

힉의 법칙은 사용자 경험(UX) 디자인의 핵심 개념이다.

오늘의 집은 정보 찾기 프로세스를 단순하게 만들어 사용자가 쉽게 알아보도록 맥락에 관한 단서를 제공했다.

목표 달성을 위해 무엇을 해야 할지 덜 고민할 수 있다면, 목표를 성취할 확률은 더 높아질 것이다.

4장 | 밀러의 법칙

보통 사람은 작업 기억에 7개의 항목밖에 저장하지 못한다.

1. '마법의 숫자 7'을 내세워서 불필요한 디자인 제약을 정당화하지 마라.
2. 사용자가 쉽게 처리하고 이해하고 기억할 수 있게 콘텐츠 덩어리를 작게 나눠 정리하자.
3. 단기 기억 용량은 사람에 따라, 그리고 기존 지식과 상황적 맥락에 따라 달라진다는 것을 기억하자.

✔️ 덩어리화는 UX 디자인에서 콘텐츠를 다룰 때 큰 도움

콘텐츠를 적절히 덩어리로 나누면 이해하기 쉬운 디자인이 완성된다.

네이버는 사용자가 덩어리 된 기능을 훑어보고 필요한 정보를 선택해 자신의 목표를 더 빠르게 이루도록 했다.

콘텐츠를 시각적으로 뚜렷이 구별되는 그룹으로 나누고 명확하게 체계화하면 정보를 쉽게 얻을 수 있다.

5장 | 포스텔의 법칙

자신이 행하는 일은 엄격하게, 남의 것을 받아들일 때는 너그럽게.

1. 사용자가 어떤 동작이나 입력을 하든지 공감하는 태도로 유연하고 관대하게 대처하라.
2. 인터페이스의 안정성과 접근성을 보장하되, 입력, 접근성, 성능 면에서 만반의 준비를 하자.
3. 다양한 가능성에 대해 잘 예측하고 대비할수록 디자인 회복탄력성은 좋아진다.
4. 사용자의 가변적인 입력을 수용해서 기계가 이해할 수 있는 방식으로 해석하라. 입력의 한계를 정의하고 사용자에게 명확한 피드백을 제공하라.

✔️다양한 가능성에 대해 너그럽게 수용할 수 있는 디자인 시스템