坂本貴史
HCD-Net Seminar - Service Design #6
2014.11.15
UI Patterns for Smartphone
by Eric E Castro
By placeit
必要十分な表現に留める
ちら見しやすいようにデザインする
階層を深くしない
自然な形で接点を見せる
途中で操作を止めても同じ事ができる
時間軸を使って情報を整理する
モバイルデザインのヒント
画面の小ささ 利用環境の違い
PCとは異なる、2つの前提
87.2%
4.0%
D2C, マルチデバイス利用動向調査, 2013/05
外出先や移動中での利用
Pocket Trend, 2011
iPhoneの利用時間帯
早朝 通勤
帰宅時 就寝
自宅
© UX INSPIRATION!
http://uxxinspiration.com/2014/02/ux-timeline/
モバイルにおけるデザインパターン
デバイスエコシステム IAパターン
デバイス単位(PCとタブレットと
モバイルなど)の組み合わせにより、
利用順序や使い方を定義します
コンテンツ単位(画面やファイル)
の組み合わせにより、画面フローや
コンテンツの表示順序を定義します
コンポーネント単位の組み合わせ
により、表示スタイルや表示方法(振
る舞い)などを定義します
UIパターン
一貫性の保持
状態の同期
画面共有
デバイス間の移動
相互補完
同時発生
デバイスエコシステム
1
2
3
4
5
6
一貫性の保持
どのデバイスでも同一の体験ができること
例)Evernote ではどのデバイスからでも一貫したデザインで利用体験が可能です。
状態の同期
どのデバイスでも同じ状態になるよう、コンテンツを同期すること
例)アマゾン Kindle ではどのデバイスからでも、続きのページから読書を再開することができます。
画面共有
複数のデバイスで同一のコンテンツを共有すること
例)複数のデバイスの画面をつなげてみることで、1つの画像や映像を見せることが可能。
デバイス間の移動
ある利用体験を、別のデバイスに移動すること
例)Google の Chromecast では iPhone の動画をテレビで利用が可能です。
相互補完
各デバイスが特定の役割を担い、それぞれの役割を補うこと
例)1つのタブレットでゲームボードを映し、プレイヤーは個別のスマホから操作をすることができます。
同時発生
デバイス別に同時発生する状況を、つながった体験にすること
例)スマホで試合結果を予想しながら、テレビでサッカーの試合中継を観ることができます。
First Time User Experiences
http://firsttimeux.tumblr.com/
ハブ&スポーク型
マトリョーシカ型
タブビュー型
弁当箱型・ダッシュボード型
フィルタビュー型
IAパターン
階層型・ピラミッド型1
2
3
4
5
6
階層型
Vimeo
階層型/ピラミッド型
インデックスページとサブページといった親子関係を持つ構造
ハブ&スポーク型
Vimeo
ハブ&スポーク型
中央があり、そこから離れタスクを実行し、また中央に戻る構造
マトリョーシカ型
Vimeo
マトリョーシカ型
直線的にタスクをリードする方法、入れ子関係の構造
タブビュー型
Vimeo
タブビュー型
同一レベルのコンテンツを並列に表示する方法
弁当箱
Vimeo
弁当箱型/ダッシュボード型
関連コンテンツを一目で表示する方法
フィルタビュー型
Vimeo
フィルタビュー型
同一データを多面的な検索結果で表示する方法
UX archive
http://uxarchive.com/
ナビゲーション
フォーム
テーブル・リスト
検索・ソート・フィルタ
ツール
グラフ
誘導
フィードバック・アフォーダンス
ヘルプ
アンチパターン
UIパターン
1
2
3
4
5
6
7
8
9
10
ナビゲーション
メイン画面やそのメニュー表示パターン
フォーム
サインインや登録、チェックアウトなどの表示パターン
テーブル・リスト
表やリスト、画像付きリストの表示パターン
検索・ソート・フィルタ
テキスト検索とその候補、並び替えや検索条件での絞り込み表示パターン
ツール
ツールバーやアクションボタンの表示パターン
グラフ
棒グラフや円グラフ、データをもとにしたグラフ表示パターン
誘導
モーダルウィンドウやバルーン、チップス表示パターン
フィードバック・アフォーダンス
レスポンスの表示でエラーや確認の表示パターン
ヘルプ
ガイドやコーチ、ツアーなどの表示パターン
アンチパターン
パターンに当てはまらない表示パターン
Pttrns - Mobile User Interface Patterns
http://www.pttrns.com/
導入画面
トップ画面
一覧画面
詳細画面
入力・操作画面
アプリの主要画面パターン
スプラッシュ/ウォークスルー/コーチマーク/エンプティステート
ポータル型/タイムライン型/ストア型
検索結果/ギャラリー/お知らせ
ビューア/記事/マップ/プロダクト
サインアップ/投稿/カメラ撮影/設定
これらの組み合わせから画面フローを導き出すことができる
iOS Human Interface Guideline
https://developer.apple.com/library/ios/documentation/userexperience/conceptual/mobilehig/
Android Design
https://developer.android.com/design/
ユーザビリティテストで問題点を抽出し修正すること (治療)
に依存しすぎるのではなく、
設計/開発の段階でユーザビリティ上の問題を
あらかじめ潰しておくこと (予防) が大事
Usability testing myths
Rolf Molich
Thank you
Let's enjoy today
@bookslope
bookslope@gmail.com

"UI Patterns for Smartphone" HCD-Net SD #6 2014