利用者が離れないUX/UIデザイン 長く使われる業務アプリデザイン のポイント 2024/10/30 NCDC株式会社

講師紹介 2 UI/UXデザイナー 福田貴博 東京造形大学 造形学部グラフィックデザイン専攻卒業 ホテル予約アプリ等、コンシューマー向けサービスを中心 にUIデザインの経験を積んだ後、より多くの新規事業サー ビスのUX/UIデザインを手掛けたいと思い、NCDCに参画。 NCDCでは建築現場の資材管理システムのUX/UIデザインシ フト管理システムのデザインコンサルティングなど 幅広い領域を担当。

NCDCのご紹介

Business 新規事業立ち上げからの伴走 業務改革やIT改革の支援 Design ユーザ視点での設計 Technology 技術による課題解決 Innovation Consultant デザイナーやエンジニアと協力して、 新規サービス立案の支援や新規性の高 いシステムの要件定義を行う。プロ ジェクト全体のマネジメント役も担う。 UX/UI designer UIデザインはもちろん、デザ イン思考やUXデザインのフ レームワークを用いて上流工 程（サービス全体のUX設計） を担う。 Engineer モバイルやWeb、クラウド、 IoTやAIなど、新しい領域の技 術に特化。つくるだけでなく 技術コンサルティングができ る知見を持つ者も多数在籍。 ⚫ AWS サービスパートナー ⚫ AWS Lambdaパートナー ⚫ 内製化支援推進AWSパートナー Tech×Design×Biz 一体でお客さまを支援 ⚫ 3領域でサービスを展開 ⚫ 各領域のスペシャリスト を社内に揃える体制 4

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

⚫ 長期的な視点を持ち、お客さまと一緒に考え、そのプロセスも財産としていただく伴走型 の支援を得意としています。 ⚫ システム開発においても、内製化の体制構築支援からエンジニア・デザイナーなど専門職 のスキルトランスファーまで多数の実績があります。 お客さまが主役となるプロジェクト設計 6 お客さま デジタルビジネスを 強みにできる企業を目指す 必要なものを自らつくり、 改善し続けられる 体制の整備、技術の獲得 ユーザーのインサイトや テクノロジーを理解して 企画できる知識の獲得 外部依存せず、社会の変化や技術の進化に対応し、自走できるチカラの獲得 コンサルティングや研 修、ワークショップ スキルトランスファー お客さまの目的に応じた 伴走支援のご提案 豊富なDX支援経験により 蓄積されたノウハウ DX戦略策定、PoC、 新規デジタルサービス企画、 UX/UIデザイン、 アジャイル開発、DevOps、 システムのモダナイズ…

目次 7 1 業務アプリにおけるユーザー離れの原因とは？ 2 3 使いやすさを決定づける機能の絞り込みや情報の整理 快適な操作感につながる具体的なデザインのポイント 4 プロトタイプやPoCを活用したユーザービリティの検証 5 まとめ 最後に10〜15分ほど質疑応答の時間を設けます

業務アプリにおけるユーザー離れの原因とは？

業務アプリにおけるユーザー離れの原因とは？ 9 学習コストの高さが原因かもしれません 利用者からの評判が悪い せっかく業務アプリを開発したのに うまく使ってもらえない… … 弊社に改善をご依頼してくるお客様からよくきく話

業務アプリにおけるユーザー離れの原因とは？ 10 不満があるまま使い続け 作業効率が落ちる 過去の慣れた方法に戻り 使わないで業務を行う 作業効率や正確性に直結するため 学習コストの低いことが業務アプリには求められる 業務アプリは専門性の高い複雑な機能が多く 学習コストが重くなりがち ユーザーの反応は大きく２パターン

業務アプリにおけるユーザー離れの原因とは？ 11 なぜ学習コストが重くなるのか？ 理由は様々ですが…… 1 重要な機能と補助機能の切り分けができていない 2 機能の説明が不足、または直感的な操作ではない 3 プロトタイプ検証ができておらず、実態とあっていない こうしたデザインの問題を解決することで 利用者に長くつかってもらえる業務アプリにできる

使いやすさを決定づける機能の絞り込みや情報の整理

使いやすさを決定づける機能の絞り込みや情報の整理 13 重要な機能 迷わずすぐにアクセスでき るような目立つ配置に 補助的な機能 必要なときにのみアクセス できる目立たない配置に ユーザーが状況によって必要としている機能を特定し それを適切にデザインをすることが大切 機能が多い業務アプリではどう機能を配置するかが 使いやすさに大きく作用する ではどうやってユーザーにとって重要な機能を見分けるのか？

使いやすさを決定づける機能の絞り込みや情報の整理 14 重要な機能を見分けるための４つの手法 各手法をメリットとデメリットを踏まえて解説します 1 ユーザーインタビューと観察 2 ユーザーストーリーマッピング 3 データ分析と行動ログの活用 4 ペインポイント分析

