UI/UXテストの進め方

# 1．概要

現在、現場でUI/UXに対する需要が高まっており、「どんなUIを作成すればUXを向上できるのか」、を問われる機会が増えてきました。

そのため、UI/UXについてどのようなテストを行えば効果的なのかいろいろ調べてみましたので、その結果を以下にまとめていきます。

# 2．テストの概要

UIをテストする方法は大きく以下の方法があります。

- **デザインガイドラインと比較**
大手が作成しているガイドラインを参考にテストを行う

- **ペルソナとの比較**
自社のサービスを利用するユーザー像と比較することでテストを行う

- **UXの概念からテストケースを作成**
UXハニカムなどの概念図から必要なUIを想定しテストを行う

- **ユーザーにテストしてもらう**
ユーザーテスト等の実際にユーザー自身に動かしてもらいテストを行う

# 3．デザインガイドラインと比較

デザインガイドラインとの比較は、各大手が採用しているデザインの見本をもとに、それに沿っているかどうかでテストを行っていきます。

各デザインのガイドラインを読み込み、「○○の場合、△△とする」という考えが多くありますので、それ通りになっているかをテストケースとして作成します。

:::note warn
注意
事前に上流からガイドライン通りのUIを作成していないと、不具合報告が多発する。
:::

### 参考資料

- マテリアルデザイン（Google）

https://material.io/design

- Human Interface Guidelines（Apple）

https://developer.apple.com/jp/news/?id=yyz8lqtw

- Fluent Design(Microsoft)

https://www.microsoft.com/design/fluent/

- Aribnb Design

https://airbnb.design/

- IBM Design

https://www.ibm.com/design/

- Lightning Design System(Salcefoce)
 
https://www.lightningdesignsystem.com/

- Atlassian Design System(Atlassian)

https://atlassian.design/

- Polaris(Shopify)

https://polaris.shopify.com/

# 4．ペルソナとの比較

ペルソナとは、利用する製品・サービスのターゲットユーザーを**具体的な人物像**としてまとめたもの。年齢、性別、趣味などの個人情報や、どんな時に製品を利用しているか、などの利用状況を分析します。

また、作成したペルソナ像をもとにユーザーが起こす考え、動作等をカスタマージャーニーマップなどにまとめて分析することもあります。

以下カスタマージャーニーマップのサンプル

<img width="500" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/547663/2b51c17b-564e-0024-db9b-b244eca69654.png">

[Web制作者のためのUXデザインをはじめる本 ユーザビリティ評価からカスタマージャーニーマップまで](https://www.amazon.co.jp/Web%E5%88%B6%E4%BD%9C%E8%80%85%E3%81%AE%E3%81%9F%E3%82%81%E3%81%AEUX%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E3%82%92%E3%81%AF%E3%81%98%E3%82%81%E3%82%8B%E6%9C%AC-%E3%83%A6%E3%83%BC%E3%82%B6%E3%83%93%E3%83%AA%E3%83%86%E3%82%A3%E8%A9%95%E4%BE%A1%E3%81%8B%E3%82%89%E3%82%AB%E3%82%B9%E3%82%BF%E3%83%9E%E3%83%BC%E3%82%B8%E3%83%A3%E3%83%BC%E3%83%8B%E3%83%BC%E3%83%9E%E3%83%83%E3%83%97%E3%81%BE%E3%81%A7-%E7%8E%89%E9%A3%BC-%E7%9C%9F%E4%B8%80/dp/4798143332)　から引用

# 5．UXの概念からテストケースを作成

UXには様々な概念モデルがありますので、それを参考にしながらテストケースを作成していきます。（ただし、概念であるため具体的なテストケースに落とすには高い技術力が必要）

- UXの5段階モデル
<img width="500" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/547663/011f3274-7cd3-179b-5fb1-d1c4122661ef.png">

[UXデザインにおける5段階モデルとは？](https://goodpatch.com/blog/elements-of-ux)から引用

- UXハニカム
<img width="500" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/547663/7e43e4ba-d24b-b704-ecbc-53a69cc051eb.png">

- UXピラミッド

<img width="500" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/547663/f0e440fb-bc27-15a3-4e41-6be4f4ff7650.png">

[UIデザイン　みんなで考え、カイゼンする。](https://www.amazon.co.jp/UI%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3-%E3%81%BF%E3%82%93%E3%81%AA%E3%81%A7%E8%80%83%E3%81%88%E3%80%81%E3%82%AB%E3%82%A4%E3%82%BC%E3%83%B3%E3%81%99%E3%82%8B%E3%80%82-%E6%A0%84%E5%89%8D%E7%94%B0-%E5%8B%9D%E5%A4%AA%E9%83%8E-ebook/dp/B07PQF8TBW/ref=sr_1_4?__mk_ja_JP=%E3%82%AB%E3%82%BF%E3%82%AB%E3%83%8A&keywords=UI%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3+%E3%81%BF%E3%82%93%E3%81%AA&qid=1663045081&sr=8-4)より引用


# 6．ユーザーにテストしてもらう

### ユーザーインタビュー
ユーザーに質問を投げかけ、情報収集していく手法。（テストとしても実施できる）

- 半構造化インタビュー
事前に時間配分や質問事項をまとめておく。ただし、実施中に会話の流れによっては、質問の順番を変えたり、詳細な質問を行ったりする手法。

- デブスインタビュー
質問者とユーザーが1対1の面談形式で行う手法。1人のユーザーに対して詳しく質問することで、サービスにまつわるエピソードやその人の日常を聞き出す。

- グループインタビュー
5～6名の小グループで座談会形式で進めていく手法。ユーザー同士ならでは話題が出ることもある。会話の内容は発言の態度から、サービスの課題や存在的なニーズを確認する

### ユーザーテスト
ターゲットのユーザーに対象のシステムを使ってもらい、行動や発言を観察する。そして、システムの問題点やユーザの心理を割り出す手法。

また、ヤコブ・ニーセン氏の実験によって、**ユーザーテストは5人の実施でも十分な結果が得られる**、と言及されています。

<img width="500" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/547663/2aaaec0c-dba9-563b-c1ba-6c11c787c785.png">

[Why You Only Need to Test with 5 Users](https://www.nngroup.com/articles/why-you-only-need-to-test-with-5-users/) より引用

### エキスパートレビュー（ヒューリスティック評価）
UI/UXの専門家に、ユーザーの立場でテストを行ってもらう方法。

# 7．参考資料

https://www.slideshare.net/storywriterjp/ux-ux-4

https://yasuhisa.com/could/article/crafting-your-goals/