ユーザーの進捗を明示する「プログレストラッカー」詳解
Post on:2010年1月19日
sponsors
オンラインストアでの注文やフォームなどで、ユーザーの進捗を明示するプログレストラッカーの概要や特長、実装例、よくある間違いなどをSmashing Magazineから紹介します。
Progress Trackers in Web Design: Examples and Best Practices
以下はそのポイントを意訳したものです。
- 1. プログレストラッカーとは？
- 2. プログレストラッカーとパンくずの相違点
- 3. プログレストラッカーの活用
- 4. プログレストラッカーのベストプラクティス
- 5. プログレストラッカーの実装
- 6. プログレストラッカーのよくある間違い
- 7. プログレストラッカーのショーケース
1. プログレストラッカーとは？
プログレストラッカーとは進捗を明示するもので、複数のステップがあるプロセスを完了するためにユーザーの手助けとなるものです。
オンラインのプロダクトやサービスを注文する際に、よく使用されています。
2. プログレストラッカーとパンくずの相違点
以前、紹介した「パンくず（当サイト訳：パンくず詳解）は、ユーザーの現在の場所を明示することによって、ナビゲーション機能を高めるものです。
パンくずとプログレストラッカーは非常に類似したものであると思われるかもしれませんが、重要な異なる点があります。
パンくずはユーザーが訪問済みのページか現在のページの上位階層を明示するのに対して、プログレストラッカーはユーザーが特定のタスクを完了するために必要な工程を明示します。
プログレストラッカーはユーザーの現在位置だけでなく、今まで行った処理やこれからどんな処理を行うかを示します。
達成するべき特定のゴールがあるとき、プログレストラッカーは最もよく使用されます。
3. プログレストラッカーの活用
プログレストラッカーはさまざまなコンテクストで使用することができます。ここで紹介する三つの事例は一般的なものです。
オンライン注文
オンラインストアでの注文は通常多くのステップを必要とするため、プログレストラッカーはよく使用されます。
ツアーガイド
オンラインのプロダクトやサービスを紹介する際に、ユーザーの導線として使用されます。
複数のステップのフォーム
ユーザーから多くの入力情報が必要な場合、フォームを複数のステップに分けることは最も良い方法かもしれません。
4. プログレストラッカーのベストプラクティス
論理的な明示
たいていのプログレストラッカーは左からステップが始まります。しかし、スタートを左にするだけでは十分ではありません。
ユーザーにプログレストラッカーが複数のステップのプロセスを行っているということを知らせる何かが必要です。
Blockbuster
このサイトでは、アローと数字がプロセスを明示しています。
現在のステップの明示
ユーザーの現在のステップを確実に伝えることは重要なことです。完了したステップやこれから行うステップが何であるか知るために、論理的に補完します。
Mr and Mrs Smith
現在のステップを強調し、アローを下方向にすることで、ユーザーの現在のステップを示しています。
配置
プログレストラッカーはナビゲーションの一種ですから、プライマリナビゲーションやセカンダリナビゲーション（パンくずを含む）の下、そしてプログレストラッカーが関連しているコンテンツの上に配置することが最も適切です。
また、ページのタイトルの代用とする際は、プログレストラッカーの下に現在のセクションのタイトルを置き、現在のステップを強調することは最も良い配置です。
Gamestation
プライマリとセカンダリナビゲーションの下に、プログレストラッカーを配置しています。
5. プログレストラッカーの実装
テキスト
Media Temple's
テキストで実装したプログレストラッカーの例です。一番のメリットは修正・変更が簡単であるということです。
画像
Soverion
画像で実装したプログレストラッカーの例です。CSSスプライトを使用すると、HTTPリクエストを減らす効果があります。
6. プログレストラッカーのよくある間違い
パンくずと区別できない
TypePad's Design assistant
パンくずと区別できないため、非常に困惑します。
インフォメーションがない
easyJef
ステップの合計数は明示していますが、完了したステップがどのようなものか、これからどんなステップがあるかが分かりません。
直感的ではない
daniblack
タブシステムを間違って、プログレストラッカーのために使用しています。ここでの問題点は、タブでは進捗をビジュアル的に直感できないということです。
7. プログレストラッカーのショーケース
ここではどのように使用されるのが一番良いか、巧みに設計されたプログレストラッカーの実例を紹介します。
※サイトでは他にも多数紹介されています。
sponsors
