알아두면 좋은 21 Laws of UX (1)
Jon Yablonski가 말하는 21가지 UX/UI 심리학 법칙
들어가며
'UX/UI의 10가지 심리학 법칙' 으로 유명한 디자이너 겸 작가 존 야블론스키의 웹사이트에 들어가면 총 21가지의 UX/UI 법칙을 접할 수 있다. 21가지를 모두 달달 외울 필요도 없고, 그 중 유명한 10가지만 알아두어도 충분하겠지만, 그래도 다양한 법칙을 알아두면 나쁠 건 없으니 한번 정리해보도록 하겠다.
존 야블론스키는 UX의 법칙을 HEURISTIC, PRINCIPLE, GESTALT와 COGNITIVE BIAS의 4가지 카테고리로 분류해놓았다. 각 카테고리 별로 살펴보도록 하자.
4가지 카테고리HEURISTIC
경험이나 직관, 시행착오를 통해 얻은 지식이나 규칙
미적-사용성 효과 (Aesthetic-Usability Effect)
사용자는 보기 좋은 디자인을 사용성이 더 뛰어난 디자인으로 인식한다.
사람들은 제품이나 서비스의 디자인이 뛰어나면 성능 또한 좋을 것이라고 인식한다는 것이다. 디자인이 보기 좋으면 사용성에 어느 정도 문제가 있어도 이에 대해 관대해진다. 다만 심미성이 높은 디자인은 메이커(디자이너 개발자 등) 입장에서도 사용성 문제를 발견하는 것을 방해할 수도 있기에, 이 점을 유의해야 한다.
심미적 디자인의 대표적인 예시로는 애플이 있다. 애플의 심플하고 간결하면서 엣지있는 디자인은 왠지 모르게 유저로 하여금 성능도 더 뛰어날 것이라는 인식을 준다.
아이패드 프로 광고 (애플 웹사이트)피츠의 법칙 (Fitts’s Law)
대상에 도달하는 데 걸리는 시간은
대상까지의 거리와 대상의 크기에 의해 결정된다.
무슨 말인지 확 와닿지는 않지만, 전달하고자 하는 뜻은 매우 단순하다.
스크린 터치(클릭) 미스를 줄이기 위해서는 터치(클릭) 대상이 충분히 커야하고, 터치(클릭)대상 간의 간격이 충분히 넓어야 하며, 터치(클릭)하기 용이한 곳에 위치해야 한다는 뜻이다. 만약 터치나 클릭이 어렵거나 지속적으로 미스클릭을 유발하면 사용자 경험은 크게 저하될 수 밖에 없다. 다음의 그림 예시를 보면 무슨 뜻인지 쉽게 이해할 수 있다.
엄지가 충분히 잘 닿는 곳에 버튼이 위치해야 한다. (출처: Excellarate)목표 그라데이션 효과 (Goal-Gradient Effect)
목표에 가까울수록 목표에 도달하려는 경향이 증가한다
보다 목표에 접근할수록 사람들의 목표 달성에 대한 열의가 높아지는 현상으로, 쉽게 말해 사람들은 목표에 접근해가고 있다는 확신이 있어야 더욱 적극적으로 목표 달성을 위해 노력한다는 말이다. 이를 위해서는 사용자에게 작업 진척도를 보여줄 필요가 있다. 회원가입 절차에서 흔히 볼 수 있는 "이제 마지막 단계가 남았어요!" 등의 UX라이팅이 이에 해당된다고 볼 수 있다. 예를 들어 밑의 그림은 토스에서 현재 내가 가입한 보험 리스트를 확인하기 위한 본인 인증 절차 마지막 구간의 UX라이팅이다. 지속된 공인인증서 확인으로 피로해진 유저가 이탈할 수 있는 상황에서 "마지막으로 동의해주세요"라는 문구를 통해 절차가 끝이 났음을 암시하고 유저를 안심시킨다.
(출처: 토스 App)힉의 법칙 (Hick’s Law)
의사결정에 걸리는 시간은 선택지의 개수와 복잡성과 비례해 늘어난다.
쉽게 말해서 좋은 UX는 유저의 의사결정을 도울 수 있어야 한다는 것이다. 선택지를 최소화하면 유저의 의사결정 시간을 단축할 수 있다. 같은 맥락에서 복잡한 과업의 경우 보다 작은 단계로 나누면 유저가 느끼는 부담을 줄일 수 있게 된다. 유저의 부담을 줄이는 다른 방법으로는 선택지를 직접 추천해주는 방법이 있다. 힉의 법칙은 특히 새로운 유저를 위한 점진적 온보딩의 중요성을 강조한다. 한마디로 유저가 새로운 것에 잘 적응할 수 있도록 차근차근 알려줘야 한다는 뜻이다. 대표적인 예시는 구글의 메인 페이지다. 구글은 검색엔진으로써 유저의 '검색' 행위를 방해할 수 있는 요소를 전부 제거했다. 선택지가 오로지 '검색' 뿐이기 때문에 구글에서 우리는 의사결정을 내리는데 1초도 채 걸리지 않는다.
오로지 '검색' 기능만 제공된다. (출처: Google)제이콥의 법칙 (Jakob’s Law)
사용자는 대부분의 시간을 다른 사이트에서 보낸다. 그래서 당신의 사이트도 자신이 이미 알고 있는 다른 사이트들과 같은 방식으로 작동하길 원한다.
사용자들은 이미 써 본 제품이나 서비스에서 형성된 기대치를, 유사한 다른 제품이나 서비스에 그대로 적용한다는 것이다. 즉 무언가를 만들 때는 기존의 유사한 서비스의 틀에서 크게 벗어나지 말자는 법칙이다. 유저가 새롭게 적응할 필요가 없어지기 때문이다. 또한 변화가 필요할 때에는 한시적으로 유저가 기존의 버전을 이용할 수 있도록 옵션을 제공하는 것이 좋다고 말한다. 대표적으로 앱이나 웹에서 '구버전으로 계속 보기' 등의 옵션이 있다. 우리가 이미 익숙한 UI를 과감하게 없애는 것이 아닌 서서히 없애는 과정으로 제이콥의 법칙이 적용된 사례다. 넷플릭스와 왓챠의 UI를 보면 제이콥의 법칙을 이해할 수 있다. 아이콘의 모양, 레이아웃, 콘텐츠 배치 등 UI가 상당부분 유사하다. 사용자가 이미 손에 익은 UI을 선호하기 때문이다.
왓챠와 넷플릭스의 유사한 UI (출처: 각 Watcha, Netflix App)밀러의 법칙 (Miller’s Law)
평균적으로 사람이 한번에 기억할 수 있는 정보의 양은 7개 전후이다.
밀러의 법칙에 의하면 중요한 것은 '7'이라는 숫자가 아닌, 인간은 덩어리를 활용해서 정보를 암기할 때 가장 효과적으로 암기할 수 있다는 것이다. 즉, 사이트의 콘텐츠를 작은 덩어리로 나누어 배치하면 콘텐츠를 접할 때 유저가 더 쉽게 정보를 찾고 사용할 수 있게 된다. 이를 청킹(Chunking)이라고 하는데, 밀러의 법칙 = 청킹으로 이해하면 쉽다. 청킹의 예시로는 네이버를 보면 되겠다. 네이버는 하나의 페이지 내에서 방대한 정보를 제공하지만, 청킹을 통해 사이트의 복잡성을 크게 줄였다. 예를 들어 아래의 그림처럼 <검색창>, <뉴스스탠드>, <오늘 읽을만한 글>, <트렌드쇼핑>, <배너광고란> 등 작은 카테고리로 청킹하였기 때문에 사용자는 별 다른 문제 없이 사이트를 이용할 수 있다.
파킨슨의 법칙 (Parkinson’s Law)
업무를 마치는 데 걸리는 시간은 업무를 위해 할당된 시간만큼 늘어난다.
사람들은 작업이 주어졌을 때 작업을 완료하기 위해 필요한 시간이 얼마인지 생각하는 것이 아니라 작업을 완료하는 데 주어진 시간이 얼마인지 생각한다. 필자의 경우 대학 시절 교수님이 과제를 제출하는 데 2주의 시간을 주면, 2주가 거의 다 되어서야 과제를 시작하는 과거의 모습을 떠올렸다. 결국엔 작업을 마치는 데 주어진 시간만큼 소요된다는 것이다. 즉 파킨슨의 법칙은 일상에서 흔히 볼 수 있는 업무 수행의 효율성과 비효율성에 대해 말하고 있다. UX관점에서 핵심은 유저에게 있어서 불필요한 과정을 최소화할수록 좋다는 것이다. 양식을 작성하는 데 있어서 자동완성 기능을 제공하여 유저의 시간을 절약하는 것이 이에 해당될 수 있다. 예를 들어 네이버지도에서는 주소 자동완성 기능을 제공하여 주소를 적는데 걸리는 시간을 줄이고 있다. 일부 키워드만 쳐도 여러 주소를 제시해준다.
(출처: 네이버지도)PRINCIPLE
일반적인 가치, 목표, 철학 또는 방향성을 제시하는 법칙
도허티 임계 (Doherty Threshold)
컴퓨터와 사용자가 서로를 기다리지 않아도 되는 속도(0.4초 이하)로 인터랙션 하면 생산성은 급격히 높아진다.
유저의 집중력을 유지하고 생산성을 높이기 위해 약 0.4초 이내에 시스템 피드백을 제공해야 한다는 법칙이다. 사이트나 앱을 이용하게 되면 우리는 '다운로드', '페이지 로딩' 등 기다려야 하는 순간들을 마주친다. 이 경우 애니메이션을 제공하는 것은 유저의 지루함을 어느정도 해소하는 데 도움을 준다. 진행 표시줄 유저가 로딩 시간을 견딜 수 있도록 도와준다. 재밌는 점은, 때로는 '의도적으로 지연을 추가'하는 것이 오히려 프로세스의 신뢰성과 가치를 높일 수도 있다고 한다. 로딩 시간이 항상 나쁘지만은 않다는 것을 의미한다. 도허티 임계의 대표적인 예시는 스켈레톤 UI가 있다. 아래는 유튜브의 스켈레톤 UI로, "대충 여기에 컨텐츠가 뜰꺼에요"를 미리 보여주며, 체감 성능을 높혀 대기시간이 짧아보이는 효과를 구현했다.
(출처: 유튜브)오캄의 면도날 (Occam’s Razor)
모든 것이 똑같은 조건일 때, 가장 쉬운 설명이 가장 옳은 것이다.
간단히 말해, 더 복잡한 이론이나 설명보다 더 간단한 이론이나 설명이 더욱 우수하다는 것을 의미한다. "Simple is the best" 라는 문구와 일맥상통한다. 오캄의 면도날을 잘 적용하는 기업으로는 토스가 있다. 'Weed Cutting(잡초 뽑기)'는 불필요한 모든 단어와 문장을 제거하여 최대한 간결한 UI를 제공하자는 토스의 주요 UX 라이팅 원칙이다.
(출처: Toss tech)파레토 법칙 (Pareto Principle)
결과의 약 80%는 20%의 원인에서 발생한다.
20:80 법칙이라고도 불리는 파레토 법칙은 어떤 작업의 20%의 노력으로 80%의 결과를 얻을 수 있다는 원리를 말한다. 예를 들어 온라인 쇼핑몰에서 100개의 제품 중 20%의 제품이 80%의 매출을 차지한다면, 파레토 법칙에 따라 이 쇼핑몰은 가장 인기 있는 20%의 제품에 더욱 집중하여 사용자 경험을 최적화할 수 있다. 방법은 여러가지가 될 수 있다. 인기 있는 제품을 더욱 눈에 띄게 배치하거나, 사용자가 해당 제품들을 더 쉽게 찾을 수 있도록 검색 기능을 개선하는 등이다. 예를 들어 컬리는 <베스트> 카테고리를 통해 사람들이 많이 찾는 제품들, 즉 매출을 책임지는 제품들을 유저가 쉽게 찾을 수 있도록 UI를 설계했다.
(출처: 컬리 App)포스텔의 법칙(Postel’s Law)
남의 것을 받아들일 때는 너그럽고, 자신이 행하는 일에는 엄격하라
유저의 모든 행동을 너그럽고 관대하게 받아들여야 하고, 반대로 유저에게 제공하는 서비스는 모든 면에서 엄격하게 관리되고 통제되어야 한다는 뜻이다. 쉽게 말해, 소프트웨어를 만들때는 항상 '최악의 경우'를 고려해야 하며, 유저를 마치 아기 다루듯이 해야 좋은 UX 경험을 만들어낼 수 있다는 것이다. 이와 관련된 속담으로는 "개떡같이 말해도 찰떡같이 알아듣는다." 가 있을 수 있겠다. 포스텔의 법칙은 실생활에서 흔히 볼 수 있다. 예를 들어 네이버나 구글 지도는 유저가 제시한 루트대로 가지 않았을 경우를 대비하여 항상 대안 경로를 제공한다. 또 문서를 작성할 때 글을 저장하지 않고 창닫기를 클릭하면 '정말 창을 닫겠습니까? 저장하지 않은 경우 모든 데이터가 날라갑니다." 등 창을 닫기 전 발생하는 팝업창이라든지, 아니면 노트북과 핸드폰, 태블릿에 따라 사이즈가 변형되는 반응형 디자인 등이 포스텔 법칙의 예시가 될 수 있다. 유저에게 명확한 피드백을 제공하는 것도 포스텔 법칙의 주요 내용 중 하나이다. 예를 들어 토스에서 송금 시 잘못된 금액을 선정하면 토스는 빨간 글씨를 통해 문제점을 명확하게 보여주고, 송금 가능한 금액으로 변경해주는 버튼까지 제공한다.
(출처: 토스 App)테슬러의 법칙 (Tesler’s Law)
모든 시스템에는 더 이상 줄일 수 없는 일정 수준의 복잡성이 존재한다.
모든 프로세스에는 더 이상 처리할 수 없는 기본적인 복잡성이 존재하므로 이는 결국 시스템이나 사용자 중 한쪽이 감당해야 한다. 즉 유저도 어느 정도의 복잡성은 안고 갈 수 밖에 없는데, 이 경우 설계 및 개발 과정에서 내재된 복잡성을 처리하여 유저의 부담을 최대한 덜어주는 것이 중요하다.다시 말하지만 일정 수준의 복잡성은 나쁜 것이 아니라 불가피한 것이다. 따라서 복잡성을 없애기만 하려고 해선 안되고, 오히려 과도한 단순화는 제품이나 서비스를 추상화하여 UX를 저하할 수 있다. Face ID를 예로 들어보자. Face ID는 잠금 해제를 위해 비밀번호를 입력해야 하는 불편함을 해소함과 동시에, '얼굴 인식' 이라는 최소한의 복잡성을 지니고 있다. 이 프로세스를 이보다 더 단순화하는 방법은 아예 잠금 기능을 없애는 것이다. 하지만 이는 보안의 문제를 일으킨다. 더 이상 줄일 수 없는 복잡성인 것이다.
(출처: 애플 공식 웹사이트)끝맺으며
나머지, 즉 GESTALT와 COGNITIVE BIAS 카테고리 내의 법칙들은 다음 글에서 마저 소개하도록 하겠다.
