[북리뷰 A to Z] UX/UI의 열 가지 심리학법칙
주의) 심리학 법칙은 만능이 아니에요. 필요할 때만 휘둘러(?)주세요
북리뷰로 넘어가기에 앞서, 꼭 하고 싶은 말이 있습니다.
이 책의 내용은 만능이 아닙니다.
무슨 말이냐면 무작정 아래처럼 커뮤니케이션 하지 않았으면 좋겠다는 겁니다.
"힉의 법칙에 따르면 선택성의 개수에 따라서 복잡성과 의사결정에 걸리는 시간이 늘어난다는데 메뉴의 개수를 더 줄여야 하지 않을까요? 메뉴를 더 늘리는건 반대합니다."
중국집에서 메뉴를 결정할 때 힉의 법칙에 따라 짜장면과 탕수육과 짬뽕만 팔아야 할까요?
저는 아니라고 생각합니다.
누군가는 볶음밥도 좋아할 것이고 어향가지도 좋아할 것입니다.
메뉴를 추가할 때는 오히려 아래와 같이 생각해야 합니다.
우리 가게에 누가 오는지 / 사람들은 어떤 음식을 좋아하는 지 / 어떤 메뉴를 우리가 만들 수 있고 그 때 얼마나 리소스 (돈과 시간) 이 필요한지 / 팔았을 때 얼마의 수익이 기대되는 지 등.. 정작 더 중요한게 많다고 봅니다.
UX/UI 분야에서 실무를 하다보면 아끼는 나의 기획과 디자인을 설득해야 할 과정이 있고, 그 때 심리학 법칙을 "활용"할 수는 있겠지만 심리학 법칙이 주된 or 유일한 이유가 되어서는 안된다고 생각합니다.
사용자의 입장에서, 사용자의 언어에서 설계하고 이를 바탕으로 설득해내야 한다고 생각합니다.
심리학 법칙은 엑스칼리버가 아닙니다. 필요할 때만 휘둘러(?)주세요 이제 심리학 법칙이 엑스칼리버가 아니라는 것을 알았다면 책 내용으로 넘어가봅시다.
1. 제이콥의 법칙
사용자는 여러 사이트에서 대부분의 시간을 보낸다. 그래서 여러분의 사이트도 자신이 이미 알고 있는 다른 사이트들과 같은 방식으로 작동하길 원한다.
핵심요약
사용자는 자신에게 익숙한 제품을 통해 구축한 기대치를 그와 비슷해 보이는 다른 제품에도 투영한다.
기존의 멘탈모델을 이용하면 사용자가 새 모델을 익히지 않아도 작업에 돌입할 수 있는 뛰어난 사용자 경험이 완성된다.
변화를 꾀할 때는 사용자에게 익숙한 모델을 한시적으로 이용할 권한을 부여해서 불협화음을 최소화 하자.
기타
재어 패널 (오프라인) 과 구글 매터리얼 디자인의 토글, 라디오 버튼은 상당히 닮아있다. 오프라인의 멘탈모델이 온라인으로 넘어온 사례.
변화를 꾀할 때는 변화에 적응할 기간 완충장치를 두어라. 구글 캘린더, 유튜브가 그러했던 것 처럼.
자동차의 좌석제어장치도 멘탈모델의 좋은 활용 예시이다.
2. 피츠의 법칙
대상에 도달하는 시간은 대상까지의 거리와 대상 크기와 함수 관계에 있다.
핵심요약
터치 대상의 크기는 사용자가 정확하게 선택할 수 있을 정도로 커야 한다.
터치 대상 사이에 충분한 거리를 확보해야 한다.
터치 대상은 인터페이스 상에서 쉽게 도달할 수 있는 영역에 배치되어야 한다.
기타
난이도는, 터치 대상까지의 거리에 비례하고, 터치 대상의 크기에 반비례한다.
결국 피츠의 법칙의 핵심은 마지막 입력 폼 → 액션 예)확인 간의 거리가 짧아야 한다는 것이며, 오동작을 하면 안되는 액션간에는 적당한 간격을 두어야 한다는 것이다.
3. 힉의 법칙
의사결정에 걸리는 시간은 선택지의 개수와 복잡성에 비례해 늘어난다.
핵심요약
의사결정 시간이 반응 시간에 큰 영향을 받을 때는 선택지의 개수를 최소화하라.
인지 부하를 줄이려면 복잡한 작업을 잘게 나눠라.
추천 선택지를 강조해서 사용자의 부담을 줄여라.
신규 사용자의 인지 부하를 줄이려면 온보딩을 점진적으로 진행하라.
추상적으로 느껴질 정도로 단순화하지 않도록 주의하라.
기타
예시 - 집에가면 볼 수 있는 리모컨들. 버튼이 너무 많다 → 할아버지용 리모컨이라고 불리는 리모컨들도 등장함. 버튼 몇개를 빼고 다 테이프로 막아버린. 선택지를 제해야 사용성이 올라간다는 예시. 최근 티비 리모컨은 간단한 것 같다.
예시 - 구글 : 검색의 경우, 필터링 검색기능은 우선 검색을 한 이후에. 검색과정에서 정보의 부하를 줄이려는 노력.
너무 지나친 단순화는 독이다. 간단하면 좋다고 ? → 단순화 → 추상화의 단계로 접어들면 독이 된다. EX) 하단 바 아이콘들. 이 경우 아이콘과 Label을 같이 사용하면 직관성을 높일 수 있다.
4. 밀러의 법칙
보통 사람은 작업기억에 7 +-2개의 항목밖에 저장하지 못한다.
핵심요약
마법의 숫자 7을 내세워서 불필요한 디자인 제약을 정당화 하지마라.
사용자가 쉽게 처리하고 이해할 수 있게 콘텐츠 덩어리를 잘게 나눠서 정리하라.
단기 기억 용량은 사람에 따라, 그리고 기존 지식과 상황적 맥락에 따라 달라진다는 것을 기억하자.
기타
5~9가 단기기억 용량의 범위다. 라는건 크게 신경쓰지 말자. 핵심은 chunk. 정보를 적당한 그룹으로 묶어야 기억하기 쉽다는 것. ex) 302-1164-3950-41 에 10000원만 보내주세요 // 페이지에서 정보끼리 여백을 두고, title로 묶는 것도 좋은 방법이다.
5. 포스텔의 법칙
자신이 행하는 일은 엄격하게, 남의 것을 받아들일 때는 너그럽게.
핵심요약
사용자가 어떤 동작이나 입력을 하든지 공감하는 태도로 유연하고 관대하게 대처하라.
인터페이스의 안정성과 접근성을 보장하되, 입력,접근성,성능 면에서 만반의 준비를 하자.
다양한 가능성에 대해 잘 예측하고 준비하고 대비할 수록 디자인 회복 탄력성은 좋아진다.
사용자의 가변적인 입력을 수용해서 기계가 이해할 수 있는 방식으로 해석하라. 입력의 한계를 정의하고 사용자에게 명확한 피드백을 제공하라.
기타
input을 받는 경우, 어떤 input이 오더라도, block이나 에러메시지로 관대하게 잘 대처.
반응형 웹사이트는 아주 좋은 예시이다.
디자인 시스템을 구축할 때도, 여러 요구사항은 관대하게 받아들이되, 실제 개발이나 구축시에는 엄격하게.
ex) 검색기능을 만들 때, 음성인식 기능이 가능한 디바이스의 경우 음성인식 버튼을 보여주고, 그렇지 않은 경우에는 텍스트 검색만 보여주기도 좋은 예시.
아마존의 경우, 사용자 디바이스의 기본 글꼴에도 아주 잘 대처한다. 아주 좋은 예시. 나중에 적용해 봐도 좋을 것 같다.
6. 피크엔드의 법칙
인간은 경험 전체의 평균이나 합계가 아니라, 절정의 순간/마지막 순간에 느낀 감정을 바탕으로 경험을 판단하는 경향이 있다.
핵심요약
사용자 여정 중 가장 강렬한 순간과 마지막 순간을 세심하게 신경 쓰자.
제품이 사용자에게 가장 큰 도움을 주는 순간, 혹은 가장 중요하게 여겨지는 순간, 가장 큰 즐거움을 주는 순간 등을 알아내라.
사람들은 긍정보다 부정적인 순간을 더 생생하게 기억한다.
기타
우리 서비스에서 가장 강렬한? 마지막? 가장 중요하게 여겨지는? 가장 큰 즐거움을 주는 순간은 언제인가? 그 시점의 경험이 잘 설계되어있는가?
메일침프 - 피크엔드 법칙의 예시. 담당자가 열심히 준비한 이메일을 발송한 시점을 노렸다. 그 순간에 you are about to send a campaign to : ~~~ . This is your moment of glory. 라는 메시지. 보낸 다음에도 하이파이브! 잘했어요 등등 메시지 보여줌.
또한, 부정적일 수 있는 순간. ex) 에러페이지, 로딩중 일 때 페이지나 인터렉션 디자인을 잘 하는 것도 피크엔드 법칙에 의하면 중요하다.
7. 심미적 사용성 효과
사용자는 보기 좋은 디자인을 사용성이 더 뛰어난 디자인으로 인식한다.
핵심요약
보기 좋은 디자인은 인간의 뇌에 긍정적 반응을 일으켜 사용자로 하여금 제품이나 서비스의 사용성이 뛰어나다는 생각이 들게 한다.
제품이나 서비스의 다지인이 보기 좋으면, 사용자는 사소한 사용성 문제에 비교적 관대해 진다.
시각적으로 만족스러운 디자인은 사용성 문제를 가리고, 사용성 테스트 중에 문제가 드러나는 것을 방해할 수 있다.
8. 폰 레스토프 효과
비슷한 사물이 여러 개 있으면, 그중에서 가장 차이가 나는 한 가지만 기억할 가능성이 크다.
핵심요약
중요한 정보나 핵심 동작은 눈에 띄게.
시각적 요소를 강조할 때는 제한을 두어서, 각 요소 간 경쟁을 피하고 가장 중요한 항목이 광고로 오인되지 않게 하라.
특정 요소를 강조할 때 색상에만 의존하면 색맹이나 저시력 사용자가 배제될 수 있고, 움직임으로 강조하면 움직임에 민감한 사용자가 배제될 수 있다.
기타
ex) 계정을 삭제하시겠습니까? [취소] [[삭제]]
ex) basic plan / ⭐advanced plan [best] / master plan
9. 테슬러의 법칙
모든 시스템에는 일정 수준 이하로 줄일 수 없는 복잡성이 존재한다.
핵심요약
복잡성에는 하한이 있다. 시스템이나 사용자 중 한 쪽이 감당해야 한다.
시스템이 감당하면, 사용자의 부담이 줄어든다.
하한이 있으므로 그 이하로 복잡성을 줄이게 되면 추상화의 영역이 된다. 이 경우, 사용성은 저해될 것이다.
기타
ex) 배송지 주소는 청구지 주소와 같습니다. 체크하면 정보를 자동으로 불러옴.
ex) 배송 서비스들의 기본 배송지 지정. 등등 각 계약 건마다 필수적인 정보가 있고, 미리 저장/ 불러오기 등등을 통해 시스템이 복잡성을 감당하면 사용자는 편해진다.
하한을 넘어서 간단하게 만들다가, 추상화를 하지마라.
10. 도허티 임계
컴퓨터와 사용자가 서로를 기다리지 않아도 되는 속도 ( 0.4초 이하)로 인터렉션 하면 사용성/생산성은 급격히 높아진다.
핵심요약
주의분산을 막고, 생산성을 높이려면 0.4초 이내에 시스템 피드백을 제공.
0.4초보다 더 걸린다면, 애니메이션으로 로딩아니 프로세싱이 진행되는 동안 시간을 끌어라.
progress bar 을 보여주면 대기시간에 좀 더 관대해 진다.
실제 작업이 더 빨리 완료되어도 오래걸린 척 하는것이 가끔 효과적일 수도 있다. ex) 보안검사.
기타
페이지의 뼈대만 미리 로딩하는 것도 좋은 예시. 뼈대 보여주고 콘텐츠를 채우는 방식은 사용자로 하여금 더 빨리 로딩되었구나 라고 느끼게 한다. 혹은 블러 업 효과로 이미지를 블러로 보여주다가 제대로 보여주는 것도.
보안검사 시에 너무 빨리 끝내면 대충하는 줄 알 수 있다. 실제로도, 더 오래걸린다고 보여주는 경우도 있다.
힘에는 책임이 따른다.
기술이 행동을 형성한다. 악용하지 말자. ex) 다크넛지. ex) 비싸게 사기. ex) 할인 안받고 바보처럼 비싼거 사기.
보상의 경우, 가변적 보상이 큰 동기가 된다. ex) 도박. 게임의 뽑기 시스템.
의도는 좋았으나, 결과가 나쁠 수 있다. ex) 카메라 필터들이, 성형수술로 이끄는 케이스. ex) 인스타그램 자랑을 위해 무리하게 빚을 내서 물건을 사는 등 행위.
윤리적 책임도 중요하다.
행복경로를 뛰어넘어 생각하라. 종종 가장 좋은, 바람직한. 편한 시나리오만 생각할 것이다. but 행복경로를 벗어나는 시나리오 고려 없이 규모만 키운다면 시한폭탄이 된다.
디자인 ,심리학을 만나다.
심리학 법칙+디자인 법칙이 실제 구현으로 연결되는 케이스를 소개함.
디자인 원칙은 목표가 되고, 심리학 법칙은 근거가 된다. 이제 가이드라인(규칙)을 세우고, 실행한다. ex) 다양한 선택지를 제공하는 것보다 명확성이 중요하다. 라는 디자인 원칙은 힉의 법칙(선택지 개수 증가 →복잡성 증가) 과 잘 어울린다. 이를 바탕으로 규칙을 세우면 다음과 같다. 선택지의 개수는 3개를 넘지 않는다.
(이 글은 '위클리 UX/UI 분석 챌린지' 스터디 참여를 위해 작성된 글입니다.)
(기획자,디자이너,취준생 등 직군 연차 관계없이 UX UI에 관심있다면 누구나 스터디에 참여할 수 있습니다)
(매주 앱 or 웹 UX/UI분석, 아티클공유, 북리뷰 중 원하는 방식으로 인증에 참여하며 함께 성장해보세요!)
