0
第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か。
アプリの動作スピードをどれほど重要視するか
一般向けのアプリか、特定ユーザー(例えば社内利用の
みなど)向け...
Native App vs. Mobile Web
ネット接続が最重要なサービスか?オフラインでも使え
なければいけないのか?
どれぐらいの種類のデバイスに対応しなければいけない
のか?
今後出てくる新機種にどのくらい対応しなければいけな
いの...
Native App vs. Mobile Web
アプリの配布方法、アプリを広める方法はどうするか?
リリース後のバージョンアップ、メンテナンス対応をど
う進めるのか?
頻繁なアップデートを予定しているのか?プラット
フォームリスクは?審査の...
54

Pros & Cons
強み
ネイティブアプリ

モバイルWeb
55

たいていの場合、モバイルWebよりも高速

アプリストアや、アプリ市場で
アプリを見つけてもらいやすい

ストアの承認(審査)プロセスが必要。審査は
面倒だが結果的に高品質のアプリを提供できる
...
弱み
ネイティブアプリ

モバイルWeb
56

複数プラットフォーム、複数デバイスに

デバイスの持つ全ての機能を活用することがで

対応するばあい、どうしても開発費がかさむ

きない(GPSトラッキング、センサー、3D等)

複数プラットフ...
費用があるなら、ネイティブアプリも、モバイルWebサイトも両方
対応するのがベスト。
資金が潤沢ではないベンチャーや個人がスピード感をもってサービ
スをローンチしなければいけないならアプリから(それもどちらか
片方のプラットフォームから)。
社...
Mobile UX
モバイルWeb、モバイルア
プリのプロトタイピングの
勘所

58
photo by urban don

photo by DaveLawler
移動中で急いでいる、不安定な状況
または、

間時間、目的が無い利用

PCWebの全機能が必要なわけではない
59
モバイルならではの体験が重要。
画像や文章等、情報量が1画面の中では限界があるので視認性重視
テキスト入力は面倒。テキストメッセージングが主流だとしても。
簡単にやりたいことが見つからないといけない。
縦スクロールか、横スクロール(スワイプ)、...
始まりがなく終わりのないストーリー(ナラティブ)
片手の指で使う(触った時に隠れることを忘れずに)
素早く使える(画面遷移や手数が少なくてすむ)
見てもらうだけでなく操作してもらう(平易な操作)
画面表示までの時間をより短く、操作を妨げない
テ...
Workshop
前半

62
photo by urban don

photo by DaveLawler
スマホ、紙、ペン持ってない人いますか? 隣りの方に
分けてもらったり見せてもらってください。
まず、javari.jp のモバイルWebを見よう見まねで書いて
みてください。
四角と丸が書ければ描けるはず。文字の部分は「∼」で
紙にスケッチ。ス...
Jelly

64

太さ
角丸
ここから
パソコンも閉じて
スマートフォンも
にしまって下さい

65
Etsy.com を題材にします。英語がどうしても苦手な人は
Amazon.co.jp で。
スマホをこっそり見たり、カンニングは無しで!
PC Web から表示要素を 10個以上列挙する。商品(写
真、名前、価格、お気に入り)/検索/カテゴリ...
周りとは相談せずに
10分間作業
∼00:00

67
photo by Fernando J. Toucedo Urban
3人1組。自分が全体の半分以上しゃべりすぎだな∼と
思ったら、少し遠慮してください。 
向かって右側の人から順に 一人1分で、 自己紹介。
名前もしくはニックネーム。名刺交換、Facebook,
Twitter アカウントを交換するのはまた後で...
名前
職種
最近オンラインで買ったもの。
今までにオンラインで購入した一番高額なもの。
旅行/家電/コンピュータ/デジカメ/エステ/家/車

最近リアル店舗で買ったもの(コンビニ含む)。
商品を買うまでのストーリがあれば

69
自己紹介スタート!

70
名前
職種
最近オンラインで買ったもの。思い出したもので良い。
今までにオンラインで購入した一番高額なもの。
旅行/家電/コンピュータ/デジカメ/エステ/家/車

最近リアル店舗で買ったもの(コンビニ含む)。
商品を買うまでのストーリがあれば
...
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画面目以降の画面遷移は
(作...
スマートフォンを取り出します。
紙に書いたのを、スマートフォンで写真を撮ってみてく
ださい。ここまでは一人作業です。
3人チーム、お互いのものを紙と画面を見せ合って、違
いのある部分を見つけてください。
アプリの場合、Android 、iPho...
講評
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
Upcoming SlideShare
Loading in...5
×

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

3,721

Published on

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

Published in: Technology
0 Comments
26 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
3,721
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
44
Comments
0
Likes
26
Embeds 0
No embeds

No notes for slide

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

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

    Clipping is a handy way to collect important slides you want to go back to later.

×