修正が必要なイライラするデザインパターン：バースデーピッカー

あなたは前にそれらを見たことがあります。 あるWebサイトから別のWebサイトに至るまで、どこに行ってもあなたを追いかけているように見える、紛らわしくてイライラするデザインパターン。 おそらく、実際に何が間違っているのかを決して伝えない無効な送信ボタン、または一度開くと、間違いを修正する必要があるときに入力フィールドをカバーするツールチップです。 それらはいたるところにあり、よく調整され、設計が不十分なネズミ捕りのように見えるもので、しばしば行き止まりから別の行き止まりに私たちを投げつけて迷惑です。

これらのパターンは悪意も悪もありません。 彼らは、消火栓や横断歩道を装った、欺瞞的なクッキーのプロンプトや神秘的なCAPTCHAとはあまり共通点がありません。 それらは、悪い意図や害を念頭に置いて設計されていません。バウンス率を上げたり、コンバージョンを減らしたりすることを期待して、朝起きた人は誰もいません。

何年にもわたって、多かれ少なかれランダムな設計上の決定が広く受け入れられ、採用されるようになりました。そのため、データやユーザビリティテストによって疑問視されたり検証されたりすることなく、何度も繰り返されています。 それらは確立されたデザインパターンになっています。 そして、しばしばかなり貧しいもの。 テスト中にユーザーの苦情の中に何度も何度も現れます。

この新しいシリーズの記事では、これらの苛立たしいデザインパターンのいくつかを詳しく見て、より良い代替案を探り、それを構築または設計するときに覚えておくべき多くの例と質問を見ていきましょう。 これらの洞察は、あなたやコミュニティの同僚によって実施されたユーザー調査とユーザビリティテストから得られたものです。もちろん、これらはすべて、今後の各投稿で参照されます。

まず、ある時点で私たち全員が経験した、謙虚で一見無害に見えるパターンから始めます。悪名高いバースデーピッカーは、アクセスできず、遅く、使いにくいことがよくあります。 完璧な日付と時刻のピッカーについてはすでに詳しく説明しましたが、誕生日のピッカーについては別の会話に値します。

苛立たしいUX：2021年から始まる誕生日のドロップダウン/ウィジェット

求職に応募したり、銀行口座を開設したり、フライトを予約したりするたびに、おそらく生年月日を入力する必要があります。 明らかに、入力は日付であるため、適切に採用された日付ピッカーカレンダーに似たウィジェット（ネイティブまたはカスタム）を使用するインターフェイス、またはその特定の入力を要求するためのドロップダウンを表示することはそれほど驚くべきことではありません。 。

これらのオプションがしばしば好まれる理由をおそらく見つけることができます。 技術的な観点から、入力が正しいことを確認し、エラーを早期にキャッチしたいと考えています。 私たちの検証は、入力を検証し、明確なエラーメッセージを提供し、それを修正するために顧客が何をする必要があるかを正確に説明するのに十分な防弾でなければなりません。 ドロップダウンやカレンダーウィジェットでこれらすべての問題が発生するわけではありません。 さらに、法案に適合するオプションのみを提供することで、ロケールやフォーマットの違いを簡単に防ぐことができます。

間違いを防ぐ最善の方法は、間違いを起こしにくいようにUIを設計することだと思われるかもしれません。 これは、フォームのデザインが厳密かつ明示的であることを意味する可能性があります。基本的には、整形式の入力のみが許可されます。 結局のところ、利用可能なすべての選択肢が整形式である場合、不正な入力を提供することは不可能です。 しかし、入力は確かに整形式ですが、特にその入力を提供することが疲れてイライラする場合は、正確である必要はありません。

実際には、私たちは実際には、過度に複雑で厳格なパスワード要件でも同様の間違いを犯しています。 必要に応じてパスワードを再入力できるようにするために、画面の付箋にパスワードを貼ったり、デスクトップのpersonal.txtファイルにパスワードを隠したりするほど、これらの要件に悩まされることは珍しくありません。 企業のWi-Fiパスワードとオンラインバンキング用の複雑なSuperPINは、実際のその良い例です。

