ステッパー

定義

ステッパーは、複数のステップに分かれた長い手続きの中で、今どのあたりまで進んでいるのかを ひと目で示してくれる案内板です。たいていはステップが横一列に並び、終わったステップには チェックマークが付き、今取り組んでいるステップは色や太さで強調され、まだ残っているステップは 薄く表示されます。決済や会員登録のように順番が決まった作業を一画面にまとめきれないとき、 その流れをいくつかの短いステップに分けて、上部に地図のように広げておくのがステッパーの 役割です。プログレスバーと違って各ステップに名前が付いているので、次に何をするのかまで前もって 知らせてくれる点が特徴です。

なぜ重要か

人は終わりの見えない作業を前にすると、途中で疲れて投げ出しやすくなります。ステッパーは 「今が何番目のステップで、あと何ステップ残っているか」を目に見える形にして、この不安を やわらげます。全体の分量を先に伝えておけば、ユーザーは心の準備をして最後まで進む力を得られ、 終わったステップにチェックがたまっていく様子は小さな達成感を与えて、次のステップへと背中を 押してくれます。長いフォームを一画面に詰め込む代わりにステップに分ければ、一度に集中する 項目も減り、入力ミスと心理的な負担がともに下がります。結局のところステッパーは、 離脱を減らして最後まで完走してもらうための仕掛けなのです。

よくある間違い

• ステップを細かく分けすぎて数を増やしてしまうケースです。ステップが多すぎると、かえって 先が長く見えてユーザーは始める前から疲れてしまい、画面上の表示も窮屈になって、各ステップが 何なのか読み取りにくくなります。分ければ分けるほど良いわけではありません。
• 完了したステップに戻れるかどうかを決めていないケースです。前のステップで入力を間違えたのを 直したいのに戻る手段がなければ、ユーザーは最初からやり直すか、いっそあきらめてしまいます。 戻ったときに前に入力した値が消えていないかも、あわせて気を配る必要があります。
• 完了・現在・待機という三つの状態の見た目が似ていて区別できないケースです。どこまで終わって 今どこにいるのかが色やアイコンではっきり分かれていないと、進み具合を示すというステッパー 本来の目的そのものが意味をなさなくなります。

実務のヒント

• ステップは3〜5個くらいに保ち、戻れるかどうかを最初からはっきり決めておきましょう。順番の ある長い手続きを程よく分けて、どこまで来てあとどれだけ残っているかを見せると、途中離脱が 大きく減ります。
• 完了・現在・待機の各ステップを色とアイコンでしっかり区別しましょう。完了したステップには チェック、今のステップは強調、残りのステップは薄く、と分けておけば、ユーザーは自分の位置を ひと目で読み取れます。
• 各ステップには、その中で何をするのかが分かる短い名前を付けましょう。番号だけよりも 「配送先」「お支払い」のように中身を表したラベルがあってこそ、ユーザーは次にすることを 前もって見当をつけ、心の準備をして次のステップへ進めます。

関連概念