2013 ux design trend report - eclianeclian.sys4u.co.kr/wp-content/uploads/2013/02/2013... · 2013...

2013 UX Design Trend Report

© 2013 SYS4U I&C All rights reserved.

2013.02.01 UI/UX팀

마영희 주임

Part 3

목차


I. 쇼핑몰 트랜드 분석

II. 결론

I. 쇼핑몰 트랜드 분석


I. 각 쇼핑몰 웹사이트의 장단점

II. 각 쇼핑몰 모바일 사이트의 장단점

I. 각 쇼핑몰 웹사이트의 장단점


I. 롯데아이몰

II. 롯데닷컴

III. 롯데백화점

IV. 롯데슈퍼

V. CJ Mall

VI. AK Mall

VII. GS Shop

VIII. H Mall

IX. 신세계

X. 이마트


1. 롯데아이몰

장점 롯데 아이몰은 롯데 고유의 레드 컬러로 포인트를 주었다. 최 상단에 배너는 유저의 시선을 한번에 사로잡아 구매력을 높일 수 있을 것으로 기대된다. 이 사이트의 독특한 점은 메인 바의 구성이다. 고유영역 마다 컬러를 다르게 사용하여 구분을 더 쉽게 하여 유저의 혼란을 방지하였다. 또한 구분이 잘됨과 동시에 조화로운 컬러를 사용함에 따라 전체적인 밸런스도 잘 맞는다.

1. Top/Main 영역

http://www.lotteimall.com/main/Index.jsp




1. 롯데아이몰

장점 이 영역에도 역시 사이트 전체의 색 밸런스를 유지하면서 각각의 컨텐츠를 배치하였다.

2. Middle영역

단점 메인 비주얼 영역에서 상품의 전환속도가 너무 빨라서 하나의 상품에 집중할 수 없다. 보여줄 상품이 영역에 비해 많아서 인 것 같지만 유저에게는 다소 산만에 보일 수 있다는 단점이 있다.





2. 롯데닷컴

장점 롯데 닷컴은 고유의 계열의 컬러를 사용하여 사이트 전체를 구성하였다. 강조할 부분만 블루를 사용하고 나머지는 그레이 톤을 사용하여 컨텐츠의 집중도를 높였다. 사람의 시선흐름을 고려하여 상단과 왼쪽부터 강한 색을 사용하였다.

1. Top/Main 영역

단점 블루 계열의 컬러가 그레이톤과 잘 어울리긴 하지만 다소 밋밋해 보이는 경향이 있다.

http://www.lotte.com/main/viewMain.lotte?dpml_no=1&check=N




2. 롯데닷컴

장점 이 영역에서는 아이콘을 사용함으로써 컨텐츠 별 차별성을 강조 하였다. 소비자의 시선을 잡기 위한 다양한 아이콘이 많이 사용되었다.

2. Middle 영역





3. 롯데백화점

장점 롯데백화점 사이트는 백화점 사이트답게 전체적으로 고급스러운 분위기의 컬러로 구성되어있다. 브라운 계열의 컬러를 사용해서 가벼워 보이지 않고 또한 로고의 아이덴티티를 그대로 사이트에 잘 나타내었다. 다른 사이트와의 차이점은 bg에 사용된 패턴이다. 다소 심심할 수도 있는 bg에 패턴을 사용함으로써 전체적인 사이트의 분위기를 반전시켰다. 또한 각진 형태의 구성이 아닌 물결무늬를 사용한 컨텐츠는 구성도 흥미롭다.

1. Top/Main 영역

http://www.ellotte.com/main.ldpm?incoming=lotte




3. 롯데백화점

장점 전체적인 깔끔한 구성이 돋보인다. 컨텐츠 영역간에도 여백을 주어 쇼핑몰의 답답함을 해소시켰고, 영역구분도 한눈에 잘 된다. 퀵 메뉴 에도 메인 영역에 사용된 물결무늬를 그대로 사용하면서 통일감을 잘 살렸다.

2. Middle 영역





4. 롯데슈퍼

장점 식품을 주 상품으로 하는 롯데 슈퍼는 식품의 신선함과 안전함을 강조하기 위한 색 구성이 돋보인다. 채소의 색깔과 유사하고 신선함을 잘 나타낼 수 있는 그린계열의 컬러를 메인 으로 사용하였다. 또한 깨끗하고 깔끔한 이미지를 많이 사용하여 소비자가 직접 눈으로 보고 상품을 구매하는 것과 같은 효과를 주었다.

1. Top/Main 영역

단점 너무 과도한 컨텐츠로 인해 시선이 많이 분산 되는 경향이 있다.

http://www.lottesuper.co.kr/handler/Index-Start




4. 롯데슈퍼

