brunch

매거진 UX 디자인의 모든 것

라이킷 144 댓글 1

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by UX 컨설턴트 전민수 Aug 22. 2016

좋은 캐러셀 디자인을 위한 가이드 5가지

UX 디자인 배우기 #10

Today UX 아티클

UX Planet에 게재된 Nick Babich의 글 Designinga User-Friendly Homepage Carousel를 소개하고자 합니다.

캐러셀은 이미지 로테이터, 슬라이더 등 다양한 이름으로 불리는데, 특히 이커머스 웹사이트 메인 페이지에서 가장 흔하게 볼 수 있다고 합니다. 사람들에게 메인 페이지에 있는 캐러셀이 실제 유저에게 도움이 되는 방법인지 아니면 그저 콘텐츠를 쉽게 처리하는 방법에 불과한 건지 물어보면, 캐러셀은 비생산적인 디자인 패턴이라고 답할 것이라고 합니다. 이미 캐러셀에 대한 부정적인 주장이 퍼져 있기 때문이라고 합니다. 가령 Erik Runyon의 연구에 따르면 전체 사이트 방문자 중1%만 캐러셀을 클릭하며 그중 84%는 첫 번째 이미지를 선택한다고 합니다.

월마트 메인페이지의 캐러셀

캐러셀이란 무엇인가

캐러셀은 메인 페이지에서 마케팅 정보를 보여주는 한 가지 방법으로, 유저가 스크롤을 내리지 않고도 볼 수 있는 정보의 양을 극대화하기 위해 디자이너들이 사용한다고 합니다. Nick Babich는 캐러셀이 다음과 같은 특징을 가졌다고 말합니다:

메인 페이지 상단에 위치하며, 일명 ‘above the fold’ 영역의 상당 부분을 차지한다고 합니다

같은 공간에 하나 이상의 콘텐츠를 보여주며, 한 번에 하나씩만 보이고 각각은 이미지와 약간의 텍스트로 구성되어있다고 합니다.

캐러셀에 하나 이상의 콘텐츠가 있음을 보여주는 표시가 있다고 합니다.

Above the fold’란 페이지의 상단 절반을 뜻하며, 사이트에 들어왔을 때 방문자가 볼 수 있는 섹션이라고 합니다.

캐러셀 장점

Nick은 캐러셀이 다음과 같은 장점을 가지고 있다고 말합니다.

메인 페이지에서 가장 중요한 영역에 하나 이상의 콘텐츠를 보여줄 수 있게 해준다고 합니다.
페이지 상단 쪽에 더 많은 정보가 보일수록 사람들이 볼 확률이 더 높아질 수 있다고 합니다.

캐러셀 단점

반면, 단점은 다음과 같다고 합니다.

사람들은 자주 캐러셀과 그 콘텐츠를 보지 못하고 넘어갈 수 있습니다 (심지어 캐러셀이 자동으로 돌아갈 때도 마찬가지)
디자이너는 캐러셀을 여러 이미지의 모음으로 생각하지만, 유저는 하나의 이미지로 보았다고 생각하게 됩니다.

좋은 캐러셀 디자인을 위한 가이드 1. 콘텐츠가 최우선

Nick은 캐러셀이 보여주는 콘텐츠 자체가 나쁘면 아무리 캐러셀을 좋게 만들어도 소용이 없다고 말하면서 캐러셀 콘텐츠와 관련한 몇 가지 룰을 얘기해줍니다.

콘텐츠 자체 가방 문자에게 흥미롭거나 유용하지 않다면(예: 방문자가 신경 쓰지 않는 홍보성 정보) 캐러셀을 쓰지 말라고 합니다.
캐러셀의 콘텐츠는 광고처럼 보이면 안 된다고 합니다. 광고처럼 보이면 유저는 무시해버린다고 합니다. 사이트와 전반적으로 매치되는 이미지와 서체를 사용하여, 광고가 아닌 사이트의 일부로 보여야 한다고 합니다.
슬라이드 순서를 심사숙고하여 결정하라고 합니다. 첫 슬라이드가 나머지 슬라이드보다 훨씬 더 노출 확률이 높기 때문에 중요도 순으로 배치해야 하라고 합니다. 특히 첫 슬라이드에서 가장 중요한 콘텐츠를 보여줘 다음 슬라이드를 보고 싶게끔 만들어야 한다고 합니다.
캐러셀에서 보이는 콘텐츠를 캐러셀에서만 보여주지 말고 사이트의 다른 영역에서도 접근할 수 있게 만들어야 한다고 합니다. 유저가 캐러셀의 모든 콘텐츠를 봐야만 한다면, 캐러셀을 이용하면 안 된다고 합니다.

나쁜 사례: Drugstore.com은 광고처럼 보이는 캐러셀을 이용하였습니다.

좋은 캐러셀 디자인을 위한 가이드 2. 슬라이드의 수를 제한한다

