UXを要求仕様化するアプローチと、最適化し続けるプロセスの取り組み

派生開発推進協議会 T4研究会(＋T6研究会コラボ)
堀川 透陽© 2023 派生開発推進協議会 T04,T06研究会

背景～ユーザビリティ/UXの品質プロセスを見直す
使用性と呼ばれるユーザビリティ/UXの品質は、他の品質特性と大きく異なる性質を持っている。
• プロダクト/サービスを利用するすべてのユーザーの満足の完全・完璧は定義できない• 揺らぎを持つ性質(トレンドに影響される、ユーザ自身のメンタリティにも左右される)• 評価が難しい
作り込みと評価の難しさから、開発プロセスとしてはウォーターフォール型よりアジャイル開発で考えていく方が良い。
完全を定義できない
上流工程での難しさ

テストまでのタイムラグで価値が変化する可能性

要件定義
基本設計

詳細設計
コーディング

受け入れテスト・ 開発のリソース不足の中での優先順位の低さ
・ 評価の難しさ

システムテスト
結合テスト

単体テスト

上記を踏まえ、これまでのユーザビリティ/UXの品質作り込みプロセスを見直し、以下の実現を試みた。

• 作り込みの難しさへの対策 ＝ リリースタイミング毎の最適を提供する• 評価の難しさの解消① ＝ ユーザビリティ/UXを評価するための観点作り• 評価の難しさの解消② = 提供側と利用側のギャップを埋める© 2023 派生開発推進協議会 T04,T06研究会

Section.1

ユーザビリティを最適化し、UXを評価するプロセス© 2023 派生開発推進協議会 T04,T06研究会

ユーザビリティを最適化し、UXを評価するプロセス（全体）ユーザビリティ/UXの品質を作るプロセスにはウォーターフォールモデルは不向きであるため、アジャイル開発を前提としたプロセスを検討する。
また、本提案のプロセスは「ファーストリリースまで」と「ファーストリリース以降」に分けて説明していく。

比較
あるべき姿
(上位要求)の定義

開発内部

ユーザテスト

要求仕様(UX-USDM)

要求仕様(UX-USDM)

ファースト・リリース

プロトタイプ

利用者

プロダクト・イメージの戦略立案

プロダクト・イメージの収集
2nd リリースへ

デザイナー

比較
© 2023 派生開発推進協議会 T04,T06研究会

4ユーザビリティを最適化し、UXを評価するプロセス（前半）◼ ファーストリリースまで
・ プロダクトのフロントエンド/バックエンドの開発スプリントと別に、UXスプリントを設定する
・ ユーザビリティ/UXに特化した品質観点を踏まえたエキスパートレビューを実施する
・ エキスパートレビューの結果から、提供側はプロダクト/サービスの“UXのあるべき姿”を定義する・ “あるべき姿”に近づくための要求仕様を策定する
・ プロダクト全体の印象＝プロダクト・イメージを提供側の戦略として持つあるべき姿(上位要求)の定義

エキスパートレビュー

UXの評価基準となる

要求仕様(UX-USDM)

開発内部

プロダクトリアクションカード・メソッド

プロトタイプファースト・リリース
プロダクト・イメージの戦略立案

デザイナー© 2023 派生開発推進協議会 T04,T06研究会

5ユーザビリティを最適化し、UXを評価するプロセス（後半）◼ ファースト・リリース以降
・ ユーザテストは、エキスパートレビューと同内容のUX観点を用いて実施する
・ 提供側の”UXのあるべき姿”とユーザテストの結果を比べ、ギャップを埋めるべくUX要求仕様を再策定する
・ ユーザが持つプロダクト・イメージを収集し、提供側の持つイメージとのギャップを理解する
・ 仕様の変化がイメージの変化に与える影響を分析する

比較あるべき姿(上位要求)の定義

ユーザテスト

要求仕様(UX-USDM)

要求仕様(UX-USDM)

ファースト・リリース

利用者

プロダクト・イメージの戦略立案

プロダクト・イメージの収集
2nd リリースへ比較© 2023 派生開発推進協議会 T04,T06研究会

Section.2

ユーザビリティ/UXを評価する観点© 2023 派生開発推進協議会 T04,T06研究会

ユーザビリティ/UXの観点
ユーザビリティ/UXの観点は、体と心の両面から、さらに人の多様性といった広い視点から考慮しなくてはならない。
イメージ

