メタファからイディオムへ

「フラットデザインはUIを進化させるか」では、フラットデザインの特徴を述べると同時に、これからUIが進んでいくであろうモードレスデザインとの関係について触れました。

今回はその裏にある、UIデザインの本質的な要素の捉え方について、メタファとイディオムという観点から掘り下げてみます。またそこから導かれる、開発プロジェクトにおけるUIデザインの位置づけについても考えてみます。

スキュアモーフィック → フラット

フラットデザインと呼ばれる平面的で抽象的なUIのビジュアル表現は、装飾的で写実的なスキュアモーフィックデザイン（現実の物の形や質感を模した表現）に対するカウンターとして注目されています。

つまり、「スキュアモーフィックからフラットへ」というトレンドの変化です。

フラットデザインは、単に見た目に新鮮であるだけでなく、UIオブジェクトから例えばドロップシャドウ、テクスチャ、境界線といった装飾を減らして表示コストを下げたり、スクリーン全体の中でのUIの強調度合いを減らしてユーザーがコンテンツにより集中できるようにするという狙いがあります。

しかしグラフィック表現を単調にしすぎると、オブジェクト同士の役割の違いや、自己説明的な性質が弱まって、分かりにくいUIになってしまう恐れもあるでしょう。その辺りは当然、バランスを取る必要がありそうです。

では、我々にとって「分かりやすい」UIデザインとはどのようなものでしょうか。

スキュアモーフィックデザインの特徴としてよく言われるのが、「メタファ」の活用です。メタファとは概念的なものを理解しやすくするための比喩的な表現で、「デスクトップ」「フォルダ」「ショッピングカート」など、GUI をデザインする上で基本的なテクニックとなっています。

コンピュータを用いて行う情報操作は極めて概念的かつ複雑であり、その内部的な機構やアルゴリズムは一般的なユーザーには理解できないため、メタファを用いてUIを表現することで、システムの操作体系を直観的に分かりやすくしようという試みです。特に「デスクトップメタファ」と呼ばれる作業空間の比喩表現は、Mac や Windows などの GUI 環境に慣れていく上で非常に重要な役割を果たしてきました。

しかしメタファを利用したUI表現には限界があります。

メタファの限界

メタファに従ってシステムの作業空間全体をデザインしようとすると、色々な問題が起きます。

例えば、都合のよいメタファが見つからないという問題。アプリケーションが提供する機能やデータオブジェクトにメタファを用いたアイコンを付けようとした場合、ちょうど良いメタファが見つからない場合があります。

名詞を現すメタファは比較的見つけやすいのですが（なぜなら実際の物を絵にすればよいので）、動作を示唆するメタファは難しいことが多くなります。封筒のアイコンは「メール作成」なのか「メール受信」なのかそれとも「受信箱」なのか。

よく「ファイル保存」ボタンのアイコンにフロッピーディスクのアイコンを用いるのは時代遅れなのではないかという議論がありますが、そもそもファイル保存という動作の概念をひとつの絵で現すのは無理があるのです。

またデザイナーとユーザーとの間に文化や習慣の共有がないと、メタファが意味を成さなくなります。例えばあるメーラーでは送信ボタンのアイコンに「青いポスト」のアイコンが用いられていました。これはアメリカ人にはすぐに郵便ポストであることが分かりますが、日本人には分かりません。

あるいは、メタファとして用いる現実世界の物やシステムの働きとの整合性を保つことを優先して、本来ソフトウェアであるからこそ実現できる機能や情報の概念が活用されずに、製品のポテンシャルが下がってしまう恐れもあります。

このようなメタファの問題は、GUI のデザインにおいてずっと指摘されてきました。

例えばデスクトップを模しているはずのスクリーン背景のことを「壁紙」と呼ぶのはおかしいとか、Windows のスタートボタンを押してメニューがせり上がってくるのは重力に反しているとか、ひとつのフォルダの中に無限にものを入れられるのは現実的ではないとか。

それでも、デスクトップ、フォルダ、ファイル、ウィンドウ、ゴミ箱、といったメタファが有効であったのはなぜでしょうか。

それは、これらのメタファが、ソフトウェアにおける新しい作業概念を理解するための良い手がかりだったからです。

本来 GUI の操作体系を理解して使いこなすためには、ファイルシステムやオブジェクト指向といった概念を把握する必要がありますが、そのような概念を一般的なユーザーになんとなく分からせるために、現実世界のメタファを用いるのが近道だったのです。

別の言い方をすれば、メタファは私たちが GUI の記号や振る舞いを覚えるためのちょっとした手がかりにすぎないのです。現実世界の物を模した表現は、一度システムの世界観や操作のパターンを学習してしまえば、もう重要ではありません。

ゴミ箱は直観的か

よく良いUIの条件として「直観的である」ことが求められます。では直観とは何でしょうか。辞書には、「推理を用いず直接に対象を捉えること」といったことが書かれています。

例えばパソコンのスクリーンにあるゴミ箱アイコンは直観的と言えるでしょう。ゴミ箱は現実世界で見慣れており、それが不要になったものを捨てる場所であることが推理を用いずに予想できるからです。

