狠狠撸

狠狠撸Share a Scribd company logo
使ってもらえるアプリの考え方
                    深津貴之




12年12月25日火曜日
自己紹介




12年12月25日火曜日
? 深津貴之
               ? Art & Mobile
               ? Flash / iPhone


12年12月25日火曜日
ToyCamera   QuadCamera   TiltShi?Gen




12年12月25日火曜日
12年12月25日火曜日
颈笔丑辞苍别アプリ设计の极意
                思わずタップしたくなるアプリのデザイン


                        監訳




12年12月25日火曜日
モバイルデザインパターン
               ユーザーインターフェースのためのパターン集


                        監訳




12年12月25日火曜日
artandmobile.com

               twitter.com/fladdict




12年12月25日火曜日
ATMアプリを考えてみる




12年12月25日火曜日
いままでのまとめとして、
               ATMアプリを作るとすればどうするか?




12年12月25日火曜日
簡単な架空事例を考えてみる




12年12月25日火曜日
课题



               iPhoneに最適化されたATMアプリを提案する




12年12月25日火曜日
全体の流れ
                コアコンセプト




                机能の絞り込み




                バリエーション列挙




                プロトタイピング




12年12月25日火曜日
コアコンセプト



12年12月25日火曜日
コアコンセプト



               誰が?    何を   いつ   どう




12年12月25日火曜日
コアコンセプト
               誰が?   フリーランス、個人事業主、主婦


               何を      銀行での支払い振込を


               いつ        空いた時間に


               どう     わざわざ外出せずにできる

12年12月25日火曜日
コアコンセプト


               フリーランスや主婦が、わざわざ銀行にいかなくても、
                  いつでも手軽にATMのかわりに使える。




                     1行で説明できる、ステートメントを作る



12年12月25日火曜日
リサーチ


               ? 既存の础罢惭の机能は?
               ? 既存のATMの不便は?
               ? どういうときに使う?


12年12月25日火曜日
机能の絞り込み



12年12月25日火曜日
既存の础罢惭の机能

               ? 残高確認
               ? 引き出し
               ? 入金
               ? 送金
               ? 設定変更
               ? 利用案内

12年12月25日火曜日
既存のオンラインバンキングの机能

               ? 残高確認   ? ニュース
               ? 引き出し   ? 外貨預金
               ? 入金     ? 口座開設
               ? 送金     ? ローン
               ? 設定変更   ? 保険
               ? 利用案内   ? 税、各種料金の支払い

12年12月25日火曜日
シナリオ


               ? 通販などでの振込
               ? 通常の送金
               ? 支払い忘れへの緊急対応
               ? 残高確認
               ? 入金確認

12年12月25日火曜日
何を入れて、何を入れないか?




12年12月25日火曜日
全ての机能は必要ない
               複雑なことは銀行かコンビニでやればいい




12年12月25日火曜日
90%のユーザーが必要な机能だけを入れる




12年12月25日火曜日
机能

               ? 残高確認    ? ニュース
               ? 引き出し    ? 外貨預金
               ? 入金      ? 口座開設
               ? 送金      ? ローン
               ? 設定変更    ? 保険
               ? 利用案内    ? 税、各種料金の支払い

12年12月25日火曜日
机能

               ? 残高確認    ? ニュース
               ? 引き出し    ? 外貨預金
               ? 入金      ? 口座開設
               ? 送金      ? ローン
               ? 設定変更    ? 保険
               ? 利用案内    ? 税、各種料金の支払い

12年12月25日火曜日
机能

               ? 残高確認    ? ニュース
               ? 引き出し    ? 外貨預金
               ? 入金      ? 口座開設
               ? 送金      ? ローン
               ? 設定変更    ? 保険
               ? 利用案内    ? 税、各種料金の支払い

12年12月25日火曜日
机能

               ? 残高確認    ? ニュース
               ? 引き出し    ? 外貨預金
               ? 入金      ? 口座開設
               ? 送金      ? ローン
               ? 設定変更    ? 保険
               ? 利用案内    ? 税、各種料金の支払い

12年12月25日火曜日
コア机能



               ? 簡単に残高を確認
               ? 簡単に送金できる
               ? 複雑なことは銀行かコンビニで


12年12月25日火曜日
プロトタイピング



12年12月25日火曜日
4つのタイプのどれを選ぶか?




12年12月25日火曜日
ユーティリティ型   ナビゲーション型   タブ型   没入型



12年12月25日火曜日
ユーティリティ型

               ? 天気、時計等
               ? 遷移が少ない
               ? 表に机能、裏に設定
               ? 単机能、単目的


12年12月25日火曜日
ナビゲーション型


               ? メール
               ? 階層がスタックする
               ? 遷移構造がツリー状



