第45回HTML5とか勉強会

ユーザーエクスペリエンスと

ペーパープロトタイピング

安藤幸央（株式会社エクサ）

2014/2/17 @yukio_andoh1

#html5j 2

安藤幸央

ブログ安藤日記

@yukio_andoh

FB,G+

3

モバイルUXと役立つペーパープロトタイピング指南

Mobile UX

4

●リサーチ●プロトタイピング●モックアップ●ベータ版

5

ペーパー

プロトタイピング

紙とペンでの試作

photo by gualtiero

6

質問：何のプロト？7

Square8

field test9

何よりも素早くできる。 試作コストが少なくてすむ。

やり直しが簡単。早めに的確な失敗ができる。

出来あがった感じがしない。重要なことだけに集中できる

目（と指）は口ほどにモノを言う。

なぜ紙とペンを使う？ 10

紙とペンの利点細かいところまで複数の人で議論できる

使いにくさ、使いやすさが体感できる

すぐに修正し、いろいろ試せる

完成していると思わせない

進歩の早い技術とは違い、たぶん10年後も有効なスキル

11

紙とペンの欠点完成していないので、いろいろ想像しながら試すことになる

動きやアニメーションはこの段階では検討できない

風で飛んでいく

紙で手を切る

一般的には理解が得られにくい　　　　　　　　　　　　

「こんなメモみたいなアプリをどうやって試すんだ！」

12

法則１

画面を見直すと気づきがある13

法則２

道具にこだわろう！14

方眼ノート／ポストイット／ペン15

“UI template”名前／日付

16

法則２アウトプットの質はインプットの質と量に比例する

たくさん見る、使う、調べる

17

“mobile web gallery”http://www.mobileawesomeness.com

Text

http://www.mobilewebsitesubmit.com 18

Dribbble19

Pinterest20

Behance21

Human Interface Guidelines / Android Design22

Google Play / Apple AppStore23

“Mobile UI Patterns”24

UI mini book25

試作・実践

26

インスクリーン

（オンデバイス）

プロトタイピング

紙に描いたスケッチ

を、カメラで取り込

んでスマートフォン

の画面で確認します

photo via popapp.in

27

法則４

素早く試して、素早く失敗しよう28

法則5

本当に大切な2,3の機能を作ろう29

法則6

凝りすぎない。作り込みすぎない30

法則7

完璧を目指さない。失敗を受け入れる誰のせいでもない31

法則8

実際の環境で検討するのが重要32

法則9

客観的に見る、時間をおいて見る33

法則10

素晴らしい試作も、本物ではない34

便利ツール

PC画面を転送

photo by schnaars

35

POP

Prototyping

On

Paper

photo by schnaars

36

コツ必要な要素を適切な場所に配置する。本当にそこに必要か？

ある目的に向かって、素直に操作できるか流れを確認する

間接的な操作（ボタンやスイッチ）と直接操作を意識する

アイデアが有益で正しい方向を向いているのか確かめる

抜け、漏れ、作らなければいけない事項を洗い出す

目的を実現するための機能、使いやすさ、楽しさを確認する

37

Mobile UX

photo by urban don photo by DaveLawler

PC Web とモバイル Web との連続したユーザー体験

の構築

38

PC Mobile

39

アクセス解析と実際の利用

via precious-forever.com

40

via precious-forever.com

41

Mobile UX

photo by urban don photo by DaveLawler

モバイルWeb とスマートフォンアプリの違い

適材適所

42

Native vs. HTML543

HTML5を取り入れるのには時期が早過ぎたFacebook CEO : Mark Zuckerberg

44

「ザッカーバーグがHTML5はまだその時期ではない」　と言ったとき、私たちは少し腹をたてました。

Sencha Touch　 45

Fastbook by Senchahttp://fb.html5isready.com

46

47

多くの場合、素早く動作するスマホアプリが理想だが、モバイルWebの方が向いている場合もあり

Photo by Ed Callow

48

Mobile Web → 改変が頻繁になされるとき多くの機種で使われる時

社内利用で想定ユーザーが解っている場合開発要員の問題、コストの観点

photo by markjsebastian

49

外側はネイティブアプリ、中身はWebView、コンテンツはHTML

= ハイブリットアプリ

●ツールやフレームワークが色々ある。WebViewで自作も。●ライフサイクルが短い場合。●対応機種が少ない場合。●文字入力が少なくて済むもの。●セキュリティ要件が厳しくないもの。

