サイトアイコン SE×FIRE!

ほんとに使える「ユーザビリティ」

息抜きもかねて少し別の側面を学ぼうと思い、ほんとに使える「ユーザビリティ」という本を読みました。

何かサービスを提供している人にオススメです。書いてある事はサブタイトル通り極めてシンプルなので、スラスラ読みますが、内容は極めて深いです。あっさりまとめるつもりがかなりの長文になってしまいました。内容濃すぎて全然息抜きになりませんでした。シンプルな表紙に騙されましたw

実際の製品やサービスをガンガン挙げてユーザビリティの問題を指摘しています。名指しで非難する様はすごくアメリカ人らしいです。

ユーザビリティとは

ユーザビリティとは大きく分けて「使いやすさ(ease of use)」と「優美さと明快さ(elegance and clarity)」であると表現しています。

前者は明確に言葉のまま(実質的な面)ですが、後者は美しさ(心理的な面)を表しています。ちょっと解り難いですが、本書では以下の分類に分けて、各章で例示を含めながら説明されています。

  1. 機能性
  2. 反応性
  3. 人間工学性
  4. 利便性
  5. 万人保障性
  6. 可視性
  7. 理解可能性
  8. 論理性
  9. 一貫性
  10. 予測可能性

また各章ごとにチェックリストが用意されています。どんなサービスでも、もちろんブログサイト運用でも活用できると思います。(このブログのユーザビリティはどうなんだという突っ込みは置いておき・・・)

各分類が何を示すかをさっくり説明したあと、最近私の身近で発生したユーザビリティの問題を照会します。

機能性

単純にその機能が使えるかを示します。

ここが駄目だと完全に使えないものになってしまい、使い易さや美しさを語る以前の問題となります。

  • ボタンやリンクが必ず機能するか(404エラーは無いか)
  • 処理速度が許容できるか

反応性

ユーザのアクションに対してすぐに反応を出来るかを示します。

何かボタンを押したりスイッチを入れたりした際に、何らかの応答が無ければ、ユーザに「恐れ」「不安」「疑い」を与えることになります。解かり易い例を挙げれば、パソコンの砂時計マークです。この砂時計は、操作に対して処理中である事を即座に利用者に伝えています。

  • 利用者のアクションに対して、リアルタイムな応答を返すか(処理中ならバーを出す、アイコンを出す等)
  • そこが操作できることを示しているか(マウスオーバーでポインタを変える等)

人間工学性

人間の肉体的、心理的な使い易さを示します。

人が見たり触ったりした時に使い易いと感じるか否かです。見た目はカッコいいけど倒れやすいワインボトルとかよくありますが、ビジュアルに拘った結果、使いにくいデザインに陥るケースはこの人間工学性に分類される問題となります。

  • ボタンのサイズは容易く押せるくらい大きいか
  • 箇条書きの先頭の一語は最も重要なキーワードになっているか

利便性

機能がどれだけ利用者側の立場で作られているかを示します。

これは普通に使われる言葉なのでイメージし易いと思います。提供者側の都合でユーザビリティが犠牲になることはよくあります。何度も氏名と住所を書かせる書類とか、難解な税制の提出資料とか。

ペルソナ(利用者のアーキタイプ)を4~8種類想定し、その人になりきって機能を利用した時に、どういった問題が発生するかをチェックすると効果的に利便性の問題を洗い出せます。

  • 利用者のタスクを考えて作られているか
  • 何度も同じ情報を要求していないか
  • 役立つコンテンツを提供出来ているか

万人保障性

機能が誰にでも使えるかを示します。

利用者は普通マニュアルも読みませんし、前回操作も覚えていません。誰にでも使えるようにナビゲーションしたり、リマインドを促す必要があります。(編集して保存せずに閉じようとすると聞かれるアレとかです)

よく家電製品のトラブルシューティング等で、「電源は入っていますか?」という当たり前の確認があってイラッとしますが、これは万人保障性を担保するためのもので、一応理にかなっているらしいです。

  • 読み返さないと理解できない記述は無いか
  • 操作説明は最小限か
  • 利用者が情報を記憶していないと利用できない機能になっていないか

