The Mobile Frontier at HTML5 Conference 2013/11/30
17 likes4,434 views
The Mobile Frontier at HTML5 Conference 2013/11/30
![HTML 5 : alt属性の書きかた [例]
例：フォームのステップナビゲーション
alt= お問い合わせ完了まで全部で3ステップです
入力
alt= ステップ1の
入力は完了してい
ます
確認
alt= 現在はス
テップ2の確認で
す
完了
alt= 最後はス
テップ3の完了で
す](https://image.slidesharecdn.com/mobilef-html5conf-20131130-131130022111-phpapp02/85/The-Mobile-Frontier-at-HTML5-Conference-2013-11-30-107-320.jpg)
More Related Content
Similar to The Mobile Frontier at HTML5 Conference 2013/11/30 (20)
More from Yukio Andoh (20)
The Mobile Frontier at HTML5 Conference 2013/11/30
- 3. 1章 いかりを上げる Casting Off Anchors モバイルフロンティアを探索するための準備 Preparing to Explore the Mobile Frontier Nov 30 2013 Kaoru Shimizu @HTML5 Conference
- 7. • 普遍的なパラダイム • 共通化されたUI規則 • 標準化された入力手法 • デザイン理論 • 学術的研究結果
- 8. • 普遍的なパラダイム ? • 共通化されたUI規則 • 標準化された入力手法 • デザイン理論 • 学術的研究結果
- 11. 2章 モバイルNUIパラダイムの登場 The Emergent Mobile NUI Paradigm GUIとNUIの境界を越えて Traversing the GUI/NUI Chasm Nov 30 2013 Kaoru Shimizu @HTML5 Conference
- 13. コマンドラインインターフェース CLI (Command Line Interface) ユーザがコマンドを覚え、 テキストベースのインターフェースに打ち込む。
- 14. グラフィカルユーザーインターフェース GUI (Graphical User Interface) WYSIWYG(What You See Is What You Get) ユーザーにコマンドを見せて選ばせる。 フォルダやゴミ箱といったオフィスを模したメタファーを利用。
- 15. ナチュラルユーザーインターフェース NUI (Natural User Interface) WYDIWYG(What You Do Is What You Get) ユーザの状況に応じて、表示される情報が変化。 より直感的に、速い操作が可能。
- 19. CHAPTER
- 20. 3 デンバーのピーナッツバター Demystifying the Elusive Mobile Context Nov 30 2013 Yoshinori Wakizaka @HTML5 Conference
- 25. モバイルコンテクストの原則 いつでも、どこからでも な状況にのためのデザイン 1. モバイルならではの体験を作ることにフォーカスする 2. 注意散漫、行動が遮られることを前提にデザインする 3. 認知的負荷や機会費用を減らす
- 26. モバイルコンテクストの原則 どこでも な状況に対処するために 1. モバイルならではの体験を作ることにフォーカスする 2. 注意散漫、行動が遮られることを前提にデザインする 3. 認知的負荷や機会費用を減らす
- 32. 1. モバイルならではの体験 入力 I/F：テキスト、画像、音声 Google search
- 33. モバイルコンテクストの原則 いつでも、どこからでも な状況に対処するために 1. モバイルならではの体験を作ることにフォーカスする 2. 注意散漫、行動が遮られることを前提にデザインする 3. 認知的負荷や機会費用を減らす
- 35. モバイルコンテクストの原則 どこでも な状況に対処するために 1. モバイルならではの体験を作ることにフォーカスする 2. 注意散漫、行動が遮られることを前提にデザインする 3. 認知的負荷や機会費用を減らす
- 36. 3. 認知的負荷や機会費用を減らす ある状況で、他よりも簡単にできるようにすること ニーズ: 近所のショッピングセンターでお買い物するために電車に乗りたい モチベーション/緊急性: 低い 利用環境: 自宅 代替手段: PCを使ってオンラインスケジュールを確認、車で運転して買い物に行く、駅まで行って駅員 に電車の時刻を聞く、友だちに電話する 平常時 緊急時 ニーズ: 土地勘がない場所での検索 モチベーション/緊急性: 非常に高い 利用環境: ストリート、混雑した駅 代替手段: BART（地下鉄の名称）の駅にある地図、駅で乗務員や乗客に尋ねる、友だちに電話する
- 38. コンテクストがトリガになる マップのエクスペリエンス PCでは現在地を自分で入力しなければいけない モバイルでは、現在地の情報を自然と利用することができる (c) rosenfeldmedia
- 39. 4章 形態の変化 Shapeshifting コンバージェンスとマルチデバイス体験 Convergence and Multi device Experiences Nov 30 2013 Yoshiki Hayama @Mobile Frontier Workshop
- 41. P.119 ブライアン・リーガー氏 インタビュー より 「自分の仕事を『ウェブページをデザインする』と考えることを止 め、代わりに複数のコンテクストで表示されるコンテンツをデザイ ンすることだと考える」 P.115 より 「もはやPC上の体験を考慮するだけでは足りず、さらに言うなら ば、モバイル体験だけを考慮するだけでは足りません」 「モバイル端末はより大きなデバイスエコシステムの一部である」
- 48. 4章 見どころ • コンバージェンス（融合） • デバイスからデバイスへシームレスに • テクノロジー、メディア、アクティビティ（行為） • エコシステム • タッチポイント、人々、プロセスと環境 • 参加型デザイン • 状況的行為 • マルチスクリーン戦略 • ネイティブアプリ、ウェブアプリ、モバイル向けウェブサイト
- 49. 5章 モバイルUXパターン Mobile UX Patterns モビリティのためにデザインする Designing for Mobility Nov 30 2013 Hiroko Nozawa @HTML5 Conference
- 50. モバイルのパタンランゲージとは？ 1. クラウドとアプリがモバイルUXの構成単位となる 2. 優れたモバイルエクスペリエンスは徐々にその本質を 明らかにする 3. コンテンツがインターフェイスになる 4. モバイルにふさわしい入力方法を使う 5. タスクを終わらせることよ、さようなら
- 54. モバイルならではの入力方法を使う
- 56. 6章 モバイルプロトタイピング Mobile Prototyping モバイルエクスペリエンスをデザインするためのツールと手法 Tools and Methods for Designing Mobile Nov 30 2013 Nob Sato @HTML5 Conference
- 58. モバイルUXのためのデザインプロセス 典型的なダブルダイアモンド型のデザインプロセス 発見 定義 開発 納品 デザインの決定 時間 アイデアが広がる フェーズ 開始 アイデアを 実現するフェーズ 終了
- 59. なぜプロトタイピングなのか？ • デザインアイデアやエクスペリエンスの伝達（共有） • ユーザーのフィードバックの収集できる • 未知の探求ができる • アイデアの微調整を行える
- 60. モバイルプロトタイピングの種類 • 戦術的プロトタイピング Tactical Prototyping • 体験的プロトタイピング Experimental Prototyping
- 61. 戦術的プロトタイピング 1. スケッチ 2. ペーパープロトタイピング 3. 実機上でのインタラクティブなプロトタイプ
- 62. 体験的プロトタイピング 1. ストーリーボーディング 2. ボディーストーミング（アクティングアウト） 3. スピード・デート法 4. コンセプトビデオ
- 63. プロトタイピング、3つの公理 • 適度な忠実度で行う、完璧主義者にならない。 • 失敗を受け入れ、勇気をもって次のアイデアに進む。 • プロトタイピングは万能薬ではない。 「完璧は最適の敵」 フランスの有名な詩人 ヴォルデール
- 64. 7章 モーションとアニメーション Motion and Animation 新しいモバイルUXのためのデザイン要素 A New Mobile UX Design Material Nov 30 2013 Yukio Andoh @Mobile Frontier Workshop
- 69. ディズニーのアニメーションの12原則 ■ スクオッシュ（潰し）とストレッチ（伸ばし） ■ アンチシペーション（予備動作） ■ ステージング（舞台演出） ■ ストレート・アヘッド・アクション（逐次描き）とポーズ・ トゥ・ポーズ（原画による設計） ■ フォロー・スルーとオーバーラッピング・アクション（あと 追いの工夫） ■ スロー・インとスロー・アウト（両端づめ） ■ アーク（運動曲線） ■ 副次アクション ■ タイミング ■ 誇張 ■ 実質感のある絵
- 71. アニメーションの原則を生かす方法 1■ 良いアプリをたくさん探し、使い込む。事例の引き出し 2■ 良いものが、なぜ良いのか、要素を分析・分解する (ハイスピードカメラ） 3■ 常用アプリが更新したら、どこが変わったのか比較する 4■ 必要なのは「意味のある」動きだけ。操作の前後の動き重要 5■ コンテンツが王様。直接操作。UIは本来無くていいもの 6■ 指が触れて操作する瞬間は画面が見えてないことを考慮 7■ 情報の密度を落とす。動きで着目すべきところを演出する (速さ） 8■ 中断、途中から始まることが前提。時間の流れを考慮する
- 72. 8章 感覚の目覚め Awakening the Senses タッチ、ジェスチャー、音声とサウンド Touch, Gesture, Voice, and Sound Nov 30 2013 Yoshiki Hayama @Mobile Frontier Workshop
- 77. 音声によるインターフェース
- 78. HTML 5 : alt属性 HTML5仕様書 （Editor's Draft 27 November 2013） 4.8.1.1 Requirements for providing text to act as an alternative for images alt属性の書きかた すごい充実した解説
- 93. まだまだ続くよ！
- 105. じつに充実
- 106. HTML 5 : alt属性の書きかた 例：フォームのステップナビゲーション 入力 alt= 入力 確認 alt= 確認 完了 alt= 完了
- 107. HTML 5 : alt属性の書きかた [例] 例：フォームのステップナビゲーション alt= お問い合わせ完了まで全部で3ステップです 入力 alt= ステップ1の 入力は完了してい ます 確認 alt= 現在はス テップ2の確認で す 完了 alt= 最後はス テップ3の完了で す
- 108. 8章 見どころ • 人間の感覚は、視覚だけでなく、触覚、身体の動き、聴覚 • タッチインターフェース • タッチターゲット、タッチジェスチャーの配置、コンテンツと一体化 • ジェスチャー • なじみのジェスチャー+新しいジェスチャー、付加的な感覚のフィードバック、根気と創造力 • 音声によるインターフェース
- 109. 9章 新しいモバイルのかたち New Mobile Forms モバイルフロンティアの開拓者 Pioneering the Mobile Frontier Nov 30 2013 Yukio Andoh @HTML5 Conference
- 111. デジタルデバイスの新しいかたち
- 112. ファッションとして身体として
- 113. 世の中にあふれるID
- 114. 携帯電話が銀行の代わりに（M-PESA）
- 115. 間違いなくモバイルの時代
- 116. モバイルフロンティアの開拓 (CC) by Woody H1