業務システムのUI設計・改善の勘所。ノンデザイナー向けに基礎から解説

多くのユーザーが優れたUX/UIを提供するサービスに触れている現代は、業務システムにおいても、より良いUXを期待するユーザーが増えています。

UXを重視したUI設計はユーザーの評価を得る重要な要素の一つであり、業務効率にも影響を与えます。
利用頻度の高い業務システムだからこそ機能的で効率よく使えるUI設計に改善したいという方も多く、当社へのご相談も増えてきています。

「 UX/UIデザイン」というと一見難しく捉えがちですが、UI改善へのはじめの一歩は「基礎的なUI設計」のルールや考え方を理解するところにあります。

今回のセミナーでは、業務システムのUX/UI改善に豊富な実績のある当社のデザイナーが、ノンデザイナーの方でも分かりやすいUI設計の基礎を中心に、具体的な事例を挙げて注意点や改善ポイントをご紹介いたします。

UI改善へ向けて何から取り組むべきか分からない方、デザインを外部に依頼するために改善ポイントを押さえておきたい方、業務システムの企画や開発に携わっている方で使いやすいUI設計を知りたい方など、幅広く参考にしていただける内容です。

Transcript

1. 業務システムのUI設計・改善の勘所。
   ノンデザイナー向けに基礎から解説
   2023/01/27
   NCDC株式会社
   

   View Slide

2. 講師紹介
   2
   UI/UXデザイナー
   菅原慎也
   UXデザイナー
   デザイン専門学校卒業後、ソフトウェアメー
   カーでプロジェクトマネージャーとして、マー
   ケティング、セールスを経験する一方で、国内
   トップのユーザー数を誇る3DCGソフトウェア
   「Shade3D」のUXデザインを担当。
   2014年からデザイン制作会社にてUI、UXに止ま
   らず、プロダクトデザインやコーポレートブラ
   ンディングなど活動な幅を広げる。2015年には、
   日本BtoB広告賞 経済産業大臣賞を受賞。
   2020年から幅広いデザイン領域の経験を武器に
   UXデザイナーとしてNCDCに参画。
   

   View Slide

3. NCDCのご紹介
   

   View Slide

4. Business
   事業領域の推進
   Design
   ユーザー視点での設計
   Technology
   技術による課題解決
   Innovation
   • コンサルティング
   • 新規サービス企画
   • PoC⽀援
   • デザイン思考
   • UX/UIデザイン
   • モバイル・Web先端技術
   • IoT / AI / AR
   • クラウドインテグレーション
   4
   NCDCのサービス体系
   

   View Slide

5. 私たちにできること①
   l デジタルビジネスに必要な要素にフォーカスし、⼀元的に提供しています。
   l スモールスタートでの検証から、本開発・継続的な改善までサポートします。
   5
   ワークショップを中⼼とし
   た合理的なプロセスで、ビ
   ジネスモデルの検討からUX
   デザインまで、迅速に⾏い
   ます。
   関係者が多数いる場合の組
   織横断、会社横断のファシ
   リテーションも得意です。
   新規性の⾼いプロジェクト
   ではMVP（Minimum Viable
   Product）を⽤いた検証を⾏
   うなど、⽬的に応じて段階
   的な開発を企画します。
   早い段階でモックやプロト
   タイプを⽤意してユーザー
   の評価を確認します。
   ユーザーとのタッチポイントとなる各種デ
   バイスのフロントエンドデザインから、ク
   ラウドサービスを駆使したバックエンドの
   開発まで。多様なテクノロジーをインテグ
   レーションします。
   l AI / IoT / AR
   l モバイル・ウェブ アプリ開発
   l クラウドインテグレーション
   l システムアーキテクチャコンサルティング
   など
   ビジネスモデルのデザイン スモールスタート・PoC システム・インテグレーション
   ユーザー視点を⼤切にした
   課題抽出・企画
   モックやプロトタイプ
   の開発・検証
   開発 継続的な改善
   

   View Slide

6. UI改善の勘所
   6
   

   View Slide

7. UX/UI改善のアプローチ方法
   l UI改善する方法は様々あります
   ヒューリスティック評価 アンケート調査
   エスノグラフィー ユーザーテスト
   アクセス分析
   etc
   

   View Slide

