Desigining from Both Sides of the Screen: 3 章
福井眞吾

2004.9.13

13 章 無理強いしない:考える手間に気を配ろう

タフェースについて「考える」こと』と呼んでいる。この「考える」を最小にする方法を議論する。

□ 表示するものは控えめに

2□ よく使う機能を目立たせ、あまり使わない機能は隠せ表示する物はひかえめに□ クリックと同様に、画面に並べる物のことも考えよう。

□ フィードバックをユーザに与えよう。処理が進んでいるメニューやボタンがちょっと増えるぐらいなんてことなことを知らせよう

いと思うかもしれないが、「クリックの増加」と同様「画□ Preference 設定はすくなくしよう。よく考えられたデ面がごちゃつく」ことも問題である。物が少なければ「選フォールトを用意しようぶ」作業が楽になる。

□ 慣習に従おう (たとえそれがあなたの理想とするデザイ□ 例:Fig.

ンと違っていても)3.1 にはニューが A と B に 2 セットあるが、表の中から「Orange, Edinburgh, Cherry, Gold」を選□ Widgetless Features を探求しよう

ぶのはどちらが速いか?

□ クリックを減らす方法として、個々の機能すべてにボタ

SetB のほうがずっと楽。SetA

では、目的とする要素が含まれる可能性のあるカテゴリンを用意するやり方が考えられる。

が複数あると探す手間が増える。特にソフトウェアのメ□ これなら何でも 1 クリックでできる。でもこれは、「ボニューの場合は、カテゴリー分けのあいまい性が高いのタンを選ぶ」という「考える動作」をユーザに課してしで、この問題がより顕著になる。UI の他の部品も「少なまう。肉体的な負担を減らすだけではなく、思考の負担い方がよい」というルールが成り立つ。画面を眺めるのも減らさなければならない。にほんの少ししか時間がかからないとしても、「見つける」という動作によて、本来の仕事の流れが中断される。

□ 考えるためのエネルギーをユーザの本来の仕事に集中で□ アプリケーションが高機能になるとより多くの部品 (ボきるようにしよう。

タン、メニュー、チェックボックスなど) が必要になる□ 最 近 のTiVo、Replay、UltimateTV の よ う な
PVR(Personal Video Recorder) 製 品 は 、思 考 のと思うかもしれない。しかし、少ない部品で実現できれば、ユーザは求める機能を楽に見つけられるし、そうな負担を減らすように作られている。「いつどのチャンネればあなたが一生懸命作った機能を使ってもらえる可能ルを録画しますか」と聞く代わりに「どの番組を録画し性も高まる。

ますか」と聞いてくれる。連続物の番組の場合、1 回分□ Fig3.1 は極端な例だと思う?

だけ録画することも全ての回を録画することも指定できる。放送時間や局が変わっても気にする必要はない。
番組が放送中止になった週は録画しない。PVR は、ユー

Fig3.2 の Outlook2000

Calendar の例では、メインメニュー 7 個、メニュー選択
肢 69 個 (内 16 個はサブメニュー)、サブメニュー選択肢るか) だけ考えさせ、重要でない技術的な側面 (いつど68 個もある。メニューを選ぶと、42 個のポップアップ
ウィンドウが開き、それらはさらに子供のポップアップのチャンネル) を気にしなくてよいようにしてくれる。