人々は自分たちに有利にルールを曲げるのに非常に創造的であることがわかったので、システムが使用できないとき、それは安全ではありません。 また、フォーム入力が使用できない場合、受信するデータの精度が低下し、エラーが増える可能性があります。 もちろん、最終的には、ユーザーがロックアウトされ、進行できないためにUIを放棄せざるを得なくなる状況が発生します。

そのコインには裏返しもあります。 もちろん、すべての複雑さを排除し、常に単一の入力フィールドを提供して、ユーザーが好きなように入力できるようにすることもできます。 実際には、それは彼らが実際に彼らが好むものを、しばしば不十分に構造化された非効率的な方法でタイプすることを意味します。

誕生日の入力の場合、ユーザビリティテストでは、顧客は7月から7月から06から6までのいずれかを入力します。多くの場合、途中でランダムなデリメータといくつかのタイプミスがあり、日、月、年の順序が混在しています。 送信後にその入力を検証しても、ユーザーはどの入力フォーマットが機能するかわからないため、うまく機能しません。 明らかに、それは私たちのニーズにもうまく対応していません。

私たちの設計では、アクセス可能な技術的実装とともに、敬意を持ってわかりやすいガイダンスを提供する必要があります。 これにより、ネイティブの日付ピッカーとドロップダウンのいくつかの一般的な欠点が発生します。

ネイティブの日付ピッカーとドロップダウンの落とし穴

残念ながら、 <input type="date">によって促されるネイティブの日付ピッカーには、アクセシビリティの悪夢がたくさんあります。 執筆の時点では、そのまま使用すると、ほとんどすべての種類の日付入力に対して非常にアクセスしやすい選択肢ではありません。 スクリーンリーダーの問題がたくさんあるだけでなく、フォーカスとレイアウトの問題、混乱を招く一般的なエラーメッセージもあります。

キーボード入力を完全に無効にする実装が多数あり（上記を参照）、顧客はネイティブの日付ピッカーのカレンダーウィジェットのみを使用する必要があります。 そして、これは痛々しいほど、痛々しいほど遅いです。 キーボード入力のフォールバックがなければ、ユーザーは数日、数か月、数年の長い旅に出て、数十回のタップまたはクリックを行う必要があります。

日付はすぐにわかりますが、インターフェースにより、日付間を移動し、そこに到達すると月次概要で日付を見つけるように求められます。 それが、これらの経験が苛立たしい理由です。

その点で、ドロップダウンははるかに高速でナビゲートしやすくなっています。 これらはデフォルトでアクセス可能であり、さらに月と年の間を移動するのではなく、日、月、年の3つのリストから適切な数値を見つけるだけで十分です。 しかし、ドロップダウンはまだ遅いです。 ズームの問題があります。 スクロール可能なオプションをつまむのは面倒です。 それらは多くのスペースを占有します。 年のリストは長いです。 また、入力を指定するときは、コントロールをタップしてからスクロールし（通常は複数回）、ターゲットを見つけて選択し、次のドロップダウンに進む必要があります。 それも爽快ではありません。

したがって、ドロップダウンが最後の手段のUIと見なされ、通常、ボタン（フィルターなど）、トグル、セグメント化されたコントロール、またはテキストボックスの柔軟性と<select>の保証を組み合わせたオートコンプリートボックスに置き換えられるのは珍しいことではありません。箱。 ドロップダウン自体は悪くありません。 ユーザーが必要以上に多くの時間をデータの入力に費やしているだけです。

