ユーザーの進捗を明示する「プログレストラッカー」詳解

オンラインストアでの注文やフォームなどで、ユーザーの進捗を明示するプログレストラッカーの概要や特長、実装例、よくある間違いなどをSmashing Magazineから紹介します。

Progress Trackers in Web Design

Progress Trackers in Web Design: Examples and Best Practices

以下はそのポイントを意訳したものです。

1. プログレストラッカーとは?

プログレストラッカーとは進捗を明示するもので、複数のステップがあるプロセスを完了するためにユーザーの手助けとなるものです。

オンラインのプロダクトやサービスを注文する際に、よく使用されています。

プログレストラッカーのキャプチャ

Game

2. プログレストラッカーとパンくずの相違点

以前、紹介した「パンくず(当サイト訳:パンくず詳解)は、ユーザーの現在の場所を明示することによって、ナビゲーション機能を高めるものです。
パンくずとプログレストラッカーは非常に類似したものであると思われるかもしれませんが、重要な異なる点があります。

パンくずはユーザーが訪問済みのページか現在のページの上位階層を明示するのに対して、プログレストラッカーはユーザーが特定のタスクを完了するために必要な工程を明示します。
プログレストラッカーはユーザーの現在位置だけでなく、今まで行った処理やこれからどんな処理を行うかを示します。

プログレストラッカーのキャプチャ

Coolspotlers

達成するべき特定のゴールがあるとき、プログレストラッカーは最もよく使用されます。

3. プログレストラッカーの活用

プログレストラッカーはさまざまなコンテクストで使用することができます。ここで紹介する三つの事例は一般的なものです。

オンライン注文

オンラインストアでの注文は通常多くのステップを必要とするため、プログレストラッカーはよく使用されます。

プログレストラッカーのキャプチャ

HMV

ツアーガイド

オンラインのプロダクトやサービスを紹介する際に、ユーザーの導線として使用されます。

プログレストラッカーのキャプチャ

Search Inside Video

複数のステップのフォーム

ユーザーから多くの入力情報が必要な場合、フォームを複数のステップに分けることは最も良い方法かもしれません。

プログレストラッカーのキャプチャ

Livestream

4. プログレストラッカーのベストプラクティス

論理的な明示

たいていのプログレストラッカーは左からステップが始まります。しかし、スタートを左にするだけでは十分ではありません。
ユーザーにプログレストラッカーが複数のステップのプロセスを行っているということを知らせる何かが必要です。

プログレストラッカーのキャプチャ

Blockbuster
このサイトでは、アローと数字がプロセスを明示しています。

現在のステップの明示

ユーザーの現在のステップを確実に伝えることは重要なことです。完了したステップやこれから行うステップが何であるか知るために、論理的に補完します。

プログレストラッカーのキャプチャ

Mr and Mrs Smith
現在のステップを強調し、アローを下方向にすることで、ユーザーの現在のステップを示しています。

配置

プログレストラッカーはナビゲーションの一種ですから、プライマリナビゲーションやセカンダリナビゲーション(パンくずを含む)の下、そしてプログレストラッカーが関連しているコンテンツの上に配置することが最も適切です。
また、ページのタイトルの代用とする際は、プログレストラッカーの下に現在のセクションのタイトルを置き、現在のステップを強調することは最も良い配置です。

プログレストラッカーのキャプチャ

Gamestation
プライマリとセカンダリナビゲーションの下に、プログレストラッカーを配置しています。

5. プログレストラッカーの実装

テキスト

プログレストラッカーのキャプチャ

Media Temple's
テキストで実装したプログレストラッカーの例です。一番のメリットは修正・変更が簡単であるということです。

画像

プログレストラッカーのキャプチャ

Soverion
画像で実装したプログレストラッカーの例です。CSSスプライトを使用すると、HTTPリクエストを減らす効果があります。

6. プログレストラッカーのよくある間違い

パンくずと区別できない

プログレストラッカーのキャプチャ

TypePad's Design assistant
パンくずと区別できないため、非常に困惑します。

インフォメーションがない

プログレストラッカーのキャプチャ

easyJef
ステップの合計数は明示していますが、完了したステップがどのようなものか、これからどんなステップがあるかが分かりません。

直感的ではない

プログレストラッカーのキャプチャ

daniblack
タブシステムを間違って、プログレストラッカーのために使用しています。ここでの問題点は、タブでは進捗をビジュアル的に直感できないということです。

7. プログレストラッカーのショーケース

ここではどのように使用されるのが一番良いか、巧みに設計されたプログレストラッカーの実例を紹介します。
※サイトでは他にも多数紹介されています。

プログレストラッカーのキャプチャ

Ikea

プログレストラッカーのキャプチャ

Amazon

プログレストラッカーのキャプチャ

Urban Originals

プログレストラッカーのキャプチャ

Apple

プログレストラッカーのキャプチャ

lookfantastic

top of page

©2017 coliss