デザインに少し手を加え、フォームを改善する実践的なUIのテクニックのまとめ
フォームを改善するUIデザインのテクニックを紹介します。 フォームのデザインに少し手を加えるだけで、ユーザーにとって使いやすい、コンバージョンを高めるための実践的なテクニックが満載です。 15 UI Tips for Better Forms by Jim Raptis 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 01. ラベルを常に記述する 02. Zパターンを避ける 03. ラベルを入力欄の上に配置する 04. 右揃えのラベルを使用する 05. 関連する入力欄をグループ化する 06. ユーザーフローを尊重する 07. スペースを与える 08. ラベルの繰り返しを避ける 09. エラーメッセージは分かりやすく 10. 必要に応じてドロップダウンを使用する 11. プレースホルダーを活用する 12. ボタンは1つに
フォームをデザインするときのポイント
前提 自分が嫌だと思う項目を作らない。 曖昧を許容できるようにする。 なぜその項目が必要なのかを説明する、もしくは予想できるようにする。 倫理的に、そして法的に問題ないものか確認する。 HTMLの仕様とブラウザの挙動を活用する。 システムの都合が優先される場合があるが、なるべくそれに引っ張られないように工夫したい。 分割しない 姓名、郵便番号、電話番号、年月日、時分など、入力フィールドが分かれていることがあるが、なるべくこれを避ける。フォーカスの移動が、面倒だからだ。なるべくユーザーの手間を減らしたい。 フォーム送信後のデータベースの都合や、事務処理、または運用にて必要不可欠である場合を除いて、分割しないようにしよう。 年月日や時分などは <input type="date"> <input type="time"> <input type="datetime-local"> のように標準
How to Write Good Error Messages
Mistakes are unavoidable in our lives. When users are working on a product, they may likely be stuck somewhere in response to their actions. Such kind of situations can be frustrating for users if not handled appropriately within the product. It depends on the experience the product is providing to its users. “A product should be usable enough to handle the user’s erroneous actions gracefully.” Go
ページ遷移数は少ないほうがいい？ユーザー調査からわかったCVRの改善事例
この画面遷移のUX（ユーザーエクスペリエンス）を改善して、離脱率を下げることはできないでしょうか？ ユーザーが1ページで入力する情報量を減らして、8画面の遷移をたどるようにしました。 従来型の「5画面」のタイプとA/Bテストで比較したところ、離脱率が5〜6%改善したのです。 具体的には、お客様情報の入力画面を4つに分割しました。 1画面目では、名前と郵便番号のみ。 入力してもらいやすい項目を最初に並べ、次のページに進んでもらうたびに「Yes」を取り続けていくことを意図しました。 ・2画面目：住所（郵便番号自動入力で表示されなかった残りの番地や建物名など） ・3画面目：電話番号、性別、誕生年 ・4画面目：メールアドレス、パスワード この「8画面遷移」タイプ。 従来の「5画面遷移」タイプとA/Bテストで比較しましたが、数社ともいずれも離脱率に改善効果が見られました。 チャットボットの効果的な活
モバイルフォームの確定ボタンはどこに設置すべきか？
モバイルフォームのボタンをどこに置くかは、ユーザーのタスクの完了と効率に影響します。もしボタンがユーザーが予期するところに置かれていなければ、ユーザーはタスクを放棄し、フォームから離れてしまうかもしれません。 ボタンを探すのに余計に数秒かかっただけでも、ユーザーはイライラし、戻るボタンを押すことがあります。そのため、フォームの入力を完了したら、ボタンはユーザーの目の前に表れるべきです。 多くのモバイルサイトは、この点を間違っており、フォームボタンをアクションバー（つまりナビゲーションバー）に置いています。調査によると、ユーザーはしばしばアクションバーに置いてある送信ボタンを見逃してしまいます（出典）。また、アクションバーにある保存ボタンも見逃し、設定を保存しないままフォームを離れてしまいます。 予想外の送信ボタン ユーザーがアクションバーにある送信ボタンを見逃してしまうのは、フォームの入力
小規模なWebサイトにぴったり。PHP製のメールフォーム·TransmitMail MOONGIFT
TransmitMailは日本製の汎用型メールフォールソフトウェアです。 Webサイトにメールフォームの設置というのはよくあることです。そんな時に使える日本語対応のメールフォームソフトウェアがTransmitMailです。 デモです。多数の入力項目、入力チェックに対応しています。 必須チェックのエラーです。画面上と項目の横と二つ表示されます。 メールアドレスフォーマットのチェックもできます。 半角英数などの文字種チェックもあります。 入力の後、確認画面が表示されます。 完了ページです。 確認メールも送信されて、入力内容の確認ができます。 TransmitMailはPHP5.2以上で動作します。また、マークアップエンジニアが開発したとのことで、Dreamweaverやマークアップエンジニアにとって優しい作りになっています。セッションによって重複送信を防ぐ仕組みがあります。静的サイトにメールフ
HTML5フォームのセレクタとCSSのエラー処理 | Web標準Blog | ミツエーリンクス
Firefox Hacksに、HTML5フォームに関する記事が掲載されています。新しいinputタイプや、フォームとコントロールの分離、値のvalidationについての紹介など、盛り沢山な内容になっています。 Firefox 4: HTML5 Forms さて、記事の中に「New CSS selectors」というセクションがあります。HTML5仕様では、いくつかの新しいフォーム関連セレクタ（擬似クラス）が定義されているのですが、記事では検証に関わる:requiredや:valid, :invalid、およびinput, textareaのplaceholder属性のスタイルを変更するセレクタを紹介しています。 HTML5仕様では、プレースホルダのスタイルを変更することに関しては何も言及がありません。そこで、WebKit, Geckoはそれぞれ固有拡張として::-webkit-input
入力フォームのユーザビリティ&アクセシビリティ
入力項目の説明 入力項目の説明は、フォームの前に書くべきです。フォームの後に解説があると、ユーザが音声ブラウザやコンパクトブラウザ等を利用していた場合、入力した後に説明に気づくことがあります。 悪い例× メールアドレス
デザイナー・コーダー必見！使えるform関連jQueryプラグインの数々 | バシャログ。
こんばんは、最近ホルモン焼きにハマっているishidaです。 WEBサイト制作時、formは必ずといってもいいぐらい存在します。 お問い合わせフォームや会員登録フォームなどがすぐに思いつきますよね。 デザインをがっつりフォーム部分で作り込んでも、CSSのみでは、 実現できなかったりすることもよくあります。 そんなクセのあるformを、よりリッチに！かつ操作性を向上！できるjQueryプラグインの数々をご紹介します。 デザイナーの方は、フォームのデザインの参考に。 コーダーの方は、ページ作成時間の短縮に手助けになればと思います。 jQuery plugin: Validation フォームの入力チェック（バリデーション）が簡単にできるプラグイン。 エラーメッセージはlocalizationディレクトリ内に18言語用意されています。 日本語用は別途作成し、使用することが可能です。 jQuery
Have a Field Day with HTML5 Forms
Forms are usually seen as that obnoxious thing we have to markup and style. I respectfully disagree: forms (on a par with tables) are the most exciting thing we have to work with. Here we’re going to take a look at how to style a beautiful HTML5 form using some advanced CSS and latest CSS3 techniques. I promise you will want to style your own forms after you’ve read this article. Here’s what we’ll
iPhone 3.1ソフトウェアで拡張されたフォーム « Study « Apple + iPod « Forest.Kの徒然日記
Home Apple + iPod Study iPhone 3.1ソフトウェアで拡張されたフォーム iPhone 3.1ソフトウェアで拡張されたフォーム December 06, 2009 10:47 forestk Comments(0) TrackBack(0) iPhone 3.1ソフトウェアで拡張されたフォーム #forestk Posted in Study Apple + iPod Tags : iPhone iPodtouch form input HTML5 iPhone 3.1ソフトウェアをインストールした iPhone 及び iPod touch では input 要素の type 属性が拡張されています。 type="number" こんな感じで数字を中心としたキーボードに切り替わります。 type="email" @ や . がデフォルトで表示されるようになり、メ
フォーカスを当てるとデフォルト文字列が消えるinput text (jQuery編) (2009-05-16)
いろんな文献を気軽に参照しにくい環境になり、いちいち検索しなくてもいいようにここにまとめておきたい感じになったのでしばらくそんな普段書かないようなPOSTばかりします。 まず、最近良くある、デフォルトの状態では入力例を表示して、フォーカスを合わせると消えるというインプットボックスの実装例について。このブログのコメント入力フォームがまさにそんな感じ。 <form action="hoge.php" method="get"> <p><input type="text" name="q" id="q" size="30" value="検索語を入力してください"><input type="submit" value="検索"></p> </form> $(function(){ $("#q").focus(function() { if($(this).val() == $(this).att
YahooUSのユーザ登録フォームにニヤリとさせられた話
Flickrで使うこともあり、わりと取得することが多いYahooUSのアカウントですが、そのアカウント登録画面がなかなかシャレていたのでご紹介。 そもそもこのフォームはJavaScriptによって入力間違いによるエラーを逐一返してくれる使用になっているのですが、誕生日の部分に未来の日付を入れたときのみ、返ってくる警告文が変わっていて 「Are you really from the future?」（本当に未来の人ですか？） と気の利いた文章になっています。すごく細かいことではありますが…。 ユーザにやり直しを迫る機能なのですから、離脱率を低下させるためにもこれくらいのジョークがあったほうが良いのかもしれませんね。他にもあるかもしれないので、色々入力して試してみてください。 →→ Yahoo US のアカウント登録画面
MovableType/MTOSに簡単設置で自由度の高いフォームを追加するプラグイン「A-Form」を開発中です｜アークウェブのブログ
2008年2月 4日 MovableType/MTOSに簡単設置で自由度の高いフォームを追加するプラグイン「A-Form」を開発中です こんにちは、ディレクターの八木です。 今、アークウェブでは、Movable TypeをCMSとしてより便利に使うための機能拡張プロジェクトとしてMovable Type（以下、MT）にフォームを追加できるプラグイン「A-Form」を開発しています。 ■どんなPlugIn？ ・MTの管理画面上からフォームをいくつでも作成できます。 ・フォーム作成ごとにMTのテンプレートを編集する必要がありません。 MTのカスタマイズの知識がない一般の投稿担当者でも"記事を投稿するようにフォームを設置できる"設計思想で作っています。 ・作成したフォームは、複数のウェブページ（独立ページ）やブログ記事の本文内に埋め込んで使います。 通常のお問い合わせフォームとしての利用だけでな
WCAN mini Markup vol.4 レポート – VERSIONFIVE
12/8(土)にWCAN mini Markupの第4回が開催されました。 WCAN miniとはWCANのミニ勉強会で、現在ActionScript、Markup、Designの3つの分科会があります。僕はこのmini Markupに幹事の1人として参加させていただいています。今回は学校が忙しかったのであまりタッチしていないのですが･･･。 ちなみにminiのレポートは今回が初ですが、今後はminiのレポートは書けそうなら書く、というラフなスタイルでいこうと思います。 [SESSION-1] ホームページリーダーに聞いてみよう [SESSION-2] 良いフォームを考えてみよう 懇親会 [SESSION-1] ホームページリーダーに聞いてみよう いつもは「勉強会」なのでディスカッション形式が多いのですが、ある方[1]が前に立って話を聞く、というスタイルでした。この形式は初めてかも。 とり
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
HTML5のさまざまなform要素があなたのブラウザでどのように見えるかのまとめ -Native form elements
5509.me
http://gerenuk.crazyphoto.org/2009/06/07/478/
リゾレーヌ サプリを口コミだけで判断してはダメ？バストアップ効果が口コミ通りなのか試してわかったことを包み隠さず公開します！
Spry Widget改造版 Sample