インビジブルデザインとは？UberやDropboxに学ぶシームレスなUX

この記事はDropboxやGmailなどの実例を参考にしつつ、自然でさりげないUXを生み出すための実践的なガイドです。

ここ数年で最も成功しているインタラクションデザインの分析をしたとき、Gmailの自動保存機能やUberのクレジットカード入力フォームのような、基本的な機能を完璧に作り込む会社に軍配が上がります。彼らは人間の自然な行動を巧みに取り入れ、私たちが今まで気づかなかった障壁をひそかに取り除いているのです。

インビジブルデザイン（インビジブル＝透明な）とは、ミニマリズムのことについて言っているわけではありません。ミニマリストのインターフェイスはインビジブルデザインを実現するための手段であることは明らかですが、ゴールではありません。

ゴールはユーザーのメンタルモデルと自然に一致するインタラクションシステムを生み出すことです。シンプルなユーザーフロー、明確なビジュアル、そしてユーザー（のミス）に対して寛大なデザインが、デザイナーではなくユーザーのシームレスな体験を可能にするのです。インターフェイスからあなたのエゴを取り除くことができれば、ユーザーは自分がその場の主人公のように感じることができるでしょう。

ユーザーフローをシンプルにする

シンプルなユーザーフローは、必ずしもあなたのデザインスキルを見せびらかすものではありませんが、ユーザーが目的を達成するのに役立ちます。ユーザーが早くゴールにたどり着けるようにするための方法を幾つかご紹介します。

• より少ないステップで — タスクを完成させるために必要なステップをリストアップし、冗長さを取り除きましょう。例えば、 ログインするためには、（１）ユーザー名のフィールドでクリック（２）ユーザー名を入力 （３）パスワードフォームのフィールドでクリックするなどです。どんなステップを辿るのかがわかるようにし、もしデフォルトのカーソル位置がユーザー名のフィールドではじまるなら、不要なステップをそぎ落とすことができます。新たな視点を持つためにもリストアップしていきましょう。

• よりシンプルなステップで — ゴールはできる限り少ないステップにすることではなく、最もシンプルなステップにすることです。見てすぐわかるようなインターフェイスにし、 ユーザーに多くの決断をさせて行き詰まらせることをしてはいけません。もし３回以上クリックしなければならないのなら、ユーザーがあなたのサイトから去ってしまうという考えや３クリックルールに執着せず、その背景にある心理を理解してください。

• ユーザーフローのマッピング — ユーザーフローのマッピングに関してJessica Downey氏の有益な方法があります。BasecampのRyan Singer氏の手法は似ていますが、より早いアプローチ手法をとっています。

• ユーザーテスト — 勘はあまり当てになりません。少なくとも５人のユーザーが、どう本能的にタスクを完了しようとするのかを見てください。こうすることで、上記の様な他のステップを適用する際に、情報に基づいたより確かなデータを得ることができるでしょう。

実際に運用中の簡素化されたユーザーフローの３つの例を見てみましょう（詳細はこちらの電子書籍を参照ください）。

1. Uber

特に携帯電話上でクレジットカードは、入力作業にうんざりすることで有名ですが、Uberはユーザーにカードの写真を撮らせて情報を取得します。

Uber

以下の支払いフローを短縮しています。

• 苗字の入力
• 名前の入力
• クレジットカード番号の入力
• セキュリティコードの入力

これらを簡潔化し、

• クレジットカードの写真を撮る

のみすれば良いようにしています。

ユーザーにとっては、このエクスペリエンスはただ役に立つものではなく、もはや魔法のようなものなのです。

2. Dropbox

Dropboxはサービス自体が、大量のファイルを個々にアップロード・ダウンロードという退屈なタスクを簡略化したユーザーフローとなっています。 

Dropbox

Dropboxはシステムフォルダを導入することで、より素早い体験を作り出しています。

ほとんどのユーザーがOSにおけるフォルダの仕組みがどういうものであるかをよく知っており、ユーザーにとっても学習コストがないシンプルなものとなっています。しかしもっと重要なのは、ユーザーは一つか二つのフォルダの中にすべてのドキュメントをシンプルにドラッグアンドドロップ機能でアップロード・ダウンロードできるということです。

