–

1.아디다스가 상세화면을 활용하는 방법

상세화면에는 리스트에 포함되지 않은 더 많은 상품 관련 정보가 포함됩니다. 최근에는 리스트에서 옵션, 구매 가능 여부 등을 안내하는 경우도 있지만, 아직은 상세화면에 더 많이 의존하는 서비스가 많은데요. 다만, 모바일에서는 상세 화면이 더 길게 느껴져 원하는 정보를 사용자가 스스로 찾아내야 하는 불편이 존재합니다. 이런 불편을 해결하기 위해 상세화면을 모바일에 최적화된 상태로 구성하는 서비스가 종종 눈에 띄는데요. 대표적으로 상세 화면을 상세 탭으로 구분해 원하는 정보를 더 빨리 접하게 하는 방법입니다. 오늘은 아디다스 앱을 통해 그 내용을 살펴보고자 합니다.

아디다스의 상세화면은 옵션에 따른 제품 이미지에 집중되어 있어요. 보통 상품 이미지는 상세 화면 중간에 적용되어 있고, 이미지를 제품 컬러 별로 차례대로 보여주는 때가 많은데요. 아디다스는 상세화면 진입과 동시에 전체 상품 옵션을 보여주고, 각 상품을 선택하면 해당 상품의 상세 이미지를 화면 이동이나 스크롤 등과 상관없이 정해진 영역에서 바로 확인할 수 있도록 구성되어 있습니다.

덕분에, 동일 상품이지만 컬러나 디자인에 따라 조금씩 따른 상품의 모습을 빠르고 자세히 확인할 수 있어요. 상세 정보를 확인하기 위해 스크롤을 내려도, 상품 목록은 상단에 고정되어 있어 언제든 다시 볼 수 있습니다. 구매하기 전 원하는 컬러에 해당하는 이미지를 보기 위해 스크롤을 여러 번 활용했던 경험이 있는 사용자에겐 꽤 편리하게 느껴지는 구성이라고 생각합니다. 이미지는 구매에 중요한 영향을 미치는 정보이며 기준이라 옵션 별 이미지를 먼저 충분히 확인한 후 상세 내용을 볼 수 있고, 상세 내용을 보다가도 언제든 이미지를 볼 수 있다는 점이 눈에 띄는 사례입니다.

–

1-1.함께 읽어보세요! #상세화면

–

2.맥도날드가 쿠폰 사용 조건을 활용하는 방법

맥도날드 앱에서 자주 사용하는 기능 중 하나가 바로 ‘쿠폰’입니다. 일반 메뉴는 물론 맥모닝에 해당하는 다양한 쿠폰이 제공되기 때문입니다. 쿠폰 리스트를 통해 특정 쿠폰 화면으로 진입하면 기존에 잘 보지 못했던 내용을 확인할 수 있는데요. 바로 ‘사용 조건’을 체크리스트처럼 제공하는 구성입니다.

쿠폰 자체는 우리에게 익숙한 개념이고, 꽤 많은 곳에서 사용하고 있지만 주어진 쿠폰을 사용하는 과정에서 ‘조건’을 한 번에 파악하기 어려운 경우가 많은데요. 예를 들어 배달 주문을 위해 쿠폰을 다운로드하고 결제 시 적용하려는데 특정 메뉴에만 해당된다거나 (프로모션 메뉴), 일정 금액 이상을 주문해야 쓸 수 있는 등 그때야 조건을 확인하게 되는 상황이 있습니다. 특정 매장에서는 사용 불가능한 경우도 생기고요.

이런 불편을 해결하기 위해 맥도날드는 쿠폰을 사용하는데 필수로 필요한 조건을 보기 좋게 나눠 사용자에게 보여줍니다. 기본적으로 사용자 단위로 쿠폰이 제공되기에 로그인이 되어 있어야 하며, 사용 시간대는 물론 누적 포인트 기준도 확인할 수 있습니다. 이를 통해 로그인은 되어 있는데, 시간이 맞지 않아 사용하지 못하는 상황이나 로그인이 되어 있고 시간도 맞지만 포인트 기준이 맞지 않아 사용하지 못하는 등의 상황을 빠르게 알 수 있습니다.

사용 버튼은 조건이 맞지 않을 경우 비활성화되어 있으며, 사용 조건을 확인해달라는 문구가 계속 출력되어 미처 조건을 확인하지 못한 경우에도 다시 확인할 수 있는 기회를 제공합니다. 사용자를 위한 혜택 중 하나로 제공되는 것이 쿠폰인데, 사용 과정이나 조건 자체를 어렵게 하는 건 큰 의미가 없다고 생각해요.

