캐러셀(Carousels)의 대한 오해
점 몇 개 찍은 것이 캐러셀이 아니다
본 글은 닐슨 노먼 그룹의 <Carousels on Mobile Devices>를 바탕으로 구성했습니다.
캐러셀은 공간을 효율적으로 차지하면서 첫 페이지에 여러 콘텐츠를 표시하는 인기 있는 방법입니다.
캐러셀의 장점
1. 모바일에서 유리합니다. 상대적으로 작은 공간에 많은 콘텐츠를 담을 수 있습니다.
2. 콘텐츠 우선순위 싸움을 해결할 수 있습니다.
캐러셀의 단점
1. 사용자는 마지막 항목에 도달하기 위해 캐러셀의 모든 항목을 하나씩 살펴봐야 합니다. 이 상호 작용은 비효율적입니다.
2. 발견할 확률이 높은 편은 아닙니다. 사람들이 직접 스와이프 하거나 터치해보지 않고는 가려진 콘텐츠를 모르고 지나가는 경우가 많습니다.
이번 글에서 모바일 장치에서 발생하는 캐러셀의 문제점을 보완할 수 있는 몇 가지 지침에 대해 설명합니다.
캐러셀의 문제를 보완할 수 있는 방법들
순차적으로 접근
사용자는 3~4단계(예: 탭 또는 스와이프)로 캐러셀의 마지막 항목에 도달할 수 있어야 합니다.
관심 있는 항목을 찾을 수 있다는 희망을 가지고 항목을 하나씩 살펴보는 것은 재미가 없습니다. 대부분의 사람들은 3-4개의 서로 다른 목록을 보고 멈춥니다.
항목 수가 많은 경우 목록 보기를 대신 사용
마지막 항목에 도달하기 위해 3~4단계를 권장한다고 해서 캐러셀에 3~4개의 항목만 있어야 한다는 의미는 아닙니다.
아래 Netflix 예에서 영웅 캐러셀은 페이지당 하나의 항목만 표시하고 캐러셀의 6 번째 항목에 도달하는 데 5번의 스와이프가 필요했지만 다른 캐러셀은 페이지당 3개의 항목을 표시했습니다(따라서 한 페이지의 마지막 항목에 도달하려면 16번의 스와이프가 필요합니다.)
항목의 우선순위 지정하기
항목의 우선순위를 지정하여 사용자에게 가장 관심 있는 항목이 먼저 표시되도록 합니다. 개인의 취향을 분석해서 처음 몇 번의 스와이프를 특정 사용자와 더욱 관련성 있게 만드세요.
또한 가장 좋은 항목을 먼저 보여줌으로써 우선순위가 지정된 시퀀스는 사용자를 끌어들이고 무작위 구성보다 캐러셀을 더 오래 사용하게 할 수 있습니다.
Netflix(왼쪽)는 캐러셀을 사용하여 긴 목록을 표시했습니다. 대조적으로 Showtime.com(오른쪽)은 영웅 캐러셀에서 4개 항목만 올바르게 사용했습니다.특정 콘텐츠를 찾는 급한 모바일 사용자는 캐러셀을 전혀 눈치채지 못할 수 있습니다.
캐러셀의 유형 3가지
모바일에서 캐러셀은 세 가지 유형이 있습니다.
1. 점 또는 선
2. 화살표
3. UI가 연속적으로 보이다가 화면에 잘리는 형태
1번과 2번은 시각적으로 작고 안보이기 때문에 신호가 약합니다.
3번은 강력한 신호입니다. 사용자는 화면 가장자리를 넘어 이동하여 더 많은 콘텐츠를 얻을 수 있다는 것을 빠르게 이해합니다.
화살표 및 점과 같은 캐러셀을 놓치기 쉬운 또 다른 문제는 이미지 위에 자주 표시된다는 것입니다. UI 요소가 많은 이미지 위에 표시되면 주변 요소와 구분이 되지 않을 가능성이 높습니다.
다음은 캐러셀 신호가 강하거나 약한 디자인의 몇 가지 예입니다.
이미지가 화면상 잘려있거나(좌측) 텍스트 툴팁이 화면에 가려져 있는(우측) 캐러셀 형태는 강력한 신호입니다.사람들은 첫 번째 항목이 흥미롭지 않으면 뒤에 이어지는 항목을 안 보고 지나갈 수 있습니다. 첫 번째 항목은 나머지 콘텐츠에 대한 추천 or 미끼 역할을 합니다. 첫 번째 항목이 목표와 관련이 있는 것 같으면 사람들은 나머지 항목들도 탐색합니다.
따라서
캐러셀의 항목은 서로 관련성이 높게 구성해야 합니다. 첫 번째 콘텐츠를 발견한 사용자는 뒤에 어떤 내용이 이어질지 예측할 수 있습니다.
가장 처음에 보여주고 싶은 중요한 항목은 사용자가 콘텐츠를 무시하고 지나갔을 때 다른 방법으로 보여줄 수 있어야 합니다. 콘텐츠가 중요하다면 다른 경로가 있어야 합니다.
스와이프 제스처의 모호성
대부분의 사용자는 수평 탐색을 위한 스와이프 제스처에 익숙해졌습니다.
이때 스와이프 제스처의 모호성을 이해해야 합니다. 동일한 스와이프 제스처가 실행되는 위치에 따라 다른 의미로 해석될 수 있기 때문입니다.
아이폰 X 화면 하단 가장자리 가까이에서 수평으로 스와이프 하면 애플리케이션이 전환됩니다. 불행하게도 동일한 제스처가 캐러셀을 탐색하는 데에도 사용됩니다.
스와이프는 비터치 장치에서 사용할 수 있는 제스처가 아니기 때문에 모바일에서 스와이프 제스처를 포기하고 화살표 버튼으로 대체하는 경우가 많습니다.
모호성 해결은 페이지 여백으로 해결하기
스와이프 모호성으로 인해 발생하는 문제에 대한 부분적인 해결책은 캐러셀 주위에 "페이지 여백"을 남겨두는 것입니다.
Net-a-porter(왼쪽)과 Macys(오른쪽)은 캐러셀과 화면 가장자리 사이에 약간의 공백을 남겨두고 사용자가 이미지 캐러셀을 더 쉽게 스와이프 할 수 있도록 했습니다.
결론
작은 화면에서 공간을 절약하기 위해 캐러셀을 사용하려는 유혹은 클 수 있지만 캐러셀 항목은 검색 가능성이 거의 없을 수 있습니다. 특히 연속성을 활용하거나 화살표 버튼과 같은 강력한 신호를 사용하지 않는 경우에는 더욱 그렇습니다. 모바일 사이트나 모바일 앱에 캐러셀이 있는 경우 요소가 너무 많지 않고 사용하더라도 스와이프가 가능하다는 신호를 꼭 주세요.
이번 글을 공부하며...
캐러셀은 그냥 점 몇 개로 표현되는 개념인 줄 알았다. 점을 사용해서 디자인한 적이 많은데 콘텐츠 유형에 대해 고민하지 않고 화면이 예쁘게 보일 수 있는 단순하고 쉬운 길을 선택한 것 같아서 이전 작업을 되돌아보게 된다. 앞으로 사용자에게 익숙한 개념인 캐러셀을 목적에 따라 이해하고 사용할 수 있을 것 같다. 또 다른 이들을 설득할 때도 근거로 말할 수 있는 개념들을 공부하게 돼서 의미 있었다.
<관련 글>
