認知科学から学ぶ使いやすいデザインのための原則

2010年6月20日

Webサイトの発達に伴い、Webサイトが見る（閲覧する）だけのものから操作し、使うものに変わってきたとつくづく感じるようになりました。様々な表現が可能になり「使いやすさ」という点も考慮しなければならなくなってきたと思います。
そして同時に、デザインの意味やデザインの可能性が広がってきたと感じます。
今回日本ウェブ協会主催の認知科学のワークショップに参加し、「誰のためのデザイン」D.A.ノーマン著を元に、使いやすいユーザー・インタフェースを開発する為のプロセスを学んできました。

使いやすさとは何か？

使いやすい製品とは、製品を手にとった時又は見た時に、どう操作を行えばどの様な結果を返してくれるかが直感的に判りやすいものです。例えば丸いドアノブは、撚る事をアフォードしています。しかし、取っ手が無い扉は、押すことしか出来ないとすぐに分かります。
普通の事過ぎて日常気にも止めないことですが、すべてむこう（製品）からこう使ってくださいという、使いかたをユーザーに与えてくれているのです。その為「使い勝手のよさ」とも言われます。
こういった目に見えない配慮の事をユーザーインターフェースと言います。

ユーザーインターフェース研究とは

ユザーがコンピュータなどを操作する上での操作感や、使いやすさを人間を中心に考え、インターフェースを設計すること。
簡単にしてしまうと“わかりやすさ使いやすさを考える事””認知心理学を応用する事”“人間の理解出来る事を探る事”と言ってしまえるかもしれません。

認知科学からみたユーザー

ユーザーは「思い込み」で操作を行う。それが当たっていれば安心し、外れれば戸惑う。
人間は上手く行く為に知ろうと努力し学ぶことをします。それが上手く行き良い印象を持てばまたやりたいと思います。

なぜユーザーは操作を間違うのか？

大きな要因として、個人の頭の中にある知識はかならずしも同じではない。
その為、頭の中の知識が乏しい場合、外界から情報をサポート出来なければ操作の仕方が分らなかったり、操作をまちがってしまいます。

人はどのように操作を行うのか？

人間が何かを使う時、使い方を知らなくても1～10までのプロセスを何度か繰り返し操作を学習します。

（1）ゴールの形成
（2）意図の形成
（3）行為の詳細化
（4）行為の実行
（5）外界の状況の知覚
（6）外界の状況の解釈
（7）結果の評価

注目したい点は（5）で自分が行為を行ったことによって外界の状況がどうなったかを知覚し（6）で行為によって外界がどのように変化したかを解釈しています。（7）では、起こる事が予想された外界の変化に対しての解釈と評価を行います。
外界のフィードバックから、自分の行為を評価し再度操作を行います。

理解しやすく、使いやすいデザインとは

操作を用意に理解しやすくする為に、外界（デザイン）から情報を与えるようにする。

【可視性】: 使い方を示す可視的な手がかりを与える。
【よい概念モデル】: ユーザがよい概念モデルを形成できるようなデザインが必要になる。; 操作と結果の間に一貫性があって一致したシステムイメージを提供する必要がある。
【対応付けの原理】: 行為とその結果や操作とその効果が理解できる様にする。; システムの状態と目に見えるものの間に自然な対応付けがを行う。
【フィードバック】: ユーザーが行った行為に対して、どのような結果が生じたか常にユーザーに伝える必要がある。

難しい操作を単純なものにする7つの原理

外界にある知識と頭の中の知識の両方を利用する
操作方法を単純化する
対象を目に見える状態にし、実行との隔たりをなくす
対応付けを正しくする
自然の制約や進行的な制約などの制約の力を利用する
エラーに備えたデザインを行う
上記の全てが上手くいかない時は単純化する

Appleでは、「Human Interface Guidelines」を策定しそれに基づき開発を行っています。

Introduction to Apple Human Interface Guidelines

実際に使い勝手の悪い道具を評価してみる

使いやすい点、使いづらい点から、何が使いやすさや使いづらさの要因となっているのかを理解する為には、いつも使っている道具や、コンピューターなどをじっくりと自分自身で評価してみることが、一番の近道だと思います。

例）いつもテニスの練習をしているコート横の水道

良い点：

水道の溝は水が流れる事をイメージさせる。
また、溝の深さから、出る水量まで予測できる。
水道横の鉄製のバーは、バー以上に近づくと濡れてしまう事をイメージさせる。
また、バーが鉄製で作られている為、木製などと比べ体重をかけても大丈夫であることを連想させる。
手洗い用の下の水道は、押すことによって水が出ることをイメージさせる。
上部についている水道は飲料用の水が飲める事をイメージさせている。

悪い点：

上部の水飲み場に水道が2箇所備え付けになっているが、それぞれ用途が分かりにくい。
手前の水道（写真2）はおそらくコート整備等でホースをつなげられる様な水道が欲しかったのだろう。しかし、別の場所に整備用の水場を設ける事は非効率てきなので、水飲み場の少し空いているスペースに取り付けられた。
しかも、市販の水道を横向きに取り付ける事が出来なかったからだろうか、通常の握って回すタイプの蛇口が取付られず、レバーを使用している。
その為、本来真ん中に付いているべき水飲み用の水道は、随分端に取り付けられてしまい、水を出し過ぎると水受け場からはみ出してしまう様になってしまった。

写真2：ありもので対応しようとしたため不思議な水道になってしまった

道具の使いづらい所を深く読みといくと、多くは予算の都合でイレギュラーの部品を開発できなかったりすることが出来ず仕方なく使いづらくなってしまったり難しい操作方法になったりすることが多い。

まとめ

最近、Webはプロダクト製品に似ているのでは無いか？と特に思います。Webサイトは確かにぱっと見ではどれも似た様なものが多いかもしれません。しかし、細かい部分に気が使われているか？でユザーに与える印象や負担は大分変わります。デザイナーは、細部にまでユーザーに与える負担を真剣に考える必要があると思います。しかし、実際の所そこまでデザインに時間や予算をかけてもらえる事は本当にまれです。細部まで考え抜けず出来てしまったデザインや、ルールのバランスが崩れてしまったサイトを多く見かけます。
デザインに時間や予算をかける必要性を理解してもらう事が今デザイナーとしての使命なのではないかと思います。