「使ってもらえるアプリの考え方」スマホデザイン会議 2012...
-
Upload
takayuki-fukatsu -
Category
Design
-
view
130.663 -
download
0
description
Transcript of 「使ってもらえるアプリの考え方」スマホデザイン会議 2012...
![Page 1: 「使ってもらえるアプリの考え方」スマホデザイン会議 2012 忘年会スライド](https://reader038.fdocument.pub/reader038/viewer/2022102901/555cef9ed8b42add648b4a5d/html5/thumbnails/1.jpg)
使ってもらえるアプリの考え方深津貴之
12年12月25日火曜日
![Page 2: 「使ってもらえるアプリの考え方」スマホデザイン会議 2012 忘年会スライド](https://reader038.fdocument.pub/reader038/viewer/2022102901/555cef9ed8b42add648b4a5d/html5/thumbnails/2.jpg)
自己紹介
12年12月25日火曜日
![Page 3: 「使ってもらえるアプリの考え方」スマホデザイン会議 2012 忘年会スライド](https://reader038.fdocument.pub/reader038/viewer/2022102901/555cef9ed8b42add648b4a5d/html5/thumbnails/3.jpg)
• 深津貴之
• Art & Mobile
• Flash / iPhone
12年12月25日火曜日
![Page 4: 「使ってもらえるアプリの考え方」スマホデザイン会議 2012 忘年会スライド](https://reader038.fdocument.pub/reader038/viewer/2022102901/555cef9ed8b42add648b4a5d/html5/thumbnails/4.jpg)
ToyCamera QuadCamera TiltShiGen
12年12月25日火曜日
![Page 5: 「使ってもらえるアプリの考え方」スマホデザイン会議 2012 忘年会スライド](https://reader038.fdocument.pub/reader038/viewer/2022102901/555cef9ed8b42add648b4a5d/html5/thumbnails/5.jpg)
12年12月25日火曜日
![Page 6: 「使ってもらえるアプリの考え方」スマホデザイン会議 2012 忘年会スライド](https://reader038.fdocument.pub/reader038/viewer/2022102901/555cef9ed8b42add648b4a5d/html5/thumbnails/6.jpg)
iPhoneアプリ設計の極意 思わずタップしたくなるアプリのデザイン
監訳
12年12月25日火曜日
![Page 7: 「使ってもらえるアプリの考え方」スマホデザイン会議 2012 忘年会スライド](https://reader038.fdocument.pub/reader038/viewer/2022102901/555cef9ed8b42add648b4a5d/html5/thumbnails/7.jpg)
モバイルデザインパターンユーザーインターフェースのためのパターン集
監訳
12年12月25日火曜日
![Page 8: 「使ってもらえるアプリの考え方」スマホデザイン会議 2012 忘年会スライド](https://reader038.fdocument.pub/reader038/viewer/2022102901/555cef9ed8b42add648b4a5d/html5/thumbnails/8.jpg)
artandmobile.com
twitter.com/fladdict
12年12月25日火曜日
![Page 9: 「使ってもらえるアプリの考え方」スマホデザイン会議 2012 忘年会スライド](https://reader038.fdocument.pub/reader038/viewer/2022102901/555cef9ed8b42add648b4a5d/html5/thumbnails/9.jpg)
ATMアプリを考えてみる
12年12月25日火曜日
![Page 10: 「使ってもらえるアプリの考え方」スマホデザイン会議 2012 忘年会スライド](https://reader038.fdocument.pub/reader038/viewer/2022102901/555cef9ed8b42add648b4a5d/html5/thumbnails/10.jpg)
いままでのまとめとして、ATMアプリを作るとすればどうするか?
12年12月25日火曜日
![Page 11: 「使ってもらえるアプリの考え方」スマホデザイン会議 2012 忘年会スライド](https://reader038.fdocument.pub/reader038/viewer/2022102901/555cef9ed8b42add648b4a5d/html5/thumbnails/11.jpg)
簡単な架空事例を考えてみる
12年12月25日火曜日
![Page 12: 「使ってもらえるアプリの考え方」スマホデザイン会議 2012 忘年会スライド](https://reader038.fdocument.pub/reader038/viewer/2022102901/555cef9ed8b42add648b4a5d/html5/thumbnails/12.jpg)
課題
iPhoneに最適化されたATMアプリを提案する
12年12月25日火曜日
![Page 13: 「使ってもらえるアプリの考え方」スマホデザイン会議 2012 忘年会スライド](https://reader038.fdocument.pub/reader038/viewer/2022102901/555cef9ed8b42add648b4a5d/html5/thumbnails/13.jpg)
全体の流れコアコンセプト
機能の絞り込み
バリエーション列挙
プロトタイピング
12年12月25日火曜日
![Page 14: 「使ってもらえるアプリの考え方」スマホデザイン会議 2012 忘年会スライド](https://reader038.fdocument.pub/reader038/viewer/2022102901/555cef9ed8b42add648b4a5d/html5/thumbnails/14.jpg)
コアコンセプト
12年12月25日火曜日
![Page 15: 「使ってもらえるアプリの考え方」スマホデザイン会議 2012 忘年会スライド](https://reader038.fdocument.pub/reader038/viewer/2022102901/555cef9ed8b42add648b4a5d/html5/thumbnails/15.jpg)
コアコンセプト
誰が? いつ何を どう
12年12月25日火曜日
![Page 16: 「使ってもらえるアプリの考え方」スマホデザイン会議 2012 忘年会スライド](https://reader038.fdocument.pub/reader038/viewer/2022102901/555cef9ed8b42add648b4a5d/html5/thumbnails/16.jpg)
コアコンセプト誰が?
いつ
何を
どう
フリーランス、個人事業主、主婦
銀行での支払い振込を
空いた時間に
わざわざ外出せずにできる
12年12月25日火曜日
![Page 17: 「使ってもらえるアプリの考え方」スマホデザイン会議 2012 忘年会スライド](https://reader038.fdocument.pub/reader038/viewer/2022102901/555cef9ed8b42add648b4a5d/html5/thumbnails/17.jpg)
コアコンセプト
1行で説明できる、ステートメントを作る
フリーランスや主婦が、わざわざ銀行にいかなくても、いつでも手軽にATMのかわりに使える。
12年12月25日火曜日
![Page 18: 「使ってもらえるアプリの考え方」スマホデザイン会議 2012 忘年会スライド](https://reader038.fdocument.pub/reader038/viewer/2022102901/555cef9ed8b42add648b4a5d/html5/thumbnails/18.jpg)
•既存のATMの機能は?•既存のATMの不便は?•どういうときに使う?
リサーチ
12年12月25日火曜日
![Page 19: 「使ってもらえるアプリの考え方」スマホデザイン会議 2012 忘年会スライド](https://reader038.fdocument.pub/reader038/viewer/2022102901/555cef9ed8b42add648b4a5d/html5/thumbnails/19.jpg)
機能の絞り込み
12年12月25日火曜日
![Page 20: 「使ってもらえるアプリの考え方」スマホデザイン会議 2012 忘年会スライド](https://reader038.fdocument.pub/reader038/viewer/2022102901/555cef9ed8b42add648b4a5d/html5/thumbnails/20.jpg)
•残高確認•引き出し•入金•送金•設定変更•利用案内
既存のATMの機能
12年12月25日火曜日
![Page 21: 「使ってもらえるアプリの考え方」スマホデザイン会議 2012 忘年会スライド](https://reader038.fdocument.pub/reader038/viewer/2022102901/555cef9ed8b42add648b4a5d/html5/thumbnails/21.jpg)
•残高確認•引き出し•入金•送金•設定変更•利用案内
既存のオンラインバンキングの機能
•ニュース•外貨預金•口座開設•ローン•保険•税、各種料金の支払い
12年12月25日火曜日
![Page 22: 「使ってもらえるアプリの考え方」スマホデザイン会議 2012 忘年会スライド](https://reader038.fdocument.pub/reader038/viewer/2022102901/555cef9ed8b42add648b4a5d/html5/thumbnails/22.jpg)
•通販などでの振込•通常の送金•支払い忘れへの緊急対応•残高確認•入金確認
シナリオ
12年12月25日火曜日
![Page 23: 「使ってもらえるアプリの考え方」スマホデザイン会議 2012 忘年会スライド](https://reader038.fdocument.pub/reader038/viewer/2022102901/555cef9ed8b42add648b4a5d/html5/thumbnails/23.jpg)
何を入れて、何を入れないか?
12年12月25日火曜日
![Page 24: 「使ってもらえるアプリの考え方」スマホデザイン会議 2012 忘年会スライド](https://reader038.fdocument.pub/reader038/viewer/2022102901/555cef9ed8b42add648b4a5d/html5/thumbnails/24.jpg)
全ての機能は必要ない複雑なことは銀行かコンビニでやればいい
12年12月25日火曜日
![Page 25: 「使ってもらえるアプリの考え方」スマホデザイン会議 2012 忘年会スライド](https://reader038.fdocument.pub/reader038/viewer/2022102901/555cef9ed8b42add648b4a5d/html5/thumbnails/25.jpg)
90%のユーザーが必要な機能だけを入れる
12年12月25日火曜日
![Page 26: 「使ってもらえるアプリの考え方」スマホデザイン会議 2012 忘年会スライド](https://reader038.fdocument.pub/reader038/viewer/2022102901/555cef9ed8b42add648b4a5d/html5/thumbnails/26.jpg)
•残高確認•引き出し•入金•送金•設定変更•利用案内
機能
•ニュース•外貨預金•口座開設•ローン•保険•税、各種料金の支払い
12年12月25日火曜日
![Page 27: 「使ってもらえるアプリの考え方」スマホデザイン会議 2012 忘年会スライド](https://reader038.fdocument.pub/reader038/viewer/2022102901/555cef9ed8b42add648b4a5d/html5/thumbnails/27.jpg)
•残高確認•引き出し•入金•送金•設定変更•利用案内
機能
•ニュース•外貨預金•口座開設•ローン•保険•税、各種料金の支払い
12年12月25日火曜日
![Page 28: 「使ってもらえるアプリの考え方」スマホデザイン会議 2012 忘年会スライド](https://reader038.fdocument.pub/reader038/viewer/2022102901/555cef9ed8b42add648b4a5d/html5/thumbnails/28.jpg)
•残高確認•引き出し•入金•送金•設定変更•利用案内
機能
•ニュース•外貨預金•口座開設•ローン•保険•税、各種料金の支払い
12年12月25日火曜日
![Page 29: 「使ってもらえるアプリの考え方」スマホデザイン会議 2012 忘年会スライド](https://reader038.fdocument.pub/reader038/viewer/2022102901/555cef9ed8b42add648b4a5d/html5/thumbnails/29.jpg)
•残高確認•引き出し•入金•送金•設定変更•利用案内
機能
•ニュース•外貨預金•口座開設•ローン•保険•税、各種料金の支払い
12年12月25日火曜日
![Page 30: 「使ってもらえるアプリの考え方」スマホデザイン会議 2012 忘年会スライド](https://reader038.fdocument.pub/reader038/viewer/2022102901/555cef9ed8b42add648b4a5d/html5/thumbnails/30.jpg)
•簡単に残高を確認•簡単に送金できる•複雑なことは銀行かコンビニで
コア機能
12年12月25日火曜日
![Page 31: 「使ってもらえるアプリの考え方」スマホデザイン会議 2012 忘年会スライド](https://reader038.fdocument.pub/reader038/viewer/2022102901/555cef9ed8b42add648b4a5d/html5/thumbnails/31.jpg)
プロトタイピング
12年12月25日火曜日
![Page 32: 「使ってもらえるアプリの考え方」スマホデザイン会議 2012 忘年会スライド](https://reader038.fdocument.pub/reader038/viewer/2022102901/555cef9ed8b42add648b4a5d/html5/thumbnails/32.jpg)
4つのタイプのどれを選ぶか?
12年12月25日火曜日
![Page 33: 「使ってもらえるアプリの考え方」スマホデザイン会議 2012 忘年会スライド](https://reader038.fdocument.pub/reader038/viewer/2022102901/555cef9ed8b42add648b4a5d/html5/thumbnails/33.jpg)
ユーティリティ型 ナビゲーション型 タブ型 没入型
12年12月25日火曜日
![Page 34: 「使ってもらえるアプリの考え方」スマホデザイン会議 2012 忘年会スライド](https://reader038.fdocument.pub/reader038/viewer/2022102901/555cef9ed8b42add648b4a5d/html5/thumbnails/34.jpg)
ユーティリティ型
• 天気、時計等• 遷移が少ない• 表に機能、裏に設定• 単機能、単目的
12年12月25日火曜日
![Page 35: 「使ってもらえるアプリの考え方」スマホデザイン会議 2012 忘年会スライド](https://reader038.fdocument.pub/reader038/viewer/2022102901/555cef9ed8b42add648b4a5d/html5/thumbnails/35.jpg)
ナビゲーション型
• メール• 階層がスタックする• 遷移構造がツリー状
12年12月25日火曜日
![Page 36: 「使ってもらえるアプリの考え方」スマホデザイン会議 2012 忘年会スライド](https://reader038.fdocument.pub/reader038/viewer/2022102901/555cef9ed8b42add648b4a5d/html5/thumbnails/36.jpg)
タブ型
• App Store• 主機能が並列する• 複雑なものは、ナビゲーションと併用
• 大規模なアプリ用
12年12月25日火曜日
![Page 37: 「使ってもらえるアプリの考え方」スマホデザイン会議 2012 忘年会スライド](https://reader038.fdocument.pub/reader038/viewer/2022102901/555cef9ed8b42add648b4a5d/html5/thumbnails/37.jpg)
没入型
• ゲーム• オリジナルUI• 表に機能、裏に設定• 体験が重要な場合
12年12月25日火曜日
![Page 38: 「使ってもらえるアプリの考え方」スマホデザイン会議 2012 忘年会スライド](https://reader038.fdocument.pub/reader038/viewer/2022102901/555cef9ed8b42add648b4a5d/html5/thumbnails/38.jpg)
ユーティリティ型の場合
12年12月25日火曜日
![Page 39: 「使ってもらえるアプリの考え方」スマホデザイン会議 2012 忘年会スライド](https://reader038.fdocument.pub/reader038/viewer/2022102901/555cef9ed8b42add648b4a5d/html5/thumbnails/39.jpg)
•最低限の機能のみを実装•残高履歴のみ•送金のみ
ユーティリティ型
12年12月25日火曜日
![Page 40: 「使ってもらえるアプリの考え方」スマホデザイン会議 2012 忘年会スライド](https://reader038.fdocument.pub/reader038/viewer/2022102901/555cef9ed8b42add648b4a5d/html5/thumbnails/40.jpg)
ユーティリティ型
12年12月25日火曜日
![Page 41: 「使ってもらえるアプリの考え方」スマホデザイン会議 2012 忘年会スライド](https://reader038.fdocument.pub/reader038/viewer/2022102901/555cef9ed8b42add648b4a5d/html5/thumbnails/41.jpg)
ナビゲーション型の場合
12年12月25日火曜日
![Page 42: 「使ってもらえるアプリの考え方」スマホデザイン会議 2012 忘年会スライド](https://reader038.fdocument.pub/reader038/viewer/2022102901/555cef9ed8b42add648b4a5d/html5/thumbnails/42.jpg)
• 4つの機能を、それぞれ掘り進んで行く•階層化、拡張しやすい。
ナビゲーション型
12年12月25日火曜日
![Page 43: 「使ってもらえるアプリの考え方」スマホデザイン会議 2012 忘年会スライド](https://reader038.fdocument.pub/reader038/viewer/2022102901/555cef9ed8b42add648b4a5d/html5/thumbnails/43.jpg)
ナビゲーション型
12年12月25日火曜日
![Page 44: 「使ってもらえるアプリの考え方」スマホデザイン会議 2012 忘年会スライド](https://reader038.fdocument.pub/reader038/viewer/2022102901/555cef9ed8b42add648b4a5d/html5/thumbnails/44.jpg)
ナビゲーション型
12年12月25日火曜日
![Page 45: 「使ってもらえるアプリの考え方」スマホデザイン会議 2012 忘年会スライド](https://reader038.fdocument.pub/reader038/viewer/2022102901/555cef9ed8b42add648b4a5d/html5/thumbnails/45.jpg)
タブ型の場合
12年12月25日火曜日
![Page 46: 「使ってもらえるアプリの考え方」スマホデザイン会議 2012 忘年会スライド](https://reader038.fdocument.pub/reader038/viewer/2022102901/555cef9ed8b42add648b4a5d/html5/thumbnails/46.jpg)
•ナビゲーション型の上位拡張•複数の機能を平行に移動できる
タブ型
12年12月25日火曜日
![Page 47: 「使ってもらえるアプリの考え方」スマホデザイン会議 2012 忘年会スライド](https://reader038.fdocument.pub/reader038/viewer/2022102901/555cef9ed8b42add648b4a5d/html5/thumbnails/47.jpg)
タブ型
12年12月25日火曜日
![Page 48: 「使ってもらえるアプリの考え方」スマホデザイン会議 2012 忘年会スライド](https://reader038.fdocument.pub/reader038/viewer/2022102901/555cef9ed8b42add648b4a5d/html5/thumbnails/48.jpg)
没入型の場合
12年12月25日火曜日
![Page 49: 「使ってもらえるアプリの考え方」スマホデザイン会議 2012 忘年会スライド](https://reader038.fdocument.pub/reader038/viewer/2022102901/555cef9ed8b42add648b4a5d/html5/thumbnails/49.jpg)
没入型 ATM メタファー
12年12月25日火曜日
![Page 50: 「使ってもらえるアプリの考え方」スマホデザイン会議 2012 忘年会スライド](https://reader038.fdocument.pub/reader038/viewer/2022102901/555cef9ed8b42add648b4a5d/html5/thumbnails/50.jpg)
没入型 エージェントメタファー
12年12月25日火曜日
![Page 51: 「使ってもらえるアプリの考え方」スマホデザイン会議 2012 忘年会スライド](https://reader038.fdocument.pub/reader038/viewer/2022102901/555cef9ed8b42add648b4a5d/html5/thumbnails/51.jpg)
•現実メタファーが必要な場合に•工数、コストが跳ね上がる
没入型
12年12月25日火曜日
![Page 52: 「使ってもらえるアプリの考え方」スマホデザイン会議 2012 忘年会スライド](https://reader038.fdocument.pub/reader038/viewer/2022102901/555cef9ed8b42add648b4a5d/html5/thumbnails/52.jpg)
ナビゲーション型 or タブ型
12年12月25日火曜日
![Page 53: 「使ってもらえるアプリの考え方」スマホデザイン会議 2012 忘年会スライド](https://reader038.fdocument.pub/reader038/viewer/2022102901/555cef9ed8b42add648b4a5d/html5/thumbnails/53.jpg)
ナビゲーション vs タブ
12年12月25日火曜日
![Page 54: 「使ってもらえるアプリの考え方」スマホデザイン会議 2012 忘年会スライド](https://reader038.fdocument.pub/reader038/viewer/2022102901/555cef9ed8b42add648b4a5d/html5/thumbnails/54.jpg)
ナビゲーション vs タブ
• 拡張しやすい
• 単純
• メニューをまっすぐ掘り進む
• 追加できる項目に限界
• 複雑
• メニュー間を平行移動できる
ナビゲーション タブ
12年12月25日火曜日
![Page 55: 「使ってもらえるアプリの考え方」スマホデザイン会議 2012 忘年会スライド](https://reader038.fdocument.pub/reader038/viewer/2022102901/555cef9ed8b42add648b4a5d/html5/thumbnails/55.jpg)
今回のケースでは、ナビゲーション型だと問題が
12年12月25日火曜日
![Page 56: 「使ってもらえるアプリの考え方」スマホデザイン会議 2012 忘年会スライド](https://reader038.fdocument.pub/reader038/viewer/2022102901/555cef9ed8b42add648b4a5d/html5/thumbnails/56.jpg)
機能を切り替えるときに、階層の深さが問題に!
12年12月25日火曜日
![Page 57: 「使ってもらえるアプリの考え方」スマホデザイン会議 2012 忘年会スライド](https://reader038.fdocument.pub/reader038/viewer/2022102901/555cef9ed8b42add648b4a5d/html5/thumbnails/57.jpg)
検証ケース
12年12月25日火曜日
![Page 58: 「使ってもらえるアプリの考え方」スマホデザイン会議 2012 忘年会スライド](https://reader038.fdocument.pub/reader038/viewer/2022102901/555cef9ed8b42add648b4a5d/html5/thumbnails/58.jpg)
検証ケース
•送金を中止し、残高やニュースを見る場合•ニュースから送金に移動する場合
12年12月25日火曜日
![Page 59: 「使ってもらえるアプリの考え方」スマホデザイン会議 2012 忘年会スライド](https://reader038.fdocument.pub/reader038/viewer/2022102901/555cef9ed8b42add648b4a5d/html5/thumbnails/59.jpg)
階層が深い場合、作業を切り替えるのに何度も階層を戻る必要がある
12年12月25日火曜日
![Page 60: 「使ってもらえるアプリの考え方」スマホデザイン会議 2012 忘年会スライド](https://reader038.fdocument.pub/reader038/viewer/2022102901/555cef9ed8b42add648b4a5d/html5/thumbnails/60.jpg)
今回はタブ型を採用
12年12月25日火曜日
![Page 61: 「使ってもらえるアプリの考え方」スマホデザイン会議 2012 忘年会スライド](https://reader038.fdocument.pub/reader038/viewer/2022102901/555cef9ed8b42add648b4a5d/html5/thumbnails/61.jpg)
フィッシュボーン図特性要因図
12年12月25日火曜日
![Page 62: 「使ってもらえるアプリの考え方」スマホデザイン会議 2012 忘年会スライド](https://reader038.fdocument.pub/reader038/viewer/2022102901/555cef9ed8b42add648b4a5d/html5/thumbnails/62.jpg)
問題と原因を網羅するツール
12年12月25日火曜日
![Page 63: 「使ってもらえるアプリの考え方」スマホデザイン会議 2012 忘年会スライド](https://reader038.fdocument.pub/reader038/viewer/2022102901/555cef9ed8b42add648b4a5d/html5/thumbnails/63.jpg)
使いにくい
機能が多すぎる
フィッシュボーン図
画面が多すぎる
説明がない視認性が悪い
チュートリアル
メタファー
機能を減らす
低頻度の機能を隠蔽
Tabの導入
機能を減らす
工数が足りない
デザイナ追加
顧客要件が多すぎる
説得プレゼン
グルーピング
ルールがない
カラールールを決める
フォントを統一
階層が深い
12年12月25日火曜日
![Page 64: 「使ってもらえるアプリの考え方」スマホデザイン会議 2012 忘年会スライド](https://reader038.fdocument.pub/reader038/viewer/2022102901/555cef9ed8b42add648b4a5d/html5/thumbnails/64.jpg)
ミスタップが多い
問題を書く
12年12月25日火曜日
![Page 65: 「使ってもらえるアプリの考え方」スマホデザイン会議 2012 忘年会スライド](https://reader038.fdocument.pub/reader038/viewer/2022102901/555cef9ed8b42add648b4a5d/html5/thumbnails/65.jpg)
ミスタップが多い
問題を書く
12年12月25日火曜日
![Page 66: 「使ってもらえるアプリの考え方」スマホデザイン会議 2012 忘年会スライド](https://reader038.fdocument.pub/reader038/viewer/2022102901/555cef9ed8b42add648b4a5d/html5/thumbnails/66.jpg)
ミスタップが多い
小原因の対策を列挙
隣りのボタンを押すボタンに見えない
機能がわからない押したかわからない
12年12月25日火曜日
![Page 67: 「使ってもらえるアプリの考え方」スマホデザイン会議 2012 忘年会スライド](https://reader038.fdocument.pub/reader038/viewer/2022102901/555cef9ed8b42add648b4a5d/html5/thumbnails/67.jpg)
ミスタップが多い
小原因の対策を列挙
隣りのボタンを押すボタンに見えない
機能がわからない押したかわからない
色が地味
フラットだから
距離が近い
ボタンが小さすぎる
反映に時間がかかる
Noフィードバック
文字のないボタン
アイコンが普遍的でない
12年12月25日火曜日
![Page 68: 「使ってもらえるアプリの考え方」スマホデザイン会議 2012 忘年会スライド](https://reader038.fdocument.pub/reader038/viewer/2022102901/555cef9ed8b42add648b4a5d/html5/thumbnails/68.jpg)
ミスタップが多い
小原因の対策を列挙
隣りのボタンを押すボタンに見えない
機能がわからない押したかわからない
色が地味
フラットだから
距離が近い
ボタンが小さすぎる
反映に時間がかかる
Noフィードバック
文字のないボタン
アイコンが普遍的でない
ボタンを44px以上に
ボタンの数を減らす
間隔を広げる
レイアウトを再考コントラストをあげる
ボタン専用色を作る
立体にする
物理メタファー
アニメーションで誤摩化す
レスポンスだけ先に返す
押せないボタンをグレーアウト
押した画像を作る
iOSの標準アイコンを使う
自作せずに購入する
ラベルをつける
ボタンの数を減らす
12年12月25日火曜日
![Page 69: 「使ってもらえるアプリの考え方」スマホデザイン会議 2012 忘年会スライド](https://reader038.fdocument.pub/reader038/viewer/2022102901/555cef9ed8b42add648b4a5d/html5/thumbnails/69.jpg)
フィッシュボーンの利点
あいまいな問題
問題問題
問題 問題
漠然とした問題を、複数の具体的な問題と対策に分割
12年12月25日火曜日
![Page 70: 「使ってもらえるアプリの考え方」スマホデザイン会議 2012 忘年会スライド](https://reader038.fdocument.pub/reader038/viewer/2022102901/555cef9ed8b42add648b4a5d/html5/thumbnails/70.jpg)
プロトタイピング
12年12月25日火曜日
![Page 71: 「使ってもらえるアプリの考え方」スマホデザイン会議 2012 忘年会スライド](https://reader038.fdocument.pub/reader038/viewer/2022102901/555cef9ed8b42add648b4a5d/html5/thumbnails/71.jpg)
メニューの優先順位を定める
12年12月25日火曜日
![Page 72: 「使ってもらえるアプリの考え方」スマホデザイン会議 2012 忘年会スライド](https://reader038.fdocument.pub/reader038/viewer/2022102901/555cef9ed8b42add648b4a5d/html5/thumbnails/72.jpg)
重要なもの、よく使うもの等から左から右に配置する
12年12月25日火曜日
![Page 73: 「使ってもらえるアプリの考え方」スマホデザイン会議 2012 忘年会スライド](https://reader038.fdocument.pub/reader038/viewer/2022102901/555cef9ed8b42add648b4a5d/html5/thumbnails/73.jpg)
•ニュース•残高/履歴•送金•設定
メニュー順の候補
•送金•残高/履歴•ニュース•設定
•残高/履歴•送金•ニュース•設定
12年12月25日火曜日
![Page 74: 「使ってもらえるアプリの考え方」スマホデザイン会議 2012 忘年会スライド](https://reader038.fdocument.pub/reader038/viewer/2022102901/555cef9ed8b42add648b4a5d/html5/thumbnails/74.jpg)
可能であれば、調査に従って定める
12年12月25日火曜日
![Page 75: 「使ってもらえるアプリの考え方」スマホデザイン会議 2012 忘年会スライド](https://reader038.fdocument.pub/reader038/viewer/2022102901/555cef9ed8b42add648b4a5d/html5/thumbnails/75.jpg)
•ニュース•残高/履歴•送金•設定
メニュー順の候補
12年12月25日火曜日
![Page 76: 「使ってもらえるアプリの考え方」スマホデザイン会議 2012 忘年会スライド](https://reader038.fdocument.pub/reader038/viewer/2022102901/555cef9ed8b42add648b4a5d/html5/thumbnails/76.jpg)
一番使わないものを右に置き、残りは行動の流れを考えて配置。
12年12月25日火曜日
![Page 77: 「使ってもらえるアプリの考え方」スマホデザイン会議 2012 忘年会スライド](https://reader038.fdocument.pub/reader038/viewer/2022102901/555cef9ed8b42add648b4a5d/html5/thumbnails/77.jpg)
残高
12年12月25日火曜日
![Page 78: 「使ってもらえるアプリの考え方」スマホデザイン会議 2012 忘年会スライド](https://reader038.fdocument.pub/reader038/viewer/2022102901/555cef9ed8b42add648b4a5d/html5/thumbnails/78.jpg)
残高表示
12年12月25日火曜日
![Page 79: 「使ってもらえるアプリの考え方」スマホデザイン会議 2012 忘年会スライド](https://reader038.fdocument.pub/reader038/viewer/2022102901/555cef9ed8b42add648b4a5d/html5/thumbnails/79.jpg)
通帳ほど横にスペースがない
12年12月25日火曜日
![Page 80: 「使ってもらえるアプリの考え方」スマホデザイン会議 2012 忘年会スライド](https://reader038.fdocument.pub/reader038/viewer/2022102901/555cef9ed8b42add648b4a5d/html5/thumbnails/80.jpg)
入金と出金はあわせていいのか?
12年12月25日火曜日
![Page 81: 「使ってもらえるアプリの考え方」スマホデザイン会議 2012 忘年会スライド](https://reader038.fdocument.pub/reader038/viewer/2022102901/555cef9ed8b42add648b4a5d/html5/thumbnails/81.jpg)
通帳と完全に同じUIにする必要はない
12年12月25日火曜日
![Page 82: 「使ってもらえるアプリの考え方」スマホデザイン会議 2012 忘年会スライド](https://reader038.fdocument.pub/reader038/viewer/2022102901/555cef9ed8b42add648b4a5d/html5/thumbnails/82.jpg)
入金と出金を色分け
12年12月25日火曜日
![Page 83: 「使ってもらえるアプリの考え方」スマホデザイン会議 2012 忘年会スライド](https://reader038.fdocument.pub/reader038/viewer/2022102901/555cef9ed8b42add648b4a5d/html5/thumbnails/83.jpg)
日付ごとにサブヘッダを入れる
12年12月25日火曜日
![Page 84: 「使ってもらえるアプリの考え方」スマホデザイン会議 2012 忘年会スライド](https://reader038.fdocument.pub/reader038/viewer/2022102901/555cef9ed8b42add648b4a5d/html5/thumbnails/84.jpg)
スペースが足りない
デバイスの限界
スペース不足へのフィッシュボーン図
通帳ににせすぎ
要素が多すぎる
横モードを採用する
アイコンや色を導入
セグメンテッドを導入
サブ階層を導入
通帳メタファーをやめる内容を削る
日付をテーブルヘッダーに
クライアントを説得
残高を隠す
文字を小さく
12年12月25日火曜日
![Page 85: 「使ってもらえるアプリの考え方」スマホデザイン会議 2012 忘年会スライド](https://reader038.fdocument.pub/reader038/viewer/2022102901/555cef9ed8b42add648b4a5d/html5/thumbnails/85.jpg)
残高表示
12年12月25日火曜日
![Page 86: 「使ってもらえるアプリの考え方」スマホデザイン会議 2012 忘年会スライド](https://reader038.fdocument.pub/reader038/viewer/2022102901/555cef9ed8b42add648b4a5d/html5/thumbnails/86.jpg)
残高表示
12年12月25日火曜日
![Page 87: 「使ってもらえるアプリの考え方」スマホデザイン会議 2012 忘年会スライド](https://reader038.fdocument.pub/reader038/viewer/2022102901/555cef9ed8b42add648b4a5d/html5/thumbnails/87.jpg)
残高表示
12年12月25日火曜日
![Page 88: 「使ってもらえるアプリの考え方」スマホデザイン会議 2012 忘年会スライド](https://reader038.fdocument.pub/reader038/viewer/2022102901/555cef9ed8b42add648b4a5d/html5/thumbnails/88.jpg)
残高表示
12年12月25日火曜日
![Page 89: 「使ってもらえるアプリの考え方」スマホデザイン会議 2012 忘年会スライド](https://reader038.fdocument.pub/reader038/viewer/2022102901/555cef9ed8b42add648b4a5d/html5/thumbnails/89.jpg)
送金
12年12月25日火曜日
![Page 90: 「使ってもらえるアプリの考え方」スマホデザイン会議 2012 忘年会スライド](https://reader038.fdocument.pub/reader038/viewer/2022102901/555cef9ed8b42add648b4a5d/html5/thumbnails/90.jpg)
送金
12年12月25日火曜日
![Page 91: 「使ってもらえるアプリの考え方」スマホデザイン会議 2012 忘年会スライド](https://reader038.fdocument.pub/reader038/viewer/2022102901/555cef9ed8b42add648b4a5d/html5/thumbnails/91.jpg)
金額入力のミスをなくす
12年12月25日火曜日
![Page 92: 「使ってもらえるアプリの考え方」スマホデザイン会議 2012 忘年会スライド](https://reader038.fdocument.pub/reader038/viewer/2022102901/555cef9ed8b42add648b4a5d/html5/thumbnails/92.jpg)
入力ミスが起こる
桁がわかりずらい
入力ミスのフィッシュボーン分析
確認がない
ミスタッチ
ボタンを大きく
ピッカーを採用
桁を色分け
「万」や「千」という時を出す。
1タップ毎に音をいれる
0.05秒ほどタッチ無効時間をいれる
確認画面
音声よみあげ?
50万以上の場合警告
12年12月25日火曜日
![Page 93: 「使ってもらえるアプリの考え方」スマホデザイン会議 2012 忘年会スライド](https://reader038.fdocument.pub/reader038/viewer/2022102901/555cef9ed8b42add648b4a5d/html5/thumbnails/93.jpg)
金額入力のミスをなくす
12年12月25日火曜日
![Page 94: 「使ってもらえるアプリの考え方」スマホデザイン会議 2012 忘年会スライド](https://reader038.fdocument.pub/reader038/viewer/2022102901/555cef9ed8b42add648b4a5d/html5/thumbnails/94.jpg)
計算機方式だと、桁のミスが発生する
12年12月25日火曜日
![Page 95: 「使ってもらえるアプリの考え方」スマホデザイン会議 2012 忘年会スライド](https://reader038.fdocument.pub/reader038/viewer/2022102901/555cef9ed8b42add648b4a5d/html5/thumbnails/95.jpg)
送金
12年12月25日火曜日
![Page 96: 「使ってもらえるアプリの考え方」スマホデザイン会議 2012 忘年会スライド](https://reader038.fdocument.pub/reader038/viewer/2022102901/555cef9ed8b42add648b4a5d/html5/thumbnails/96.jpg)
「送金」ボタンのミスタッチを無くす
12年12月25日火曜日
![Page 97: 「使ってもらえるアプリの考え方」スマホデザイン会議 2012 忘年会スライド](https://reader038.fdocument.pub/reader038/viewer/2022102901/555cef9ed8b42add648b4a5d/html5/thumbnails/97.jpg)
送金
送金ボタンがOKボタンに変化 スライドアラート
12年12月25日火曜日
![Page 98: 「使ってもらえるアプリの考え方」スマホデザイン会議 2012 忘年会スライド](https://reader038.fdocument.pub/reader038/viewer/2022102901/555cef9ed8b42add648b4a5d/html5/thumbnails/98.jpg)
誤送金
確認ミス
誤送金のフィッシュボーン図
確認を連打
ミスタッチわかりずらい
確認画面を挟む
ボタンを2回タップさせる
背景色などを大きく変える
重要でないものを目立たなく
ボタンや遷移にタップ無効時間を設ける
ガイドヘルプを入れる
不要な要素を減らす
要素を大きく アラートを出す
確認機能をシンプルに
音をいれる
スライド式?
チェックリスト式
12年12月25日火曜日
![Page 99: 「使ってもらえるアプリの考え方」スマホデザイン会議 2012 忘年会スライド](https://reader038.fdocument.pub/reader038/viewer/2022102901/555cef9ed8b42add648b4a5d/html5/thumbnails/99.jpg)
パスロックを入れる
12年12月25日火曜日
![Page 100: 「使ってもらえるアプリの考え方」スマホデザイン会議 2012 忘年会スライド](https://reader038.fdocument.pub/reader038/viewer/2022102901/555cef9ed8b42add648b4a5d/html5/thumbnails/100.jpg)
パスロック
12年12月25日火曜日
![Page 101: 「使ってもらえるアプリの考え方」スマホデザイン会議 2012 忘年会スライド](https://reader038.fdocument.pub/reader038/viewer/2022102901/555cef9ed8b42add648b4a5d/html5/thumbnails/101.jpg)
12年12月25日火曜日
![Page 102: 「使ってもらえるアプリの考え方」スマホデザイン会議 2012 忘年会スライド](https://reader038.fdocument.pub/reader038/viewer/2022102901/555cef9ed8b42add648b4a5d/html5/thumbnails/102.jpg)
拡張性
12年12月25日火曜日
![Page 103: 「使ってもらえるアプリの考え方」スマホデザイン会議 2012 忘年会スライド](https://reader038.fdocument.pub/reader038/viewer/2022102901/555cef9ed8b42add648b4a5d/html5/thumbnails/103.jpg)
•初期バージョンで、ボタンを詰め込みすぎない•将来、機能がいくつか追加されることを前提に•機能を増やして、使いにくくなったら意味が無い
拡張性
12年12月25日火曜日
![Page 104: 「使ってもらえるアプリの考え方」スマホデザイン会議 2012 忘年会スライド](https://reader038.fdocument.pub/reader038/viewer/2022102901/555cef9ed8b42add648b4a5d/html5/thumbnails/104.jpg)
•銀行に電話できるようにする•マルチアカウント•タブに「税、公共料金」を追加•振込先の登録、ブックマーク機能•振込元の検索、情報入力
アイデア候補
12年12月25日火曜日
![Page 105: 「使ってもらえるアプリの考え方」スマホデザイン会議 2012 忘年会スライド](https://reader038.fdocument.pub/reader038/viewer/2022102901/555cef9ed8b42add648b4a5d/html5/thumbnails/105.jpg)
PDCAサイクル
12年12月25日火曜日
![Page 106: 「使ってもらえるアプリの考え方」スマホデザイン会議 2012 忘年会スライド](https://reader038.fdocument.pub/reader038/viewer/2022102901/555cef9ed8b42add648b4a5d/html5/thumbnails/106.jpg)
PDCAサイクルPlan (計画)
Do (実行)
Check (評価)
Action (改善)
12年12月25日火曜日
![Page 107: 「使ってもらえるアプリの考え方」スマホデザイン会議 2012 忘年会スライド](https://reader038.fdocument.pub/reader038/viewer/2022102901/555cef9ed8b42add648b4a5d/html5/thumbnails/107.jpg)
まとめ
12年12月25日火曜日
![Page 108: 「使ってもらえるアプリの考え方」スマホデザイン会議 2012 忘年会スライド](https://reader038.fdocument.pub/reader038/viewer/2022102901/555cef9ed8b42add648b4a5d/html5/thumbnails/108.jpg)
コアコンセプトを決める
12年12月25日火曜日
![Page 109: 「使ってもらえるアプリの考え方」スマホデザイン会議 2012 忘年会スライド](https://reader038.fdocument.pub/reader038/viewer/2022102901/555cef9ed8b42add648b4a5d/html5/thumbnails/109.jpg)
初期に可能性をしらみつぶす
12年12月25日火曜日
![Page 110: 「使ってもらえるアプリの考え方」スマホデザイン会議 2012 忘年会スライド](https://reader038.fdocument.pub/reader038/viewer/2022102901/555cef9ed8b42add648b4a5d/html5/thumbnails/110.jpg)
プロトタイピングを何度も繰り返す
12年12月25日火曜日
![Page 111: 「使ってもらえるアプリの考え方」スマホデザイン会議 2012 忘年会スライド](https://reader038.fdocument.pub/reader038/viewer/2022102901/555cef9ed8b42add648b4a5d/html5/thumbnails/111.jpg)
実装は機械作業
12年12月25日火曜日
![Page 112: 「使ってもらえるアプリの考え方」スマホデザイン会議 2012 忘年会スライド](https://reader038.fdocument.pub/reader038/viewer/2022102901/555cef9ed8b42add648b4a5d/html5/thumbnails/112.jpg)
質問
12年12月25日火曜日
![Page 113: 「使ってもらえるアプリの考え方」スマホデザイン会議 2012 忘年会スライド](https://reader038.fdocument.pub/reader038/viewer/2022102901/555cef9ed8b42add648b4a5d/html5/thumbnails/113.jpg)
twitter.com/fladdict
質問、お仕事のご相談などはお気軽に
12年12月25日火曜日