12年12月25日火曜日
タブ型

               ? App Store
               ? 主机能が並列する
               ? 複雑なものは、ナビゲーション
                 と併用

               ? 大規模なアプリ用


12年12月25日火曜日
没入型

               ? ゲーム
               ? オリジナルUI
               ? 表に机能、裏に設定
               ? 体験が重要な場合


12年12月25日火曜日
ユーティリティ型の場合




12年12月25日火曜日
ユーティリティ型



               ? 最低限の机能のみを実装
               ? 残高履歴のみ
               ? 送金のみ


12年12月25日火曜日
ユーティリティ型




12年12月25日火曜日
ナビゲーション型の場合




12年12月25日火曜日
ナビゲーション型



               ? 4つの机能を、それぞれ掘り進んで行く
               ? 階層化、拡張しやすい。



12年12月25日火曜日
ナビゲーション型




12年12月25日火曜日
ナビゲーション型




12年12月25日火曜日
タブ型の場合




12年12月25日火曜日
タブ型



               ? ナビゲーション型の上位拡張
               ? 複数の机能を平行に移動できる



12年12月25日火曜日
タブ型




12年12月25日火曜日
没入型の場合




12年12月25日火曜日
没入型 ATM メタファー




12年12月25日火曜日
没入型 エージェントメタファー




12年12月25日火曜日
没入型



               ? 現実メタファーが必要な場合に
               ? 工数、コストが跳ね上がる



12年12月25日火曜日
ナビゲーション型 or タブ型




12年12月25日火曜日
ナビゲーション vs タブ




12年12月25日火曜日
ナビゲーション vs タブ


               ナビゲーション                      タブ

               ?   拡張しやすい          ?   追加できる項目に限界

               ?   単純              ?   複雑

               ?   メニューをまっすぐ掘り進む   ?   メニュー間を平行移動できる




12年12月25日火曜日
今回のケースでは、
               ナビゲーション型だと問題が




12年12月25日火曜日
机能を切り替えるときに、
               階層の深さが問題に!




12年12月25日火曜日
検証ケース




12年12月25日火曜日
検証ケース



               ? 送金を中止し、残高やニュースを見る場合
               ? ニュースから送金に移動する場合



12年12月25日火曜日
阶层が深い场合、
               作業を切り替えるのに何度も
                階層を戻る必要がある




12年12月25日火曜日
今回はタブ型を採用




12年12月25日火曜日
フィッシュボーン図
                  特性要因図




12年12月25日火曜日
問題と原因を網羅するツール




12年12月25日火曜日
フィッシュボーン図


                             視認性が悪い                           説明がない
                                        デザイナ追加


       フォントを統一
                                       工数が足りない
    カラールールを決める
                                           チュートリアル
               ルールがない                            メタファー

                       グルーピング

                                                                      使いにくい

                                                     机能を減らす
                    机能を減らす
                                           低頻度の机能を隠
               階層が深い
                                       顧客要件が多すぎる

                Tabの導入

                                       説得プレゼン

                           画面が多すぎる                        机能が多すぎる




12年12月25日火曜日
问题を书く




               ミスタップが多い




12年12月25日火曜日
问题を书く




                       ミスタップが多い




12年12月25日火曜日
小原因の対策を列挙

               ボタンに見えない      隣りのボタンを押す




                                         ミスタップが多い




               押したかわからない      机能がわからない



12年12月25日火曜日
小原因の対策を列挙

                 ボタンに見えない             隣りのボタンを押す




       色が地味                  距離が近い




               フラットだから               ボタンが小さすぎる




                                                     ミスタップが多い



               反映に時間がかかる           文字のないボタン




   Noフィードバック                アイコンが普遍的でない




                押したかわからない                 机能がわからない



12年12月25日火曜日
小原因の対策を列挙

                   ボタンに見えない                  隣りのボタンを押す



     コントラストをあげる                   レイアウトを再考

       色が地味                      距離が近い

       ボタン専用色を作る                         間隔を広げる
                    立体にする                     ボタンを44px以上に

                 フラットだから                  ボタンが小さすぎる

                     物理メタファー                       ボタンの数を減らす



                                                               ミスタップが多い


                 アニメーションで誤摩化す                      ラベルをつける

               反映に時間がかかる               文字のないボタン

               レスポンスだけ先に返す                 ボタンの数を減らす


   押せないボタンをグレーアウト                  iOSの標準アイコンを使う

   Noフィードバック                    アイコンが普遍的でない

      押した画像を作る                      自作せずに購入する




                  押したかわからない                     机能がわからない



12年12月25日火曜日
フィッシュボーンの利点

                            問題   問題


               あいまいな問題


                            問題   問題



                     漠然とした問題を、
                  複数の具体的な問題と対策に分割
