ユーザインタフェースデザインの方法ユーザインタフェースデザインの方法 Guideline for User Interface Design 奥田充一 * Mitsukazu Okuda 要旨良いU.I.（ユーザインタフェース）をデザインするには技術的アプローチだけでなく，人間研究から人が情報を理解するメカニズムに沿ってU.I.デザイン開発する必要がある。本稿は，人間研究のアプローチから U.I.デザイン開発のための実践的ガイドとして整理したユーザインタフェースガイドラインの概観について述べたものである。人が情報を理解するプロセスを４段階に分け，これに情報の表現形式を加えて，（１）情報の表現形式，（２）情報の感受，（３）感受した情報からの連想，（４）情報の構造化，（５）情報の全体の認識，の五段階の開発プロセスを設定した。各段階においてその考え方と留意点について報告する。 To create better user interface, we need to consider not only technical approach but also human study approach. It is very important to consider the mechanism that human beings understand the information. This study means the practical guidelines for user interface development by human study. We define five phase of the process that human beings understand the information : (1) Style of Information, (2) Perception of Information, (3) Association of Information, (4) Structurization of Information, (5) Recognition of Information as a whole. We discuss the concept and the point for each phase. まえがきインダストリアルデザインにおけるU.I.（ユーザインタフェース）デザイン規範は機械工業時代のマン− マシン−システムの概念に基づくものであった。機械工業時代のマン−マシン−インタフェースでは人間が行った入力（操作）に対するアウトプット情報（結果）は何らかの身体的情報として人間に帰ってき * 総合デザイン本部ソフトデザインセンターた。そして多くの場合，直感的にその結果についての判断を行い，次の動作（インプット）が無意識に行えた。また，操作訓練をすることで直感的に反応が出来る様に人間がシステムに組み込まれた。たとえば自転車を運転しているとき，ハンドルを右に切ればその抵抗が左回転のトルクとして伝わって来る。そしてその他の視覚情報や体に感じる遠心力等の情報が統合されて認知され，それらを全身で認識することができた。したがって特に意識しなくても適切な判断を行い自然に自転車を運転することが出来るのである。この様に，機械と人間との情報交換は意図的に設計しなくても，身体的体験で判断が自動的に行えるシステムであった。したがって，機械時代的マン−マシン −システムにおけるU.I.デザインの役割は，身体的特性に沿った適切な大きさや形を与え，適切なレイアウトすることであった。すなわち，形態でその機器の持つ意味や機能をアフォードすることであった。しかし IT 商品における，情報とシステムのインタラクションの在り方は，設計者が『恣意的に設計』しなくてはならない。言い替えるなら，どんなU.I.（ユーザが理解できなくて，人間の生理に反するもの）であっても設計上作り上げることが可能である。そしてそのことは設計段階において機器と人間とのインタラクションのあり方は必然的に決定されるのでは無く，すべて『意図的に適切なデザイン』にしなくてはならないことを意味する。したがって，我々は IT 商品の U.I. デザイン開発をするに当たり，「人が情報を理解する仕組み」に沿って U.I. デザイン開発を行わなくてはならないのである。人が情報を理解する仕組みに沿ってU.I.デザインを開発できる様に，U.I.デザイン開発ガイドを以下の様に設定した。１ . ガイドラインの概観（情報を理解する五つの段階を設定）人間が情報処理する過程は一般的に，感覚，知覚，認知の三段階に分類して理解されているが，我々は「知覚」，「認識」の段階を「情報の想像」「情報の構造 ― 33 ― シャープ技報第77号・2000年８月化」「情報全体の認識」の三つの段階に分類した。そしてこれら三つの段階に「感覚」の段階を「情報の感受」として加え，人の意識体験を４段階に分けた。さらにこれら４段階に意識体験外の項目として「情報の形式」を加え五つの段階に整理した。（図１）尚，「情報の形式」とは外界から人に対する「情報の刺激の在り方」を言う。ユーザは外界からの様々な情報を感覚機関（目，耳，鼻，舌，身，）を通じて，様々な形式で感受し最終的にはその情報の意味を統合し，情報の全てを認識する。１・１情報の形式情報の形式とは刺激としての情報がどのような手段で表現されているかということをさす。すなわち，それらの情報はビジュアル情報なのか，音声情報なのか，言語情報なのか，触覚情報なのか等である。１・２情報の感受情報がユーザに刺激として感覚器に感受された瞬間その刺激をどの様に感じるかを｢情報の感受｣とした。この段階では感覚器官に刺激としての情報が感受できるに充分な刺激であるか，または心地よい刺激であるか等，ユーザが感覚器で感じる刺激の強弱や快不快が重要なデザインテーマとなる。１・３情報の連想感受された刺激情報を情報として意識化するとき，人は過去の記憶との関連で刺激情報とは別の情報を想起し，自ら感受した情報以上に新しい多くの情報を想起する。この段階を「情報の連想」と呼ぶ。１・４情報の構造化そして人は，次々におこる情報の刺激を情報の塊として認識したり，それらの刺激から関連して想起した情報を関連付けて繋ぎ合わせる。このように情報を関連付けることで情報を概念化したり，まとまったイメージを形成するような意識体験が起こる。このように情報を構造化し連続した意識体験の関係性を理解する段階を情報の構造化と呼ぶ。１・５情報の認識構造化された情報を自らのスキーマに照らし合わせて情報の全体像を理解し概念化する，そして記憶にとどめ，新しくメンタルモデルを構築する。さらに新しく得た知識情報で自己のスキーマを再構築することも含め，この段階を「情報の認識」の段階とした。（図２）２ . 人が情報を理解する５段階に沿った U.I. デザイン開発ガイド U.I. の全体の統制がとれ，明快な U.I. を構築することで，ユーザがメンタルモデルを容易に構築できるようになる。そのために上位の段階（１・５情報全体の認識）から開発を行う。２・１世界観の設定（情報の全体の認識） U.I.デザインを始めるに当たり，機器やシステムがユーザにとっての目的を明確にしなくてはならないのは当然であるが，それらのシステムを使用するであろう人（ユーザターゲット）にも明確にしなくてはならない。その上でユーザターゲットの知的背景がどのようなものか，また開発しようとしている機器やシステムに対してユーザターゲットがどのようなメンタルモデルを持っているかを探る必要がある。開発しようとしているシステムや機器が新しく，ユーザが類似のメンタルモデルを持っていない場合は，どのような他のシステムや事柄でたとえられるか図１情報認識の五段階図２情報の全体の認識 Fig. 1 Fig. 2 Five-steps of information recognition. ― 34 ― Recognition of information as whole. ユーザインタフェースデザインの方法を考える。そして既知の事柄の概念構造やプロセスが今設計しようとしている機器やシステムに似ている場合，その事柄をイメージできる『世界観』を設定する。 U.I.デザイン開発をする場合，その事柄を印象付ける世界観をビジュアルに表現して，世界観を構成する事柄に沿ってU.I.の構造をデザイン開発する。よく知られている事例では，アップルコンピュータのデスクトップメタファやウェッブのショップページに見られるタウンメタファやショッピングモール等がある。もし，開発しようとしているシステムや機器に対するメンタルモデルがユーザにすでに存在し，またそのメンタルモデルがインタフェース上，問題が無ければ，いたずらに新しい構造を構築するのではなく，すでに形成されているメンタルモデルに沿ってU.I.構造をデザインすべきである。すなわち既知のU.I.を継続するのである。しかし新しい未知の機器やシステムはメンタルモデルがユーザになく，適切な比喩する事象が見つからない場合が多い。開発された新しい商品のU.I.の外観をユーザに早くつかめるようにするために，ターゲットユーザの知的背景から容易に理解できる構造をもった新しい世界観を設定する。ここで言う世界観は一般に言われている「人生に対する見方」ではなく，U.I. 全体を一つの世界として捉え，その全体像をユーザが明確にイメージできる様にするために設定したもので，インタラクション構造とそれらを感覚的にイメージできる様に具体的なビジュアルで表現する。ある主題をテーマとしたドラマの演出の様なものである。この世界観の設定はターゲットとするユーザが理解しやすく，メンタルモデルを形成しやすくするのに重要な役割を果たすため，ユーザの価値観や文化性に沿ったもので，出来るだけ具体的な心象として印象に残るものである必要がある。また商品の外形のデザインもこの世界観を象徴するデザインであれば，ユーザのシステムや機器の理解はそれらと出会った瞬間にその外観から直感的に世界観を感じ取ることができる。たとえて言うなら，外観デザインは映画のポスターや予告編の役割を果たすのである。２・２イメージの関連性をデザイン−情報の構造設計（情報の構造化）設定された世界観に従ってU.I.のプロセスの設計を具体的に行う。この骨格（構造）設計はユーザがシステムや機器を使うときコンテキスト context（操作手順，操作の文脈）を決める極めて重要なデザインである。（図３）図３情報の構造化 Fig. 3 Structurization of information. ここで大切なことはインタラクションの「構造」とインタラクションを行う「プロセス」である。同じ情報であっても提示される順番（プロセス）が違えば全体として意味するところが違ってくる。たとえばアルファベットをＡＢＣＤＥの順番で提示すればアルファベットを提示していること以外に，１２３４５という順番をも意味したり，次にＦが提示されることを暗示する。しかしＢＡＣＥＤと提示すれば単純にアルファベットの一部が提示されたか，場合によっては何か意味を成す単語を提示しているのではないかと思わせたりする。ＥＤＣＢＡの順に提示すれは全体は五つで構成されていることを暗示したり，それらに順番があってその逆に提示されていることを理解させることが出来る。この様に情報が提示されるプロセスは極めて重要であるだけでなく，間違ったプロセスは間違った理解を生んでしまう。そして秩序だった美しい構造を持つインタフェースはメンタルモデルを形成しやすくU.I.の理解を早める。そして計算されたプロセスは理解しやすくするだけでなくインタラクションにリズムや心地よい緊張感を作り，気持ちのよいインタラクションを実現する。さらに，部分構造と全体構想を相似形の構造設計することで巨大で複雑な U.I. の理解を飛躍的に早めたり，先で述べた様に，既知のシステムと同じ構造にすることで既知のインタフェースから類推させ，複雑なインタフェース構造を容易に理解させることが出来る。さらに戦略的に整理された U.I. 構造を設計し，イメージを決定するビジュアルリソースを戦略的に管理すると，U.I. のビジュアルリソースを変えるだけでユーザの操作コンテキストを変えないで，インタフェースのイメージや商品のイメージを変えることが出来る。すなわちマイナチェンジやカスタマイズが意図的に行える設計が可能となる。 ― 35 ― シャープ技報第77号・2000年８月２・３感受した情報から連想される場面（シーン）をデザイン〔情報の連想〕図４情報の連想 Fig. 4 Association of information. 全体の世界観に基づいた基本構造が見えた段階でシーンのデザインを行う。この段階では人が大掴みに把握できる情報をひとまとめにしてデザインをする。たとえて言うなら映画の１シーンをイメージしていただければよいし，G.U.I.（グラフィカルユーザインタフェース）の１画面を想像していただいても良い。具体的には一枚の液晶画面に様々な情報が一度に表示されるが，このとき表示された情報の関係や意味を１場面単位で理解し記憶しやすい様に画面全体として関連付け（構造化）をされた画面設計をすること，美しいレイアウトをすることである。このことでユーザは全体の世界観と現在の画面との関連において意味付けと印象付けを行うことが出来る。そのことによって U.I.全体の構造を理解しやすくする。そして現在の操作画面は U.I. 全体の中でどのような画面（位置）にあるかの理解を助け，その場面でのタスクの関係を印象付けることができる。ここで注意しなくてはならないことは一つ一つのインタラクションのタスクとその結果の表示が同次元で起こっていることであり，システムからアウトプットされた情報を理解しながら次の動作（システムにインプットする）を行う，すなわち情報を理解しながらタスクを果たすことが同次元に行われる。この様にタスクと情報が混在する場面では，タスクと情報が干渉を起こさない様にデザインしなけらばならない。文章を読みながら言葉でタスクを果たす様にデザインすると，一見文脈が統一された様に見えるが，実は情報の干渉が起こり判断時間が遅れる場合がある。逆に課題情報を図形で提示し言葉でタスクを果たす様にすると，情報の干渉が起こらず正確な判断が早く行なわれる様になる場合がある。これらのことは画面の２次元的（視覚的）なレイアウトだけでなく，情報の形式の関係を含んだ多次元的にレイアウトをしなくてはならないことを意味する。またユーザは，一つ一つの情報を正確に理解しているのではなく，提示された情報から瞬間的にもしくは連想的に，次に出てくる情報を予想したりタスクを予想したりする。すなわち情報が次の情報を想起させ，情報の連鎖がおこる。ここでは，このように連鎖してユーザが想像することで生み出される情報をも計算に入れ，場面のデザインを行い場面として整理する必要がある。（図４）言い替えるならユーザが場面を理解するとき知識の塊（感情の構造，プロットの構造，スクリプトの構造，目標計画の構造）にあわせて推論をすすめる。ユーザがどのような知識の塊を駆使し推論を進めるかを予想しながらデザインを進めなくてはならない。そしてユーザに１場面に提示する「情報の量」も重要な因子となる。そして，その量はターゲットとなるユーザの記憶負荷を考慮に入れたものでなくてはならない。２・４表現要素のデザイン〔情報を感受〕いかに全体像のデザインがしっかりしていても，肝心の情報が思った様にユーザの感覚器（目，耳，鼻，触覚）に正確に感知されなくては意味はない。（図５）この段階では三つの重要な要素がある。まず第１に情報が感覚器で感受できる充分な刺激であるか否かである。文字が小さすぎたり，充分なコントラストを確保できなくて字が読めなかったり，音の強さが足りなかったり可聴域を越えた周波数（高齢者は可聴域が狭い）を超えて音が聞こえなかったりすると意識体験が生じない。また，情報としての刺激が不充分な，それを補おうとして様々な類推を行い，大きなストレスとなる。これらは情報としての刺激の強弱と質の問題で ― 36 ― 図５情報を感受 Fig. 5 Perception of information. ユーザインタフェースデザインの方法ある。そしてこの課題はユーザの身体的特性や年齢に関係し，ユニバーサルデザインという観点から十分に検討する必要がある。第２の要素はその情報刺激が快く感じられるか否かである。もちろん前述の情報と刺激の強弱なども関係するが，ここでのテーマは美意識や感性の問題である。すなわちユーザの文化性や美意識の問題である。人は普遍的に美しいと感じる場合とその文化的背景や感覚教育によって心地よさの内容が違ってくる。したがってユーザの文化性や美意識に合わせた美しさや，心地よさを生み出す様に情報のデザイン表現を十分吟味しなくてはならない。第３に情報のもつ意味やその理解のしやすさである。特に意味が解釈によってかわるビジュアル表現や警告音などの表現に注意をはらう必要がある。アイコンなどの絵表示は漢字的な表意構造を持っているが，そのデザインによっては意図した意味とまったく違う解釈がなされる可能性もある。このような現象は制作課程では発見しにくいのものであるが，U.I.のプロトタイプによる検証過程では容易に発見することができる。２・５表現メディアプランニング〔情報の形式〕人間は情報の70％以上が視覚情報に頼っているが，情報の内容によってその表現出来る表現形式が違う。デザインを始める前に，今ユーザに伝えようとしている情報がどのような表現形式で表現するのが適切なのかを，情報の表現形式を選択しプランを立てなくてはならない。たとえば「一週間ほど前，貴方に会った時，左手に持っていたのは何か」という文章があるが，これをビジュアル表現をしようとすると至難の技である。しかし文章では簡単に表現できてしまう。また物事のタイミングやリズムは絵や文章より音によるリズムや楽曲で表現する方が的確に表現できる場合が多い。また逆に蝶の羽の美しさはビジュアル表現の方が表現しやすく，いくら上手な文章であっても具体的で正確な情報は伝わらない。（図６）情報は伝えようとする内容によって最も適した表現形式があり，表現形式によって表現できる情報の内容が違う。したがって，情報をどのような表現形式で表現するかをプランニングすることは極めて重要なデザインテーマである。そして，表現形式を戦略的に駆使し，全体としての関係を構築し，人の意識体験を操作すること，それこそがデザインであるといえる。図６情報の形式 Fig. 6 Style of information. ３ . 人の情報の認知プロセス以上のユーザインタフェースデザイン開発ガイドは，情報の全体の把握から，情報のディテールを理解していく過程に沿ってU.I.開発を行っている。すでにお解かりの様に，本開発ガイドは，人が情報を認知するプロセスにおいてトップダウン型処理といわれるプロセスをモデルとしている。しかし設計された U.I. をユーザが理解するときは，情報の感受から始まるボトムアップ型の場合であったり，ユーザのスキーマに照らし合わせて全体の把握から始めるトップダウン型であったりする。またその両方のプロセスを行ったり来たりもする。技術的アプローチを中心としたU.I.はボトムアップ型のプロセスで理解する構造になりがちで，ユーザの理解を妨げている場合が多い。したがって，私達はトップダウン型のプロセスをモデルとした開発プロセスを踏むことで，人が通常行っているトップダウン型，ボトムアップ型の両方をを同時に行える構造を持った U.I. 開発を目指している。むすびここに報告させて頂いたU.I.デザイン開発ガイドラインは開発現場において実用性を重視し，経験的にまとめたもので，論理的正当性を求めたものではない。そして今後さらに解かり易くU.I.を開発するための指針として充実させて行きたい。謝辞本開発ガイドをまとめるに当たり，ご指導，ご協力いただいた諸氏，ソフトデザインセンターのスタッフ各位に厚くお礼を申し上げます。 ― 37 ― シャープ技報第77号・2000年８月参考文献 L.E.リスランド，D.A.ローゼンバウム，S.E.ワイスラー，L.B.ベー１） P.N.ジョンソン−レア−ド（海保博之監修） ,“Mental Model”,産カー＝ワード（海保博之，牧野義隆，川崎恵理子，坂口恭久訳） , 業図書（1988）. “認知科学通論” ，新曜社（1991）. ２） D.Aノーマン（野島久雄訳）,“誰のためのデザイン”, 新曜社（1990）. ５） J.E.ホーバック（田中良久訳） “知覚”，，岩波書店（1966） . ６）株式会社国際電気基礎通信技術研究所編集， “ATR先端テクノ３） P.H.リンゼイ, D.Aノーマン（中溝幸雄，箱田雄司，近藤倫明訳） “情報処理心理学”，，サイエンス社（1986）. ロジーシリーズ−視覚情報科学−人間の認知の本質にせまる” ，オーム社（1994） . ４） N.A.スティリングス，M.A.ファインスタイン，J.Lガーフィールド， ― 38 ― （２０００年５月３０日受理）