フォーム入力の際、必須入力の項目が未入力であった場合には「○○を入力してください」などのメッセージを出し、入力するまで先に進めないようにすることが一般的です。

これをセレクトボックスに当てはめると、セレクトボックスは必ず１つの選択肢を選択してしまうので、「何も選択していない」ことを表す選択肢を選択している場合にはメッセージを出すということになります。

この、何も選択していないことを表す選択肢の文言はサイトによってばらばらで、空白だったり、「未選択」「選択してください」というような文言が使われます。

例えば、利用者アンケートの場合には以下のような選択肢になります。

・選択してください←デフォルトで選択されている項目

・使いやすい

・どちらでもない

・使いにくい

ここで、「ユーザーは作業中のエラーを嫌う」ということを思い出し、デフォルトで何か一つ有効な選択肢を選択しておくようにしたら良いのではないかと考えるとどうでしょう。

・使いやすい←デフォルトで選択されている項目

・どちらでもない

・使いにくい

このようにしてしまうと、デフォルトのまま登録して「使いやすい」という回答をする人が多くなり、本当の印象とは別の回答をされてしまう可能性が増えてしまいます。

more…

今まで各画面のレイアウト・仕様を「画面仕様書」、画面間の関係を「サイトマップ」としてそれぞれ作成し、お客様への説明の際も主にこれらドキュメントを利用していました。

一つ一つの画面の中身を見るには１画面１枚のようなプリントアウトの仕方のほうが分かりやすいですが、いくらサイトマップを添えているとはいえ、画面仕様書では各画面間の遷移が直接的には表現されていないので、イメージがわきにくい場合があります。

そこで、画面仕様書の画面部分を使った画面遷移図を作ってみました。

（仕様書としての画面遷移図とサイトマップは同じものを指すことが多いですが、ここでは分かりやすいように、箱にIDだけ書いてあるものをサイトマップ、画面の詳細まで書いてあるものを画面遷移図と呼んでいます。）

more…

このエントリーは、先日投稿した「ユースケース分析」というエントリーの話の続きです。

今回は、ユースケースを記述する際に気をつけることと、ユースケースを使った要件分析のフローについて、簡単に書いてみます。

■ユースケースを記述する際に気をつけること

• ユースケース名を見た人が異なるものをイメージしないよう、具体的に書く（特に、「○○を～」という目的語を明確にする）
• ユースケースは述語まで書く（「書籍検索」ではなく、「書籍を検索する」と書く）

• 以上によって、ユースケース図を見た際に、文章として認識できるようにする

more…

複数個の選択肢の中から順不同で複数を選択させる場合の入力方式としては、チェックボックスを利用する事が多いと思います。チェックボックスは一覧性があり、全体を把握できる点では分かりやすいですが、表示領域を広く取ってしまうため、使いづらい場合もあります。

今回紹介するSelectMultipleは、LIVEPIPE UIというライブラリの中の1つの機能なのですが、セレクトボックスで複数選択を可能にする入力インターフェースを提供しています。

初期状態では、通常のセレクトボックスとなんら変わりないのですが、横の"Select Multiple"をクリックすると、複数選択用のメニューが表示されます。

ここで、例えば上記のような３つを選ぶと、セレクトボックスの選択肢として、３つがセットになった選択肢が表示されるという仕組みです。

この方法であれば、省スペースで複数選択を実現できるので、インターフェースの一つの参考として覚えておいて損は無いと思います。

more…

日経パソコンで行われた、Webサイトのランキングの結果が日経BPのPC Onlineで公開されていました。

「日経パソコン」は、国内の主要企業500社を対象に、Webサイトの有用度を比較する「企業サイトランキング 2008」をまとめた。「基本情報」「ブランディング」「リスク管理」「使いやすさ」「アクセシビリティ（アクセスの容易さ）」の5分野、65個の調査項目への対応度を検証。その結果を得点化して、ランキングを算出した。

企業サイトランキング 2008—主要500社のWebサイトを評価

この調査では、以下の5分野をもとにサイトの”有用度”を算出しています。

• 基本情報
• ブランディング
• リスク管理
• 使いやすさ
• アクセシビリティ

詳しい算出方法や各分野の評価基準に関しては以下のページに書かれています。

＞企業サイトランキング 2008の調査方法と調査対象

このランキングを見ていて、総合得点とそれぞれの分野の得点に相関があるかどうか気になったので、比較してみようと思います。

more…

ユースケース分析はシステムの要件定義を行う際によく用いられる手法ですが、ユーザビリティを考えるうえでも、現状を分析しモデル化する力、改善案をモデル化し提案する力は必要不可欠ですので、簡単に紹介します。