Nick은 캐러셀에 5개 이하의 슬라이드를 넣으라고 권합니다. 그 이상은 유저가 보지 않을 것이고, 나중에 유저가 캐러셀에서 봤던 콘텐츠를 다시 찾을 때 발견하기 쉽게 만들어 주기 때문이라고 합니다.

좋은 캐러셀 디자인을 위한 가이드 3. 진행률을 표시한다

좋은 캐러셀 디자인을 위한 가이드 4. 모바일에 최적화

슬라이드 콘텐츠가 모바일에서도 읽기 쉬운지 확인한다. 모바일이 무시할 수 없는 존재가 되었기 때문에 모바일에서 보이는 캐러셀의 이미지와 텍스트를 최적화하는 것이 최우선 과제라고 합니다.

나쁜 사례: 슬라이드의 텍스트를 모바일 디바이스에서 간신히 읽을 수 있습니다.

좋은 캐러셀 디자인을 위한 가이드 5. 내비게이션 컨트롤 디자인

Nick은 캐러셀 상의 내비게이션 컨트롤을 디자인할 때 고려해야 할 몇 가지를 설명합니다:

내비게이션 컨트롤이 있음을 캐러셀 내부에서 명확하게 보여줘야 한다고 합니다.
링크와 버튼은 명확히 구분할 수 있고 충분히 크게 만들어야 한다고 합니다.
모바일 디바이스에서는 스와이프 제스처를 추가로 지원해줘야 한다고 합니다.

Case 1 내비게이션 컨트롤이 있음을 캐러셀 내부에서 명확하게 보여주기

나쁜 사례: Dell의 메인페이지엔 다음/이전 슬라이드로 갈 수 있는 컨트롤이없다. 캐러셀 하단의 작은 점을 이용해야만 찾아갈 수 있습니다

좋은 사례: 애플의 메인페이제에서는 다음/이전 슬라이드로 옮길 수 있는 컨트롤이시각적이면서도 인지하기 쉽습니다.

Case2 링크와 버튼의 명확한 구분

나쁜 사례: Tissot 사이트에서는 캐러셀 우측과 좌측의 화살표가 밝은 배경에서는 잘 보이지만 어두운 배경에선 거의 보이질 않습니다.

Case3 모바일 디바이스 환경을 고려한 스와이프 제스처

자동 로테이션을 위한 팁

Nick은 캐러셀에서 자동 로테이션을 이용할 때 다음 네 가지 세부사항을 고려해야 한다고 합니다

모바일 사이트에서는 절대 자동 로테이션을 이용하지 말라고 합니다. 슬라이드가 넘어가버려 유저가 잘못된 슬라이드를 탭 할 수 있기 때문이라고 합니다.
슬라이드가 너무 빠르게 돌아가지 않게 만들라고 합니다. 물론 너무 느려도 지루해진다는 문제가 있지만, 너무 빠르면 정보를 읽을 수 없다고 합니다. 적절한 타이밍은 테스트를 통해 알아내고, 각 정보마다 다른 타이밍을 적용하는 것도 고려해보라고 합니다.
유저가 통제권을 가지게 하라고 합니다. 일시정지 버튼 등을 예로 들 수 있습니다. 통제권은 신뢰를 만들어 주기 때문이라고 합니다.
마지막 슬라이드에서 멈추지 말라고 합니다.

캐러셀의 가장 좋은 대안

메인 페이지에 뜨는 캐러셀이 가장 흔하게 갖는 문제점은 ‘맥락 부족’이라고 합니다. 즉, 방문자는 보통 다음 슬라이드에 무엇이 보일지 왜 관심을 가져야 하는지 전혀 알 수가 없기 때문에 그다음 슬라이드로 넘겨보지 않으려 한다는 겁니다. 캐러셀과 비교했을 때 ‘히어로 이미지’를 사용하는 것도 좋다고 합니다. 히어로 이미지를 사용하면 방문자가 하나의 이미지에 집중할 수 있고, 디자이너도 심사숙고하여 제품이나 서비스를 대표하는 이미지 하나만 선택할 수 있어 더 효과적이라고 합니다. (참조로 히어로 이미지에 대해 더 알고 싶으면 http://www.forchoon.net/849 참고하세요.)

[번외 노하우] Hero Image (히어로 이미지) 활용하여 디자인 하기

웹 트렌드 중에 Hero image (히어로 이미지) 라는게 있습니다. 굳이 한글말로 억지로 번역하자면 이미지 한장으로 쿨해보이고, 있어보이고, 모든것이 다 커버되어 보이는 대단한 이미지라고 번역할수 있겠습니다. 디자인 용어는 보면 삘이 오는데 이렇게 말로 설명하자니 참 어렵습니다. 웹사이트중에 예시를 한번 보면서 차근차근 뜯어보겠습니다. 1. Hero image, 히어로 이미지가 뭘까? 아래의 예를 한번 볼까요? 패션브랜..

www.forchoon.net