しかし推理を用いないといっても、実際には、我々はもともとゴミ箱の役割を知っていたわけではなく、生活の中でそれを学習してきたのです。またゴミ箱というものを絵にする場合の図形的なパターンを学習しているからこそ、パソコンのスクリーンにあるものがゴミ箱であることが分かるのです。

一般に「直観的である」と呼ばれているものは、このように、すでに学習していることを手がかりに、新しい経験の意味を予測したり確認したりしやすいということです。

別な言い方をすると、パソコンのゴミ箱で我々が学習したのは、それが「不要になったファイルを捨てる場所」であるということよりも、「不要になったファイルは捨てることができる」というシステムの世界観なのです。

このようなコンピュータの操作概念を理解するためのきっかけとして、ゴミ箱のメタファが役立っていたのです。それ以前の、何の予備知識もなくはじめてパソコンに触ったユーザーにとって、ゴミ箱アイコンは直観的とは言えないでしょう。ファイルという概念や、クリックやドラッグというマウスの基本的な使い方を知らないユーザーにとって、ゴミ箱アイコンの役割は予測できません。

同様に、「ウィンドウ」というメタファはそれが「矩形の枠の中に風景の一部が見えている」という GUI の様式を理解する手がかりであって、現実世界の「窓」とそれ以上に共通する部分はありませんし、「フォルダ」についても、ファイルの入れ物であるという以上の意味は持ちません。

ですから、GUI の一般的な世界観、インタラクションのパターンをすでに学習しているユーザーにとっては、現実世界の物を模したメタファ表現はあまり重要ではないのです。むしろ、ソフトウェアならではの振る舞いや概念の構造を表現するためには、メタファは邪魔になることも多いのです。

デジタルな世界では非常に大規模で複雑な情報を管理できるため、そこで実現されるサービスをより良くまとめ上げるには、物理的な材質や機構に紐づけられたプロダクトデザインと違い、ソフトウェアならではの新しい入出力の表現が求められます。そこでは本来、我々が現実世界の生活体験をもとに「推理を用いず直接に」理解できるような単純な比喩は適していないのです。

そこで注目すべきなのが、GUI における「イディオム」です。

GUI のイディオム

イディオムとは「慣用句」のことですが、GUI におけるイディオムとは、ビジュアル言語として、あるいはインタラクションのパターンとしての慣用表現のことです。例えば「データはある単位で作成、変更、移動、複製、削除できる（ファイルと呼ばれてきたもの）」ことや、「コンテンツはある単位で表示、拡大、縮小、非表示、前後切り替えできる（ウィンドウと呼ばれてきたもの）」といったソフトウェアにおける約束事が、GUI におけるイディオムです。

我々が普段話したり書いたりしている自然言語が、いくつかの決まった文字や音節の組み合わせによって単語や文、そして慣用句といった豊富な表現力を持つのと同様に、GUI におけるインタラクションも、下記のように、いくつかの単純な表現が階層的に組み合わさって、複雑な表現を可能にしています。

• 最小単位
  • 操作：マウス移動、マウスダウン、マウスアップ
  • 表示：カーソル、テキスト、四角、丸
• 組み合わせ
  • 操作：クリック、ダブルクリック、ドラッグ＆ドロップ（ジェスチャ）
  • 表示：アイコン、ファイル、テキストボックス、チェックボックス、ウィンドウ、メニュー、重なり表現、ハイライト表現
• イディオム（操作と表示の慣用表現）
  • データ作成、保存、削除、送信、スクロール、ソート、ダイアログ、ハイパーリンク、一覧と詳細…

インタラクションの一番小さな単位であるマウス移動やマウスダウンは、それ自体何の意味も文脈も持っていませんが、それを一定の順序やリズムで組み合わせたジェスチャによってユーザーの操作意思がシステムに伝えられ、そして入出力の組み合わせパターンであるイディオムによってユーザーのビジネスゴールとシステムの設計思想が橋渡しされます。

これまでメタファと呼ばれてきた GUI デザインのテクニックは、実際には、その大部分はイディオムのことなのです。GUI に慣れていないユーザーがイディオムを学習するための手がかりとして、比喩的な表現を含めていたに過ぎないのです。

コマンドライン・インターフェースでは、ユーザーはシステムとインタラクトするために非常に高い精度で命令の種類やモードの変更方法を覚えておかなければいけませんでした。それに対して GUI では、ユーザーはマウスで画面上の選択肢を指してクリックするという単純な操作だけで複雑な情報処理ができるようになりました。この操作パラダイムこそが GUI の本質であり、選択肢のアイコンが比喩的であるかどうかは言ってみれば二義的な要素なのです。

GUI に慣れた現代のユーザーにとっては、なかば無理矢理な比喩表現を用いる必要性は低いでしょう。それよりも、純粋にビジュアルおよび振る舞いのパターンからユーザーが適切にイディオムを学習して、ソフトウェアならではの豊かな世界観を把握できるようにすることが望まれます。

