UI/UX改善の進め方
概要
最近UI/UXの改善方法についていろいろ調べたので、学んだ知識を以下にまとめていきます。
UI/UX改善
UI/UXは以下のプロセス改善を行うことで、よりよいUIを作ることができます。ただ、下記を順序よく行う必要はなく、それぞれ現場の課題に合わせて対応しておくべきと思っています。
また、良いUI/UXは時間とともに変化するので、一定期間ごとにUIを変更することをお勧めします。（古いUIでも問題ないこともありますが、現状UIを変更せずに売れている商品はほとんど見かけることはないと思います）
1．作りこむ
最初の工程はUI/UXを作りこむ工程です。主に要件定義などの開発初期に、「どのようなUIを作り、どんなUXを提供するのか」、を考えていきます。
行うことは、
①ユーザーの分析
②ワイヤーフレームやプロトタイプ等の作成
③UX概念との比較
④デザインガイドラインとの比較
の4つに分かれます。
①ユーザーの分析
ユーザの分析には、主に以下の手法を用いて行います。
ペルソナ
利用する製品・サービスのターゲットユーザーを具体的な人物像としてまとめたもの。年齢、性別、趣味などの個人情報や、どんな時に製品を利用しているか、などの利用状況を分析します。
そして、ペルソナに合わせてUIを変更したり、またペルソナと一致する人材にユーザーテストを行ってもらいます。
カスタマージャーニーマップ
製品・サービスを利用する顧客が、様々な動作を行いどのような体験をしているのか、を時系列に沿って一枚絵で表現したもの。
UIデザインの教科書 より引用
大まかな1枚の図に表し、それぞれの動作を順次作成することでユーザに沿ったUIを作成します。
②ワイヤーフレームやプロトタイプ等の作成
ユーザーがある程度分析できれば、次にどんなUIがいいか初期の画面を作成します。この時、プロトタイプ作成用のツールを用いることで、プロトタイプ作成の時間短縮を図ります。
ツールの中には無料で利用できるものもあるので、自分に合ったツールを使ってみるといいと思います。
(FigmaがAdobeに買収されたのことで、Figmaが今後なくなるかも。。。)
-
Sketch
https://www.sketch.com/ -
Prott
https://prottapp.com/ja/ -
inVison
https://www.invisionapp.com/ -
Origami Studio
https://origami.design/
③UX概念との比較
UXには様々な概念を定義しているものがありますので、それらと開発するシステムの目的を比較することで、よりよいUXへつなげていきます。
- UXハニカム
ユーザーにとって「価値ある体験」を、6つの評価軸で分類したもの。
デザインガイドラインとの比較
デザインガイドラインの比較では、大手の会社が公開しているガイドラインを確認し必要なポイントを取り込んでいきます。
-
マテリアルデザイン（Google）
https://material.io/design -
Human Interface Guidelines（Apple）
https://developer.apple.com/jp/news/?id=yyz8lqtw -
Microsoft Design（Microsoft）
https://www.microsoft.com/design -
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/
2．検証する
2番目は作成したUIが目的通りになっているか、検証する工程になります。ここでは、実際に利用するユーザー（もしくは想定するユーザー）に集まってもらい、利用感を確認していきます。
※想定するユーザーをモニター会社に依頼し、集めても問題ありません。
A/Bテスト
特定の要素を変更したAパターン、Bパターンを作成し、ランダムにユーザーに表示させる。そして、それぞれの成果を比較することで、より高い成果を得られるパターンを見つける手法。
Aパターン、Bパターンのデザインを大きく変更していると、なぜAもしくはBが得ればれたのか理由付けができなくなるので注意が必要。
ユーザーインタビュー
ユーザーに質問を投げかけ、情報収集していく手法。
-
半構造化インタビュー
事前に時間配分や質問事項をまとめておく。ただし、実施中に会話の流れによっては、質問の順番を変えたり、詳細な質問を行ったりする手法。 -
デブスインタビュー
質問者とユーザーが1対1の面談形式で行う手法。1人のユーザーに対して詳しく質問することで、サービスにまつわるエピソードやその人の日常を聞き出す。 -
グループインタビュー
5～6名の小グループで座談会形式で進めていく手法。ユーザー同士ならでは話題が出ることもある。会話の内容は発言の態度から、サービスの課題や存在的なニーズを確認する
ユーザーテスト
ターゲットのユーザー（1．で求めたペルソナでも可）に対象のシステムを使ってもらい、行動や発言を観察する。そして、システムの問題点やユーザの心理を割り出す手法。
また、ヤコブ・ニーセン氏の実験によって、ユーザーテストは5人の実施でも十分な結果が得られる、と言及されています
Why You Only Need to Test with 5 Users より引用
エキスパートレビュー（ヒューリスティック評価）
UI/UXの専門家に、ユーザーの立場でテストを行ってもらう方法。
3．分析する
作成したUIをリリースしたが、それが想定通りになっているか確認する必要があります。そのため、以下のようなツールを用いて、ユーザーの操作を分析します。
※ここで再度ユーザーインタビューを行ってもいいです。
また、すべてのユーザー操作を取得すると膨大な量となりますので、①で分析したユーザー像に沿ったデータを取集します。
-
ヒートマップ
ユーザーが画面上でどのような操作を行ったか、可視化・分析できるツールのこと。温度センサのように、ユーザの操作部分を可視化できるのが特徴。 -
グーグルアナリティクス
Googleが無料で提供している分析ツール。ユーザーがどのくらいアクセスしたのか、どの端末（PC
PC、スマホなど）からアクセスしたのか、などを分析できる。
失敗談
以下UI/UXを改善する中で起きた失敗談を記載していきます。
急にUIを変えようとする
些細なUIでも開発意図があって実装されているので、急にUI変えると周りから反発を食らうことがあります。
そのため、急なUI変更を行い想定外のステークホルダーから中止が出ることがありました。また、顧客側も使いにくいUIではあるが、長年そのUIに慣れてしまったため反発がくることがありました。
読みにくいコードを直すな！と同じで、使いにくいデザインでもユーザーがそれ慣れてしまうと、最適なデザインとなっていることもあります。
※読みにくいコードでもそれが売れるシステムのコードであれば、安易に直すことで障害を招き、ビジネスの損失につながる恐れがある。
ステークホルダーを特定できない
ユーザの分析を行い必要なUIを作成していたのですが、上司の方から変更命令が下ることがありました。
その結果、
- 上司の想定するUIとなっていないことから修正するように依頼が来た。
- 修正すると想定したユーザの使い方になっていなかった。
- さらに修正すると、誰のためのUIかわからなくなった。
という負の連鎖に巻き込まれることになりました。
そのため、UI/UXを考える際はステークホルダーとなりそうな人はあらかじめ最初に集め、目的や方向性を合意しておくべきと思います。
※UIは利用するユーザーすべてに影響があるため、想定以上にステークホルダーが多いことがあります。
Discussion