올리브영의 워터프루프 스와이프
올리브영 앱의 스와이프 기능, 활용성을 높이자
다양한 브랜드의 화장품부터 건강식품 등의 상품이 입점된 커머스 플랫폼인 올리브영 앱은 오프라인 매장과 연동이 잘 되어있는 편입니다. 오프라인 매장에서 구매한 내역을 확인하거나 오프라인 매장에 특정 상품의 재고가 있는지 등을 확인할 수 있어 꽤나 편리합니다. 그리고 스와이프는 올리브영 앱 내의 경험들을 더욱 편리하게 만들어줍니다.
01. 스와이프 뭐가 문제야?
올리브영 앱에서 스와이프 기능을 만나는 것은 서울에서 스타벅스 찾는 것만큼 쉽습니다. 메뉴처럼 작은 영역부터 페이지 전체 스와이프까지 앱 내 전반에 걸쳐 활용된 것을 볼 수 있습니다. 그 덕에 다양한 카테고리, 다양한 상품을 접하기에는 꽤나 편리한 환경입니다. 또, 스와이프 기능을 제공하는 서비스에서 우려할 수 있는 부분이 iOS의 뒤로가기 동작이 불편하다는 점인데, iOS 이용자를 배려하여 뒤로가기 버튼까지 하단에 친절하게 제공해주고 있습니다.
올리브영 앱 뒤로가기 버튼. 올리브영 출처그렇다면 올리브영 앱에서 제공하는 스와이프는 대체 뭐가 문제일까요. 만약, 상하 스크롤을 하며 뭔가를 집중해서 보고 있다가 실수로 스와이프가 된다면? 다시 돌아갔는데 보던 내용으로 돌아가는 것이 아니라 최상단 부분으로 돌아가 초기화된다면? 사용자에게 불편한 경험을 제공할 만큼 스와이프가 과연 적절하게 활용되고 있는지, 사용자가 실수할 것을 대비해서 대비책을 제공하고 있는지 등 스와이프 기능 자체에 대해 의문이 생길 수밖에 없을 겁니다.
가정1. 올리브영 앱에서 사용자가 주로 주의 깊게 볼 영역은 상품의 상세페이지 일 것입니다. 상품 상세페이지는 상품설명, 구매정보, 리뷰, Q&A 총 4가지의 탭으로 구분되어 있습니다. 올리브영의 경우, 리뷰 기능이 활발하게 이용되고 있기 때문에 가정2. 사용자가 리뷰 탭을 이용하는 비율이 다른 탭에 비해 상대적으로 높을 것입니다. 그렇다면 과연 사용자가 '구매정보'라는 허들을 넘으면서까지 리뷰 탭을 스와이프로 이동할 만큼의 편의성이 있을까? 하는 의문이 생길 수 있습니다. 엄지를 조금만 추켜올리면 바로 리뷰 탭에 닿을 수 있을 텐데 말이죠.
올리브영 앱 상세페이지 리뷰 탭. 올리브영 출처그렇다고 스와이프 기능을 제거하기란 쉽지 않을 겁니다. 가정3. 올리브영 앱에서 스와이프 기능은 이미 자연스러운 동작이 되었을 테니까요. 만일 사용자가 상품설명과 리뷰를 각 1회씩 본 후 바로 구매하는 프로세스라면 지금의 스와이프 기능은 크게 문제없을 겁니다. 조금 불편한 스와이프를 견디거나 엄지를 힘껏 올려서 이용하면 될 테니까요. 가정4. 하지만, 사용자가 상품 정보 보고, 리뷰 보고, 다시 상품정보 보고, 다시 리뷰 보고... 이런 과정을 거쳐 상품을 구매한다면 올리브영에서 제공하는 스와이프 기능은 꽤나 불편할 것입니다.
02. 가정과 가설
위에서 언급했던 가정을 정리해보면 다음과 같습니다.
가정
1. 사용자는 상품설명 탭에서 오랜 시간 체류한다.
2. 다른 탭에 비해 상대적으로 리뷰 탭의 이용률이 높으며 체류시간이 길다.
3. 사용자는 앱 내에서 스와이프 기능을 적절히 활용하여 앱을 이용한다.
4. 상품 상세 페이지 방문 시, 각 탭을 다회 이용한다. (즉, 탭 이동을 빈번히 한다)
개선 방향을 잡아줄 가설은 다음과 같습니다.
가설
1. 중요도 및 이용률이 높은 순서대로 탭을 배치하면, 스와이프 기능이 적절히 활용될 것이다.
2. 실수로 스와이프를 하거나 빈번한 탭 이동을 하는 경우를 고려하여 사용자가 이에 대응할 수 있는 기능을 제공하면, 사용자 경험을 개선할 수 있을 것이다.
03. 마이크로 포인트
(1) 스와이프 기능의 활용성을 높이자
스와이프 기능을 제거할 수 없는 환경에서 스와이프의 편의성을 높이기 위해서는 스와이프의 활용성을 높여야 합니다. 따라서, '구매정보'와 같이 상대적으로 체류시간이나 중요도가 낮은 항목을 뒤로 배치하고, '리뷰'처럼 중요도가 높은 항목을 첫 화면과 근접하게 배치하여 사용자가 스와이프 기능을 적절하게 이용할 수 있도록 제공해야 합니다.
(2) 기존에 보던 부분을 이어서 보기
실수로 스와이프를 한 경우, 다시 돌아갔을 때 기존에 보던 화면이 바로 띄어지는 것이 어쩌면 가장 바람직할 겁니다. 하지만, 사용자에게 냅다 이런 환경을 제공하기에는 고려해야 할 사항들이 더 있습니다. 상세페이지의 각 탭 상단에는 꽤 중요한 정보와 기능들이 제공되고 있기 때문이죠. 또한, 상세페이지 외에도 앱 전반에 걸친 '페이지 스와이프' 기능의 일관성을 어느정도 유지해줘야 합니다. 물론 사용자에게 연속적인 흐름을 제공하는 것도 중요하지만, 흐름을 되돌릴 수 있는 최소한의 기능만 제공하여도 사용자의 경험은 크게 개선될 수 있을 것입니다.
04. 마이크로 기획
상단 탭의 배치 순서를 변경하였습니다. 상품설명 > 리뷰 > Q&A > 구매정보 순으로 말이죠. 사용자는 단 한 번의 스와이프로 리뷰 탭을 이용할 수 있습니다.
상품 설명 탭 기획 화면 예시앱 하단에 '이어서 보기' 버튼을 추가하였습니다. 상품 상세 페이지의 각 방문을 기준으로 해당 탭에서 동작한 경우, 이어서 보기 버튼을 제공합니다. 필터 등의 기존 설정을 유지하고, 보고 있던 화면을 이어서 볼 수 있도록 사용자에게 선택지를 하나 더 제공하였습니다. '이어서 보기' 버튼의 의미가 다소 모호할 수 있으나, 해당 기능에 대한 안내를 제공하거나 사용자가 직접 경험을 하면 자연스럽게 기능을 이해하고 사용할 수 있을 것입니다.
리뷰 탭 기획 화면 예시05. 마무리
기술적으로 구현이 가능한지, 너무 무거운 기능은 아닌지, 버튼의 위치는 적절한지... 하나의 기능을 추가하는데도 고려해야 할 항목이 참 많습니다.
/ 23.11.05 | 2024.07.29 최근 글과의 톤을 맞추기 위해 쓸데없는 말은 지우고, 레이아웃도 수정했습니다.
/ 썸네일 : 미드저니
