Masassiah Blog

現役サラリーマンのスキルアップのための読書まとめ

UI/UX デザインの原則

とあるタブレットスマートフォンの入力・表示画面のデザイン検討の参考として,『UI/UX デザインの原則』"The Principle of UI/UX Design" (平石大祐,幻冬舎メディアコンサルティング,2020年10月23日)を読了。

本書に書かれている UI/UX デザインの 4 つの原則。

  • 原則1【How】ユーザー心理 / 行動をとらえる
    『ユーザー心理 / 行動に則って考える』ことが UI/UX デザインの第一歩である
  • 原則2【How】どう改善するか
    『ユーザー心理 / 行動』を UI/UX デザインに落とし込む
  • 原則3【How】どう改善するか(体制とプロセス)
    UI/UX デザインにおける三方良しをつくる
  • 原則4【応用編】
    UI/UX 思考でこれからのビジネスをデザインする
  • 「使い勝手」に影響するのが UI
  • 「体験価値」に影響するのが UX(p. 14)

「使い勝手」と「体験価値」の両方を追求しなければならない。

当然のことですが,担当者はそのサービス,商品に日々触れています。競合他社の商品や最新トレンドも調べるなかで,きっと世の中でも "知っている人" になっているでしょう。人はある物事に詳しくなると,当初持っていた疑問や初心者なら当然に抱く疑問を持たなくなってしまうものです。(p. 24)

仲間内だけではなく,別の人にも見せてみよう。

分かりやすいビジュアルデザインを目指す上で情報量の過多は大きな弊害となります。ユーザーにとって何が重要なのか,情報の優先順位をつけ,ビジュアルデザインに落とし込んでいくという作業が必要なのです。(p. 61)

情報を一覧にして,それぞれ優先順位をつける作業をすれば,ビジュアルデザインを考えやすくなる。

リピートユーザーであれば,その使いづらさを学習していたり,サービスに愛着があったりと,多少の使いづらさ・分かりづらさに目をつぶってくれることもあります。しかし,そうでない初期ユーザーを相手にする場合は,特に丁寧にユーザー心理 / 行動に沿った UI/UX デザインが重要となるのです。(p. 66)

最初に手に取ったとき,ユーザの心に響くかが重要。

  • 新規ユーザーの不安はチュートリアルで解消する
  • 初期体験における情報取得は理由とセットで(p. 70)

ユーザの不安を解消するための工夫も考えておく。

  • 移動中の利用が想定される場合,太陽のもとでも見やすいカラーコントラストにする
  • 誤タップを防ぐため,タップ領域の大きさやボタンの間隔を工夫する
  • ユーザーが置かれているシチュエーションを想定して,ボタンの配置を決める(p. 80)

屋外で利用するタブレットの画面は,ダークモードがよいだろうか。

ユーザーは最初にすべての説明を求めているわけではなく,必要なタイミングで,最低限の説明をしてもらえることを求めているのです。このニーズを満たす手法として "ツールチップ" の活用があります。(p. 94)

ここぞ,というときにツールチップを表示できるようにしておく。

UI/UX デザインにおける品質(良い結果が得られる状態)は「ビジネス(戦略・収益・営業)」「テクノロジー(開発・システム)」「UX(顧客視点)」の重なるところに生まれるからです。(p. 106)

ビジネス,テクノロジー,UX それぞれを考慮して,調和させる。

freee における UI/UX デザイナーのロール(p. 134)

  1. プロダクトデザイン
    会計ソフト,申告ソフト,人事労務ソフトなどのプロダクトのユーザビリティを調査し,実際の開発要件に合ったデザインをつくる。
  2. デザインリサーチ
    freee 全体のユーザーテストの品質向上を担う。各プロダクトチームのデザイナーのリサーチをバックアップする。
  3. デザインシステム
    各プロダクトが使用する UI コンポーネント(部品類)を作成。UI ガイドラインの策定をサポートする。

私の会社にも,デザイナーを担える人がいればいいな。