使いやすさを決定づける機能の絞り込みや情報の整理 15 ユーザーインタビューと観察 直接ユーザーにインタビューを行い、どの機能が日常的に役立 っているか、どの機能が不要かを確認する。ユーザーが実際に 業務でアプリをどのように使っているかを観察し、利用頻度の 低い機能や混乱の原因を特定する。 メリット ユーザーの生の声や利用状況が直接わかり、実際の業務に即した機能要件が明 確になる。業務フローや具体的な課題を知ることで、機能の優先度が決定しや すい。 デメリット 時間がかかるうえ、人数が少ないと偏った結果が出やすくなる。また、ユーザ ーが本音を伝えていない場合もあるため、解釈が難しいこともある。

使いやすさを決定づける機能の絞り込みや情報の整理 16 ユーザーストーリーマッピング ユーザーの業務フローを整理し、重要なステップに沿って必要 な機能をマッピングする。業務にとって必須な機能と優先度の 低い機能が図として明確になる。 メリット ユーザーの業務フローに沿って必要な機能が整理できるため、業務に直結する 機能が把握しやすい。また、図になるためチーム内での意思疎通が容易。 デメリット 業務が複雑であるほどマッピングが複雑になり、時間と労力が必要になる。全 体のストーリーを組み立てる際に漏れが発生すると、必要な機能を見落とすリ スクがある。

使いやすさを決定づける機能の絞り込みや情報の整理 17 ユーザーストーリーマッピングの例

使いやすさを決定づける機能の絞り込みや情報の整理 18 データ分析と行動ログの活用 ユーザーの行動データを分析し、どの機能が頻繁に利用されて いるか、逆にあまり使われていない機能がないかを定量的に把 握。実際の利用傾向をもとに判断できる。 メリット ユーザーの実際の利用頻度をもとに機能の重要度を客観的に判断でき、感覚や 推測に依存しない。また、行動パターンの把握により、機能の改善にもつなげ やすい。 デメリット データの収集や分析には専門的なスキルとツールが必要。また、数字だけでは なぜその行動が起きたかを判断できないこともあり、データの裏にある背景を 理解する必要がある。

使いやすさを決定づける機能の絞り込みや情報の整理 19 ペインポイント分析 アプリやサービスを使う中で感じる「お金を払ってでも解決し たい問題」であるペインポイント（痛みのポイント）をユーザ ーの意見から特定し、それらを解決することで、ユーザー体験 を向上させる。 メリット ユーザーが実際に感じている問題を解決するための機能に集中でき、業務効率 の改善につながる。効果が明確で、ユーザーの満足度を向上させる機能を優先 的に見極めやすい。 デメリット 個々のユーザーの課題が具体的すぎると、他のユーザーにはあまり有効でない 機能を実装してしまうリスクがある。また、短期的な課題にばかり集中してし まうと、長期的な課題が後回しになる可能性がある。

使いやすさを決定づける機能の絞り込みや情報の整理 20 それぞれの手法で向き不向きがあります。 分析を行う際には状況にあわせて 適切な分析を使い分けましょう！ 複数の手法を組み合わせるのも効果的です。

快適な操作感につながる具体的なデザインのポイント

快適な操作感につながる具体的なデザインのポイント 22 そもそも使いやすいアプリとはなんなのか？ 定義は様々あると思いますが…… ユーザーがわからなくなった時に 先回りして手助けをしてくれるアプリ 機能が複雑であったとしても、フラストレーションが 少なければユーザーは不満を感じにくい

快適な操作感につながる具体的なデザインのポイント 23 快適な操作感につながる ４つのデザインのポイント 1 適切なオンボーディング 2 ユーザーが予想する動作に沿ったインターフェース設計 3 操作に対するフィードバックで安心感を与える 4 操作ミスを防ぐ「保険」の機能 他にもたくさんありますが、幅広く業務アプリでつかえるものにしぼっています

快適な操作感につながる具体的なデザインのポイント 24 適切なオンボーディング 使い方が理解できるように、簡潔かつ効果的なガイドやチュー トリアルを提供する。初めてのユーザーや迷ったであろうユー ザーに対して案内を表示することが重要。 サービス初回利用時に表示される案内の例 何をすればいいのか 教えてくれるヘルプ

快適な操作感につながる具体的なデザインのポイント 25 ユーザーが予想する動作に沿ったインターフェース設計 ユーザーは、過去の経験から『こう操作すればこうなるはず』 と予想しながらアプリを使う。ユーザーの知識にある動作に沿 うことで学習コストを下げ、使いやすさを向上できる。 ハンバーガーメニューの例 ユーザーがもっている 共通知識を把握することが大事

