👿 😍 🚴🏿 登録とサイトへのアクセスを簡素化します 🆔 👵🏼 🦄

Anthony T.の「サインアップとログインを簡素化する革新的な技術」というタイトルの記事の翻訳を紹介します。 Smashing Magazineの発行の承認を得て、Habrahabrユーザー専用にUXDepotに転送されました。

登録および承認フォームを作成するには、さまざまな方法があります。ほとんどのデザイナーは、従来の方法に精通しています。

ただし、いくつかの革新的な手法を知って使用することで、フォームをより明確に記入しやすくすることができます。

Basecampログインフォーム

この記事では、プロジェクトに役立つと思われるいくつかのアイデアを紹介します。しかし、それらを使用することを計画するときは、それらが適用されるべきコンテキストを理解していることを確認してください。また、ユーザビリティテストの結果を確認し、以下に概説するアドバイスを確認または拒否します。

登録フォームを簡素化する

Webフォームの目標は、ユーザーが簡単かつ正確に記入することです。 フォームが長すぎて複雑な場合、ユーザーのサイトの印象が損なわれる可能性があります。以下は、ユーザーがフォームにすばやく簡単に入力できるようにするためのいくつかのトリックです。

。

登録後にユーザー名を尋ねる

登録フォームに記入する際、ユーザーは一意の名前を見つけて入力する必要があります。そして、ユーザーが考えて、誰かがすでに取った名前を入力した場合、彼はもっと考えなければならず、時間と忍耐を費やします。登録プロセス中に訪問者に名前を尋ねる代わりに、このプロセスの直後に訪問者に尋ねることができます。この場合、嫌いなフォームを満たすためだけに元の名前を考え出す必要があるため、ユーザー登録のプロセスを遅くすることはありません。

。

パスワードを1回だけ尋ねる

多くの登録フォームでは、ユーザーが2つのフィールドにパスワードを入力できます。この理由は理解できます-フォームに入力されたパスワードは、セキュリティ上の理由からマスクの後ろに隠されています。したがって、背後にいる人はそれを見ることができません。この場合の2つのフィールドは、タイプミスを防ぐのに役立ちます。

ただし、実際には、ユーザーがさらに入力する必要があるため、これによりさらに多くのエラーが発生します。彼はどの文字を入力しているかはわかりません。パスワードを入力するたびに、正しいパスワードを入力しているかどうかはわかりません。

より効果的なアプローチは、パスワードを一度だけ入力するようにユーザーに依頼し、フォームにチェックボックスを含めることです。チェックボックスは、フィールドからマスクを削除し、ユーザーが入力したパスワードの正確さを確認できるようにします。このアプローチは、フィールドの数を減らし、ユーザーを不必要な作業から救います。

パスワードを非表示/開くJQueryプラグイン

郵便番号に基づくオートコンプリート都市フィールド

ユーザーに自宅の住所を入力するように依頼する場合は、入力した郵便番号から都市と地域を自動補完する可能性を考慮してください。この結果、ユーザーは自分の都市をフィールドに入力したり、長いドロップダウンリストから選択したりするために時間と労力を費やす必要がなくなるため、フォームはより効果的になります。

AJAXを使用して郵便番号から都市と地域のデータを取得する

。

「国」フィールドの自動置換

通常、ユーザーは長いドロップダウンリストから居住国を選択するよう求められます。ただし、フィールドに入力された文字に応じて国名の自動置換を使用する方が合理的です。ユーザーは、名前の数文字を入力して国を選択できます。

jQueryでのAJAXオートコンプリート

。

ユーザーが配送先住所から請求先住所をコピーできるようにする

米国およびその他の国では、ネットワーク上で何かを購入するユーザーは、商品の配送先住所だけでなく、いわゆる支払い先住所も指定する必要があります（小切手はそこに配送できます）。ほとんどの場合、これらのアドレスは同じなので、ユーザーがアドレスを別のアドレスにコピーすることを許可しないのはなぜですか？フォームに「配送先住所が支払い先住所と一致する」リンクを含めることができます-クリックすると、配送先住所の対応するフィールドのデータが支払い先住所のフィールドにコピーされます。

