퍼블리의 UX에도 일잘러의 느낌이 나는가
UX/UI 분석기 [코드스테이츠 PMB 8기]
일상의 모든 것이 스마트 폰 위로 올라오고 있다. 사실 스마트폰 위로 올라오지 않은 게 뭐가 있을까 생각해 보면 딱히 떠오르지 않을 정도이다.
물건을 사야겠다는 생각에 길을 나서 가게로 들어가고, 물건을 고르고, 결제하고 나오는 그 과정을 이제는 디지털 안에서 더 많이 행하고 있는 중이다. 이렇게 디지털 상에서 제품과 서비스를 이용할 때 느끼는 총체적인 고객 경험을 우리는 UX라고 하고, 그 UX를 이미지와 텍스트, 흐름으로 표현한 것을 UI라고 부른다.
이 두 가지 모두 사람의 행동과 경험에 대해 탐구하는 일이기 때문에 '인간 심리'에 대한 부분은 필수적인 것 같다. 실무에서도 UX/UI에 대한 심리학 법칙을 이용해 서비스를 설계하고 분석하는 일이 굉장히 자연스럽다.
그래서 오늘은 '일잘러'를 위한 콘텐츠 서비스인 '퍼블리' 서비스를 가지고 UX/UI를 분석해 보겠다.
MZ 세대의 일 잘 하는 이야기를 담은 퍼블리는 어떻게 좋은 유저 경험을 설계하고 있을까?
퍼블리의 UX에도 '일잘러'의 느낌이 물씬 풍기는지 한 번 살펴보자.
1. 제이콥 법칙
무의식적, 습관적으로 행하는 유저의 심리에 대한 법칙이다. 인간은 편하고 익숙한 것을 좋아하고, 갑작스러운 변화에 긴장과 불편을 느끼기 마련이다. 그래서 이러한 심리를 반영해 대부분의 서비스는 기존의 구축되어 있던 화면 설계를 유지하는 경우가 많다.
위의 이미지와 같이 검색 사이트에 익숙한 유저를 위해 퍼블리도 검색바를 상단에 위치시켰다. 또 오늘의집이나 쿠팡 등 커머스 서비스와 같이 집중적으로 홍보할 콘텐츠들은 검색바 밑 상단에 위치시켜 유저들이 안정감 있게 메인 페이지로 유입되게 하였다.
2. 힉의 법칙
퍼블리 UX유저가 의사 결정을 내릴 때 정보가 너무 많거나 복잡할수록 시간이 더 걸린다는 법칙이다. 그렇기 때문에 한 페이지 안에 정보가 많이 담기지 않도록 구분화해야 하고, 단계를 지어 놓아야 한다.
퍼블리의 회원가입 단계에서도 볼 수 있듯이 1단계 계정 선택 - 2단계 결제 정보 입력 - 3단계 완료로 과정을 만들어 놓음으로써 유저가 최소한의 정보를 이해한 후, 자신의 정보를 입력할 수 있도록 했음을 알 수 있다.
3. 피츠의 법칙
UI가 크고, 쉽게 보이고, 누를 수 있는 곳에 있어야 소비자들이 더 빨리, 그리고 쾌적하게 서비스를 이용한다는 법칙이다. 모바일 앱의 경우 서비스 화면이 그리 크지 않기 때문에 잘 보여야 하고, 화면을 터치하는 손으로 자유자재로 버튼을 클릭해 그다음 단계로 이동할 수 있어야 한다.
퍼블리 UX퍼블리의 결제 페이지를 보면 그 점을 알 수 있다. 우선 상단에 어떤 수단을 선택할 건지 가장 크게 표시되어 있고, 결제 수단을 선택한 후에는 카드 정보를 순서대로 입력하고 마지막에 멤버십 시작하기 버튼을 눌러 결제 단계를 완료할 수 있다.
흐름에 따라 결제 수단 과정이 깔끔히 정리되어 있는 걸 확인할 수 있는데, 나는 추가적으로 중간중간 들어간 안내 문구에 대해서도 언급하고 싶다.
처음 결제 수단을 선택하기 전 지금 당장 결제되지 않음을 언급해, 혹여나 이탈할 수 있는 유저들을 붙잡는 효과를 준다. 이렇게 유저들을 한 번 안심시킨 후, 카드 정보를 입력하기 전 유저의 카드 정보를 서버에 저장하지 않는다며 안전을 보장하는 문구를 위치시켜 고객이 카드 정보를 안심하고 입력할 수 있게 하였다. 그리고 마지막 멤버십 시작하기 버튼 바로 아래에도 언제든지 구독 해지가 가능함을 언급하며, 결제에 대한 부담을 최대한 덜어주기 위해 노력하고 있음을 알 수 있었다.
퍼블리 UX회원 가입 후 처음 앱에서 로그인을 하면 오른쪽과 같은 습관 알림 설정 페이지가 뜬다.
매일 고정된 시간에 퍼블리에 들어와 아티클을 읽을 수 있도록 알림을 설정하겠냐는 내용인데, 페이지에서 보는 것처럼 '네! 좋아요.'는 최하단에 빨간색 버튼으로 강조가 되어있다. 반면 나중에 하기는 상단 우측에 아무 버튼 없이 텍스트로만 디자인되어 있는 걸 확인할 수 있다.
이렇게 유저가 습관 알림을 받게 하기 위해 '네! 좋아요.' 버튼은 강조해 놓았고, 건너뛰는 버튼은 제일 우측에 떨어뜨려 놓은 것이다.
유저가 이 알림 기능을 설정할 경우 좋은 습관을 형성할 수 있도 퍼블리 입장에서도 사용자 방문율을 높이고 콘텐츠를 더 자주 소비할 수 있게 환경을 조성하는 것이기 때문에 꼭 필요한 기능이라고 할 수 있겠다.
4. 피크엔드의 법칙
인간은 경험 전체의 평균이나 합계가 아니라, 절정의 순간과 마지막 순간에 느낀 감정을 바탕으로 경험을 판단하는 경향이 있다. 서비스를 사용하는 유저의 목적마다 이 법칙이 적용되는 절정과 마지막이 다를 수 있을 것 같다. 퍼블리로 얘기해 보자면, 유저의 목적은 나에게 유용한 아티클을 잘 찾아서 읽고, 필요한 부분을 기록해 두고, 나중에 이용할 수 있도록 혹은 또 볼 수 있도록 아카이빙 하는 데 있지 않을까. 그렇기 때문에 콘텐츠를 검색, 소비, 기록하는 전 과정이 유저에게는 상당히 중요할 것이다.
퍼블리도 이 피크엔드의 법칙을 최대한 활용해 콘텐츠를 소비할 때의 유저 감정을 개선하기 위한 노력을 하고 있다. 우선 아티클 검색 시 유저들에게 글의 분량을 제공하여 글을 선택하는 데 도움을 준다. 만약 출근 전 10분 동안 글을 읽거나 짧고 가볍게 즐기고 싶은 사람들에게는 이 기능이 글을 선택하는데 유용할 것이다.
아래 첫 번째 사진처럼 상단에 있는 얇은 녹색 바를 통해 글을 어디까지 읽었고, 얼마나 남았는지를 표시해 주고, 글을 다 읽고 내려오면 이번 달 몇 개의 아티클을 읽었는지 알려준다. 또 회원들의 평균 아티클 개수를 알려줘서 유저가 글을 계속 읽을 수 있게 하고, 더 많은 글을 읽도록 동기부여를 하고 있다.
하단에는 목차와 북마크, 내 노트, 위로 가기 기능이 있다. 글을 읽으면서 목차를 확인하고, 표시를 해 두고, 노트를 남기고, 글 제일 상단으로 올라갈 수 있게 만든 기능으로 글을 읽을 때 가장 많이 쓰는 것들이라고 할 수 있겠다.
그래서 퍼블리는 유저들이 기능을 잘 파악할 수 있도록 그래픽과 텍스트를 같이 포함시켜 놓았다. 또 한 손으로 쉽게 사용할 수 있도록 최하단에 배치해 놓은 것을 알 수 있다. 이렇게 글을 읽는 전 과정을 한 손으로도 매끄럽게 해나갈 수 있게 하였고, 글을 더 읽고 싶게 동기부여하는 심리까지 잘 자극했다고 할 수 있겠다.
5. 심미적 사용성 효과
예쁘고 보기 좋은 것에 더 눈이 가고, 호감이 간다는 심리 법칙이다. 요즘 모바일 앱의 추세로 보면 심미적인 부분이 고객의 이탈을 막고 더 유입시키는데 큰 역할을 한다고 볼 수는 없겠다. 하지만 고객의 충성심이나 브랜드 파워를 높이는 데는 크게 영향을 끼친다고 생각한다.
퍼블리 서비스를 구독하며 정말 예쁘고 깔끔하다는 생각을 자주 했던 것 같다.
가이드 페이지에는 퍼블리가 익숙하지 않거나 무엇을 읽을지 헤매는 유저들을 위해 아티클들을 그룹화해서 제공하고 있다.
상황이나 산업, 주제 별로 분류해 놓았는데, 굉장히 통일성 있게 이미지와 텍스트를 디자인&배치해 놓았음을 알 수 있다. 우선 각 썸네일의 구성을 통일 시켜 놓았다. 다양한 컬러를 사용하고 있지만, 제목이나 일러스트의 위치, 포함하고 있는 아티클을 보여주는 구역들도 동일하게 구획해 놓음으로써 굉장히 통일감 있는 페이지가 되었다. 사실 많은 정보를 담고 있는 페이지라서 정신없게 보일 수도 있었을 텐데, 효과적인 디자인과 통일된 일러스트 덕에 퍼블리의 브랜드가 더 잘 표현되었다고 느껴지기도 했다.
간단히 덧붙이자면, 퍼블리는 디자인에 통일성을 부여하는 것을 상당히 좋아하는 것 같다. 아티클 소개 이미지도 보면 이미지를 사선으로 구분해 놓고, 제목과 대표 이미지를 배치해 놓은 걸 볼 수 있는데, 그 위치를 모든 아티클에 적용해 놓아서 많은 콘텐츠를 보고 있어도 유저가 편안한 상태를 유지할 수 있게 하는 것 같았다.
6. 본 레스토프 효과
우리는 비슷한 이미지나 사물이 놓여 있으면 그중에 무엇을 골라야 할지 어려워한다. 따라서 UX 적으로도 유저를 원하는 방향으로 인도하려면 해당 영역에 가시적인 차이를 주어야 한다.
퍼블리의 수익 모델은 구독료이다. 1개월/3개월/12개월로 멤버십을 제공하고, 3개월 권에는 '추천'이라고 따로 표시를 해 놓았다. 이렇게 동일한 크기와 텍스트로 디자인이 되어 있어도 3개월 권에만 파란색 인덱스 모양으로 '추천' 표시를 해 놓음으로써 유저들이 더 잘 파악할 수 있게 해 놓았다.
메인 페이지 하단에는 주요 기능(홈/토픽/챌린지/가이드/마이 퍼블리)이 놓여있다.
모두 같은 크기, 동일한 컬러의 그래픽으로 되어있고 유저가 위치한 곳에만 붉은 컬러로 표시되게 해 놓았다. 그런데 만약 유저가 가입 후 처음 페이지에 유입되었을 때는 이미지와 같이 빨간 말풍선이 뜨고 가이드에도 빨간 동그라미가 표시되게 해 놓았다. 이렇게 동일한 크기의 버튼이지만 대화창이나 컬러 동그라미 표시 등을 통해 고객이 다음에 무엇을 하면 서비스를 잘 이용할 수 있을지 방향을 정해주고 있는 것이다.
7. 도허티 임계
도허티 임계는 인간과 기계간 상호작용이 0.4초 이상 걸리면 생상선이 떨어진다는 내용의 이론이다. 그렇기 때문에 유저가 버튼을 클릭하거나 다음 단계로 넘어가는 행동을 했을 경우 서비스의 반응이 0.4초 안에 나와야 이상적이라는 얘기이다. 물론 0.4초 안에 원하는 내용이 반드시 구현되어야 한다는 의미는 아니고, 유저에게 현재 로딩 중이라는 반응이라도 보여줘야 한다는 것이다.
퍼블리의 경우 콘텐츠 서비스여서 그런 걸까. 아티클의 양 때문에 해당 페이지의 정보량이 많은 경우 로딩이 쉽게 걸림을 인지할 수 있었다. 그때그때 로딩이 걸렸을 때의 모습이 다르긴 했지만, 왼쪽 이미지처럼 스켈레톤 스크린, 즉 보여질 정보의 틀을 먼저 확인한 경우도 있었고 또 다른 페이지에서는 아무 내용도 없이 빙글빙글 돌아가는 화면만 수 초 간 바라봐야 했던 때도 있었다. 아티클이 길 때는 특히나 로딩 속도가 더 느렸는데, 이런 부분을 개선해 준다면 훨씬 쾌적하게 퍼블 리틀 사용할 수 있을 것 같다.
아쉬웠던 점
추가로 아쉬웠던 점을 얘기해 보자면, 바로 회원가입 단계이다. 퍼블리에서는 회원가입을 하려면 앱이 아닌 웹에서만 할 수가 있다. 어떠한 이유에서 웹만 가능한지는 모르겠지만, 유저들이 편안하게 사용할 수 있도록, 또 회원 가입부터 첫 아티클을 읽을 때까지 사용자 경험을 원활하게 할 수 있도록 꼭 개선이 필요하단 생각이다.
마지막으로 메인에서 아티클을 찾으려고 할 때 끝도 없이 스크롤을 내릴 수가 있는데 개인적으로는 이 부분이 전혀 편하게 느껴지지 않았다. 초기 상단부분에는 퍼블리에서 홍보하거나 pick한 내용이 배너식으로 보여지고, 대표 아티클, 습관 만들기, 새로 나온 콘텐츠, 아티클 등등의 순서로 이어진다. 스크롤을 쭉 내리면서 아티클을 찾아봐야 할지 아니면 토픽으로 가서 봐야 할지, 검색을 해야할 지가 불분명하다 보니 콘텐츠를 읽는 시간보다 찾는 시간이 더 오래 걸리 수도 있겠단 생각이 들었다. 이 부분을 어떻게 개선해야 할지는 추가적으로 더 고민이 필요할 것 같다.
퍼블리는 회사 시절 콘텐츠 기획안을 써보라며 팀장님이 던져주신 업무로 알게 된 서비스이다. 어디서부터 알아봐야 할지 기획안은 어떤 내용으로 쓰면 좋을지 막막했고, 그렇다고 대충 하기는 싫고 잘 해가고 싶어서 여기저기 자료를 찾았던 기억이 난다. 그러다 관련 업무를 하시는 분의 블로그를 알게 되었고 거기서 퍼블리에 글을 연재하셨다고 해서 나는 그날 바로 퍼블리를 구독해 서비스를 이용하게 되었다.
지금은 IT 쪽이나 PM 업무로 아티클을 찾아보는데, 많은 도움을 받는 중이다.
앞으로 더 좋은 쪽으로 UX를 개선해 일잘러 느낌이 물씬 나는 일잘러들의 콘텐츠 서비스가 되었으면 좋겠다.
