第45回HTML5とか勉強会に行ってきたお話。
第45回HTML5とか勉強会 : ATND に行ってきたメモ書き。
メインのスピーカーは安藤幸央さん(株式会社エクサ、Google Developers Experts (GEO))。
本日のテーマは「ユーザーエクスペリエンスとペーパープロトタイピング」
会場はMicrosoft
途中からのメモ
イマドキオススメの手法
- インスクリーン(オンデバイス)プロトタイピング
- 紙に書いたスケッチをカメラで取り込んでスマートフォンで画面を確認する。
- 実際のデバイス画面で素早く確認できるのが利点
- 方眼ノート便利
インスクリーンプロトタイピングに便利なアプリ
- POP
- Skala View
- iTunes の App Store で配信中の iPhone、iPod touch、iPad 用 Skala View
- Photoshop CS5以降のcanvasをそのまま転送出来る模様
- Filedrop
- iTunes の App Store で配信中の iPhone、iPod touch、iPad 用 Filedrop.
- Dropboxより簡単にPCとの画像を共有できる
インスクリーンプロトタイピングのコツ
- 必要な要素を適切な場所に配置する。本当にそこに必要か？
- ある目的に向かって、素直に操作できる流れを確認する
- 間接的な操作(ボタンやスイッチ)と直接操作を意識する
- アイディアが有益で正しい方向を向いているのか確かめる
- 抜け、漏れ、作らなければならない事項を洗い出す
- 目的を実現するための機能、使いやすさ、楽しさを確認する
Mobile UX
Mobile UX
- モバイルWebとスマートフォンアプリの違いと適材適所
HTMLが向いているケース
-
- 改変が多い
- 対応機種が多い
- 社内利用メインの場合
- 開発要員の問題
- コスト観点
ハイブリッドアプリが向いているケース
-
- 外側はネイティブアプリ, 中身はWebView, コンテンツはHTML
- 文字入力が少なくてすむ場合(多いとモタツキ、UXに支障が出る)
- ライフサイクルが短い場合
- 対応機種が少ない場合
- セキュリティ要件が厳しいものには向いてない(？)
ワークショップ前半
ワークショップ後半
- PC版 Etsy - Your place to buy and sell all things handmade, vintage, and supplies の画面を見て、要素を箇条書きにする
- 箇条書きにした要素の中から、スマホ版に必要な要素をリストアップする
- グループ(3人)の中で、必要な要素を5つ纏め、実際にスマホ版UIを考えてみる
- 各グループごとに発表
- スマホ版 Etsy - Your place to buy and sell all things handmade, vintage, and supplies を見て答え合わせ
- EtsyにはiOS / Android ネイティブアプリもあるのでそちらも見るとそれぞれ特性があって面白いよ
