最新のWebフォーム：さらにいくつかの微妙な点

ほとんどの人は自分の目で世界を認識しているため、Webアプリケーションのフロントエンドを作成するとき、視覚的なデザインは非常に重要です。 しかし、現代のWebデザイナーが飽和させたいこれらの小川とキャラメルはどれもとても便利なのでしょうか？ この記事では、適切なインターフェースを作成する秘mistakeのいくつかを共有するだけでなく、Webフォームの設計における一般的な間違いについてお話したいと思います。











「適切なインターフェイス」とは、変換を大幅に増やし、ユーザーに主観的な快適さを提供するインターフェイスを意味することを言及する価値があります。 データの信頼性は、当社グループが実施した調査と、サードパーティ（ほとんどの場合は西部）のUX専門家による調査の両方によって保証されています。

最近、一般的なWebアプリケーションと特にフォームの両方のデザインのトレンドは、最大限の装飾を目指して努力しています。 「キャラメル」デザイン、グラデーション、影、明るく非標準のインターフェース要素。 「デザイン」の中では、実際のコンテンツを見つけるのが難しい場合があります。

このような軽率な装飾は、ユーザーの注意がWebアプリケーションを使用する主な目的からそらされ、ユーザーはフォームに記入するのではなく、そのデザインを研究することに固執し始めるという事実につながります。 最終的に、フォームが完成することはなく、私たちは貴重な回心を受け取りません。

それでは、Webフォームデザインのファッショントレンドを見てみましょう。

• フィールドヘッダーのカスタムレイアウト。
• 必須フィールドの「クリエイティブ」タグ。
• どこでも、どこでもスライダー。
• 明白な文脈上の手がかり;

フィールドヘッダーのカスタムレイアウト

見出し（ラベル）は、テキストまたはその他のフィールドに入力する必要がある情報の種類を示します。 つまり、ユーザーは入力フィールドに進む前にタイトルを読む必要があります。 コンテンツが上から下、左から右に読み取られるサイトの場合、入力フィールドの上または直接左にラベルを配置することが論理的です。 実際には、デザイナーはタイトルをどこにでも置くことがよくありますが、彼にとって自然な場所ではありません。

顕著な例は、ラベルが入力フィールドの下にあることです（図1）。



図1フィールド自体の下の入力フィールドのタイトル



フィールド見出しのこの配置は、子供の頃から上から下に読むことに慣れている人々が最初に空のテキストフィールドを見て、その後、その説明をさらに探してからフィールドに戻ることを余儀なくされるという事実につながります。 ユーザーは、フォームに入力するときに、2ステップ先に進み、1ステップ先に戻り、その後、次のフィールドとそのタイトルに移動し、さらに3ステップ先に進み、1ステップ先に戻ります。 些細なことのように見えますが、前後に長いジャンプをするとすぐにタイヤが疲れます。

ユーザーがそのような非標準のフォームを記入するのにより多くの努力を費やすことは明らかであり、注意はより速く排出され、その結果、記入する拒否の数が増加します。



調査によると、フォーカスグループ（メイングループとコントロールグループに30人）を使用して、フォームに非標準的に配置されたフィールド見出し（20個のテキストボックス、10個のチェックボックス、10個のリストボックス、4個のラジオボタングループ、それぞれ3個）を記入すると、16.67に発生しました標準グループにコントロールグループを入力する場合よりもエラーが多い（30％に対して46.67％）、フィールドに入力する場合にエラーが30％多い（23.33％に対して53.33％）、そしてより頻繁に表される63.33％フォームのデザインに対する主観的な不満（73.33％対10％）。



図2見出しがフィールドの下にあるフォームの使いやすさの調査結果



別の一般的なケースは、入力フィールド内にヘッダーがあるフォームです（図3）：



図3フィールド自体の中の入力フィールドのタイトル



頻繁に使用されるソリューションが実際に正しい選択ではないいくつかの理由を次に示します。

• ユーザーがフィールドにデータを入力し始めると、タイトルが消えます。 また、ユーザーが何かに気を取られてフォームに戻った場合、ユーザーが入力しているフィールドの種類をすぐに理解することはできません。
• 特に難しいケースでは、開発者が面倒なときにjsを使用してタイトルを自動的に非表示にするのが面倒だった場合、ユーザーはこのタイトルを削除するために多くの追加の精神的および身体的アクションを行う必要があります。 既存の、しかし壊れたjavascriptについても同じことが言えます。
• 内部にヘッダーがあるフィールドは塗りつぶされているように見えるため、ユーザーがフィールドをスキップする可能性があります。
• フォームに完全に入力された場合、ユーザーはフィールドの入力が正しいことを確認し、それらをヘッダーと関連付ける機会がありません。
• フォームを直接印刷する機能が失われます。 ヘッダーが欠落している場合、フィールドが何であるかが不明確になります。
• フィールド見出しが2〜3語を超える場合、このようなフォームのデザインを使用することはできません。
• この設計の実装に使用されるJSは、フロントエンドコードを不当に複雑にします。