50

UIにどれだけ凝る？完全オリジナルのUIか標準もしくは標準の延長線にあるUIか。

アプリの動作スピードをどれほど重要視するか

一般向けのアプリか、特定ユーザー（例えば社内利用のみなど）向けか？

開発者のスキルや、人員の確保（バージョンアップも含め）。開発費用に直接影響。

出来ること、できないことで判断する。カメラ機能や、動画再生、各種センサー、OpenGL ES など

51

Native App vs. Mobile Web

ネット接続が最重要なサービスか？オフラインでも使えなければいけないのか？

どれぐらいの種類のデバイスに対応しなければいけないのか？

今後出てくる新機種にどのくらい対応しなければいけないのか？

マネタイズの方法をどうするか？有料アプリとして販売するのか広告収入なのか？

アプリストアに出さない場合は、ユーザーの流入を別途考えなければいけない。TV広告？SEOは？

52

Native App vs. Mobile Web

アプリの配布方法、アプリを広める方法はどうするか？

リリース後のバージョンアップ、メンテナンス対応をどう進めるのか？

頻繁なアップデートを予定しているのか？プラットフォームリスクは？審査の時間は想定している？

サーバーのアクセス負荷、求められるレスポンスに充分対応できるか？ユーザー数はスケールするか？

コンテンツや中身や機能の更新頻度に対応できるか？

53

Native App vs. Mobile Web

Pros & Cons54

ネイティブアプリ モバイルWeb

たいていの場合、モバイルWebよりも高速 プラットフォームに関わらず共通のコード

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

アプリをダウンロードする必要が無い

ストアの承認（審査）プロセスが必要。審査は面倒だが結果的に高品質のアプリを提供できる

いつでも自由にリリース、アップデートできる

高機能な開発ツールを利用でき、開発ノウハウも蓄積されている

すでに Web を持っているのであれば、モバイル対応しやすい（含レスポンシブ）

強み

55

ネイティブアプリ モバイルWeb

複数プラットフォーム、複数デバイスに対応するばあい、どうしても開発費がかさむ

デバイスの持つ全ての機能を活用することができない（GPSトラッキング、センサー、3D等）

複数プラットフォームをサポートする場合、開発、保守、更新、テストの費用がかさむ

複数のデバイス、複数のブラウザをサポートする場合、開発、保守の費用がかさむ

市場に複数のバージョンが存在する場合がある古いバージョンを使い続ける人も居る

ユーザーがどのバージョンのどのブラウザを使うのか、限定できない、指定しづらい

ストアの承認（審査）プロセスに依存するリリース／更新時期が遅れる場合がある

モバイルWebの存在を知ってもらうことが難しい。キャンペーンや検索エンジン最適化も考慮

弱み

56

費用があるなら、ネイティブアプリも、モバイルWebサイトも両方対応するのがベスト。

資金が潤沢ではないベンチャーや個人がスピード感をもってサービスをローンチしなければいけないならアプリから（それもどちらか片方のプラットフォームから）。

社内利用や、長期的に超多機種対応、維持しなければいけない場合はモバイルWebを検討。

PCもモバイルも全部一緒にローンチする場合は、レスポンシブデザインを考えるのも一つの方策。

モバイル対応せずに、PC Web をモバイルでも使いやすいデザインにするという考え方もある。（例：Apple.co.jp）

モバイルゲーム、ソーシャルゲームの場合は、上記の観点が成り立たない場合もあります。

57

Mobile UX

photo by urban don photo by DaveLawler

モバイルWeb、モバイルアプリのプロトタイピングの

勘所

58

移動中で急いでいる、不安定な状況または、隙間時間、目的が無い利用

PCWebの全機能が必要なわけではない59

モバイルならではの体験が重要。

画像や文章等、情報量が1画面の中では限界があるので視認性重視

テキスト入力は面倒。テキストメッセージングが主流だとしても。

簡単にやりたいことが見つからないといけない。

縦スクロールか、横スクロール（スワイプ）、どちらか一方

自動で色々できたり、操作や入力が少なくてすむ配慮を。

シンプルが全て。操作も体験も全てシンプル。

60

始まりがなく終わりのないストーリー（ナラティブ）

片手の指で使う（触った時に隠れることを忘れずに）

