Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

2013 UX Design Trend Report Part 3_SYS4U I&C

  • Login to see the comments

2013 UX Design Trend Report Part 3_SYS4U I&C

  1. 1. 2013 UX Design Trend ReportPart 3 2013.02.01 UI/UX팀 마영희 주임 © 2013 SYS4U I&C All rights reserved.
  2. 2. 목차I. 쇼핑몰 트랜드 분석II. 결론 © 2013 SYS4U I&C All rights reserved.
  3. 3. I. 쇼핑몰 트랜드 분석 I. 각 쇼핑몰 웹사이트의 장단점 II. 각 쇼핑몰 모바일 사이트의 장단점 © 2013 SYS4U I&C All rights reserved.
  4. 4. I. 각 쇼핑몰 웹사이트의 장단점 I. 롯데아이몰 II. 롯데닷컴 III. 롯데백화점 IV. 롯데슈퍼 V. CJ Mall VI. AK Mall VII. GS Shop VIII. H Mall IX. 신세계 X. 이마트 © 2013 SYS4U I&C All rights reserved.
  5. 5. 1. 롯데아이몰 1. Top/Main 영역장점롯데 아이몰은 롯데 고유의 레드 컬러로 포인트를 주었다. 최 상단에 배너는 유저의 시선을 한번에 사로잡아 구매력을 높일 수 있을 것으로 기대된다. 이 사이트의 독특한 점은 메인 바의 구성이다. 고유영역 마다 컬러를 다르게사용하여 구분을 더 쉽게 하여 유저의 혼란을 방지하였다. 또한 구분이 잘됨과 동시에 조화로운 컬러를 사용함에따라 전체적인 밸런스도 잘 맞는다. © 2013 SYS4U I&C All rights reserved.
  6. 6. 1. 롯데아이몰 2. Middle영역장점이 영역에도 역시 사이트 전체의 색 밸런스를 유지하면서 각각의 컨텐츠를 배치하였다.단점메인 비주얼 영역에서 상품의 전환속도가 너무 빨라서 하나의 상품에 집중할 수 없다. 보여줄 상품이 영역에 비해많아서 인 것 같지만 유저에게는 다소 산만에 보일 수 있다는 단점이 있다. © 2013 SYS4U I&C All rights reserved.
  7. 7. 2. 롯데닷컴 1. Top/Main 영역장점롯데 닷컴은 고유의 계열의 컬러를 사용하여 사이트 전체를 구성하였다. 강조할 부분만 블루를 사용하고 나머지는그레이 톤을 사용하여 컨텐츠의 집중도를 높였다. 사람의 시선흐름을 고려하여 상단과 왼쪽부터 강한 색을 사용하였다.단점블루 계열의 컬러가 그레이톤과 잘 어울리긴 하지만 다소 밋밋해 보이는 경향이 있다. © 2013 SYS4U I&C All rights reserved.
  8. 8. 2. 롯데닷컴 2. Middle 영역장점이 영역에서는 아이콘을 사용함으로써 컨텐츠 별 차별성을 강조 하였다. 소비자의 시선을 잡기 위한 다양한 아이콘이 많이 사용되었다. © 2013 SYS4U I&C All rights reserved.
  9. 9. 3. 롯데백화점 1. Top/Main 영역장점롯데백화점 사이트는 백화점 사이트답게 전체적으로 고급스러운 분위기의 컬러로 구성되어있다. 브라운 계열의컬러를 사용해서 가벼워 보이지 않고 또한 로고의 아이덴티티를 그대로 사이트에 잘 나타내었다.다른 사이트와의 차이점은 bg에 사용된 패턴이다. 다소 심심할 수도 있는 bg에 패턴을 사용함으로써 전체적인 사이트의 분위기를 반전시켰다. 또한 각진 형태의 구성이 아닌 물결무늬를 사용한 컨텐츠는 구성도 흥미롭다. © 2013 SYS4U I&C All rights reserved.
  10. 10. 3. 롯데백화점 2. Middle 영역장점전체적인 깔끔한 구성이 돋보인다. 컨텐츠 영역간에도 여백을 주어 쇼핑몰의 답답함을 해소시켰고, 영역구분도 한눈에 잘 된다.퀵 메뉴 에도 메인 영역에 사용된 물결무늬를 그대로 사용하면서 통일감을 잘 살렸다. © 2013 SYS4U I&C All rights reserved.
  11. 11. 4. 롯데슈퍼 1. Top/Main 영역장점식품을 주 상품으로 하는 롯데 슈퍼는 식품의 신선함과 안전함을 강조하기 위한 색 구성이 돋보인다. 채소의 색깔과 유사하고 신선함을 잘 나타낼 수 있는 그린계열의 컬러를 메인 으로 사용하였다. 또한 깨끗하고 깔끔한 이미지를 많이 사용하여 소비자가 직접 눈으로 보고 상품을 구매하는 것과 같은 효과를 주었다.단점너무 과도한 컨텐츠로 인해 시선이 많이 분산 되는 경향이 있다. © 2013 SYS4U I&C All rights reserved.
  12. 12. 4. 롯데슈퍼 2. Middle 영역장점유저의 시선을 메인으로 집중시키기 위해 메인 영역 보다는 차분하게 구성되어 있다. 깔끔한 이미지와 폰트 하나만을 사용하여 그리드 구성이 조화롭게 되어있다. © 2013 SYS4U I&C All rights reserved.
  13. 13. 5. AK mall 1. Top/Main 영역장점AK몰은 고유의 컬러를 사용하여 전체적인 메뉴와 컨텐츠를 구성하였다.단점깔끔한 형식의 그리드를 사용하였지만 다소 밋밋한 느낌이 있다. 또한 강조되는 특별한 부분이 없어서 시선이 많이분산된다. 메인 비주얼 영역이 다소 작아서 집중되지 않는다. © 2013 SYS4U I&C All rights reserved.
  14. 14. 5. AK mall 2. Middle 영역장점설 이벤트영역에 다른 영역보다 집중도 높은 컬러를 사용하여 유저의 시선을 잡았다. 그로 인해 소비자의 구매력을높였다. © 2013 SYS4U I&C All rights reserved.
  15. 15. 6. CJ mall 1. Top/Main 영역장점CJ Mall의 독특한 점은 우측 영역이다. 우측에 가장 크게 이미지 영역을 배치하면서 다른 사이트와의 차별성을 두었다. 또한 이 영역은 사이드 바 형식이어서 접고 펼칠 수가 있다. 조금 잘린 듯이 영역을 보여주어 유저로 하여금궁금증을 유발 시켰다.단점우측의 사이드 바가 독특하긴 하지만 처음 방문한 유저에게는 다소 생소할 수 있다. © 2013 SYS4U I&C All rights reserved.
  16. 16. 6. CJ mall 2. Middle 영역단점디자인적으로 특별한 점이 없고 다소 심심한 구성이어서 유저의 시선을 잡지는 못하는 영역 같다. © 2013 SYS4U I&C All rights reserved.
  17. 17. 7. GS Shop 1. Top/Main 영역장점GS shop의 독특한 점은 다른 쇼핑몰사이트와는 다르게 레프트메뉴가 메인 영역에 없다는 점이다. 그로 인해 메인 영역을 크게 가져가서 많은 컨텐츠를 구성하여 보여줄 수 있었다. 전체적인 컬러도 고유의 색인 그린을 사용하여 조화롭게 구성하였다. 또한 TV쇼핑 영역이 따로 존재하여 인터넷과 TV쇼핑이 자연스럽게 연동되었다.단점레프트 영역의 실종은 영역을 크게 쓸 수 있다는 장점이 있지만 오히려 유저에게 혼동을 야기시킬 수 있다는 단점도 있다. © 2013 SYS4U I&C All rights reserved.
  18. 18. 7. GS Shop 2. Middle 영역단점메인 에서 없어진 레프트 영역이 이 부분에 존재한다. 이로 인해 유저들에게는 많은 혼동을 줄 수 있다. © 2013 SYS4U I&C All rights reserved.
  19. 19. 8. 현대 H Mall 1. Top/Main 영역장점현대 H mall은 GS Shop과 마찬가지도 TV 방송영역이 존재하여 인터넷에서도 TV에 나왔던 물건은 쉽게 구매할 수있다.단점전체적으로 비비드 톤의 컬러를 많이 사용하여 밋밋한 경향이 많고 집중되는 컬러가 없어서 컨텐츠에 시선이 고정되지 않는다. © 2013 SYS4U I&C All rights reserved.
  20. 20. 8. 현대 H Mall 2. Middle 영역장점백화점 상품을 전시영역이 존재하여 백화점 상품에 쉽게 접근이 가능하다. 영역마다 여백을 많이 주어서 답답함을해소 시켰다. © 2013 SYS4U I&C All rights reserved.
  21. 21. 9. 신세계 1. Top/Main 영역장점신세계 몰은 레드와 브라운을 조화 시켜 고급스러움을 한껏 강조 하였다. 레프트 영역을 레드 컬러로 사용하여 시선을 집중시켰으며, 검색 바를 강조하여 유저의 검색편의성을 도왔다. 또한 최 상단에 배너 영역을 크게 배치하여중요한 상품영역에 이목을 집중시켰다.우측에는 백화점 영역이 존재하여 각 점마다 상품을 구분해서 볼 수 있도록 했다. © 2013 SYS4U I&C All rights reserved.
  22. 22. 9. 신세계 2. Middle 영역장점전체적으로 차분한 컬러를 많이 사용하여 깔끔함이 돋보인다. 좌측에는 HOT KEYWORD 영역이 존재하여 상품순위에 따라 접근할 수 있도록 도왔다.단점각 영역별로 구분이 명확하지 않아 다소 산만한 느낌을 받는다. © 2013 SYS4U I&C All rights reserved.
  23. 23. 10. 이마트 1. Top/Main 영역장점식품을 판매하는 사이트답게 전체적으로 밝은 느낌의 컬러를 많이 사용하였다. 특유의 옐로우 컬러로 Top 메뉴를구성하여 시선을 집중시킨다. 또한 메인바의 색다른 폰트를 사용함으로써 다소 딱딱할 수 있는 사이트를 친근한 분위기로 전환 시켰다. 메인 비주얼 영역의 크게 이미지를 사용하여 상품을 강조 하였다. 컨텐츠와 다르게 bg 컬러는차분하게 사용하여 컨텐츠를 한층 강조 하였다. © 2013 SYS4U I&C All rights reserved.
  24. 24. 10. 이마트 2. Middle 영역장점이 영역은 전체적으로 깔끔하고 깨끗함이 돋보인다. 이미지와 폰트만을 간단하게 사용하여 여백을 많이 주고가독성을 높여 상품에만 집중할 수 있도록 했다. 또한 강조될 부분 이외에는 그레이톤을 사용하였다. © 2013 SYS4U I&C All rights reserved.
  25. 25. I. 각 쇼핑몰 모바일사이트의 장단점 I. 롯데아이몰 II. 롯데닷컴 III. 롯데백화점 IV. CJ Mall V. AK Mall VI. GS Shop VII. H Mall VIII. 신세계 IX. 이마트 © 2013 SYS4U I&C All rights reserved.
  26. 26. 1. 롯데아이몰 모바일 1. Main 영역 장점 롯데 아이몰 웹과 마찬가지로 레드계열의 컬러를 사용하 여 포인트를 주었다. 전체적으로 모바일 사이트답게 간단하고 터치가 쉬운 메 뉴 구성이 돋보인다. © 2013 SYS4U I&C All rights reserved.
  27. 27. 2. 롯데닷컴 모바일 1. Main 영역 장점 메인 바에 고유의 블루 컬러만을 사용하고 전체적으로 간 단하게 구성하였다. 단점 전체적으로 돋보이는 컨텐츠가 없어서 상품이 눈에 잘 띄 지 않는 단점이 있다. © 2013 SYS4U I&C All rights reserved.
  28. 28. 3. 롯데백화점 모바일 1. Main 영역 장점 롯데 백화점 웹사이트와 흡사한 사이트 구성이 돋보인다. 고유의 물결무늬도 사용되어 통일감을 강조하였다. 메인에 추천상품영역에 아이콘을 적절히 사용하여 가독 성이 좋다. © 2013 SYS4U I&C All rights reserved.
  29. 29. 4. CJ Mall 모바일 1. Main 영역 장점 전체적으로 여백이 많아 터치가 수월한 장점이 있다. 단점 전체적인 컬러가 다소 밋밋하여 사이트가 단조로운 느낌 이 강하다. © 2013 SYS4U I&C All rights reserved.
  30. 30. 5. AK Mall 모바일 1. Main 영역 장점 메인비주얼 영역에 이미지를 크게 배치하면서 사용자를 주목시켰다. 단점 각각의 영역마다 색이 비슷하여 구분이 쉽지 않다. © 2013 SYS4U I&C All rights reserved.
  31. 31. 6. GS SHOP 모바일 1. Main 영역 단점 전체적으로 그레이톤으로 구성되어 주목되는 영역이 없 다. 또한 고유의 컬러도 적용이 안되어서 gs의 이미지가 잘 나타나지 않았다. © 2013 SYS4U I&C All rights reserved.
  32. 32. 7. 현대 H Mall 모바일 1. Main 영역 단점 그리드 구성이 혼란스럽다. 정리된 느낌이 덜해서 컨텐츠 에 집중하기에 어려움이 있다. © 2013 SYS4U I&C All rights reserved.
  33. 33. 8. 신세계 모바일 1. Main 영역 장점 전체적으로 구성이 깔끔하고 웹을 적절하게 옮겨 왔다. 전체적인 컬러 밸런스가 좋아서 작은 화면으로 보기에도 불편함이 없다. 강조될 부분과 아닌 부분을 컬러로 적절하게 나타낸 것 같다. 단점 컨텐츠간의 여백이 부족하여 터치할 때 불편함이 있을 수 있다. © 2013 SYS4U I&C All rights reserved.
  34. 34. 9. 이마트몰 모바일 1. Main 영역 장점 깔끔한 구성이 돋보인다. 가독성이 높은 글씨와 이미지로 상품의 분류가 쉽다. 컨텐츠 영역이 커서 접근하기가 쉽다. © 2013 SYS4U I&C All rights reserved.
  35. 35. II. 결론 I. 결론 © 2013 SYS4U I&C All rights reserved.
  36. 36. 1. 결론 1. 최 상단 배너의 강조 거의 대부분의 사이트에서 최 상단에 배너를 사용하여 소비자의 집중도를 메인으로 이끌고 있다. 2. 다양한 그리드 구성 사람의 시선흐름을 고려한 그리드 구성이 주류를 이루고, 각 사이트 별로 자신만의 차별성을 강조한 그리드 구성이 많아졌다. 3. 편집디자인 각각의 컨텐츠를 편집디자인 형식으로 깔끔하게 구성한다. 각 사이트는 대부분 로고컬러를 메인 컬러로 사용하고 그와 어울리는 컬러를 부수 적으로 사용하여 사이트를 구성하는 경향이 강했으며, 최 상단의 배너를 대부분 사용 하였고, 메인에 대한 강조를 가장 중요시 했습니다. 메인비주얼 영역의 크기가 많이 줄어든 대신에 더 많은 컨텐츠를 넣기 위한 그리 드의 세분화가 이루어졌습니다. 또한, 기존사이트와는 다르게 그리드를 구성하여 차별성을 강조 하는 곳도 많았습 니다. © 2013 SYS4U I&C All rights reserved.

×