ITTI STAFF
BLOG

イッティWEBスタッフの制作ブログ

カルーセルのユーザビリティ

小スペースも情報を詰め込める便利なカルーセルについてのユーザビリティです。

限られたスペースで、多くの情報を伝える事ができるカルーセルのユーザビリティについての海外ポストです。

サイト設計上の賛否もありますが、一定の方向性を示している点や、カルーセルのレイアウトや挙動などを考慮する一つの定義としては有効な情報かと思います。

1.ユーザーがコントロール可能な状態にしておく。

サムネイルをクリックした後は、自動スライドがオフになったほうがユーザーにとって良いと提案しています。

auto-sliding-carousel

2.スライドはブロック毎にスライドしたほうが良い。

123から234と1アイテム毎のスライドではなく、無駄なクリックを増やさないために123から456と、表示されているブロックごとにスライドする方が良いと提案しています。

表示している情報によっては、1アイテム毎にスライドしたほうが良い場合もあるかと思いますが、基本的には同意します。

carousel-row-items

3.スライドの進行状況を分かりやすく表示する。

スライドの進行上状況や、どれぐらいのスライドが残っているかを分かりやすく表示することを提案しています。

carousel-item-progress

4.スライドはループさせない

スライドが最後まで進んだ場合、はじめのスライドを表示させる(無限ループ)のでは無く、スライドをバック(ループバック)させることを提案しています。

スライドをループさせてしまうと、ユーザーが新しい情報が表示されると思って「次へ」ボタンを押すと、何度も同じ情報を表示させてしまうことになります。Appleのサイトもスライドの最後はストップするようになっています。

スライドの枚数や使いどころによってはループさせたほうが良いとの意見もあります。基本的にはループバックで、使い方によってはループもありだと思います。

infinite-sliding-carousel

5.クリックするボタンは、マウスカーソルより大きくする。

ナビゲーションの基本的なことです。ボタンは小さくてもクリックポイントを大きくするなども有効な方法です。

carousel-click-targets

以上、カルーセルについて5つのポイントでした。

新しい記事

東京のWEB制作会社イッティ