3. Oscar Insurance

Other insuranceのサイトは必ずしも関係ない情報と共に、複数の入力フィールドがちりばめられています。Oscar Insuranceは近代的でシンプルなフォーム入力で業界に革新をもたらしています。

Oscar Insurance

他のフォームフィールドは、現在のフォームに答えが入力されるまでは表示されることはありません。

たくさんのフィールドでユーザーが圧倒されないようにし、ユーザーに次のステップをはっきりと示しています。そしてすべてのプロセスは、“Mad Libs” UI patternの使用により簡略化されており、簡単に保険の見積もりを得ることができるようになっています。このようなことが可能であると誰も想像しなかっただろうと思います。

セマンティック（コンピューターが入力を解釈し、自動処理する）なフォームはユーザーが考える方法と一致し、デザインを目に触れさせないように感じさせます。見積もりが欲しいユーザーとプロセス完結するまでの境界は劇的になくなっていったのです。

メッセージを明確に伝える

ユーザーが混乱するたびに摩擦が生じます。メッセージの明確な伝達はインビジブルデザインの最終目標です。

インターフェイスの中のすべてのものは何かを伝えるものです。空間やサイズは重要性を伝え、色は印象を伝え、スタイルは雰囲気などを伝えます。

個々のメッセージは組み合わせて同調させながら伝えなくてはなりません。ユーザーがどのサイトやアプリに、なぜ気を留めているのか、ユーザができる限り考えずに知ることができなくてはならないのです。

以下のチェックリストに従って、意図するものを明確にし、インビジブルデザインを確かなものにしていきましょう。

• 現実に根付いたインタラクション — 可能であればいつでも、日々の生活で見かけるような人間のメンタルモデルを使ってください。例えば、ボリュームの増加というのは上昇したりだんだん大きくなる画像で表現されます。これはしっくりきます。

• 読みやすさ — 明確に伝達を行うために、すべてのテキストは読みやすいものでなくてはなりません。行間をとるための適切なガイドラインに忠実に従い、背景に対してはっきりとしたコントラストをつけ、理想的なフォントカラーを決定づける安全色を使ってください。  

• 一貫した印象 — 悲しい写真のキャプションにカジュアルな書体は使わないでしょう。あなたの望む印象を作り上げ、うまく一つに融合させるため、すべてのイメージ、書体、そして色を求心力のあるテーマにすることを心がけてください。これはキャッチコピーのトーンやイメージの主題などのコンテンツを含みます。

• シグニファイア — 簡単に理解できるUIパターンというのは、web上でのユーザーの以前の経験から自然と理解するものです。ビデオであることを意味する画像上の再生ボタンのようなシグニファイアは、時間を無駄にすることがなく、一般的に理解されるメッセージとなります。

• マイクロインタラクション — 細部のデザインは、インターフェイスの動き方の中にある隙間を埋めることができます。例えば、マウスのカーソルをあてたときに色が変化するインタラクティブな要素のようなものです。こうしたわずかなきっかけは、ユーザーさえ気づかないうちに伝えているのです。

どのようにこれらの原則が適用されるか以下の例で見ていきましょう。

1. Integrated Podiatry Clinic

スクロールの長いサイトは、迅速にナビゲーションの方法を伝えなくてはなりません。そうしないとユーザーはメニューがないので混乱してしまうかもしれません。

Integrated Podiatry Clinic

The Integrated Podiatry Clinicは、ユーザーのメンタルモデルとシグニファイアを使用することでこの問題を解決しました。中央下に配置した矢印がスクロールを示し、特にミニマルデザインでユーザーの気が散漫しないようになっています。他のサイトからのシグニファイアだと認識するユーザーもいるかもしれません。

ビジュアルがそのサイトや会社について表現していることに気づいてください。背景の灰色はクリニックのプロ意識を適切に表現しており、一方で足の画像と巧みなキャッチフレーズが同時に人間味を持たせています。右下の足跡のロゴは足の治療のテーマを保っています。

明晰なキャッチコピーから柔らかいトーンまで、クリニックには患者をケアする専門家が揃っていることを伝えるために、インターフェイスのデザインがなされています。

2. Future Water City

