닐슨앤노만 그룹의 Carousels on Mobile Devices를 요약한 것이다.
요약: 터치 스크린에서 캐로셀(가로 슬라이드)은 낮은 발견 가능성(discoverability)과 순차적 구성으로 고통받아왔다. 또한 모든 디자인이 캐로셀 제어로 스와이프를 구현하지는 않는다.
캐로셀은 좁은 공간에 중요한 콘텐츠들을 담을 수 있어서 각광받았다. 하지만 분명한 단점도 있다.
- 순차적 접근에 기반한다: 사용자는 모든 내용을 보려면 하나씩 넘겨 봐야 한다. 비효율적이다.
- 늘 잘 발견되는 것은 아니다: 심지어 캐로셀을 인지하더라도, 넘겨 보기 전에는 그 안에 뭐가 있는지 알 수 없다.
터치스크린에서 제대로 구현되지 않은 경우도 있다.
이 글은 모바일 기기에서 이런 문제를 완화하기 위한 가이드라인을 소개한다.
순차적 접근
원하는 걸 볼 때까지 한 장씩 넘기는 건 전혀 즐겁지 않다. 대부분 3~4장만 넘기고 만다. 따라서 캐로셀은 3~4개로 구성하라.
3~4장을 넘어가는 경우 리스트로 구성하라.
3~4장이 3~4항목을 의미하는 건 아니다. 한 장에 여러 항목을 담을 수도 있다. 넷플릭스는 첫장에는 영화 하나만 담지만 둘째 장부터는 3개씩 담는다.
보통 가장 중요한 항목을 첫장에 넣는데, 개인화를 하면 도움이 된다. 그러면 항목들이 맘에 들어서 사람들이 좀더 넘겨 볼 지도 모른다.
발견 가능성(discoverability)
특정 내용을 찾으러 들어온 성급한 사용자는 캐로셀에 전혀 주목하지 않는다. 모바일은 화면도 좁아서 자동 넘김 시간이 되기도 전에 사용자가 스크롤해 아래로 내려간다.
전통적인 캐로셀 실마리는 다음 세 가지다.
- 점이나 선
- 화살표
- 연속성 착시
점은 약한 신호다. 작아서 눈에 덜 띈다. 이미지를 반만 보여 주는 식의 연속성 착시는 강력한 캐로셀 신호다.
점이나 화살표 같은 것은 배경이 복잡한 경우 섞여서 안 보일 수 있다.
신호가 강력해도, 첫 번째 항목이 자기가 찾는 것과 연관성이 없다고 생각하면 뒤따르는 항목들을 볼 생각을 하지 않는 경우가 많다.
- 캐로셀의 항목들을 서로 연관성이 있는 것으로 구성하는 것을 강력 권장한다. 그러면 다음 항목들을 예상하기 쉽다.
- 캐로셀의 중요한 항목들은 다른 방법으로도 접근할 수 있어야 한다.
케로셀 제어
모바일에서 캐로셀을 제어할 때 사람들은 스와이프[손가락을 터치해 가로로 슥 긋는 동작]한다. 이 동작을 지원하지 않으면 안 된다.
스와이프 모호성이란 문제도 있다. 스와이프 동작이 다른 의미로 해석되는 경우를 말한다. iOS7부터 사파리는 화면 좌측 끝에서부터 오른쪽으로 스와이프하는 경우 뒤로 가기로 작동하게 했다. 아이폰X은 아래쪽에서 스와이프하는 경우 앱 전환 동작을 한다.
데스크톱은 스와이프를 지원하지 않기 때문에 반응형 디자인을 하면서 그냥 스와이프를 포기하는 경우도 있다. 드롭박스 소개 페이지는 캐로셀에서 스와이프를 지원하지 않고, 작은 점을 눌러야만 하게 해놨다. 사용자들은 그렇게 해서 항목을 넘긴다는 건 생각지도 못할 거다. 생각한다 해도 점이 너무 작다.
스와이프 모호성에 대응하려면 화면 끝과 캐로셀 사이를 살짝 띄우는 것이 좋다.
결론
작은 화면에서 공간 절약을 이유로 캐로셀을 사용하고 싶어 하는 열망이 큰데, 연속성 착각이나 화살표 같은 강력한 실마리를 주지 않으면 캐로셀은 거의 알아채기 힘들다. 캐로셀 작업을 해야만 하게 됐다면, 너무 많은 항목을 사용하지 않게 주의하고, 스와이프를 반드시 지원하자.
모바일 캐로셀에 대해 더 알고 싶다면 우리가 낸 User Experience for Mobile Applications and Websites 보고서를 보라.
댓글 남기기