Upgrade to Pro — share decks privately, control downloads, hide ads and more …

管理画面の画面設計方法について

kitte
February 08, 2019

 管理画面の画面設計方法について

管理画面はどうあるべきという自身の考え方や、実際使用したことのある手法(UI flows)の紹介などを行います。

kitte

February 08, 2019
Tweet

Transcript

  1. 管理画面の
    画面設計方法について
    1
    岸野 哲朗 / @outskirtsHinode
    2019/02/08 DIST.25 「管理画面から考える UX」LT

    View Slide

  2. 自己紹介
    ● 岸野哲朗
    ● GMOペパボ株式会社
    ● カラーミーリピート
    ● デザイナー
    ● https://tech.pepabo.com/2018/07/04/des
    igner-and-ap-exam/
    2

    View Slide

  3. まずはとにかくリピートの画面を
    ご確認ください!
    3

    View Slide

  4. 4
    サービストップ画面
    管理画面 購入者側の管理画面 定期購入画面

    View Slide

  5. 5
    サービストップ画面
    管理画面 購入者側の管理画面 定期購入画面
    「いっぱい来る方が理想的」
    「いっぱい来ない方が理想的」

    View Slide

  6. 管理画面は「煩わしさ」を
    無くすことに重きをおくと良さそう!
    6

    View Slide

  7. 「煩わしさ」を無くすこと
    ● わかりやすさ
    ○ 画面設計
    ● 効率性
    7

    View Slide

  8. 自分が行った画面設計
    8

    View Slide

  9. 作業フロー
    1. 競合調査
    2. UI Flowsの作成
    3. 画面デザイン
    9

    View Slide

  10. 1. 競合調査
    2. UI Flowsの作成
    3. 画面デザイン
    作業フロー
    10

    View Slide

  11. UI Flowsの作成
    ● 「ユーザーの見るもの」「ユーザーがすること」に焦点をおいた遷移図法
    11
    ユーザーが見るもの
    ユーザーがすること
    ユーザーが見るもの
    ユーザーがすること
    ユーザーが見るもの
    ユーザーがすること

    View Slide

  12. 12
    ● 「ユーザーのみるもの」
    ○ 競合調査で見えてきた使わ
    れている要素
    ● 「ユーザーのすること」
    ○ ストーリーマッピングで出て
    きたユーザーの行動

    View Slide

  13. UI Flowsのメリット
    ● ユーザーの行動に基づいた遷移を考えることになる
    ● 画面遷移図よりも手軽に使用することができる
    13

    View Slide

  14. UI Flowsのデメリット
    ● 粒度の設定が難しい
    ● 画面レイアウトは別途考える必要がある
    ○ 最近クラス図の相互関係からみるマークアップ・レイアウトを研究中
    14

    View Slide

  15. 15

    View Slide

  16. 16
    詳しくはお話しましょう!!

    View Slide

  17. 17
    参考
    ● https://signalvnoise.com/posts/1926-a-shorthand-for-designing-ui-flows
    ● http://www.standardinc.jp/reflection/article/ui-flows/
    ● https://tech.pepabo.com/2018/09/04/designers-interview-tecchan/

    View Slide