World IA Day 2012 Tokyo で講演しました

ユーザー理解に合わせたユーザーインターフェイスデザイン

こんにちは。ソシオメディアの上野です。

ソシオメディアという会社は、ご存じない方もいらっしゃると思いますが、ユーザーエクスペリエンス・デザインのコンサルティングをやっている会社で、主にソフトウェアのユーザーインターフェース設計やユーザビリティ評価、またそういった活動を企業内で実践するための支援などを行っています。
今日のイベントでも何度か話題に出ている、ウェブIAの原点ともいえる「シロクマ本」についても、日本語版の翻訳監修に関わっています。

ユーザーの新たな行動フレームワークをデザインする

今回の World IA Day のテーマは「理解の構造をデザインする」ということですが、「理解とは何か」といったことを考えると非常に深淵なテーマですので、なかなか簡単には答えが出ないと思います。

実際にユーザビリティテストなどを行ったことがある方は知っていると思いますが、ユーザーというのはとても気まぐれでいろいろな行動をとるものですから、せっかくデザインしたものが思った以上に分かってもらえないということはとても多いのです。

ユーザーフレンドリーという言葉は、結構古くから使われています。ユーザーに優しい、ユーザーにとって使いやすいといった意味で、そういうものを作ろうという価値観は、今や普通に重要視されていると思います。

そうすると、ユーザーに分かってもらうための努力の結果、この駅の券売機のようなものが現れます。
もともとのデザインの使い方が分からなくて、利用者からクレームが来たのでしょう。それに対して駅員は一生懸命説明書きを加えたのです。

例えば、まずお札の挿入口近くに5千円札と1万円札は使えませんと書きました。ところが、どうも利用者の目にとまらなかったようで、それでも5千円札と1万円札を使おうとする利用者が絶えなかったのでしょう。そしたらもっとでっかく書けということで、こっちにも同じことを書いた。

この券売機のプロダクトデザイナーがこの様子を見たら嘆くかもしれませんが、これはつまり、利用者があまりうまく使えなかったということなんですよね。

このようなことにならないように、UCD とか HCD といったデザインプロセスの方法論があります。

普通、思いつきで作ったデザインでは、使いやすいものはできない。どうしたら使いやすくなるか。作る前の段階で、いろいろユーザー調査や分析をしてみましょう。いくつもプロトタイプを作って何度もテストをして直しましょう。そしてそういったフィードバックをループさせましょう。

そういう感じでプロセスを冗長化して、リスクを回避し、確実に一定の品質まで持って行く。非常に有効な活動だと思いますし、ユーザビリティ・エンジニアリングとして確立された方法論でもあります。

ただし、ユーザーを観察して、分析して、ユーザーはこういう行動を取るとか、ユーザーはこういうものを求めているとか、そういうことを把握した上でデザインをすることは、少なくとも我々の意識の上ではもう当たり前のことです。

デザインというものが持つ力のポテンシャルを考えると、更にもっと先があると考えているんです。

我々のチャレンジ

例えばABテストとか機械的なロジックでデザインが選択されていくアルゴリズムがもっと進歩すると、品質維持のプロセスは自動化されていくでしょう。

そういった中で、我々デザイナーやデベロッパー、何かものを作る人のチャレンジというものは、デザインをすることによって、それを使う、それを見る、利用する人の行動を変えることなんじゃないかと思うのです。

つまり、ユーザーの行動に合わせて何かを作る、これは一定の品質を確保するために、あるいはシステムへの基本要求を満たすために必要だとして、その上で我々デザイナーが何かをクリエイトし、それを使った人々が新しい行動をとるようになる。

例えば、有名な Suica の自動改札。プロトタイプを作って観察テストを行ったら、どうも読み取り装置の角度が13.5度だと人々は自然にタッチしてくれるということが発見されたとのこと。実際その結果をもとにプロダクトができあがって、うまく使われるようになりました。

ここで注目すべきは、観察の結果理想の角度が判明したということよりも、デザインの結果として、人々が毎日13.5度でカードをかざすようになったということです。つまり、うまくデザインされた新しいサービスと製品によって、私たちが改札を通る時の行動、電車に乗るという行為が変わったのです。

デザインの力というのは、こういったところにあると思います。

それから例えば、iPod はそのサービスデザインも含め、非常に優れたプロダクトであるとよく言われています。iPod を使って我々は音楽をたくさん聴いています。けれど音楽を聴いている時には iPod の存在はほとんど気にしない。気にしているのは音ですからね。