そして、デフォルト値についての質問があります。 ドロップダウンでは、デフォルトで入力がまったくない（ mm/dd/yyyy ）ことがよくありますが、日付ピッカーでは、カレンダービューの開始点を指定する必要があります。 後者の場合、皮肉なことに、「開始」日は通常、フォームに記入された日付の前後、たとえば2021年5月15日です。 もちろん、これは最適ではないようですが、適切な日付は何でしょうか。 どこかから始める必要がありますよね？

まあ、しかし実際には正しい日付はありません。 3か月前または明日、早めまたは遅めに開始できますが、誕生日ピッカーの場合、これらのオプションはすべて純粋な当て推量です。 そのため、彼らはややイライラします。入力がないと、顧客は1901年から1980年代後半までずっとスクロールする必要があり、入力セットがあれば、それを修正する必要があり、多くの場合、数十年前後にジャンプします。 その相互作用には、スクロールの非の打ちどころのない精度が必要になります。

私たちがどんな選択をしても、私たちはほとんどいつも間違っています。 これは、ホテルの予約Webサイト、フードデリバリーサービス、およびその他の多くのユースケースでは異なる可能性があります。誕生日の入力だけではありません。 これにより、フォーム入力がどの程度適切に設計されているかを客観的に評価する方法についての会話が始まります。

フォームデザインの品質の評価

デザインは非常に主観的な問題と見なすことができます。 結局のところ、与えられた問題に対する正しいアプローチについては、誰もが自分の意見や好みを持っているようです。 しかし、他の自己表現や芸術とは異なり、デザインは問題を解決することになっています。 したがって、問題は、特定の設計が特定の問題をどれだけうまく解決するかということです。 デザイナーの意図を明確に表現すればするほど、顧客が犯す間違いが少なくなり、中断が少なくなり、デザインが向上します。 これらの属性は測定可能で客観的です。

私自身の経験では、フォームはユーザーエクスペリエンスの最も難しい側面です。 マイクロコピーやフォームのレイアウトからインライン検証やエラーメッセージまで、非常に多くの難しい側面があります。 フォームを正しく取得するには、多くの場合、バックエンドエラーとサードパーティエラーをフロントエンドに適切に表示し、複雑な基礎となる構造を予測可能で合理的なフォームフィールドのセットに単純化する必要があります。 これは、複雑なレガシーアプリケーションやサードパーティの統合において、簡単に苛立たしい悪夢になる可能性があります。

したがって、フォームデザインに関しては、私たちのプロジェクトでは、常に次の9つの属性に基づいて特定のソリューションの品質を測定しようとします。

• メンタルモデル
  私たちのフォームデザインは、顧客のメンタルモデルにどの程度適合していますか？ 個人情報をお伺いする際には、お客様のご利用をサポートするために必要な最低限のことをお伺いする必要があります。 正当な理由がない限り、機密情報や個人情報（性別、誕生日、電話番号）を尋ねたり、UIで説明したりしないでください。
• 複雑
  モバイルとデスクトップで、ページごとにいくつの入力要素を表示しますか？ フォームに70〜80の入力フィールドが含まれている場合は、すべてを1ページに表示するのではなく、複数列のレイアウトを使用する場合は、タスクリストパターンを使用して、複雑さをより小さく管理しやすいチャンクに分割することをお勧めします。
• 入力の速度
  顧客はデータを正しく入力するためにどのくらいの時間と労力が必要ですか？ 与えられた入力に対して、途中で間違いがないことを前提として、与えられたデータでフォームを正確に完成させるために必要なタップ/キーストローク/操作の数。
• アクセシビリティ
  入力の速度について話すときは、主にスクリーンリーダーユーザーとキーボードユーザーなど、さまざまな対話モードをサポートしていることを確認する必要があります。 これは、適切に設定されたラベル、大きなボタン、入力フィールドの上に配置されたラベル、およびエラーが適切に伝達されることなどを意味します。
