モバイルフロンティア (The Mobile Frontier)

先日、「The Mobile Frontier : A Guide For Designing Mobile Experiences (by Rachel Hinman)」を読みました。和訳版は出ていませんが、レビューでとても評判がよかったので (Amazon.com の Editorial Review を見ると、Josh Clark 氏や Dan Saffer 氏といった大御所が推薦しています)、原書に挑戦してみました。

The Mobile Frontier : A Guide For Designing Mobile Experiences

モバイル機器 (スマートフォンやタブレット) の登場によって、従来のデスクトップ (PC) とは異なる新しいユーザーエクスペリエンス (UX) がもたらされようとしています。その状況を「フロンティア (未開拓地帯)」と見立てて、今後どうデザインしてゆけばよいか考えてゆこう...という本です。

この記事では、本書の中で興味深かった内容を、いくつかご紹介したいと思います。

UI のパラダイムシフト

従来のデスクトップ (PC) に加えモバイル (スマートフォンやタブレット) でのコンピューティングが「当たり前」になるにつれて、ユーザーインターフェースのパラダイムが、GUI (Graphical User Interface : マウスなどの媒介物を通して操作する UI) から、NUI (Natural User Inferface : 媒介物を通さずに、タッチやジェスチャなどで直接操作する UI) へ急速に移行しつつある、ということが書いてあります (第2章 "The Emergent Mobile NUI Paradigm")。

本書では、NUI の原則が8つ、掲げられています。

  1. Principle of Performance Aesthetics
    (インタラクション自体が美しく心地良いこと。)
  2. Principle of Direct Manipulation
    (マウスやキーボードなどを介した間接操作ではなく、直接操作できること。)
  3. Principle of Scaffoldings
    (一度にすべてのオプションを提示するのではなく、ユーザー行動に対応して、次のインタラクションを適切に/徐々に示すこと。)
  4. Principle of Contextual Environments
    (コンテキスト/環境の変化に対応して、次のインタラクションを適切に示すこと。)
  5. Principle of Super Real
    (インタラクションが「超」リアルである/とても自然であること。)
  6. Principle of Social Interaction
    (機械やシステムを操作するという感覚ではなく、ソーシャルなインタラクション/人とのつながりに重きをおくこと。)
  7. Principle of Spatial Relationships
    (アイコンのような情報代替表現を用いるのではなく、そこに存在するもの/オブジェクト自体が情報であり、オブジェクト間に空間的な関係性があること。)
  8. Principle of Seamlessness
    (操作をするうえで、シームレスな感覚をユーザーにもたらすこと。)

モバイルコンテキスト

モバイル UX のデザインにおいては、モバイルコンテキスト (即ち「anywhere & everywhere」と本書では言っています) に沿うことが大事である、ということが書いてあります (第3章 "Peanut Butter in Denver")。

モバイルコンテキストへの共感 (empathy for context) を持ってデザインするために、本書では3つの原則を掲げています。

  1. Focus on creating experiences that are uniquely mobile.
    (モバイルならではの体験を創出することに重きを置く。)
  2. Design for partial attention and interruption.
    (ユーザーの注意力が断片的であっても、また途中で邪魔が入っても、使えるようデザインする。)
  3. Reduce cognitive load and opportunity cost.
    (認知負荷を下げ、機会損失を減らす。)

また、モバイルコンテキストに沿ってデザインをする際に押さえておきたい「こつ」として、以下の6項目を挙げています。

  1. Trim the fat
    (ぜい肉を落としてスリム化する。)
  2. Design for "glance-ability"
    (パッと見で理解できるようにする。)
  3. Reduce digging
    (階層を深掘りする UI にしない。)
  4. Grease the skids of natural connection points
    (ユーザーの目的達成を優先して、スムーズなアプリ間の連携を提供する。)
  5. Enable "picking up where you left off"
    (前回終了したところから始められるようにする。)
  6. Use time as an organizing principle
    (情報の整理に、時間軸を用いる。)

コンバージェンスとエコシステム

