長いWebフォーム-データ入力パワーユーザー向け
私は現在、ユーザーが1日の多くを費やしてデータを入力する非常に大きなWebフォームの設計を検討しています。
いくつかのメモ：
- これは基本的にデータ入力です。
- これらはパワーユーザーであるため、キーボードショートカットが推奨されます-少なくともマウスクリック。
- ユーザーは空白のフォームに最初から入力する必要はありません。部分的に完成したフォームに追加したり、詳細を確認したりする場合があります。
フォームは8つのセクションで構成され、無数のさまざまな要素が含まれています。テキストフィールドラジオボタンドロップダウンメニューサーチレットチェックボックス
したがって、ご想像のとおり、実装されたデザインがどれほど「クリーン」であるかに関係なく、ページが視覚的にかなりうるさいという事実から逃れることは困難です。
また、状況によっては、ユーザーが必ずしもすべてのデータを入力しているとは限らない場合があるため、あるセクションのいくつかの部分を入力し、次に別のセクションにジャンプしてから、別のセクションにジャンプする必要がある場合もあります。
私は最初、各セクションが垂直フローで表示されるソリューションを考案しました。フォーカスのある一番上のセクション、ユーザーは各セクションをタブで移動し、必要なものを入力します。セクションの最後に到達すると、次のセクションがフォーカスに移動し、ユーザーは続行できます。行/セクションの横に小さな「完了」アイコンがあるので、ユーザーが一目でフォームのどの部分が入力されたかを確認できる展開/折りたたみ可能な側面の概要セクションがありました。
このペインは、崇高なテキストが使用するのと同じ種類のアイデアになります。 
この解決策で私が見つけた問題は、ユーザーが古いフォームでいつでもすべての情報を1つの画面で見ることができる方法をユーザーが実際に気に入ったことでした。何が入力されたか、何が入力されなかったか、およびそれが正しく入力されたかどうかをすばやく確認できました。
上記の視覚的インジケータは、セクションが入力されたことをユーザーに通知しましたが、フィールドが迷惑メールまたは正しい情報に接触しているかどうかを示していません。
私の質問：
画面でのやり取りの量を、このタイプのパワーユーザー向けの明確で集中的なワークフローとどのようにバランスさせることができますか？
パワーユーザーの一般的な原則は、効率を高く評価し、ユーザーが与えるほとんどすべての制御を学習できることです。これは、インターフェースの設計を速度の最適化に集中させ、多くの気を散らす綿毛をカットできることを意味するので、これはあなたの観点から素晴らしいです。
ユーザーの実際のワークフローを少し分解してみましょう。
- フォームを確認し、エラーを検索します
- エラーに移動する
- 正しいエラー
- 別のエラーを検索する
- エラーが見つからない場合は、フォームを完全なものとして検証します
ここでは、入力されていないフォームフィールドはエラーであると想定しています。これにより、別のエラーを検索すると「次のフォームフィールドに移動する」ため、ワークフローの観点から空白のフォームに入力する作業が簡単になります。
発生している主な矛盾の1つは、すべての情報を一度に表示したいユーザー間、および適切な部分を入力するためにセクションをすばやくスキップできる必要があるユーザー間の緊張です。これは、エラーの検索と修正の間の自然な緊張です。
A 少量のテストは、エラーの検索と修正に費やされた時間のバランスを明らかにします。これは、フォーム送信でのエラーの総数、フォームレイアウト、およびナビゲートに使用されるメソッドに基づいて異なる場合があります。 エラー率の特定特に重要です-フォームの90％にエラーがほとんどないか、まったくない場合、検索への影響が大きくなるため、優先度として検索を改善することでより多くの距離を得ることができます。ワークフローの総速度。このバランスを特定すると、検索速度と最適化速度のどちらを最適化するかについて、賢明な決定を下すことができます。
エラーを特定することがユーザーにとって最大の不満の源ですそれを改善しても速度の点でそれほど多くは得られない場合でもです。エラーの検索にはかなりの警戒が必要ですが、エラーの修正はより簡単であるか、より興味深い対処法です。これは、フォーム全体を一度に見たいという願望に反映されている可能性があります。これにより、自然に目を通し、明らかなエラーをより迅速に見つけるのに役立ちます。ただし、ユーザーのニーズとユーザーのニーズは必ずしも相関しているわけではないことに注意してください。高レベルのスキャンとフィールドバイのバランスを取るために、さまざまな異なるレベルの概要をテストするをお勧めしますフィールドの検証。 ユーザーが概要のレベルを選択できるようにするキーボードショートカットを使用して、詳細を確認する前に概要を表示することもできます。
この考慮事項とは無関係に、実行できる効率の改善がいくつかあります。
まず、実行可能なあらゆる種類の自動エラー検出またはフィールド検証を実行すると、ユーザーの負荷が軽減されます。これの多くはかなり基本的なものです。ただし、検証方法が100％正確であることを保証できない場合は、システムが実際にエラーをキャッチしない限り、ユーザーの作業負荷を軽減できないことに注意してください。
視覚的な負荷に関しては、「正しい」アイテムではなくエラーを報告するにする必要があります。これにより、ビジュアルデザインをチェックリストのメンタルモデルに合わせることができ、エラーが存在することを確認できる一目でわかる簡単な概要が提供されます。逆のことを行うと、ユーザーはアイテムを完成した状態で精神的に処理する必要があるため、無視することができ、フォームを見ただけではエラーが存在するかどうかはわかりません。
キーボードショートカットを使用して、フィールド間だけでなくセクション間も移動するフィールド。ユーザーはいくつかの練習でフィールドのゲシュタルトコレクションを一度に処理できるようになるため、進行速度を制御できるようにすることが重要です。例として、tabは住所セクションのフィールド間をスキップし、ctrl + tabは次のセクション全体をスキップする場合があります。後方にスキップするためのショートカットも含めることを忘れないでください。
これに加えて、番号付き（または文字付き）セクションに専用セクション固有のショートカットを付けると、ユーザーがフォームをすばやくスキップできるようになります。上からタブパラダイムを使用している場合、tab + 1、tab + 2などのフォームを使用できます。
ユーザーがセクションに完了/検証済みのマークを付けるを許可すると、フォーム全体の全体的な検証がはるかに簡単になります。また、ユーザーは各フォームをセクションに分割し、1つの巨大なタスクとしてではなく、一連の小さなタスクとして精神的に取り組むことができます。検証されると、自動的に折りたたんだり非表示にしたりできるため、ユーザーの認知的負荷への影響を軽減できます。これは、他のユーザーが行ったアコーディオンの提案に結びついています。セクションの数によっては、進行状況バーなどを使用して、進行状況を示し、促進することもできます。これは、ユーザーがフィールドを検証した後、それらが正しいことを確信できるため、自動的に行うこととは異なります。
ヘビーデューティデータエントリフォーム（B2B/ERP）を設計したので、私たちのケースはおそらく記載されたものとは異なりますが、それはそれにいくつかの光を当てるかもしれません。ユーザーのインタビューは決定的ではなかったため、ユーザーの行動を観察し、メモを取り、行動の発生を測定し、使用パターンを考案することにしました。 1つのフォームには、約120（！）のフィールドがありました。
ヘビーデューティのデータ入力ユーザー（電源の有無に関係なく）は、マウスとキーボードを同じように使用することを考えてびっくりしました。拡張アコーディオンには、複数の垂直スクロールが必要でした。これにより、ユーザーは混乱しました（「私はセクション5の上部にいて、セクション2の下半分で何かを編集したいのです」）。折りたたまれたパネルはそれらを良い経験として認識されなかった「隠された」何かがあると感じさせましたfeel。キーボードショートカット（ページの下のセクションへ）と対照的なタイトル（セクションを簡単に見つけるため）は満足できませんでした。アコーディオンを開いたり、自動的に下にスクロールしたりするために、いくつかのショートカット（ctrl + 1、2、3、4、5 ..）を使用する場合も同様です。データ指向のユーザー（1日8.5時間同じフォームで作業）は、フォームのパネルが常に移動または変化しているという考えを嫌っていました。
ユーザーは、フォームのtopの隣に2つのタブ（これ以上はありません）を好みました。これは、より見やすく/わかりやすく、アクセスしやすいと考えられていました。 「メイン」タブには4つのセクションがあり、「追加」タブは一般的に使用されないフィールド用に作成されました（データ入力の10％未満）。各タブはカーソルのフォーカスを維持しているため、ユーザーはピーク時にメインのワークフローを維持できます。
現在、このフォームは混雑していますが、無秩序ではありません。フィールドは列に配置され、列の入力要素は同じ幅を共有します。セクション内のグループにはタイトルが付けられました（サブセクションと同様）。上部の良識ある美的デザイン層といくつかの機能強化により、すてきなリフレッシュツール/モジュールになりました。ユーザーは本当にそれを気に入った。
ナビゲーション
-Ctrl + 1/2 –共通またはあまり一般的でないフィールド
-Ctrl + down/up – 5フィールド（または「行」）up/down ---- 非常に便利
-PgUp/Dn –次/前のセクション
-タブ（+ shift）–次/前のフィールド
*さらにショートカットが必要になると考えましたが、「Keep It Simple」が適用されます。ユーザーは、もっと混乱すると思います（アクションボタンのキーボードショートカットもあると考えてください）。
拡張機能
-ラベル/タイトルの長さを最小化します（「日付フィールドであることがわかります。」）
-出力/入力/無効/空/フォーカスされたフィールドを区別します
-フォーカスを選択（入力コンテンツを簡単に置き換える）
-固定長フィールドの自動タブ（クレジットカード番号フィールドに16桁目を入力->次のフィールドにフォーカス）
-自動修正日付（0825または8/25および8/3または0803は自動的にmm/dd/yyyyに変換されます）
-ラジオボタンとチェックボックスをリストに変換します（ナビゲーションと上/下での選択とスペースバーでの複数選択）
別のオプション（別のERPソリューションで）で使用した）は、グループ化されたフィールドが互いに隣接しているグリッドのような構造です。 （スプレッドシートまたはGUI IDEを考えてください）SAP/ERP oldskoolデザインに似ているかもしれませんが、注意深く計画されたグラフィックデザインはこれを非常にクールな形に変えました。
スクロールバーの横にマーカーを配置して、不完全なフィールドがフォームのどこにあるかを示すことができます。これを使用して、ページのセクションの場所を示すこともできます。
download bmml source – Balsamiq Mockups で作成されたワイヤーフレーム
インスピレーション/コードについては、 sausage.js ライブラリー（ 例 ）および Scrollbar of Contents Chrome extension （crxをインストールまたはダウンロードして解凍した場合のソースを表示できます）。
ユーザーが古いフォームを好んだのは当然のことです。ほとんどの場合、ユーザーは、一度に1つのセクションではなく、1つのページにまとめられたすべてのものを見る方が適切です。これは、ユーザーの目が常にページ上のさまざまな方向をスキャンして移動し、すべてを表示することで、フィールドをすばやく移動できるため、終了後に驚きを感じることがないためです。
水平方向ではなく、垂直方向が良い選択でした。ただし、fieldsを検証する必要があるときに、sectionsを検証しています。長いフォームを設計する場合は、常にインスタント検証を使用する必要があります。即時のフィールド検証により、ユーザーが入力した情報が正しいか正しくないかについてリアルタイムでフィードバックを提供します。これは、フィールドが間違っている場合はフィールドの横にある単純なエラーメッセージで示され、正しくなっている場合はチェックマークアイコンで示されます。この記事では、それを正しく行う方法について詳しく説明します。 ロングフォームにインスタント検証が必要な理由
現在のシステムでも同様の問題に直面しました。私は、フィールドの入力方法に基づいてフィールドをグループ化することにしました（つまり、フィールドXが完了すると、通常、Y、Z、および$が完了しますが、フィールドXがないと、残りの3つは要件に対して余剰になります。
次に、各グループを展開して折りたたむことができます（UIのスクリーンショットが続く-セキュリティのためにフィールド名を匿名にする必要があります）グループを展開するか折りたたむかは、デフォルトではスーパーユーザー次第であり、フォームの実行方法に応じて時間とともに変更できます。
スクリーンショット：
大きな形：
折りたたみおよび展開したセクション：
何が dhmholley キーボードショートカットの提案はかなり素敵に見えますが、私はEnter/Returnセクション間の移動用。
さらに、ユーザーがリストの最後に到達したときに、有効な入力と空のフィールドをスキップして（一部のフィールドが空のままになる可能性があると述べたように）、無効な入力間を移動するためにこれらのキーを使用することをお勧めします。
次のレベルは空のフィールドにすることができます。ユーザーエクスペリエンスを向上させるために、欠落している可能性のあるフィールドを検出することもできます。
アコーディオンを使用して、ユーザーが各セクションを個別に開閉できるようにしてみませんか？
また、入力するデータは別のコンピューターシステムで使用できますか？その場合は、データをアップロードして（CSVファイルなど）、編集してインポートエラーを修正する方法を提供することをお勧めします。
あなたはいくつかのことをすることができます：
- アコーディオンを使用する：各セクションをアコーディオンの一部にすることができます。
- ユーザーがによく反応するかどうかを確認します。すべてのセクションを開き、すべてのセクションコントロールを閉じます。フォームのすべてのセクションを本当に見たい人はこれを使用できますが、他の人はセクションごとに自由に移動できます。
- 以前に入力された可能性のあるセクションには、チェックマークなど、そのセクションのデータ入力が完了したことをユーザーに知らせるものがあります。人々は、1つ少ないセクションに記入する必要があることを常に知りたいと思っています。
- 完了したら、ユーザーに1ページの要約を提供します。 1ページは長くなる可能性がありますが、同じページですべてのデータを表示すると常に役立ちます。
未完成のフィールドを無効な状態でビューポートの上部/下部に固定するか、何らかのプレースホルダー（Gmailの「Xからの返信」インジケーターなど）を表示します。スクロールして表示するときに有効にします。
長い形式の場合、複数の警告を1つのメッセージにまとめることができます。セクションがある場合、セクションごとに1つの要約が存在する可能性があります。
download bmml source – Balsamiq Mockups で作成されたワイヤーフレーム
インジケーターをクリックして不完全なフィールドをスクロールして表示し、次/前の不完全なフィールドのキーボードショートカットを追加できます。
フォームに記入するときは、次のフィールドに行くのによく使います。 「次のフィールド」のキーボードショートカットと「次の空のフィールド」の別のショートカット（crtl + tab？）を使用できます。
フォームの別のセクションにスキップするためのキーボードショートカットも作成する必要があります。
アコーディオンや開閉セクションを使用すると迷惑になると思います。水平にスクロールするページはどうですか？したがって、フォームの1つのセクションがページを垂直方向に下がり、次のセクションがその右側になります。セクションが画面に収まるほど短いことを確認してください。または、逆にそれを行います-セクション内のフィールドは左から右にスタックし、セクションはお互いの下にあります。どちらの方法でも、フィールドが大量にあり、ユーザーが一度に多くのフィールドを表示する必要があるため、1つの縦長のフォームではなく、両方のディメンションを使用する必要があります。
フォームは使用しないでください。多くのフィールドでは、多くのレコードとパワーユーザーがスプレッドシートスタイルの編集可能なテーブルを提供しているため、はインラインで編集でき、一度に複数のレコードを表示できます。アコーディオンと折りたたみは、繰り返しアクセスするための追加のステップを繰り返し与えることでユーザーを苛立たせようとしているだけで、簡単にアクセスできるはずです。
キーボードショートカットについては、このタイプのインターフェースのパターンは慣例にすぎません。矢印キー、シフト、タブ、エンター。
また、同様の特性を持つデータ入力アプリケーションを設計しています。これは、長い形式のパワーデータ入力ユーザーです。
私の解決策は垂直スタックフローを使用したあなたの解決策に似ていますが、一部のセクションは必ずしも一度に入力する必要がないため、各セクションの右下に「保存」および「保存して続行」ボタンを提供しています。右上にある「保存」ボタン。いつでも使用できます。
あなたの質問への回答：画面の実際の状態は問題ではなく、環境を制御できるため、私が見たすべてのサンプルには長いスクロールがあります。これは回避しようとしていることです。効率とスピードを最大化しています。
powerのユーザーについて話している場合、ユーザーはフォームについて何かを学ぶことができるため、非標準のやり取りを使用できます。
左ペインに概要を表示するのが好きです。それを合成して、「あなたはここにいる」インジケーター、そしておそらくセクションやフィールドの他のいくつかの状態フラグを備えたマップとして機能するようにします。
マウスをまったく必要とせず、キーボード入力を最大限に活用する必要があると思います。デスクトッププラットフォーム（タブレットなどではない）について話している場合は、.
どこでも予測可能なキーボードショートカットを使用してみてください。例：alt-leftで左ペインに切り替え、ペインをキーなどでナビゲート可能にし、Enterで次のフィールドに移動し、alt-Nで次のセクションに、alt-Pで以前など.