Tweet
Tweet

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

NCDCのご紹介

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

UI改善の勘所 6

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

前回のおさらい

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

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

Slide 53

Slide 53 text

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

Slide 54

Slide 54 text

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

Slide 55

Slide 55 text

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

Slide 56

Slide 56 text

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

Slide 57

Slide 57 text

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

Slide 58

Slide 58 text

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

Slide 59

Slide 59 text

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

Slide 60

Slide 60 text

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

Slide 61

Slide 61 text

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