Webフォームの終わり

公開: 2022-03-11

Webフォームは煩わしく、非効率的であり、人々を恐怖で満たします。 誰かが実際にウェブフォームに記入するのが好きですか? それにもかかわらず、それらは「必要な悪」であり、最も重要なオンラインインタラクションのいくつかを作成または中断する可能性があります。

Webフォームは、依然としてほとんどが古い紙のフォームに基づいています。つまり、システム中心のUI(ユーザー中心)のゾンビの残り物です。 30年が経ちましたが、今でも同じ情報をフォームに何度も入力しています。

WebフォームのUXUIデザインは、紙ベースのフォームデザインに基づいています
このKFC求人応募のような紙のフォームからWebフォームがどのように生まれるかがわかります。

ありがたいことに、大きな変化が進んでいます。 5年後、求人応募、クレジットカードの応募、eコマースのチェックアウト、アカウント登録など、情報入力が必要なほぼすべてのタスクに入力する際に​​個人データを入力するために使用した、厄介で遅くてイライラする方法を振り返ります。 これらの相互作用の重要性にもかかわらず、それらを可能にするフォームの設計は、しばしば非常によく考えられていません。

DMVWebフォームデザイン
DMVを愛していないのは誰ですか? この種の形は、すぐに失われた過去のほこりっぽい古い遺物になることを願っています。

要するに、今日のほとんどのWebフォームは、デスクトップであろうとモバイルであろうと、単にひどいユーザーエクスペリエンスです。 Nielsen Norman Group、Baymard Institute(eCommerce)、Luke Wroblewski(Interaction Design Associationの共同創設者)など、UX業界の第一人者による無数の本、研究、記事、ホワイトペーパーにもかかわらず、多くの組織、さらにはそれに依存している組織もあります。 —WebフォームのUXデザインのベストプラクティスに従わないでください。

これは、何十億もの収益の損失につながります。

驚いたことに、Amazon(eコマースの数十億ドル規模の巨人)は、配送や店舗受け取り、クレジットカード情報、検証エラー、もっと。 このような貧弱なUXのためにどれだけのビジネスが失われますか?

今日、ほとんどのWebフォームは苛立たしく、記入が遅く、使いやすさを最優先にしています。

WebフォームデザインのUXUI
このようなアカウント登録フォームは、人々の精神的な負担であり、記入に時間がかかります。

時間と認知の緊張の観点から、オンラインフォームは巨大な妨害になる傾向があります。 それらは圧倒的にエラーが発生しやすく、デフォルト値、オートコンプリート、および自動フォーマットがありません。 彼らは入力エラーをうまく処理しません—そしてそれは明確なデザインの考え方を必要とし、異なるユーザビリティの問題を抱えているモバイルフォームについてさえ話していません。

求人応募ウェブフォームデザインUX
求人応募フォームには、最悪のUXがいくつかあります。 アクティブな求職者は、これらのフォームに同じ情報を何度も記入します。

組織は、トランザクションを完了する必要がない場合でも、ユーザーから大量の情報を収集しようとすることがよくあります。 寄付フォームは、寄付者の利益を考慮せずに、自分の統計のために寄付者のプロファイルデータを収集することを主張するため、多くの場合、最大の違反者です。 あなたが誰かにあなたが待たなければならないあなたの苦労して稼いだコインを与えようとしているときにあなたが言われたと想像してください、彼らは彼ら自身の統計的使用のために完全に質問であなたを焼きます。 結構です。

アカウント登録、チェックアウトなどのモバイルフォームには、独自のUXの問題と課題があります。 画面が小さく、フルサイズのキーボードがないため、入力が困難です。 人々は、UI要素をタップしてスワイプするために指先を使用する必要があります。 専用のミニキーボードを備えたデバイスでも、テキスト入力は特に遅く、タイプミスが散らばっています。

画面が小さいということは、常に目に見えるオプションが少ないことを意味し、ユーザーは舞台裏でシステムのメンタルモデルを構築するために短期記憶に頼る必要があります。

モバイルウェブフォームのUXデザイン
DominoのPizzaの「プロファイルの作成」手順は、モバイルデバイスでの使い勝手が悪く、厄介なユーザー操作が必要になります。

進化するWebフォーム

Webフォームは進化の段階にあります。 まったく新しいパラダイムの誕生に先立ち、私たちは、痛みを伴う、不格好で、退屈で反復的な「フォームへの入力」の初期段階と、Touch ID、音声印刷、コンピュータービジョン、顔認識と虹彩スキャンにより、個人データのロックが解除され、必要なすべての情報が必要なシステムにシームレスかつ安全に提供されます。