なぜ、このような明らかな欠陥にもかかわらず、設計者がフロントエンドの開発にこの手法を使用し続けるのでしょうか？ 一部の専門家は、Webフォームの方がより正確に見えると主張しています。 この声明で議論することができます。 はい、フォームはスペースを取りませんが、機能を大幅に失います。 冷蔵庫の棚をきれいにするために冷蔵庫から食べ物を投げ出すのと同じです。 デザイナーは、使いやすさを損なう場合、ミニマリズムへの情熱を抑えるべきです。



最後に、見出しの最もock笑的な使用は、アニメーション付きの見出しです。 通常、フィールド内にある見出しを見たことがありますか。フィールドをクリックすると、ゆっくりと左または右に忍び寄ることがありますか？ これは使いやすさの面でもデザインの面でもひどいものだと思いました 。 第一に、この方法ではスペースが節約されず、第二に、アニメーションがユーザーの注意をそらし、入力エラー、空白フィールドなど、多くの問題に直面します。

必須フィールドのクリエイティブラベル

ユーザーに必要なフィールドを表示する必要がある場合、事実上の標準として確立されている赤いアスタリスク（*）を使用しないのはなぜですか？ これはインフォグラフィックの最良の例ではないかもしれませんが、多くのサイトで長年使用されてきたため、ユーザーになじみのあるものになりました。 さらに、いわゆる 「二重視覚アクセント」、つまり ユーザーはその特別な形状と色によってすぐにそれを認識し、色知覚違反の場合でも、このインジケーターの二重の解釈はありません。

それにもかかわらず、情報デザインのこの要素に独自の調整を行おうとしているデザイナーのグループがあります。 もちろん、赤い星が満杯でなければならないことを知らない人もいます。 しかし、結局のところ、はるかに多くの人々がそのような合意に慣れており、ラベルの形と色のarbitrary意的な変化という形でそれから逸脱するst迷に導かれます（図4）。



図4必須フィールドのカスタムラベルデザインの例



そして最後に、必須フィールドをマークする最もクールな方法は、タイトルに下線を引くことです（図5）。 はい、はい、そのようなことでさえ、創造性に燃えている一部のデザイナーの頭に浮かぶことがあります。



図5下線付きの見出し-「創造的な」無法のピーク



一般に、Webドキュメント内のアンダースコアはリンクを意味します。 ここで、フォームの下線付きの見出しを見るユーザーに生じる認知的不協和音を想像してみましょう。 個人的には、これらのリンクをクリックして、これらのリンクが何であるかを確認し、フォームに入力するプロセスから注意をそらすようになります。 そして、私にとって、多くのユーザーと同様に、下線付きの見出しを持つフィールドが必須であることはまったく明らかではありません。

興味のために、私たちは以下の結果を受け取った必須フィールドラベルの主題について30人のフォーカスグループで小さな狭い研究を実施しました：調査対象者の90％は赤い星を必須フィールドのシンボルとして認識し、73.33％は赤いボックスが同じことを示していることを理解し、アスタリスク（同時に、これらの33.3％がそのような指定から不快感を感じる）、フィールドが必要であるという表示に下線を引くとすぐに認識した回答者は6.67％のみです（残りは「リンク」をクリックしようとしました）



図6標準のフィールドラベルと必須ではないフィールドラベルのあるフォームのユーザビリティ調査の結果

フォームのスライダーとスクロール

記事のこの部分では、インターフェイスの補助的な部分ではなく、フォームに情報を直接入力する方法であるスライダーとスクロールについて説明します。

情報の入力に使用されるコントロールの標準セットは制限されています：テキストボックス、ラジオボタン、チェックボックス、およびドロップダウンリスト。 デザイナーやインターフェースの専門家がこのセットを拡張したいと常に思っているのは驚くことではありません。 これらの「拡張機能」の1つはスライダーでした。物理コントローラーの仮想的な類似物で、ボリュームからストーブの加熱温度まで、さまざまなパラメーターの値をスムーズに変更できます。 実際の対応物と同様に、スライダーはおおよその値をすばやく選択するように設計されています。 音量レベルの調整やビデオ内の移動などの目的には、スライダーが最適です。 しかし、それらはWebフォームでの使用に適していますか？