장점 유저의 시선을 메인으로 집중시키기 위해 메인 영역 보다는 차분하게 구성되어 있다. 깔끔한 이미지와 폰트 하나만을 사용하여 그리드 구성이 조화롭게 되어있다.

2. Middle 영역





5. AK mall

장점 AK몰은 고유의 컬러를 사용하여 전체적인 메뉴와 컨텐츠를 구성하였다.

1. Top/Main 영역

단점 깔끔한 형식의 그리드를 사용하였지만 다소 밋밋한 느낌이 있다. 또한 강조되는 특별한 부분이 없어서 시선이 많이 분산된다. 메인 비주얼 영역이 다소 작아서 집중되지 않는다.

http://www.akmall.com/mallfront_akmall.jsp



5. AK mall

장점 설 이벤트영역에 다른 영역보다 집중도 높은 컬러를 사용하여 유저의 시선을 잡았다. 그로 인해 소비자의 구매력을 높였다.

2. Middle 영역




6. CJ mall

장점 CJ Mall의 독특한 점은 우측 영역이다. 우측에 가장 크게 이미지 영역을 배치하면서 다른 사이트와의 차별성을 두었다. 또한 이 영역은 사이드 바 형식이어서 접고 펼칠 수가 있다. 조금 잘린 듯이 영역을 보여주어 유저로 하여금 궁금증을 유발 시켰다.

1. Top/Main 영역

단점 우측의 사이드 바가 독특하긴 하지만 처음 방문한 유저에게는 다소 생소할 수 있다.

http://www.cjmall.com/index_tab1.jsp



6. CJ mall

단점 디자인적으로 특별한 점이 없고 다소 심심한 구성이어서 유저의 시선을 잡지는 못하는 영역 같다.

2. Middle 영역




7. GS Shop

장점 GS shop의 독특한 점은 다른 쇼핑몰사이트와는 다르게 레프트메뉴가 메인 영역에 없다는 점이다. 그로 인해 메인 영역을 크게 가져가서 많은 컨텐츠를 구성하여 보여줄 수 있었다. 전체적인 컬러도 고유의 색인 그린을 사용하여 조화롭게 구성하였다. 또한 TV쇼핑 영역이 따로 존재하여 인터넷과 TV쇼핑이 자연스럽게 연동되었다.

1. Top/Main 영역

단점 레프트 영역의 실종은 영역을 크게 쓸 수 있다는 장점이 있지만 오히려 유저에게 혼동을 야기시킬 수 있다는 단점도 있다.

http://with.gsshop.com/index.gs



7. GS Shop

단점 메인 에서 없어진 레프트 영역이 이 부분에 존재한다. 이로 인해 유저들에게는 많은 혼동을 줄 수 있다.

2. Middle 영역




8. 현대 H Mall

장점 현대 H mall은 GS Shop과 마찬가지도 TV 방송영역이 존재하여 인터넷에서도 TV에 나왔던 물건은 쉽게 구매할 수 있다.

1. Top/Main 영역

단점 전체적으로 비비드 톤의 컬러를 많이 사용하여 밋밋한 경향이 많고 집중되는 컬러가 없어서 컨텐츠에 시선이 고정되지 않는다.

http://www.hyundaihmall.com/Home.html






8. 현대 H Mall

장점 백화점 상품을 전시영역이 존재하여 백화점 상품에 쉽게 접근이 가능하다. 영역마다 여백을 많이 주어서 답답함을 해소 시켰다.

2. Middle 영역







9. 신세계

장점 신세계 몰은 레드와 브라운을 조화 시켜 고급스러움을 한껏 강조 하였다. 레프트 영역을 레드 컬러로 사용하여 시선을 집중시켰으며, 검색 바를 강조하여 유저의 검색편의성을 도왔다. 또한 최 상단에 배너 영역을 크게 배치하여 중요한 상품영역에 이목을 집중시켰다. 우측에는 백화점 영역이 존재하여 각 점마다 상품을 구분해서 볼 수 있도록 했다.

1. Top/Main 영역

http://mall.shinsegae.com/main/initMallMain.do?ckwhere=naver_com




9. 신세계

장점 전체적으로 차분한 컬러를 많이 사용하여 깔끔함이 돋보인다. 좌측에는 HOT KEYWORD 영역이 존재하여 상품순위에 따라 접근할 수 있도록 도왔다.

2. Middle 영역

단점 각 영역별로 구분이 명확하지 않아 다소 산만한 느낌을 받는다.





10. 이마트

장점 식품을 판매하는 사이트답게 전체적으로 밝은 느낌의 컬러를 많이 사용하였다. 특유의 옐로우 컬러로 Top 메뉴를 구성하여 시선을 집중시킨다. 또한 메인바의 색다른 폰트를 사용함으로써 다소 딱딱할 수 있는 사이트를 친근한 분위기로 전환 시켰다. 메인 비주얼 영역의 크게 이미지를 사용하여 상품을 강조 하였다. 컨텐츠와 다르게 bg 컬러는 차분하게 사용하여 컨텐츠를 한층 강조 하였다.