UXデザイナーは、エクスペリエンスの向上とWebフォームへの入力に伴う苦痛の軽減に絶えず努力していますが、この中間段階では、「ビタミン」のみを提供しています。これは、究極の「鎮痛剤」ソリューションではありません。

よりユーザーフレンドリーでシームレスなユーザーエクスペリエンスを提供するために、最新のフォームデザインのいくつかは、従来のフォームとはまったく似ていないインターフェイスを実装することで、フラストレーションのいくつかを排除しようとしています。 彼らは私たちの生活を大幅に楽にすることに成功していますが、それでも行く方法があります。

Typeformによる会話型UIWebフォームデザイン
Typeformは、この求人応募フォームでのスピーディーなユーザーエクスペリエンスのために、「会話型UI」を使用しています。 キーボードショートカットが表示され、ほとんどの手順と回答に組み込まれているため、フォームに入力するのに非常に効率的です。

オートフィルが救助に来る

GoogleのChromeブラウザとその自動入力機能は、より効率的なフォーム入力のための待望の天の恵みでした。 頻繁に入力される個人データ(クレジットカードを含む)を安全に保存し、Webフォームにすばやく入力します。 Googleによる最近の調査によると、Chromeの自動入力機能を無効にすると、フォームの送信が25%少なくなります。 この調査では、それがないとエクスペリエンスが非常に煩わしくなり、一部のユーザーはフォームへの入力を完全に放棄することが示されました。

サプライズ! フォームへの面倒な入力は避けたいものです。

GoogleChromeオートフィル
Google Chromeの自動入力機能は、Webフォームへの繰り返しの入力に役立ちます。

パスワードマネージャーは痛みを和らげます

何百ものオンラインアカウントのパスワードを常に取得して入力するのは面倒です。 パスワードマネージャーは数年前に救助に来て、現在広く使用されています。 1PasswordとDashlaneは、数回クリックまたはタップするだけで、ウェブサイトやアプリの暗号化されたパスワードを安全に保存して自動入力する2つの主要なソリューションです。

モバイルパスワードマネージャーの自動入力
マスターパスワードまたは指紋タッチIDでロックを解除すると、Dashlaneのパスワードマネージャーがパスワードを自動入力します。

ソーシャルサインインは登録に終止符を打つ

WebHostingBuzzがまとめた調査によると、ユーザーの86%が、新しいアカウントを作成する必要があることに悩まされていると報告しています。 ソーシャルサインインにより、登録が不要になります。 これは、Facebook、Google +、LinkedIn、Twitterなどのソーシャルネットワーキングサービスからの既存の情報を使用したシングルサインオンの形式です。 ユーザー名とパスワードの必要性を減らすことにより、登録を増やし、参入障壁を最小限に抑えます。

ソーシャルサインイン、ソーシャルログイン

モバイルデバイス技術がフォームの負担を軽減

モバイルフォームのユーザビリティが大幅に改善され、頻繁に使用される値の保存と取得、電話機能(カメラ、GPS、音声、連絡先リスト)を使用したフォームの事前入力など、デスクトップでの新しいベストプラクティスの一部が促進されています。データを自動フォーマットします(郵便番号に基づいて、米国の州を事前に選択します)。

また、必要な入力の種類に応じて、キーボードを変更できます。 入力した最初の文字に基づく提案/オートコンプリートを使用でき、電話番号とクレジットカード番号を自動フォーマットできます。

Apple Pay、コンピュータビジョン
Apple Payアプリは、iPhoneのカメラとコンピュータービジョンを使用して、カードの写真を撮って登録するだけで、面倒なキーボード入力は必要ありません。

Webフォームのトレンド

説明したように、従来のWebフォームのデザインは、古い紙ベースのモデルに従います。 それが彼らがとても似ている理由です。 以前は、他の方法で個人データを収集するテクノロジーは利用できませんでしたが、現在は利用可能です。 従来のWebフォームを完全に残すために、デザイナーはユーザーにクリーンなUIと、テキスト入力の行き先を示す下線付きの領域を提示しています。 このように、フォームへの入力はより自然に感じられ、データ入力のようにはなりません。

モバイルWebフォームのデザイン
入力フィールドとドロップダウンを使用した「データ入力」の外観から離れるために、設計者はモバイルフォームのよりクリーンなデザインを考え出します。


デスクトップWebフォームのデザイン
デスクトップのGoogleフォーム。

