배민프레시 Web Benchmarking
정돈되어 있는 메뉴판 처럼 심플하고 깔끔하다. 지나치게 꾸미지 않은 사이트가 오히려 더 고급스럽게 보인다.
A. 정보구조
풀무원 제안 작업을 지원하며 배민프레시 웹을 처음 알았다. 뭐하는 사이트 인지 잠깐 둘러 보았지만 직관적인 정보구조로 이해하기 편하게 구성되어 있다.
상단 공지 레이어는 사용자를 배려하여 화면을 덮지 않도록 띠배너 형태로 노출하였다. 광고 팝업을 무의식적으로 닫고 다시 확인해야하는 경우가 종종 발생한다.
재노출 설정이 가능한 버튼이 주변에 있어도 좋을 것 같다.
B. 네비게이션
상품카테고리로 GNB를 구성하고 depth를 많이 나누지 않았으며 심플하게 구성되어 있다. 삼품 카테고리는 심플할 수록 상품구성 단위로 이동하기 편하고 상품을 찾기도 편하다.
많은 품목을 취급할 수 밖에 없는 종합몰이야 별 수 없지만 아이템이 다양하지 않은 경우 상품 카테고리를 복잡하게 나누는 것은 오히려 상품상세화면 접근율을 떨어뜨릴 수 있다.
특히 베스트, 이벤트, 윤식당 등 사용자 참여를 유도하는 메뉴는 상품 카테고리 메뉴와 분리하여 메뉴를 수식하는 문장으로 재미있게 표현하였다.
사용자 참여를 유도하기 위해 메뉴 구성에도 신경을 쓴 흔적이 보인다.
키비주얼을 담당하는 배너 이미지에 신경을 썼다. UX/UI 를 고민하기 전에 단순히 디자인 느낌만 본다면 이미지의 역할도 중요한 요소이다.
우리가 방송에서 한번쯤 본 윤식당의 이미지를 배너 이미지로 잘 표현했으며 조잡한 광고 배너보다 더 눈에 잘 들어온다.
주문/결재가 이루어 지는 커머스이지만 커머스스럽지 않은 심플한 원페이지 스타일의 UI를 사용하여 메인화면에 다양한 콘텐츠를 적당한 여백을 두어 배치하였다. 각각의 상품그룹 영역은 배경컬러를 다르게 하여 스크롤 하더라도 다양한 상품 이미지로 하여금 부담을 느끼지 않도록 사용자를 배려하였다.
배민프레시의 BI 컬러를 적절히 활용하여 웹을 이용하는 동안 배민프레시 BI를 자연스럽게 받아 들일 수 있다.
상단에 보이는 이미지 까지가 1280 해상도에 보이는 이미지이다. 1280 기준으로 헤더와 배너만 풀로 채운 것 보다는 하단에 다른 콘텐츠를 살짝 보여주는 것이 심리적으로 하단의 콘텐츠를 스크롤하게 만든다.
하단 콘텐츠 구성도 네비게이션과 마찮가지로 상품카테고리 중심으로 그룹핑 되어 있어 어떤 목적으로 운영되는 웹인지 단번에 이해할 수 있으며 그룹핑된 상품도 일관성 있게 배열되어 있다. 메인화면에 꼭 필요한 콘텐츠나 상품리스트의 적절한 배치는 상품 상세화면으로 연결된다. 곧 상품 상세화면이 많이 노출된다는 것은 구매율을 높일 수 있다는 뜻이 되기도 한다. 2개씩 노출되는 배너 하단은 상품 단위 그룹을 구성하였다. 메인 화면 전체를 스크롤 하더라도 부담스럽게 느껴지지 않는다. 간혹 대형 쇼핑몰 서핑을 하다 보면 쇼핑몰 상품이 누구를 위한 배열인지 의문이 갈 때가 있다.
전반적으로 고민하여 설계하고 디자인한 웹인 것 같다. 다소 아쉬운 부분이 있다면 디자인 관점에서 점, 선, 면처리의 마무리 디자인과 기능 관점의 디테일한 사용자 배려가 부족한 부분이 조금 아쉽지만 전체적으로 잘 정돈된 UI로 웹 운영 목적을 메인화면에서 충분히 어필하고 있다.
최신 댓글