–
1.이케아가 상세화면 내 동일 상품 다른 컬러를 보여주는 방법
상세화면을 통해 동일 상품의 다른 옵션(컬러 등)을 볼 수 있는 경우를 자주 접하게 되는데요. 이케아 역시 비슷한 방법을 활용하고 있습니다. 이케아에서 특정 상품을 선택해 상세화면으로 이동하면 가장 먼저 상품 상세 이미지를 확인할 수 있어요. 화면을 아래로 내리지 않아도, 상품에 대한 모습을 스와이프를 통해 살펴볼 수 있는 구성입니다.
그리고 바로 아래로 다른 컬러 정보를 썸네일 형태로 제공합니다. 여기까지도 스크롤 적용이 필요하지 않아, 제품에 대한 주요 이미지를 확인한 뒤 다른 컬러를 선택해 빠른 탐색이 가능합니다. 또 하나 눈에 띄는 건 이미지 구성입니다. 다른 컬러를 선택하더라도 동일한 구성의 이미지를 확인할 수 있어 컬러에 따른 모습을 더 명확하게 확인하고 구분할 수 있습니다.
종종 동일 상품의 다른 컬러를 선택하면, 이미지 구성이 달라지는 경우가 있는데요. (위치가 바뀌거나, 장소가 변경되는 등) 이케아는 이런 혼란을 줄이기 위해 컬러는 다르지만 모두 동일한 조건에 따라 확인할 수 있는 환경을 제공하는 모습입니다. 물론 이런 구성은 직접 제작하고 유통하는 방법이 아닌 이상 쉽지 않지만요.
–
2.Pull&Bear가 상세화면 진입 시 정보를 제공하는 방법
Pull&Bear 앱을 통해 특정 상품의 상세화면을 확인하게 되었습니다. 진입과 동시에 가장 눈에 띄었던 건, 상품의 모습과 주요 정보를 스크롤 없이 확인할 수 있다는 점이었습니다. 물론 훨씬 세부적인 정보는 화면을 아래로 내리는 등의 행동이 필요하지만, 상품을 구매하는 데 있어 필수적인 정보는 최소한의 움직임으로 확인이 가능한 구성입니다.
먼저 상품 이미지는 정해진 영역 내, 위아래로 내리며 연속으로 확인할 수 있습니다. 오른쪽으로 전체 이미지 수와 현재 보고 있는 이미지의 순서도 함께 알 수 있어요. 이런 구성은 다른 컬러를 선택한 뒤에도 상품의 자세한 모습을 빠르게 살펴볼 수 있다는 장점이 있습니다.
또 화면에는 포함되지 않았지만, ‘See the Look’ 버튼을 제공, 함께 입으면 좋은 의류를 확인할 수 있는 기능도 제공하고 있어요. 현재 화면을 기준으로 스크롤 등을 유지하거나 이동하지 않고도 다양한 정보에 재빨리 접근할 수 있다는 생각이 듭니다.
컬러는 동일한 이미지에 따라 확인할 수 있고 컬러 정보에 해당하는 텍스트도 함께 제공합니다. 저는 이 조합이 꽤 좋았는데, 가끔 컬러만 보고는 디스플레이나 밝기 등의 환경에 따라 정확히 어떤 색인지 구분하기 어려운 경우가 있기 때문입니다.
사이즈 정보도 확인할 수 있는데, 컬러를 텍스트와 함께 제공한 것처럼 눈에 띄는 건 바로 모델의 키와 해당 상품의 어떤 사이즈를 입었는지에 대한 정보입니다. 보통 이 정보는 상세 화면 내 하나의 정보로 끝나는 경우가 많은데, 사이즈 정보와 함께 확인할 수 있어 계속해서 참고할 수 있는 기준으로 활용하기 좋습니다. 게다가 현재 재고 현황도 간략하게 확인할 수 있어요. 나의 사이즈를 확인할 수 있는 기능까지!
–
2-1. 함께 읽어보세요! #상세화면
- 올리브영이 상세 화면 내 발색비교 기능을 제공하는 이유
- 멜리즈가 상세화면 내 커뮤니티를 시작한 이유
- 화해가 동일 상품, 다른 구성을 상세 화면 내 제공하는 방법
- 코오롱몰이 동일 상품, 다른 컬러를 보여주는 방법
–
3.마이리얼트립이 신규 기능을 안내하는 방법
마이리얼트립에 얼마 전, 여행 지원금을 선물할 수 있는 기능이 추가되었습니다. 카드를 활용해 카카오톡으로 선물을 보낼 수 있으며, 다섯 명 이상에게 선물하기를 완료할 경우 포인트를 지급받을 수 있어요. 카드를 활용한 선물과 메시지 전달은 다른 서비스에서도 경험한 바 있기에 (그럴 가능성이 높기에) 그 자체로 눈에 띄는 것은 없지만, 관련 안내를 제공하는 방법은 눈여겨봐야 할 내용이 포함되어 있습니다.
먼저, 선물하기 화면으로 진입하면 오른쪽 위에 ‘선물 방법 보기’와 ‘닫기’ 버튼을 확인할 수 있어요. 앞서 언급한 것처럼 카드를 활용해 메시지와 선물을 전달하는 행동은 다른 서비스에서 경험했을 가능성이 존재하지만, 마이리얼트립의 기능과 구조는 낯설게 다가올 수 있어요. 이런 상황에서 선물을 바로 보내라는 안내, 혜택을 강조하기보다 구체적인 사용 방법을 확인할 수 있는 기회가 더 유용하게 느껴질 수 있습니다.
실제로, 선물 방법 보기를 선택하면 무엇을 선물할 수 있나요? 누구에게 선물할 수 있나요? 등 4가지 주요 항목에 따라 상세 내용을 확인할 수 있습니다. 확인을 마친 사용자는 선물 자체가 나와 상대에게 모두 도움이 되는 행동이라는 것을 이해할 수 있어요.
또 지금 이 기능을 사용하고 싶지 않은 사용자에게 별도 안내를 제공합니다. 지금이 아니더라도 선물을 보낼 수 있다는 내용과 어디에서 가능한지 확인할 수 있는 내용이 포함되어 있어요. 이는 당장은 아니지만, 특정 화면에서 다시금 선물을 보낼 수 있다는 내용은 물론 일회성이 아니라는 사실 또한 사용자에게 인지시킬 수 있는 방법이라고 생각합니다.
–
3-1.함께 읽어보세요! #기능안내
- 🚀 사용자의 행동을 자연스럽게 설계하는 방법!
- 삼성은 왜 이미지 내 캡처한 웹 주소를 제공할까?
- 어바웃펫/팔도감/SSG새벽배송의 품절상태 안내
- 닥터차가 커뮤니티 기능을 안내하는 방법
- 커피챗이 신규 기능을 안내하고 활용하는 방법
–
4.부톡이 회원가입 단계 별 안내를 제공하는 방법
최근 이사를 준비하며 호갱노노와 같이 매물 정보를 제공하는 서비스는 물론, 짐싸와 같은 이사 견적 서비스까지 여러 프로덕트를 경험하고 있는데요. 그중 부톡은 매물 검색부터 잔금까지 중개의 모든 과정을 앱 하나로 해결해주는 서비스로 이번에 처음 설치, 회원가입까지 진행하게 되었습니다.
가입 시 입력하는 정보는 대부분 개인정보로 왜 필요한지에 대한 이유가 안내되지 않을 경우 아무리 익숙한 정보라 하더라도 입력을 망설일 수 있는데요. 부톡 회원가입 과정에서 눈에 띄었던 건, 각 단계 별 필요한 안내가 적절하게 제공된다는 점이었습니다. 가장 먼저 입력하는 정보는 휴대폰 번호인데, 휴대폰 번호가 필요한 이유와 사용 방법에 대해 자세히 확인할 수 있습니다.
또, 부톡과 같은 서비스는 사용자 타입이 여럿으로 나뉠 수 있는데요. 중개사가 일반회원과 동일한 방법으로 가입하는 것을 방지하기 위해 ‘중개사님 이신가요?’라는 내용으로 별도 안내를 자세히 제공합니다. 이런 안내가 초기에 제공되지 않을 경우, 가입 완료까지 시간을 허비할 수 있기에 첫 단계에 제공하는 것을 선택하지 않았나 싶습니다.
입력한 휴대폰 번호를 통해 인증번호를 입력하는 단계에서도 안내는 계속됩니다. 인증번호가 오지 않을 경우를 두 가지로 나눠, 재발송 버튼과 함께 이전 화면으로 이동해 번호를 다시 확인하고 수정할 수 있는 방법을 제공합니다. 마지막 단계인 ‘이름’ 입력 시에도 사용자가 얻을 수 있는 혜택을 활용해 실명 입력을 안내하는 모습입니다.
–
4-1.함께 읽어보세요! #회원가입
–
📮 팁스터 뉴스레터 안내!
지난 9월 29일 발행된 팁스터 뉴스레터는 ‘5개 금융 서비스의 포인트‘였습니다. 5개 금융 서비스를 기준으로 포인트를 어떻게 획득하고, 사용할 수 있으며 그 과정에서 눈에 띄는 기능이나 화면, 사용자 경험에 대한 내용을 자세히 살펴봤어요. 10월 13일 목요일 오전 8시 발행 예정인 다음 주제는 ‘커머스의 최근 본 상품 화면‘ 활용 방법입니다. (팁스터 구독하기)
–
