このワイヤーの特徴
いまどの段階かが、ひと目で分かる
依頼したあと、いま何が進んでいるのか分からないと、お客様は問い合わせて確かめることになります。5つの段階を並べ、完了した段階・いまの段階・これからの段階を、見た目と文字で分けて示しています。
いまの段階は、色だけでなく文字とマークアップでも示す
太い枠や色の違いだけでは、読み上げや色の見分けにくい人に伝わりません。いまの段階に「いまここ」の文字を付け、aria-current=”step” を指定しています。
完了した段階には完了日も書いています。
お客様にお願いしたいことと期限が、すぐ分かる
お客様の作業が分からないと、確認や資料の提出が遅れ、全体が遅れる原因になることがあります。いまの段階で、お客様にお願いしたいことと期限を枠で示し、その作業へ進むボタンを置いています。
制作側がしていることも、並べて見せる
お客様にお願いすることだけが並ぶと、待っている間に何が進んでいるのか分かりません。「いま制作側がしていること」を隣に置き、双方の作業を並べて見せています。
最終更新の日時で、情報の新しさが分かる
進み具合の画面は、更新が止まると、かえって誤解を生みます。プロジェクト名の横に最終更新の日時を示し、情報が古くないかを確かめられるようにしています。
制作時のよくある失敗
更新が止まり、実際の進み具合と食い違う
画面の段階が実際より遅れたまま、あるいは進んだままだと、お客様は画面を信用しなくなります。
段階を進めるたびに更新する担当と時期を決め、最終更新の日時を示します。
いまの段階を、色だけで示す
色の違いだけでは、いまの段階が伝わらない人がいます。
「いまここ」の文字を付け、aria-current=”step” でも示します。
お客様にお願いすることに、期限がない
期限がないと、お客様の作業が後回しになりやすくなります。
お願いすることには、期限と、何をすれば完了かを書きます。
段階の名前が、依頼の前の説明と違う
依頼の前に見せた流れと、依頼のあとの進捗画面で段階の名前が違うと、お客様が混乱します。
段階の名前と数は、依頼の前の説明とそろえます。
遅れていることを、画面に出さない
予定より遅れているのに、画面では何も起きていないように見えると、お客様の不安が大きくなります。
遅れている場合は、理由と新しい予定を短く書きます。
よくある質問
進捗表示は、ログインが必要なページに置くべきですか?
お客様ごとの進み具合や期限は、ほかの人に見せるものではないため、ログインや専用のURLなど、関係者だけが見られる場所に置くのが一般的です。
公開のページには、依頼前の流れの説明を置きます。
いまの段階は、どうマークアップすればよいですか?
段階の一覧を順序のあるリスト（ol）で組み、いまの段階の項目に aria-current 属性（値は step）を付ける方法が一般的です。
見た目でも、色だけでなく「いまここ」などの文字で示します。
進み具合は、どのくらいの頻度で更新すればよいですか?
少なくとも段階が変わったときと、お客様にお願いすることが変わったときには更新します。
更新の担当と時期を決めておき、最終更新の日時を画面に示すと、情報の新しさが伝わります。
メールでの連絡と、進捗の画面は、どう使い分けますか?
メールは、お願いしたいことや期限が変わったことを知らせるため、画面は、いつでも全体の状況を確かめるため、と役割を分けると扱いやすくなります。
メールから画面へのリンクを付けると、行き来しやすくなります。