ユースケースとは、サービスの利用者がすること、できることを示したもので、UMLを使って図示したものをユースケース図と言います。ユースケースという言葉の通り、あくまで利用者側の視点で利用する状況を書き出すことが大切です。

このユースケースですが、一つのユースケースの粒度というのが問題になることが多いです。例えば、ホテルの予約をする場合でも、「予約する」なのか「予約の電話をかける」なのかなどです。一般的に、行動や作業は細かく分けたり、まとめて抽象化することができるので、どの粒度で表現するかということがバラバラになってしまいます。

ユースケースの粒度をどの程度にすればよいかは、何のためにユースケースを利用するかということと、対象となるシステムの規模に寄りますが、大きく分けて２つの粒度が考えられます。

more…

ユーザビリティの高いサイト、使いやすいサイトというのを目指して開発を行う際に、どうも分かりやすさにばかり目が行ってしまい、作業効率という観点での検証が甘くなってしまっている事が多いように感じます。

そこで、分かりやすい＝作業効率が良いではなく、分かりやすい＝ユーザビリティが高いという訳でもないということを改めて考えた方がよいと思います。

改めて、ISOでのユーザビリティの定義を振り返ってみると、

特定の利用状況において、特定のユーザーによって、ある製品が、指定された目標を達成するために用いられる際の、有効さ、効率、ユーザーの満足度の度合い。

と書かれています。

あくまでも、有効さ、効率、ユーザーの満足度合いなどがユーザビリティの指標であって、分かりやすさというのは、それらを満たすための補助的なものでしかないのです。

ですから、分かりやすさのために、有効さ、効率、ユーザーの満足度をおそろかにしてしまっては本末転倒です。分かりやすさがユーザビリティに繋がるかどうかは、そのシステムの性質によって判断しなければいけません。

more…

自治体や公官庁など、ターゲットユーザーが幅広くアクセシビリティが要求されるサイトや、ニュースサイトなど読み物主体のページで、文字サイズを変更できる機能をよく見かけます。「小」「中」「大」と３段階で切り替えられたり、「縮小」「標準」「拡大」など、多段階で切り替えられるものがよく使われています。

今回紹介するText Size Sliderは、そのような文字サイズの変更をスライダーのUIを用いて実現しているのが特徴です。

文字を大きくして見るというニーズは、高齢者の方には特に高く、そのような方をターゲットにしたサイト構築の場合には、必須と言える機能だと思います。（それで充分かはきちんと考える必要がありますが。）

また、ボタン式と比べると、スライダーの方が調整しているという間隔を覚えやすく、丁度良いところで設定できる印象を受けました。また、ツマミの位置が現在の文字の大きさを表しているので、もっと大きくできるとか、今のサイズが普通くらいなどという情報が分かりやすいです。

more…

以前、「地方自治体Webサイトのユーザビリティ評価（引越し部門）2007 結果報告会」で2007年の報告会のレポートをしましたが、2008年もHCD-Net主催で地方自治体ホームページのユーザビリティ評価が行われます。

今年の評価者ワークショップの申し込みはまだ締め切っていないようですので、評価者として参加したいという方は、詳細を確認してみてください。

NPO法人 人間中心設計推進機構

ちなみにワークショップは２回のうちどちらか参加でＯＫで、9月12日と10月10日となっています。

今年は私も参加しますので、現在はトライアルということで簡易な評価シートを用いていくつかの地方自治体のサイトをチェックしています。

特定のコンテンツのユーザビリティ、使い勝手に関して、色々なサイトを比較してみるというのも面白いですし、新たな発見がありますね。

具体的な話については、ワークショップが終わったらまた報告しようと思います。

オンライン上で色々な文章を読めるようになったといっても、書籍ならではの魅力は色々あります。 書籍の良い所の一つに、ぱらぱらとめくりながら読み進めていけるというものがありますが、bookreader.jsはそのような、1ページずつ読み進めていく感覚をJavaScriptで実現したライブラリです。

本をめくる感覚をよりリアルにFlashで表現したものも他にいくつかありますが、bookreader.jsでは、文章を横にスライドさせることによって、読み進める感覚を表現しています。また、キーボードによる操作や文字サイズの変更機能などがデフォルトで盛り込まれていて、完成度は高そうです。

このスクリプトを組み込んだ例としては、以下のサイトが紹介されています。

川野里子の短歌とエッセイ

コンテンツによっては、より本に近い見せ方をした方が、表現力がアップするような場合もありますので、そんなときにはこのbookreader.jsを使ってみるのも手かもしれません。

more…