ユーザビリティの高い、使いやすいフォームを制作するための12のポイント
Li'l Engineのエントリー「ユーザビリティフォームのためのチェックリスト」の意訳で、ユーザビリティの高いフォームを制作するための12のポイントの紹介です。 Checklist for Usability Forms 不明な箇所は英文のまま記載してましたが、皆様の協力により3,5を和文にしました。 フォームは正しく入力できるように、可能な限り簡潔に。 フォームには、必要なインフォーメーションを含める。 タイトル：なんのためのフォームか フォームのヘルプ キャンセル(中止)の選択肢 入力すべき項目は、多くしない。 重複する入力項目は設置しない。 フォームの公開後しばらくしたら、収集したデータが実際に使用されているかチェックする。利用されていないものがあれば、収集しないようにする。 長いフォームは紛らわしいので、分ける。 タスクごとに分ける それぞれのページごとにチェックをし修正すること
ウノウラボ Unoh Labs: フォームのユーザビリティを改善する10のTips
miyakeです。Webアプリケーションにおけるユーザーインタフェースの代表格と言えばフォーム。今日はそんなフォームのUIを作るに当たって、普段自分が心掛けていることをつらつらとご紹介します。 ■チェックボックスやラジオボタンはfieldset,label要素でくくる チェックボックスやラジオボタンには一般的にその内容を表すテキスト（ラベル）が付けられますが、input要素だけでマークアップした場合、チェックボックス（ラジオボタン）の部分しかクリックすることができません。 label要素を用いることで、ラベルの部分をクリックしてフォームを操作することが可能になります。これは是非設定しておきましょう。 ラベルをクリックできると思って期待を裏切られると、かなりのストレスになりかねません。 また、そのチェックボックスやラジオボタンのグループをfieldset要素で囲んでおくことをお勧めします。マ
【携帯サイト】もう1ページ先に進んでもらうための６つのテクニック (ユーザビリティ実践メモ)
せっかくコンテンツを作っても、リンクがユーザにクリックされず、内容を見てもらえない、という悩みをお持ちのWEBマスターの方は多いのではないでしょうか。 今回は、携帯サイトでユーザを次ページに導くためのテクニックをご紹介します。 筆者がユーザビリティテスト（ユーザ行動観察調査）を通して得た実感として、携帯サイトの方がパソコンサイトよりも次ページへの誘導が難しいという印象があります。ある携帯の有料会員制サイトでは、「ユーザはいつも利用しているリンク以外はほとんどクリックしない」というユーザ行動が見られました。 理由として、携帯サイトは 読み込みが遅い隙間時間に利用される場合が多く、利用時間が短いパケット代がかかる などが考えられます。 そのため、携帯サイトでユーザを次ページに誘導するためには、パソコンサイト以上に誘導方法を意識する必要があります。以下、ユーザビリティテスト（ユーザ行動観察調査）
ラベリングが及ぼす影響 - 「予約」か「検索」か (ユーザビリティ実践メモ)
リンク名やボタン名は、その先にどういった情報や機能が存在するのかをユーザに伝える重要な役割を果たします。 今回は、旅行サイトのケースを例に、ラベリング（名づけ）が与える影響を取り上げます。 旅行サイトに訪れたユーザAは、宿泊先を探すという目的でサイトを訪れたにも関わらず、トップページにある、『宿泊予約』というリンクを見て、本当は正解であるこのリンクを意図的に避けてしまいました。 同様の目的をもったユーザBは、別の旅行サイトのトップページの『ホテル・旅館検索』というリンク名を目にすると、即座にクリックしました。 いずれも同種のページにリンクされており、ユーザが目的を達成するための正しい入口でした。 ユーザの行動を分けた要因は何でしょうか。主に次のような要因ではないかと考えられます。 宿泊先を探すユーザの行動フェーズは、 宿泊施設、宿泊プランの検討 宿泊施設、宿泊プランの選定 予約手続き とい
「次へ」ボタンの誘惑 (ユーザビリティ実践メモ)
自社商品の強みを伝えるために、頑張ってコンテンツを作ったけれど、なかなか最後まで見てもらえない…という悩みを持つウェブマスターの方は多いのではないでしょうか。 ユーザに「もう1ページ先」を読んでもらうためのちょっとした工夫として、「次へ」というテキストリンクの活用があります。 ベッドなどの家具を販売している会社の事例をご紹介します。 （実際の事例では別の商材ですが、内容は同じです） この会社では、自社商品の強みを自然に伝えるため、「マットレスの選び方」「掛け布団の選び方」というコンテンツを用意しています。 「寝心地のいいベッドがほしい」と思って探しているユーザがこのサイトに訪れた際に、「マットレスの選び方」というコンテンツに気づいて興味を持ってページを見てみたとします。 ページの最後まで読んだユーザは、「掛け布団は今回は買うつもりはないから見なくていい」と思い、次ページには進まず、戻ってし
Alertbox: 軌跡は“F”を描く（2006年4月17日）
アイトラッキング調査の結果から、多くの場合、ユーザーは“F”の文字 -- 横に二本、縦に一本の軌跡 -- を描くようにWebページを読むことが分かった。 F-Shaped Pattern For Reading Web Content by Jakob Nielsen on April 17, 2006 fast のF。あなたが用意した貴重なコンテンツは、こうして読まれている。瞬く間に、ユーザーの視線はウェブサイト上の文章を駆け抜ける。それは、学校で習った文章の読み方とはまったく違うものだ。 232名のユーザーに協力いただいて、数千に及ぶウェブページのアイトラッキング調査を実施した。ウェブページの読み方には、サイトの内容やタスクには関係なく、かなり一貫性があることが分かった。その顕著な読み方とは、アルファベットの“F”を描くようなもので、以下に挙げる3つの要素で構成される。 ユーザーの視線
心理学に学ぶユーザーの満足度 | コラム | ミツエーリンクス
私はユーザビリティ・エンジニアという仕事柄、ユーザビリティや情報設計（インフォメーション・アーキテクチャ）に関する書籍に目を通す機会がしばしばあるのですが、その多くは、Webサイトやソフトウェアにおいて、ユーザーの目的を効果的かつ効率的に達成させるための情報構造のあるべき姿や方法論について述べられています。ユーザビリティや情報設計の方法論に関しては、これまでに数多くの研究が行われており、いくつもの論文や書籍が出版されています。そのおかげもあってなのか、ここ数年でWebサイトにおける情報構造はかなり整理され、膨大な情報が存在するWebの中から目的の情報を探し出すことは比較的容易になったように思います。 国際規格ISO9241-11において、ユーザビリティとは「特定の利用状況において、特定のユーザーによって、ある製品が、指定された目標を達成するために用いられる際の、有効さ、効率、ユーザーの満足
入力最大値に達したら自動で次の要素に移動させられるjQueryプラグイン「Autotabindex」:phpspot開発日誌
入力最大値に達したら自動で次の要素に移動させられるjQueryプラグイン「Autotabindex」 2010年05月24日- Autotabindex Example 入力最大値に達したら自動で次の要素に移動させられるjQueryプラグイン「Autotabindex」。 例えば、携帯番号を入力する場合など、一定の文字数以上になった場合に、TABキーを押すなどせずとも、次のフィールドにカーソルを合わせることができます。 TABキーを知らないライトユーザーな方々はマウスでいちいち移動していたりもしますが、このプラグインでユーザビリティを上げられそうです。 JavaScript で１から実装するとなると、少し面倒な上に、要素ごとにonkeydownを入れたりしてコードが汚くなったりしますが、jQueryプラグインなので１行で次のように初期化できます。 $(document).ready(fun
アクセシビリティの定義、ユーザビリティとの違い | コラム | ミツエーリンクス
Webサイトの制作において、このような文面を見かけることがあります。しかしながら、両者の違いやそれぞれを向上させる効果についてはあまり理解されていないのでは、と感じることもあります。
可読性を「さらっと」アップさせる、誰でも可能なウェブライティング - Feel Like A Fallinstar
しばらく、ドタバタでブログを放置してました。 まぁゆっくり再開と言うことで、コネタから、と（汗） 最近マーケティング事例系のネタが続いていたので、インターフェースとかウェブっぽいお話をば。 重要な割に、あんまり世の中にノウハウが出ていないウェブライティングについて、ちょっとした、でも確実に効果のあるティップスを1つ紹介してみようかなと。 ウェブライティングは、「バランス」 具体的な内容の前に、ウェブライティングの基本的な考えを。 ウェブライティングの前提として、情報全体の「バランス」が本当に大事です。 適度な見出しがあって 適度なリスト表現（箇条書き）が要点や順序の説明に用いられていて 適度に重要な部分が強調されていて みたいな。 他にも英語は控えるとか、色々な原則があります。 この辺りのお話は、文章を見やすくする5つの工夫 / ウェブライティングのルール（どちらもユーザビリティ実践メモ）
最適なテキストリンクの色は？ | ウェブ力学
青系統の色が使われていることに変わりはありませんが、検索エンジン以上にバラつきが見られます。特に、Yahoo!の場合は、各ジャンルごとのページでも微妙にテキストリンクの色が変わっていました。それぞれのサイトデザインの特徴に合わせて変化させているのだろうと思います。 楽天のようにデフォルト色を使用しているサイトもありましたが、全体からすると少数派のようです。 Q&Aサイトの最大手OKWaveはGoogleと同一でした。また、ユーザビリティといえばビービットさん、ということで調べてみましたが、やや暗めの青を使用していました。ビービットさんのことなので何か意味があるのかもしれません。 クックパッド クックパッドは、日本最大級のレシピ検索のサイトです。ユーザービリティには細心の注意を払っていて、ユーザー一人当たりの平均PVが高いことでも知られています。 そんなクックパッドですが、サイトをのぞいてみ
水平方向の注目は左に寄る
ユーザーはウェブ閲覧時、その69%の時間を使ってページの左半分を、30%の時間を使って右半分を見ている。したがって、従来的なレイアウトを採用した方がサイトの収益性が高くなる確率は高い。 Horizontal Attention Leans Left by Jakob Nielsen 2010年4月6日 前回のコラムでは、ユーザーの注目がウェブページの垂直軸に沿ってどのように分布しているかについて論じた。要約すると、人というのはアバブ・ザ・フォールド（ページのスクロール無しに見える境界線より上）において、その境界線よりも下がったところに比べ、はるかに多くの情報を見ている。 今回は90度角度を変え、水平軸に沿ってのユーザーの閲覧パターンを見ていこうと思う。前回の分析と同じデータセットによると、ユーザーの注目は画面の左端から右端までで以下のように分布している： このグラフで1つ1つの棒が示すのは
スクロールと注目
ユーザーはウェブ閲覧時、その80%の時間をページのアバブ・ザ・フォールドにある情報を見て過ごしている。ユーザーがスクロールすることもあるにはあるが、彼らの注目はその境界線より下には20%しか向かない。 Scrolling and Attention by Jakob Nielsen 2010年3月22日 ウェブデザインにおいて、「ページ・フォールド（ページの折り目）」コンセプトと、もっとも目立たせたい情報をページの最初から見えるエリアに置くことの重要性に関して、たいへんな混乱が起きている。（すなわち、「アバブ・ザ・フォールド」の今回のコラムでの定義は、単に、「余分のアクション無しに閲覧可能な」ということ）。 ウェブの最初の頃、ユーザーはウェブページを全くスクロールしなかった。彼らは目に入る情報だけを見て、そのページに留まるか離れるかを判断するために利用していた。したがって、その時期（199
ユーザーに有用な12種類の効果的なナビゲーション
ユーザーに有用なウェブサイトをナビゲートする12種類のナビゲーションをOnextrapixelから紹介します。
使い勝手の良いフッタにするために、配置すべき6つの要素
6 Things To Include for a User Friendly Footer 以下、その意訳です。 ウェブサイトのフッタは、ユーザーが情報を得るための有用かつ大切なコンテンツとなり得ます。 フッタに情報を配置するということは、ウェブサイトに関する重要な情報を見つけるきっかけを与え、素晴らしいナビゲーションにもなり、ユーザーに与える第一印象にも影響します。 下記に挙げる6つの要素をあなたのサイトのフッタに配置すべきか検討してください。 1. About Us Link 「About Us」のリンク あなたやあなたの会社についての基本的なインフォメーションへのリンクを設置します。 ユーザーがあなたのサイトを確かめる手段の一つになります。 2. Contact US Link 「問い合わせ」のリンク サイトの所有者あるいは担当者に連絡を取る手段を提示します。 サイト上のタイプミス
アイトラッキングから検証した、使いやすいフォームの10のポイント
Google Mail、Hotmail、Yahoo! Mail、eBayの各サインアップのフォームを使用して、22～33才までの平均27才のユーザー8人を被験者にしたアイトラッキングから検証した、使いやすいフォームの10のポイントをcxpartnersから紹介します。 Web forms design guidelines an eyetracking study 以下、10のガイドラインからポイントのピックアップです。 1. Vertical, not horizontal 水平ではなく、垂直に フォームのレイアウトは、水平方向の配置やそれが混在したものではなく、単純に垂直方向に配置したものが効果的です。 可能であれば、各ラベルも垂直方向に揃えて配置してください。 2. Left-aligned labels are clearer (anecdotally) ラベルは左寄せにすると、よ
ウェブページを見る目の動きは「F」パターン - GIGAZINE
つまり人間はページを見る場合、「F」の字を描きながらページ全体を見ているというわけ。 これは232人の被験者を対象に行われたもので、大体1ページから重要なコンテンツを見つけるために2秒から3秒というものすごい短時間に驚異的な速度でページを見ていくそうで。 で、その視線の経路をビジュアル化したのがこの画像。全部で3段階のステップを踏んでおり、各段階を踏んでいった結果、「F」の字を描くというわけ。大体どのユーザーも一貫してこのパターンを踏んでいるらしい。以下がその全3段階の説明。どういうレイアウトが効果的なのかが分かります。 F-Shaped Pattern For Reading Web Content (Jakob Nielsen's Alertbox) http://www.useit.com/alertbox/reading_pattern.html 第1段階： 訪問者は最初にページの
モバイルユーザビリティ改善のチェックポイント保存版 - 全10回総まとめ（最終回） | モバイルサイト構築のユーザビリティいろは
2009年1月から連載してきた「モバイルサイト構築のユーザビリティいろは」も今回で最終回です。そこで今回は、今までの連載内容をおさらいしながら、モバイルサイト構築時におさえておきたいモバイルユーザビリティの総まとめをします。 前半では今までのおさらいをし、最後に自分でモバイルサイトのユーザビリティを改善するためのポイントを紹介します。 モバイルサイト構築時の基本チェックポイント公式サイトに関するポイントモバイルメールマガジンに関するポイントモバイルECサイト構築時のポイントモバイルFlashサイトの制作ポイント自分でできる！ モバイルユーザビリティ改善の3ステップモバイルユーザビリティ改善のケーススタディ1. モバイルサイト構築時の基本チェックポイント1-1. モバイル端末ならではの制約や特性を理解するモバイルサイトには、画面サイズや1ページで表示できるページ容量制限、キャリアごとの違いな
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Amazon.co.jp: ザ・コピーライティング――心の琴線にふれる言葉の法則: ジョン・ケープルズ (著), 神田昌典 (読み手), 神田昌典 (監修), 齋藤慎子 (翻訳), 依田卓巳 (翻訳): 本
ファーストビュー都市伝説 - ページ上部に詰め込むのはダメデザイン？ | 初代編集長ブログ―安田英久