このプロダクトとサービスによって、音楽を買ったり聞いたりする我々の行動は変わったけれども、このプロダクト自体は、我々のその新しい行動の中に自然に溶け込んでしまって、ほとんど透明な存在になっている。

そういったものが理想のデザインだし、理想の新しいサービスのあり方なのだと思うのです。

つまり道具のデザインとは、道具の使い方のデザインと同義なんだと思います。
何か道具をデザインする時、それを使ったユーザーがどういう新しい行動を取るのか、どういう新しい世界を体験するのか、そういったことを作るのがデザインの活動だと思います。

ユーザーの新たな、そして自然な行動フレームワークをデザインする。

注意していただきたいのは、特定の行動を強制するのではなく、ユーザーがあるフレームワークの中で自由に活動できる、そういう新たな世界観というか枠組みを作っていく、それがデザインじゃないかと思うのです。

今日のタイトルに「ユーザー理解」という言葉がありますが、デザインがユーザー理解に合わせるという風に言ってしまとやや一方的すぎるかなと思います。
我々が作ったデザインをもとにユーザーが新たな行動を取る、新たな自分なりの使い方を創造していく。自分で自分なりの使い方をしていれば、当然それは自分で理解して使っているということになりますね。

自分の取った行動の結果を、自分が理解できる。自分にとって意味がある。それがユーザーの次の行動に繋がるのです。

モードレス・デザイン

ところで昨年末に『デザイニング・インターフェース』の第2版が出ました。前回に引き続き浅野さんが翻訳をして、私が監修を担当させていただきました。

いろんなユーザーインターフェースのデザインパターンを集めている本です。ベストプラクティスや、なぜこういったデザインがいいのかという説明がされています。体系的にユーザーインターフェースの勉強ができ、自分たちのデザインに流用したり応用したりして、実践的に使っていける、非常に優れた書籍だと思います。

2007年にこの本の第1版の監修をやりました。その後、自分たちでもUIデザインパターンを作ろうと思ってサイトに掲載し始めたわけですが、その際、UIデザインの一番根源的なパターンとは何だろうと考えました。最も抽象度の高い、すべての元となっているデザインパターンがいくつかあるんじゃないかなと思ったのです。

どうもそれまで私の中では、UIデザインの世界では、大きく2つ、両極のコンセプトがあると感じていました。それを何と呼べばいいのだろうかとずっと考えていて、ある日、「あっ」と分かったのです。

「モーダル」なデザインと、「モードレス」なデザインです。

もともとモードレスという言葉は、Apple のインターフェースガイドラインに出てくる言葉で、UIはモードレスな方がいいですよと書かれていて、言葉としては知っていたんですが、世の中のUIデザインには「モーダル」か「モードレス」かという二つの潮流がある、と改めて気づいたのです。

普段、業務アプリケーションなどのUIをデザインしていると特に思いますが、コンピューターの世界のデザインはものすごくモーダルです。しかし我々はもっとモードレスなデザインにチャレンジしなくてはいけないと考えています。

モーダルとモードレス、少し分かりにくいと思うので、いくつか例を出していきます。

「モーダル」

モードがある状態。コンピューターを使っていて「なんとかモード」に入って作業をするようなもの。
動詞 → 名詞：命令を選んでから対象物を選ぶこと。
言語的：シーケンシャルであること、手続き的であること、始めと終わりが決まっていること。
こういったモーダルなシステムはどうやって作るのかというと、まずユーザーが行うタスクを定義し、それに合わせてデザインします。
例えば業務アプリケーション。業務とはタスクで、まずこれをやりなさい、次にこれをやりなさい、最後にこれをやりなさいと定義されていて、それを厳密になぞるとモーダルなシステムになります。極端にはウィザードのようなものになります。

「モードレス」

モードがない状態。自由な順序と方法で作業するようなもの。
名詞 → 動詞：対象物を選んでから命令を選ぶこと。
空間的：例えば GUI。2次元の空間上にオブジェクトが置いてあって自分の好きな順序で操作していい。
こういったシステムを作るには、ユーザーが扱うオブジェクトの性質に合わせてデザインします。

この二つのコンセプトがあるということです。

具体的な例を挙げてみます。

電車（モーダル）

電車に乗ると行き先が決まっています。線路があってその上を走っていくだけ。
走っている間は我々は何もできません。途中で方向を変えるとか引き返すとか、そういうことはできないわけです。
乗ったら行き先に着く。これはある意味楽です。
楽なんだけれども、自由はない。