ウィンドウを開く。画面上部にはタスクボタンが 12 個、ザが本当に気にしなければならないこと (どの番組を見アプリケーション呼び出しボタンが 6 個、フォルダ表示□ たいていの場合、これほど劇的に思考の負担を減らす

部、予定欄、今月、来月の概要、タスクパッドがある!

ことはできないが、いろいろな場面で少しづつ減らすことはできる。このことを、Steve Krug は著書「Don’t □ これに対して、Palm の DateBook 画面はシンプル。メイ
ンメニュー 3 個、メニュー選択肢 18 個、サブメニュー
Make Me Think!」の中で、『本来の作業を中断してイン1

なし、ポップアップウィンドウ 6 個。画面上にはボタン □ 他の航空会社のページはずっと出来が悪い。例えば、3 個と、choice box2 個、今日の予定画面だけ。
Fig3.5 のアメリカン航空のページでは、情報がごちゃまぜだ。
「アメリカン航空のニュース」と「旅行の計画」□ 2 種類のカレンダーソフトを使い比べてみると、Outlookがトップに配置されていて、しかもそれらがあまり明確はいろいろなことができるが、Palm の方がずっと効果的に区分されていない。あなたは「運行状態」を調べる場だとわかる。ユーザは脅かされることとなく、よく使う機能はすぐに、あまり使わない機能も楽にみつけられる。
□ Web サイト、特に、ホームページ (トップページ) は、こ所をすぐに見つけられますか。ページの残りの部分はあいまいな名前のプルダウンがいっぱいあり、やりたいことの場所をみつけるのは大変。例えば、マイレージを確の原則を守るのに苦労している。皆が、トップページに認するのはどれ?

リンクを置こうとするからだ。でもそうすると自分のと□ Fig.3.6 のルフトハンザのページでは、「計画」部分はころに来てくれるチャンスは相対的に少なくなる。

目立つようにオレンジ色の枠に囲まれて画面右側に配置□ 画面上における要素の数は極く限られていると考えるよ

されているが、中央上部は相互に関係のない機能がならうにすれば、機能を追加することに注意深くなる。機能んでいる。このページで「運行状態」をすぐに見つけらを追加することによる UI のコストを考えるようになれれますか?

ば、あなたはよいインタラクションデザイナーのように□ 「よく使う機能を手近に」という原理は、小さなデバイ思考できるようになる。

スではより重要である。これらはユーザが外出時に他の作業をしている最中に用いられる。だから、必要なこと3

よく行う作業は見せ、あまりやらないをすぐやれるようでなければならない。例えば、携帯電話が着信したときは「電話に出る」がすぐ出来る必要が作業は隠すある。どのボタンを押しても電話に出られる機種がある。

□ 「機能を減らす」以外に、画面のごちゃごちゃを減らす

これはいい。しかし、電話を切るには専用のボタンを探のにもっとも効果的なのは、あまり使われない機能を隠す必要がある。これは通話中に「切る」以外の他の作業すことである。よく使われる機能だけを画面に配置すれをする可能性があるからだ。Nokia6162 では、フラップ

ば、初めての人も怖がらずにそのソフト使い始められる。

を開いて電話に出られ、閉じれば電話を切れる。何の努

ユーザは、強い動機付けがないと、どのような機能があ力もいらない。これはいい!

るか探索したりはしない。だから、画面をごちゃごちゃ必ずフラップを閉めるんだから。

携帯電話をしまうときはにすることなく、よく使われる機能を明快に示すと同時 □ Nokia の携帯電話では、Short Message(簡易メール) 操に、他に機能があることをほのめかすことができればい
作画面のソフトキー (キーの意味が画面に表示される) のいんだが。

デフォルト設定が秀逸である。左ソフトキーを繰り返し□ 良い例を 1 つ。航空会社の窓口でもっとも多く行われる押すことで、メールを次々に読むことができる。すでにことは、「旅行の計画 (発着日時、値段、予約)」と「運メールを 1 通読んで保存してある状態で新しいメッセー

行状態 (今日のフライトの発着時刻) の確認」である。

ジが来ると、左ソフトキーは「Read」に変わる。押すと他のこと (割引商品の調査、なくなった荷物の捜索、勤メッセージリストが表示され新着メールが選択された状

め口、Frequent Flyer 会員申し込みなど) はずっと頻態になる。ここで左ソフトキーを再度押すとメッセージ度が少ない。Web サイトをデザインするなら、最初の 2を読める。読み終わると「Options」に変わり、デフォつをすぐに見つけて作業をはじめられるようにしたいだ

ルトは「次のメッセージを読む」になっているのでソフろう。

トボタンを再度押せばよい。

□ 航空会社の Web サイトを比較してみよう。Fig.3.4 のユ□ 「自動車を運転するとき、よく使う機能は道路から目をナイティッド航空の Web サイトでは、「計画」と「運行状態確認」と、「マイレージ確認」が目立つように配置離さずに操作できるべきだ!」と主張する友人がいる。
Fig.3.9 は彼のアイディアを図にしたものだ。手を置くされていて、クリックで画面遷移をすることなく、直接ホームポジションをダッシュボード上に用意しておく。

これらの情報を調べることができる。一方、あまり使わそこは手探りですぐ場所がわかること。そこに手を置いれない機能は、「クリック」によって画面遷移してアクてラジオを選曲したり温度調節をする。操作に対して音セスするようになっている。

声フィードバックがあるとなおよい。

2

4

フィードバックを与える:処理の進み□ Fig.11 は Harris Poll のアンケート画面:プログレス
パーがある。1 ステップでどれぐらい進むかわからない具合を示す

点はよくないが、でもなにもないよりはずっといい。

□ 人間同士の会話では、相槌や仕草で「ちゃんと聞いてい □ 音声を用いたインタフェースでは、目に見える形でフィーるか」や「どれくらい理解できているか」を相手に伝えドバックは行えないが、会話のテクニックを使える。
る。これらがないと、会話の中身から、言葉のやりとりへ意識がそれてしまう。コンピュータも同様だ。通常、□ 例:Schwab の電話による株価応答システム:

ユーザの要求にそのまま従うことでこれをおこなう。例• User:「Sun の株価はいくら?」

えば、文字入力や削除は即座に画面に反映される。ユーザの要求を即座に実行できないときや結果が見て分から• Computer:「その名前に該当する商品は 7 つあります。いつでも証券のフルネームをおっしゃっていただ

ないものの場合、執事がするように「要求を伺いましたいてもかまいません。これから読み上げるリストを(かしこまりました)」と返答すべきである。そうしない聞いて、しぼりこんでください。」とユーザが再び要求を出し、プログラムは混乱に陥る。
□ よく用いられる方法は、作業に時間がかかるときに「タ□ リストはアルファベット順ではなく、よく利用される順になっている点もよい。「もう一度証券のフルネームをスクバー」を表示することである。別の例として、描画行ってください」と言う代わりに、可能性のある証券をに時間がかかる場合に、最終結果をまとめて表示するのではなく、描画している途中状態を見せる方法がある。
この方がユーザは処理が速く感じる。Web で画像よりも示すところがよい。さらに、途中いつでも言えるようになっている点が優れている。少し改良するとすれば、「『Sun』に該当する」というように、ユーザの入力を復先にテキストを表示するのも同様である。また、粗い画唱するとよい。

像を最初に表示し、だんだん解像度を上げるというのも□ 「ボタンがちゃんと押されましたよ」というフィードバッ

この例である。

クも重要。例えば、Canon のデジカメでは、画像のペー□ 時間がかかる作業は中断できるようにしておくべきであジめくりのたびに「クリック音」を発する。似た写真がる。もともと望んでいない作業を待つことほど時間が長並んでいるとき役に立つ。Palm もクリック音を出す。研く感じられることはない。読む気のない Web ページのダ究によると、音によるフィードバックを付けることでボウンロードを停止する「Stop」ボタンは「神様からの贈タンのサイズを小さくできることがわかっている。

り物」のように感じられる。よくできた音声認識システ□ 音声フィードバックの他の例:Panasonic のコードレス

ムでは、システムがしゃべっている最中にコマンドを投電話は、充電台に乗せると音と光でちゃんと正しく置か入することができる。

れたことを知らせてくれる。

□ 要求を即座に実行できるけれども、これといったフィー□ 音によるフィードバックは、情報を得るための動作をユードバックが存在しないケースもある。この場合「あなたザが自発的にしなくても良い点がすばらしい。ユーザはの要求をちゃんと実行しました」ということをユーザにこれにすぐなれるので、異常があるとすぐ気づく。音と知らせる必要がある。

光という 2 種類同時という点もよい。耳や目が不自由な□ 例:通話を終わるとき、回線が切れたことを明確に示す人もいるし、普通の人でもノイズで聞こえない場合や、手段がない。⇒ビープを鳴らしたり、通常の画面表示に物に隠れて見えない場合があるので。

戻すことでこれを表す。ボリューム調節の際、目盛りが変わるだけではなく音を実際に鳴らすシステムもある。
□ 複数のステップがある処理をユーザに行わせるときも、□ Tivo:音を多用している。
□ ボタンごとに違う音色を出す。
□ 内容に沿った音を出す。

フィードバックが役立つ。例:チェックアウト (精算) やアンケートへの回答など。フィードバックにより、ペー• リストの最後までいってさらにスクロールしようとスをコントロールでき、全体でどれぐらいかかり、今どするとティンパニーの低い音がする。いかにも底にこまできているかが分かる。

ついたと感じられる。

□ Fig3.10 は 800.com の例:支払い方法の選択、見直し、レシート受け取りができることがわかる。

• 早送りのスピードを変える際、速くなるほど高い音程で「バ・ブー」と鳴る。同時に、1 個〜3 個の右向3き三角マークをディスプレイに表示し、カーソルが □ Fig.3.12 は ICQ の何十とある Preference シートのだんだん速く動く。

51 例。めったにこれを変えたりしない。例:Display
Email notification on Contact List if Emailis assigned to user" (fukui:よ く わ か ら ん)。

「Preference」はなるべく少なく、メールに気づかないとしても、その問題を解決するよく考えられたデフォルト設定を用ために Preference を見ようなんて思わない。ICP のPreference 設定には山と項目があるが、それを用意するためのプログラムの手間を正当化する理由なんて存意せよ在しない。

□ 「Preference」や「Option」で UI をカスタマイズできるソフトが多い。これはおそらく、開発者メンバー同士□ 動作に関する Preference 設定をゼロにすることを目指が「たいていの人はこれをのぞむ」ということに合意ですべきだ。それができないとしても、このような心掛けきなかったからである。だから個々のユーザに選択させは、設計者を「Preference にするかどうかよく考える」ることにしたのである。

ように仕向けてくれる。。

□ Preference は、ユーザの好みでソフトの動作を自由にカスタマイズできるというすばらしいものだが、大変重6い精神的な労力をユーザに課してしまう。本当は、ユー慣習に従おう (たとえそれがあなたの理想とするデザインと違っていても)ザは自分の作業をやりたいだけなのに。

□ Preference は、ユーザの常識に反することにもなる。 □ 通常、他のアプリケーションも動作しているプラット
多くの技術分野では、個々のユーザのニーズに合わせてフォーム上に自分のシステムを構築する。プラットフォー

変えるなんてことはできない。(例:スイッチを倒すだけ

ムはユーザとのインタラクションになんらかの慣習 (しで左利き用に変わる缶切りなんて作れない。別のを買うきたり、作法) をもっている。それに従うのが一番よい。

しかない。) だから、ユーザは「動きを変えられる」な□ ユーザは、アプリケーションを使ううちに慣習を覚え、んて期待していない。

その動作を期待するようにもなる。

□ ユーザは、「アプリケーションと UI は別個のもので、UI• 例:Web ページの上部や左にカテゴリがならんでいる。

を好きなようにカスタマイズできる」なんて思っていな• 例:携帯電話ユーザは、左ソフトボタンで「選択」し、い。色や形といった見栄えを変更することはあっても、右ソフトボタンで「戻る」「ソフトの振る舞い」を変更しようとは思わない。

• 例:Palm では画面上に機能がならんでいるので、ユーザはめったにメニューを見ない□ ユーザは、ひどい目に会うたびに、すこしづつ我慢の限界に近づく。プログラムの設定を簡単に変えられるということを知っている専門家ですら、問題に不平をいいな □ ユーザは、プラットフォームとアプリケーションをあまり区別できない。あなたのアプリケーションの動きが他がらつきあい、我慢できなくなってようやく Preference設定を変えようとする。(Ellen は、Office アプリケーと違っていると、アプリケーションのせいだとは思わず、ションがファイルをセーブ/オーピンするデフォルトフォ

その装置 (PC,PDA, 携帯電話) がデザインの一貫性を欠ルダの設定をかえるのに 2 年かかった。一度も使わないいていると思う。

「My Document」がいつも出てきて悩まされていた。彼女□ 例:Windows で は 、Cnt-C(コ ピ ー),Cnt-X(切 り 取はデフォルトを変えられるのは知っていたが、変えるたり), Cnt-V(貼 り 付 け)。自 分 の ア プ リ ケ ー ション でめにその時やっている作業を放り出して、Preference 内

Cnt-X(マーク付け) としたら、ユーザは混乱して Cnt-Xの設定場所を探すのは、大変大きな努力が必要だった。)を使わなくなる。

□ 「ユーザはだれもシステムの動作を変えるためにPreference を設定するなんてことはない」と思うべきである。だからデフォルト値の設定は注意深く行うこと。
よくある一般的なケースを考えよう。特定の人が望むかもしれないという特殊ケースは考えるな。

7「Widgetless Features」を目指そう□ 「Widget なし」というのは、我々が目指すべき理想である。
「Widget」はボタン、スクロールバー、メニュー

4といった画面上の部品。これなしにはやっていけない □ Word は「hte」を自動的に「the」に直してくれる。Wordが、「機能が必要なときに利用できるようにする」ことは typo の辞書をもっている。自分で辞書に追加するで、Widget を使って機能を呼び出すことを不要にできことも可能。typo の自動修正を拒否することも簡単。

るケースがある。

Backspace で消して書き直すだけでよい (fukui:本当ですか?)。
• 例:名前の補完機能 (数文字タイプするとそれにマッ□ Canon のデジカメには、複数枚の写真をつなぎ合わせてチする候補を示す機能)
パノラマ写真を作れる機能がある。 1 枚撮るととその右• 例:入力場所を最初のテキストフィールドに自動的に1/3 が画面に残り次の写真をうまく重ねて撮れる。撮影置く時の設定も覚えているので同じ設定で撮れる。
□ Widgetless Feature は、画面をごちゃごちゃにしない□ Widgetless Feature のやりすぎには注意しよう。間違ことによって思考の負担を最小にし、クリックを減らすって解釈してユーザの望まないことをやってしまうより、ことによって肉体的な負担を減らす。

なにもしない方がずっとよい。ユーザが望まないことをしてもその害が少なく、たいていの人のたいていの場合□ 他の例:デスクトップソフトの auto-scroll 機能:ドロッに手間が省ける機能を追い求めよう。

プ先の Window でマウスカーソルをボーダー付近に持ってくると自動的にスクロールする。

□ やり過ぎの例:MS Office Assistant の paper clip の□ Garmin の eMap という GPS 端末:

help system□ キーボードがないのでテキスト入力にはアルファベット □ ドキュメントを「Dear」で書き始めると、目をぎらつかをぐるぐるまわして選択しなければならないが、通りのせて登場し、「手紙を書くのを手伝いましょう」押し売

名前 (注:street name:日本での「町名」に相当) を入りしてくる。この機能はとても嫌われていたので、ライ力するときは、可能な選択肢だけがでてくる。

フルの照準に Paper Clip が描かれた T シャツが販売されもした。MS はついにこの機能を削除した。

□ Fig3.13 「WALLE」の次にくる文字の候補は「R」なので、↓を押すとこれが最初にでてきて (A〜Q はでてこな□ ひかえめにしよう。
「お手伝いしましょうか?」と言ってい) 、「WELLER」にマッチする候補が表示される。もう一ユーザの仕事の流れを中断するのではなく、ユーザに聞度↓を押すと次候補の「s」が出る。

かなくても正しい動作ができる場合を見つけよう。

□ Netscape と IE では、アプリケーションのダウンロード&インストール操作が簡単になっている。通常はダウンロード後にそのファイルを見つけ出してダブルクリックする操作が必要なのだが、これらのソフトでは、ダウンロード後に「インストールします」に同意するだけでよい。
□ Yahoo!Messenger では、ソフト起動時にバージョンアップするかどうか聞いてくれる。Yes なら自動的にプログラムを閉じて、新版をダウンロードし、インストールして、先ほどと同じ場所にプログラムを起動してくれる。
□ Microsoft Word のスペルチェック機能も Widgetlessの一例。従来のスペルチェックでは、その機能を別途呼び出し、別ウィンドウで置き換えや辞書登録といった操作をおこなっていた。Word のスペルチェックでは、文字を入力すると同時に認識できない単語に赤い波線がつく (Fig3.14)。直接修正することも、マウス右クリックで候補を表示することもできる。そのつづりが正しければ、赤い波線を無視することもできるし、辞書に登録することもできる。とても簡単に使えるし、すぐ修正するか後回しにするかを自由に選べる。

5