Sp design2013 v2

8,686 views
8,653 views

Published on

0 Comments
23 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
8,686
On SlideShare
0
From Embeds
0
Number of Embeds
6,067
Actions
Shares
0
Downloads
29
Comments
0
Likes
23
Embeds 0
No embeds

No notes for slide

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

×