もう1つの傾向は、ユーザー入力の要求をより会話的にすることです。これにより、より人間的な対話が作成されます。 チャットボットやその他の将来の入力方法のより洗練された世界の前身であり、ユーザー入力フィールドを自然に流れる文章や質問に織り込むことが含まれます。

会話型UIWebフォームデザイン
シンプルな会話型の連絡フォーム。 (ネル・セボタリ)


会話型コマースモバイルWebフォームデザイン
モバイルフォームはミニマルで会話型になりつつあります。 (DribbbleのAlexCristacheとFabioBasileによるデザイン)

マシンのトークバック:チャットボットと自動エージェントの台頭

通常、ボットは、アプリケーションインターフェイスとしてインスタントメッセージングを使用する人工知能プラットフォームです。 チャットボットは、フォームへの入力を求めることでユーザーに負担をかけるのではなく、対話をより自然で会話的なものにすることでその負担を軽減します。一部のボットはAIではなく、チャットを介して対話する実際の人間が素晴らしいユーザーエクスペリエンスを提供します。

対話が会話型でチャンクに分割されるため、たとえば単純な旅行予約を完了するためにかかる時間は同じかもしれませんが、認知的負担が軽減され、エクスペリエンスが向上します。

会話型UIチャットボットGoVoteBot
R / GAとAdCouncilは、ミレニアル世代を投票に駆り立てるための投票ボットを構築しました。 単にGoVoteBotと呼ばれ、FacebookMes​​sengerでリアルタイムにユーザーと対話します。

旅行者は、Facebook Messengerアプリを使用してハイアットホテルを予約したり、ハイアットチームとライブチャットを行ったりして、特定の休日に空きがあるかどうかなど、自由形式の質問をすることができます。

会話型UI会話型コマースチャットボットハイアット
ハイアットホテルズは、Facebook Messengerを使用して、顧客関係スタッフを使用して、ゲストの予約と空き状況の確認を支援しています。

保険は、自動化されたエージェントの台頭による混乱の準備ができているもう1つの業界です。 FacebookがMessengerプラットフォームを誰でもチャットボットの開発と展開に利用できるようにすることで、自動保険代理店の扉も開かれました。

英国のジャック保険はまさにそれを行っています。 これは、フリーランスのクリエイティブやWebデザイナー、開発者、イラストレーターなどのWebプロフェッショナルに簡単なビジネス保険を提供するために構築されました。

ジャック保険会話型UIチャットボット
ジャックは、保険のプロセスを専門家に説明するシンプルなチャットボットです。フォームはありません。

ただし、チャットボットなどを使用したフォーム入力エクスペリエンスのバンド支援は、半分の対策にすぎません。 人々は多くの個人データを繰り返し提供しなければならないため、長期的には機能しません。

問題を作成したときと同じような考え方で問題を解決することはできません。 - アルバート・アインシュタイン

「ビタミン」段階から真の鎮痛剤に移行するには、別の考え方をして、新しいパラダイムに大きな飛躍を遂げる必要があります。

AIの台頭:明日のユーザーフレンドリーなデータ収集

夏休みを予約しようとする困難で反復的なプロセスを経験したことがないのは誰ですか? 最近1つを計画したとき、3つの航空会社、12のホテル、2つのレンタカー会社、空港送迎…同じ名前、住所、クレジットカード番号、マイレージクラブ番号、電話番号、電子メールで何度も何度もフォームに記入しました。アドレス…プロセスは完全に魂を殺し、完全にばかげています。

Googleの報告によると、ストレスはチェックされていません。レジャー旅行者の69%は、旅行の予約時に最適な価格を見つけられなかったり、最善の決定を下したりしていないと心配しています。 それに加えて、90%の確率で同じ情報を無限のフォームに入力するという貧弱なユーザーエクスペリエンスがあり、私たちは信じられないほど苛立たしくストレスの多いプロセスについて話しています。 Chromeの自動入力機能や前述のその他の便利な機能を備えていても、エクスペリエンスは依然として悲惨で退屈なものです。

長期的なUXのビジョンは、Webフォームを完成させ続けることではなく、それらを完全に殺すことです。

前述のように、モバイルで利用できるさまざまなテクノロジー(GPS、指紋(Touch ID)、声紋と認識、虹彩スキャン、顔認識、コンピュータービジョン、AIアシスタント、チャットボット)のため、避けられない個人データの収集が必要です。オンライントランザクションを成功させるために発生するのは、最初にモバイルで革命を起こすでしょう。 したがって、デスクトップサイトは、モバイルデバイスとリンクすることにより、モバイルデバイスの技術機能を利用して高度なID検証を行うことができます。