。

デフォルトでは「ニュースレターを購読する」チェックボックスをオンにせず、最初にレターのプレビューを表示することをお勧めします

ほとんどのWebサイトは、デフォルトで新規登録の訪問者にサインアップし、企業ニュースレターの購読者を増やしたいと考えています。はい、この手法は時々機能しますが、ユーザーが単に無効にするオプションに気付かないか、このオプションの目的を理解しなかった場合、サブスクリプションは無意味です。ユーザーがニュースレターの受信に興味がない場合は、とにかく購読を中止します。長期的には、この方法は役に立ちません。そして、メーリングリストの存在を疑わないユーザーに手紙を送ることさえ、あなたから彼らを簡単に押しのけることができます。

より効果的なアプローチは、プレビューまたはメーリングリストからの抜粋を示すことです。この場合、ユーザーはサブスクライブしなければ失われるものを視覚化できます。そして、あなたはそれに間違いなく興味がある人だけがあなたのニュースレターを受け取ることを知って、平和に眠ります。

。

captchaを使用する代わりにJavaScriptでテキストフィールドを非表示にしてスパムと戦う

大量のスパムに苦しんでいる場合、キャプチャを使用する必要はまったくありません。従来の形式でcaptchaを使用する場合、ユーザーは画像から歪んだ文字をフィールドに入力するように求められます。残念ながら、キャプチャの存在は変換にマイナスの影響を与えます。これは、キャプチャがユーザーの追加の努力であるためです。

変換を失うことなくスパムを克服する簡単な方法は、クライアント側のJavaScriptによって作成された非表示の必須入力フィールドを使用することです。 Spambotsはクライアント側のJavaScriptオブジェクトと対話できません。ユーザーのみがこれを行うことができます。この方法は非常にシンプルで効果的であり、同時にユーザーを悩ませません。唯一の欠点は、場合によってはJSを使用すると問題が発生する可能性があることです。

Honeypot Captchaアプローチを使用することもできます-空白のままにする必要があるフォームにフィールドが作成され、CSSではユーザーからは非表示になります（ボットからは非表示になりません）。また、データを送信するときにフィールドにテキストが表示される場合、フォームに入力するこのケースを無視できます。あなたがスパムボットになる前に。

Webサイトのログインフォームを簡素化する

あらゆる形式の承認のタスクは、ユーザーを自分のアカウントに入れることです。このような単純なタスクにもかかわらず、いくつかの形式の承認は、他の承認よりも優れています。ユーザーがより簡単かつ迅速にアカウントにアクセスできるようにするための簡単な方法を次に示します。

。

ログインとしてメールアドレスを使用する機会を与えます

電子メールアドレスを記憶することは、ログイン（特定のサイト用に考案された）を記憶するよりもはるかに簡単です（常に使用しています）。ユーザーがユーザー名とメールの両方を使用してログインできるようにします。ユーザーがログインを忘れた場合、彼は常に自分の電子メールでログインできます。

。

ユーザーが同じページに留まるようにユーザーを承認する

サイトでの認証は重要な機能であり、ユーザーはサイトのどのページからでもログインできるようにしたいと思うでしょう。そのため、サイトに入った後、ユーザーが許可されたのと同じページに移動することを忘れないでください。これにより、プロセスが簡単になり、ユーザーがサイトで問題をすぐに解決できるようになります。

このようなプロセスを実装するには、ドロップダウンフォームとモーダルウィンドウの2つの方法があります。

ユーザーを現在のページから移動することなく、ドロップダウンフォームが開きます。ページ上の小さな領域のみを占めるため、この実施形態のフォームを迅速で無負荷のソリューションにすることができます。

