|
|
|
|
|
|
|
|
|
|
|
|
이번에 소개할 작업은 민벵이의 '파워꽃벵이환' 상세페이지 디자인이에요. 굼벵이환 형태의 건강식품으로, 인트로와 제품 설명부터 영양성분, 제조 과정, 각종 성적서와 특허, 제품명·원재료 안내까지 담아야 할 정보가 꽤 많은 프로젝트였어요.
이 글에서는 많은 정보를 어떤 순서로 배치했는지를 중심으로 소개해볼게요.
상세페이지 구성 순서는 어떻게 정하면 좋을까요?
구성 순서는 고객이 제품을 알아가는 흐름에 맞춰 정하는 게 기본이에요. 제품이 무엇인지 먼저 이해하고, 그다음 세부 정보와 근거 자료를 확인하는 순서가 자연스럽게 읽혀요.
자료가 많을수록 전부 앞쪽에 보여주고 싶어지는데요. 정보가 한곳에 몰리면 무엇부터 봐야 할지 헷갈리기 쉬워요. 그래서 자료가 많은 상품일수록 순서를 먼저 정하고 디자인을 시작하는 편이 좋아요.
인트로와 제품 설명으로 시작한 굼벵이환 상세페이지
파워꽃벵이환 상세페이지는 인트로로 제품을 먼저 소개하고, 바로 이어서 제품 설명을 배치했어요. 굼벵이환이 어떤 제품인지 알고 나야 뒤에 나오는 성분이나 제조 정보도 의미 있게 읽히기 때문이에요.
그다음은 영양성분과 구성성분 안내예요. 숫자와 항목이 많은 정보는 설명 문장 사이에 섞기보다 따로 영역을 두는 편이 확인하기 편해요. 작은 모바일 화면에서 볼 때는 더 그렇고요.
제조 설명과 성적서·특허는 제품을 이해한 다음에
성분 안내 뒤에는 제품 제조 설명을 넣었고, 이어서 각종 성적서와 특허 관련 내용을 담았어요. 건강식품은 제품이 어떻게 만들어지는지, 어떤 자료로 확인할 수 있는지 궁금해하는 분들이 많아서 상세페이지에서 빠지면 아쉬운 부분이에요.
성적서나 특허증 같은 문서 이미지는 여러 장을 그대로 나열하면 다 비슷해 보이기 쉬워요. 어떤 내용을 확인할 수 있는 문서인지 짧은 제목과 함께 보여주면 필요한 자료를 찾기 한결 수월해요.
제품명과 원재료 안내로 마무리한 구성
마지막에는 제품명과 원재료 등 기본 정보를 정리했어요. 구매 전에 한 번 더 확인하게 되는 정보라 하단에 모아두면 찾기 편해요.
정리하면 이번 상세페이지는 인트로 → 제품 설명 → 영양성분·구성성분 → 제조 설명 → 성적서·특허 → 제품명·원재료 순서로 구성했어요. 제품을 알아가는 흐름을 따라 확인할 정보가 차례대로 이어지도록 한 구성이에요.
굿파크는 2012년부터 다양한 상품의 상세페이지를 디자인해오고 있어요. 건강식품처럼 성분표, 성적서, 특허 등 확인할 자료가 많은 제품은 자료를 먼저 살펴보고, 어떤 순서로 보여줄지부터 함께 정리하고 있어요.