HTML の label タグに必ずつけたい CSS
CSS に1行加えるだけで ラベルまわりがとってもわかりやすくなる。 「そんなん当たり前」という人もいるかもしれないけど Gmail やら Twitter やらのログイン画面を見たら 実装されてなかったので一応。 label というのはフォームの部品とセットで使うやつで、 ある部品とその項目名を結びつけるやつね。 ↓このようなチェックボックスがあるとき 次回から自動的にログイン ↓こんなふうにラベルを指定しておくと <input type="checkbox" id="rememberme"> <label for="rememberme">次回から自動的にログイン</label> テキスト部分とチェックボックスが関連づけられるので テキストをクリックした時も チェックボックスにチェックが入るようになりますね。 ここをクリックでチェック入れられるよ 小さいチェックボックスにマウスカーソルを
使いやすさ日記: 444. カレンダーから日付を選ぶ入力方式
2008年7月14日 先日、近い週末に旅行をしようと思い、いくつかの宿泊施設予約サイトで宿を検索していました。そのとき閲覧したほとんどのサイトでは、宿泊日をテキストボックスかプルダウンメニューで入力するようになっていましたが、『宿・ホテル予約サイト じゃらん（http://www.jalan.net/）』では下の画面のように工夫していました。 一見普通のテキストボックスに見えますが、ボックスをクリックするとカレンダーが表示されます。そしてカレンダーから日付を選択すると、日付が自動的に入力されます。 私は宿泊日を土曜日にするということしか決めていなかったので、テキストボックスやプルダウンメニューで検索する場合、毎週土曜日の日付を確認してから入力する必要がありました。しかしこのサイトの入力方法ではカレンダーから選択できるため、日付は確認せずに土曜日の列から選んで入力することができました。 宿に
携帯サイトのフォーム設計のコツ (ユーザビリティ実践メモ)
PC向けサイトの資料請求ページなどでは、入力フォームに近接して入力例を置くことで入力形式の違いによるエラーを防ぐことができます。 しかし携帯サイトの場合、入力フォームの周りに入力例を表示したとしても、パソコンとは違い実際にユーザが入力する際には入力画面に切り替わってしまうため、ユーザが例を見ながら入力することができません。 入力フォームについてもう1点注意することがあります。 例えば上記にて、年月日の入力フォームを縦に並べてしまうと、スクロールのしかたによっては携帯サイトの画面に月日の入力フォームが表示領域外に隠れて見えなくなるケースが発生し、ユーザが誤って年のフォームに月日も同時に入力してしまう可能性があります。 入力フォームは横並びにする、入力フォームに文字数制限を設けることが有効です。 同じ役割を持つ画面でも、PCと携帯という物理的な環境やユーザの使用環境の違いを考慮すると違った設計
すぐ、その場で修正できる確認画面 (ユーザビリティ実践メモ)
ECサイトの購入フォームや、会員サービスの入会申し込みフォームでは、ユーザが名前や住所など多くの項目を入力しなければなりません。
第11回 PCサイトとこんなに違う！携帯サイトのフォーム設計ポイントとは | ユーザー視点のウェブデザインガイド
その半面、携帯サイトの設計については、PCサイトとは異なるユーザー特性があるにもかかわらずノウハウは少なく、中規模以上のサイトであっても「とりあえず作っただけ」のサイトや、やみくもに見た目だけを新しく装ったサイトが多いのが現状である。 今回は、携帯サイトの設計、その中でも特にビジネス成果に直結するフォームについてピックアップし、携帯ユーザー特有の行動に対していかに対応すべきかを考えてみたいと思う。 さて、複数のブラウザを立ち上げて、画面を切り替えながら操作が可能なPC環境と違い、モバイル端末では一度サイトから離れると、戻ってくるのが非常に大変である。そのため、携帯サイトのフォーム登録はPC以上に「一発勝負」であることを強く意識する必要があるだろう。 まず、ユーザーの入力負荷を減らし、自動入力が可能な部分は可能な限り実装するなどの配慮を欠かさないようにする必要がある。さらに、「携帯特有の機能
[一般] フォームの記入欄を小分けにしてはいけない - ちゃんとWeb by H2O Space.
お問い合わせフォームなどを作る時、フォームの記入項目を次のように小分けにすることがよくあります。 例えば郵便番号でも、最初の3桁と次の4桁を分けて記入するようにしたり、メールアドレスも「＠」の前と後ろで分けたりといった具合。 このようにすると、記入間違いが減り、また記入チェックも簡単になるため制作者側にとってはメリットが大きいのです。 しかし、利用者にとっては非常に不便なことがあります。 例えば、最近のWebブラウザには、あらかじめ各情報などを登録しておけば、自動的にフォームに記入するような機能が搭載されていたりします。この機能が正常に利用できなくなります。 また、操作に不慣れなユーザーはキーボードを見ながら内容を打ち込むので、記入欄が分かれていることを知らずに全部打ち込んでしまいます。 その後で画面を見ると、実は分けて記入しなければならないことが分かり、泣く泣くせっかく記入した部分
申し込みフォームを使いやすくして途中であきらめる人を減らす具体的な方法論【後編】 | カスタマーエクスペリエンスで道は開ける～フォレスター・リサーチのWebサイト方法論
[コラム]カスタマーエクスペリエンスで 道は開ける ～フォレスター・リサーチのWebサイト方法論 by ジョナサン・ブラウン フォレスター・リサーチのシニア・アナリストであるジョナサン・ブラウン氏によるウェブコラム。 主にカスタマーエクスペリエンスとマーケティングの側面から企業のビジネスをサポートしているジョナサン氏が、企業サイトにおけるユーザー志向の考え方や方法論をさまざまな切り口で解説します。 前回のコラムでは、サイトの目的にかかわらず必要になることが多い、企業サイトの申し込みフォームについて、フォレスターが調査した「なぜ途中で申し込みをあきらめてしまうのか」の概要と、申し込みフォームが使いづらい具体的な原因の1つ「フォームのラベルやボタンの位置やデザイン」とその解決方法を解説しました。 今回は、その続編として、申し込みフォームをより使いやすくするために注意するべき具体的なチェック点や
個人プロフィールからの引用を考慮した携帯サイトフォーム設計 (ユーザビリティ実践メモ)
PCをほぼ/全く利用しない「インターネット＝携帯電話」ユーザには、フォームなどでメールアドレスを入力する際に、個人プロフィールから引用する傾向があります。 機種によってこの機能の名称や使用方法は異なりますが、筆者の携帯では下記の操作でプロフィールを引用することが可能です。 プロフィールの中でもメールアドレスは、文字数が多く、英数字が混在するため、直接入力する場合、煩わしい操作を要します。 そのため、携帯の操作に慣れているユーザの多くが上記の機能を使用してメールアドレスを入力しているのです。 この行動を想定したうえでサイトを制作しなければ、ユーザにストレスを与えてしまう可能性があります。 例えば、あるメールアドレス入力フォームでは、下図のように「＠」より前をフリーワードで入力し、「＠」より後ろをプルダウンメニューで選択する仕様にしていました。 一見、親切そうに見えるフォームですが、プロフィー
携帯サイトのフリーワード検索ボックス配置のコツ (ユーザビリティ実践メモ)
「インターネット＝携帯電話」ユーザ（PCをほぼ/全く利用しないユーザ）の特徴として、フリーワード検索を好んで利用する傾向があります。 しかし、サイト内のフリーワード検索を利用した場合、ユーザは期待するページにたどり着けない可能性があります。 例えば、ある求人携帯サイトでのユーザビリティテスト（ユーザ行動観察調査）では、次のようなことが起こりました。 高校生のユーザが「高校生歓迎」のアルバイトを探そうと思い、フリーワード検索ボックスに「高校生」と入力して検索を行いました。 ところが検索結果では、「高校生歓迎」の案件以外に同じ「高校生」というキーワードを含む「高校生不可」の案件も表示されました。 その結果、ユーザは自分にマッチするアルバイトが少ないと感じて離脱してしまったのです。 実はそのサイトは、高校生歓迎の案件に誘導するリンクを用意していたのですが、フリーワード検索ボックスより下に配置して
ウノウラボ Unoh Labs: フォームのユーザビリティを改善する10のTips
miyakeです。Webアプリケーションにおけるユーザーインタフェースの代表格と言えばフォーム。今日はそんなフォームのUIを作るに当たって、普段自分が心掛けていることをつらつらとご紹介します。 ■チェックボックスやラジオボタンはfieldset,label要素でくくる チェックボックスやラジオボタンには一般的にその内容を表すテキスト（ラベル）が付けられますが、input要素だけでマークアップした場合、チェックボックス（ラジオボタン）の部分しかクリックすることができません。 label要素を用いることで、ラベルの部分をクリックしてフォームを操作することが可能になります。これは是非設定しておきましょう。 ラベルをクリックできると思って期待を裏切られると、かなりのストレスになりかねません。 また、そのチェックボックスやラジオボタンのグループをfieldset要素で囲んでおくことをお勧めします。マ
検索条件の入力画面で配慮したいインターフェース例
今回は「ユーザが混乱してしまうインターフェースとその解決法」の1パターンを、会員登録をして使うECサイトを例にしてご紹介します。 それでは、上記の状況をどのようなインターフェースで表現すれば良いでしょうか。一例を挙げてみます。 2通りのお届け先のいずれかを、ラジオボタンで選択させる形式です。 図1の場合、弊社のユーザビリティ調査では、お届け先を変更したいユーザがラジオボタンのチェックを忘れ「お届け先の変更」ボタンをクリックしてしまう様子が観察されました。さらに、ラジオボタンと「変更」ボタンのどちらをクリックすれば良いか分からない、と困惑するユーザもいました。 問題の原因は下記の2点が考えられます。 原因 1: 「別のお届け先に送る」と「お届け先の変更」という、同じアクションを想起させる文言が近接している 原因 2: 「変更」ボタンのアフォーダンスが高く、ユーザの行動はボタンのクリックに誘導
フォームの離脱率を下げるには (ユーザビリティ実践メモ)
フォームに入った段階で、多くのユーザは商品の購入や、会員の登録など、目的達成のために行動します。 しかし、他に気になる情報が呈示されていると、そこから離脱してしまい、スムーズに目的を達成できない場合があります。 グローバルナビゲーションのようにフォームから画面遷移するリンクは、可能な限りなくした方が良いと思われます。 しかし、フォーム入力中に、ユーザが疑問に思ったことに回答するヘルプなど、情報提示が必要不可欠な場合もあるでしょう。 そうした場合には、フォームから画面遷移することなく、フォームの中で情報提示することが望ましいと思われます。 例えば、フォーム内でのヘルプの見せ方として、javascriptを用いて動的に表示する方法があります。 ヘルプリンクをクリックすると、吹き出しが表示され、その中に情報を提示します。 以上のように、フォームから画面遷移するリンクを排除し、必要な情報はフォーム
振り仮名のカタカナ入力 | Accessible & Usable
公開日 : 2007年7月16日 (2015年11月23日 更新) カテゴリー : ユーザビリティ ウェブページのフォーム (「お問い合わせ」や「申し込み」など) に氏名を入力する際、いつも気になるのが、振り仮名 (読み仮名) の入力です。カタカナで入力しなければならないケースがとても多いのですが、これは、ユーザーに無駄な面倒を強要していると言えます。 その理由は、文字変換の手間です。たとえばユーザーの氏名が「山田太郎」さんの場合、以下のような手順を踏むことになります。 「お名前」欄に、「やまだたろう」と入力して「山田太郎」と漢字変換する。 「フリガナ」欄に、「やまだたろう」と入力して「ヤマダタロウ」とカタカナ変換する。 上記のうち、意外と面倒なのが、カタカナ変換です。というのも、PC などの文字変換機能は、漢字変換がメインのユースケースなので、カタカナに変換する場合、変換候補のリストの下
tabindex属性から考えるformのユーザビリティ - Trans
巷で話題のiddyに登録しました。といっても、まだどう活用するかはいろいろと考え中なわけですが、iddyに登録する際に、「あれ？」と思ったことがあったので、メモ書き程度に書いておきます。 formに入力する時って、tabキー使いません？ 僕は、大体のformに何かを入力する際には、tabキーを使って、どんどん項目を進んでいきます。マウスやaccesskeyは使わないことがほとんどです。 では、なぜはじめにiddyの話を出したかと言うと、登録の際に一瞬躊躇してしまったからなのです。「あれ、俺、今どこのボックスにいたっけ？」みたいな。 iddyの登録画面はこんな感じです。 で、いつものようにtabキーを使って、次の項目に移動すると、カーソルが消えてしまうのです。そのときに「あれ？」と思うのです。 理由はいたって簡単で、大体のformというのはtabキーを一回押せば、次の項目のボックスに移動でき
自由記述欄の入力率を上げるには 2 (ユーザビリティ実践メモ)
2007年3月5日のユーザビリティ実践メモにて、お問い合わせや資料請求ページにおける自由記述欄の入力率を高めるコツをご紹介しました。 ユーザが入力欄に何を入れていいかわからずに戸惑う可能性があることを考慮し、適切な入力例を添えて入力を促す、という内容です。 詳細はこちら 自由記述欄の入力率を上げるには 入力フォームがあるページを閲覧したユーザにいきなり自由記述欄への回答を促してしまうと、ユーザはたとえ何を記述すればよいかがわかっていても、最初の印象として入力が面倒だと感じて問い合わせや資料請求そのものを諦めてしまう可能性があります。 そこで、まずは入力しやすい個人情報や選択式の項目を配置し、次に自由記述欄を設けることをおすすめします。 このようにすることで、最初にユーザが感じる心理的な負担が少なくなり、ある程度簡単な入力を進めたあとに自由記述欄を見るため、入力作業の敷居が低くなります。
自由記述欄の入力率を上げるには (ユーザビリティ実践メモ)
問い合わせや会員登録フォームなどで、ユーザが自由に入力できるテキストボックス（自由記述欄）を用意しているサイトは少なくありません。 問い合わせの内容 商品見積り依頼の内容 転職サイトの職務内容 テキストボックスはユーザにとって自由度の高いインタフェースですが、ユーザビリティテストを観察すると、選択式の項目に比べ入力率が大きく落ちる傾向にあります。 ユーザが入力をスキップするのは、（必ずしも項目に無関心だからではなく）何を入れていいかわからず迷ってしまうことが大きな要因です。 そこで、テキストボックス周辺に、「入力例を見る」といったリンクを配置し、記入例やサンプルの文面を提示するのが良い対策の一つとなります。 なお、記入例やサンプルの文面は、具体的なケースに分けて記載すると良いでしょう。 例えば、中古車サイトの「カーセンサー.net」では、在庫確認・見積り依頼のフォームで、様々な想
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
