HCD-Net 教育セミナー「サービスデザイン方法論」の第6回で講義「スマホのUIパターン」のスライドです。 HCD-Net | 2014年度　サービスデザイン方法論(全6回）　第5回開催　見学者枠満席 http://www.hcdnet.org/event/post_37.php

1. 坂本貴史
HCD-Net Seminar - Service Design #6
2014.11.15
UI Patterns for Smartphone
by Eric E Castro

3. By placeit

4. 必要十分な表現に留める
ちら見しやすいようにデザインする
階層を深くしない
自然な形で接点を見せる
途中で操作を止めても同じ事ができる
時間軸を使って情報を整理する
モバイルデザインのヒント

5. 画面の小ささ 利用環境の違い
PCとは異なる、2つの前提

6. 87.2%
4.0%
D2C, マルチデバイス利用動向調査, 2013/05
外出先や移動中での利用

7. Pocket Trend, 2011
iPhoneの利用時間帯
早朝 通勤
帰宅時 就寝
自宅

8. © UX INSPIRATION!
http://uxxinspiration.com/2014/02/ux-timeline/

9. モバイルにおけるデザインパターン
デバイスエコシステム IAパターン
デバイス単位（PCとタブレットと
モバイルなど）の組み合わせにより、
利用順序や使い方を定義します
コンテンツ単位（画面やファイル）
の組み合わせにより、画面フローや
コンテンツの表示順序を定義します
コンポーネント単位の組み合わせ
により、表示スタイルや表示方法（振
る舞い）などを定義します
UIパターン

10. 一貫性の保持
状態の同期
画面共有
デバイス間の移動
相互補完
同時発生
デバイスエコシステム
1
2
3
4
5
6

11. 一貫性の保持
どのデバイスでも同一の体験ができること
例）Evernote ではどのデバイスからでも一貫したデザインで利用体験が可能です。

12. 状態の同期
どのデバイスでも同じ状態になるよう、コンテンツを同期すること
例）アマゾン Kindle ではどのデバイスからでも、続きのページから読書を再開することができます。

13. 画面共有
複数のデバイスで同一のコンテンツを共有すること
例）複数のデバイスの画面をつなげてみることで、1つの画像や映像を見せることが可能。

14. デバイス間の移動
ある利用体験を、別のデバイスに移動すること
例）Google の Chromecast では iPhone の動画をテレビで利用が可能です。

15. 相互補完
各デバイスが特定の役割を担い、それぞれの役割を補うこと
例）1つのタブレットでゲームボードを映し、プレイヤーは個別のスマホから操作をすることができます。

16. 同時発生
デバイス別に同時発生する状況を、つながった体験にすること
例）スマホで試合結果を予想しながら、テレビでサッカーの試合中継を観ることができます。

17. First Time User Experiences
http://firsttimeux.tumblr.com/

19. ハブ&スポーク型
マトリョーシカ型
タブビュー型
弁当箱型・ダッシュボード型
フィルタビュー型
IAパターン
階層型・ピラミッド型1
2
3
4
5
6

20. 階層型
Vimeo

21. 階層型/ピラミッド型
インデックスページとサブページといった親子関係を持つ構造

22. ハブ&スポーク型
Vimeo

23. ハブ&スポーク型
中央があり、そこから離れタスクを実行し、また中央に戻る構造

24. マトリョーシカ型
Vimeo

25. マトリョーシカ型
直線的にタスクをリードする方法、入れ子関係の構造

26. タブビュー型
Vimeo

27. タブビュー型
同一レベルのコンテンツを並列に表示する方法

28. 弁当箱
Vimeo

29. 弁当箱型/ダッシュボード型
関連コンテンツを一目で表示する方法

30. フィルタビュー型
Vimeo

31. フィルタビュー型
同一データを多面的な検索結果で表示する方法

32. UX archive
http://uxarchive.com/

33. ナビゲーション
フォーム
テーブル・リスト
検索・ソート・フィルタ
ツール
グラフ
誘導
フィードバック・アフォーダンス
ヘルプ
アンチパターン
UIパターン
1
2
3
4
5
6
7
8
9
10

34. ナビゲーション
メイン画面やそのメニュー表示パターン

35. フォーム
サインインや登録、チェックアウトなどの表示パターン

36. テーブル・リスト
表やリスト、画像付きリストの表示パターン

37. 検索・ソート・フィルタ
テキスト検索とその候補、並び替えや検索条件での絞り込み表示パターン

38. ツール
ツールバーやアクションボタンの表示パターン

39. グラフ
棒グラフや円グラフ、データをもとにしたグラフ表示パターン

40. 誘導
モーダルウィンドウやバルーン、チップス表示パターン

41. フィードバック・アフォーダンス
レスポンスの表示でエラーや確認の表示パターン

42. ヘルプ
ガイドやコーチ、ツアーなどの表示パターン

43. アンチパターン
パターンに当てはまらない表示パターン

47. Pttrns - Mobile User Interface Patterns
http://www.pttrns.com/

48. 導入画面
トップ画面
一覧画面
詳細画面
入力・操作画面
アプリの主要画面パターン
スプラッシュ/ウォークスルー/コーチマーク/エンプティステート
ポータル型/タイムライン型/ストア型
検索結果/ギャラリー/お知らせ
ビューア/記事/マップ/プロダクト
サインアップ/投稿/カメラ撮影/設定
これらの組み合わせから画面フローを導き出すことができる

49. iOS Human Interface Guideline
https://developer.apple.com/library/ios/documentation/userexperience/conceptual/mobilehig/

50. Android Design
https://developer.android.com/design/

51. ユーザビリティテストで問題点を抽出し修正すること (治療)
に依存しすぎるのではなく、
設計/開発の段階でユーザビリティ上の問題を
あらかじめ潰しておくこと (予防) が大事
Usability testing myths
Rolf Molich

52. Thank you
Let's enjoy today
@bookslope
bookslope@gmail.com