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

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

NCDCのご紹介

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

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

UI改善の勘所 6

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

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

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

UI改善のポイント

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

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

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

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

改善ポイント① レイアウト 15 メニューの数が多く、⼀⾒して識別しづらい。ア イコンでそれぞれの項⽬の差別化はしているが似 たようなアイコンであまり差別化になっていない

改善ポイント① レイアウト 16 役割と重要度の違うボタンが 近くに配置してあるため、操 作に⼾惑う

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

l 重要なものは基本「大きく」。そうでないものは「より小さく」 改善ポイント① レイアウトー配置ルール①サイズ 18 BACKLUNDA LEDワークランプ, ホワイト 消費税込み。価格は店舗によって異なる場合があります 今すぐ購入 BACKLUNDA LEDワークランプ, ホワイト 消費税込み。価格は店舗によって 異なる場合があります 今すぐ購入

改善ポイント① レイアウトー配置ルール②近接 19 該当する項目を選択 該当する項目を選択 • 関連する要素は近づけて配置する

l 配置を揃えることで要素が一体化され関連しているように見える 改善ポイント① レイアウトー配置ルール③整列 20 iMac MacBook Pro MacBook Air Mac Mini Mac Pro 3.5GHz 2.9GHz 1.7GHz 2.6GHz 3.7GHz 131,800円 112,800円 88,800円 56,800円 303,800円 iMac 3.5GHz 131,800円 MacBook Pro 2.9GHz 112,800円 Mac Book Air 1.7GHz 88,800円 Mac Mini 2.6GHz 56,800円 MacPro 3.7GHz 303,800円 仕様⽐較 仕様⽐較 空間的に離れていても、見えない線 がつながりを作ってくれる

改善ポイント① レイアウトー配置ルール③整列 21

l 余白を適切に確保して窮屈感を減らす l 要素同士がぶつかって見にくくならないようにする 改善ポイント① レイアウトー配置ルール④余白 22

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

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

よくある検索＆結果一覧表示（NG例） • マージン（隙間）が多く、実線が少なく、 おしゃれでスッキリしたUI • しかし、表示件数が少なく、ページを遷移 させないといけない 25

よくある検索＆結果一覧表示（Good例） • おしゃれでスッキリしたUIでありながら、表示件数も多く、 実行できる機能も多く実現できている 26

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

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

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

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

コントラストの例 31 高い 低い

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

改善ポイント③ コントラスト 33 低い 高い

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

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

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

改善ポイント④ ユーザー思考・習熟度 37 ⼿⼊⼒をするのはユーザーに とって⾮常に⾯倒

38 改善ポイント④ ユーザー思考・習熟度 改善例 プルダウンから項⽬を選ぶ ことができる。ただし、選 択肢を増やしずぎて、選ぶ のに時間がかかることは考 慮しなければ⾏けない

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

改善ポイント④ ユーザー思考・習熟度 40 l 名詞→動詞 の操作順序

業務システムでUIデザインで注意すべきポイント 41 l オブジェクトベースで整理した改善後のUI 改善後 改善前

業務システムでUIデザインで注意すべきポイント 42 l クリック数にこだわらないケース • 利用頻度が低い画面でユーザーの習熟度が上がらないケースのときは、ステップナビを利用して、手 厚くサポートすることで操作ミスを防ぐ • メーラーはよく使うので選択したコンテンツに応じで操作アイコンが変わります（Gmail）

業務システムでUIデザインで注意すべきポイント 43 l 検索は簡易検索と詳細検索 改善後 改善前

業務システムでUIデザインで注意すべきポイント 44 l 検索は簡易検索と詳細検索

業務システムでUIデザインで注意すべきポイント 45 l テーブルデザイン • 検索条件の保存 • ソート • 列を⾮表⽰ • 列順を⼊れ替え • 列の⾮表⽰状態をブラウザ単 位で保存しておきたい • 列の⾮表⽰状態をユーザー単 位で保存しておきたい

業務システムでUIデザインで注意すべきポイント 46 l ユーザーの記憶に頼らない l バリデーションエラーや確認画面など

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

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

改善ポイント⑤ ルール プラットフォームルール 49 l 肯定／否定ボタンの順序はプラットフォームのルールに従う Android Windows Mac iOS • WEBアプリの場合、WindowsとMacの両方の環境で動作することが多い。 • 業務システムを使うユーザー環境のほとんどはWindows環境。 • ユーザーが使い慣れているアプリケーションにもよるのでしっかり議論が必要

改善ポイント⑤ ルール ガイドラインルール 50

改善ポイント⑤ ルール ガイドラインルール 51 Material Design マテリアルデザインとは2014年6⽉にGoogleが発表した新しいデザインの概念

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

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

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

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

最後に 56

事例｜既存サービスのUX/UIデザイン改善 57 Client｜ITサービス（SaaS） Keyword｜UX/UIデザイン , 技術支援 SaaSのUX/UI改善により 新規契約数を⼤幅に増加。 お客さまの課題 | 国内トップシェアを誇る勤怠管 理サービスを展開しているものの、UX/UIに優れ た後発サービスと無償期間中に⽐較されること で、失注するケースが増えていた。 ソリューション | UXデザインのプロセスを経て、 ビジュアルやUIを刷新。⼀次リリース後にユー ザーインタビューを⾏い、⼆次リリース時には更 に改善を進めた。また、デザインガイドラインの 整備や開発における技術⽀援などのスキルトラン スファーも実施。結果的に新規契約数を70％増加 させることができた。 NCDCの役割 | 現状の画⾯遷移やUI分析に加え、 競合製品との⽐較、実装⾯での調整などUX/UIデ ザイン改善プロジェクトを統括。将来的に⾃社内 で機能追加やデザイン改善などを完結できる環境 構築までを⽀援した。

事例｜システム内製化のためのUX/UIデザイン研修 58 Client｜メーカー（船舶関連） Keyword｜UX/UIデザイン 業務⽤システムのUX/UIデザイ ンを学ぶワークショップ お客さまの課題 | 業務⽤システムを⾃社開発した が、UX/UIが⼗分に考慮されておらず操作性に課 題があった。また、社内に「UXデザイン」という 考え⽅が浸透しておらず、⾃社での改善は難しい 状態だった。 ソリューション | １DAYワークショップを開催し、 UXデザインの基礎講座からユーザー視点を取り⼊ れた画⾯設計（ワイヤーフレーム）の作成体験ま で実施。UXデザインの考え⽅の浸透とUI改善の具 体的な⼿法の習得の双⽅を実現した。 NCDCの役割 | 業務システムの⽤途や役割を理解 した上でオリジナルの研修を企画。ワークショッ プ終了後には、NCDCのUX/UIデザイナーによる ワイヤーフレームのブラッシュアップ及び、UIデ ザインのサンプル作成まで実施。

[email protected] www.ncdc.co.jp