–
1.부동산 리치고는 왜 리스트 내 스트리트뷰를 적용했을까?
부동산 리치고는 거주, 투자 관점의 아파트를 찾거나 현재 거주중인 아파트, 또는 동네의 미래가치를 인공지능으로 예측해주는 서비스에요. 호갱노노, 직방 등과 함께 한 번씩 확인하는 서비스 중 하나 입니다. 오늘은 리치고의 리스트와 상세화면에 적용된 ‘스트리트 뷰’에 대해 간략하게 정리해보려고 해요. 예전에 직방이 제공하는 3D 단지투어를 보고 정말 놀랐던 기억이 있는데요. 직접 비교하긴 어렵지만, 부동산 리치고는 리스트에 아파트 대표 이미지를 썸네일로 활용하는게 아니라 스트리트 뷰를 적용했어요.
일반적으로 리스트 내 이미지를 활용하는 방법은 크게 두 가지 인데요. 대표 이미지 한 개를 활용하는 방법, 또 하나는 여러 이미지를 적용, 하나씩 넘겨 볼 수 있는 방법입니다. 후자는 상세 화면으로 진입하지 않고도 대략적인 내용을 미리 파악할 수 있다는 장점이 있어요. 호텔스컴바인 등 숙소 예약 서비스에서 적극적으로 활용하는 방법이기도 하고요.
두 방법 모두, 리스트에 포함된 내용들을 사전에 더 구체적으로 알 수 있도록 도와주는 역할을 하게 되는데요. 리치고는 아파트 등 거주 공간을 다루는만큼 단편적인 이미지 보다 외관 및 주변 상황을 상대적으로 더 잘 보여줄 수 있는 스트리트 뷰를 적용한 것으로 보여요. 리스트에 아파트를 찾을 때, 사용자가 설정한 조건에 따른 정보들이 잘 요약되어 있어 스트리트 뷰와 함께 확인하는 것이 꽤 편리하게 느껴졌습니다.
물론 스트리트 뷰 자체가 주는 단점도 있어요. 해상도가 높지 않고 ‘도로’를 기준으로 촬영되어 종종 어떤 아파트가 리스트에 해당하는 내용인지 판단하기 어려울 때가 있고, 안쪽까지 자세히 확인할 순 없기 때문이에요. 그럼에도 불구하고 대표 이미지를 활용하는 것 보다 같은 시간을 투자한다고 했을 때 더 많은 정보로 활용할 수 있다는 점에서 활용도가 높게 느껴집니다.
–
1-1.함께 읽어보세요!
2.Choice의 구체적인 온보딩 – 기능 안내 방법
Choice는 얼마전 론칭, 틴더 스타일로 다양한 아티스트의 작품을 만나볼 수 있는 서비스입니다. 좋아하는 스타일의 작품은 오른쪽으로, 반대라면 왼쪽으로 넘겨 의사 표현을 할 수 있고, 이는 데이터로 저장, 학습을 통해 적합한 작품을 추천해주게 됩니다. 갤러리에서 작품을 감상할 때 작품마다 느끼는 감정이 다르다는 점을 적용, 각 작품에 감정 표현을 따로 기록할 수도 있는 등 재미있는 기능이 포함되어 있어요. 아티스트라면 본인의 작품을 직접 등록해 사람들의 반응을 살펴볼 수도 있습니다.
제가 이 서비스를 사용하며 가장 인상깊었던 건, 첫 화면과 회원가입/로그인 후 이어지는 온보딩 과정이었어요. 먼저 회원가입 또는 로그인을 선택할 수 있는 첫 화면에는 틴더 스타일로 작품을 확인할 수 있다는, 어찌보면 익숙하면서도 서비스의 핵심 기능을 영상으로 쉽게 설명하고 있습니다. 동시에 실제 서비스에서 확인할 수 있는 여러 작품이 등장해 사용자로 하여금 회원가입 또는 로그인 과정을 거친 후 과정에 대한 기대감을 자연스레 가질 수 있도록 유도하고 있어요. (명상앱이 로그인/회원가입 화면을 활용하는 방법 : http://13.125.82.244/mobileapps27/)
회원가입 이후 기능 안내에 집중하는 온보딩 과정도 흥미로웠는데요. 앞서 영상으로 서비스 주요 기능을 확인할 수 있었다면, 이번에는 실제 기능을 활용할 수 있도록 꾸몄기 때문입니다. 먼저 좌/우 스와이프 기능에 대한 안내를 확인할 수 있는데요. 안내 역시 스와이프 방향에 따라 각기 다른 컬러로 적용해 구분을 쉽게 할 수 있도록 제공합니다. 아래로 직접 스와이프를 해볼 수 있고요.
마음에 들지 않는다는, 왼쪽으로 스와이프 한 행동에 대한 안내가 다음으로 이어집니다. 세 번째 단계에서는 작품 안내 확인 방법을 제공하는데요. 작품 아래 영역을 위로 끌어올리면 작품상세 정보를 확인할 수 있습니다. 마찬가지로 사용자가 직접 행동으로 확인할 수 있어요. 이 서비스에서 사용할 수 있는 스와이프는 좌, 우, 위 (최종 방향 기준)세 가지인데 이를 모두 다른 컬러로 안내함과 동시에 실제 행동으로 연결해 쉽게 이해할 수 있었습니다.
온보딩 화면 구성 방법 (http://13.125.82.244/mobileapps43/) 에서 아래와 같은 기준이 중요하다고 정리한 적 있는데요.
- 우선 순위를 설정, 사용 목적에 가장 잘 맞는 기능 중심으로 적용.
- 기존 불편함을 해소 할 수 있는, 사용자 입장에서 더 편리하게 느껴질 내용을 활용.
- 사용자들의 긍정적인 리뷰와 제공하고자 하는 가치를 함께 활용.
- 활용 가능한 주요 기능들을 미리 보여주기.
- 사용자가 점진적으로 앱에 참여 할 수 있는 첫 단계로 활용.
사용 목적에 가장 잘 맞는 기능을, 미리 보여주는 것을 넘어 실제 활용 해볼 수 있도록 구성한 점이 인상깊었던 사례였습니다.
–
2-1.함께 읽어보세요!
3.요기요는 왜 검색 화면 내 메뉴 이미지를 추가 했을까?
요기요는 지난 4월 중순 검색화면과 요기요 익스프레스 내 필터 기능을 개선했어요. 그리고 약 2주가 지난 시점에서 또 한 번 검색화면을 개선되었습니다. 인기 검색어와 연관된 메뉴, 주문가능한 식당 정보를 종합해 추천해주는 방식입니다. 일반화 하기 어렵지만, 인기 검색어를 살펴보면 메뉴와 브랜드명이 섞인 경우가 많아요.
예를 들어 배스킨라빈스, 페리카나와 로제떡볶이, 닭발 등으로 말이죠. 그리고 검색어는 ‘할인’의 영향을 많이 받아요. 제가 변경 된 화면을 캡쳐한 순간에도 배스킨라빈스는 포장 할인, 페리카나는 최대 9,000원 할인 등의 혜택을 받을 수 있었습니다. (전날 22시 기준)
이런 영향을 받지 않고, 검색어를 입력하기 전 더 적극적으로 (서비스 입장에서) 다양한 메뉴 정보를 제공할 수 있는 방법으로 이번 업데이트가 진행 되었는데요. 무엇보다 눈에 띄는 건 메뉴 이미지를 큼직하게 배치 했다는 점입니다. 인기 검색어에 해당하는 텍스트와 함께 보면 상대적으로 훨씬 눈에 잘 들어온다는 사실을 알 수 있어요.
또 메뉴를 주문할 수 있는 음식점 수를 함께 보여주는데요. 설정된 주소를 기반으로 안내해주기에 특정 메뉴를 주문하고 싶다는 생각으로 이미지를 탭하면 주문 가능한 ‘매장’을 한 눈에 볼 수 있습니다. 만약 근처에 해당 메뉴를 주문할 수 있는 매장이 없는 상황에서 추천을 했다면 다음 화면에 들어가서야 그 사실을 알 수 있었을 거에요. 꽤 불편할 수 밖에 없는 흐름이고요.
검색화면과 함께 홈 화면 내 우리동네 음식점을 보여주는 ‘오늘은 요기서 먹어요’ 내 필터도 추가 되었어요. 기본은 추천순이며 익스프레스 사용 가능 여부, 무료배달 여부, 할인중 여부 등을 추가로 선택해 리스트를 확인할 수 있습니다. 이 필터는 익스프레스 화면 내 적용된 것과 같아요. 뭐먹지? 라는 생각이 들때 저도 한 번씩 보는 리스트 였는데 기존에는 어떤 조건에 따라 보여주는 건지도 애매하고 매 번 비슷한 곳이 나와 큰 의미가 없다고 느꼈는데요. 필터가 추가됨에 따라 조금 더 세부적인 조건에 따라 확인할 수 있는 방법이 생긴 것 같습니다.
앞, 뒤 생각없이 문득 든 생각은 검색 화면까지 진입해서 인기 검색어와 관련된 메뉴를 보여주기 보다 해당 내용을 오늘은 요기서 먹어요에 함께 보여주면 어떨까? 하는 내용이었어요. 검색 화면으로 진입 했다는 건 최소한 한 가지 이상을 검색해야겠다는 생각을 가졌을 확률이 높기 때문입니다.
(덧붙임) 배달의만족은 하단 탭에 뭐먹지?를 넣었다가 검색이 들어가며 빠졌고, 메인화면에서도 이제 번쩍배달이 가능한 주변 매장을 보여주는 곳으로 활용하고 있어요. 생각보다 뭐먹지?에 대한 고민을 인앱에서 하지 않는다는 걸 의미하기도 하고요. 쿠팡이츠는 ‘골라먹는 맛집’이라는 이름으로 활용하고 있으며 이미 추천순 등 필터가 적용되어 있기도 합니다.
–
3-1.함께 읽어보세요!
- 요기요는 왜 리뷰 내 바로 주문하기를 넣었을까?
- 2020년, 요기요는 왜 테이크아웃 화면을 두 번이나 개선했을까?
- 요기요는 왜 홈화면에 태그를 추가했을까?
- 요기요가 사진 리뷰를 요청하는 방법
4.커머스에서 컬러 필터 어떻게 활용되고 있을까?
얼마전 29cm가 컬러필터를 업데이트했어요. 원하는 색상에 따라 제품 리스트를 확인할 수 있게 된 것인데요. ‘옷’은 컬러의 영향을 가장 많이 받는 품목 중 하나로, 기존 필터 외 원하는 제품을 더 빠르게 찾아볼 수 있게 되었습니다. 29cm는 컬러를 있는 그대로, 한 눈에 볼 수 있도록 구성했어요. 텍스트가 아니라 훨씬 직관적으로 확인, 선택할 수 있습니다. 지난 뉴스레터 ‘모바일 앱에 맞는 필터와 정렬’을 준비하며 지그재그에서도 컬러 필터가 적용되어 있음을 확인했었는데요. 다른 서비스에서 컬러 필터는 어떻게 활용되고 있는지 조금 더 살펴봤습니다.
(1)원더플레이스
원더플레이스 앱에도 ‘컬러’ 필터가 적용되어 있어요. 다만 텍스트로 구성되어 있어 하나씩 읽어가며 확인, 선택할 수 있습니다. 게다가 텍스트 크기가 작아 더 구분하기 어렵다는 아쉬움이 있었어요. 컬러 필터가 제공돈다는 건 좋지만 편의를 위한 디테일이 부족해보였습니다.
(2)쿠팡
쿠팡도 있어요. 색상이라는 이름으로 필터가 적용되어 있어요. 꽤 많은 컬러가 제공되는 점은 좋지만 원더플레이스와 같이 텍스트로만 구분이 가능한 점은 아쉽게 느껴집니다.
(3)11번가
마찬가지로 색상이라는 이름의 필터가 제공되며, 텍스트로만 구분할 수 있어요. 다만 각 컬러 별 몇 개 상품이 포함되어 있는지 미리 확인할 수 있는 점은 좋았습니다. 원하는 필터를 선택, 적용했을 때 몇 개의 결과가 있는지 미리 안내하는 건 꽤 중요해요. 사용자가 두 번 행동 하지 않게 하는 역할을 하기 때문입니다.
(4)지그재그
실제 컬러와 텍스트로 확인은 물론, 몇 개의 상품이 있는지 확인할 수 있어요. 컬러 필터를 가장 잘 활용하는 서비스라는 생각이 듭니다.
(5)W컨셉
29cm, 지그재그와 같이 실제 색상을 보고 선택할 수 있어요. 텍스트도 함께 적용되어 있지만 굳이 영문으로 적용할 필요가 있었을까 싶습니다. 선택한 컬러에 해당하는 옷이 몇 개인지 확인할 수 없다는 점도 아쉽네요.
–
4-1.함께 읽어보세요!
–
지금 써보러 갑니다 뉴스레터 안내
지금 써보러 갑니다 00:00, 지난 목요일 발행된 뉴스레터는 사용자를 사로잡는 스크린샷 구성방법 이었어요. 다음 발행 주제는 ‘권한 요청’으로 서비스에서 필요로 하는 필수, 선택 권한을 사용자에게 언제, 어떤 방법으로 안내 하는지 OS 별 사례가 포함 될 거에요! 또 하나, 뉴스레터 네 번째 에디터 🦄 썬데이 님이 합류해 더 알찬 내용으로 찾아 뵐 예정이니 많은 기대 부탁드려요!
–