素早く使える（画面遷移や手数が少なくてすむ）

見てもらうだけでなく操作してもらう（平易な操作）

画面表示までの時間をより短く、操作を妨げない

テストと改善を繰り返す

61

Workshop前半

photo by urban don photo by DaveLawler

62

スマホ、紙、ペン持ってない人いますか？　隣りの方に分けてもらったり見せてもらってください。

まず、javari.jp のモバイルWebを見よう見まねで書いてみてください。

四角と丸が書ければ描けるはず。文字の部分は「～」で

紙にスケッチ。スマホで撮影。印象を見比べる。

何かご質問は？

63

javari

Jelly

太さ角丸

64

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

65

Etsy.com を題材にします。英語がどうしても苦手な人は Amazon.co.jp で。

スマホをこっそり見たり、カンニングは無しで！

PC Web から表示要素を 10個以上列挙する。商品（写真、名前、価格、お気に入り）／検索／カテゴリなど。

それぞれの機能の、モバイル利用での重要度を考える

Etsyの手作りECサイトのモバイルでの利用ストーリーで、重要な1～3つの体験を考える。探す、だら見、等

上記を考えて、モバイルならではの必要な機能を 5個。1位から5位まで記述する。

66

周りとは相談せずに10分間作業～00:00

photo by Fernando J. Toucedo Urban67

3人1組。自分が全体の半分以上しゃべりすぎだな～と思ったら、少し遠慮してください。　

向かって右側の人から順に 一人１分で、 自己紹介。

名前もしくはニックネーム。名刺交換、Facebook, Twitter アカウントを交換するのはまた後で。

会社名は名乗らないこと。職種（プログラマ寄りなのか、デザイナーなのか？）を紹介。

学生さんであれば、どちらを学んでいるのか？どちらになりたいのか？

時間が無いので、とうとうと仕事の紹介はしないで。

68

名前

職種

最近オンラインで買ったもの。

今までにオンラインで購入した一番高額なもの。

旅行／家電／コンピュータ／デジカメ／エステ／家／車

最近リアル店舗で買ったもの（コンビニ含む）。

商品を買うまでのストーリがあれば

69

自己紹介スタート！70

名前

職種

最近オンラインで買ったもの。思い出したもので良い。

今までにオンラインで購入した一番高額なもの。

旅行／家電／コンピュータ／デジカメ／エステ／家／車

最近リアル店舗で買ったもの（コンビニ含む）。

商品を買うまでのストーリがあれば

71

先ほどピックアップした 5個の項目

隣りの人と、重要度を見比べて、異なっていたら....

なぜ重要なのか自分なりの理由を話した上、相談の上、皆が同じ項目に合わせてみてください。

何かご質問は？

72

休憩15分

～00:00まで

photo by urban don photo by DaveLawler

73

Workshop後半

photo by urban don photo by DaveLawler

74

前半で記述した5つの機能を載せたモバイルWeb または モバイルアプリのトップ画面1画面を考えてください。

1画面に収めても良いですし、2画面分くらい、縦スクロールしても良いです。

横向きの画面は考えません。2画面目以降の画面遷移は（作業時間が無いので）ここでは考えません。

紙に描いて、間違えたら、消すのではなく書き直す

75

スマートフォンを取り出します。

紙に書いたのを、スマートフォンで写真を撮ってみてください。ここまでは一人作業です。

3人チーム、お互いのものを紙と画面を見せ合って、違いのある部分を見つけてください。

アプリの場合、Android 、iPhone は、それぞれUIの流儀が違うので、それは受け入れてください。

良いところ、悪いところをみつけ、それがなぜ良いのか、なぜ悪いのかをお互い説明してください。

Etsyの本物のモバイルWeb やモバイルアプリと見比べて、どこが違うのか、なぜ違ったのか考えてください。

76

講評Etsy MobileEtsy App

77

Android Mobile Web iPhone

検索、カート、商品写真・価格、ハートマーク、商品カテゴリ

78

質疑応答

なんでも質問受付ます！

今日の勉強会のこと、

普段気になることでも、

お困りごとでも、

お悩み相談でも、

お仕事の依頼でも....

photo by milosevic

79

Dashboard UIEnterprise UIKids UI10 foot UIFlat UI

via. BASIS

80

Thanks!!

安藤幸央

ブログ安藤日記

@yukio_andoh

FB,G+

81