web-dev-qa-db-ja.com

長い形式を維持するか、複数のステップに分けますか?

価格比較サイトを開発中ですが、添付のフォームで苦労しています。

登録プロセスは次のとおりです。

  1. Eショップの所有者が[eショップを追加]をクリックします。
  2. 登録ページ1に、基本情報(名前、eshop Webサイト、XMLファイルのURL)が表示されます。
  3. 「パスワードの設定」確認メールがeショップの所有者に送信されます。
  4. 別のページでパスワードを設定した後、「ありがとう+登録ページ2」が表示されます->フォームのモックアップが添付されています。

このフォームでは、ストアに関するより詳細な情報を求めています。私たちは最低限の実行可能な製品(MVP)しか行っていないため、Webサイトは完全には機能していません。そのため、登録時にできる限り多くの情報をeショップの所有者から取得する必要があります。そのため、フォームは非常に大きくなります。

問題は、フォームを複数のエンティティに分割する必要があるか、それともこのように残す必要があるか?つまり、一方でこのすべての情報が必要です、しかし他方では潜在的なユーザーを怖がらせる可能性があります。

これらすべての設定を1つのページに表示したいのですが。しかし、私の同僚はそれを別様に見ています。このままにするか、フォームを複数のページに分割する必要がありますか?分離されている場合、潜在的なユーザーがすべてのページ間でスワッピングを続けることは意欲を失わないでしょうか?

Registration page 2

10
Cheree

明確な答えのない良い質問です。

つまり、long pagedivided pageには、それぞれ長所と短所があります。どちらを使用しても大きな間違いはありません。最近、その特定のトピックについて1つ publication がありました。これは、最高のHCI会議であるCHI会議で受け入れられました。 記事をダウンロード へのリンクはこちらです。基本的に、私はオンライン保険金請求プロセスで1つのページのすべてのフォームと別々のページに分割されたすべてのフォームの違いを評価するために、脳スキャナーと他の多くのパフォーマンスメトリック(完了までの時間、メンタルワークロード、感情的価値調査)を使用しました。

研究を要約します。

ページを完了する時間に大きな違いはありませんでした。ほとんどの参加者は単一ページアプローチを好んだ-8であるのに対し、ページを6で割った。書かれた単語などのその他のパフォーマンス指標は、エラー率は重要ではなかった。

