• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
The Mobile Frontier at HTML5 Conference 2013/11/30
 

The Mobile Frontier at HTML5 Conference 2013/11/30

on

  • 3,114 views

The Mobile Frontier at HTML5 Conference 2013/11/30

The Mobile Frontier at HTML5 Conference 2013/11/30

Statistics

Views

Total Views
3,114
Views on SlideShare
2,339
Embed Views
775

Actions

Likes
16
Downloads
27
Comments
0

15 Embeds 775

http://blog.chachaki.net 243
http://stocker.jp 238
http://localhost 90
http://kyotar.com 88
http://syossan.hateblo.jp 34
http://10.12.3.190 23
https://cybozulive.com 21
https://twitter.com 19
http://eventifier.com 7
http://eventifier.co 6
http://www.eventifier.com 2
http://feedly.com 1
http://s.deeeki.com 1
http://eventifier.info 1
http://www.eventifier.co 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    The Mobile Frontier at HTML5 Conference 2013/11/30 The Mobile Frontier at HTML5 Conference 2013/11/30 Presentation Transcript

    • 5C-モバイルフロンティア フロントエンドエンジニアと デザイナーのための モバイルユーザーエクスペリエンス 安藤幸央・佐藤伸哉・清水かほる・野澤紘子・羽山祥樹・脇阪善則
    • 1章 いかりを上げる Casting Off Anchors モバイルフロンティアを探索するための準備 Preparing to Explore the Mobile Frontier Nov 30 2013 Kaoru Shimizu @HTML5 Conference
    • 過去との決別 デスクトップコンピューティングからモバイルへ
    • • 普遍的なパラダイム • 共通化されたUI規則 • 標準化された入力手法 • デザイン理論 • 学術的研究結果
    • • 普遍的なパラダイム ? • 共通化されたUI規則 • 標準化された入力手法 • デザイン理論 • 学術的研究結果
    • 2章 モバイルNUIパラダイムの登場 The Emergent Mobile NUI Paradigm GUIとNUIの境界を越えて Traversing the GUI/NUI Chasm Nov 30 2013 Kaoru Shimizu @HTML5 Conference
    • ユーザーインターフェースの進化 Past Future
    • コマンドラインインターフェース CLI (Command Line Interface) ユーザがコマンドを覚え、 テキストベースのインターフェースに打ち込む。
    • グラフィカルユーザーインターフェース GUI (Graphical User Interface) WYSIWYG(What You See Is What You Get) ユーザーにコマンドを見せて選ばせる。 フォルダやゴミ箱といったオフィスを模したメタファーを利用。
    • ナチュラルユーザーインターフェース NUI (Natural User Interface) WYDIWYG(What You Do Is What You Get) ユーザの状況に応じて、表示される情報が変化。 より直感的に、速い操作が可能。
    • ユーザーインターフェースの進化 Past Future
    • ユーザーインターフェースの進化 Now Past Future
    • 日本のスマートフォン普及率 Our Mobile Planet http://www.thinkwithgoogle.com/mobileplanet/
    • CHAPTER
    •   3 デンバーのピーナッツバター Demystifying the Elusive Mobile Context Nov 30 2013 Yoshinori Wakizaka @HTML5 Conference
    • スマホの特徴 小さな画面&タッチ操作 いつでもどこからでもインターネットにアクセスできる 独自のI/F(タッチパネル、カメラ、GPS、加速度センサー) PCとは利用体験が異なる
    • モバイルのコンテクスト モバイル=「いつでも、どこからでも」使える (c) rosenfeldmedia
    • モバイルのコンテクスト チャレンジングな状況でも気にしない (c) rosenfeldmedia
    • 1. モバイルならではの体験 PCとモバイルでの利用状況の違い スクリーンサイズ 大きい 小さい 利用状況 限定的 ばらばら 注意のレベル 高い 断片的 ネットワークへのアクセス 快適 限定的 (c) rosenfeldmedia
    • モバイルコンテクストの原則 いつでも、どこからでも な状況にのためのデザイン 1. モバイルならではの体験を作ることにフォーカスする 2. 注意散漫、行動が遮られることを前提にデザインする 3. 認知的負荷や機会費用を減らす
    • モバイルコンテクストの原則 どこでも な状況に対処するために 1. モバイルならではの体験を作ることにフォーカスする 2. 注意散漫、行動が遮られることを前提にデザインする 3. 認知的負荷や機会費用を減らす
    • 1. モバイルならではの体験 モバイルならではのユニークな体験とは? 既存のメディア(PC)の延長線上にあるeMail モバイルでの新しい体験を提供しているShazam (c) rosenfeldmedia
    • 1. モバイルならではの体験 音声入力:その場で流れている音楽から楽曲検索 Shazam
    • 1. モバイルならではの体験 カメラ:撮ったその場でWebにアップ、共有 Instagram
    • 1. モバイルならではの体験 位置情報:現在地の検索、現在地からの経路検索 google map
    • 1. モバイルならではの体験 プッシュ通知:サービス側からイベント通知 Calendar (c) rosenfeldmedia
    • 1. モバイルならではの体験 入力 I/F:テキスト、画像、音声 Google search
    • モバイルコンテクストの原則 いつでも、どこからでも な状況に対処するために 1. モバイルならではの体験を作ることにフォーカスする 2. 注意散漫、行動が遮られることを前提にデザインする 3. 認知的負荷や機会費用を減らす
    • 2. 注意散漫・行動が遮られる 誰もに覚えがある「マルチタスク」 (c) rosenfeldmedia
    • モバイルコンテクストの原則 どこでも な状況に対処するために 1. モバイルならではの体験を作ることにフォーカスする 2. 注意散漫、行動が遮られることを前提にデザインする 3. 認知的負荷や機会費用を減らす
    • 3. 認知的負荷や機会費用を減らす ある状況で、他よりも簡単にできるようにすること ニーズ: 近所のショッピングセンターでお買い物するために電車に乗りたい モチベーション/緊急性: 低い 利用環境: 自宅 代替手段: PCを使ってオンラインスケジュールを確認、車で運転して買い物に行く、駅まで行って駅員 に電車の時刻を聞く、友だちに電話する 平常時 緊急時 ニーズ: 土地勘がない場所での検索 モチベーション/緊急性: 非常に高い 利用環境: ストリート、混雑した駅 代替手段: BART(地下鉄の名称)の駅にある地図、駅で乗務員や乗客に尋ねる、友だちに電話する
    • モバイルUXの足がかり モバイルの特性は時空間的な情報が使えること Shazam:今、目の前にある音楽とユーザーの関係性を活用している。 IntroNow:ShazamのTV番組版。TVの音声を使って番組を検索し、ソーシャルでシェアできる。 (c) rosenfeldmedia
    • コンテクストがトリガになる マップのエクスペリエンス PCでは現在地を自分で入力しなければいけない モバイルでは、現在地の情報を自然と利用することができる (c) rosenfeldmedia
    • 4章 形態の変化 Shapeshifting コンバージェンスとマルチデバイス体験 Convergence and Multi device Experiences Nov 30 2013 Yoshiki Hayama @Mobile Frontier Workshop
    • 4章を、ひとことで言うと 「ユーザーは、つながりのなかにいる」
    • P.119 ブライアン・リーガー氏 インタビュー より 「自分の仕事を『ウェブページをデザインする』と考えることを止 め、代わりに複数のコンテクストで表示されるコンテンツをデザイ ンすることだと考える」 P.115 より 「もはやPC上の体験を考慮するだけでは足りず、さらに言うなら ば、モバイル体験だけを考慮するだけでは足りません」 「モバイル端末はより大きなデバイスエコシステムの一部である」
    • コンバージェンス あなたのウェブサイトを利用するために、 ユーザーがしたいことの途中に、あなたの ユーザーはウェブサイトに合わせていた。 ウェブサイトがある、だけなのだ。
    • コンバージェンス テクノロジー メディア アクティビティ(行為)
    • エコシステム ユーザーも、ソフトウェアも、サービス ユーザーも、ソフトウェアも、サービス も、デバイスも、それひとつだけで、存在 も、デバイスも、それを支える色々なもの しているわけではない。 も、つながって価値が生まれる。
    • 想像してみてください。楽しいですか? フォローもフォロワーも、1人もいないTwitter。 フレンドが1人もいないFacebook。 アプリも、App StoreもないiPad。 接続できないインターネット。
    • エコシステム タッチポイント ビジネスプロセスと 技術環境 人々
    • 参加型デザイン P.98∼101 より 環境 小道具 刺激 「つながり」を理解するには「参加型デザイン」がよい。 「環境」「小道具」「刺激」を用意し、ユーザーに演技をしてもらおう。 ユーザー調査 しましょう
    • 4章 見どころ • コンバージェンス(融合) • デバイスからデバイスへシームレスに • テクノロジー、メディア、アクティビティ(行為) • エコシステム • タッチポイント、人々、プロセスと環境 • 参加型デザイン • 状況的行為 • マルチスクリーン戦略 • ネイティブアプリ、ウェブアプリ、モバイル向けウェブサイト
    • 5章 モバイルUXパターン Mobile UX Patterns モビリティのためにデザインする Designing for Mobility Nov 30 2013 Hiroko Nozawa @HTML5 Conference
    • モバイルのパタンランゲージとは? 1. クラウドとアプリがモバイルUXの構成単位となる 2. 優れたモバイルエクスペリエンスは徐々にその本質を 明らかにする 3. コンテンツがインターフェイスになる 4. モバイルにふさわしい入力方法を使う 5. タスクを終わらせることよ、さようなら
    • モバイルは小さいPCではない! • PCのデザインパターンは積むこと。 • モバイルのデザインパターンは、広げること。直感。
    • モバイルUXのためのパターン マトリョーシカ ハブ&スポークス
    • コンテンツがインタフェースになる • 物理的なUIから相互につながった情報のUIへ • NUI(ジェスチャーとスーパーリアル)
    • モバイルならではの入力方法を使う
    • タスクを終わらせることよ、さようなら 1.使い続けることで価値が増える 2.いじりたくなる 3.察する
    • 6章 モバイルプロトタイピング Mobile Prototyping モバイルエクスペリエンスをデザインするためのツールと手法 Tools and Methods for Designing Mobile Nov 30 2013 Nob Sato @HTML5 Conference
    • モバイルUXのためのデザインプロセス なぜプロトタイピングか? モバイルプロトタイピングの種類 戦術的プロトタイピング 体験的プロトタイピング プロトタイピング、3つの公理
    • モバイルUXのためのデザインプロセス 典型的なダブルダイアモンド型のデザインプロセス 発見 定義 開発 納品 デザインの決定 時間 アイデアが広がる フェーズ 開始 アイデアを 実現するフェーズ 終了
    • なぜプロトタイピングなのか? • デザインアイデアやエクスペリエンスの伝達(共有) • ユーザーのフィードバックの収集できる • 未知の探求ができる • アイデアの微調整を行える
    • モバイルプロトタイピングの種類 • 戦術的プロトタイピング  Tactical Prototyping • 体験的プロトタイピング  Experimental Prototyping
    • 戦術的プロトタイピング 1. スケッチ 2. ペーパープロトタイピング 3. 実機上でのインタラクティブなプロトタイプ
    • 体験的プロトタイピング 1. ストーリーボーディング 2. ボディーストーミング(アクティングアウト) 3. スピード・デート法 4. コンセプトビデオ
    • プロトタイピング、3つの公理 • 適度な忠実度で行う、完璧主義者にならない。 • 失敗を受け入れ、勇気をもって次のアイデアに進む。 • プロトタイピングは万能薬ではない。 「完璧は最適の敵」 フランスの有名な詩人 ヴォルデール
    • 7章 モーションとアニメーション Motion and Animation 新しいモバイルUXのためのデザイン要素 A New Mobile UX Design Material Nov 30 2013 Yukio Andoh @Mobile Frontier Workshop
    • アニメーションの法則 multitasking woman
    • ディズニーアニメーション 生命を吹き込む魔法
    • ディズニーのアニメーションの12原則 ■ スクオッシュ(潰し)とストレッチ(伸ばし) ■ アンチシペーション(予備動作) ■ ステージング(舞台演出) ■ ストレート・アヘッド・アクション(逐次描き)とポーズ・   トゥ・ポーズ(原画による設計) ■ フォロー・スルーとオーバーラッピング・アクション(あと   追いの工夫) ■ スロー・インとスロー・アウト(両端づめ) ■ アーク(運動曲線) ■ 副次アクション ■ タイミング ■ 誇張 ■ 実質感のある絵
    • Meaningful Transitions
    • アニメーションの原則を生かす方法 1■ 良いアプリをたくさん探し、使い込む。事例の引き出し 2■ 良いものが、なぜ良いのか、要素を分析・分解する (ハイスピードカメラ) 3■ 常用アプリが更新したら、どこが変わったのか比較する 4■ 必要なのは「意味のある」動きだけ。操作の前後の動き重要 5■ コンテンツが王様。直接操作。UIは本来無くていいもの 6■ 指が触れて操作する瞬間は画面が見えてないことを考慮 7■ 情報の密度を落とす。動きで着目すべきところを演出する (速さ) 8■ 中断、途中から始まることが前提。時間の流れを考慮する
    • 8章 感覚の目覚め Awakening the Senses タッチ、ジェスチャー、音声とサウンド Touch, Gesture, Voice, and Sound Nov 30 2013 Yoshiki Hayama @Mobile Frontier Workshop
    • 8章を、ひとことで言うと 「視覚以外の感覚も、ある」
    • P.231 より 「人間は実際に見なくても、どこで何が起こっているかをとても 正しく把握することができます。消防車の音、ゴミの臭い、地震の 揺れ。私たちは感覚を使って本能的に身のまわりの状況を把握して います」 P.232より 「モバイルUXをデザインする際に考慮すべき、十分に活用されて いない3つの感覚をとりあげます。それは、タッチ、ジェス チャー、音声とサウンドです」
    • タッチインターフェース タッチターゲット 18mm 15mm タッチジェスチャーの配置 コンテンツにつなげる 姿勢と、操作しやすい配置 UIを意識しない 10mm 押しやすい大きさ
    • ジェスチャー なじみのジェスチャー 付加的な感覚の + 新しいジェスチャー フィードバック 知っている操作をもとにする 操作した感じがする 根気と創造力 ユーザーに使ってもらう
    • 音声によるインターフェース
    • 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属性の書きかた すごい充実した解説
    • どのくらい 充実しているか というと・・・
    • まだまだ続くよ!
    • じつに充実
    • HTML 5 : alt属性の書きかた 例:フォームのステップナビゲーション 入力 alt= 入力 確認 alt= 確認 完了 alt= 完了
    • HTML 5 : alt属性の書きかた [例] 例:フォームのステップナビゲーション alt= お問い合わせ完了まで全部で3ステップです" 入力 alt= ステップ1の 入力は完了してい ます" 確認 alt= 現在はス テップ2の確認で す 完了 alt= 最後はス テップ3の完了で す
    • 8章 見どころ • 人間の感覚は、視覚だけでなく、触覚、身体の動き、聴覚 • タッチインターフェース • タッチターゲット、タッチジェスチャーの配置、コンテンツと一体化 • ジェスチャー • なじみのジェスチャー+新しいジェスチャー、付加的な感覚のフィードバック、根気と創造力 • 音声によるインターフェース
    • 9章 新しいモバイルのかたち New Mobile Forms モバイルフロンティアの開拓者 Pioneering the Mobile Frontier Nov 30 2013 Yukio Andoh @HTML5 Conference
    • デジタルデバイスの新しいかたち ■コンピュータと身体との境界の遷移 ■コンピュータと環境との境界の遷移 ■モバイルと新興市場
    • デジタルデバイスの新しいかたち
    • ファッションとして身体として
    • 世の中にあふれるID
    • 携帯電話が銀行の代わりに(M-PESA)
    • 間違いなくモバイルの時代
    • モバイルフロンティアの開拓 (CC) by Woody H1