ユーザーが使いやすいフォームを設計するのに役立つチップス -Form design crib sheet
Free Download: Cheat Sheet For Designing Web Forms [ad#ad-2] チートシートはPDF, PSD, Omnigraffle形式で配付されており、内容を簡単に紹介します。 Simple form field フォームのラベルは入力フィールドの左側に配置し、すぐに理解できるようシンプルな文言にします。 Buttons ボタンはプライマリとサポートの2種類用意し、プライマリボタンはより目立つよう大きくて異なるデザインのものにします。 Optionals fields 任意入力の箇所でよく利用される「*」印は、全てのユーザーに理解されるサインではありません。可能であれば、はっきりと任意であることを明記します。 Support text 入力をサポートするテキストは、ユーザー目線で分かりやすい文章にします。 Help text アドバイスするテ
ログインフォームに大切な7つの要素と重要な1つの機能
ログインフォームを実装する際に、大切な7つの要素と重要な1つの機能を紹介します。 元記事では下記のCSS3で実装されたフォームもダウンロードできます。 フォームのタイトル このフォームが何についてのものであるか手短に説明されたタイトル。特に、ウェブサイトの名称を記すことは非常に重要です。 非メンバー用のリンク 非メンバーが偶然、このページを見つけてしまうことがあるかもしれません。そして、メンバーを増やすチャンスもあるので、登録ページへの誘導も行っておきます。 ラベルとフィールド ログインフォームは通常、2つのフィールドで構成されていますが、ラベルは読みやすいようにします。 パスワードを忘れた場合 これは同じく、非常に重要なリンクです。多くのユーザーは多数のアカウントとパスワードをもっているものです。そして、しばしばそれはあなたのサイトでどれなのか忘れてしまうことがあります。 また、配置する
既存のフォームをユーザーに使いやすくする10のポイント
10 Tips for Optimizing Web Form Submission Usability [ad#ad-2] 下記は各ポイントを意訳したものです。 1. 必須入力欄は強調する 2. エラーメッセージは分かりやすく 3. クライアントサイドのバリデーション 4. 入力している欄を明示 5. 進捗を明示 6. データの保存やキャッシュ 7. 送信ボタンの文言 8. キャンセルボタン 9. 入力例の記載 10. 垂直に配置 1. 必須入力欄は強調する ユーザーはフォームに入力した後に入力ミス・エラー表示があると、不安を感じたりイライラを募らせるでしょう。まずは、入力欄に「必須」「任意」などを記載して、入力欄が必須なのか任意なのかを明示的にユーザーに伝えるのは安全な方法となります。 2. エラーメッセージは分かりやすく フォームのエラーメッセージは、「あなたが下に必要とさせるフィー
[JS]フォームに入力したパスワードを可視化するスクリプト -Show Password
jQuery Show Password Plugin デモページ 実装は既存のフォームにも簡単に組み込めます。 HTML デモのHTMLはシンプルです。 可視化は、パスワードのclass名を参照しています。 <textarea name="code" class="html" cols="60" rows="5"> <form action="#"> <ol class="forms"> <li> <label for="username">Username</label> <input type="text" id="username" /> </li> <li> <label for="password">Password</label> <input type="password" id="password" class="password" /> </li> <li class=
あなたのWebを入力しやすくするjQueryプラグイン10選
あなたのWebを入力しやすくするjQueryプラグイン10選：CSSの書き方も分かるjQueryプラグイン実践活用法（終）（1/5 ページ） jQueryと、そのプラグインの使い方を、UI効果（エフェクト）のテーマごとに紹介する連載。jQuery/JavaScript/HTMLコードだけではなく、CSSの書き方も解説することで、より実践的にjQueryプラグインを使うための参考ドキュメントになることを目指しています。 前回の「画像や動画を綺麗に回転/拡大するjQueryプラグイン」では、イメージを回転させたりズームインする「jCarousel」「Zoombox」プラグインの使い方を解説しました。今回は、フォームを使いやすくするための各種プラグインを、以下のようにチェックボックス／ラジオボタン、ドロップダウンリスト、テキストボックス／テキストエリア、フォームのカテゴリ別に分類して紹介します。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://www.designwalker.com/2010/06/jquery-forms.html
