캐러셀 디자인 살펴보기

 

 

레이아웃 공간은 소중하며 디자이너는 항상 사용자에게 부담을 주지 않으면서 충분한 정보를 보여줄 수 있는 방법을 찾으려고 노력합니다. 캐러셀은 제한된 공간에 여러 콘텐츠를 표시하는 데 사용되는 인기 있는 인터랙션 패턴입니다.

 

1. 콘텐츠 요구 사항 평가

캐러셀을 구현하기 전에 캐러셀이 콘텐츠를 표시하는 가장 좋은 방법인지 결정하세요. 대부분의 경우 정적 콘텐츠 섹션이 캐러셀보다 사용자에게 훨씬 더 효과적입니다. 캐러셀을 사용하는 유일한 이유는 우선 순위가 동일한(높은) 동일한 성격의 항목이 몇 개 있는 경우에만 해당됩니다. 예를 들어 이커머스 스토어의 여러 부서에서 현재 제공되는 제품을 표시하려고 합니다.

 

iHerb는 캐러셀을 사용하여 여러 부서에서 현재 제공되는 제품을 표시합니다.

 

 

Walmart는 다른 접근 방식을 따르는데, 모든 제품을 홈페이지에 카드 형식으로 표시합니다.

 

2. 가장 중요한 콘텐츠를 첫 번째 슬라이드에 배치하기

사람들은 일반적으로 새 페이지에 도착한 후 곧바로 스크롤을 시작합니다. 그렇기 때문에 대부분의 사용자는 캐러셀에서 첫 번째 슬라이드만 보게 됩니다. 모든 사용자가 모든 항목을 스크롤하는 것은 아니므로 가장 중요하거나 매력적인 항목을 첫 번째 위치에 배치하세요.

3. 자동 회전하는 캐러셀 피하기

사용자 입력 없이 회전하는 캐러셀은 콘텐츠에 집중하려는 사용자에게 불편을 줄 수 있습니다. 자동 회전을 사용하는 경우 일시 중지할 수 있는 옵션이 있는지 확인하세요. 예를 들어 사용자가 현재 슬라이드 위로 마우스를 가져가면 회전을 일시 중지합니다.

 

4. 총 슬라이드 수 제한하기

슬라이드가 너무 많으면 사용자에게 부담을 줄 수 있습니다.

총 개수를 관리하기 쉬운 수준으로 유지하세요(3~5개 정도가 적당합니다).

5. 탐색 컨트롤을 표시합니다.

사용자가 자신의 속도에 맞춰 캐러셀을 이동할 수 있도록 화살표와 같이 명확하고 접근하기 쉬운 탐색 컨트롤과 캐러셀에 있는 슬라이드 수와 사용자가 현재 보고 있는 슬라이드를 나타내는 점을 포함하세요.

 

Amazon은 캐러셀에 이전 및 다음 버튼을 명확하게 표시합니다.

 

 

6. 모바일용 캐러셀 최적화

작은 화면에 맞게 캐러셀을 조정합니다. 대부분의 경우 모바일에서 캐러셀은 모바일 사용자에게 좋은 경험을 제공하지 못하므로 사용하지 않는 것이 좋습니다. 하지만 캐러셀을 계속 사용하려면 슬라이드의 콘텐츠를 최적화하여 작은 화면에서 슬라이드당 더 적은 수의 항목을 표시하여 가독성과 사용성을 유지해야 합니다.

 

7. 콘텐츠 로드 시간 최소화

캐러셀은 사용자가 웹사이트에서 가장 먼저 접하는 항목일 가능성이 높습니다. 캐러셀 성능에 따라 웹사이트에 대한 사용자의 인상이 결정됩니다. 캐러셀이 느리면 사용자는 즉시 웹사이트가 최적화되지 않았다고 생각하게 됩니다. 특히 모바일 사용자의 성능을 개선하려면 캐러셀의 이미지나 동영상에 지연 로딩을 사용하세요.

 

이미지 지연 로딩

 

8.혼란 방지하기

움직임에 민감한 사용자에게 부담을 주지 않도록 회전 애니메이션을 미묘하게 유지합니다.

전환 유형

슬라이딩(슬라이드가 수평으로 움직이며 페이지를 넘기는 느낌을 모방) 또는 페이드아웃(한 슬라이드가 페이드아웃되는 동안 다음 슬라이드가 페이드인하여 매끄럽고 우아한 효과를 연출) 중 하나를 사용합니다.

곡선

튀는 것과 같은 복잡한 효과는 주의가 산만해질 수 있으므로 피하세요.

지속 시간

일반적인 지속 시간은 약 300밀리초입니다. 이보다 긴 애니메이션은 느리게 느껴질 수 있습니다.

 

---

출처:

https://medium.com/ux-planet/carousel-design-best-practices-5ed4e7de90e2