12年12月25日火曜日
プロトタイピング



12年12月25日火曜日
メニューの優先順位を定める




12年12月25日火曜日
重要なもの、よく使うもの等から
                  左から右に配置する




12年12月25日火曜日
メニュー顺の候补


               ? ニュース    ? 送金      ? 残高/履歴
               ? 残高/履歴   ? 残高/履歴   ? 送金
               ? 送金      ? ニュース    ? ニュース
               ? 設定      ? 設定      ? 設定


12年12月25日火曜日
可能であれば、調査に従って定める




12年12月25日火曜日
メニュー顺の候补


               ? ニュース
               ? 残高/履歴
               ? 送金
               ? 設定


12年12月25日火曜日
一番使わないものを右に置き、
               残りは行動の流れを考えて配置。




12年12月25日火曜日
残高




12年12月25日火曜日
残高表示




12年12月25日火曜日
通帳ほど横にスペースがない




12年12月25日火曜日
入金と出金はあわせていいのか?




12年12月25日火曜日
通帳と完全に同じUIにする必要はない




12年12月25日火曜日
入金と出金を色分け




12年12月25日火曜日
日付ごとにサブヘッダを入れる




12年12月25日火曜日
スペース不足へのフィッシュボーン図


                                                     要素が多すぎる


                                     サブ階層を導入
                   残高を隠す
                                      アイコンや色を導入
                     文字を小さく

                                      日付をテーブルヘッダーに



                                                                     スペースが足りない


               クライアントを説得
                                               横モードを採用する
        通帳メタファーをやめる
                                                  内容を削る
     セグメンテッドを導入




                           通帳ににせすぎ                         デバイスの限界




12年12月25日火曜日
残高表示




12年12月25日火曜日
残高表示




12年12月25日火曜日
残高表示




12年12月25日火曜日
残高表示




12年12月25日火曜日
送金



12年12月25日火曜日
送金




12年12月25日火曜日
金額入力のミスをなくす




12年12月25日火曜日
入力ミスのフィッシュボーン分析


                                  ミスタッチ


                                                 ボタンを大きく

               1タップ毎に音をいれる
                                                    ピッカーを採用

           0.05秒ほどタッチ無効時間をいれる




                                                                       入力ミスが起こる

                                                      桁を色分け
                音声よみあげ?


                確認画面
                                          「万」や「千」という時を出す。

     50万以上の場合警告




                          確認がない                             桁がわかりずらい




12年12月25日火曜日
金額入力のミスをなくす




12年12月25日火曜日
計算機方式だと、桁のミスが発生する




12年12月25日火曜日
送金




12年12月25日火曜日
「送金」ボタンのミスタッチを無くす




12年12月25日火曜日
送金




               アラート   送金ボタンがOKボタンに変化   スライド




12年12月25日火曜日
误送金のフィッシュボーン図


                            わかりずらい                            ミスタッチ


                                          アラートを出す
         要素を大きく
                                           確認画面を挟む
        不要な要素を減らす
                                            ボタンを2回タップさせる
               ガイドヘルプを入れる
                                                     スライド式?


                                                                      誤送金

                                            背景色などを大きく変える
   ボタンや遷移にタップ無効時間を設ける


       確認机能をシンプルに                       重要でないものを目立たなく


    チェックリスト式                                 音をいれる




                            確認を連打                             確認ミス




12年12月25日火曜日
パスロックを入れる




12年12月25日火曜日
パスロック




12年12月25日火曜日
12年12月25日火曜日
拡张性



12年12月25日火曜日
拡张性



               ? 初期バージョンで、ボタンを詰め込みすぎない
               ? 将来、机能がいくつか追加されることを前提に
               ? 机能を増やして、使いにくくなったら意味が無い


12年12月25日火曜日
アイデア候补


               ? 銀行に電話できるようにする
               ? マルチアカウント
               ? タブに「税、公共料金」を追加
               ? 振込先の登録、ブックマーク机能
               ? 振込元の検索、情報入力

12年12月25日火曜日
笔顿颁础サイクル



12年12月25日火曜日
笔顿颁础サイクル
                  Plan (計画)

                  Do (実行)

                 Check (評価)

                 Action (改善)



12年12月25日火曜日
まとめ



12年12月25日火曜日
コアコンセプトを決める



12年12月25日火曜日
初期に可能性をしらみつぶす



12年12月25日火曜日
プロトタイピングを
                何度も繰り返す


12年12月25日火曜日
実装は機械作業



12年12月25日火曜日
質問



12年12月25日火曜日
质问、お仕事のご相谈などはお気軽に


                 fukatsu@gmail.com

                 twitter.com/fladdict


12年12月25日火曜日

More Related Content

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