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

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

D74c0fe6eeadb2a8d6e53c988f772563?s=47 kitte
February 08, 2019

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

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

D74c0fe6eeadb2a8d6e53c988f772563?s=128

kitte

February 08, 2019
Tweet

Transcript

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

    UX」LT
  2. 自己紹介 • 岸野哲朗 • GMOペパボ株式会社 • カラーミーリピート • デザイナー •

    https://tech.pepabo.com/2018/07/04/des igner-and-ap-exam/ 2
  3. まずはとにかくリピートの画面を ご確認ください! 3

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

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

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

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

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

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

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

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

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

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

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

  15. 15

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

  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/