8. ヒューリスティック評価について
   l UXの中でも主に論理的に判断できる範囲を経験に基づいて評価する
   論
   理
   感
   性
   気持ち良く使ってもらう
   作業負荷を軽減する
   営業・評価期間で勝つ
   問い合わせ対応を削減する
   期待通り機能する
   信頼して使える
   使いやすい
   便利である
   楽しい・心地よい
   価値が
   ある
   • ヒューリスティック評価
   UXピラミッド
   http://abetteruserexperience.com/2011/12/hierarchy-of-needs-the-deprecated-pyramid/
   

   View Slide

9. 本ウェビナーのゴール
   l ヒューリスティック評価でよく挙がる改善点について説明します。
   ノンデザイナーの方でも理解して、実践できるようにしていきます。
   

   View Slide

10. 前回のおさらい
    

    View Slide

11. 11
    これは良いUIか？ 良くないUIか？ 良くない場合、どこが悪いのか？
    

    View Slide

12. 改善ポイントまとめ
    12
    • サイズ
    • 色
    3.コントラスト
    1.レイアウト
    2.階層
    4.ユーザー思考、習熟度
    5.ルール
    • サイズ
    • 近接
    • ステッパー
    • 多層構造は三階層以上になるのは避ける
    • インクリメンタルサーチ
    • 簡易検索、詳細検索
    • カスタマイズ、パーソナライズ
    • オブジェクトベース
    • 名詞→動詞 の操作順序
    • クリック数に固執しない
    • ユーザーの記憶に頼らない
    • コンポーネントルール
    • プラットフォームルール
    • ガイドラインルール
    • 整理
    • 余白
    • シェイプ
    • ポジション
    

    View Slide

13. 改善ポイントまとめ
    13
    • サイズ
    • 色
    3.コントラスト
    1.レイアウト
    2.階層
    4.ユーザー思考、習熟度
    5.ルール
    • サイズ
    • 近接
    • ステッパー
    • 多層構造は三階層以上になるのは避ける
    • インクリメンタルサーチ
    • 簡易検索、詳細検索
    • カスタマイズ、パーソナライズ
    • オブジェクトベース
    • 名詞→動詞 の操作順序
    • クリック数に固執しない
    • ユーザーの記憶に頼らない
    • コンポーネントルール
    • プラットフォームルール
    • ガイドラインルール
    • 整理
    • 余白
    • シェイプ
    • ポジション
    

    View Slide

14. 改善ポイント① レイアウト
    14
    要素整理
    サイズ
    近接
    整理
    余白
    視線の流れ
    グリッド
    個別配置のルール
    配置の準備 全体配置のルール
    

    View Slide

15. 15
    改善ポイント① レイアウト改善例
    改善前 改善後
    

    View Slide

16. 16
    改善ポイント① レイアウト改善例
    改善前
    改善後
    

    View Slide

17. 改善ポイントまとめ
    17
    • サイズ
    • 色
    3.コントラスト
    1.レイアウト
    2.階層
    4.ユーザー思考、習熟度
    5.ルール
    • サイズ
    • 近接
    • ステッパー
    • 多層構造は三階層以上になるのは避ける
    • インクリメンタルサーチ
    • 簡易検索、詳細検索
    • カスタマイズ、パーソナライズ
    • オブジェクトベース
    • 名詞→動詞 の操作順序
    • クリック数に固執しない
    • ユーザーの記憶に頼らない
    • コンポーネントルール
    • プラットフォームルール
    • ガイドラインルール
    • 整理
    • 余白
    • シェイプ
    • ポジション
    

    View Slide

18. 18
    改善ポイント② 階層
    ステップ画⾯の中に別のステップ画
    ⾯を⼊れることで、階層が複雑に
    なって現在地がわかりづらくなった
    り、ユーザーが混乱してしまう
    

    View Slide

19. 改善ポイント② 階層 改善例
    19
    複雑になる画⾯遷移は避けて、別の
    ルートへの案内でとどめておく。
    もしくは、多少ページが⻑くなって
    も良ければ同じ画⾯に収めるように
    レイアウトする
    

    View Slide