조금 다른 맥락일 수도 있지만 쿠폰을 모아 주문했을 때, 양을 더 적게 주는 것과 비슷하게 받아들여지지 않을까 싶기도 합니다. 쿠폰으로 주문했는데, 양이 더 많이 왔다는 이야기가 사실은 당연한데 여전히 회자되는 걸 보면, 당연함에도 작은 차이에 좋은 경험이 될 수 있다는 것을 의미하는 건 아닐까 싶네요. 그렇게 쿠폰도 쉽게, 명확한 기준에 따라 사용할 수 있는 환경을 제공해주는 것이 좋을 듯 합니다.

–

2-1.함께 읽어보세요! #쿠폰

–

3.Anthropologie가 리스트와 상세화면을 활용하는 방법

최근 불나유(불편함이 낳은 UX) 두 번째 콘텐츠를 준비하며 리스트와 상세화면 구성을 많이 접하고 있어요. 주로 해외사례를 많이 참고하고 있는데요. Anthropologie는 리스트와 상세화면을 유기적으로 잘 활용하는 사례 중 하나입니다. 먼저 리스트에서는 해당 제품의 컬러 옵션을 확인할 수 있으며, 썸네일 이미지를 스와이프해 다양한 착용샷, 제품 모습을 살펴볼 수 있습니다. 상세 화면으로 접근하기 전 ‘패션’관련 중요한 정보를 대략적으로 파악할 수 있는 기회를 제공하고 있어요.

상세 화면으로 진입하면, 전혀 다른 화면으로 이어지는 것이 아니라 리스트에서 본 이미지를 더 크게 볼 수 있는 연결로 이어집니다. 화면은 전환되지만, 덕분에 이질감 없이 선택한 상품에 대한 탐색을 이어갈 수 있어요. 상세 화면에서는 스크롤 없이 컬러 별 제품 이미지를 볼 수 있도록 구성되어 있습니다. 물론 상세 내용은 화면 아래로 이어지지만 우선 이 제품이 컬러 별 어떤 모습을 갖고 있는지 리스트와 상세 화면을 통해 구체적으로 살펴볼 수 있다는 점이 인상적입니다.

컬러별 이미지와 함께 또 하나 눈에 띄는 점은, 바로 아래로 사이즈와 수량을 선택할 수 있다는 점입니다. 보통은 구매하기를 눌러 옵션을 선택하는 경우가 많은데요. Anthropologie는 상세 화면을 통해 옵션에 따른 상세 이미지 확인은 물론, 사이즈와 수량까지 선택할 수 있어 훨씬 편리하게 느껴집니다. 이외의 정보를 확인하고 싶다면 화면을 아래로 내려 우리가 흔히 상세 화면을 통해 볼 수 있는 추가 정보나 리뷰 등을 확인할 수 있어요. 

–

3-1.함께 읽어보세요! #리스트

–

4.요기요는 왜 메뉴 단위로 사진 리뷰를 보여줄까?

배달이나 포장 주문을 하기 전, 매장에서 제공하는 메뉴 별 이미지를 자주 보게 되는데요. 계속 먹어 경험한 적 있는 메뉴라면 크게 상관없지만, 신메뉴거나 새로운 매장에 주문을 하는 경우라면 메뉴 별 이미지가 메뉴명보다 더 많은 정보를 담고 있다고 생각합니다. 그런데, 종종(?) 속을때가 있어요. 매장에서 제공하는 이미지는 최대한 ‘그럴듯하게’ 촬영되는 경우가 많기 때문인데요.

그래서 저는 앱 내 제공되는 매장 별 후기를 살펴보거나 주문하고자 하는 메뉴에 대해 따로 검색해보는 경우가 많습니다. 실패 가능성을 최대한 줄이고자 하는 나름의 노력인 것 같아요. 이런 불편을 요기요는 메뉴 단위로 사진 리뷰를 제공하는 방법으로 해결하고 있는데요. 매장에서 제공하는 메뉴를 선택하면, 해당 메뉴를 먼저 주문한 사람들의 리뷰만 모아서 제공하고 있습니다.

메뉴에 대한 ‘리뷰’를 텍스트 위주로 보여주는 방법이 아닌, 사진이 있는 리뷰만 메뉴 사진 아래로 제공하는 방법인데요. 덕분에 실제 주문한 사람들을 통해 메뉴의 모습을 자세히 볼 수 있습니다. 한 장의 대표 이미지로는 알 수 없는 메뉴의 모습을 구체적으로 확인할 수 있다는 점이 가장 큰 장점이라고 생각해요. 사진을 별도로 모아볼 수 있고, 텍스트가 포함된 사진+텍스트 리뷰 전체를 모아보는 것도 가능합니다.

