ログイン/登録フォームのアイデアと美しい例

現代のWeb全体を通して、ユーザー入力のための場所が増えています。これらには、ショッピングカート、インタラクティブWebゲーム、そして間違いなくWebサイト登録フォームが含まれます。デザイナーがページデザインに集中するだけでなく、フォームの美学も同様に重要な役割を果たすように思われる.

あなたのインターネットの歴史の過程であなたが記入したかもしれないフォームの数を考えてみてください。フォーラム、掲示板、ブログ、その他たくさんのものからこれらの例は無数にあります。この記事では、ページ内フォームを設計するためのいくつかの素晴らしいトリックを見ていきます。.

客観的な観点からここでいくつかの項目を検討するのが賢明です。多くのログインおよび登録フォームは1つのタイプのサイトでうまく機能しますが、最終的な判断が何を意味しているのかについての意見はありません。 “ベスト” 溶液。デザインの直感を使って、あなたが目指しているフォームのちょっとした部分を適用しましょう。.

複数の入力を検討する

まず始めに、Foundation Six Web Designからの小さな連絡フォームを考えてみましょう。はい、これはログインフォームではありませんので、少し話題を外すかもしれません。しかし、彼らのページデザインは非常に印象的であり、それはあなたが少し創造性が達成できることをあなたに示しています.

各入力フィールドには、名前、電子メールなど、個人の連絡先情報を入力するためのスペースがあります。スタイルは通常のものをはるかに超えており、手書きの書道でユーザー入力を提供します。このタイプのフォーマットは、ユーザーを驚異の状態に保ち、はるかに高い設計標準の目標を達成します。.

あなたはあなたのすべてのログインページに似たこれらのようなスタイルを実装したいでしょう。私は確かに同じスタイルの入力テキストとオプション/選択メニューに固執することをお勧めしません。創造性のためにあなたの頭脳をジョギングするとき、各要素がどのようにレイアウトされるべきであるかについて考えてください：たくさんの層の間のスペース、大きな読みやすいテキスト、そして直接のEメールラインへのサイドバーリンクさえ.

jQueryのログインボックス

これは過去に数え切れないほどのWebサイトで使用されてきたし、きっと新しい時代のデザインにも見られるでしょう。標準的な方法でログインプロセスの各ステップでユーザーを新しいページに移動させるような時代は過ぎ去りました。通常これはあなたのデータを入力するためのページとログイン情報を処理するための新しいページを意味します。.

Pixel2Lifeは、データ入力の新しい分野への素晴らしい洞察を提供します。彼らのホームページから、あなたはログインリンクをクリックして、動的なjQueryを動力とするログインボックスを立ち上げることができます。このフォームには、ログイン情報の資格情報をチェックし、処理が完了したらアクセスを許可または拒否する外部PHPスクリプトへのAjax呼び出しが含まれています。.

さらに一歩先を行くと、ログインボックスのすぐ下に登録リンクがあります。これにより、Webサイトにサインアップしようとしているが登録リンクを見つけることができないユーザーにとって、はるかにスムーズなユーザーエクスペリエンスが提供されます。.

ユーザーがアカウントを持っていないが、アカウントを作成したい場合は、バグのあるページの不具合なしに登録ページにアクセスできます。ログインボックスはまだあなた自身のアカウントにアクセスするための実行可能なオプションですが、このオプションを許可することでより多くのリターンとより多くの新規登録者を得ることができます。.

簡単な1ページ登録

私たちが見ているもう一つの変化するパラダイムは、新規アカウント登録のためのそのような詳細の欠如です。ユーザーがデータ記入に熱心になっていると仮定しても、これは必ずしも悪い統計ではありません。数字は実際にはより短い登録ページを持つウェブサイトをより多く示唆しています重い毎日の新規ユーザーのリスト.

Sikboxは、訪問者がWebサイト用に独自の検索ボックスを作成するための軽量のオプションを提供します。唯一の要件は、検索結果を提供するための独自のカスタムドメインです。入力フィールドは大きく、テキストは読みやすくとてもあります。 広告は絶対にありません 検索フォームを作成する作業からユーザーをそらすため!

フォーラムやブログのアーカイブのためにあなた自身の登録ページを作成するとき、今これは構築するための最良の形ではありません。これらは、標準的な定義によれば、パスワードとともに少なくとも何らかの電子メールアドレス/ユーザー名の組み合わせを必要とします。一部の新世代Webアプリケーションでは、登録プロセスを迅速化するためだけに、ユーザー用の動的パスワードが生成されます。.

もちろん、ここでのトレードオフは、多くの人が慣れている自分のパスワードを生成するためのユーザー側の制御を欠いています。.

派手な効果を構築する

私が今まで経験した中で最大の登録経験の1つは、私の最初のTumblrアカウントを作成することでした。彼らのサイトのホームページには、ログインとサインアップの両方のフォームが、CSS3の新しいハイライト/フェード効果とともに、真下に配置されています。.

この体系的なアプローチは、Pixel2LifeのjQueryログイン領域に関しても同様です。しかし、Tumblrとの違いは、ブログがない人にはネットワークがコンテンツを提供できないことです（他のアカウントを閲覧することを除いて）。 tumblrからの本当の利点はあなた自身のブログを作成して他の人をフォローすることです - それゆえフロントページのあなたの主な目的はアカウントを作成するかログインすることです。.

このシステムにはいくつかのバグがあります。最も顕著なのは、これらの新しいCSSプロパティをサポートしていないIE6 / IE7内です。ホームページでは、フォームの入力値にラベル要素を追加するためのシステムも使用されています。 “デフォルト” 電子メール/パスワードボックスに使用される文字.