• スケーラビリティ
  UIを別の言語に翻訳したり、別のフォームファクターに適合させたりする必要がある場合、それはどれほど簡単で、いくつの問題が発生しますか？ （問題のある解決策の典型的な例は、フローティングラベルパターンです。これについては、別の投稿で説明します。）
• 中断の重大度
  スピナーの読み込み、インライン検証の早期または遅延、提供されたUIに基づいてインターフェイスを調整するためのUIの一部の凍結（国が選択された後など）、誤って事前入力されたデータの頻度など、顧客に割り込む頻度はどれくらいですか？または誤って自動修正されたデータ？
• フォームの成功率
  何人の顧客が1つの間違いなしにフォームに正常に記入しましたか？ フォームが適切に設計されていれば、大多数の顧客にはエラーがまったく表示されないはずです。 たとえば、これにはブラウザの自動入力を利用する必要があり、タブの順序は論理的であり、編集は従来型で明白です。
• 回復の速度
  エラーを発見して修正し、フォームの次のステップに進むことに成功した顧客の割合はどれくらいですか？ エラーメッセージが表示される頻度と、最も一般的なエラーメッセージを追跡する必要があります。 そのため、カスタマーサポートに立ち寄って、顧客がよく不満を言っていることを最初に確認することをお勧めします。
• フォームの失敗率
  何人の顧客がフォームを放棄しますか？ これは通常、フォームが複雑であるだけでなく、積極的なバリデーターや無効になっている「送信」ボタンが原因でエラーを修正する方法が見つからないために発生します。 また、フォームが正当な理由なしに機密情報や個人情報を要求しすぎるために発生します。

フォームがどのように機能するかを理解するために、モバイルデバイス、タブレット、ラップトップ、デスクトップなど、自分のマシン、自分のOS、自分のブラウザでインターフェイスにアクセスする顧客を対象に、ユーザビリティ調査を実施します。 可能であれば画面を記録し、思考の声のプロトコルを使用して、どこで、どのように、そしてなぜ間違いが発生するのかを追跡するようお願いします。 また、顧客が1つのフォームフィールドから別のフォームフィールドに移動する速度、一時停止して考えるとき、およびほとんどの間違いが発生するときについても調査します。

明らかに、タップまたはクリックの数が非常に多いからといって、入力が単純​​で面倒であるとは限りません。 ただし、一部の入力モードではエラーが発生したり混乱が生じたりする可能性が高く、他のモードは外れ値である可能性があり、他のオプションと比較してはるかに多くの時間が必要になります。 それが私たちがテストで探しているものです。

それでは、誕生日の入力の問題にどのように適用できるかを見てみましょう。

より良い誕生日の入力を設計する

誰かがあなたにあなたの誕生日を尋ねた場合、あなたはおそらく特定の数字の文字列を念頭に置いているでしょう。 dd/mm/yyyyまたはmm/dd/yyyyで並べ替えることができますが、非常に若い頃からあらゆる種類のドキュメントで繰り返し使用されている8桁の文字列になります。

誕生日の入力が何であるかを示すこの単純なモデルを、日、月、年の3つの入力すべてを組み合わせた単純な単一入力フィールドで利用できます。 つまり、ユーザーは8つの数字の文字列を入力するだけで、常にキーボードを使用し続けることになります。

ただし、このアプローチではいくつかの問題が発生します。

• 自動フォーマットとマスキングをサポートする必要があります。
• 日/月の入力の位置を説明する必要があります、
• 入力全体でBackspaceボタンの動作をサポートする必要があります。
• マスキングを追跡して非表示/表示/永続的に表示する必要があります。
• 特定の値（月など）へのジャンプをサポートする必要があります。
• モバイルデバイスで特定の値を変更するには、入力内の怒りのクリックとナビゲーションを最小限に抑える必要があります。
• 自動作成を使用しない場合は、あらゆる種類の区切り文字をサポートするための一連のクリーンアップと検証のルールを考え出す必要があります。