20. l 階層は三階層以上は避ける
    改善ポイント② 階層
    20
    似たようなタブで構造がわかりにくい
    三回層以上は複雑なので避ける
    最大２階層の中で表現する
    

    View Slide

21. 改善ポイントまとめ
    21
    • サイズ
    • 色
    3.コントラスト
    1.レイアウト
    2.階層
    4.ユーザー思考、習熟度
    5.ルール
    • サイズ
    • 近接
    • ステッパー
    • 多層構造は三階層以上になるのは避ける
    • インクリメンタルサーチ
    • 簡易検索、詳細検索
    • カスタマイズ、パーソナライズ
    • オブジェクトベース
    • 名詞→動詞 の操作順序
    • クリック数に固執しない
    • ユーザーの記憶に頼らない
    • コンポーネントルール
    • プラットフォームルール
    • ガイドラインルール
    • 整理
    • 余白
    • シェイプ
    • ポジション
    

    View Slide

22. 22
    改善ポイント③ コントラスト
    重要な数値が表⽰されているのに他
    の項⽬と差別化出来ておらず、優先
    度が低そうに⾒える
    

    View Slide

23. 改善ポイント③ コントラスト
    23
    シェイプ
    サイズ
    ポジション
    色
    配置を変える
    形を変える、書体を変える
    要素、エリア、文字サイズなど 強調色、色の反転など
    

    View Slide

24. 24
    改善ポイント③ コントラスト改善例 改善前
    

    View Slide

25. 25
    改善ポイント③ コントラスト改善例 改善後
    

    View Slide

26. 改善ポイントまとめ
    26
    • サイズ
    • 色
    3.コントラスト
    1.レイアウト
    2.階層
    4.ユーザー思考、習熟度
    5.ルール
    • サイズ
    • 近接
    • ステッパー
    • 多層構造は三階層以上になるのは避ける
    • インクリメンタルサーチ
    • 簡易検索、詳細検索
    • カスタマイズ、パーソナライズ
    • オブジェクトベース
    • 名詞→動詞 の操作順序
    • クリック数に固執しない
    • ユーザーの記憶に頼らない
    • コンポーネントルール
    • プラットフォームルール
    • ガイドラインルール
    • 整理
    • 余白
    • シェイプ
    • ポジション
    

    View Slide

27. 改善ポイント④ ユーザー思考・習熟度
    27
    検索項⽬が多いので、⼀覧表
    ⽰のエリアが狭い
    必要な項⽬だけ表⽰したい
    出⼒系のメニューが多く混乱
    してしまう
    検索項⽬が多く毎回⼊⼒する
    のが⾯倒
    

    View Slide

