월550원으로 즐기는 네이버 바이브와 UX심리학 법칙
코드스테이츠 PMB 10기
어쩌다보니 음악 어플을 네이버 바이브로 계속 쓰고 있다. 처음에 무료체험을 하고 해지했는데 계속 문자로 특별혜택 안내를 하며 지속적인 고객이 되어주십사 꼬시더라.
5개월간 매월 550원에 사용할 수 있는 특별한 혜택이라고 말이다. 정상가는 6,900원이니 상당한 혜택이라 그냥 쓰기로 했는데 5개월쓰고 해지하면 또 특별혜택 문자가 오고, 다 쓰고 해지하면 또 문자가 와서.. 어쩌다보니 계속 바이브 고객으로 남고 있다.
그런데 처음에는 바이브의 UI가 너무 어려웠다. 불친절한 느낌이라고나 할까? 무엇을 클릭해야 될지 몰라서 그냥 내가 원하는 노래를 검색해서 플레이리스트에 담아 사용하곤 했다. 그런데 요즘은 꽤나 사용하기 편리해졌다. 왜 편리하다고 느끼게 되었을까? UX에도 심리학이 존재한다.
Laws of UX : UX의 10가지 심리학 법칙
좋아보이는 것에는 비밀이 있다. 미국의 디자이너이자 작가, 존 야블론스키(Jon Yablonski)는 저서 "UX/UI의 10가지 심리학 법칙" 에서 더욱 직관적이고 인간 중심적인 제품과 경험을 만드는 데 활용할 수 있는 10가지의 심리학 법칙을 소개했다. 사용자의 행동 방식과 디지털 인터페이스가 상호작용 하는 방식 이면에서 작동하는 심리학에 관해 다루고 있다. 인간이 디지털 인터페이스를 인지하고 처리하는 방식을 고려해 사용자 경험을 디자인하는 방법이 담겨 있다. 그 10가지를 간단히 살펴보자.
1. 제이콥의 법칙 : 사용자는 자신에게 익숙한 제품을 통해 구축한 기대치를 비슷한 다른 제품에도 투영한다.
2. 피츠의 법칙 : 터치 대상의 크기가 크고 인터페이스상 쉽게 도달할 수 있는 영역에 있어야한다.
3. 힉의 법칙 : 의사결정의 시간이 반응 시간에 큰 영향을 받지 않도록 선택지의 갯수를 최소화하라.
4. 밀러의 법칙 : 사람의 단기 기억 용량인 마법의 숫자 7로 콘텐츠 덩어리를 나눠 정리하자.
5. 포스텔의 법칙 : 사용자가 어떤 동작/입력을 하든 반응형으로 유연하게 대처하라.
6. 피크엔드의 법칙 : 사용자 여정 중 가장 강렬한 순간과 마지막 순간에 신경써라.
7. 심미적 사용성 효과 : 보기좋은 디자인은 인간의 뇌에 긍정적인 반응을 일으켜서 사용성을 뛰어넘는다.
8. 본 레스토프 효과 : 중요한 정보/핵심 동작은 시각적으로 강조하라.
9. 테슬러의 법칙 : 내재 된 복잡성을 디자인과 개발 과정에서 처리하고 사용자의 부담을 최소화하라.
10. 도허티임계 : 사용자가 서로 기다리지 않도록 시스템 피드백을 0.4초 이내에 제공하라.
네이버 바이브에 적용 된 UX심리학
1. 제이콥의 법칙 (Jakob's Law)
• 사용자는 여러 사이트에서 대부분의 시간을 보내며 이미 알고 있는 방식으로 작동하길 원한다.
• 기존의 모델을 활용하면 사용자가 새 모델을 익히지 않아도 되어 사용자 경험이 완성된다.
제이콥의 법칙에 의하면 새로운 프로덕트를 접하는 유저는 새롭게 학습하는 시간을 줄이기 위해 비슷한 프로덕트에서의 경험을 이어가고 싶어한다. 네이버 바이브가 처음 나왔을 때는 당황스러울 정도로 새로워서 앱 안에서 무엇을 해야할지 헤맸고 원하는 메뉴를 찾기까지 시간이 오래 걸렸다. 만약 그 경험이 무료가 아니었다면 당장 지워버렸을 것이다. 다행히 현재 네이버 바이브는 대표 음악 어플리케이션인 FLO와 멜론의 UI와 비슷하게 구성되어 있다.
상단에는 유저의 정보와 설정을 할 수 있는 아이콘이 있고, 가장 큰 영역에는 각 플랫폼에서 큐레이션한 대표 음악이 준비되어 있다. 중간에는 음악을 카테고리별로 분류한 것을 노출하였다. 그리고 하단은 플레이어와 메뉴바로 구성되어 있기 때문에 처음 네이버 바이브에 접속한 유저도 금방 사용법을 터득하여 적응할 수 있다.
2. 피츠의 법칙 (Fitts's Law)
• 대상에 도달하는 시간은 거리가 가까울수록, 크기가 클수록, 거리가 충분할수록 빨라진다.
피츠의 법칙은 보통 중요한 메인 버튼에 적용이 된다. 유저의 접근이 쉽고 정확할 수 있도록 크기를 크게 하는 편이고, 보통 스마트폰을 한손으로 조작하는 것을 고려하여 하단에 배치한다. 네이버 바이브도 취향을 선택하는 버튼, 로그인 버튼, 파티 만들기 버튼 등을 하단에 눈에 띄는 컬러로 큼직하게 자리해놓았다. 유저는 직관적인 이 버튼을 0.1초만에 누를 수 있다.
3. 힉의 법칙 (Hick's Law)
• 인지 부하를 줄이려면 복잡한 작업을 잘게 나눠라.
• 의사결정에 걸리는 시간은 선택지의 갯수와 복잡성과 비례해 늘어난다.
힉의 법칙은 유저가 선택해야할 항목의 갯수를 최소화 함으로서 빠르게 반응하여 의사결정을 내리도록 도와준다. 네이버 바이브를 살펴보면 취향 선택을 3*4 배열로 한눈에 보기 쉽게 배치해서 빠른 반응을 유도했다. 아티스트를 1명 선택하면 그와 비슷한 6명을 바로 하단에 띄워줘서 점차적으로 선택해 나갈 수 있다. 한꺼번에 선택하려면 복잡하지만 이와 같은 방법으로 유저의 인지 부하를 줄이면서 선택에 대한 부담감을 덜었다.
4. 밀러의 법칙 (Miller's Law)
• 보통 사람은 작업 기억에 7(±2)개의 항목 밖에 기억하지 못한다.
• 사용자가 쉽게 처리하고 이해하여 기억할 수 있게 콘텐츠 덩어리를 나누자.
밀러의 법칙은 마법의 숫자 7(±2)로써 사용자가 정보를 쉽게 받아드릴 수 있도록 한다. 유저가 한번에 저장할 수 있는 숫자는 한정적이기 때문에 콘텐츠를 나누어서 노출 하는 것이 좋다. 바이브도 이와 같은 방법을 적용하여 웹페이지를 8개의 콘텐츠 영역으로 표기하고 있다. 시선이 이동해야 하는 단위 영역이 많지 않기 때문에 가독성이 좋게 느껴진다.
5. 본 레스토프 효과 (Von Restorff Effect)
• 시각적 요소를 강조할 때는 제한을 두어 각 요소간 경쟁을 피하고 광고로 오인되지 않게 하라.
• 비슷한 사물이 여러개 있으면 그 중에 가장 차이나는 한 가지만 기억한다.
본 레스토프 효과는 여러 선택지 중 한 가지를 강조하여 노출함으로서 유저가 선택과 집중을 할 수 있게 유도한다. 바이브의 멤버십 구독은 여러 요금제 중 유저에게 가장 합리적이면서도 자사가 밀고자 하는 6900원 요금제의 색깔을 다르게 하여 강조하고 있다. 유저는 다른 요금제보다 해당 요금제를 더 눈여겨 보게 되고 최종적으로 선택하게 된다.
6. 도허티 임계 (Doherty Threshold)
• 반응 시간을 개선하고 체감 대기 시간을 줄이려면 체감 성능을 활용하라.
• 애니메이션은 로딩이나 프로세싱이 진행되는 동안 사람의 시선을 끄는 한 가지 방법이다.
도허티 임계는 유저의 대기 시간을 시각화 하여 피드백을 제공함으로서 유저의 주의 분산을 막고 상호작용한다. 바이브도 0.4초 이하의 짧은 전환 화면에서 이 방법을 적용했다. 아티스트를 선택하고 취향을 분석하는 과정에서 도넛 모양 원이 완성되기도 하고 어플을 켜는 로딩 화면에서 바이브의 로고가 파도를 타기도 한다. 이와 같은 장치를 통해 유저는 대기 시간이 어느정도 인지를 인지할 수 있고 체감 대기 시간을 짧게 느끼게 된다. 네이버 바이브 웹사이트에서 실제로 작동 되는 모습은 아래 동영상에서 확인 할 수 있다.
최근 네이버 바이브는 사람들이 음악을 들으며 실시간으로 대화를 나누고 소통할 수 있는 '파티룸'으로 새로운 유저경험을 창출하고 있다. 또한 내돈내산에서 착안한 '내돈내듣' 캠페인을 통해 내가 듣고 있는 음악의 아티스트에게 직접 정산이 되는 시스템으로 사회적 가치를 더해 심리적인 보상을 한다. 월550원으로 누릴 수 있는 혜택이 꽤나 만족스럽다.
문제를 기막히게 해결하는 유익한 기획자.
코드스테이츠 PM 부트캠프로 획기적인 프로덕트 매니저가 되어 가다.
기막힌 생각과 획기적인 방법론자, PM이야기 #4. 끝.