プロダクト/サービス全体に対して漠然と抱く印象・心象深層的に影響を与えている可能性があるが、原因の特定が難しい（心・気持ち）┏━━━━━━━━━━━━━━━━┓┏━━━━━━━━━
体の一部と紐づいて得られる表面的な満足度合い

多様性の考慮

アクセシビリティ

認知性 : 頭操作性 : 手足
快適性 : 全体

© 2023 派生開発推進協議会 T04,T06研究会━━━━━━━━━━┓ユニバーサルデザイン

リテラシ格差エキスパートレビューの観点とUXの”あるべき姿”の定義
エキスパートレビュー/ユーザテストの観点として、UIの評価手法である構造化ヒューリスティック評価法(sHEM)のカテゴリを使用した。
構造化ヒューリスティック評価法は、人間工学的、認知的、感性的、ユニバーサルデザインの側面から構造的に整理され、それぞれに具体的なチェック項目が多く示されている。
この手法は1997年発表であるため、今回の取り組みに際してはテーラリングしたチェックリストを作成した。
作成したチェックリストを開発内部でエキスパートレビューに用いて、UXの”あるべき姿”を定義した。
構造化ヒューリスティック評価法（ｓHEM） ※抜粋
ヒューリスティック・カテゴリ
快適性(Comfort)

操作性(Operability)

UXレビュー
チェックリスト

要/不要

感想・懸念・指摘事項“あるべき姿”(上位要求)

例：記事投稿の説明は投稿者目線、管理画面では管理者目線が望ましい。

要

操作ステップが多い投稿画面の説明は、ゴールまでのステップを明示し、挫けない対策がいるのではないか。

投稿者が投稿完了まで挫けないよう励ましのメッセージを表示する。

2. 寛大性…

…

…

…

1．身体適合…

…

サブカテゴリ
1. 主体性

認知性(Cognitive)

1.平易さ(知覚関連)…

リテラシ(Literacy)

1.初心者一般…

アクセシビリティ

１．視覚障害…

(Accessibility)

レビュー対象のエキスパートレビュー実施結果

レビュー対象にテーラリングしたチェックリストを作成…
…

…
チェックリストを基に、開発工程ではエキスパートレビュー、リリース後はユーザテストを実施する…

アクセシビリティについては、ウェブコンテンツアクセシビリティガイドライン(WCAG)の適合要件も参考に検討する© 2023 派生開発推進協議会 T04,T06研究会…

…
…

エキスパートレ
ビューの結果を基に最善のUXとなる”あるべき姿”を定義する

プロダクト・イメージの獲得アプローチ
ユーザビリティ/UXの品質には、特定の箇所での良し悪しだけでなく、サービス/プロダクトを全体で漠然と捉えることもある。
例えばブランドイメージといった”イメージ”や、「古臭い」といった具体的ではなく全体の漠然とした”感覚”がそれにあたる。
このUXの測定にはMicrosoftが公開している「プロダクトリアクションカード・メソッド」を使用した。
これは事前に用意された単語群をユーザが選択することで印象を測るもので、実施も容易である。
表：単語リスト

言語化したイメージ群•

より直感的なイメージを測定できるよう、単語数は元の118単語から10～20程度に絞り込む•

単語毎に[Positive][Negative][Neutral]の属性を付ける•

このサービス/プロダクトに最も選んでほしいイメージ[Best]を開発チーム/QAで合意する•

ユーザへのヒアリングや、アンケートフォームを埋め込み、リリース毎に集計し、分析する© 2023 派生開発推進協議会 T04,T06研究会

プロダクト・イメージのモニタリングと改善・評価
プロダクト・イメージはリリースと共にモニタリングし、提供側が望むイメージに近づいたかが評価指標となる。

<読み解き方の例>
Ver１．２～２．１にかけて、Negativeの割合が増加し、Best単語の選択数が減少している。
⇒ イメージが劣化した

原因分析
イメージの上下と仕様変更を紐づけ、最適なUXにするためのUI仕様を仮説を基に改善していく。
(例) [仮説]Webサイトの背景色を赤基調にすると、Positiveのイメージが上がる© 2023 派生開発推進協議会 T04,T06研究会

Section.3

ユーザビリティ/UXの要求仕様化© 2023 派生開発推進協議会 T04,T06研究会