Future Water Cityは、混乱しやすいインターフェイスをマイクロインタラクションとシグニファイアを使ってわかりやすくしています。

Future Water City via Awwwards

数字のアイコンはそれ自体が十分力強いシグニファイアではないので、それらがインタラクティブなものであるのを見せるために、定期的に色が脈打っています。　

カーソルのマイクロインタラクションもどのようにサイトが機能するのか示しています。カーソルがマップ上にあるときは手のひらマークに変わり、クリックアンドプルのナビゲーションであることを示し、数字の上にカーソルがあるときは指差しアイコンに変わり、クリック可能であることを示します。

ユーザーフローの視点から、インタラクションデザインも色々なタイプのコンテンツ間の距離の認識を縮めています。例えば、数字をクリックしたときはスライドが表示され、製品を説明する別の表示スライドをクリックすることができます。

ページの遷移は起こりません。同じページ上にあるフレームの中で動くようになっているのです。

Future Water City via Awwwards

Future Water City via Awwwards

技術的にコンテンツのステップは同じ数で表現されていますが、フレーム間のスムーズな遷移は実に軽快です。

ユーザーのミスを許容する

真のインビジブルデザインの実現には、UIは常にユーザーのエラーを許容しなくてはなりません。もしユーザーが間違いを簡単に修正できるとなれば、（もしくはデザインによって間違いを避けられるのならば）、ユーザーは安心感を感じます。

以下の秘訣を考慮してみるといいでしょう。

• 取り消しと確認 — よく言われていることですが、実行されたアクションについては「事前の確認（Confirmation）」より「取り消し（Undo）」のほうが滑らかなインターフェイスを生み出します。Aza Raski氏が述べているように、ユーザーはポップアップウィンドウを習慣的に閉じてしまうので、記載の事柄を完全に理解する前に「はい」をクリックするかもしれません。さらに、確認ウィンドウをパッと出したり、考えることを必要とする（例えばコード名をタイプするなどの）アクティビティを埋め込むことはうまく機能しないのです。ベルやホイッスルのようなものは、決意からユーザーの気をそらしてしまったり苛立たせてしまい、ユーザーが早くウィンドウから去ってしまうことを促すだけなのです。取り消し機能はチャレンジするものではなく、習慣ループを把握するものです。幾つか例外があるとすれば、何かを公にしたり危機的なアクション（メールのデータベースをすべて消す）のような、前に戻すことが難しい作業のときは使わないほうが良いでしょう。

Inbox

• 入力フォーマットを提供する — 入力フォームは混乱しがちです。例えばYelpでは、ユーザーは食べ物のタイプや特定のレストランを検索したいかもしれません。Forgiving formatのUIパターンは、ユーザーが好きなようにタイプし、最終段階で整理できるようになっています。「タコス」、「安いディナー」、「Max’s」など、Yelpのプレースホルダーテキストのように、ヒントの入力を通してこの機能をアピールするのです。

Yelp

• 自動保存 — 安いデータストレージを用いた自動保存機能は、人為的ミス、ブラウザクラッシュや停電等、理由は何であれデータをなくしそうになったユーザーにとって、とてもありがたいものです。この効果を最大限にするために、目立たない表示を用意します（以下のGmailの例をみてください）。ユーザーの気をそらさないようインタラクションを必要としないものがいいでしょう。

Gmail

• 例外のエラーフィードバック — すべてのエラーを回避することはできません。エラーが起きてしまったときに、ユーザーが軌道に戻れるように、親切なフィードバックを提供しましょう。何が起きたのか、状況をどう是正するか、何が起こっているかを明確に説明し、次のステップへの行動のきっかけを提供するのです。ユーザーはどちらにせよ目を通すことにはなるようなものなので、簡潔にしておきましょう。

Team Treehouse

まとめ

インビジブルデザインのポイントは、できる限りユーザーの好きなようにさせることです。

たとえどんなにデザイナーが良いと思っても、ユーザーのゴールから注意をそらす恐れのある要素は削除すべきです。ユーザーにとって優れているものと、自分や他のデザイナーにとっての優れているものは分けて考えましょう。

そのデザインにどれだけ手がかかっているかなど、ユーザーが意識せずに使えているならば、それはきっとうまく機能しているということになるでしょう。