28. 改善ポイント④ ユーザー思考・習熟度
    28
    l オブジェクトベース
    ਃ੥
    ˔˔˔˔˔˔˔˔˔˔˔˔˔˔˔
    ˔˔˔˔˔˔˔˔˔˔
    ˔˔˔˔˔˔˔˔˔˔˔˔˔˔˔
    ˔˔˔˔˔˔˔˔˔˔
    ঝೝਃ੥
    ݕࡧ
    ਃ੥
    ਃ੥
    ։͘
    ݕࡧ
    ݕࡧ
    ࡟আਃ੥
    ෮ݩਃ੥
    ˔˔˔˔˔˔˔˔˔˔˔˔˔˔˔
    ˔˔˔˔˔˔˔˔˔˔˔˔˔˔˔
    ˔˔˔˔˔˔˔˔˔˔˔˔˔˔˔
    ˔˔˔˔˔˔˔˔˔˔˔˔˔˔˔
    ˔˔˔˔˔˔˔˔˔˔˔˔˔˔˔
    ˔˔˔˔˔˔˔˔˔˔˔˔˔˔˔
    ˔˔˔˔˔˔˔˔˔˔˔˔˔˔˔
    ˔˔˔˔˔˔˔˔˔˔˔˔˔˔˔
    ˔˔˔˔˔˔˔˔˔˔˔˔˔˔˔
    ˔˔˔˔˔˔˔˔˔˔˔˔˔˔˔
    ˔˔˔˔˔˔˔˔˔˔˔˔˔˔˔
    ˔˔˔˔˔˔˔˔˔˔˔˔˔˔˔
    ˔˔˔˔˔˔˔˔˔˔˔˔˔˔˔
    ˔˔˔˔˔˔˔˔˔˔˔˔˔˔˔
    ˔˔˔˔˔˔˔˔˔˔˔˔˔˔˔
    ˔˔˔˔˔˔˔˔˔˔˔˔˔˔˔
    ˔˔˔˔˔˔˔˔˔˔˔˔˔˔˔
    ˔˔˔˔˔˔˔˔˔˔˔˔˔˔˔
    ˔˔˔˔˔˔˔˔˔˔˔˔˔˔˔
    ˔˔˔˔˔˔˔˔˔˔˔˔˔˔˔
    ˔˔˔˔˔˔˔˔˔˔˔˔˔˔˔
    ˔˔˔˔˔˔˔˔˔˔
    ˔˔˔˔˔˔˔˔˔˔
    ˔˔˔˔˔˔˔˔˔˔
    ˔˔˔˔˔˔˔˔˔˔˔˔˔˔˔
    ˔˔˔˔˔˔˔˔˔˔˔˔˔˔˔
    ˔˔˔˔˔˔˔˔˔˔˔˔˔˔˔
    ˔˔˔˔˔˔˔˔˔˔
    ˔˔˔˔˔˔˔˔˔˔
    ˔˔˔˔˔˔˔˔˔˔
    ਃ੥
    ˔˔˔˔˔˔˔˔˔˔˔˔˔˔˔
    ˔˔˔˔˔˔˔˔˔˔
    ˔˔˔˔˔˔˔˔˔˔˔˔˔˔˔
    ˔˔˔˔˔˔˔˔˔˔
    ˔˔˔˔˔˔˔˔˔˔˔˔˔˔˔
    ˔˔˔˔˔˔˔˔˔˔˔˔˔˔˔
    ˔˔˔˔˔˔˔˔˔˔˔˔˔˔˔
    ˔˔˔˔˔˔˔˔˔˔˔˔˔˔˔
    ˔˔˔˔˔˔˔˔˔˔˔˔˔˔˔
    ˔˔˔˔˔˔˔˔˔˔˔˔˔˔˔
    ˔˔˔˔˔˔˔ ݕࡧ
    ෮ݩ ࡟আ ঝೝ
    

    View Slide

29. 改善ポイント④ ユーザー思考・習熟度
    29
    l オブジェクトベースで整理した改善後のUI
    改善後
    改善前
    

    View Slide

30. 改善ポイントまとめ
    30
    • サイズ
    • 色
    3.コントラスト
    1.レイアウト
    2.階層
    4.ユーザー思考、習熟度
    5.ルール
    • サイズ
    • 近接
    • ステッパー
    • 多層構造は三階層以上になるのは避ける
    • インクリメンタルサーチ
    • 簡易検索、詳細検索
    • カスタマイズ、パーソナライズ
    • オブジェクトベース
    • 名詞→動詞 の操作順序
    • クリック数に固執しない
    • ユーザーの記憶に頼らない
    • コンポーネントルール
    • プラットフォームルール
    • ガイドラインルール
    • 整理
    • 余白
    • シェイプ
    • ポジション
    

    View Slide

31. 改善ポイント⑤ ルール
    31
    正しいボタンの使い⽅になっ
    いない
    また「サイドメニュー」のア
    イコンが⼀般的ではない
    

    View Slide

32. l トグルスイッチ、ラジオボタン、チェックボックスは正しく使う
    改善ポイント⑤ ルール コンポーネントルール
    32
    チェックボックス
    トグルスイッチ ラジオボタン
    

    View Slide

33. 33
    改善ポイント⑤ ユーザー思考・習熟度 改善例
    ハンバーガーアイコンに変更
    ラジオボタンに変更
    

    View Slide

34. 改善ポイントまとめ_パート1
    34
    • サイズ
    • 色
    3.コントラスト
    1.レイアウト
    2.階層
    4.ユーザー思考、習熟度
    5.ルール
    • サイズ
    • 近接
    • ステッパー
    • 多層構造は三階層以上になるのは避ける
    • インクリメンタルサーチ
    • 簡易検索、詳細検索
    • カスタマイズ、パーソナライズ
    • オブジェクトベース
    • 名詞→動詞 の操作順序
    • クリック数に固執しない
    • ユーザーの記憶に頼らない
    • コンポーネントルール
    • プラットフォームルール
    • ガイドラインルール
    • 整理
    • 余白
    • シェイプ
    • ポジション
    

    View Slide