ほとんどの場合、「ノブレギュレーター」の主な機能であるスムーズなチューニングはWeb上で単純に必要ないため、値が明確に固定されたミュータントスライダーが表示されます（図7）。



図7フォームでのスライダーの誤用



ユーザーが複数の固定値を選択する必要がある場合、ドロップダウンリストまたはラジオボタンを使用する方がより論理的で適切です。 特に、スライダーに対するドロップダウンリストの利点は次のとおりです。

• リストボックスタイプコントロール自体は、ユーザーが定義済みのリストから1つの値のみを選択できることを示し、スライダーは値の範囲から選択することを意味します。
• ドロップダウンリストで値を選択するには、ユーザーは自由にキーボードまたはマウスを使用できますが、スライダーではほとんどの場合マウスのみに制限されます。
• 一般に、ユーザーはスライダーよりもドロップダウンリストに慣れています。
• リストボックスはより柔軟で、障害のある人が使用できるようにアクセス可能です。

スライダーに対するドロップダウンリストの利点については長い間議論することができますが、乾燥した数字はそれを物語っています。通常とは異なるコントロールを使用すると、変換が明らかに減少します。

したがって、オーストラリア最大の求人ポータルで実施された調査では、給与範囲を2つのリストボックスで選択できるスライダーを交換すると、コンバージョンが8％増加することが示されました（図8）。



図8「理解できない」スライダーを通常のドロップダウンリストに置き換えた結果



この研究での転換は、空席を選択するための基準としての賃金の範囲のユーザーによる使用でした。

ポータルの管理者は、「微調整」検索パラメータのページで「給与計算スライダー」を使用することを決定しました。 得られた結果を改善する必要がある場合（図9）。



図9スライダーは、プロジェクトの重要でない部分で正常に使用できます。



多くのサイトでは、スライダーを使用して、さまざまな値から正確に選択する機能をユーザーに提供しますが、ユーザーは事前定義されたいくつかのソリューションにより満足しています。

たとえば、図のスライダー 10を使用すると、ユーザーは1泊あたりの女の子の最大費用を10ドルの精度で設定できます。 しかし、ユーザーが検索を740ドルに制限するか、それとも750で失敗するかを考える必要は本当にあるのでしょうか？ 事前に定義された価格帯（たとえば、0〜50ドル、50〜100、100〜200など）のチェックボックスを使用して選択を容易にすることが非常に望ましいです。



図10チェックボックスのグループに対するスライダー：人々にもう一度考えさせない



実際、スライダーはそれほど悪くはありません。とにかくだけでなく、本当に必要な場合にだけ（他のコントロールと同様に）使用する必要があります。

スライダーの正しい使用例は図です。 11、そしてその理由は次のとおりです。

• この場合、ユーザーが選択できる範囲の最終値を表示することが重要です。 このようなデータの視覚的表現により、スライダーは優れた働きをします。
• 正確な値を選択することが可能です。
• ユーザーは、保険料のコストの変化に対する自分の選択の影響をすぐに見ます。
• ユーザーが自分の車の正確なコストを知っている場合、スライダーと組み合わせてテキストボックスにすぐに入力できます。
• スライダー自体は、珍しいインターフェイス要素として、退屈なフォームの塗りつぶしに多様性をもたらします。

図11スライダーにより、ユーザーは自分の車の値を正確に選択できます。

明白なコンテキストプロンプト

コンテキストプロンプトは、フォームへの入力プロセスでユーザーにタイムリーな支援を提供します。 例は、パスボックスフィールドの下の有効なパスワード形式の説明です。

ただし、ネット上では、コンテキストヘルプが疑問符の付いたアイコンの後ろに隠れているか、完全に存在しないフォームがたくさんあります。 これは、特に、インターフェイスのスペシャリスト間のユーザビリティの分野でシステムの知識が不足しているために発生します。 しかし、これは文盲のデザイナーに関するものではありません。

実際、ユーザーにコンテキスト支援を提供すると、フォームへの入力が大幅に簡素化されるため、コンバージョンとロイヤルティが向上します。 ユーザーが必要な情報を取得するためにアイコンをクリックするという追加の努力を強制する必要はありません。

5文字より長いパスワードを使用する必要があることをユーザーにタイムリーに明示的に説明すると（図12）、エラーの数が大幅に減少し、フィールドが再び入力されるのを防ぎます（偶然、常に発生するとは限らず、多くの場合、ユーザーは単にページを閉じます）非友好的なフォーム）。



図12コンテクストプロンプトの適切なデザインを持つフォームの例



