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

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

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

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

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

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

Transcript

1. 業務システムのUI設計・改善の勘所。 ノンデザイナー向けに基礎から解説 2023/01/27 NCDC株式会社
2. 講師紹介 2 UI/UXデザイナー 菅原慎也 UXデザイナー デザイン専門学校卒業後、ソフトウェアメー カーでプロジェクトマネージャーとして、マー ケティング、セールスを経験する一方で、国内 トップのユーザー数を誇る3DCGソフトウェア 「Shade3D」のUXデザインを担当。 2014年からデザイン制作会社にてUI、UXに止ま らず、プロダクトデザインやコーポレートブラ ンディングなど活動な幅を広げる。2015年には、 日本BtoB広告賞 経済産業大臣賞を受賞。 2020年から幅広いデザイン領域の経験を武器に UXデザイナーとしてNCDCに参画。
3. NCDCのご紹介
4. Business 事業領域の推進 Design ユーザー視点での設計 Technology 技術による課題解決 Innovation • コンサルティング • 新規サービス企画 • PoC⽀援 • デザイン思考 • UX/UIデザイン • モバイル・Web先端技術 • IoT / AI / AR • クラウドインテグレーション 4 NCDCのサービス体系
5. 私たちにできること① l デジタルビジネスに必要な要素にフォーカスし、⼀元的に提供しています。 l スモールスタートでの検証から、本開発・継続的な改善までサポートします。 5 ワークショップを中⼼とし た合理的なプロセスで、ビ ジネスモデルの検討からUX デザインまで、迅速に⾏い ます。 関係者が多数いる場合の組 織横断、会社横断のファシ リテーションも得意です。 新規性の⾼いプロジェクト ではMVP（Minimum Viable Product）を⽤いた検証を⾏ うなど、⽬的に応じて段階 的な開発を企画します。 早い段階でモックやプロト タイプを⽤意してユーザー の評価を確認します。 ユーザーとのタッチポイントとなる各種デ バイスのフロントエンドデザインから、ク ラウドサービスを駆使したバックエンドの 開発まで。多様なテクノロジーをインテグ レーションします。 l AI / IoT / AR l モバイル・ウェブ アプリ開発 l クラウドインテグレーション l システムアーキテクチャコンサルティング など ビジネスモデルのデザイン スモールスタート・PoC システム・インテグレーション ユーザー視点を⼤切にした 課題抽出・企画 モックやプロトタイプ の開発・検証 開発 継続的な改善
6. UI改善の勘所 6
7. UX/UI改善のアプローチ方法 l UI改善する方法は様々あります ヒューリスティック評価 アンケート調査 エスノグラフィー ユーザーテスト アクセス分析 etc
8. ヒューリスティック評価について l UXの中でも主に論理的に判断できる範囲を経験に基づいて評価する 論 理 感 性 気持ち良く使ってもらう 作業負荷を軽減する 営業・評価期間で勝つ 問い合わせ対応を削減する 期待通り機能する 信頼して使える 使いやすい 便利である 楽しい・心地よい 価値が ある • ヒューリスティック評価 UXピラミッド http://abetteruserexperience.com/2011/12/hierarchy-of-needs-the-deprecated-pyramid/
9. 本ウェビナーのゴール l ヒューリスティック評価でよく挙がる改善点について説明します。 ノンデザイナーの方でも理解して、実践できるようにしていきます。
10. 前回のおさらい
11. 11 これは良いUIか？ 良くないUIか？ 良くない場合、どこが悪いのか？
12. 改善ポイントまとめ 12 • サイズ • 色 3.コントラスト 1.レイアウト 2.階層 4.ユーザー思考、習熟度 5.ルール • サイズ • 近接 • ステッパー • 多層構造は三階層以上になるのは避ける • インクリメンタルサーチ • 簡易検索、詳細検索 • カスタマイズ、パーソナライズ • オブジェクトベース • 名詞→動詞 の操作順序 • クリック数に固執しない • ユーザーの記憶に頼らない • コンポーネントルール • プラットフォームルール • ガイドラインルール • 整理 • 余白 • シェイプ • ポジション
13. 改善ポイントまとめ 13 • サイズ • 色 3.コントラスト 1.レイアウト 2.階層 4.ユーザー思考、習熟度 5.ルール • サイズ • 近接 • ステッパー • 多層構造は三階層以上になるのは避ける • インクリメンタルサーチ • 簡易検索、詳細検索 • カスタマイズ、パーソナライズ • オブジェクトベース • 名詞→動詞 の操作順序 • クリック数に固執しない • ユーザーの記憶に頼らない • コンポーネントルール • プラットフォームルール • ガイドラインルール • 整理 • 余白 • シェイプ • ポジション
14. 改善ポイント① レイアウト 14 要素整理 サイズ 近接 整理 余白 視線の流れ グリッド 個別配置のルール 配置の準備 全体配置のルール
15. 15 改善ポイント① レイアウト改善例 改善前 改善後
16. 16 改善ポイント① レイアウト改善例 改善前 改善後
17. 改善ポイントまとめ 17 • サイズ • 色 3.コントラスト 1.レイアウト 2.階層 4.ユーザー思考、習熟度 5.ルール • サイズ • 近接 • ステッパー • 多層構造は三階層以上になるのは避ける • インクリメンタルサーチ • 簡易検索、詳細検索 • カスタマイズ、パーソナライズ • オブジェクトベース • 名詞→動詞 の操作順序 • クリック数に固執しない • ユーザーの記憶に頼らない • コンポーネントルール • プラットフォームルール • ガイドラインルール • 整理 • 余白 • シェイプ • ポジション
18. 18 改善ポイント② 階層 ステップ画⾯の中に別のステップ画 ⾯を⼊れることで、階層が複雑に なって現在地がわかりづらくなった り、ユーザーが混乱してしまう
19. 改善ポイント② 階層 改善例 19 複雑になる画⾯遷移は避けて、別の ルートへの案内でとどめておく。 もしくは、多少ページが⻑くなって も良ければ同じ画⾯に収めるように レイアウトする
20. l 階層は三階層以上は避ける 改善ポイント② 階層 20 似たようなタブで構造がわかりにくい 三回層以上は複雑なので避ける 最大２階層の中で表現する
21. 改善ポイントまとめ 21 • サイズ • 色 3.コントラスト 1.レイアウト 2.階層 4.ユーザー思考、習熟度 5.ルール • サイズ • 近接 • ステッパー • 多層構造は三階層以上になるのは避ける • インクリメンタルサーチ • 簡易検索、詳細検索 • カスタマイズ、パーソナライズ • オブジェクトベース • 名詞→動詞 の操作順序 • クリック数に固執しない • ユーザーの記憶に頼らない • コンポーネントルール • プラットフォームルール • ガイドラインルール • 整理 • 余白 • シェイプ • ポジション
22. 22 改善ポイント③ コントラスト 重要な数値が表⽰されているのに他 の項⽬と差別化出来ておらず、優先 度が低そうに⾒える
23. 改善ポイント③ コントラスト 23 シェイプ サイズ ポジション 色 配置を変える 形を変える、書体を変える 要素、エリア、文字サイズなど 強調色、色の反転など
24. 24 改善ポイント③ コントラスト改善例 改善前
25. 25 改善ポイント③ コントラスト改善例 改善後
26. 改善ポイントまとめ 26 • サイズ • 色 3.コントラスト 1.レイアウト 2.階層 4.ユーザー思考、習熟度 5.ルール • サイズ • 近接 • ステッパー • 多層構造は三階層以上になるのは避ける • インクリメンタルサーチ • 簡易検索、詳細検索 • カスタマイズ、パーソナライズ • オブジェクトベース • 名詞→動詞 の操作順序 • クリック数に固執しない • ユーザーの記憶に頼らない • コンポーネントルール • プラットフォームルール • ガイドラインルール • 整理 • 余白 • シェイプ • ポジション
27. 改善ポイント④ ユーザー思考・習熟度 27 検索項⽬が多いので、⼀覧表 ⽰のエリアが狭い 必要な項⽬だけ表⽰したい 出⼒系のメニューが多く混乱 してしまう 検索項⽬が多く毎回⼊⼒する のが⾯倒
28. 改善ポイント④ ユーザー思考・習熟度 28 l オブジェクトベース ਃ੥ ˔˔˔˔˔˔˔˔˔˔˔˔˔˔˔ ˔˔˔˔˔˔˔˔˔˔ ˔˔˔˔˔˔˔˔˔˔˔˔˔˔˔ ˔˔˔˔˔˔˔˔˔˔ ঝೝਃ੥ ݕࡧ ਃ੥ ਃ੥ ։͘ ݕࡧ ݕࡧ ࡟আਃ੥ ෮ݩਃ੥ ˔˔˔˔˔˔˔˔˔˔˔˔˔˔˔ ˔˔˔˔˔˔˔˔˔˔˔˔˔˔˔ ˔˔˔˔˔˔˔˔˔˔˔˔˔˔˔ ˔˔˔˔˔˔˔˔˔˔˔˔˔˔˔ ˔˔˔˔˔˔˔˔˔˔˔˔˔˔˔ ˔˔˔˔˔˔˔˔˔˔˔˔˔˔˔ ˔˔˔˔˔˔˔˔˔˔˔˔˔˔˔ ˔˔˔˔˔˔˔˔˔˔˔˔˔˔˔ ˔˔˔˔˔˔˔˔˔˔˔˔˔˔˔ ˔˔˔˔˔˔˔˔˔˔˔˔˔˔˔ ˔˔˔˔˔˔˔˔˔˔˔˔˔˔˔ ˔˔˔˔˔˔˔˔˔˔˔˔˔˔˔ ˔˔˔˔˔˔˔˔˔˔˔˔˔˔˔ ˔˔˔˔˔˔˔˔˔˔˔˔˔˔˔ ˔˔˔˔˔˔˔˔˔˔˔˔˔˔˔ ˔˔˔˔˔˔˔˔˔˔˔˔˔˔˔ ˔˔˔˔˔˔˔˔˔˔˔˔˔˔˔ ˔˔˔˔˔˔˔˔˔˔˔˔˔˔˔ ˔˔˔˔˔˔˔˔˔˔˔˔˔˔˔ ˔˔˔˔˔˔˔˔˔˔˔˔˔˔˔ ˔˔˔˔˔˔˔˔˔˔˔˔˔˔˔ ˔˔˔˔˔˔˔˔˔˔ ˔˔˔˔˔˔˔˔˔˔ ˔˔˔˔˔˔˔˔˔˔ ˔˔˔˔˔˔˔˔˔˔˔˔˔˔˔ ˔˔˔˔˔˔˔˔˔˔˔˔˔˔˔ ˔˔˔˔˔˔˔˔˔˔˔˔˔˔˔ ˔˔˔˔˔˔˔˔˔˔ ˔˔˔˔˔˔˔˔˔˔ ˔˔˔˔˔˔˔˔˔˔ ਃ੥ ˔˔˔˔˔˔˔˔˔˔˔˔˔˔˔ ˔˔˔˔˔˔˔˔˔˔ ˔˔˔˔˔˔˔˔˔˔˔˔˔˔˔ ˔˔˔˔˔˔˔˔˔˔ ˔˔˔˔˔˔˔˔˔˔˔˔˔˔˔ ˔˔˔˔˔˔˔˔˔˔˔˔˔˔˔ ˔˔˔˔˔˔˔˔˔˔˔˔˔˔˔ ˔˔˔˔˔˔˔˔˔˔˔˔˔˔˔ ˔˔˔˔˔˔˔˔˔˔˔˔˔˔˔ ˔˔˔˔˔˔˔˔˔˔˔˔˔˔˔ ˔˔˔˔˔˔˔ ݕࡧ ෮ݩ ࡟আ ঝೝ
29. 改善ポイント④ ユーザー思考・習熟度 29 l オブジェクトベースで整理した改善後のUI 改善後 改善前
30. 改善ポイントまとめ 30 • サイズ • 色 3.コントラスト 1.レイアウト 2.階層 4.ユーザー思考、習熟度 5.ルール • サイズ • 近接 • ステッパー • 多層構造は三階層以上になるのは避ける • インクリメンタルサーチ • 簡易検索、詳細検索 • カスタマイズ、パーソナライズ • オブジェクトベース • 名詞→動詞 の操作順序 • クリック数に固執しない • ユーザーの記憶に頼らない • コンポーネントルール • プラットフォームルール • ガイドラインルール • 整理 • 余白 • シェイプ • ポジション
31. 改善ポイント⑤ ルール 31 正しいボタンの使い⽅になっ いない また「サイドメニュー」のア イコンが⼀般的ではない
32. l トグルスイッチ、ラジオボタン、チェックボックスは正しく使う 改善ポイント⑤ ルール コンポーネントルール 32 チェックボックス トグルスイッチ ラジオボタン
33. 33 改善ポイント⑤ ユーザー思考・習熟度 改善例 ハンバーガーアイコンに変更 ラジオボタンに変更
34. 改善ポイントまとめ_パート1 34 • サイズ • 色 3.コントラスト 1.レイアウト 2.階層 4.ユーザー思考、習熟度 5.ルール • サイズ • 近接 • ステッパー • 多層構造は三階層以上になるのは避ける • インクリメンタルサーチ • 簡易検索、詳細検索 • カスタマイズ、パーソナライズ • オブジェクトベース • 名詞→動詞 の操作順序 • クリック数に固執しない • ユーザーの記憶に頼らない • コンポーネントルール • プラットフォームルール • ガイドラインルール • 整理 • 余白 • シェイプ • ポジション
35. 改善ポイント_パート2 35 3.コントラスト 1.レイアウト 2.階層 4.ユーザー思考、習熟度 5.ルール • スクロールでできることを明示する • 入力項目が多いときはステッパーにする • 色を使いすぎない • 適切なフォントになっているか • ペルソナを確認する • 適切な言葉を選んで使う • 負荷のかかる入力をできるかぎり 補助する • ボタン類の正しいデザインを確認 する • UIの一貫性を保つ • ショートカットを用意する • 理解しやすいコンポーネントを採用する • ホバーに頼り過ぎない • マニュアルに頼るところはしっかり 頼る • カスタマイズ・パソナライズ • 主導権はあくまでユーザー • モーダル・モードレス
36. 36 改善ポイント① レイアウト • スクロールできることを明示する
37. 37 改善ポイント② 階層 • 入力項目が多いときはステッパーにする
38. 38 改善ポイント③ コントラスト • 色を使いすぎない
39. 39 改善ポイント③ コントラスト • 適切なフォントになっているか
40. 40 改善ポイント④ ユーザー思考、習熟度 • ペルソナを確認する 親子で楽しむサービス検討のペルソナ(子) ⽒名：⼭⽥⾥奈 年齢：6歳（幼稚園年⻑） 好きな遊び： • 歌、ダンス • 体を動かす外遊び 好きなキャラクター：プリキュア ⾳楽：ピアノには興味を持っていない IT企業向け社内サービス検討のペルソナ ⽒名：⼩林雅⼈ 年齢：42歳 住まい：東京都在住 電⾞+徒歩通勤45分 部署：⾦融事業部所属 仕事内容： • インフラ関連のエンジニア • プロジェクトをいくつもかけ持っている • 勤務時間は⻑い傾向がある • プロジェクト内での会議が多い • 現在は在宅勤務対象者になっている 家族構成： • 妻38歳（会社員） • ⼦供2⼈（⼩学2年⽣の⻑⼥、幼稚園に通う5歳の⻑ 男） 働く女性向けサービス検討のためのペルソナ ⽒名：佐藤志保 年齢：35歳 ⾝⻑：155センチ 職業：⼤⼿製薬メーカーの広報主任 年収：800万円 家族：未婚で⼀⼈暮らし付き合って1年の彼⽒アリ 性格：テキパキさっぱりした性格、無駄な時間などは作らず常に活動的 趣味：ショッピング、グルメ巡り、旅⾏、⾃分磨き、アロマネイル 好きなブランド：アーバンクローゼット系 化粧品へのこだわり：セットで購⼊して払いするコンサルを希望 スマホ/携帯： 最新のiPhone を所有 どんなアプリを使っている： Instagram ,LINE ITリテラシー：ネットショッピングなども⾏い、スマホも⾃由に使いこなす ⽣活スタイル：平⽇は22時より早く寝ることはほとんどない。 ⼟⽇は趣味は⾃分磨きがデート。年1回ぐらいは海外旅⾏ 親子で楽しむサービス検討のペルソナ(親) ⽒名：⼭⽥亜希⼦ 年齢：35歳（主婦） 家族：夫、娘（⾥奈6歳） ⾳楽： • ピアノから離れて20年以上 • ⼦供にピアノを習わせたいと思ってい て、⾃分も久々に⾏ってみようと興味 を持っている • ⼦供にも教えてあげたい
41. 41 改善ポイント④ ユーザー思考、習熟度 • 負荷のかかる入力を補助する • 適切な言葉を選んで使う
42. 42 改善ポイント④ ユーザー思考、習熟度 • 負荷のかかる入力を補助する • 入力補助の機能を適切に使う
43. 43 改善ポイント④ ユーザー思考、習熟度 • 負荷のかかる入力を補助する • 入力フォームは何を入力したら良いか明示する
44. 44 改善ポイント④ ユーザー思考、習熟度 • 負荷のかかる入力を補助する • 入力補助はよく使うものを選びやすくする
45. 45 改善ポイント④ ユーザー思考、習熟度 • リアルタイムバリデーション
46. 46 改善ポイント④ ユーザー思考、習熟度 • 検索中のステータスが随時確認できること
47. 47 改善ポイント④ ユーザー思考、習熟度 l ボタン類の正しいデザインを確認する l ボタンの優先度を考えてレイアウトされているか
48. 48 改善ポイント④ ユーザー思考、習熟度 • ボタン類の正しいデザインを確認する • リンクとボタンを使い分ける
49. 49 改善ポイント④ ユーザー思考、習熟度 • ボタン類の正しいデザインを確認する • クリックできることを明示する
50. 50 改善ポイント④ ユーザー思考、習熟度 • ボタン類の正しいデザインを確認する • ボタンの名称は具体的な動詞を使っているか
51. 51 改善ポイント④ ユーザー思考、習熟度 • UIの一貫性を保つ
52. 52 改善ポイント④ ユーザー思考、習熟度 • よく使うものを目立つところに配置する
53. 53 改善ポイント④ ユーザー思考、習熟度 • ホットスポットは最適な大きさか
54. 54 改善ポイント④ ユーザー思考、習熟度 • マニュアルに頼るところはしっかり頼る
55. 56 改善ポイント④ ユーザー思考、習熟度 • 主導権はあくまでユーザー • 主導権はあくまでユーザー
56. 57 改善ポイント④ ユーザー思考、習熟度 • 主導権はあくまでユーザー • モーダル・モードレス
57. 58 改善ポイント⑤ ルール • 理解しやすいコンポーネントを採用する
58. 改善ポイント_パート2 59 3.コントラスト 1.レイアウト 2.階層 4.ユーザー思考、習熟度 5.ルール • スクロールでできることを明示する • 入力項目が多いときはステッパーにする • 色を使いすぎない • 適切なフォントになっているか • ペルソナを確認する • 適切な言葉を選んで使う • 負荷のかかる入力をできるかぎり 補助する • ボタン類の正しいデザインを確認 する • UIの一貫性を保つ • ショートカットを用意する • 理解しやすいコンポーネントを採用する • ホバーに頼り過ぎない • マニュアルに頼るところはしっかり 頼る • カスタマイズ・パソナライズ • 主導権はあくまでユーザー • モーダル・モードレス
59. 改善点をどのように実現するか？ 60
60. 実現方法のコツ l 既存システムでUIだけを刷新するのは現実的でない場合が多い l 案1：次回のシステム刷新まで待つ l 案2：以下の条件を満たすところから随時修正 l 改修することでユーザーへのプラスの影響が大きい部分 l 業務的に一塊になっている部分 l 実装上の影響範囲が閉じている部分 例えば業務システムのトップ画面、メニュー画面だけ改修するというパターンもあり • どのユーザーも通る画面であるため、改善されると効果が大きい • 一画面だけ切り出して実装することができる
61. info@ncdc.co.jp www.ncdc.co.jp