1. Top/Main 영역

http://www.emart.com/index.do?method=getIndex&pid=naver22&ckwhere=naver2&sid=na201




10. 이마트

장점 이 영역은 전체적으로 깔끔하고 깨끗함이 돋보인다. 이미지와 폰트만을 간단하게 사용하여 여백을 많이 주고 가독성을 높여 상품에만 집중할 수 있도록 했다. 또한 강조될 부분 이외에는 그레이톤을 사용하였다.

2. Middle 영역




I. 각 쇼핑몰 모바일사이트의 장단점


I. 롯데아이몰

II. 롯데닷컴

III. 롯데백화점

IV. CJ Mall

V. AK Mall

VI. GS Shop

VII. H Mall

VIII. 신세계

IX. 이마트


1. 롯데아이몰 모바일

장점 롯데 아이몰 웹과 마찬가지로 레드계열의 컬러를 사용하여 포인트를 주었다. 전체적으로 모바일 사이트답게 간단하고 터치가 쉬운 메뉴 구성이 돋보인다.

1. Main 영역


2. 롯데닷컴 모바일

장점 메인 바에 고유의 블루 컬러만을 사용하고 전체적으로 간단하게 구성하였다.

1. Main 영역

단점 전체적으로 돋보이는 컨텐츠가 없어서 상품이 눈에 잘 띄지 않는 단점이 있다.


3. 롯데백화점 모바일

장점 롯데 백화점 웹사이트와 흡사한 사이트 구성이 돋보인다. 고유의 물결무늬도 사용되어 통일감을 강조하였다. 메인에 추천상품영역에 아이콘을 적절히 사용하여 가독성이 좋다.

1. Main 영역


4. CJ Mall 모바일

장점 전체적으로 여백이 많아 터치가 수월한 장점이 있다.

1. Main 영역

단점 전체적인 컬러가 다소 밋밋하여 사이트가 단조로운 느낌이 강하다.


5. AK Mall 모바일

장점 메인비주얼 영역에 이미지를 크게 배치하면서 사용자를 주목시켰다.

1. Main 영역

단점 각각의 영역마다 색이 비슷하여 구분이 쉽지 않다.


6. GS SHOP 모바일

단점 전체적으로 그레이톤으로 구성되어 주목되는 영역이 없다. 또한 고유의 컬러도 적용이 안되어서 gs의 이미지가 잘 나타나지 않았다.

1. Main 영역


7. 현대 H Mall 모바일

단점 그리드 구성이 혼란스럽다. 정리된 느낌이 덜해서 컨텐츠에 집중하기에 어려움이 있다.

1. Main 영역


8. 신세계 모바일

장점 전체적으로 구성이 깔끔하고 웹을 적절하게 옮겨 왔다. 전체적인 컬러 밸런스가 좋아서 작은 화면으로 보기에도 불편함이 없다. 강조될 부분과 아닌 부분을 컬러로 적절하게 나타낸 것 같다.

1. Main 영역

단점 컨텐츠간의 여백이 부족하여 터치할 때 불편함이 있을 수 있다.


9. 이마트몰 모바일

장점 깔끔한 구성이 돋보인다. 가독성이 높은 글씨와 이미지로 상품의 분류가 쉽다. 컨텐츠 영역이 커서 접근하기가 쉽다.

1. Main 영역

II. 결론


I. 결론


1. 결론

1. 최 상단 배너의 강조

거의 대부분의 사이트에서 최 상단에 배너를 사용하여 소비자의 집중도를 메인으로 이끌고 있다.

2. 다양한 그리드 구성

사람의 시선흐름을 고려한 그리드 구성이 주류를 이루고, 각 사이트 별로 자신만의 차별성을 강조한 그리드 구성이 많아졌다.

3. 편집디자인

각각의 컨텐츠를 편집디자인 형식으로 깔끔하게 구성한다.

각 사이트는 대부분 로고컬러를 메인 컬러로 사용하고 그와 어울리는 컬러를 부수적으로 사용하여 사이트를 구성하는 경향이 강했으며, 최 상단의 배너를 대부분 사용 하였고, 메인에 대한 강조를 가장 중요시 했습니다. 메인비주얼 영역의 크기가 많이 줄어든 대신에 더 많은 컨텐츠를 넣기 위한 그리드의 세분화가 이루어졌습니다. 또한, 기존사이트와는 다르게 그리드를 구성하여 차별성을 강조 하는 곳도 많았습니다.

2013 ux design trend report - eclianeclian.sys4u.co.kr/wp-content/uploads/2013/02/2013... · 2013...

Documents