취미 부자들의 천국이 있다면 여기, 프립(Frip)
[코드스테이츠 PMB 11] Ep13. UX/UI의 10가지 심리학 법칙
사용자의 마음을 읽는 인간 중심 제품과 서비스 디자인
미국의 디자이너이자 작가, 존 야블론스키(Jon Yablonski)는 저서 'UX/UI의 10가지 심리학 법칙'이라는 책의 부제다.
어떤 사이트나 앱 서비스를 사용할 때 우리가 느끼는 마음의 상태가 있을 것이다. 가령 2022년에도 로그인 화면이 어딘지 모르게 올드한 감성이 느껴진다거나 서체나 포털사이트 메인이 난잡한 모양을 하고 있다면 사용자는 떠나버릴 것이다.
왜냐? 사용감이 좋지 않기 때문이다. 그 서비스 말고도 쓸 만한 대안재가 충분히 많은 세상에 우리는 살고 있다. 지금은 2022년이고 기술이 발전한 만큼 사용 경험이 좋지 않으면 사용자는 바로 이탈한다.
그렇기 때문에 UX/UI를 디자인할 때는 사용자가 편리하게 만들어야 하고, 서비스의 목적을 이룰 수 있게 사용자의 행동을 유도할 수 있어야 할 것이다.
다시 책으로 돌아가 보자. 책은 "좋아 보이는 것"의 비밀이 있다고 말하며 더욱 직관적이고 인간 중심적인 제품과 경험을 만드는 데 활용할 수 있는 10가지의 심리학 법칙을 소개한다. 사용자의 행동 방식과 디지털 인터페이스가 상호작용 하는 방식 이면에서 작동하는 심리학에 관해 다루고 있다. 인간이 디지털 인터페이스를 인지하고 처리하는 방식을 고려해 사용자 경험을 디자인하는 방법이 담겨 있다. 그렇다면 10가지의 심리학 법칙은 무엇일까?
Laws of UX : UX의 10가지 심리학 법칙
1. 제이콥의 법칙 : 사용자는 자신에게 익숙한 제품을 통해 구축한 기대치를 비슷한 다른 제품에도 투영한다.
2. 피츠의 법칙 : 터치 대상의 크기가 크고 인터페이스상 쉽게 도달할 수 있는 영역에 있어야 한다.
3. 힉의 법칙 : 의사결정의 시간이 반응 시간에 큰 영향을 받지 않도록 선택지의 개수를 최소화하라.
4. 밀러의 법칙 : 사람의 단기 기억 용량인 마법의 숫자 7로 콘텐츠 덩어리를 나눠 정리하자.
5. 포스텔의 법칙 : 사용자가 어떤 동작/입력을 하든 반응형으로 유연하게 대처하라.
6. 피크엔드의 법칙 : 사용자 여정 중 가장 강렬한 순간과 마지막 순간에 신경 써라.
7. 심미적 사용성 효과 : 보기 좋은 디자인은 인간의 뇌에 긍정적인 반응을 일으켜서 사용성을 뛰어넘는다.
8. 본 레스토프 효과 : 중요한 정보/핵심 동작은 시각적으로 강조하라.
9. 테슬러의 법칙 : 내재된 복잡성을 디자인과 개발 과정에서 처리하고 사용자의 부담을 최소화하라
10. 도허티 임계 : 사용자가 서로 기다리지 않도록 시스템 피드백을 0.4초 이내에 제공하라.
1. 취미 부자들의 천국이 있다면, 여기!
'프립(Frip)'은 아웃도어, 스포츠, 원데이 클래스, 여행상품, 모임 등 다양한 여가생활을 제공하는 호스트 기반의 취미 여가 플랫폼이다. 코로나19로 오프라인 활동이 위축되었음에도 불구하고 꾸준히 성장해 2022년 4월 기준 누적 회원 120만 명, 누적 호스트 1만 7천 명을 기록 중이다.
출처: 프립 홈페이지프립 홈페이지의 메인 화면이다. 홈 최상단을 보면 현재 진행하고 있는 프립과 이벤트 소개 배너가 뜨고 그 아래에 다양한 프립 카테고리가 눈에 띈다. 카테고리는 할인특가/프립버스/데이트추천/등산.트레킹/모임/공예.DIY/베이킹/미술.드로잉 등으로 나뉜다.
나는 새로운 활력이 필요할 때 다양한 경험에 노출되어 경험해보지 않았던 무언가를 시도해보는 걸 퍽 좋아하는 편이다. 최근 2~3년 간은 혼자서 또는 친구와 함께 뭔가를 배우러 다니는 데 열심히였던 것 같다. 도자기, 나무도마 만들기, 유화 그리기, 플라워 클래스는 원데이 클래스를 통해 배웠고 베이킹, 한식 요리와 와인은 백화점 문화센터에서 계절학기 과정을 들었다. 요리와 나는 전혀 인연이 없다고 믿고 살아왔지만 막상 해보니 시작도 하기 전부터 두려워할 게 아니라는 것과 생각보다는 맛이 괜찮다(?)는 놀라운 사실을 알게 되었다.
나처럼 다양한 분야에 관심이 많은 취미 부자들에게 프립은 천국과 같은 곳이 아닐까. 관심 분야의 취미를 다른 사람들과 함께 즐길 수 있다는 점은 더 매력적으로 느껴진다. 진작에 서비스를 알았더라면 자주 이용을 했을 텐데, 그러지 못해 아쉽지만 그래도 최근 눈독을 들이고 있는 게 있다. 게스트하우스나 숙박시설과 연계해 진행 중인 '제주 살기' 프로그램이다.
출처: 프립 홈페이지짧으면 일주일, 길면 이주 정도 제주도에서 여유롭게 책 읽고 산책하면 얼마나 좋을까 상상해 본다. 내킨 김에 떠나라는 내면의 소리가 자꾸만 나를 회유하고 있다. 이대로 모른 척 넘어가도 될까.
이벤트 소개 배너 아래에 보면 'F없는 프립 교양수업'이라는 메뉴의 UX Writing도 눈에 띈다. 프립의 첫 글자 F를 활용하여 프립의 교양수업 격에 해당하는 클래스들을 센스 있게 소개하고 있다. 실제로 프립 전체 회원의 92%가 2030 MZ세대라고 한다. 이들은 높은 재구매율과 브랜드 충성도로 프립에서 자신의 취향과 관심사를 나누며 커뮤니티를 형성하고 있다. 이는 분명 단순 여행상품과 차별화된 지점이며, 호스트 개인의 특성과 경험을 바탕으로 상품을 생산해 국내 여가 시장의 트렌드를 개척하고 있는 것으로 보인다.
최근 프립은 상품의 주요 공급원인 호스트와의 파트너십 강화를 위해 플랫폼 수수료를 반값 인하하기도 했다. 다양한 흥미와 능력을 보유하고 있는 신규 호스트님들이 프립에 더 많이 입성하게 되지 않을까? 그러면 또 다른 신규 이용자들이 새로운 경험과 추억을 쌓을 수 있는 건 덤. 이러니 역시 프립을 환영하지 않을 수가 없다.
2. '프립(Frip)'에서 발견한 UX심리학
제이콥의 법칙 Jackob's Law
사용자는 우리의 서비스가 다른 서비스들과 같은 방식으로 작동하길 기대한다.
프로덕트를 접하는 유저는 새롭게 학습하는 시간을 줄이기 위해 비슷한 사용 경험을 이어가고 싶어 한다. 그래서 제품이 속한 산업군의 다른 제품들과 비슷한 인터페이스를 제공해야 한다. 혁신적으로 사용성을 극대화할 수 있다면 모를까. 그렇지 않다면 비슷한 위치에, 비슷한 모양의 아이콘과 버튼을 만들어야 사용자가 쉽게 이해할 수 있다.
인터넷 쇼핑몰의 오른쪽 상단에 장바구니와 회원가입 버튼이 있고, 제품 페이지에 들어갔을 때는 상품 사진과 수량 아래에 구매하기 버튼이 있는 것이 그 예시이다. 괜히 다르게 만든다고 결제하기 버튼이 왼쪽 하단에 있다면..? 새로운 혁신은 좋지만 유저들의 기존에 경험했던 범위 내에서 시도해야 한다.
(좌) 프립 / (가운데) 마이리얼트립 / (우) 솜씨당프립은 프리 다이빙, 궁궐 투어, 딸기 농장 체험, 유기견 봉사 등 다양한 체험 클래스를 한곳에서 만날 수 있는 서비스인 만큼, 온라인 클래스도 제공하고 있지만 프립의 대부분의 클래스는 야외 활동이 주를 이룬다. 실내 등 한정된 공간 내에서 여가를 보내기보다 밖으로 나가 활동적인 시간을 보내고 여가를 제대로 즐길 환경을 마련해준다. 이 점에서 프립은 여행과 취미생활의 특성을 모두 가지고 있는 것으로 보인다.
프립과 비슷한 프로덕트인 여행 플랫폼 마이리얼트립과 취미와 원데이 클래스 플랫폼 솜씨당의 UX를 비교해 보았다.
세 서비스 모두 앱 화면 상단에는 체험 클래스, 여행도시나 상품을 검색할 수 있는 바가 있었고, 유저들에게 체험이나 여행을 독려하는 말을 건네는 카피를 보여주었다. 중간에는 각 상품과 컨텐츠를 카테고리별로 분류하여 노출하고 직관적인 아이콘을 사용해 유저가 바로 인지할 수 있도록 했다. 하단에는 가장 왼쪽에는 홈 버튼, 가장 오른쪽에는 마이페이지 또는 내 정보가 위치했다. 가운데에는 저장 또는 위시리스트 기능이 있었고, 공통적으로 피드, 커뮤니티, 채팅 기능을 포함하여 다른 유저들과 소통할 수 있는 공간을 마련해두었다.
비슷한 플랫폼과 유사한 인터페이스를 제공하여, 처음 플랫폼을 접한 고객이 프로덕트를 새롭게 학습하는 시간을 줄여주었다. 이를 통해 비슷한 프로덕트에서의 경험을 매끄럽게 이어갈 수 있도록 하였다.
힉의 법칙 Hick's Law
의사결정에 걸리는 시간은 선택지의 개수와 복잡성과 비례해 늘어난다.
유저가 새로운 의사결정에 걸리는 시간은 선택지의 개수와 복잡성과 비례해 늘어난다는 것은 선택지가 많아지면 그만큼 선택하는 시간이 늘어난다는 얘기다. 그래서 선택해야 할 항목의 개수를 최소화함으로써 빠르게 반응하여 의사결정을 내리도록 도와주어야 한다.
인터페이스를 익히고 인터렉션하는데 필요한 정신적 자원의 양을 인지 부하(Cognitive load)라고 하는데, 선택지가 많아지면 인지부하가 증가한다. 사용자의 피로감이 너무 높아지지 않게 UX를 설계해야 하므로 선택지수를 적절히 조절하는 것이 좋다.
(좌) 홈 화면 카테고리 / (가운데) 카테고리 구분 / (우)지역선택프립은 카테고리를 2*5 배열로 한눈에 보기 쉽게 배치하여 빠른 반응을 유도하고 있다. 주간 BEST와 할인특가도 포함하여 유저들에게 중요한 정보를 놓치지 않도록 한다. 하단 네비게이션 바에서 카테고리를 선택하면 모든 취미/체험군 카테고리를 확인할 수 있다. 취미 키워드와 배경 사진이 적절히 매치되고 잘 정렬되어 있어 빠르게 관심분야를 선택할 수 있도록 도와준다.
모든 카테고리 메뉴가 사진상 10개로 보이지만 그 아래에 여행, 티켓 카테고리가 더 있었다. 한 화면에 모두 담기지 않아 스크롤을 한번 내려야 했다. 취미/체험의 종류 자체가 많다 보니 다양한 클래스들을 알맞은 카테고리로 분류하여 보여주는 것이 쉽지는 않을 듯하다.
불필요한 부분, 사용자의 목표 달성에 도움이 되지 않는 요소들을 제거해야 하지만 프로덕트에 기능이 많아지면 자연스럽게 선택지가 많아질 수밖에 없다. 이 부분을 잘 개선한 서비스 사례가 궁금해진다.
지역선택 카테고리는 왼쪽에 일렬로 지역명이 정렬되어 있다. 모든 시·도를 나타내지 않고 전국의 거점 지역 중심으로 보여준다. 가령, 여기에서 '서울'을 선택하면 오른쪽에 서울 전체 지역구를 보여주는 식이다.
선택 항목의 수를 최소화하여 유저의 인지 부하를 줄여 주었다.
포스텔의 법칙 Postel's Law
자신이 행하는 일은 엄격하게, 남의 것을 받아들일 때는 너그럽게 대처하라.
사용자가 어떤 동작이나 입력을 하든지 공감하는 태도로 유연하고 관대하게 대처해야 한다. '자신이 행하는 일은 엄격하게'라는 부분은 디자인에 적용하면 인터페이스든 포괄적인 시스템이든 안정성과 접근성을 보장해야 한다는 뜻으로 해석할 수 있다. 기기의 크기나 기능, 입력 메커니즘, 보조 기술, 연결 속도까지도 누구에게나 정상 작동하는 인터페이스를 제공할 수 있어야 한다.
‘남의 것을 받아들일 때는 너그럽게’라는 부분은 사용자의 입력은 포맷이나 입력 메커니즘을 막론하고 무조건 수용해야 한다는 의미로 해석할 수 있다. 사용자의 입력은 마우스와 키보드, 보조 기술, 모바일 터치, 제스처, 음성 입력 등이다. 사용자가 채워야 하는 정보가 많아질수록 인지 에너지가 증가해 피로도가 커진다는 점을 기억하자.
프립의 마이페이지-내 정보에 들어가면 유저의 프로필 정보를 확인할 수 있다. 항목은 닉네임, 휴대폰 번호, 이메일, 생년월일과 성별로 모두 5개이다. 불필요한 정보는 제외하고 최소한의 정보만 입력하고 있음을 알 수 있다. 회원가입 시에도 카카오톡과 연동해 빠르게 가입이 가능해 가입 절차에서 느끼는 사용자의 피로도를 크게 낮출 수 있을 것이다.
공지사항 안내프립은 공지사항을 통해 서비스 이용 관련 이슈 사항에 대해 유저들이 불편을 겪지 않도록 빠르고 친절하게 안내하고 있었다. 가령, 전사 워크샵으로 인한 휴무를 사전 공지했고 지난 3월 푸시 알림이 일부 유저에게 발송되지 않았던 문제에 대해서는 사과하고 언제 오류를 해결했는지, 앞으로 어떻게 대응할 것인지에 대해 설명했다.
어쩌면 사소한 부분인 것 같지만, 때에 맞춰 적절한 공지나 운영 안내가 잘 이루어지지 않는 서비스도 더러 있다. 그러면 사용자는 프로덕트에 실망을 하게 되고 충성 고객으로 이어지는 선순환은 발생하기 어려울지도 모른다. 이 한 끗 차이가 사용자의 마음을 프로덕트로 이끌 수 있을 것이다.
유저에게 요구하는 정보는 최소한으로 하고, 프로덕트가 제공해야 하는 정보와 편의성은 최대화하였다. 그러면 유저는 프로덕트에 대한 보다 수용적이고 열린 자세를 보여줄 것이다.
심미적 사용성 효과 Aesthetic-usability effect
사용자는 보기 좋은 디자인을 사용성이 더 뛰어난 디자인으로 인식한다.
인간은 자동 인지 처리를 통해 처음 보는 대상의 아름다움을 본능적으로 빠르게 파악하는데, 디지털 인터페이스를 접할 때도 마찬가지다.
사용자가 인지를 처리할 때 시스템 1(충동적)과 시스템 2(사고적)을 이용하는데, 시스템 1이 대부분의 사고나 행동을 관장하고, 시스템 2는 필요할 때 사용된다. 시스템 1에서 제품을 빠르게 구별하고, 관련 없는 정보는 무시하는데 심미적 효과는 바로 이런 첫인상을 결정할 때 매우 중요하다.
보기 좋은 디자인은 인간의 뇌에 긍정적 반응을 일으켜서 사용자로 하여금 제품이나 서비스의 사용성이 뛰어나다는 생각이 들게 한다. 제품이나 서비스의 디자인이 보기 좋으면 사용자는 사소한 사용성 문제에 비교적 관대해진다.
클래스 소개 페이지프립에는 다양한 취미/여가 프로그램이 있는 만큼, 프립 소개 페이지도 각양각색이다. 호스트(프립에서는 체험 프로그램을 진행하는 사람)가 대원(체험에 참여하는 유저)들을 모집하기 위해서는 상세한 프로그램 정보를 주는 것도 필요하지만 사용자의 눈길을 끌만한 요소를 넣는 것도 중요하다. 강조 효과가 있는 서체를 사용하거나 디자인을 돋보이게 제작하고, 유저들의 베스트 후기를 가독성 있게 보여주는 것 등이다.
(좌) 플라워 클래스 / (가운데) 캔들 클래스 / (우) 유화 그리기 클래스위 사진은 미술/공예 클래스들의 소개 페이지이다. 클래스 카테고리가 아름다움, 심미적 요소와 연관되어 있다 보니 사진의 느낌도 감성적이고 감각적이다. 예쁘고 아름다운 사진을 본 유저들은 '클래스에 참가하면 저런 작품을 만들 수 있을까'라는 생각을 하게 되고, 참여 동기가 자극되어 클래스를 신청할 가능성이 높아진다.
물론, 뛰어난 시각적 효과를 활용한 소개 페이지를 보고 기대하며 참여한 클래스가 예상만큼 만족스럽지 않은 경우도 있을 수 있다. 어쩌면 클래스 소개 내용이 홍보성이 짙은 내용인 것 같아 일부 유저들은 거부감을 느낄지도 모른다. 이는 다소 아쉬운 부분이다. 그럼에도 다양한 클래스의 사진을 노출시키고 상세한 활동 내용을 소개함으로써 유저가 새로운 취미를 발견할 수 있는 통로가 되기도 하고, 프립만이 가지고 있는 컨텐츠가 될 수 있다고 생각한다.
시각적으로 아름다운 디자인, 사진을 노출시킴으로써 긍정적인 반응을 일으키고, 사용성이 더 좋다고 느끼게 한다.
폰 레스토프 효과 Von Restorff Effect
비슷한 사물이 여러 개 있으면 그중에서 가장 차이가 나는 한 가지만 기억할 가능성이 크다.
중요한 정보나 핵심 동작은 시각적으로 눈에 띄게 해야 한다. 디지털 인터페이스에서 사용자는 시각적으로 대비되는 요소에 빠르게 주의를 빼앗기기 때문이다. 꼭 필요한 컨텐츠라면 광고로 보이지 않게 해야 한다. 사람들은 광고처럼 보이는 것을 인지적으로 무시하기 때문에 중요한 정보는 광고처럼 보이지 않고, 광고 주변에 배치하지 않아야 한다.
아무것도 강조하지 않는 것보다 더 지양해야 할 것은 너무 많은 요소를 강조하는 것이다. 시각적 강조는 사용자의 주의를 끌지만 너무 많으면 강조 효과가 희석되기 때문에 이 점도 유의해야 한다.
프립 참여 시 안내 사항프립 참여 시 프로그램 내 포함사항은 녹색, 불포함 사항은 빨간색, 준비물은 회색의 타원형 박스로 나타냈다. 포인트는 각각 다른 색상으로 표시하여 강조될 수 있도록 한 것이다. 불포함 사항은 유저에게 미리 알려주는 것이 중요하다고 생각하는데 그래서인지 빨간색으로 더 눈에 띌 수 있도록 만들어주었다.
중요한 정보가 시각적으로 눈에 띄도록 도형과 텍스트 색상에 차별화를 두어 강조하였다.
도허티 임계 Doherthy threshold
컴퓨터와 사용자가 서로를 기다리지 않아도 되는 속도(0.4초 이하)로 인터랙션하면 생산성은 급격히 높아진다.
사용자의 주의가 분산되는 것을 막는 동시에 생산성도 향상시키려면 시스템 피드백을 0.4초 이내에 제공하라는 것이다. 뛰어난 사용자 경험을 만드는 필수 요소 중 하나는 성능이다. 속도는 기술적인 문제일 뿐 아니라 사용자 경험의 핵심이 되는 요소이기도 하다. 제품이나 서비스를 처음 로딩하는 데 걸리는 시간, 인터랙션에 반응해 피드백을 제공한 속도, 다음 페이지를 로딩하는 데 걸린 시간 등 시스템 반응 속도는 전체 사용자 경험을 좌우하는 열쇠가 된다.
애니메이션은 로딩이나 프로세싱이 진행되는 동안 사람들의 시선을 끄는 한 가지 방법이다. 설사 정확하지 않다고 해도 진행 표시줄을 보여주면 사용자는 대기 시간에 좀 더 관대해진다.
페이스북 같은 플랫폼에서 흔히 보이는 사례로 콘텐츠를 로딩하는 동안 표시하는 뼈대 화면이 있다. 이는 스켈레톤 UI라고도 하며, 일단 사이트의 틀을 먼저 로딩해주어 임시로 자리 표시자 블록을 표시하는 것을 가리킨다.
로딩 시간을 최적화하는 '블러 업(blur up)'이라는 기법도 있다. 이미지가 웹의 로딩 시간을 증가시키는 주범이라는 점에 착안해 이미지 공간에 저해상도 이미지를 보여주고, 실제 이미지가 로딩되면 페이드 효과와 함께 이미지를 크게 확대해서 표시한다.
이미지 로딩 전, 왼쪽의 스켈레톤 UI가 먼저 로딩됨프립의 상세페이지의 로딩 시간은 평균적으로 0.4~0.5초 정도였던 것 같다. 체감상 그렇게 빠르다는 생각은 들지 않았다. 워낙에 잘 구동되는 앱들에 익숙해져 있어서 그런 듯하다. 다소 길게 느껴지는 로딩 시간의 체감 대기 시간을 줄이기 위해 프립은 스켈레톤 UI를 사용해 일단 사이트의 틀을 먼저 로딩해주었다.
클래스 페이지마다 로딩 시간이 저마다 달랐는데 페이지 내 포함된 사진 개수와 용량이 다른 것이 이유인 듯하다. 여러 페이지를 접속해 직접 로딩 시간을 체감해보니 빠르고 효율적으로 사용자가 원하는 작업을 완수하도록 하는 것이 만족스러운 사용자 경험을 제공하는 데 매우 중요하다는 것을 알 수 있었다.
짧은 전환 화면에서 유저의 대기 시간에 사이트의 틀을 먼저 로딩하여 피드백을 제공하였다. 로딩할 때 유저의 시선을 분산시켜 체감 대기시간을 줄일 수 있다.
'UX/UI의 10가지 심리학 법칙'에서 소개하고 있는 디지털 프로덕트의 UX에 적용된 10가지 심리학 법칙을 보면서 매우 공감했다. 당연하다고 여겼던 서비스 이용 경험을 떠올려 보며 평소 불편함 없이 자연스럽게 서비스를 사용할 수 있었던 이유를 이론적으로 이해하게 되었다. UX 디자인과 심리학이 연결 지어져 있는 부분이 흥미로웠고, 사용자의 심리적인 부분을 더 고민하고 확인하고 싶다. 디지털 프로덕트를 만듦에 있어서도 인간의 심리와 행동양식에 대한 이해와 통찰은 꼭 필요한 것 같다.
참고자료
https://medium.com/heeheewuwu/%ED%8F%AC%EC%8A%A4%ED%85%94%EC%9D%98-%EB%B2%95%EC%B9%99-61ed62f69333