可視性

機能の視認し易さを示します。

機能が見えないところに隠れていたら使えません。また、見てもわからない場合も使えないです。スマホで使いにくい横スクロールや、押してみないと機能の理解できないアイコンは可視性の問題です。

  • 重要な機能や情報は目立つところに、そうでないものは目立たないところに配置しているか
  • 利用者からみた時、情報や機能を何かが物理的に疎外していないか

理解可能性

機能の理解し易さを示します。

この「理解し易さ」というのは立場(前提となる知識)によって異なります。これを本書では「共有参照」の問題としています。「共有参照」とは、何かを作った人と利用する人の間で同じ基本的理解を共有しているかを意味します。

アイコンだけで表現されたボタンは本当によく見るようになりましたが、モノによっては機能が想像できません。どれだけ見た目がカッコよくて、直感的に使えそうな気がしても言葉による情報の共有には大きな力があります。

  • 説明はちゃんと理解できるか(利用者が理解できない略語、難解な専門用語の使用は無いか)
  • テキストやビジュアルでの説明にミスリードしかねないものは無いか

論理性

機能に矛盾や疑問を発生させる余地がどれだけないかを示します。

パッケージから連想されるイメージと中身が全く異なる製品や、何だかわからないけどグレーアウトしていて操作できないボタンや入力項目は利用者に矛盾や疑問を感じさせます。

  • 利用者に「なぜ?」と思わせるような利便性に関わる状況は無いか
  • 見た目とその実態が大きく異なるものは無いか

一貫性

視覚的に同一であるものが同一機能を持つこと、あるいは視覚的に異なるものは異なる機能を持つことを示します。

アプリケーションの一般常識としては、1つのボタンやリンクには一つの機能とされています。例えばテレビやビデオのリモコンは選択したモードによってボタンの機能が変わるものがほとんどですが、このデザインは一貫性が無いと言えます。

  • 見かけが同じなのに異なる機能を持つものは無いか
  • 視覚的に一般的に連想されるイメージと異なる機能を持つものは無いか
  • 別々の機能を使いまわしているアイコンは無いか

予測可能性

過去の経験から機能がどれだけ予測され易いかを示します。

部屋の照明は大抵入口付近にあるものですが、ホテルの部屋の照明はベッド近くにあることもあり、バラバラです。また、スマホの充電が足りないことを示すランプは知る限り100%赤で統一されています。前述の一貫性と類似していますが、こちらは利用者の過去の経験に基づくものとして分けて分類されています。

  • 過去の経験を活かしやすい機能になっているか
  • デザインは世間一般のベストプラクティスに従っているか
  • 説明書きをあてにした機能はないか

私の身近に発生したユーザビリティの問題

この記事を書いた時点で、私には1歳半になる息子がいます。

毎日お風呂にいれてあげるのですが、先日、妻が2本1セットの子供用石鹸のボトルを買ってきました。私は風呂場でまずは「Baby Shampoo」と書かれているボトルを手に取って、それで子供の髪を洗ってあげました。

そのあともう一本のボトルを取って体を洗ってあげようとしたのですが、そのボトルには「Baby Hair Shampoo」と書かれていたのです。

つまり、最初に取った「Baby Shampoo」は体洗い用だったという事です。息子に白い目で見られた、、、気がしました。

この問題を本書の分類に分けると以下のような感じかと思います。

  • 万人保障性の問題:事前に2本のボトルを確認することを前提に「Baby Shampoo」というラベルを付けている。
  • 論理性の問題:なぜ両方にShampooというラベルを付けたのか。
  • 予測可能性の問題:シャンプーと言えば、大抵の日本人は髪を洗うものだと予測する。

終わりに

文句ばっかり言ってないでお前はどうなんだ。という事になります。

はい、すみませんでした。。。

このブログも、これから作る何かも、本書のチェックリストを使ってユーザビリティのチェックを行おうと思います。

解かってはいても実践するのは難しいんですよねぇ。

モバイルバージョンを終了