brunch

매거진 UX 디자인의 모든 것

라이킷 72 댓글 2

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by UX 컨설턴트 전민수 Sep 20. 2016

2016 쇼핑몰 UX 디자인 트렌드

UX 디자인 배우기 #37

Today UX 아티클

※ 이 글은 2016년 8월2일 Friday에 게재된 Jamie Geoghegan가 작성한 「5 E-COMMERCE UX DESIGN TRENDS OF 2016」를 원작자의 동의하에 번역 및 게시한 글입니다.

이커머스 세계의 UX 디자인은 끝없이 변화하기 때문에 최신 트렌드를 놓치지 않으려고 하는 디자이너들에게 도전과제를 던져준다고 합니다. 이 글에서는 이커머스 디자인 트렌드 중 일부를 선정하여 소개한다고 합니다.

대형 백그라운드

고객은 이미지를 정말 좋아하고 텍스트는 좋아하지 않는다고 합니다. 고객이 구매 의사결정을 내리게 만드는 핵심 요인은 매장을 둘러보며 얻는 첫인상이라고 합니다.

대형 사진과 비디오 배경은 아름다우면서 이목을 끄는 사이트를 만들어주며 잠재적 고객이 웹사이트에 들어가는 순간 구매하고 싶게 만든다고 합니다. 이커머스 스토어는 이런 테크닉을 광범위하게 사용하여 깔끔하고 전문적으로 보이게 만들고 제품을 더 사고 싶게 만들어야 한다고 합니다.

대형 백그라운드를 사용하는 것은 메인 화면에만 국한되지 않는다고 합니다. 인터랙티브 이미지와 비디오로 제품 페이지에도 대형 백그라운드를 만들면 쇼핑하는 사람들의 경험을 개선하는 훌륭한 방법이 될 수 있다고 합니다. 위의 Bugaboo가 이를 잘 적용하고 있다고 합니다.

반응형 타이포그래피(ResponsiveTypography)

타이포그래피는 브랜드의 시각적 정체성을 개발하고 온라인 매장 내 제품으로 쇼핑하는 사람들의 관심을 끄는데 중요한 역할을 한다고 합니다. 점점 더 많은 유저들이 모바일 기기를 통해 콘텐츠를 소비하고 있기 때문에 반응형 타이포그래피는 모든 사이즈의 디바이스에서 대형 텍스트 디자인이 그 모습을 유지할 수 있도록 도와주는 훌륭한 자산이라고 합니다.

반응형 타이포그래피는 폰트 사이즈를 관점에 따라 상대적으로 변환시켜 주어 각 환경에서 일관성을 유지할 수 있다고 합니다.

위의 Nasty Gal을 보면 크고 유연한 타이포그래피를 간단하고 효과적으로 활용하고 있다고 합니다.

Nasty Gal

www.nastygal.com

히든 메뉴

미니멀리즘은 최근 몇 년 동안 이어지고 있는 웹디자인 트렌드라고 합니다. 깔끔하고 간단하고 찾기 쉬운 심미성에 초점을 맞추고 이미지와 대형 백그라운드에 중점을 둔다고 합니다.

많은 디자이너들은 햄버거 아이콘이 이젠 보편적으로 쓰이고 있어, 유저가 메뉴나 리스트가 있을 것이라고 연상하고 상호작용할 수 있기 때문에 이 아이콘을 이용하는 것을 두려워할 필요가 없다고 믿고 있다고 합니다.

이와 관련해 글쓴이가 가장 좋아하는 사례는 아래의 EtQ 사이트라고 합니다.

하지만 연구 결과에 따르면 메인 내비게이션을 드롭다운 메뉴로 줄여버리면 인게이지먼트와 체류시간이 떨어지며 심지어 데스크톱과 모바일의 세일즈에도 영향을 미친다고 합니다. 때문에 일부 모바일 사이트에서는 햄버거 메뉴를 제거하고 미니 내비게이션을 가장 중요한 위치에 배치시키는 흐름이 보인다고 합니다.

카드

카드는 섹션과 제품을 어수선하지 않으면서 유저 친화적인 방식으로 조직화하는 방법으로, 내비게이션을 간소화하고 UX를 개선해준다고 합니다. 유저가 한눈에 정보에 접근할 수 있게 해 주고 주제를 구분할 수 있게 해준다고 합니다.

카드 레이아웃을 적용하면 가장 좋은 점은 반응형 디자인과 매우 잘 결합된다는 것이라고 합니다. 때문에 이커머스 웹사이트에서 매우 유행하고 있다고 합니다. 아래의 Reserverd와 R+Co 에서잘 활용하고 있다고 합니다.

다이내믹 서칭(DynamicSearching)

올해 이커머스 사이트에서는 자바스크립트와 에이젝스를 활용해서 검색 결과를 즉각적으로 보여주는 ‘다이내믹 서치’ 기능이 떠오르고 있다고 합니다. 고객이 모든 검색 결과 페이지를 각각 들어가 보지 않아도 결과를 빠르게 탐색할 수 있어 특히 다양한 제품을 가진 사이트의 경우 잘 맞는다고 합니다.

이런 매끄러운 검색 방법은 구글의 자동완성 기능과는 다르다고 합니다. 구글의 자동완성 기능은 트렌드와 이전 검색어를 기반으로 추천 단어와 문구를 보여주고 클릭하여 검색하게 만드는 기능이라고 합니다. 아래 JadoPado를 참고하라고 합니다.