リンクとボタンの使い分け - ウェブユーザビリティ.JP
金曜日, 10 月 12th, 2007 | Author: sibsiv | (0) (0) (0) (0) Total: 0 一昔前のウェブサイトでは、「リンク＝単純なページ遷移」「ボタン＝データに対するアクション」という分かりやすい区別が存在しましたが、近年ではjavascriptの利用などにより、リンクでフォーム機能を実現することが多くなりました。 これにより、昔のような制限に囚われずにサイト設計・表現を行なえるようになりました。 しかし、その一方で、利用者側の立場からすると、ボタンやリンクを見たときに、それがどのような動作を行なうものなのかを簡単には判断できなくなってしまいました。 設計の幅が広がったことはとても好ましいことですが、単純な見た目だけに囚われることなく、利用者の立場に立って考えなければユーザビリティは損なわれてしまいます。 設計をする上では、どちらを使ったほう
ラジオボタンをスライダーバーのUIに変更:SuperSlider - ウェブユーザビリティ.JP
SuperSliderは複数並んだラジオボタンを見た目だけスライダーバー風に変更する、PrototypeとScript.aculo.usをベースにしたスクリプトです。 ウェブ上のFAQの末尾などに「この情報は役にたちましたか？」のような形でフィードバック用のアンケートが用意されていることがあります。一般的にこのようなアンケートはラジオボタンによる段階評価で行うことが多いのですが、段階評価であれば、スライダーバーのような全体の高低の関係が視覚的に分かるUIのほうが理解しやすく、回答の間違いも減ると思います。 スライダーバーはJavaScriptなどを使えば実現できるのですが、既存の仕組みがラジオボタンだったり、JavaScriptを利用できない環境でも使える必要がある場合などもあります。 そのような場合には、実際の仕組み自体はラジオボタンで実装しておき、見た目だけSuperSliderを使っ
フィードバックとフィードフォワード - ウェブユーザビリティ.JP
ユーザビリティの向上に役立つフィードバックとフィードフォワードという考え方について紹介します。 フィードバック、フィードフォワードという言葉はユーザビリティとは別の分野でも使われているので、なじみのある言葉だと思いますが、ここでは一般的な説明から離れ、少しユーザビリティ寄りで定義したいと思います。 フィードバック･･･ユーザーの動作によって生じた結果を、後からユーザーに提示すること。問題を解決するための情報を与えること。 フィードフォワード･･･ユーザーの動作によって生じるであろうことを、事前にあらかじめユーザーに提示すること。問題が発生しないように情報を与えること。 フィードバックとフィードフォワードの例として面白いのがカーナビです。 カーナビは基本として、「○○メートル先の交差点を右方向です。」「この先○○kmの渋滞です。」などのように、これから起こることを事前に運転手に伝えて、通り過
フォームにリセットボタンは必要か - ウェブユーザビリティ.JP
月曜日, 11 月 05th, 2007 | Author: sibsiv | (0) (0) (1) (0) Total: 1 最近は見かける回数が減ってきた気がしますが、フォームのリセットボタンは必要か？について考えてみたいと思います。 この話題は、だいぶ昔にJakob Nielsen氏のAlertboxでも取り上げられていますので、知っている人にとってはいまさらかもしれません。 まず、結論から言うと、「原則的に使わないほうが望ましい」です。 フォームにおけるリセットボタンは、ユーザーの入力を元に戻す手段を提供することを目的としています。 フォームにデフォルトの値が存在し、それが記憶しづらいもの、入力しづらいものであった場合には、ユーザーの処理をやり直すための貴重な手段となります。 しかし、一般的には以下の理由により、有効に活用されません。 多くのフォームのデフォルトが空白である
「戻る」が重要な理由 - ウェブユーザビリティ.JP
火曜日, 11 月 18th, 2008 | Author: sibsiv | (1) (0) (0) (0) Total: 1 ブラウザでは「戻る」ボタンが良く使われているということがユーザー調査により明らかになっており、Firefox3では、戻るボタンの大きさが進むボタンよりも大きくデザインされています。 ウェブサイトにおいても、特にウィザード形式の遷移などでは「戻る」や「キャンセル」を用意し、いつでも元のページや前の状態に戻れるようにすることが一般的です。 このように、戻ることが重要であることは、認知科学の分野では「限定合理性」と「満足化原理」により説明することができます。（認知から発展して経済学などでよく使われているようです。） 限定合理性（げんていごうりせい）とは、合理的であろうと意図するけれども、認識能力の限界によって、限られた合理性しか経済主体が持ち得ないことを表す。この
変更が保存されていない場合に確認ダイアログを出す - ウェブユーザビリティ.JP
木曜日, 11 月 20th, 2008 | Author: sibsiv | (0) (0) (0) (0) Total: 0 SNSやブログで力作の日記を書いて、いざ投稿しようと思ったら間違って×ボタンを押して閉じてしまったり、リンクをクリックして別ページに遷移してしまって、せっかく書いた内容がパーになってしまったというような経験は無いでしょうか？ 昔「フォームにリセットボタンは必要か」でも書きましたが、自分の行った作業が無駄になってしまうと多かれ少なかれフラストレーションが溜まります。毎日更新していた日記でも、「もう一度書き直す元気が無いし、また明日書こう」といって一旦間を空けてしまうと、それからずっと書かなくなってしまったりするかもしれません。 ウェブサイトをサービスとして提供する場合、そのような「利用を止められてしまうきっかけ」は出来るだけ少ないに越したことはありません。 そ
ラジオボタンやチェックボックスにはlabelをつける - ウェブユーザビリティ.JP
一般的にラジオボタンやチェックボックスは、それを選択することが何を意味するのかを表す文字列（ラベル）と共に用いられます。 そして、ラジオボタンやチェックボックスはサイズが小さくクリックしづらいため、WindowsなどOSレベルでは、ラベルをクリックした時もラジオボタンやチェックボックスをクリックしたのと同様の動作が起こるようになっています。 この仕組みはユーザビリティという意味でもアクセシビリティという意味でも有効なので、積極的に利用すると良いです。 これと同じことをWebでやろうとした場合には、labelタグを利用し、for属性に対象のidを正しく記述する必要があります。 <input type="checkbox" value="1" name="cb1" id="cb1" /> <label for="cb1">チェックボックス1のラベル</label><br /> <input
ラジオボタンはデフォルトで1つ選択しておく - ウェブユーザビリティ.JP
ラジオボタン（<input type="radio">）は複数の選択肢の中から1つを選択するための入力コントロールです。したがって、必ず1つ選択されている状態が正しく、RFCでもそのように定義されています。 At all times, exactly one of the radio buttons in a set is checked. If none of the <INPUT> elements of a set of radio buttons specifies `CHECKED’, then the user agent must check the first radio button of the set initially. 集合中のラジオ・ボタンは、いつも丁度1つがチェックされます。ラジオ・ボタンの集合の input 要素のどれも checked が指定されていなけ
文脈を意識したボタンのラベル付け - ウェブユーザビリティ.JP
ボタンのラベル付けについては、以前「ボタンのラベル付け～名詞？動詞？編～」や「ボタンのラベル付け～UPDATEボタン編～」でも考えたのですが、要するに大切なのはページ内の見出し、一覧、ボタンなど様々な要素を文脈を意識して適切に配置できるかということなのだと思います。 例えば、以下のような画面があった時に、「新規登録する」ボタンが「何」を新規登録するのかが分かるかということがまず大切です。 この例では、ページが「ユーザー一覧」となっていることから、「ユーザー」を新規登録するということが暗黙的に理解されますが、業務システムなど一ページに大量の情報がある場合には、ボタンの影響範囲が分からなくなったり、どれに対応しているのか分からなくなりがちです。そのような場合には、ページの中でどこからドコまでが一つの文章であるのかを視覚的に表現してあげる必要があります。（具体的には、線で囲む、色を分ける、物理的
文章の日付には年を含める - ウェブユーザビリティ.JP
以前、「文章には日付を記載する」で文章には日付を記載した方が、ユーザーへの判断材料を与えるという意味でユーザビリティが高まるということを書きました。 ですが、日付が書かれていても、それが無駄になるばかりか逆に混乱させてしまうパターンも存在します。 それは、「月」「日」だけ書かれていて「年」が書かれていないパターンです。 自分がよくチェックしているサイトであれば、年月だけしか書かれていなくても、ほぼリアルタイムに確認するので、年を誤解する余地はありません。 しかし、検索サイトから初めてそのページにたどり着いた場合など、サイトの状況を把握していない状態だと、一体いつの7月8日なのかが判らないということになってしまいます。 特に、ニュースなどはリアルタイムで知らせることを目的としている情報なので、しばらく後で参照されるという状況を想定できずに書かれてしまうことが多いのかもしれません。 CMS
ユーザービリティとユーザー中心設計の発表資料 - ウェブユーザビリティ.JP
月曜日, 12 月 10th, 2007 | Author: sibsiv | (4) (0) (0) (0) Total: 4 先日、昼食後にオフィスのカフェでWEB+DB press vol40を読んだのですが、ユーザビリティに関する特集があることに、いまさらながら気づきました。 丁度、先週社内でユーザビリティの勉強会を開いたのですが、 （読んでないのに）そのとき書いた資料と大分かぶっててちょっとびっくりすると共に、 認識が大体同じだということが分かり、ほっとしたのでした。 資料を書く前に気づいてたらもう少しすっきり書けたんですけどね。 ということで、私が書いたスライド資料も公開しようと思います。 (クリックで画像を拡大) > ユーザビリティとユーザー中心設計(PDF) スライド資料に関しては、煮るなり焼くなりご自由にどうぞ。 ppt形式もありますので、連絡頂ければ配布いた
都道府県の選択をより直感的に : jsmap - ウェブユーザビリティ.JP
都道府県の入力と言えば、セレクトボックスで47都道府県の中から選ぶのが一般的です。自分の住所であれば、セレクトボックスのどこら辺に○○県があるかなんとなく意識できるので、慣れてしまえばさほど苦ではないですが、あまりなじみの無い県を選ぼうと思うと結構大変だったりします。 今回紹介するjsmapは、そんな都道府県の入力を、より直感的でユーザビリティの高い方法で提供するためのスクリプトです。 htmlの要素としてはテキストフィールドになっているのですが、入力欄にフォーカスすると簡易な地図が地方ごとに表示され、地図上で目的の都道府県をクリックして選択することにより、入力欄にその都道府県名が入力されます。 「効率が上がるか？」という観点で考えると正直わかりませんが、「分かりやすさ」という点では、セレクトボックスよりは上だと思います。 「一般的にはセレクトボックスなどで表現されているもの」をテキストフ
テキスト入力欄に選択肢を追加:Proto.IPS - ウェブユーザビリティ.JP
Proto.IPSはテキスト入力欄(input=text)に選択肢を追加することができるJavaScriptウィジェットです。 単純に入力よりは選択のほうが楽ですし、どのようなものを書けばよいのかイメージが付くので、うまく使えばユーザビリティの向上につながると思います。 テキスト入力欄に選択肢をつけるという視点でも便利ですが、今までラジオボタンで入力させていたものをテキスト入力で代用することも考えられます。 よくある以下のような選択肢の場合、サッカー、バレー、バスケットボール以外にしたければ、ラジオボタンで「その他」を選び、右のテキスト入力欄に入力するということを行います。 このような場合に、システムで厳密に管理する必要がなく、「その他」が割合的に多くなりそうなものであれば、Proto.IPSのような仕組みを使って代用すると、シンプルに実現することが可能です。 (2008/5/26追記)
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