分割されたページ(複数のページに分割されたフォーム)

  • 大幅に高いメンタルワークロード-客観的測定( 脳スキャナー )と主観的( NASA-TLX の両方)
  • ユーザーは前のページで入力した情報をすぐに確認できず、メンタルワークロードが発生します。
  • 参加者は、分割されたページを埋めるほうが楽しい(重要ではない)と述べました。感情価アンケートによって測定- [〜#〜] sam [〜#〜]

長いページ(1つのページのすべてのフォーム):

  • メンタルワークロードが大幅に減りました。注意力の必要なリソースが少なくて済みました。
  • 1つのページにすべてのフォームを入力するとき、ユーザーはより否定的(重要ではない)と感じました
  • ユーザーが入力したすべての情報は単一のページで利用できるため、プロセスの最後に簡単に再確認できます
  • ユーザーは、情報の入力を開始するフォームフィールドを選択できます

要するに、分割されたページは、完了するためにより多くの注意リソースまたはより多くのワークロードを必要としましたが、1ページ上のすべてのフォームと比較して参加者により積極的に見られました。分割されたページがより多くのワークロードを必要とした理由は、ユーザーがフォームに入力するとき、入力した情報を常に再確認するためです。追加のワークロードが作成されたのは、入力した情報が1または2ステップ戻ったのではないかと考えたためです。単一ページアプローチの利点は、すべての情報がそのページにあり、入力した情報を確認するために1ページ戻る必要がないこと、およびユーザーは入力を開始するフィールドを選択できることです。たとえば、一部のユーザーは3つの入力フィールドに情報を入力し始めました。

推奨事項:

  • もちろん、できるだけ多くのフィールドを除外するようにしてください
  • いくつかの質問についてヘルプツールチップを置く(ユーザーが不確実な場所を調査する必要がある)
  • トピックに関する質問をグループ化し、質問の論理的な順序に従います。最初に表示する質問と最後に表示する質問などについて考えてみてください。
  • できる限りデフォルト値を使用する
  • 名前フィールド(fname、lnameなど)に使い慣れた属性を使用して、 browser autofill をサポートします
  • ユーザーに同じ情報を再度入力させることを避けます(ユーザーが入力している間は保存します)。
  • エラーに対してインライン検証を使用します(スケッチで使用すると思います)
  • アクティブなフォームフィールドを強調表示します(ユーザーが現在のフォームフィールドを視覚的に見つけられるように、入力フィールド要素の背景を灰色にして、対照的にします)。

結論

2つのアプローチのどちらを選択するかは簡単ではありませんが、特定のコンテキストでテストすることをお勧めします。どちらにも長所と短所があります。

11

registration 2ページがオプションの情報である場合、その情報を複数のページに分割する必要があると思います。これが プログレッシブ開示 と呼ばれるものです。これは、ユーザーが情報をより適切に消化するのに役立ち、オプションがいっぱいの画面で閉所恐怖症を感じません。

重要なポイントがいくつかあるウィザードスタイルのデザインを使用できます。

  1. この情報を入力するのにかかる時間をユーザーに知らせます
  2. ユーザーが何かを達成するたびにユーザーにフィードバックを提供する
  3. これが重要である理由と、スキップしない場合は明確にする
  4. 必須フィールドがある場合は、必ずマークしてください。

このトピックについてオンラインで見つけられる多くの研究や情報があります。グーグル、Appleそして多くの新しい会社が物事を成し遂げるためにこの方法論を使用しています。私があなたに与えることができる最も良い例はターボ税です。

これは私の意見です

3
Jason Gonzalez

最良の解決策は、その長い形式をいくつかのステップに分割することです。ユーザーの観点から見ると、このようなフォームを処理する方が簡単で怖いものではありません。

また、ユーザーが長い間迷うのは簡単で、特に複数のエラーがある場合、エラーを表示するのは非常に困難です。

Eコマースでは、この「段階的な」動作はよく知られており、ユーザーは長いエンドレスフォームの代わりに2〜3ステップだけを完了する必要があると感じています。

このトピックについての素敵な記事を次に示します(以前は同じような状況で共有されていたと思います)。 Webフォームのページ付け

注:複数のページに分割することにした場合は、進行状況インジケーターを含める必要があります。そうすることで、人々が残すべきことを多く理解できます。

3

ここにたくさんの良いアドバイスがあります。それはおそらく次のように要約されます:

エラーを起こす可能性が高い分野はたくさんありますか?

ページが長い場合、ユーザーはどのフィールドにもアクセスできず、主要な行動を促すフレーズにジャンプする可能性があるため、インラインエラー検証に頼ることはできません。

これを行う場合、システムはフォーム内のすべてのエラーを報告する必要があり、ユーザーはそれらを見つけるために上下にスクロールする必要があり、ユーザーにとって非常に苛立たしいかもしれません。

少なくともウィザードアプローチを使用すると、フィールドの数をはるかに小さいグループに分割でき、Wizard Next/Previousボタンでフィールドの検証をトリガーできるため、フィールドがスキップされた場合エラーが解決するまでウィザードのナビゲーションを抑制できます。

エラー状態について考えることは、多くの場合、デザインの思考に役立ちます。

3
SteveD

このように質問のグループが複数ある長い形式では、ユーザーに問題が発生する可能性が高くなります。

たとえば、「連絡先の詳細」に続いて「小包の受け取り方法を教えてください」など、ページごとに1つ質問することに重点を置きます。

ページに1つだけのものがあると、特定の情報を求めている理由を説明するスペースが増え、人々が求められていることを理解し、見慣れないプロセスをたどり、モバイルデバイスでサービスを利用し、フォームエラーから簡単に回復します。

Gov.ukの調査に基づいてこの投稿をご覧になることをお勧めします https://designnotes.blog.gov.uk/2015/07/03/one-thing-per-page/

3
user48285

プロセスの長さに依存します。あなたが示すあなたのフォームは長すぎるので、私が提案しようとうまくテストしません。概念的に理解するのが非常に難しいだけでなく、最終的に提出するまで保存できません(そのステートレスでない限り、私は疑います)

とはいえ、eコマースの支払い画面など、特定のことに対して1ページのアプローチが機能する場合があります。

https://colmcqux.wordpress.com/single-vs-multi-step-checkout/

「結果:ドロップアウトが最大20%減少、トランザクションあたりの収益が最大18%増加」

しかし、あなたの場合、それはユーザーに強制しているさまざまな概念の長さと量に本当に依存します。 XのページYのページは、1つの大きなリストよりもわかりやすい

0
colmcq