Sp design2013 v2

758 views

Published on

Published in: Technology
  • Be the first to comment

Sp design2013 v2

  1. 1. 第6回 スマホデザイン会議「UI/UX最前線」モバイルが切り拓くマルチデバイスエクスペリエンスの未来The mobile frontier : Designing mobile experience Mar 19 2013 Yukio Ando, Yoshinori Wakizaka (UX TOKYO)
  2. 2. なぜモバイルなのか?
  3. 3. スマートフォン国内出荷台数予測(2012.03予測) (c)MM総研2012 http://www.m2ri.jp/data/news/image/20120313/1331622492-1.jpg 出荷台数の7割がスマートフォン
  4. 4. スマートフォン国内契約者数予測(2013.03予測) (c)MM総研2012 http://www.m2ri.jp/data/news/image/20120313/1331622492-2.jpg 出荷台数の7割がスマートフォン
  5. 5. 国内モバイルトラフィックの変遷 (c)総務省2012 http://itpro.nikkeibp.co.jp/article/NEWS/20120319/387162/?SS=imgview&FD=1400632865&ST=network
  6. 6. 世界のモバイルトラフィック予測 (c)cisco地域別にみた推移http://www.cisco.com/web/JP/solution/isp/ipngn/literature/images/white_paper_c11-520862-03.jpg デバイス別にみた推移 http://www.cisco.com/web/JP/solution/isp/ipngn/literature/images/white_paper_c11-520862-04.jpg
  7. 7. メディアの進化 (c)copperval marketing http://www.copperval.com/index.html 印刷物からWebへ
  8. 8. メディアの進化(c) yahoo! (c) google PCからモバイルへ
  9. 9. メディアの進化 (c) nhn (c) path スマホ発のサービス
  10. 10. メディアの進化 印刷メディア PC モバイル(スマホ)企業ブローシャオンラインメディアモバイルコミュニケーション
  11. 11. スマホの特徴 いつでもどこからでもインターネットに接続できる インターネットサービスの新しい利用端末になった 独自のI/F(タッチパネル、カメラ、GPS、加速度センサー) 新しいサービス体験
  12. 12. モバイルのためのデザイン
  13. 13. モバイルデザインのノウハウWeb、アプリデザインに関する良書、ガイドライン コンセプト 設計手法
  14. 14. モバイルUXデザインの可能性を探る
  15. 15. モバイルUXのコンテクスト
  16. 16. モバイルのコンテクストモバイル=「いつでも、どこからでも」使える (c) rosenfeldmedia
  17. 17. モバイルのコンテクストチャレンジングな状況でも気にしない (c) rosenfeldmedia
  18. 18. モバイルコンテクストの原則いつでも、どこからでも な状況にのためのデザイン1. モバイルならではの体験を作ることにフォーカスする2. 注意散漫、行動が遮られることを前提にデザインする3. 認知的負荷や機会費用を減らす
  19. 19. モバイルコンテクストの原則どこでも な状況に対処するために1. モバイルならではの体験を作ることにフォーカスする2. 注意散漫、行動が遮られることを前提にデザインする3. 認知的負荷や機会費用を減らす
  20. 20. 1. モバイルならではの体験 PCとモバイルでの利用状況の違い スクリーンサイズ 大きい 小さい 利用状況 限定的 ばらばら 注意のレベル 高い 断片的ネットワークへのアクセス 快適 限定的 (c) rosenfeldmedia
  21. 21. 1. モバイルならではの体験モバイルならではのユニークな体験 既存のメディア(PC)の延長線上にあるeMail モバイルでの新しい体験を提供しているShazam (c) rosenfeldmedia
  22. 22. 1. モバイルならではの体験 モバイルにおける3つの制約デバイスの制約 人間の制約スモールフォームファクター 無くしやすいT9/QWERTY英数入力 言語やメタファが適切ではないカメラ/ビデオ 認知に集中を要するバッテリー駆動 文字入力が難しい無線通信、Wi-Fi、Bluetoothでのネットアクセス 人付き合いが苦手、利用できない状況があるマイク、スピーカー、ヘッドフォン 文字やイメージが小さくて読みにくい場合がある加速度センサ コンテクストによっては聞き取りにくい場合がある 作業記憶を多分に要する場合がある 環境の制約 ほぼどこでも使える、どこにでも仕舞える 明るい太陽光の下ではスクリーンのグレアが発生する 壊れやすい(水没、埃など) ある状況では利用が禁止されている ネットワーク圏外では使えない 電源が手に入らない状況がある 料金プランによる制約がある(ローミング、データ通信)
  23. 23. モバイルコンテクストの原則いつでも、どこからでも な状況に対処するために1. モバイルならではの体験を作ることにフォーカスする2. 注意散漫、行動が遮られることを前提にデザインする3. 認知的負荷や機会費用を減らす
  24. 24. 2. 注意散漫・行動が遮られる 行動や制約に関する差異スキューバーダイビング(連続的=視界良好、酸素もいっぱい) シュノーケリング(限定的=狭い視界、息継ぎが必要) (c) rosenfeldmedia
  25. 25. 2. 注意散漫・行動が遮られる誰もに覚えがある「マルチタスク」 (c) rosenfeldmedia
  26. 26. 2. 注意散漫・行動が遮られる電話がかかってくる、バスが到着する、、 マルチタスク 頻繁にタスクを切り替える 常にネットワークに繋がっている
  27. 27. 2. 注意散漫・行動が遮られるデバイスの機能や外部環境から常に遮られている状態 マルチタスキング 継続的注意力断片化 頻繁にタスクを切り替える (Continuous Partial Attention:CPA) 常にネットワークに繋がっている
  28. 28. 2. 注意散漫・行動が遮られる継続的注意力断片化とは?第一のキーワード、Wikipediaにも項目がある「Continuous Partial Attention」(以下、CPA)は、かつてアップルに、そしてマイクロソフトの研究部門に在籍していた Linda Stoneが考案した用語です。多種多様なメディアやコミュニケーションチャネルの動向に対して常に注意を払わずにはいられない状態を意味し、「継続的注意力断片化」などと訳されることもあります。 (c) IA Spectrum 2009 マルチタスク→継続的注意力断片化 能動的 受動的
  29. 29. 2. 注意散漫・行動が遮られる 継続的注意力断片化に対する対処方法• 中断してもすぐに再開できるようにする• メニューを深くしない• すべてのコンテンツをみせない
  30. 30. モバイルコンテクストの原則どこでも な状況に対処するために1. モバイルならではの体験を作ることにフォーカスする2. 注意散漫、行動が遮られることを前提にデザインする3. 認知的負荷や機会費用を減らす
  31. 31. 3. 認知的負荷や機会費用を減らすContextual Design により負荷や費用を減らす認知的負荷ワーキングメモリをコントロールするための負荷機会費用ある行動を選択することで失われる、他の選択肢を選んだ時に得られる利益
  32. 32. 3. 認知的負荷や機会費用を減らすコンテクストが変われば、代替案を選ぶ費用も変わるNeed: Transportation to the local shopping district.Motivation/Urgency: Low.Environment: Home.Alternatives: Online schedule through PC, driving, showing up at the station and askingan attendant, calling a friend. 平常時 緊急時Need: Transportation to an unfamiliar neighborhood.Motivation/Urgency: Very high.Environment: On the street, rushing to the station.Alternatives: Maps at the BART station, showing up at the station and asking anattendant or fellow passenger, calling a friend.
  33. 33. モバイルUXの足がかりモバイルの特性は時空間的な情報とダイナミクスShazam:今、目の前にある音楽とユーザーの関係性を活用している。IntroNow:ShazamのTV番組版。TVの音声を使って番組を検索し、ソーシャルでシェアできる。 (c) rosenfeldmedia
  34. 34. コンテクストがトリガになるマップのエクスペリエンスPCでは現在地を自分で入力しなければいけないモバイルでは、現在地の情報を自然と利用することができる (c) rosenfeldmedia
  35. 35. メディアコンバージェンス
  36. 36. デバイスエコシステムPC中心のエコシステムに変化が起きたモバイルを含めたマルチデバイス環境が構築され、UXデザインのルールが変化している
  37. 37. デバイスエコシステムモバイルを含めたエコシステムが構築されているエコシステムの代表的なデザインパターン=モバイルデバイスの使い方一貫性の保持 状態の保持 デバイス間の移動 (c)mobile frontier
  38. 38. デバイスエコシステム一貫性の保持各タッチポイントのUX(デザイン、コンテンツ、インタラクション)に一貫性を持たせること (c)mobile frontier
  39. 39. デバイスエコシステム (c)evernote
  40. 40. デバイスエコシステム状態の保持どのタッチポイントでサービスを利用しても、同じ状態を保っていること (c)mobile frontier
  41. 41. デバイスエコシステム(c)amazon
  42. 42. デバイスエコシステムデバイス間の移動同じエコシステム内にあるデバイス間で情報をやり取りできること (c)mobile frontier
  43. 43. デバイスエコシステムデバイス間の移動あるデバイスで利用しているコンテンツを他のデバイスでも利用できること (c)Apple
  44. 44. モバイルUXのデザインパターン
  45. 45. モバイルUXのデザインパターン UXの定義、UI設計の参考にになるデザインパターン  UX   UI  入力 I/Fモバイルで提供すべきUXの考え方 モバイルの画面設計についての考え方 モバイル特有の機能を生かす
  46. 46. モバイルUXのデザインパターンクラウドとアプリを基本単位としてデザインする
  47. 47. モバイルUXのデザインパターンクラウドにあるデータをモバイル端末で利用するコンテンツを観る データを操作する 日記、メモを共有する ニュースを共有する
  48. 48. モバイルUXのデザインパターンスマホの画面は狭い&通信環境が良くない場合がある
  49. 49. モバイルUXのデザインパターン マトリョーシカパターンHub&Spokeパターン Bento Boxパターン
  50. 50. モバイルUXのデザインパターン いろいろな入力メソッドを活用する(c) flickr
  51. 51. モバイルUXのデザインパターンデバイスの機能 入力インターフェース候補タッチ入力 音声入力 画像入力 位置情報・GPS
  52. 52. UI / IxDの作り込み
  53. 53. アニメーションの法則multitasking woman
  54. 54. ディズニーのアニメーションの12原則■スクオッシュ(潰し)とストレッチ(伸ばし)■アンチシペーション(予備動作)■ステージング(舞台演出)■ストレート・アヘッド・アクション(逐次描き)とポーズ・ トゥ・ポーズ(原画による設計)■フォロー・スルーとオーバーラッピング・アクション(あと 追いの工夫)■スロー・インとスロー・アウト(両端づめ)■アーク(運動曲線)■副次アクション■タイミング■誇張■実質感のある絵
  55. 55. ディズニーのアニメーションの12原則
  56. 56. アニメーションの原則を生かす手法1■ 良いアプリをたくさん自分で使い込む。たくさん探す。2■ 良いものが、なぜ良いのか、自分の中で分析・分解する。3■ 常用アプリが更新したら、どこが変わったのか比較する。4■ 必要なのは「意味のある」動きだけ。単一画面内での動き。5■ コンテンツが王様。直接操作。UIは本来無くていいもの。6■ インタフェースは媒介物、人々のインタラクションを考慮。7■ 指が触れて操作する瞬間は画面が見えないことを考慮。8■ 使っている人を観察する。5人の試用で85%の問題は解明。9■ 情報の密度を落とす。着目すべきところを演出する。10■ 中断されることが前提。途中から始まることが前提。11■ iPhone と Android と同じにする必要無し。一人1台。12■ 外に出て使う。ストレスフルな状況下で使う。速度重要。
  57. 57. 間違いなくモバイルの時代

×