bz0のにっき

quick and dirty prototype

UI設計をするときにやること

自分のメモなので偏りあるし、抜け漏れも多そう。やっていく中で継ぎ足していきたい。

目的とゴールの明確化を行う

  • そのサービスを作ることでどんな問題が解決できるのか?
  • そのサービスを作る前と後でどう変わるか?(Before / After)
  • ゴールはどこか?
  • サービスがユーザに貢献できているかどうかの評価の指標を決める

画面遷移

  • 変えられない部分はあるか?
    • 前提として、どこから呼び出される等制限はあるか?
  • 処理の視点から考える
    • 入力されるデータと出力されるデータは何か?
    • どのようなステップを踏む必要があるか?
  • 簡単に画面の流れを紙に書いてみる

画面構成

  • 表示する要素は何か、リスト化してみる
  • xmindで要素を階層構造にしてみる
  • 要素の階層構造を、h1~落とし込む

UIモックを書く

配置

リード文

対象ユーザはどんな人か?

なぜ把握しておく必要があるか
どこまで説明すべきか?を明確にする為

リテラシー高い人?低い人?

[どうする?]
低い人なら、汎用的なIT用語も噛み砕いて説明する必要がある

専門分野のキーワードを利用する場合、分かるか?

[どうする?]

  • わからないなら、補足説明をつける必要がある
  • 専門分野のキーワードをなるべく使わない

ツール独自のワードはないか?

何の事前情報もなしに伝わるキーワードか?
ツールの文言をキーワード単位に切り取って確認する。

伝わらないなーっと思ったら、別のワードで伝わらないか考えてみる。

ルフレビュー

UIモックを画面ごとに印刷して、何も知らない人を装って
そのサービスを使ってみる(紙で)