フォームデザインパターンに関する彼の本の中で、Adam Silverは、1つの入力の代わりに複数の入力を使用することはめったに良い考えではないと主張していますが、日付には良いオプションです。 各入力が何を表しているかを明確に伝えることができ、フォーカススタイルで特定の入力を強調することができます。 また、検証ははるかに簡単であり、入力のどの特定の部分が無効であると思われるか、およびそれを修正する方法を簡単に伝えることができます。

入力が終了したときにユーザーをある入力から次の入力に自動的に移行するか、ユーザーが自分でフィールド間を移動できるようにすることができます。 一見すると、入力に必要なのは8桁で、次々に入力されるため、前者の方が優れているように見えます。 ただし、エラーを修正する場合、多くの場合、入力バッファー（既存の入力を修正するための入力フィールド内のスペース）が必要になります。

たとえば、 01と入力し、間違いに気づき、入力を010に変更し、最初の0を削除すると、文字列が逆になります—10。あるフィールドから次のフィールドへの自動移行により、問題が少なくなり、UIだけがもう少し予測可能で扱いやすくなる可能性があります。

入力を説明するために、日、月、年のラベルを提供する必要があります。また、正しい入力の例も示す必要があります。 ラベルはフローティングラベルであってはなりませんが、表示したいヒントや例とともに、入力フィールドの上に快適に配置できます。 さらに、すべての入力をフォーカスで強調表示することもできます。

何年にもわたって、私は何年にもわたるテストを通してこのソリューションの単一の問題を見つけることができませんでした、そしてそれはGov.ukでも使用されているパターンを驚くべきことではありません。

結局、日付ピッカーが必要なとき

上記の解決策はおそらく誕生日の入力には十分すぎるでしょうが、より一般的な状況には十分ではない可能性があります。 誕生日よりも文字通りではない日付入力が必要になる場合があります。この場合、顧客は日を指定するのではなく選択する必要があります（たとえば、「 7月の第1土曜日」 ）。 この場合、ユーザーが使用できるカレンダーウィジェットを使用して、3つの入力フィールドを拡張できます。 デフォルトの入力は、現在の日付、またはほとんどの顧客が選択する傾向がある将来の日付のいずれかに依存します。

Adamは、彼のNoStyleDesignSystemで思い出に残る日付パターンの簡単なコード例を提供しています。 たくさんの開発作業を解決し、たくさんのアクセシビリティの問題を回避します。カレンダーウィジェットをタップしたり、ドロップダウンホイールを不必要にスクロールしたりすることを回避します。

まとめ

もちろん、適切なフォームコントロールは、期待する日付入力の種類によって異なります。 顧客が到着日を選択することを期待する旅行プランナーの場合、カレンダールックアップを使用した柔軟な入力が役立つ場合があります。

ただし、お客様に生年月日を尋ねるときは、非常に具体的な日付、つまり正確な日、月、年を表す非常に具体的な文字列を求めています。 その場合、ドロップダウンは不要です。 どちらもカレンダールックアップではなく、デフォルトで多かれ少なかれランダムな値になります。 必要な場合は、可能であればネイティブの日付ピッカーとネイティブのドロップダウンを避け、代わりにアクセス可能なカスタムソリューションを使用してください。 また、入力フィールドの上にラベルと説明が配置された3つの単純な入力フィールドに依存します。

また、完璧な日付と時刻のピッカーの設計に関する長い記事と、設計または構築に使用できるチェックリストも公開しています。

関連記事

この記事がお役に立てば、ここに私たちが何年にもわたって公開した同様の記事の概要があります—そしてさらにいくつかがあなたの道を進んでいます。

• パーフェクトレスポンシブコンフィギュレーター
• 完璧な機能比較
• 完璧なスライダー
• 完璧なアコーディオン
• SmashingMagに掲載されたAdamSilverによるフォームデザインパターンブック
• 次のニュースレターを見逃さないように、メールマガジンを購読してください。