많은 사람들이 "웹 2.0"이란.. 웹 경제의 새로운 부활이나 온라인과 오프라인의 상호 작용, 그리고 참여와 개방, 소통과 공유의 새로운 형태의 사회 현상이라고 설명한다.
온라인 커뮤니티나 쇼셜 네트워크로 이어지는...
그런데 웹 1.0 사이트와 웹 2.0 사이트들은 이런 속 알맹이 모습뿐만 아니라 겉 모습도 살짝 다르다. 딱 보면 "아~ 여기는 웹 2.0 사이트구나~" 바로 느낄 수 있다. 이런 이유는 웹 2.0스러운 디자인 스타일 때문이라고도 볼 수 있다.
훌륭하게 제작된 웹 2.0 쇼핑몰 디자인 사례를 통해 현재 쇼핑몰을 창업하려고 하거나 새롭게 쇼핑몰 디자인 기획을 하려는 분들께 약간이나마 도움이 되었으면 하는 바람으로 각각 부위별(?)로 나눠 15가지정도만 소개해본다.
1. 단순하고 깔끔한 디자인
쇼핑몰에서 단순하고 깔끔한 웹 디자인은 쇼핑에서 좋은 결과를 얻을 수 있다. 각각의 상품들이 품고 있는 정보는 실로 엄청나다. 그 많은 상품속 정보를 최대한 압축하고 단순화 시켜 몇가지 초점에만 맞춰.. 간단하게 정리해서 보여주는 일은 말처럼 결코 쉬운일이 아니다.
웹 2.0 쇼핑몰 메인을 보면 대부분 깔끔하고 단순하다. 그리고 중요한 몇가지에만 초점을 맞추고 있다.
2. 화면 가운데 위치
웹 2.0 쇼핑몰들은 기본적으로 레이아웃이 화면 가운데에 위치해 있다. 상대적으로 인간의 시신경은 어느 한쪽으로 치우쳐 있을때 불안감을 느낀다고 한다.. 불안한데 쇼핑이 제대로 될리 만무하다..
쇼핑에서 고객들에게 최대한 안정감을 주려면 일단 화면의 센터를 잡는게 무엇보다 중요하다.
3. 레이아웃의 횡과 열을 줄인다.
쇼핑몰 레이아웃에 열과 횡이 많아지면 많아질수록 쇼핑에는 방해가 된다.. 기본적으로 쇼핑몰 레이아웃은 2열, 3횡을 쓰는게 일반적이다. 웹 2.0 쇼핑몰의 레이아웃 특징은 1열, 2횡이나 1열 1횡으로 최대한 그 숫자를 줄이려는 경향이 짙다.
번잡한 레이아웃 구성은 쇼핑을 하는데 있어 일종의 과속방지턱과 비슷한 역활을 한다. 쇼핑에 속도를 좀 내보려고 하는데 어디에 눈을 둬야 할지 몰라 자꾸 속도를 줄이게 된다. 될 수 있으면 쇼핑몰이란 도로에는 과속방지턱도 없애고, 신호등도 없애고, 횡단보도도 없애야 한다.
4. 메인에서 별도 페이지 표시는 간단하고 명확하게
쇼핑을 하는 절차나 방법, 배송정보나 주문정보를 단계적으로 설명할때, 또는 세일이나 공지를 알리는 별도 페이지를 메인에 알릴때는 쇼핑을 위한 다른 것들과 그 디자인을 다르게 해야 한다.
우선 눈에 잘띄는 곳에 배치하고, 최대한 간단하면서도 명확하게 정리를 한다. 그렇다고 해서 주쇼핑 메뉴나 상품에 방해가 되서는 안된다.
5. 컬러를 활용해 영역 나누기
고객들을 상품페이지까지 도달시키기 위해선.. 각 섹션별로 차별화된 영역을 구분 지어야한다. 예를 들면 이런것이다. 백그라운드와 캔버스 즉, 메인섹션에 차이를 두고, 메인섹션과 쇼핑섹션은 또 다르게 차이를 둔다. 메뉴 부분과 상품진열 부분에 차이를 두고, 주메뉴와 부메뉴에 차이를 두는것이다.
이렇게 각 부분별로 나누는것은 그 부분를 효율적으로 사용하기 위해서다. 그 부분에 별개의 쇼핑몰 정보를 넣을 수도 있고, 쇼핑몰의 특징을 담아 낼 수도 있다. 또 기획전이나 세일등의 개별적인 디자인이 가능하기 때문이다.
6. 간단하고 선명한 메뉴
쇼핑몰은 사람들이 쉴세 없이 움직이는 바쁜 곳이다. 체류시간 평균 10~30초 내외가 전체 방문객중 80%를 차지한다. 대부분 고객들은 의도적으로 메뉴 텍스트를 읽어 보지 않는다. 그냥 보이니까 읽는편이다. 쇼핑에서 가장 중요한 메뉴를 고객들에게 한번이라도 더 읽히게 만들기 위해선 무엇보다, 선명해야 하며 간결해야 한다.
너무 뻔한말 같지만 사실 그 뻔한게 실행하기는 가장 어렵다.
7. 아이콘을 활용한 로고 사용
로고는 그 쇼핑몰의 특징과 이미지, 브랜드, 판매하는 상품의 종류와 컨셉등.. 로고를 통해 어느정도 알릴 수 있는 수단이 되기도 한다.
웹 2.0 쇼핑몰의 로고를 살펴보면 자신들이 현재 판매하고 있거나 서비스하고 있는 특징적인 아이콘을 활용해 로고를 만드는 경향이 높다.
8. 상품명은 크고 두꺼운 글씨로
상품의 특징을 딱 꼬집어 단 한줄로 설명한다는것이 절대 쉬운일은 아니다. 상품을 설명할때 더 중요한 요소와 덜 중요한 요소을 조율할 수 있는건 상품에 대한 전반적인 이해와 탁월한 감각이 필요하다.
상품의 특징을 잡아 크고 두꺼운 글씨 단 한 줄로 그 상품이 담고 있는 모든걸 간략하게 설명하는것이 쇼핑몰에서는 무엇보다 중요하며 좀 더 많은 사람들의 클릭을 유도 할 수 있는 방법이기도 하다.
9. 쇼핑몰과 블로그의 결합
일전에 한가지 실험 (도토리속 참나무- 내 블로그안에 쇼핑몰 너 있다.)을 통해 쇼핑몰속에 블로그를 넣어봤다.
최근 웹 2.0 쇼핑몰의 추세는 다양한 형태의 커뮤니티와 쇼핑의 결혼시키기다.
10. 심플하고 단순한 상품 나열 페이지
상품이 최대한의 노출효과를 거두기 위해선 일단 상품이 나열된 위치에서 가장 자연스럽고 빠른 시각적 라인을 만들어야 한다. 무슨 말이냐면 사람들은 상품 나열된 페이지를 가장 빠르게 훑는 편이다. 왜냐면 고객들이 원하는 지금 당장의 목적은 상품의 상세페이지를 보고 들어가는것이지 상품이 나열된 페이지를 보는것이 아니기 때문이다.
11. 최대한 간단한 상품 설명
웹 2.0 쇼핑몰의 또하나의 특징은 상품설명이 매우 간단하다는 것이다. 초창기 쇼핑몰은 "고객들이 직접 보고 만지고 살 수 없으니 상품설명은 최대한 많이 상세하게 해줘야 하지 않을까?" 그런 생각을 하는 쇼핑몰들이 하나 둘 늘어나면서...이제는 하나의 상품을 팔기 위해 사진 100장이 넘게 첨부하는 곳도 생겨났다.
웹 2.0에서 말하는 쇼핑은 경험이다. 경험을 통해 어느정도 상품 정보를 체득한 상태에서 쇼핑을 하거나 다른 사람의 경험을 빌려(리뷰,체험,추천,상품평등..)쇼핑을 하기 때문에 상품설명이 줄어드는 추세다.
특히, 국내와 비교했을때.. 애플 아이폰의 간략한 설명은 인상깊다.
12. 각 부분의 미묘한 3D 효과
웹 2.0 쇼핑몰과 일반 쇼핑몰을 구분짓는 요소중 하나가 미묘하게 사용된듯한 3D 효과가 아닐까 싶다.. 그림자나 반사등을 활용한 쇼핑몰 표면의 효과를 시각적 인터페이스로 만드는데 많은 도움이 된다.
주로 검색창이나 메뉴, 아이콘, 로고, 레이아웃등에 활용된다. 그렇다고 해서 3D를 전체적으로 사용하는건 그리 좋지 않다. 웹 2.0 쇼핑몰에서 슬쩍 슬쩍 3D를 사용하는건 부분적으로 중요한 핵심을 돋보이게 활용하는 것이기 때문이다.
13. 레이아웃 그림자 사용
전체적인 그라데이션이나 레이아웃 테두리에 빛과 어둠의 그림자를 사용하는건 웹 2.0 쇼핑몰 뿐만 아니라 웹 2.0 서비스에서 주로 사용되고 있는 기법이다. 구글 맵의 위치 표시가 그 대표적인 예라 할 수 있겠다.
그림자는 쇼핑에서 단조로운 평면의 느낌을 없애주고, 쇼핑에 주목도를 높이는 역활을 한다.
14. 한눈에 알아보기 쉬운 픽토그램 구성
도로에서 주유기 표지나 포크와 나이프표지, 혹은 동물이 튀어 나온다는 위험표지를 발견할 경우 우리는 그 의미를 한눈에 알 수 있다. 이것이 바로 움직이는 사람들에게 정보를 전달하는 최상의 방식이다.
인터넷은 끊임없이 움직이는 고속도로와 비슷한 곳이다.
웹 2.0 쇼핑몰들은 고객들의 빠른 마음을 잡기 위해 눈에도 잘띄고, 그 의미도 쉽게 알아 볼수 있는 픽토그램을 활용한다. 일전에 쓴 "참조-쇼핑몰 메뉴 '픽토그램'을 활용하라"
15. 중요한 부분은 스티커로 처리
쇼핑몰에서 새로운 상품이 나왔거나, 정기 세일을 할때 또는 이벤트등 중요한 일이 있을때 팝업으로 공지를 띄우는게 일반적이었다. 그러나 정작 중요하게 봐줘야 할 고객들은 별로 중요하게 보지 않는다는게 문제다.
대부분 웹 2.0 쇼핑몰에서는.. 중요한 문제를 알리때 눈에 잘띄는 스티커를 부착한다..
Posted by mepay
'스마트폰공부' 카테고리의 다른 글
| [스크랩] 안드로이드 스마트폰 유용한 어플들 (0) | 2011.01.24 |
|---|---|
| 안드로이드폰용 성경 애플리케이션 제작한 남재창씨 (0) | 2011.01.18 |
| [스크랩] 컴퓨터 도사되는 방법 (0) | 2010.12.22 |
| [스크랩] 구글맵 API Key 받기 (0) | 2010.12.22 |
| [스크랩] 지금은 모바일 시대. 모바일 지원 안 하는 블로그를 모바일로 변환하기 (0) | 2010.12.22 |