また、モーダルウィンドウは、ユーザーを現在のページから移動させません。ページの中央まで拡大し、承認フォームに完全に集中します。このオプションを使用すると、フォームに追加情報を配置できます。

。

フォームの最初のフィールドにカーソルを自動的に配置します

ユーザーの前にログインフォームが表示されるとすぐに、サイトに入る準備が整います。最初の入力フィールドにカーソルを置くことにより、それらをより簡単にすることができます。これにより、ユーザーはフィールド上にマウスを置いてクリックする必要がなくなります。キーボードに手を触れて、すぐに必要なデータを入力できるようになります。オートフォーカスの場合、フィールドは明確に強調表示される必要があります-これにより、ユーザーは既に入力を開始できることを理解できます。

。

ユーザーにパスワードを表示させる

このオプションは、登録と同じように認証に役立ちます。ユーザーがフィールドに文字が表示されない場合は、簡単に封印できます。その後、正しいパスワードを入力するまでパスワードを再入力する必要があります。

問題は、ユーザーがどの文字を誤って入力したかわからず、最初にエラーを修正できないことです。それはより多くの努力を必要とし、ユーザーを遅くします。フォームに「パスワードを表示」チェックボックスを含めることで、この問題を取り除くことができます。

パスワードの非表示を停止する

。

質問アイコンをパスワード回復リンクとして使用します

ユーザーは、フォーム上のパスワード回復リンクを見つけるのに問題はないはずです。「パスワードを忘れましたか？」というリンクを使用する代わりに、リンクを疑問符の形の小さなアイコンにします。これは他のリンクで失われず、多くのスペースを占有しません。疑問符は誰もが理解できるヘルプアイコンであるため、ユーザーは忘れたパスワードを回復するためにどこに行く必要があるかを理解できます。

。

「確認」ボタンを入力フィールドと同じ幅にします

確認ボタンは、アクションを可能にするためだけに作成されたのではなく、ユーザーが現在実行するアクションも表示します。ボタンのサイズが小さいことは、操作の弱いヒントを意味します。そのため、ユーザーはこのアクションの必要性を疑う可能性があります。

広いボタンは自信を与え、見逃しにくいです。ボタンの名前も表示されるようになるため、ユーザーは実行しようとしているアクションをよりよく理解できます。

。

ユーザーがFacebook、TwitterまたはOpenIDでログインできるようにする

現在、ほとんどすべてがFacebookおよびTwitterアカウントを持っているか、OpenIDを使用しています。ユーザーが助けを借りてログインすることを許可すると、承認フォームに煩わされることなく、ほぼ瞬時にサイトにアクセスできるようになります。また、訪問したサイトの多数のユーザー名とパスワードを保存する必要もなくなります。

もちろん、さらに進んでFacebook Connectを使用し、必要なデータを自動的に収集して保存することもできます。たとえば、FacebookのアプリケーションであるFriend.lyサービスでは、ユーザーは登録プロセス中に「登録」ボタンをクリックするだけで、すべてのユーザー情報が自動的に収集されます。このアプローチはすぐにプライバシーに関する多くの懸念を引き起こすので、おそらくそれを使用する価値はありません。

おわりに

フォームへの記入はまだ楽しいので、登録フォームと承認フォームはユーザーの生活を複雑にすることはありません。私たちのヒントは、フォームをより簡単かつ効率的にするのに役立ち、ユーザーのサイトのコンテンツへの経路が短くなり、より楽しくなります。

。

翻訳者からのPS： この記事を楽しんでください。 翻訳の誤りをご指摘いただければ、喜んで訂正いたします。 午後に私に書いてください:)

登録とサイトへのアクセスを簡素化します

Anthony T.の 「 サインアップとログインを簡素化する革新的な技術 」というタイトルの記事の翻訳を紹介します。 Smashing Magazineの発行の承認を得て、Habrahabrユーザー専用にUXDepotに転送されました 。