'레이아웃'에 해당되는 글 5건
- 2010/06/04 쇼핑몰 초보자를 위한 시리즈 - (5)웹사이트 레이아웃 그리기 iplotz (1)
- 2010/05/10 쇼핑몰, 디자인 레이아웃 트랜드
- 2010/02/04 쇼핑몰 검색창은 어디? (1)
- 2009/11/16 쇼핑몰 design 구매를 극대화 하는 방법 (1)
- 2009/10/23 쇼핑몰에서 중요한 'Above the fold' 영역 (1)
쇼핑몰 초보자를 위한 시리즈 - (5)웹사이트 레이아웃 그리기 iplotz
웹사이트 디자인을 시작하기 전 명확한 레이아웃이 잡혀있다면 쇼핑몰 구성을 이해하는데 한결 유리하다.
비단 쇼핑몰 운영자뿐만 아니라 쇼핑몰을 만드는 업체에서도 웹사이트 레이아웃를 보다 깔끔하고 빠르게 보여줄 수 있다.
쇼핑몰 레이아웃를 구성해주는 대표적인 웹 서비스는 'iplotz' 이다.
간단한 사용법을 알아보자.
완성된 프레임을 HTML로도 볼 수도 있고, 작업을 공유할 수도 있다.
-
-
초보자 2010/06/04 11:51
이런 서비스도 있군요~ 매페이님은 항상 이런 사이트는 어디서 아시는지요~
정말 신기해요..~ㅋㅋ
1. 종합쇼핑몰 - 인터파크 (http://www.interpark.com/)
2. 종합쇼핑몰 - 롯데닷컴 (http://www.lotte.com/)
3. 오픈마켓 - 옥션 (http://www.auction.co.kr/)
4. 오픈마켓 - G마켓 (http://www.gmarket.co.kr/)
5. 종합쇼핑몰 - d&shop (http://www.dnshop.com/)
6. 브랜드의류쇼핑몰 - 하프클럽닷컴 (http://www.halfclub.com/)
7. 선물/디자인소품쇼핑몰 - 텐바이텐 (http://www.10x10.co.kr/)
8. 컴퓨터쇼핑몰 - 아이코다 (http://www.icoda.co.kr/)
9. 남성보세의류쇼핑몰 - 멋남 (http://www.mutnam.com/)
10. 여성보세의류쇼핑몰 - 스타일난다 (http://www.stylenanda.com/)
위에서 살펴 본 쇼핑몰들의 "상단 영역 및 전시카테고리" 표현 방법들에는 몇가지 공통점을 찾을 수 있습니다.
- 검색 여역을 크게, 중앙에, 눈에 잘 띄게 처리했다는 점
- 전체 카테고리를 한 눈에 볼 수 있게 카테고리 영역을 크게 차지하고 있다는 점
- 좌우 여배글 활용한 쇼핑관련 컨텐츠 및 유틸리티를 제공하고 있다는 점
- 화려하고 요란한 디자인은 배제되고, "포인트 칼라와 로고 중심의 심플하면서 컨텐츠에 집중할 수 있는 디자인"이라는 점
온라인 쇼핑몰은 방문객들의 체류시간이 매우 짧기 때문에 원하는 걸 최대한 빨리 찾아줄 수 있는 효과적인 검색기능을 제공해야 한다.
최근에는 일반적인 텍스트 검색뿐만 아니라 다양한 형태의 검색을 제공하는 쇼핑몰들이 늘어나고 있다.
국내에서 운영중인 쇼핑몰 검색과 검색창 동향에 대해 분석해보고, 쇼핑 검색에 대한 전체적인 방법들을 소개해보고자 한다. 본 포스팅에 소개된 쇼핑몰은 무작위로 선정한 것이므로 더 나은 검색방법이나 검색결과가 있으면 언제든 댓글이나 이메일을 통해 알려주시면 된다.
1. 쇼핑몰 상단에 위치한 검색창
쇼핑몰에서 검색을 위한 가장 일반적인 검색창의 위치는 페이지 상단 오른쪽이다. 검색창 바로 옆에는 로그인과 장바구니 쇼핑 가이드 처럼 쇼핑 외적인 중요한 요소와 함께 배열한다. 대부분 쇼핑몰에서 검색창은 이 곳에 위치하고 있기 때문에 방문객들이 처음 왔더라도 검색창을 찾기위해 헤매지 않아도 된다.
검색창은 레이아웃상 특별한 요소가 없다면 일반적인 위치에 배치하는 것이 좋다.
2. 메인 메뉴에 가까이
기본적으로 검색창은 페이지 오른쪽 상단에 위치하지만 오른쪽에서 조금 아래로 내려와 메인 메뉴 바로 옆에 위치하기도 한다. 메인 메뉴 바로옆에 위치하기 때문에 메뉴에 대한 기본적인 검색은 미리 이뤄진다고 볼 수 있다. 그 이유는 인간의 시각은 왼쪽에서 오른쪽에서 상단에서 하단으로 움직이기 때문이다.
"쇼핑몰에서 중요한 'Above the fold' 영역" 참고
3. 돋보기 픽토그램
다음 페이지로 넘어갈 생각에 마음이 바쁜 방문자가 텍스트를 읽지 않고 신속하게 검색창을 찾고자 할때 검색창에 돋보기 픽토그램은 매우 효과적이다. 픽토그램은 인간의 시각적인 반응을 가장 쉽고 빠르게 전달할 수 있는 유용한 도구다.
예를 들어 시속 120km의 속도로 고속도로를 달리고 있다고 가정해 보자.. 오밀조밀한 작은 글씨는 눈에 잘 들어오지 않는다. 대신 크고, 선명하며 눈에 확 띄는 휴게소 안내판이나 전방 500m 카메라 표지판은 쉽고 빠르게 들어온다. 픽토그램은 빠르게 움직이는 사람들에게 정보를 전달하는 최상의 방식이기 때문이다.
4. 검색창 추천 문구
사용자들이 쇼핑몰에서 검색을 하는 이유는 원하는 상품을 찾고 그 결과를 얻기 위한것도 있겠지만 꼭 그렇지 않은 경우도 있다. 그런 의미에서 검색창안에 상품에 대한 간단한 문구를 넣는건 일종의 광고 효과를 노릴수도 있으며 특정 상품에 대한 판매 촉진을 위한것일수도 있다. 따라서 검색창 텍스트는 짧은 단어보다 주로 구문을 활용한다.
5. 연관 검색어 및 추천 검색어
연관 검색어는 상품 종류가 많은 대형몰에 주로 사용되는데 입력한 상품외에 그 상품과 연관된 다른 검색어를 보여줌으로써 사용자에게 하나의 가이드 역할 또는 참조할 만한 추천 검색어 역할을 하게 된다. 사용자에게 더 나은 검색결과를 제공하면서 검색창을 통해 최적화된 쇼핑을 유도하는 역활을 한다.
6. 카테고리 옵션 검색
검색창 왼쪽에 카테고리 옵션 박스를 넣어 검색 범위를 미리 좁혀 다른 불필요한 검색 결과가 나오는걸 방지한다. 주로 여성 고객이 많은 쇼핑몰에서 활용하는데 그 이유는 "쇼핑에서 '남성과와 여성'의 행동 패턴의 차이"를 보면 알 수 있다.
7. 검색창이 없는 검색
바쁜 방문객들을 위해 검색할 필요 없다면 굳이 검색창을 넣지 않아도 된다. 판매하는 상품이 많지 않거나 이미지로 설명이 충분히 가능하다면 검색창 없는 검색도 가능하다.
검 색창에 키워드를 넣고 검색하는 일반적인 형태에서 벗어나 고객들이 원하는 컬러, 스타일, 무료배송여부, 쿠폰적용여부, 사이즈별, 태그별 등 다양한 기준에 맞춰 상품을 찾아볼 수 있는 세분화된 검색 방법도 최근 늘어나고 있는 추세다.
-
핫한마음쿨한생각 2010/02/04 13:16
사이트마다 검색 창이 꼭 있을 필요는 없다고 하지만 없으면 왠지 불편할 것 같이 느껴지네요~
근데 검색창 대신 찾을 수 있는 다른 방법도 좀 색다른것 같아요~^^
웹 디자이너는 아니지만 쇼핑몰과 관련된 구체적인 UI자료를 자주 찾는편이다.
이번에 다룰 UI영역은 가격이 표시되는 상품페이지 부분이다. 디자인은 "80 Examples of Add to Cart Buttons for Design Inspiration"를 참고하였다.
1.가격을 깍아주는 표시로, 싸다는 느낌을 "자연스럽게"강조
이렇게 저렇게 말해도, 사실 고객들이 쇼핑몰에서 구매를 결정하는 건 가격의 영향이 크다. 가격에 상관 없는 상품을 판매하는 곳이라면 큰 신경을 안써도 되겠지만 대부분 쇼핑몰에선 다른곳보다 또는 기존것보다 싸다는 것을 호소하기 위해 다양한 방법을 활용한다는 것이다.
많은 쇼핑몰에서 가격을 내리기 전 과 가격을 내린 후 가격을 위나 아래, 좌우로 표시한다. 그리고 기존 가격보다 내린 가격을 더욱 강조한다. (주로 붉은 계통의 색을 사용하고, 굵게 볼드처리한다.) 기존 가격 즉, 정가는 살짝 눈에 띄는 정도로 연한 회색으로 처리하거나 가격사이에 가로선을 긋는다. 가로선을 긋는 이유는 정가를 무시했다라는 점을 강조하기 위해서다.
2. 불규칙 가격 표시로, 결제를 유도
결제 페이지는 대부분 웹 폰트에 맞는 가로 세로 기본 글꼴이다. 하지만 아래 사이트는 결제를 담당하는 딱딱한 영역을 손글씨 느낌이 나도록 디자인하여 결제를 유연하게 이끌어내고 있다. 웹 서핑을 하는 사람이라면 누구나 결제 하는 방법을 알고 있지만 상품 페이지에 사용자의 이해를 돕는 보충 설명은 흥미롭다.
3. 가격 바로 옆에 배송정보를 자연스럽게 배치
쇼핑몰에 배송은 중요한 영역이다. 상품페이지 하단에 배송 정보는 꽤 많은 부분을 차지하고 늘 따라다닌다. 매번 페이지를 읽을 때마다 "얼마이상 무료배송"이나 "전체 상품 무료배송" 같은 문구를 읽는것도 쉽지 않은 일이다.
가격 옆에 "+무료 배송" 이라고 넣는다면 가독성을 해치지도 않고, 상품페이지를 낭비하지도 않아 확실히 좋은 느낌을 받을 수 있다.
4. 트위터나 친구들에게 정보를 공유하는 도구 배치
메신져, Twitter, 스크랩, 북마크, 웹공유, 이메일, 등으로 주위 사람들에게 정보를 전달해 줄 수 있으면 일석이조다. 너무 눈에 띌 필요는 없지만, 이것 또한 정보가 자연스럽게 흘러가도록 도구를 넣어두면 좋다.
겉에서 보기엔 서로 비슷해 보이지만 쉽게 지나칠 수 있는 이런 작은 영역에서 매출의 차이가 난다.
물론, 쇼핑몰을 운영하다 보면 이것 말고도 신경써야 하는 수 많은 영역이 있다. 경영, 관리, 기획, 재무, 인사, 생산, 홍보, 유통, 판매, 디자인, 브랜드, 마케팅, 고객 서비스 등등 그 더미속에 상품 판매에 큰 비중을 차지하지 않는 부분일 수도 있다.
그러나 이런 작은 경험들이 차곡 차곡 쌓이다 보면 고객들의 좋은 반응이 소문도 나고 매출로도 이어지게 된다.
-
차가운 하늘 2009/11/17 11:06
쇼핑몰을 운영하려면 정말 다재다능해야 할꺼 같아요~요즘은 쇼핑몰 구축회사도 많이 있긴 하지만~사소한 이런 저런 것들 까지도 배려해야 하고...힘들어도 조금조금씩만 노력하고 신경 쓴다면 성공한 쇼핑몰을 만들 수 있겠죠?
'Above the fold'는 마우스 스크롤 없이 볼 수 있는 화면 영역이다.
"above"는 "~ 위에", "fold"는 "주름"이라는 의미로 "above the fold"는 직역하면 "주름 위에"라는 뜻이다. 신문의 주름 윗쪽 반은 사람들의 관심을 끄는 헤드 라인 뉴스나 사진을 제공한다. 구매 의욕을 돋우기 때문이다.
아래 그림은 Google 검색 결과다.
굵은 빨간선 윗 공간을 스크롤하지 않아도 볼 수 있는 영역. 굵은 빨간 선 아래 영역을 스크롤하지 않으면 볼 수 없는 영역이라고 한다면 위쪽의 공간이 바로 "Above the fold"이다.
이 "Above the fold" 영역은 쇼핑몰에서 매우 중요한 부분을 차지한다. 즉, 방문자들에게 제공해야 할 컨텐츠를 "Above the fold" 안쪽에서 거의 모두 담당하기 때문이다.
누가 정했는지 모르겠지만 방문자는 현재 방문한 페이지가 자신에게 필요한것인지 불필요한것인지 "3초 만에 결정"한다고 한다. 즉, 한명의 방문자라도 놓치지 않기 위해선 "Above the fold"에 무엇을 배치하는가가 대단히 중요하다.
Above the fold 중에서도 특히 핵심적인 부분은 "Golden Triangle(골든 트라이앵글) "라고하는 영역이다. 위 그림에선 노란색 역삼각형 공간이 Golden Triangle를 나타낸다.
인간의 시선은 왼쪽을 기점으로 움직이기 시작한다.
그리고 Golden Triangle 안쪽을 중심으로 이동한다. 그림에서도 알수 있듯이 골든 트라이앵글쪽 영역은 사람들이 가장 많이 주목하고 있다.
그렇기 때문에 이부분은 쇼핑몰에서 판매하고 있는 관련 내용이나 중요한 이미지를 배치하는 것이 고객들의 의식을 파악하는데 많은 도움이된다. 또한 쇼핑몰에서 방문객들의 "반송률"을 최대한 억제시키기 위해선 "Above the fold"와 "Golden Triangle"을 현명하게 이용하는 것이 중요한 사항이다.
--
-
카카루시 2009/10/26 08:48
쇼핑몰에도 어떤 자리에 어떤 물건을 전시 할 것인지에 따라 매출에도 큰 차이가 있군요~
시선이 가는 쇼핑몰을 만들기 위해서는 디자인 역시도 중요한 항목 중 하나 인것은 분명하네요~!!
Prev
Rss Feed