快適な操作感につながる具体的なデザインのポイント 26 操作に対するフィードバックで安心感を与える ユーザーが行った操作に対して、アプリがフィードバックを行 い、何が起きているかを伝える。これがあることで、ユーザー は操作が正しく実行されたかどうかをすぐに確認でき、安心感 を持って利用し続けることができる。 ボタンを押した時に 処理中であることがわかる 処理に成功したか失敗したかがわかる 出典：SmartHR Design System

快適な操作感につながる具体的なデザインのポイント 27 操作ミスを防ぐ「保険」の機能 業務アプリでは、操作ミスが大きなトラブルを引き起こすこと があるため、あらかじめミスを予防する仕組みを入れる必要が ある。「元に戻す」機能や、誤った入力を簡単に修正できるUI は、ユーザーのフラストレーションを大きく軽減できる。 処理のキャンセルや 削除の取り消しができる 頻繁に変更がはいるアプリでは 一定回数まで操作を戻すことができる

プロトタイプやPoCを活用したユーザービリティの検証

プロトタイプやPoCを活用したユーザービリティの検証 29 プロトタイプ検証 デザインツールなどを用いて、ワイヤー フレームを基にインタラクティブなプロ トタイプを作成する。ユーザーフローや インターフェースが直感的かどうか、操 作性が問題ないかを検証。UI/UXを改善す るためのフィードバックを収集する。 PoC検証 技術的に難易度の高い機能や、未知の技 術を使用する場合はPoCを実施。PoCでは 、特定の機能が実際に要件通りに動作す るか、仮説どおりユーザーに価値を提供 できるかを短期間で検証する。 プロトタイプやPoCを生かして ユーザービリティの検証をおこなう 手間がふえるようにみえるが、長期的な目線では手戻りを少 なくし、質の高いサービスを提供することが可能

プロトタイプやP oC を活用したユーザービリティの検証 30 作成したプロトタイプやPoCを検証する方法の一例 ユーザビリティテスト 業務アプリのユーザーに「特定のデータを探して編集する」というテストシナリオで試して もらい、詰まりやすい箇所を記録する。このような具体的な行動分析によって、最も解消す べき問題を特定する。 ヒューリスティック評価 UX/UIの専門家がデザインを評価し、使い勝手の基準に沿って分析する。例えば、「ユーザ ーの認知負荷を増やしている要素はないか」「操作が分かりやすい構造か」といった視点で 、設計の改善点を明らかにする。 A/Bテスト 2つの異なるデザインを用意し、ユーザーがどちらを直感的に使いやすいと感じるかを比較 する。どちらが業務効率に貢献するか、実際の操作スピードやエラー回数を測定する。

プロトタイプやPoCを活用したユーザービリティの検証 31 検証したいユーザビリティを明確にしてから実施すること ポイント あれもこれも……とすると本当に検証したかった内容がわからなくなることがあります 1 ユーザーインタビューと観察 2 ユーザーストーリーマッピング 3 データ分析と行動ログの活用 4 ペインポイント分析 前述した分析手法からみつかった 「特に重要」と思われる機能に絞って分析する ことをオススメします。

プロトタイプやPoCを活用したユーザービリティの検証 32 プロトタイプやPoCはつくって終わりではなく 改善のサイクルを繰り返すことが重要 改善サイクルの一例 1 フィードバック の収集 ユーザーテストか らフィードバック を集め、実際の使 用状況を把握。 2 問題の特定 集めたフィードバ ックを分析し、具 体的な問題点や改 善が必要な箇所を 特定。 3 改善の実施 問題点の改善策を プロトタイプに反 映し、実際の改善 に取り組む。 4 再テスト プロトタイプを再 度ユーザーテスト にかけ、効果を確 認する。

まとめ

まとめ 34 1 ユーザーが一番必要としている機能を特定し、それを 中心に据えたデザインをする ユーザーインタビューやストーリーマッピングなどの手法を駆使して、ユーザーにとって 必要な機能と補助的な機能を抽出する。 2 ユーザーのフラストレーションを軽減するようなユーザビ リティ設計を行うことで長く使ってもらえるように ユーザーが迷った時に手助けとなるようなチュートリアルの提供や直感的になるユーザビ リティを導入することによって、ユーザーは作業効率が上がり、サービスをつかうように なる。 3 プロトタイプやPoCを作成し、改善のサイクルを素早く繰 り返す 「プロトタイプ」や「PoC」を作り、ユーザーに実際に使ってもらいながら、早期の段階 で課題を抽出し、改善を行う。このサイクルを何度も繰り返すことで、使いやすいデザイ ンに仕上げ、ユーザー満足度を向上させる。

まとめ 35 ありがとうございました！ 皆様のサービスが、ユーザーにとって使いやすく 長く利用されるものになるための一助となれば幸いです

No content