メタファのように、連想による「直観」に依存するのではなく、GUI を通して起こるインタラクションの記号性や規則性からユーザーが自然にその意味や扱い方を学習できるようにすることが大切なのです。メタファを経由せずに理解を促すイディオマティックなUIは、より直接的な学習を促すのです。

メタファ → イディオム

昨今タッチデバイスの普及によって、従来のマウスベースに比べて入力ジェスチャの種類が増えました。そのため、イディオムレベルのパターンも増えています。しかしここはまだ発展途上の世界であり、iOS、Android、Windows といったOSベンダーをはじめ、サードパーティも含めて様々な表現が試みられています。

iOS のスクロールビューには、ドラッグ可能なスクロールバーはありませんから、何も知らないユーザーは、どうすればスクロールできるのか分かりません。しかし指で触れて少し動かしてみれば、ビューのどこでも指で上下になぞればスクロールできることが分かり、このことはすぐに学習されます。

写真の拡大縮小は二本指でピンチの動作をするだけでできますが、その手がかりは画面上にはありません。しかし一度それができると分かれば、このイディオムは「直観的」となります。

保存ボタンのアイコンとして何の絵がふさわしいのかという議論は、昨今のデバイスではもはや意味が無くなりつつあります。なぜなら、編集内容はユーザーが特別な操作をしなくても自動的に保存されているのがあたりまえになりつつあるからです。一度この「入力した内容は次にもまた残っている」というイディオムを学習したユーザーにとっては、保存操作という概念自体が不要になり、UIは一段モードレスに近づきます。

アランクーパーは著書『About Face 3』の中で、「すべてのイディオムは学習を必要とするが、優れたイディオムは一度学習すれば身につく。」と言っています。

iOS のスクロールのように、自然に学習できるイディオマティックなUI表現が成功すれば、UIオブジェクト自体をスクリーン上で強調する必要はなくなります。

フラットデザインに話を戻すと、フラットデザインにおける「UIの抽象化」「機能主義的表現」といった発想は、単に

「スキュアモーフィックからフラットへ」

という表層的な変化ではなく、その裏には、

「メタファからイディオムへ」

という、GUI の表現をより本質的なレベルに移行させる試みがあると言えるでしょう。

つまりこれからのUIでは、「ちょうど良いメタファを探す」ことよりも、「学習しやすいイディオムを作る」ことが重要なのです。

そしてこの、ユーザーの学習によって成立する豊かで直接的なインタラクションは、まさにモードレス・ユーザーインターフェースそのものと言えます。

UIデザインの本質はそのシステムに最適なイディオムを作ること

ユーザーインターフェースのイディオムは、システムやアプリの世界観を決定する法則であり、操作の流れやオブジェクトの意味をユーザーが学習するための原理となります。

例えばあるアプリにおいて、スクリーンの左半分がリスト表示で右半分が詳細表示であれば、リストの一行を選択するとその内容が右に表示されるということが分かりますし、リストの上に虫眼鏡アイコンの付いたテキストボックスがあれば、そこに検索機能があってリストの内容をフィルタリングできることが分かるでしょう。リストの近くに「新規」や「＋」といったラベルのボタンがあれば新たにレコードを追加できることが分かり、「削除」や「−」といったラベルのボタンがあれば選択したレコードを削除できることが分かります。また詳細表示がフォーム形式になっていれば選択項目の内容編集ができることも分かるでしょう。

つまりこれらスクリーン全体のイディオムから、これが「データの追加、検索、変更、削除」（いわゆる CRUD）操作ができるアプリであることが分かります。仮にユーザーが同じようなイディオムを目にしたことがなくても、レイアウトの論理性（上部で行った操作が下部に反映される。左部で行った操作が右部に反映される。など）によって、ユーザーはアプリの世界観を学習できるでしょう。

ユーザーにとってのシステムの世界観はイディオムによって決定されます。上記のような単純な CRUD のためのイディオムは比較的見慣れたデザインパターンとしてありふれていますが、もう少し複雑な情報群の概念や特殊な順序性を持つ操作を示唆する必要があるシステムでは、イディオムのデザイン次第でユーザビリティは大きく左右されます。

UIデザインの作業の本質は、システムの要件を満たし尚かつユーザーが操作方法を学習できるような、最適なイディオムを作ることにあるのです。そのためにUIデザイナーは様々なデザインパターンを熟知し、また必要に応じて新しいインタラクションの原理を発明していくのです。

ですからソフトウェアサービスの利用価値を最大化するためには、その企画段階もしくは要件定義の初期段階において、すでにイディオム検証のためのUIデザインを開始していなければいけません。

ソシオメディアでは、ウェブサービス／アプリの機能や操作フローがまだ決まっていない上流工程からお手伝いさせていただくことが多くあり、高い評価をいただいています。

実際、企画者によるシステムへの要求事項について、概念上の論理性やデータ処理上の実現可能性があったとしても、人が操作する GUI としては成立しない（学習しやすいイディオムとして表現しにくい）場合が結構あるのです。そのことを早期に認識し、必要に応じてシステムのスコープやユースケースを定義しなおす機会の逃さないためにも、できるだけ上流工程でUIの専門家がプロジェクトに参加する必要があるのです。