메뉴 대표 사진 아래로 ‘위 사진은 연출된 사진으로, 실제와 다를 수 있습니다’라는 문구가 포함되어 있는데요. 기존에는 이 문구를 보고, 다른곳에서 검색을 하는 등의 추가 행동이 필요했지만, 이제 메뉴에 따라 실제 주문한 사람들이 촬영한 사진을 볼 수 있게 되어 앱을 벗어나지 않고도 확인할 수 있는 정보가 많아진 느낌입니다. 그럼 이제, 대표 이미지는 어떤 메뉴인지 파악하는 용도로, 주문한 사람들이 남긴 사진과 리뷰는 실제 주문 여부를 결정하는 용도로 활용할 수 있을거란 생각이 드네요.

–

4-1.함께 읽어보세요! #리뷰

–

5.데이트립이 지역을 중심으로 온보딩을 활용하는 방법

데이트립은 기존에 별도 온보딩 과정이 없었어요. 그러다 이번에 앱을 새롧게 설치하며 가입 과정을 새로 거쳤는데 회원가입 과정에서 일련의 온보딩 과정이 추가된 것을 알 수 있었습니다. 데이트립은 다양한 사람들이 저마다의 시선으로 지역 별 장소를 큐레이션 해주는데요. (최근에는 누구나 장소를 소개하고 등록할 수 있게 되었습니다.) ‘장소’에 대한 정보를 확인할 수 있는 공간이라 아무래도 ‘관심 지역’이 초기 중요한 연결고리 될 수 밖에 없어요.

가입 과정에서 사용자 이름을 지정하면, 바로 상위 – 하위 지역을 선택할 수 있습니다. 여기서 상위란 도 또는 특별시 기준이며 하위는 각각의 도에 포함된 도시를 의미해요. 저는 경기도 – 수원시를 각각 선택했는데요. 선택 후 ‘관심 큐레이터’ 설정 화면을 만날 수 있습니다. 큐레이터 이름, 팔로워 숫자 등의 기본 정보는 물론 최근에 등록한 장소 리스트를 볼 수 있어요. 마음에 드는 큐레이터를 팔로우하면, 관심 공간을 설정하는 화면으로 연결됩니다.

관심 공간은 앞서 설정한 ‘지역’에 맞는 장소를 먼저 볼 수 있어요. 수원의 월화원이라는 공원 등을 볼 수 있는 방법입니다. 선택한 지역에 대한, 내가 좋아하는 스타일에 따른 정보를 제공해주는 사람을 찾는 과정으로 가입과 온보딩을 활용하는 모습입니다. 이 과정에서 사용자의 ‘관심 지역’을 알 수 있게 되고, 소셜의 기능을 기본으로 한다는 점(큐레이터 팔로우), 그리고 지역 별 장소를 ‘저장’할 수 있다는 서비스 핵심 기능을 알 수 있었어요.

데이트립은 소셜 기능을 담고 있지만, 인스타그램처럼 다양한 이야기가 오가는 공간이 아닌 큐레이터의 시선이 듬뿍 담긴 ‘장소’에 초점이 맞춰져 있기 때문입니다. 자연스레 우리 동네, 자주가는 동네에 어떤 공간이 있는지를 먼저 탐색하고, 관심이 생길 수 밖에 없어요. 찾아갈 장소에 대한 탐색은 그 이후라고 생각하고요. 그래서 온보딩 과정에 지역 선택이 들어간 게 더 눈에 띄었습니다. 이 과정이 없었다면 초기 사용자에게 더 매력적인 연결이 되지 않았을 것 같다는 생각이 드네요!

–

5-1.함께 읽어보세요! #온보딩

–

📮 팁스터 뉴스레터 안내

1월 20일 목요일 발행 주제는 ‘4가지 유형에 따른 알림 화면‘이었습니다. 2월 4일 발행될 내용은 ‘쿠폰 화면’입니다. 더불어 1월 27일에는 불편함이 낳은 UX 두 번째 리스트 편이, 2월 8월에는 ‘서비스를 만드는 사람들’ 첫 번째 플레이오 PO편이 발행될 예정입니다. 새롭게 펼쳐질 이야기도 많은 기대 부탁드려요! (뉴스레터 구독하기)

–

Post Views: 488

RELATED ARTICLESMORE FROM AUTHOR