モバイルにおけるステップインジケーターはどうあるべきか

Anthony

UX Movementの創立者、ライター。ユーザーに優しいUXデザインのスキルを読者の方が上達できるよう、UX Movementのブログを始める。

この記事はUX Movementからの翻訳転載です。配信元または著者の許可を得て配信しています。

How to Display Steppers on Mobile Forms

フォームが複数ページに渡る場合、ステップインジケーターは必要不可欠です。ステップインジケーターはユーザーに対して自分たちが今どのステップにいて、あとどのくらいのステップが残っているかを示す役割があります。

画面上のスペースが限られているためモバイルフォームで、ステップインジケーターを提示することは困難です。デスクトップと同じインジケーターをモバイルフォームで使用すると、可読性と可視性の問題が生じてしまいます。

直線型 vs 放射型

直線型のステップインジケーターはフォームをデスクトップで表示する場合には適していますが、モバイルで表示する場合には適していません。モバイルフォームで直線型を使用すると、各ステップのタイトル部分が読みにくくと進捗状況がわかりにくくなります。

無理やり狭いスペースに各ステップのタイトルを収めると、テキストサイズが小さくなりユーザーが読みにくくなります。さらに一度にあまりに多くのステップ名と番号が表示されるため、可視性も下がります。結果、視覚的なノイズが発生し、ユーザーが現在いるステップを把握することが難しくなってしまいます。

モバイルフォームには放射型のインジケーターを使用してください。こちらの方がユーザーがより明確に進捗状況を追うことができ、かつ読みやすくなります。放射型であれば十分な大きさでステップタイトルを表示するため、今自分がどのステップにいるかが一目でわかります。 一度に1つのステップを表示するため、ユーザーが現在のステップに集中することができます。また、次のステップを示すための十分なスペースも設けられています。

放射型であれば内容を認識するために必要な注視時間が短くなるため、ユーザーは自分の進捗状況をより素早く知ることができます。放射型が示す内容を認識するには、今作業している1段階だけを見れば済みます。一方で、直線型は他のステップも含めた4段階すべてを見なければなりません。視認時間が短いほど入力が早く進み、フォームの入力完了にも繋がりやすくなります。

可視性と可読性が鍵

複数ページに渡るフォームを入力する場合、ユーザーは自分がどのステップを踏んでいるのか、そしてどのステップまで進んでいるのかを把握する必要があります。ステップインジケーターの可視性と可読性が、進捗状況を把握するための鍵です。

現在いるステップのタイトルと進捗度を明確に知ることができれば、フォーム入力が達成される可能性が高くなります。一方でこのプロセスが困難であれば、ユーザーがフォーム入力を途中で放棄する可能性が高くなってしまいます。


Welcome to UX MILK

UX MILKはより良いサービスやプロダクトを作りたい人のためのメディアです。

このサイトについて

UX MILKのディレクター募集