Your SlideShare is downloading. ×
「使ってもらえるアプリの考え方」スマホデザイン会議 2012 忘年会スライド
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

「使ってもらえるアプリの考え方」スマホデザイン会議 2012 忘年会スライド

126,724
views

Published on

アプリ製作はフルセットから、コンサル、すでに作ってしまったUIのレビューまで、お気軽に fukatsu@gmail.com まで。

アプリ製作はフルセットから、コンサル、すでに作ってしまったUIのレビューまで、お気軽に fukatsu@gmail.com まで。

Published in: Design

5 Comments
606 Likes
Statistics
Notes
No Downloads
Views
Total Views
126,724
On Slideshare
0
From Embeds
0
Number of Embeds
41
Actions
Shares
0
Downloads
1,553
Comments
5
Likes
606
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

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