35. 改善ポイント_パート2
    35
    3.コントラスト
    1.レイアウト
    2.階層
    4.ユーザー思考、習熟度
    5.ルール
    • スクロールでできることを明示する
    • 入力項目が多いときはステッパーにする
    • 色を使いすぎない
    • 適切なフォントになっているか
    • ペルソナを確認する
    • 適切な言葉を選んで使う
    • 負荷のかかる入力をできるかぎり
    補助する
    • ボタン類の正しいデザインを確認
    する
    • UIの一貫性を保つ
    • ショートカットを用意する
    • 理解しやすいコンポーネントを採用する
    • ホバーに頼り過ぎない
    • マニュアルに頼るところはしっかり
    頼る
    • カスタマイズ・パソナライズ
    • 主導権はあくまでユーザー
    • モーダル・モードレス
    

    View Slide

36. 36
    改善ポイント① レイアウト
    • スクロールできることを明示する
    

    View Slide

37. 37
    改善ポイント② 階層
    • 入力項目が多いときはステッパーにする
    

    View Slide

38. 38
    改善ポイント③ コントラスト
    • 色を使いすぎない
    

    View Slide

39. 39
    改善ポイント③ コントラスト
    • 適切なフォントになっているか
    

    View Slide

40. 40
    改善ポイント④ ユーザー思考、習熟度
    • ペルソナを確認する
    親子で楽しむサービス検討のペルソナ(子)
    ⽒名：⼭⽥⾥奈
    年齢：6歳（幼稚園年⻑）
    好きな遊び：
    • 歌、ダンス
    • 体を動かす外遊び
    好きなキャラクター：プリキュア
    ⾳楽：ピアノには興味を持っていない
    IT企業向け社内サービス検討のペルソナ
    ⽒名：⼩林雅⼈
    年齢：42歳
    住まい：東京都在住 電⾞+徒歩通勤45分
    部署：⾦融事業部所属
    仕事内容：
    • インフラ関連のエンジニア
    • プロジェクトをいくつもかけ持っている
    • 勤務時間は⻑い傾向がある
    • プロジェクト内での会議が多い
    • 現在は在宅勤務対象者になっている
    家族構成：
    • 妻38歳（会社員）
    • ⼦供2⼈（⼩学2年⽣の⻑⼥、幼稚園に通う5歳の⻑
    男）
    働く女性向けサービス検討のためのペルソナ
    ⽒名：佐藤志保
    年齢：35歳
    ⾝⻑：155センチ
    職業：⼤⼿製薬メーカーの広報主任
    年収：800万円
    家族：未婚で⼀⼈暮らし付き合って1年の彼⽒アリ
    性格：テキパキさっぱりした性格、無駄な時間などは作らず常に活動的
    趣味：ショッピング、グルメ巡り、旅⾏、⾃分磨き、アロマネイル
    好きなブランド：アーバンクローゼット系
    化粧品へのこだわり：セットで購⼊して払いするコンサルを希望
    スマホ/携帯： 最新のiPhone を所有
    どんなアプリを使っている： Instagram ,LINE
    ITリテラシー：ネットショッピングなども⾏い、スマホも⾃由に使いこなす
    ⽣活スタイル：平⽇は22時より早く寝ることはほとんどない。
    ⼟⽇は趣味は⾃分磨きがデート。年1回ぐらいは海外旅⾏
    親子で楽しむサービス検討のペルソナ(親)
    ⽒名：⼭⽥亜希⼦
    年齢：35歳（主婦）
    家族：夫、娘（⾥奈6歳）
    ⾳楽：
    • ピアノから離れて20年以上
    • ⼦供にピアノを習わせたいと思ってい
    て、⾃分も久々に⾏ってみようと興味
    を持っている
    • ⼦供にも教えてあげたい
    

    View Slide