自動車（モードレス）

乗ったら自分の好きなように運転して、好きなところに行ける。どこまでいったら終点なのかは、自分が決めていいのです。

直進ボタン｜左折ボタン｜右折ボタン（モーダル）

あるシステムの要件として、直進できる、左折できる、右折できる、ということがあった場合、その三つをボタンにして画面に置く。

ハンドル（モードレス）

同じ要件に対して、ハンドルという、全く違う観点からの解決。こうすると、直進も左折も右折もできるし、あらゆる角度で動くことができる。
こういうことを、業務アプリケーションでやろうとした場合、「これだと45度の角度で曲がれてしまうので要件と合わない」と却下されたりします。ただデザイナーというのは、求められている要求事項を単に画面にする、部品にするのではなくて、それをトータルで網羅する別な視点や考え方をデザインに注ぎ込む必要があると思います。

コース料理（モーダル）

この通り食べなさいと順番が決まっています。料理人が決めた線形のストーリーに従うことになります。

お弁当（モードレス）

自由な順序で食べていい。
ただしひとつひとつの料理が完全に無関係ではなく、全体としてあるバランスを形作っています。

手にフィットする西洋包丁（モーダル）

我々の手の形をよく観察して、グリップが手に合うようにできています。
しかしこれに合わない手の大きさだったらどうするのか。その場合は、これはあまり便利なものにはなりません。

和包丁（モードレス）

板前さんが使う和包丁。このグリップの部分、まったくフラットでストレート。
ただここには、職人が持っている様々な技法やスキルを完全に反映するプレーンな無限性があり、職人はあらゆる使い方をすることができます。

ファイルダイアログ（モーダル）

何かファイルを開きたいときに、まずメニューから「開く」を選びます。それから開く対象のファイルを選びます。
先ほど言った、動詞 → 名詞の操作です。

デスクトップ上のファイルをクリック（モードレス）

まず開きたいものを指し示します。それから右クリックなりダブルクリックして開きます。
名詞 → 動詞の操作です。

PowerPoint の図形ツール（モーダル）

PowerPoint と Keynote で象徴的な違いがあります。
四角の図形を描きたいときに、PowerPoint ではメニューからまず四角を選びます。そうすると四角描画モードに入り、そのモードにおいて、キャンバス上を斜めにドラッグすると四角が描かれます。
そのモードから出るためには一度どこか別な所をクリックしなければならない。

Keynote の図形ツール（モードレス）

Keynote では、同じようにメニューから四角を選ぶのですけども、その瞬間に勝手に四角のオブジェクトがキャンバス上に生まれます。つまりここではモードが発生していないのです。
このプロトタイプ的に生まれた四角形に対して、ユーザーは大きさを変えたり色を変えたりしていくのです。
PowerPoint と Keynote、似た機能ですけれども、この操作手順の違いは非常に特徴的です。

Windows XP の「画面のプロパティ」コントロールパネル（モーダル）

選択肢から何か選ぶと、これをどうしますか、というモードに入って、下の「OK」「キャンセル」「適用」のどれかを押すまでモードから出られません。
システムがモードに入って、ユーザーの行動を待っている状態です。

Mac の「デスクトップとスクリーンセーバ」環境設定（モードレス）

Mac でデスクトップピクチャを選ぶとき、選んだら裏側ですぐにデスクトップの絵が変わります。
ここではOKボタンもキャンセルボタンもありません。
つまりモードがありません。

Yahoo! Japan の為替のレート換算（モーダル）

普通に考えたらこういうUIになります。
実はこれ、ミニウィザードですね。「穴埋め式」のパターンです。
まず、元の金額の数値を入れてください、通貨を選んでください、変換先の通貨を選んでください、最後に換算するボタンを押してください。
全体がタスク指向でモーダルです。

Mac の「単位換算：通貨」ウィジェット（モードレス）

これには決められた操作の順序はありません。始まりと終わりもありません。
どこから選んでもいい。通貨から選んでもいいし、数値を入力してもいい。
この左側と右側が、イコールを境にして等価であろうと自律的に動きます。

タスクベースの画面遷移（モーダル）