もちろん、コンテキストヘルプを非表示にする使い慣れたアイコンを使用すると、フォームのサイズが小さくなり、見た目がよりきれいになります（図13）が、ユーザーはエラーをコミットする前に必ず行かない余分なアクションを実行するように強制されます（私たちはしません）指示を読むのが大好き）。



図13形状を減らすためのアイコンの使用



さらに、フォームに入力するときにマウスを使用しない人を忘れないでください。 iPadまたは携帯電話からサイトにアクセスするときに、小さなヘルプアイコンをクリックするかどうかを検討してください。 そして、ユーザーがフォームの入力時にキーボードのみを使用することに慣れている場合、質問の場合、マウスに手を伸ばし、アイコンをクリックし、読み、入力フィールドにフォーカスを戻す必要があります...疲れて入力をやめるユーザーの数を知っていますか？



フォーカスグループ（60人）の参加による調査によると、23.33％のユーザーは、コンテキストヘルプが完全に不足し、対応するアイコンをクリックしてヒントを受け取る必要がある場合は13.33％がフォームからドロップアウトするため、複雑なフォームへの入力を完了しません。 同時に、回答者の63.33％がコンテキストヘルプの欠如に対する主観的な不満を表明し、30％がヘルプアイコンの追加クリックの必要性を表しています（図14）



図14文脈依存ヘルプの非識字使用により、最大23％のユーザーが失われ、60％以上のロイヤルティが低下します



同様に、状況によって明示的なコンテキストヘルプの代わりにアイコンを使用する必要がある場合は、このアイコンが通常の基準を満たすように注意する必要があります。

一般的に、青い背景に疑問符が付いていることでヘルプが示されます。 このようなインフォグラフィックはWebデザインだけでなく日常生活でも使用されているため、ほとんどのユーザーは長い間「知識」を開発してきました。疑問符の付いた青いアイコンで何かが示された場合、そこでヘルプを得ることができます。

設計者が標準アイコンをより創造的なもの、たとえば救命浮輪などに置き換えると決定した場合（図15）、これによりユーザーはさらに困難になり、最終的にコンバージョンが減少します。



図15非標準のインフォグラフィックを使用してヒントを示すと、このフォームを認識しにくくなります



妥協点は、フィールドの隣にヘルプテキストを表示したポップアップウィンドウを使用することであるように思われますが、ここでは問題が潜む可能性があります。

• コンテキストヘルプがあることを知らないユーザーは、フォームに入力する前に発生する質問を熟考することさえできます。 しかし、ユーザーに負担をかけたくないのですよね？
• テキストボックスを除き、チェックボックス、ラジオボタン、およびその他のコントロールが使用される場合、ユーザーは選択後にのみコンテキストヘルプを表示します。
• ツールチップは、重要な情報の一部と重複する場合があります。
• 繰り返しますが、モバイルプラットフォームでは、このようなソリューションはユーザーにとって非常に不便です。

この特定のWebフォームでそのようなヘルプを必要とする可能性のあるユーザーの予想割合が非常に低く、そのような機能をインターフェースに導入することが不採算になる場合、アイコンの下でコンテキストヘルプを非表示にするか、まったく設計しないことが理にかなっています。

コンテキストヘルプが必要であるが、明示的な追加が難しい場合、ツールチップ-ツールチップを使用できます（図16）。 アプリケーションで最も成功している分野は、チェックボックスとラジオボタンです。 ポップアップウィンドウが情報の入力を妨げず、ユーザーの注意をそらさないコントロール。

同時に、この種のリンクの標準である破線の下線付きのコントロールのタイトルを配置することにより、コンテキストヘルプの利用可能性をユーザーに通知することができます。

ただし、スマートフォンやタブレットからサイトにアクセスするユーザーは、リンクにカーソルを合わせたときにそのようなヒントが表示される機会を奪われることを忘れないでください。



図16妥協点はツールチップを使用することです

おわりに

すべてのフォームには、確立された標準のコントロールセットがあり、ほとんどのユーザーに馴染みがあり、必要な機能のほとんどすべてを実装できます。 新しい要素の追加、および標準の設計と機能の変更は慎重に実行する必要があります。 フォーム開発のインターフェイススペシャリストは、自分の好みではなく、ユーザーの利便性と経済的合理性に導かれる必要があります。

フォームの実装された各要素は、それぞれ場外制御で使用されるため、ユーザーにとって不便であり、コンバージョンが低下し、最終的には会社による利益の損失につながります。 悪魔-彼は詳細にいます、これを覚えています。



免責事項：この記事は決して「教える」ために書かれたものではありません。 主な目標は、便利なフォームを作成するなどのデリケートなトピックに関するディスカッションを開くことです。 お互いから学び、世界をより良い場所にしましょう。