41. 41
    改善ポイント④ ユーザー思考、習熟度
    • 負荷のかかる入力を補助する
    • 適切な言葉を選んで使う
    

    View Slide

42. 42
    改善ポイント④ ユーザー思考、習熟度
    • 負荷のかかる入力を補助する
    • 入力補助の機能を適切に使う
    

    View Slide

43. 43
    改善ポイント④ ユーザー思考、習熟度
    • 負荷のかかる入力を補助する
    • 入力フォームは何を入力したら良いか明示する
    

    View Slide

44. 44
    改善ポイント④ ユーザー思考、習熟度
    • 負荷のかかる入力を補助する
    • 入力補助はよく使うものを選びやすくする
    

    View Slide

45. 45
    改善ポイント④ ユーザー思考、習熟度
    • リアルタイムバリデーション
    

    View Slide

46. 46
    改善ポイント④ ユーザー思考、習熟度
    • 検索中のステータスが随時確認できること
    

    View Slide

47. 47
    改善ポイント④ ユーザー思考、習熟度
    l ボタン類の正しいデザインを確認する
    l ボタンの優先度を考えてレイアウトされているか
    

    View Slide

48. 48
    改善ポイント④ ユーザー思考、習熟度
    • ボタン類の正しいデザインを確認する
    • リンクとボタンを使い分ける
    

    View Slide

49. 49
    改善ポイント④ ユーザー思考、習熟度
    • ボタン類の正しいデザインを確認する
    • クリックできることを明示する
    

    View Slide

50. 50
    改善ポイント④ ユーザー思考、習熟度
    • ボタン類の正しいデザインを確認する
    • ボタンの名称は具体的な動詞を使っているか
    

    View Slide

51. 51
    改善ポイント④ ユーザー思考、習熟度
    • UIの一貫性を保つ
    

    View Slide

52. 52
    改善ポイント④ ユーザー思考、習熟度
    • よく使うものを目立つところに配置する
    

    View Slide

53. 53
    改善ポイント④ ユーザー思考、習熟度
    • ホットスポットは最適な大きさか
    

    View Slide

54. 54
    改善ポイント④ ユーザー思考、習熟度
    • マニュアルに頼るところはしっかり頼る
    

    View Slide

55. 56
    改善ポイント④ ユーザー思考、習熟度
    • 主導権はあくまでユーザー
    • 主導権はあくまでユーザー
    

    View Slide

56. 57
    改善ポイント④ ユーザー思考、習熟度
    • 主導権はあくまでユーザー
    • モーダル・モードレス
    

    View Slide

57. 58
    改善ポイント⑤ ルール
    • 理解しやすいコンポーネントを採用する
    

    View Slide

58. 改善ポイント_パート2
    59
    3.コントラスト
    1.レイアウト
    2.階層
    4.ユーザー思考、習熟度
    5.ルール
    • スクロールでできることを明示する
    • 入力項目が多いときはステッパーにする
    • 色を使いすぎない
    • 適切なフォントになっているか
    • ペルソナを確認する
    • 適切な言葉を選んで使う
    • 負荷のかかる入力をできるかぎり
    補助する
    • ボタン類の正しいデザインを確認
    する
    • UIの一貫性を保つ
    • ショートカットを用意する
    • 理解しやすいコンポーネントを採用する
    • ホバーに頼り過ぎない
    • マニュアルに頼るところはしっかり
    頼る
    • カスタマイズ・パソナライズ
    • 主導権はあくまでユーザー
    • モーダル・モードレス
    

    View Slide

59. 改善点をどのように実現するか？
    60
    

    View Slide

60. 実現方法のコツ
    l 既存システムでUIだけを刷新するのは現実的でない場合が多い
    l 案1：次回のシステム刷新まで待つ
    l 案2：以下の条件を満たすところから随時修正
    l 改修することでユーザーへのプラスの影響が大きい部分
    l 業務的に一塊になっている部分
    l 実装上の影響範囲が閉じている部分
    例えば業務システムのトップ画面、メニュー画面だけ改修するというパターンもあり
    • どのユーザーも通る画面であるため、改善されると効果が大きい
    • 一画面だけ切り出して実装することができる
    

    View Slide

61. info@ncdc.co.jp
    www.ncdc.co.jp
    

    View Slide