4フォームデザインUXのあなたが知っておくべき（ヒント付き）のヒント
フォームは単にユーザーデータを収集するための手段として考える傾向がありますが、それらは一方向であることもあります。 唯一の方法, 私達のユーザーのために 私たちとつながる. 私たちがユーザーを作ることができると考えるのはおそらく妄想的です 愛 フォームに記入する、しかしそれは確かに可能です あまり煩わしくない解決策を見つけるために, そして、その過程で彼らを助けます.
ネットを閲覧しながら、プログラム的には正しいが、最も可能性の高い方法で設計された驚くべき解決策を見つけることができます。 ユーザーエクスペリエンスが悪いため、多くのユーザーがサイトを放棄します。.
私たちのフォームがうまく設計されていれば、私たちはユーザーを喜ばせるだけでなく、それに対処できるバックエンドチームも喜ばせることができるでしょう。 ユーザー入力エラーがはるかに少ない. したがって、この記事では、どのように私たちができるかを見ていきます。 ユーザー入力エラーを最小限に抑える そしてなお 私たちのユーザーを幸せに保つ.
ユーザーのニーズを予測する
ウェブサイトとアプリケーションは さまざまなユーザー基盤と目標, 同じ場所でも、最も頻繁に使用されるものに名前を付けるために、さまざまな種類のデータを収集する多数のフォームをホストできます。
- ログインフォーム
- 登録フォーム
- ユーザープロフィールフォーム
- ニュースレター登録フォーム
- チェックアウトフォーム
- ユーザー調査
- お問い合わせフォーム
- コメントフォーム
- 検索フォーム
これらすべてのフォームタイプ 違うものが必要. チェックアウトフォームを設計するときは、セキュリティについてユーザーに信頼性を保証することが重要ですが、コメントフォームの場合は、次のことをお勧めします。 絵文字やその他のユーザーが実際の気分を表現できるようにする方法を追加する.
ただし、すべてのサイトに独自のフォームタイプがあるため、似たようなフォームタイプでも異なるデザインが必要な場合があります。 ユニークなユーザーベース. 設計プロセスに着手する前に、それは常に良い考えです ユーザーが何を必要としているかを予測する, そしてそれに応じて設計する.
例：ユーザのニーズをターゲットにしたソーシャルログイン
Codepenのログインフォームには、Githubを一番上にした3つのソーシャルログインが含まれています。この選択はほとんどのサイトには無理でしょう.
しかし Codepenに最適です, ユーザーベースは開発者で構成されているので、その多くはGithubアカウントでログインするか、または開発アカウント同士を一度に接続することを望んでいます。.
モバイル優先だと思う
モバイルユーザーとデスクトップユーザーのニーズはそれぞれ異なりますが、 フォームを完成させることは、モバイル画面ではもっと大きな課題です。, 物理的なキーボードよりも手のジェスチャを使用する モバイルファーストアプローチ 使用可能なフォームをデザインしたい場合.
さらに、モバイルでうまく機能する多くのフォームUIパターンは、デスクトップでもうまく機能します。.
例：タップ可能なコントロール
高品質のモバイルフォームは、なしでは想像できません。 表示コントロール その上で モバイルユーザーは簡単にタップできます 彼らの指で.
Webデザイン会議An Event Apartのニュースレター登録フォームは、モバイルユーザーが画面にアクセスする方法に対応しています。 タップしやすい2つの入力フィールド そして 指先サイズのボタン.
モバイルユーザーが簡単にタップできるように、テキスト入力フィールドはいつものように高くなっています。そして目盛りアイコンが付いた大きなオレンジ色のボタンは、ユーザーがフォームを送信することをさらに促進します.
サイトのデスクトップ版 同じフォームデザインを使用, それはまた見栄えがよく、より大きなスクリーンでうまく機能するので.
例：消耗品の入力
モバイル用のフォームをデザインするときは、私たちができることを検討することが常に重要です。 使用スペースを最小限に抑える. の 消耗品 UIデザインパターンは最近かなり普及してきており、特にモバイルでうまく機能します。.
Booking.comは、携帯サイトの検索フォームでこのパターンを利用しています。ユーザーが検索フィールドをタップすると、検索フィールドは次のように展開されます。 ジェスチャー用のスペースをもっと空ける, また、その下に推奨事項を含む選択リストも表示されます。.
ユーザーがフィールドからタップすると縮小され、余分な情報が消えます。.
例：モーフィングボタン
モーフィングボタン ユーザーが最初にボタンを見るので、使い捨ての入力パターンをさらに一歩進めます。 フォームに変形する 彼らがそれをタップしたとき.
下のスクリーンショットは、革新的なフォームデザインに関するThe Startupの素晴らしい記事からのものです。.
入力取り込みを容易にする
長いフォームはユーザーを抑止する傾向があります。私たちができる最善のことは 本当に必要なものだけを入力してください. これはユーザーエクスペリエンスの観点から重要であるだけでなく、ユーザーが個人情報を公開することを躊躇することもあります。 プライバシーの問題.
時々、しかし、私たちは それでも 長いフォームと一緒に行かなければならない。この場合は、 小さいチャンクにそれらをスライスする, そして チャンクを連続したスクリーンとして提供する.
多くのeコマースサイト（例えばAmazon）はカート放棄率を減らすためにこのソリューションを使用しています.
フォームフィールドの入力を簡単にしたい場合、経験則は次のとおりです。 気を散らすものとユーザーの行動の両方を減らす できるだけ.
例：個別入力ピッカー
日付ピッカーやカラーピッカーなどのさまざまなコンテンツピッカーは、正しい入力を取りやすくするだけでなく、フォームも作成します。 より魅力的な, そしてかなり ユーザーエラーを減らす.
Todoistリストテイクアプリ 個別のヒントを与える ユーザーが日にちをポイントしたときの日付ピッカー内.
例えば、下のスクリーンショットでは、8月31日にすでに2つの期限付きタスクがあることがわかり、タスクの正しい日付を決めるときにこの情報を考慮に入れることができます。生産性がユーザーの最大の関心事であるアプリにとっては素晴らしいアイデアです。.
例：ドラッグアンドドロップ入力
ドラッグアンドドロップデザイン 特にユーザーが画像をアップロードすることになっている場合は、通常ファイルのアップロードフィールドでうまく機能します。.
通常の[ファイルをアップロード]ボタンと比べて、ユーザーの操作はそれほど軽減されない可能性がありますが、作業が簡単になります ユーザーがアップロードしたいファイルを選択してください, そのため、間違ったファイルを送信する可能性が低くなります。.
WordPress.comは、そのポストエディタフォームに、エレガントで直感的なドラッグアンドドロップのユーザー入力インターフェイスを提供しています。の 小さなサムネイル そしてその すでにアップロードされたファイルの視覚的表現 ユーザーがアップロードをすばやく実行するのに役立つ.
例：注意をそらすためのオーバーレイ
ユーザーがフォームに記入するときに気を取られると、エラーが発生しやすくなり、また煩わしくなります。
コンテンツオーバーレイ ミニマリストフォームデザインに代わる優れたツールです。彼らは使用されています より複雑なサイトで 同じ画面に異なる種類の情報を表示したい.
下のスクリーンショットで、Booking.comのデスクトップ版を見ることができます。ユーザーが検索フォームにカーソルを合わせると、残りのコンテンツが表示されます。 灰色がかったオーバーレイで覆われている 彼らを手伝うために フォーム記入プロセスに集中し続ける.
ユーザーへのフィードバック
を与える 適切なタイミングで適切なフィードバック ユーザーエクスペリエンスを大幅に向上させることができます.
フォームデザインには、 2種類のユーザーフィードバック：
- 与えられたフィードバック 前 フォーム送信 - のために エラーを減らす そして フォーム放棄率, プログレストラッカー、正しい入力に対してユーザにすぐに報酬を与えるインスタント入力検証、またはヘルパーツールチップなど
- 与えられたフィードバック 後に フォーム送信 - ユーザーに知らせるために 彼らはエラーを犯した, エラーメッセージなど
ユーザーが必要とするユーザーフィードバックの種類は、対象ユーザーの特性とサイトの目標によって大きく異なります。.
例：プログレストラッカー
アンケートやほとんどのeコマースチェックアウトフォームなど、1ページを超えるフォームでは、 進捗状況トラッカー デザインパターン。進捗状況トラッカーが インスタントビジュアルフィードバック 自分のステータスについてユーザーに伝え、プロセスを進めるように促します。.
SnapSurveysアンケート作成者のWebアプリでは、送信ボタンの真上に小さな進捗状況トラッカーが表示されます。 自然にそれを見て.
プログレストラッカーはラベルを使用しませんが、設計された方法 その目標を明確にします - 円の数はステップの数を示し、既に実行されたステップは青になり、ユーザーはまだいくつのステップがそれらの前にあるかを容易に見ることができます。.
例：リアルタイム検証
ボディショップ化粧品小売業者が使用する リアルタイム検証 エラーを排除し、フォーム完成プロセスのUXを向上させるために、そのUser Profileフォームに.
ユーザーがフォームに入力している間に入力がチェックされ、正しい答えと間違った答えがすぐに表示されます。 簡単に区別できるアイコン もう少し右側に見えますが、それでも可視領域にあります。.
例：表現力豊かなツールチップ
分かりやすいマイクロコピー また、フォームデザインにおけるユーザーフィードバックの成功に不可欠な要素です。定義上、Webサイトのマイクロコピーは次のもので構成されています。 小さなテキストの塊 ラベル、ボタン、エラーメッセージ、ツールチップなど、さまざまな要素で使用されます。.
そのログインフォームでは、バークレイの銀行グループはユーザーが潜在的にの助けを借りて尋ねるかもしれない質問に答えます うまく設計されたツールチップ それを含む わかりやすいマイクロコピー.
ツールチップは少し後ろに隠れていますか？アイコン ユーザーの注意をそらさないために ログインフォームの記入方法を知っている人 いつもいること よくわからないユーザ向け.
いくつかのツールチップにも含まれています 注釈付きのデビットカードの小さなビジュアル ユーザーがログインフォームに入力する必要があるデータを簡単に見つけられるようにする.