業務系のアプリケーションではよくこんなのがあります。
3つの業務要件があって、レコードを追加する、更新する、削除する。
何も考えずに要件どおり作ると、タスクごとに入り口が別れている3つのウィザードを作ってしまうんですね。
こうしてしまうと、同じ一覧だけどボタンだけがちょっと違うというような、似たような画面がいくつもできてしまい、また操作の自由度も低くなります。
ウィザードは一種のモードですから、作業の途中で気が変わった場合一度最初に戻ってモードを出てからでないと別の作業に移れません。

オブジェクトベースの画面遷移（モードレス）

これをモードレスのデザインで考え直すと、共通要素として検索機能と一覧があって、最初から対象オブジェクトが見えているという形になる。
一つを選んで、編集をするのか削除するのかを選ぶ。対象物を選んでからそれに対するアクションを選ぶという流れです。
先ほどのと比べて、同じ要件を満たしているのに画面数は大幅に少なくなっているし、操作の自由度も高くなっています。
途中でやりたいことが変わっても、いちいちモードから出るという手続きが必要ありません。

機能やサービスの要件をそのまま単純に画面に置き換えても、インタラクションとして最適化されていなければ、使いにくいものになってしまいます。
そこで我々は、全体の要件を満たす新しい視点、新しい世界観というものを作っていく必要があるのです。

• モードレスデザインのメリット
  • 操作手順/画面数が少ない。
  • 段階的な試行錯誤ができる。
  • 使えば使うほど効率的になる。
  • 楽しい。
• モードレスデザインのデメリット
  • 使いこなすには創造性が必要。

モードレスデザインが何故楽しいかというと、自分がコントロールしているからです。人は、身の回りのものをコントロールできている時に、楽しいと感じるのです。

ただしモードレスデザインにはデメリットもあります。使う側に創造性が必要になるのです。
画面上の記号を解釈して、自分で作業のしかたを考えながら使わなければいけないのです。
そのため、はじめて使うユーザーでも確実に目的を達成できなければいけないような製品には向きません。

モードレスデザインをするにはどうするのか。これはすぐにできます。
デザインを考えるときに、タスクよりもオブジェクトを見せる。ユーザーの関心対象となるオブジェクトをまず見せる。
オブジェクトはそれ自身が役割を体現する。GUIの基本ですね。
そしてユーザーが直接的にオブジェクトへ働きかけられるようにし、またそれを元に戻せるようにもする。
操作のシンタックスは「名詞 → 動詞」で。

事例：国立国会図書館サーチ（開発版）

では最後に、モードレスデザインを適用してみた事例をご紹介します。

「国立国会図書館サーチ」の開発版です。これはもう今は正式版になっています。
2009年にベータ版のようなものを出す際にUIデザインを担当しました。

このサービスは機能が盛りだくさんで、スペックとしては非常に複雑です。
全所蔵図書、デジタルアーカイブ、レファレンス情報をはじめ、全国の公立図書館なども横断検索でき、国内にある豊富な「知」を活用するアクセスポイントとなるという、壮大な構想です。
しかもターゲットユーザーは「国民」。研究者とか図書館の専門家も使うけれども、そうでない普通の誰でもが使えるようなものでなければいけないと。

そこで私はデザインコンセプトとして2つ考えました。

シンプル

まずできるだけシンプルにというのは誰でも考えることですね。普通に作ったらものすごく複雑になってしまいますから、機能性を保ちつつどこまでシンプルに見せられるか。

一度に見せる要素を限定したり、一般の人でも分かる用語や分類を用いるなど、ライトユーザーがすぐに使い始められるようにしました。

モードレス

そしてモードレスです。既存の書誌検索サービスの多くは、検索モードが複数あったり、条件入力と結果画面が別れているなど、操作手順を知識として知っていないと使いこなせないものが多いのです。そこでもっと自由な順序で検索行為を試行錯誤できるようにしました。

例えば検索条件を段階的に追加できるようにしたり、時間のかかる横断検索は、最初にモードを選ぶのではなく、非同期で後からシームレスに結果が挿入されるようにするなどです。

技術的にもチャレンジングなことが多いので、必ずしも理想のデザイン案がそのまま現状のベストなソリューションになるわけではありません。また、モードレスな操作体系、つまり GUI のオブジェクト指向なインタラクションを分かりにくいと感じる人がいることも分かっていましたので、あえてモーダルなインタラクションを採用した箇所もあります。

こうしてリリースされたこのサービスですが、非常に好評で、今では国立国会図書館サイトのメイン検索サービスと言える存在になっています。

以上、ご静聴ありがとうございました。