先日 (11/16 (土))、HCD-Net 教育セミナー「サービスデザインの方法論」に参加してきました。その中で講義「スマホにおけるUIパターン」について、少しだけお話してきました。
モバイルにおけるパターンと言うと、そのほとんどがレイアウトとナビゲーション（エレメント単位）のパターンを指すことが多いと思うのですが、ちょっと引いて見て、そのモバイルの成り立ちとしてデバイスのエコシステムから整理してみました。
とくに、モバイルではその利用状況に応じたデザインが求められると思うので、そういう意味でもただの見た目だけのパターンにはしたくなかったのが理由です。ということで、パターンを以下の3つに分解して説明しました。
- デバイスエコシステムの6パターン
- コンテンツ構造や遷移の6パターン
- ユーザーインターフェースの10パターン
モバイルデザインのヒント
まず、なぜそのパターンにするのか、という疑問には書籍「モバイルフロンティア」にある、このモバイルデザインのヒントですべては語られると思います。
- 必要十分な表現に留める
- ちら見しやすいようにデザインする
- 階層を深くしない
- 自然な形で接点を見せる
- 途中で操作を止めても同じ事ができる
- 時間軸を使って情報を整理する
これがスマートフォン/モバイルにおけるデザイン原則となって、以降のパターンの理解に進みます。
スライドはいつものように、SlideShare のほうに公開しています。
デバイスエコシステムの6パターン
こちらも「モバイルフロンティア」を参照しています。それぞれの事例までつければよかったのですが、口頭でのみの説明になりました。このパターンは、UX Magazine での Avi Itzkovitch さんの記事「The Multiscreen Ecosystem」でももう少し深い考察が得られます。 一貫性の保持 どのデバイスでも同一の体験ができること 状態の同期 どのデバイスでも同じ状態になるよう、コンテンツを同期すること 画面共有 どのデバイスでも同一のコンテンツを共有すること デバイス間の移動 ある利用体験を、別のデバイスに移動すること 相互補完 各デバイスが特定の役割を担い、それぞれの役割を補うこと 同時発生 デバイス別に同時発生する状況を、つながった体験にすること
コンテンツ構造や遷移のパターン
個人的にこのパターンを「IAパターン」と呼んでいます。サイト構造のパターンを指すことが多い「IAパターン」という言葉は、Donna Spencer 著「A practical Guide to Information Architecture」から借りてきています。
そして内容については UX Booth での Elaine McVicar さんの記事「Designing for Mobile, Part 1: Information Architecture」を参照しています。こちらも「モバイルフロンティア」でも少しだけ触れられているので、ご存知の方もいるかと思います。 階層型/ピラミッド型 インデックスページとサブページといった親子関係を持つピラミッド構造 ハブ&スポーク型 中央があり、そこから離れタスクを実行し、また中央に戻る構造 マトリョーシカ型 直線的にタスクをリードする方法、入れ子関係の構造 タブビュー型 同一レベルのコンテンツを並列に表示する方法 弁当箱型/ダッシュボード型 関連コンテンツを一目で表示する方法 フィルタービュー型 同一データを多面的な検索結果で表示する方法
ここで注目すべきは、構造と表示の方法とがごっちゃになっている点です。あえて言葉を書きなおして整理しているのですが、はじめの3つは構造のパターンであとの3つは表示方法のパターンといえます。多分このあたりはどの側面から見ても一意には言えないと思うので追求はここまでにしておきますが。
階層構造とマトリョーシカの違いもあえて入れています。階層構造/ピラミッド構造とは、同階層への遷移を視野に入れるかどうかになりますが、モバイルのUIにおいて同階層へのジャンプは考えにくいからか、デザインパターンからは（階層構造）がほぼ語られていませんね。
ユーザーインターフェースのパターン
そして、ほとんどの方が言うUIパターンには、主にレイアウトとナビゲーションのパターンが含まれています。また、ナビゲーションやエレメント（要素）だけを語っているケースもあるようなので、それはパターンというより種類と呼ぶほうが適切かなと思ったりします。
ここでは Theresa Neil 著「モバイルデザインパターン」を参照しています。ただ、著書と同様に公開されているサイト「Mobile Design Pattern Gallery – UI Patterns for iOS, Android and More」のほうが新しく、随時事例も更新されているようなので、Web 版のほうを参照して整理しました。細分化するとさらにいくつもあるのですが、さすがにそれはパターンではなく要素の種類になるので今回は潔く省きました。 ナビゲーション メイン画面やそのメニュー表示パターン フォーム サインインや登録、チェックアウトなどの表示パターン テーブル・リスト 表やリスト、画像付きリストの表示パターン 検索・ソート・フィルタ テキスト検索とその候補、並び替えや検索条件での絞り込み表示パターン ツール ツールバーやアクションボタンの表示パターン グラフ 棒グラフや円グラフ、データをもとにしたグラフ表示パターン 誘導 モーダルウィンドウやバルーン、チップス表示パターン フィードバック・アフォーダンス レスポンスの表示でエラーや確認の表示パターン ヘルプ ガイドやコーチ、ツアーなどの表示パターン アンチパターン パターンに当てはまらない表示パターン
変化するナビゲーション
ここまで、いくつかパターンを見てきましたが、文字通り見ただけではわからない部分もあるのがモバイルのデザインです。そこで、Smashing Magazine の UX Design コーナーにあった Adrian Zumbrunnen さんの記事「Smart Transitions In User Experience Design」という記事をご紹介しました。これは、見てもらえばわかるのですが、変化するナビゲーションと題して、いくつか最新のインタラクションを紹介した記事です。
※実はこの GIF アニメをスライド内で見せたかったのですが、Keynote がバージョンアップしたため、GIF アニメが挿入できなかったというオチ (TдT)。
ナビゲーションのパターンは、上記にも書いたユーザーインターフェースのパターンに含まれる関係にありますが、インタラクションをともなうパターンとしての定義はまだあまり見ない気がします。
そして、最後に故スティーブ・ジョブズの名言――
Design is not just what it looks like and feels like.
Design is how it works.
を引用しました。これは「デザインとは、単なる視覚や感覚のことではない。デザインとは、どうやって動くかだ。」という力強い言葉です。今回のテーマでもある「UIパターン」も、見た目やだけのことと考えてしまうのはとてもチープな解釈につながると思ったので、デザイン原則の話からデバイスエコシステムの話を経て、最後にこの言葉を付け加えさせてもらいました。
最近書籍を執筆していることもあり、このあたりも深く研究しているところだったので、いい意味でうまく整理し説明することができました。今回の講義に呼んでくださった浅野先生に感謝です。自分にとってもいい機会になりました。ありがとうございました。
HCD-Net の教育セミナー「サービスデザイン方法論」本編のほうのワークショップなどの模様や成果は、浅野先生のブログからご覧になることができます。