Webフォームの代わりに会話型の旅行予約
従来の検索、結果のフィルタリング、およびWebフォームに終止符を打ち、旅行を予約しようとするときに、より単純で根本的に快適な対話を思い付くことができるでしょうか。

名前、自宅の住所、職場の住所、電話番号、頻繁なチラシのマイル、生年月日など、個人に関するすべてのものを非常に安全に保存する個人データ保管庫の理想的な未来を想像してみましょう。この個人データ保管庫は、生体認証、セキュリティに関する質問、およびマスターパスワードの組み合わせ。 ロックを解除してアクセスを許可すると、サイトまたはアプリは、ユーザーが情報を入力しなくても、必要なすべての情報にアクセスできるようになります。

生体認証と個人データのセキュリティ、Webフォーム

プラットフォームとデバイスに応じて、さまざまな方法とフォールバックを使用してボールトのロックを解除できます。 ユーザーがデータを入力する必要がないように、システムはチャットボット、またはオプションの音声認識と自然言語処理を備えたその他の会話型UIを使用して簡単な質問をします。 音声入力が実用的でない場合は、キーボード入力を使用できます。

さらに一歩進んで、この個人データ保管庫は他の保管庫(パートナーや配偶者など)とリンクでき、所有者の同意を得て、関連情報にアクセスするために一時的にロックが解除されます(アクセスは簡単で、要求された情報のみが利用可能になりました)。 旅行アプリやサイトは、必要なすべてのデータに安全にアクセスし、旅行の手配を簡単に行うことができます。

Webフォームはまもなく古い学校になります。これは、もはや必要のない、過ぎ去った時代の興味深いアーティファクトです。 上記のシナリオでは、UXデザイナーは、フォームなしでより良いエクスペリエンスを設計することに直面します。 Webフォームへの情報の入力を含む、従来のすべての対話は、バックグラウンドに表示されなくなります。

ユーザー入力の性質は変化しています

インターネットとスマートフォンの使用により、圧倒的な量のデータが作成されました。 コンピュータービジョン、IoT、人工知能、機械学習などの「未来のテクノロジー」はすでにここにあり、インタラクションの性質とUXの展望を変えています。

従来のUIはなくなりつつあり、Webフォームはその変化の一部です。 確かに、ユーザー入力フォームの必要性はなくなることはありませんが、入力を提供するために必要なユーザー操作がますます少なくなる、目に見えないインターフェースが普及するでしょう。

機械学習などのAI技術は、個人データへのアクセスから価値を引き出すことができ、スマートアルゴリズムは、ユーザーが求人応募、旅行予約、オンライン購入を簡単に完了するために必要なデータを予測できます。

私たちは希望に満ちた願望を擁護し、これらの高尚なUXの理想を追求していますが、Webフォームを完全に排除する独創的な方法と、個人データに関するセキュリティ上の懸念との間には依然として隔たりがあります。 堅牢で安全なシステムを設計することはできますが、これらの懸念に対処する必要があります。 調査によると、人々は個人データを共有し、そこから大幅な価値と時間の節約が得られる場合は追跡を許可する用意があります。

ゲームの先を行くために、UXデザイナーは、チャットボットと会話型UIで満たされた将来のシナリオについて考え始める必要があります。 エクスペリエンスを最適化し、ユースケースのシナリオを理解する必要があります。 相互作用のステップは可能な限りスムーズかつ効率的ですか? チャットボットのトーンは何ですか? 私たちは物事を成し遂げるのにかかる時間を短縮していますか、それともそれを増やしていますか? 生体認証IDの検証が行われると、その相互作用はどのようになりますか? どうすればユーザーにより良いサービスを提供し、生活を楽にする素晴らしい体験を提供できるでしょうか。

テクノロジーとインタラクションの性質は変化しますが、UXデザインのベストプラクティスの合計と実体、つまりユーザー中心のデザインプロセスは進化し続け、最終的には普及します。

•••

Toptal Designブログでさらに読む:

  • eコマースUX–ベストプラクティスの概要(インフォグラフィック付き)
  • 製品設計における人間中心の設計の重要性
  • 最高のUXデザイナーポートフォリオ–刺激的なケーススタディと例
  • モバイルインターフェースのヒューリスティック原則
  • 予測的デザイン:魔法のユーザーエクスペリエンスを作成する方法