• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
第45回HTML5とか勉強会(ユーザーエクスペリエンスとペーパープロトタイピング)
 

第45回HTML5とか勉強会(ユーザーエクスペリエンスとペーパープロトタイピング)

on

  • 3,593 views

第45回HTML5とか勉強会

第45回HTML5とか勉強会
ユーザーエクスペリエンスとペーパープロトタイピング

Statistics

Views

Total Views
3,593
Views on SlideShare
3,533
Embed Views
60

Actions

Likes
23
Downloads
39
Comments
0

3 Embeds 60

https://twitter.com 57
http://gecko.hatenadiary.com 2
http://s.deeeki.com 1

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

    第45回HTML5とか勉強会(ユーザーエクスペリエンスとペーパープロトタイピング) 第45回HTML5とか勉強会(ユーザーエクスペリエンスとペーパープロトタイピング) Presentation Transcript

    • 第45回HTML5とか勉強会 ユーザーエクスペリエンスと ペーパープロトタイピング 安藤幸央(株式会社エクサ) 2014/2/17 @yukio_andoh 1
    • #html5j 2
    • 3 安藤幸央 ブログ安藤日記 @yukio_andoh FB,G+
    • Mobile UX モバイルUXと役立つペー パープロトタイピング指南 4
    • 5 ●リサーチ●プロトタイピング●モックアップ●ベータ版
    • 6 ペーパー プロトタイピング 紙とペンでの試作 photo by gualtiero
    • 7 質問:何のプロト?
    • 8 Square
    • 9 field test
    • なぜ紙とペンを使う? 10 何よりも素早くできる。 試作コストが少なくてすむ。 やり直しが簡単。早めに的確な失敗ができる。 出来あがった感じがしない。重要なことだけに集中できる 目(と指)は口ほどにモノを言う。
    • 紙とペンの利点 細かいところまで複数の人で議論できる 使いにくさ、使いやすさが体感できる すぐに修正し、いろいろ試せる 完成していると思わせない 進歩の早い技術とは違い、たぶん10年後も有効なスキル 11
    • 紙とペンの欠点 12 完成していないので、いろいろ想像しながら試すことになる 動きやアニメーションはこの段階では検討できない 風で飛んでいく 紙で手を切る 一般的には理解が得られにくい             「こんなメモみたいなアプリをどうやって試すんだ!」
    • 法則1 画面を見直すと気づきがある 13
    • 法則2 道具にこだわろう! 14
    • 方眼ノート/ポストイット/ペン 15
    • “UI template” 名前/日付 16
    • 法則2 アウトプットの質はインプットの質と量に比例する 17 たくさん見る、使う、調べる
    • Text http://www.mobileawesomeness.com “mobile web gallery” http://www.mobilewebsitesubmit.com 18
    • Dribbble 19
    • Pinterest 20
    • Behance 21
    • Human Interface Guidelines / Android Design 22
    • Google Play / Apple AppStore 23
    • “Mobile UI Patterns” 24
    • UI mini book 25
    • 26 試作・実践
    • 27 インスクリーン (オンデバイス) プロトタイピング 紙に描いたスケッチ を、カメラで取り込 んでスマートフォン の画面で確認します photo via popapp.in
    • 法則4 素早く試して、素早く失敗しよう 28
    • 法則5 本当に大切な2,3の機能を作ろう 29
    • 法則6 凝りすぎない。作り込みすぎない 30
    • 法則7 完璧を目指さない。失敗を受け入れる 31 誰のせいでもない
    • 法則8 実際の環境で検討するのが重要 32
    • 法則9 客観的に見る、時間をおいて見る 33
    • 法則10 素晴らしい試作も、本物ではない 34
    • 35 便利ツール PC画面を転送 photo by schnaars
    • 36 POP Prototyping On Paper photo by schnaars
    • コツ 37 必要な要素を適切な場所に配置する。本当にそこに必要か? ある目的に向かって、素直に操作できるか流れを確認する 間接的な操作(ボタンやスイッチ)と直接操作を意識する アイデアが有益で正しい方向を向いているのか確かめる 抜け、漏れ、作らなければいけない事項を洗い出す 目的を実現するための機能、使いやすさ、楽しさを確認する
    • Mobile UX PC Web とモバイル Web との連続したユーザー体験 の構築 38 photo by urban don photo by DaveLawler
    • PC Mobile 39 アクセス解析 と実際の利用
    • 40 via precious-forever.com
    • 41 via precious-forever.com
    • Mobile UX モバイルWeb とスマート フォンアプリの違い 適材適所 42 photo by urban don photo by DaveLawler
    • Native vs. HTML5 43
    • 44 HTML5を取り入れるのには時期が早過ぎた Facebook CEO : Mark Zuckerberg
    • 「ザッカーバーグがHTML5はまだその時期ではない」  と言ったとき、私たちは少し腹をたてました。 Sencha Touch  45
    • Fastbook by Sencha http://fb.html5isready.com 46
    • 47
    • 多くの場合、 素早く動作するスマホアプリが理想だが、 モバイルWebの方が向いている場合もあり 48 Photo by Ed Callow
    • Mobile Web → 改変が頻繁になされるとき 多くの機種で使われる時 社内利用で想定ユーザーが解っている場合 開発要員の問題、コストの観点 49 photo by markjsebastian
    • 外側はネイティブアプリ、 中身はWebView、コンテンツはHTML = ハイブリットアプリ 50 ●ツールやフレームワークが色々ある。WebViewで自作も。 ●ライフサイクルが短い場合。 ●対応機種が少ない場合。 ●文字入力が少なくて済むもの。 ●セキュリティ要件が厳しくないもの。
    • Native App vs. Mobile Web UIにどれだけ凝る?完全オリジナルのUIか標準もしくは 標準の延長線にあるUIか。 アプリの動作スピードをどれほど重要視するか 一般向けのアプリか、特定ユーザー(例えば社内利用の みなど)向けか? 開発者のスキルや、人員の確保(バージョンアップも含 め)。開発費用に直接影響。 出来ること、できないことで判断する。カメラ機能や、 動画再生、各種センサー、OpenGL ES など 51
    • Native App vs. Mobile Web ネット接続が最重要なサービスか?オフラインでも使え なければいけないのか? どれぐらいの種類のデバイスに対応しなければいけない のか? 今後出てくる新機種にどのくらい対応しなければいけな いのか? マネタイズの方法をどうするか?有料アプリとして販売 するのか広告収入なのか? アプリストアに出さない場合は、ユーザーの流入を別途 考えなければいけない。TV広告?SEOは? 52
    • Native App vs. Mobile Web アプリの配布方法、アプリを広める方法はどうするか? リリース後のバージョンアップ、メンテナンス対応をど う進めるのか? 頻繁なアップデートを予定しているのか?プラット フォームリスクは?審査の時間は想定している? サーバーのアクセス負荷、求められるレスポンスに充分 対応できるか?ユーザー数はスケールするか? コンテンツや中身や機能の更新頻度に対応できるか? 53
    • 54 Pros & Cons
    • 強み ネイティブアプリ モバイルWeb 55 たいていの場合、モバイルWebよりも高速 アプリストアや、アプリ市場で アプリを見つけてもらいやすい ストアの承認(審査)プロセスが必要。審査は 面倒だが結果的に高品質のアプリを提供できる プラットフォームに関わらず共通のコード アプリをダウンロードする必要が無い いつでも自由にリリース、アップデートできる 高機能な開発ツールを利用でき、 すでに Web を持っているのであれば、 開発ノウハウも蓄積されている モバイル対応しやすい(含レスポンシブ)
    • 弱み ネイティブアプリ モバイルWeb 56 複数プラットフォーム、複数デバイスに デバイスの持つ全ての機能を活用することがで 対応するばあい、どうしても開発費がかさむ きない(GPSトラッキング、センサー、3D等) 複数プラットフォームをサポートする場合、開 複数のデバイス、複数のブラウザをサポートす 発、保守、更新、テストの費用がかさむ る場合、開発、保守の費用がかさむ 市場に複数のバージョンが存在する場合がある ユーザーがどのバージョンのどのブラウザを使 古いバージョンを使い続ける人も居る うのか、限定できない、指定しづらい ストアの承認(審査)プロセスに依存する モバイルWebの存在を知ってもらうことが難し リリース/更新時期が遅れる場合がある い。キャンペーンや検索エンジン最適化も考慮
    • 費用があるなら、ネイティブアプリも、モバイルWebサイトも両方 対応するのがベスト。 資金が潤沢ではないベンチャーや個人がスピード感をもってサービ スをローンチしなければいけないならアプリから(それもどちらか 片方のプラットフォームから)。 社内利用や、長期的に超多機種対応、維持しなければいけない場合 はモバイルWebを検討。 PCもモバイルも全部一緒にローンチする場合は、レスポンシブデザ インを考えるのも一つの方策。 モバイル対応せずに、PC Web をモバイルでも使いやすいデザイン にするという考え方もある。(例:Apple.co.jp) モバイルゲーム、ソーシャルゲームの場合は、上記の観点が成り立 たない場合もあります。 57
    • Mobile UX モバイルWeb、モバイルア プリのプロトタイピングの 勘所 58 photo by urban don photo by DaveLawler
    • 移動中で急いでいる、不安定な状況 または、 間時間、目的が無い利用 PCWebの全機能が必要なわけではない 59
    • モバイルならではの体験が重要。 画像や文章等、情報量が1画面の中では限界があるので視認性重視 テキスト入力は面倒。テキストメッセージングが主流だとしても。 簡単にやりたいことが見つからないといけない。 縦スクロールか、横スクロール(スワイプ)、どちらか一方 自動で色々できたり、操作や入力が少なくてすむ配慮を。 シンプルが全て。操作も体験も全てシンプル。 60
    • 始まりがなく終わりのないストーリー(ナラティブ) 片手の指で使う(触った時に隠れることを忘れずに) 素早く使える(画面遷移や手数が少なくてすむ) 見てもらうだけでなく操作してもらう(平易な操作) 画面表示までの時間をより短く、操作を妨げない テストと改善を繰り返す 61
    • Workshop 前半 62 photo by urban don photo by DaveLawler
    • スマホ、紙、ペン持ってない人いますか? 隣りの方に 分けてもらったり見せてもらってください。 まず、javari.jp のモバイルWebを見よう見まねで書いて みてください。 四角と丸が書ければ描けるはず。文字の部分は「∼」で 紙にスケッチ。スマホで撮影。印象を見比べる。 何かご質問は? javari 63
    • Jelly 64 太さ 角丸
    • ここから パソコンも閉じて スマートフォンも にしまって下さい 65
    • Etsy.com を題材にします。英語がどうしても苦手な人は Amazon.co.jp で。 スマホをこっそり見たり、カンニングは無しで! PC Web から表示要素を 10個以上列挙する。商品(写 真、名前、価格、お気に入り)/検索/カテゴリなど。 それぞれの機能の、モバイル利用での重要度を考える Etsyの手作りECサイトのモバイルでの利用ストーリー で、重要な1∼3つの体験を考える。探す、だら見、等 上記を考えて、モバイルならではの必要な機能を 5個。1 位から5位まで記述する。 66
    • 周りとは相談せずに 10分間作業 ∼00:00 67 photo by Fernando J. Toucedo Urban
    • 3人1組。自分が全体の半分以上しゃべりすぎだな∼と 思ったら、少し遠慮してください。  向かって右側の人から順に 一人1分で、 自己紹介。 名前もしくはニックネーム。名刺交換、Facebook, Twitter アカウントを交換するのはまた後で。 会社名は名乗らないこと。職種(プログラマ寄りなの か、デザイナーなのか?)を紹介。 学生さんであれば、どちらを学んでいるのか?どちらに なりたいのか? 時間が無いので、とうとうと仕事の紹介はしないで。 68
    • 名前 職種 最近オンラインで買ったもの。 今までにオンラインで購入した一番高額なもの。 旅行/家電/コンピュータ/デジカメ/エステ/家/車 最近リアル店舗で買ったもの(コンビニ含む)。 商品を買うまでのストーリがあれば 69
    • 自己紹介スタート! 70
    • 名前 職種 最近オンラインで買ったもの。思い出したもので良い。 今までにオンラインで購入した一番高額なもの。 旅行/家電/コンピュータ/デジカメ/エステ/家/車 最近リアル店舗で買ったもの(コンビニ含む)。 商品を買うまでのストーリがあれば 71
    • 72 先ほどピックアップした 5個の項目 隣りの人と、重要度を見比べて、異なっていたら.... なぜ重要なのか自分なりの理由を話した上、相談の 上、皆が同じ項目に合わせてみてください。 何かご質問は?
    • 休憩 15分 ∼00:00まで 73 photo by urban don photo by DaveLawler
    • Workshop 後半 74 photo by urban don photo by DaveLawler
    • 前半で記述した5つの機能を載せたモバイルWeb また は モバイルアプリのトップ画面1画面を考えてくださ い。 1画面に収めても良いですし、2画面分くらい、縦スク ロールしても良いです。 横向きの画面は考えません。2画面目以降の画面遷移は (作業時間が無いので)ここでは考えません。 紙に描いて、間違えたら、消すのではなく書き直す 75
    • スマートフォンを取り出します。 紙に書いたのを、スマートフォンで写真を撮ってみてく ださい。ここまでは一人作業です。 3人チーム、お互いのものを紙と画面を見せ合って、違 いのある部分を見つけてください。 アプリの場合、Android 、iPhone は、それぞれUIの流儀 が違うので、それは受け入れてください。 良いところ、悪いところをみつけ、それがなぜ良いの か、なぜ悪いのかをお互い説明してください。 Etsyの本物のモバイルWeb やモバイルアプリと見比べ て、どこが違うのか、なぜ違ったのか考えてください。 76
    • 講評 Etsy Mobile Etsy App 77
    • Android Mobile Web iPhone 78 検索、カート、商品写真・価格、ハートマーク、商品カテゴリ
    • photo by milosevic 質疑応答 なんでも質問受付ます! 今日の勉強会のこと、 普段気になることでも、 お困りごとでも、 お悩み相談でも、 お仕事の依頼でも.... 79
    • Dashboard UI Enterprise UI Kids UI 10 foot UI Flat UI 80 via. BASIS
    • Thanks!! 安藤幸央 ブログ安藤日記 @yukio_andoh FB,G+ 81