HTML の label タグに必ずつけたい CSS
CSS に1行加えるだけで ラベルまわりがとってもわかりやすくなる。 「そんなん当たり前」という人もいるかもしれないけど Gmail やら Twitter やらのログイン画面を見たら 実装されてなかったので一応。 label というのはフォームの部品とセットで使うやつで、 ある部品とその項目名を結びつけるやつね。 ↓このようなチェックボックスがあるとき 次回から自動的にログイン ↓こんなふうにラベルを指定しておくと <input type="checkbox" id="rememberme"> <label for="rememberme">次回から自動的にログイン</label> テキスト部分とチェックボックスが関連づけられるので テキストをクリックした時も チェックボックスにチェックが入るようになりますね。 ここをクリックでチェック入れられるよ 小さいチェックボックスにマウスカーソルを
Interface Design Inspiration - 36 Clean Comment Form designs
The Comment form, is an important part of interface design that usually appears at the end of an article. Comment Form should have appealing typography, ordered element placement (name, e-mail, etc.), colors which induces the reader to comment. Here are some samples of clean comment forms collected from various websites and blogs. Note: Dzineblog presents you “Interface Design Inspirations“, a se
Googleスプレッドシートをアンケートや応募で便利に使う方法 - ネタフル
Googleスプレッドシートのフォーム機能をご存知でしょうか？ アンケートやプレゼント応募用のフォームを作成すると、入力内容を自動的に集計できるのです。これがとっても便利！ ぼくは主に、 ・ネタフルのプレゼント応募 ・ネタフルのアンケート ・イベントの申し込み などに利用しています。 手軽に作成できて集計も自動で、シートを共有したりもできるので、かなり便利に利用しております。 簡単に使い方を説明しましょう。 Googleドキュメントから「新規作成」で新しい「スプレッドシート」を作ります。 メニュー「フォーム」から「フォームの作成」を選択します。 続いて、質問項目を追加します。 「無題フォーム」はフォームのタイトルです。必要に応じて説明文を入力します。 それぞれの項目は鉛筆アイコンをクリックして編集します。 鉛筆アイコンは項目の右上にあります。 質問の形式は、 ・テキスト ・段落テキスト ・
あと１％離脱を減らすフォームのテクニック (ユーザビリティ実践メモ)
資料請求や申し込みフォームにおけるユーザの離脱を防ぐ方法はこれまでにもご紹介してきましたが、今回は「さらに一歩」改善するためのテクニックをご紹介いたします。 例えばECサイトのフォームでは支払い方法や配送方法など、ユーザに様々なオプションを選ばせることがよくあります。選択肢が多いことは利便性にも繋がりますが、一方でそれが離脱の原因になっている可能性もあります。 ユーザはフォームが縦に長かったり入力欄が多く見えると、「入力が面倒そう」と思い離脱の可能性が増えます。 以下は改善例です。支払い方法を選択するラジオボタンをクリックしてみてください。 選択したオプションに関連した情報だけを出す、言い換えると「要らないものは隠してしまう」のです。 クレジット決済をしたいと思っているユーザには、銀行振り込みや代金引換の注意書きは不要ですから、余計な情報を隠すことでフォームが簡単に見え、離脱を減らすことが
使いやすさ日記: 444. カレンダーから日付を選ぶ入力方式
2008年7月14日 先日、近い週末に旅行をしようと思い、いくつかの宿泊施設予約サイトで宿を検索していました。そのとき閲覧したほとんどのサイトでは、宿泊日をテキストボックスかプルダウンメニューで入力するようになっていましたが、『宿・ホテル予約サイト じゃらん（http://www.jalan.net/）』では下の画面のように工夫していました。 一見普通のテキストボックスに見えますが、ボックスをクリックするとカレンダーが表示されます。そしてカレンダーから日付を選択すると、日付が自動的に入力されます。 私は宿泊日を土曜日にするということしか決めていなかったので、テキストボックスやプルダウンメニューで検索する場合、毎週土曜日の日付を確認してから入力する必要がありました。しかしこのサイトの入力方法ではカレンダーから選択できるため、日付は確認せずに土曜日の列から選んで入力することができました。 宿に
携帯サイトのフォーム設計のコツ (ユーザビリティ実践メモ)
PC向けサイトの資料請求ページなどでは、入力フォームに近接して入力例を置くことで入力形式の違いによるエラーを防ぐことができます。 しかし携帯サイトの場合、入力フォームの周りに入力例を表示したとしても、パソコンとは違い実際にユーザが入力する際には入力画面に切り替わってしまうため、ユーザが例を見ながら入力することができません。 入力フォームについてもう1点注意することがあります。 例えば上記にて、年月日の入力フォームを縦に並べてしまうと、スクロールのしかたによっては携帯サイトの画面に月日の入力フォームが表示領域外に隠れて見えなくなるケースが発生し、ユーザが誤って年のフォームに月日も同時に入力してしまう可能性があります。 入力フォームは横並びにする、入力フォームに文字数制限を設けることが有効です。 同じ役割を持つ画面でも、PCと携帯という物理的な環境やユーザの使用環境の違いを考慮すると違った設計
フォームのフリガナを自動入力させるAutoRuby.js | ホームページ制作・運営のヒント
&lt;script Language=”javascript” src=”http://ad.jp.ap.valuecommerce.com/servlet/jsbanner?sid=2456113&amp;pid=877160106″&gt;&lt;/script&gt;&lt;noscript&gt;&lt;a href=”http://ck.jp.ap.valuecommerce.com/servlet/referral?sid=2456113&amp;pid=877160106″ target=”_blank” &gt;&lt;img src=”http://ad.jp.ap.valuecommerce.com/servlet/gifbanner?sid=2456113&amp;pid
すぐ、その場で修正できる確認画面 (ユーザビリティ実践メモ)
ECサイトの購入フォームや、会員サービスの入会申し込みフォームでは、ユーザが名前や住所など多くの項目を入力しなければなりません。
jsmap - JavaScriptによる都道府県入力補助
Q - なぜ、全国地図にしないのですか? 4つほど理由があります。 ポップアップが場所をとりすぎるから 現在、地図部分は185x120pxにおさめていますが、標準的なモニタ解像度ではこの辺が限界です。 キーボード操作時の押下回数を減らすため jsmapがフォーカスするのはSugarCRMなどのWEBアプリです。使い切りのWEBフォームと違い、慣れによるスピードアップが望めるUIである必要があります。 多言語対応のため 日本は47都道府県なので、かろうじて可能だと思う方もいるかもしれませんが、これがイギリス(現在製作中)とかでは100を超えます。 認知的限界のため これも重要。ぱっと見て探せる数というのは、15や20がせいぜいです。 ただ、上記の話とは別に、地方選択用の全国図はあってもいいと考えていますので、それは将来のバージョンで。 Q - 地図はもっと詳細化/単純化しないのですか? 詳細
第11回 PCサイトとこんなに違う！携帯サイトのフォーム設計ポイントとは | ユーザー視点のウェブデザインガイド
その半面、携帯サイトの設計については、PCサイトとは異なるユーザー特性があるにもかかわらずノウハウは少なく、中規模以上のサイトであっても「とりあえず作っただけ」のサイトや、やみくもに見た目だけを新しく装ったサイトが多いのが現状である。 今回は、携帯サイトの設計、その中でも特にビジネス成果に直結するフォームについてピックアップし、携帯ユーザー特有の行動に対していかに対応すべきかを考えてみたいと思う。 さて、複数のブラウザを立ち上げて、画面を切り替えながら操作が可能なPC環境と違い、モバイル端末では一度サイトから離れると、戻ってくるのが非常に大変である。そのため、携帯サイトのフォーム登録はPC以上に「一発勝負」であることを強く意識する必要があるだろう。 まず、ユーザーの入力負荷を減らし、自動入力が可能な部分は可能な限り実装するなどの配慮を欠かさないようにする必要がある。さらに、「携帯特有の機能
[一般] フォームの記入欄を小分けにしてはいけない - ちゃんとWeb by H2O Space.
お問い合わせフォームなどを作る時、フォームの記入項目を次のように小分けにすることがよくあります。 例えば郵便番号でも、最初の3桁と次の4桁を分けて記入するようにしたり、メールアドレスも「＠」の前と後ろで分けたりといった具合。 このようにすると、記入間違いが減り、また記入チェックも簡単になるため制作者側にとってはメリットが大きいのです。 しかし、利用者にとっては非常に不便なことがあります。 例えば、最近のWebブラウザには、あらかじめ各情報などを登録しておけば、自動的にフォームに記入するような機能が搭載されていたりします。この機能が正常に利用できなくなります。 また、操作に不慣れなユーザーはキーボードを見ながら内容を打ち込むので、記入欄が分かれていることを知らずに全部打ち込んでしまいます。 その後で画面を見ると、実は分けて記入しなければならないことが分かり、泣く泣くせっかく記入した部分
ブログが続かないわけ | 初心者プログラマーが簡単なフォームを作るときにやりがちな6つのミス
お問い合わせフォーム、登録フォーム、キャンペーンの申込フォーム。 Webにはいろいろなフォームがある。 Webプログラマーであれば誰もが一度は作ったことがあると思う。 新人プログラマーの初めての実務がフォームであることも多いだろう。 新人が作っているというのにもかかわらず、技術的にも面白い部分がないせいか、正しい知識のある人がレビューすることが少ないと思われる。 単純さゆえにテストが不足しているということもあるかもしれない。 上記の理由は憶測にすぎないが、杜撰なフォームがたくさん出回っているのは事実だ。 もう、CAPTCHAの話とか以前の問題だ。 よく見かける悪い例を簡単にあげておく。新人が初めての実務に当たるときにこれを気にしてくれれば、世の中のフォームがだいぶ良くなると思う。 1. クライアントサイド(JavaScript)でのチェックのみ。 2. 選択肢式の入力欄に対するチェックの漏
申し込みフォームを使いやすくして途中であきらめる人を減らす具体的な方法論【後編】 | カスタマーエクスペリエンスで道は開ける～フォレスター・リサーチのWebサイト方法論
[コラム]カスタマーエクスペリエンスで 道は開ける ～フォレスター・リサーチのWebサイト方法論 by ジョナサン・ブラウン フォレスター・リサーチのシニア・アナリストであるジョナサン・ブラウン氏によるウェブコラム。 主にカスタマーエクスペリエンスとマーケティングの側面から企業のビジネスをサポートしているジョナサン氏が、企業サイトにおけるユーザー志向の考え方や方法論をさまざまな切り口で解説します。 前回のコラムでは、サイトの目的にかかわらず必要になることが多い、企業サイトの申し込みフォームについて、フォレスターが調査した「なぜ途中で申し込みをあきらめてしまうのか」の概要と、申し込みフォームが使いづらい具体的な原因の1つ「フォームのラベルやボタンの位置やデザイン」とその解決方法を解説しました。 今回は、その続編として、申し込みフォームをより使いやすくするために注意するべき具体的なチェック点や
変形文字「CAPTCHA」はもう無意味？
Webサービスの認証などに利用される変形文字のCAPTCHAはユーザーの妨げになるだけで、不正アカウント取得を防ぐ役には立たなくなったのか。 Webサービスでアカウントの不正取得を防ぐために使われている変形文字の「CAPTCHA」は、もう役に立たなくなっている――。人気WebメールのCAPTCHAを破るボットの相次ぐ登場を受け、セキュリティ研究者がこう指摘した。 セキュリティ企業のWebsenseは先に、米Microsoftの無料Webメール「Windows Live Mail」のCAPTCHAを破るボットが出現したと報告。続いてGoogleのGmailのCAPTCHAも破られたと伝えている。 IBM傘下のセキュリティ企業Internet Security Systems（ISS）のガンター・オルマン氏は2月25日のブログでこうした現状について紹介。CAPTCHAはかつてはいいアイデアだっ
検索フォームや見出しなどエレメントのデザインを集めたサイト -Elements of Design | コリス
Elements of Designは、ブログなどのウェブサイトでよく使うエレメントのデザインを集めたサイトです。
個人プロフィールからの引用を考慮した携帯サイトフォーム設計 (ユーザビリティ実践メモ)
PCをほぼ/全く利用しない「インターネット＝携帯電話」ユーザには、フォームなどでメールアドレスを入力する際に、個人プロフィールから引用する傾向があります。 機種によってこの機能の名称や使用方法は異なりますが、筆者の携帯では下記の操作でプロフィールを引用することが可能です。 プロフィールの中でもメールアドレスは、文字数が多く、英数字が混在するため、直接入力する場合、煩わしい操作を要します。 そのため、携帯の操作に慣れているユーザの多くが上記の機能を使用してメールアドレスを入力しているのです。 この行動を想定したうえでサイトを制作しなければ、ユーザにストレスを与えてしまう可能性があります。 例えば、あるメールアドレス入力フォームでは、下図のように「＠」より前をフリーワードで入力し、「＠」より後ろをプルダウンメニューで選択する仕様にしていました。 一見、親切そうに見えるフォームですが、プロフィー
携帯サイトのフリーワード検索ボックス配置のコツ (ユーザビリティ実践メモ)
「インターネット＝携帯電話」ユーザ（PCをほぼ/全く利用しないユーザ）の特徴として、フリーワード検索を好んで利用する傾向があります。 しかし、サイト内のフリーワード検索を利用した場合、ユーザは期待するページにたどり着けない可能性があります。 例えば、ある求人携帯サイトでのユーザビリティテスト（ユーザ行動観察調査）では、次のようなことが起こりました。 高校生のユーザが「高校生歓迎」のアルバイトを探そうと思い、フリーワード検索ボックスに「高校生」と入力して検索を行いました。 ところが検索結果では、「高校生歓迎」の案件以外に同じ「高校生」というキーワードを含む「高校生不可」の案件も表示されました。 その結果、ユーザは自分にマッチするアルバイトが少ないと感じて離脱してしまったのです。 実はそのサイトは、高校生歓迎の案件に誘導するリンクを用意していたのですが、フリーワード検索ボックスより下に配置して
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
IDEA * IDEA
IDEA * IDEA
株式会社ニーズウェル お問い合せフォーム｜入力