モバイル UX をデザインするうえでは、「コンバージェンス」や「エコシステム」を意識することが大事である、ということが書いてあります (第4章 "Shapeshifting")。「コンバージェンス (Convergence)」という語には、「集中」「集約」「収束」という意味がありますが、ここでは、ひとりのユーザーがあるコンテンツやサービスを利用するとき、適宜複数のデバイスを使い分けて利用する (でも体験としては、ひとつのまとまったものである) ことを意味します。様々なデバイス (併せて、プラットフォーム、サイト、アプリ、なども) が「エコシステム (Ecosystem : 生態系)」のように複雑に関連し合っている中で、いかにスムーズに、ひとつの UX を提供するか...が肝要と言えるでしょう。

エコシステムの中でひとつの UX を提供するためのヒントとして、本書では「Patterns for Multiscreen Strategies」が紹介されています。

  • Coherence
    (デバイスごとに最適化された情報提供/利用方法を提供しつつも、ひとつの体験としてデバイス間で一貫性を保つ。)
  • Synchronization
    (デバイス間でコンテンツを同期させる。)
  • Screen Sharing
    (複数デバイスの画面を組み合わせてひとつのコンテンツを形成/表示する。)
  • Device Shifting
    (デバイス間でコンテンツを移動させる。)
  • Complementary
    (複数のデバイスが相互に補い合う関係によって、ひとつの体験を形作る。)
  • Simultaneity
    (別のデバイスで、関連情報を参照したりする。)

モバイル UX のパターン

本書では、モバイル UX をパターンとして整理するという試みもなされています (第5章 "Mobile UX Patterns")。以下の5つのパターンがあるとしています。

  1. "The Cloud" and Applications as Natural Set Points for Mobile
    (従来の PC における「ファイル」や「フォルダ」といった概念がなく、ネットの「向こう側/クラウド」で、あるいは「アプリ」という単位で、ものごとを行なう。)
  2. Good Mobile Experience Progressively Reveal their Nature
    (優れたモバイル UX は、必要なときに必要な情報を過不足なく提示することで、もたらされる。)
  3. Content Becomes the Interface
    (コンテンツ自体がインターフェースとなる。UI クローム、つまり GUI におけるアイコンなどのような付加的な視覚表現を用意しなくても、直接コンテンツに触れる形で操作する。)
  4. Uniquely Mobile Input
    (モバイルならではの情報入力が可能である。たとえばカメラによるQRコードの撮影、マイクからの音声入力、RFID、GPS、センサー、NFC、などが利用できる。)
  5. Say Good-bye to Done
    (タスクの完遂だけでなく、利用過程におけるインタラクションの心地良さも大事である。)

プロトタイピング

本書では、モバイル Web サイトやモバイルアプリを制作するうえでのプロトタイピングについても解説しています (第6章 "Mobile Prototyping")。

包括的に、様々なプロトタイピングが紹介されていますが、特筆すべきは、モバイルならではのプロトタイピング手法が具体的に示されていることでしょう。たとえば 、以下のようなものです。

  • 原寸大での、スケッチやペーパープロトタイピング。
  • モバイル機器上で実際に表示してみる簡易プロトタイピング (In-Screen Mobile Prototype : 設計している各画面のスケッチを写真撮影し、その画像を適宜トリミング/編集したうえで画面遷移順にモバイル機器内のフォトギャラリーに並べて、順に表示して検証する、という手法。)

いずれの手法も、実際のデバイス上での表示/操作に近い感覚で検証する (手にとって、触ってみながら検証する) ことに重きを置いているのが面白いところです。


このほか本書では、インタラクションにおけるモーションやアニメーション、人間工学的な観点での考察 (タッチ/タップのしやすさ、自然で直感的なジェスチャー、音声認識の可能性や課題、など)、といった内容も盛り込まれています。

総じて、モバイル Web サイトに限らず、アプリを含めた指南書と言えます。概略的なこと (モバイルの普及で UX はどう変わってゆくか、といったこと) から実践的なハウツーまで幅広く網羅された入門書、という印象も受けました。わりと平易な英語で書かれているので、興味のある方は、お手にとってみてはいかがでしょうか (日本では販売されていませんが、Roselfeld MediaAmazon.com で購入することができます)。