UX-USDM～ユーザビリティ/UXを要求仕様化する
USDMを用いてユーザビリティ/UXを要求仕様化するにあたっては、トレンドやユーザの変化によってUXも変わり、最適なユーザビリティも変わる/ことを前提とし、要求の追従性を考慮する必要がある。
実装TM※従来のExcelベースのUSDMの場合
要求方針： 提供側の意図を実現するための“あるべき姿”
要求(要件)： 要求方針を満たすであろう設計方針
仕様： 要求を実現するための具体的な実装

要求・仕様No

快適性 主体性リリース

UI/Front End

CF01

1.0

○ ○ ○ ○ ○ ○ ○ ○1.1○ ○ ○ ○ ○ ○ ○ ○1.1○ ○ ○ ○ ○ ○ ○ ○-aサイトやページの説明は各ページのファーストビューに収まる箇所に設置し、ユーザーの目に入れる。

CF01_a01サイト紹介に遷移するリンクバナーを640*100ピクセルで、トップページ左上部に設置する。

Back End

ホ ンイ社
ー ン員
ム フ紹
ォ介メーショ

要求方針サイトや各ページの意図をユーザー目線で伝える。

注介 最社
目 新長の 技の人 術部
材 研屋
究
紹

おて 当 管
問 サ理
い イ者
合 ト画
わ に面
せ ついVerヒューリス
ティック・カテゴ
リ

投稿
記事作
成アクセス
制御

従来のUSDMとの違い[要求方針]は[理由]にあたる。
要求(右表ではCF01,CF02)の変化に追従し、見やすいフォーマットにするため、理由を最上位に配置している。

-bファーストビューに大きいリンクバナーが煩わしい。

リンクバナーをクリックしないとサイトの説明が読まれないのはユーザーに余計な操作を増やす点を改善したい。

CF01_b01[追加]各ページのタイトルをマウスオーバーすると、ツールチップで説明を出す。
CF01_b02[変更]リンクバナーをスカイスクレイパータイプの一般的な大きさ：320*100ピクセルに変更する
寛大性

要求方針エラー時にユーザーが混乱に陥るのを防ぐ。
CF0２-aエラーメッセージはエラーの原因と合わせて解決策を表記する
CF02_01※T.B.D
要求方針投稿記事の作成がシステム上、慣れが必要であるため、初めて使用する新卒社員、操作を忘れたベテラン社員に配慮する。

認知性 習熟性

CG0１

T.B.D

-a記事投稿作業のガイドを必要な場所に設置し、記事投稿作業に挫折させない。
CG0１_01記事投稿作業のガイドを動画にし、ページに埋め込む○© 2023 派生開発推進協議会 T04,T06研究会

変化する要求の追従性について[要求方針]を満たすと判断し策定した要求は、リリース後のユーザ評価の結果によっては変更や削除、新たな機能追加が発生する。
右表では、 -a <A案>をVer1.0でリリース後、思ったユーザ評価を得られなかったため、-b <B案>を要求とし、Ver1.1でリリースする。
○

UX-USDMをグラフィカルに表現する
Excelに捉われず、グラフィカルに表現できるモデリングツールを用いるとレビュー容易性の高い運用が可能になる。
あるべき姿(上位要求)記述エリア

UIコンテナWebデザイン/UI

要件記述エリア仕様記述エリアUX-USDMの最適な表現方法は今後の課題として引き続き取り組んでいく。
© 2023 派生開発推進協議会 T04,T06研究会

課題とまとめ
本発表で提案したプロセスやアプローチの実際のプロジェクトへの導入は現在進行形であり、以下の課題を残している。
❖ デザイナーとの連携
デザイナーのUX要求仕様への理解と協力に向けて進めていく❖ ユーザテストの導入
ユーザテストの進め方、広く声を集めるための手段など❖ UX-USDMのブラッシュアップ
仮説要求を繰り返した結果、最初の案が最善といったケースの表現方法、など❖ プロダクト・イメージと仕様の関係性
仕様のUI要素がプロダクト・イメージに直接的に影響するかは、データを集めてみないとわからない◆ 最後に
本発表は、QAが課題にしつつも議論や研究が少なかったUXに対して、一つの具体的手法を提示できた。
アプローチ自体は既存技術の応用で、誰でも容易に取り組めることを考慮した。
多くの人に参考にして頂き、UXへの議論を深めるきっかけになれば幸いである。
© 2023 派生開発推進協議会 T04,T06研究会