タグ

formとusabilityに関するakira_maruのブックマーク (7)

  • [JavaScript] フリガナを自動挿入する | Library | Development Reference

    フォーム入力の際に、名前とセットでカナ入力項目が付いてくるケースは少なくない。 しかし、この入力が結構面倒くさいので、それを自動化するライブラリを作成した。 DEMO DOWNLOAD 同様の機能を持つライブラリは既にメジャーなものが出回っているが、それらはユーザの名前の入力に合わせて勝手に(自動で)カナ入力される場合が多い。自動で入力された方が確かに見映えはいいが、その場合には、ユーザの意思に関わらずカナが入力される点と、入力されたカナが間違っていた場合に、逆にユーザがそれを消す手間が発生する可能性があり、賛否両論ある所だと思う。 そこで、ライブラリでは入力形式を 自動/チェックボックスの選択式(デフォルトチェック有り・無し)/ボタン押下による挿入 の4パターンから選択して設定できるようにした。チェックボックスやボタンはjavascriptにより自動で挿入される。 使い方 ZIPファイ

  • 良いフォームの条件と、入力フォーム最適化(EFO)に関する 4つの基本+2つの本質 | 初代編集長ブログ―安田英久

    今日は、「良いフォームとはどんなものか」を考え、コンバージョン率をアップさせる入力フォーム最適化(EFO)の基を紹介します。問い合わせフォームや申し込みフォームなどを改善するヒントにしてください。 良いフォームとはどんなものかEFOを考える前に、まず「良いフォーム」というのは、どういうものかを考えてみましょう。企業側から見ると、良いフォームとは次のようなものではないでしょうか。 申し込み数(フォーム入力完了数)が多いターゲットに合った顧客層の申し込み数が多いターゲットでない顧客層の申し込み数が少ない問い合わせ(「どうすればいいんですか?」などのサポート的なもの)が少ないまぁ、フォームの話題なので上記の「数が多い」というのは「率が高い」ということなのですが(訪問者数を増やせば、数は増やせるので)、ここは、わかりやすさのために「数が多い」としています。 入力フォーム最適化(EFO)の4つの基

    良いフォームの条件と、入力フォーム最適化(EFO)に関する 4つの基本+2つの本質 | 初代編集長ブログ―安田英久
  • ここに書いたらダメ、ゼッタイ!入力フォームの注意書きを確実に見てもらう方法とは? | マミオン有限会社-パソコン・数学研修、法人研修

    シニア層のユーザーテストを観察していると、その多くが同じところで失敗しているのを目にします。 よく失敗するポイントの一つが、ユーザーが入力規則を把握していないことによるフォームへの入力エラーです。「メールアドレスは半角で」「パスワードは〇文字以内で」「住所はマンション名まで含めて」…などなど。 インターネットの利用に慣れた人の場合、そうした注意書きに気付かずに入力してエラーが出てしまっても、そのエラー説明を確認してすぐに修正することができます。一方でシニア層ユーザーの場合は、こうしたエラーに対してなかなか自分ひとりで対応することが難しく、入力エラーを起こさないための準備の重要性がより高くなってきます。 こうした注意事項の伝達不備は、なぜ起こってしまうのでしょうか?今回は、ユーザーがどこを見ているかを分析できるアイトラッキング(アイカメラ)を使って確認してみます。 入力フォームの「右側」は、

  • プレースホルダーについて考える | Accessible & Usable

    公開日 : 2013年3月9日 (2014年5月26日 更新) カテゴリー : アクセシビリティ / ユーザビリティ プレースホルダー (placeholder) とは、入力フォームの記入欄 (テキストボックスやテキストエリア) の中に記述される、入力に関するヒントを示したテキストです。 HTML5 以降は、<input> 要素と <textarea> 要素で placeholder 属性が使えるようになり、HTML の標準仕様として、あらかじめ入力フォーム (記入欄) にプレースホルダーを書き入れておくことができます。 プレースホルダーの例 (Facebook)。検索キーワード入力欄に「友達、スポット等を検索」、投稿入力欄 (近況アップデート) に「今どんな気持ち?」という記述がある。 プレースホルダーをラベル代わりに使わない ところでこのプレースホルダー、記入欄のラベル (項目名) を

    プレースホルダーについて考える | Accessible & Usable
  • フォームは送信してもらえばこそ

    実践アクセシブルHTML 第三回 こんなフォームはイヤだ! フォームとは、HTMLのFORM要素などによってマークアップされているコントロール群の塊のことです。さまざまなウェブサイトにおいて、主に問い合わせのページであるとか、サイト内検索のためのキーワード入力用にだとかで利用されています。コミュニティ機能を備えているようなサイトであれば、掲示板システムのようなところでも使われていることでしょう。フォームのないウェブサイトのほうが珍しいのではないでしょうか。それくらい、制作側にもユーザーにも身近なものです。 INPUT要素やTEXTAREA要素などといった、フォームのコントロール各要素の機能はブラウザによって提供されているため、どのようなブラウザであってもその操作感に大きな違いが出ません。しかしコントロールごとの操作に違いが出ないといっても、フォーム全体としてはやはり使いやすいフォームと使い

  • ふつうのformをつかいたい - はまちや2 - ニコニコ超会議2012

    こんにちはこんにちは!! はまちや2 (@Hamachiya2) ブロガー、クラッカー。特技は洗濯、趣味は破壊、苦手なことはプログラミング。 WEB+DB PRESS のお便りコーナー担当。 「はまちちゃん」とかで適当にググってください。 無料で プレミアム機能を 使う方法 見つける時間がありませんでした。 何話そう? プログラムは苦手だし… セキュリティとか興味ないし… そんなわけで普通のことを話します。 日のテーマ: 『ふつうのformを使いたい』 <form> 電話番号はハイフン抜きの半角で…(はいはい) フリガナはカナで… (カナで名前を学習してしまうのが嫌だけど…) 郵便番号は前と後ろに分けて… (めんどくさいなぁ…) 住所は全角で… (あーはいはい…) … (できた!) (これで送信、と…) ※エラー:住所を正しく入力してください (え、なんで!?) ※住所は全角で入力してく

  • HTML の label タグに必ずつけたい CSS

    CSS に1行加えるだけで ラベルまわりがとってもわかりやすくなる。 「そんなん当たり前」という人もいるかもしれないけど Gmail やら Twitter やらのログイン画面を見たら 実装されてなかったので一応。 label というのはフォームの部品とセットで使うやつで、 ある部品とその項目名を結びつけるやつね。 ↓このようなチェックボックスがあるとき 次回から自動的にログイン ↓こんなふうにラベルを指定しておくと <input type="checkbox" id="rememberme"> <label for="rememberme">次回から自動的にログイン</label> テキスト部分とチェックボックスが関連づけられるので テキストをクリックした時も チェックボックスにチェックが入るようになりますね。 ここをクリックでチェック入れられるよ 小さいチェックボックスにマウスカーソルを

    HTML の label タグに必ずつけたい CSS
  • 1