「ユーザー体験」という言葉を耳にしたことはありますか？デザインや、私たちが日常的に使うモノ・サービス・製品とユーザーとの関わりに興味があるなら、ここはまさにうってつけの場所です！
まずは目次を用意しました。興味のあるテーマにすぐ移動できます。さらに、ユーザー体験を高める要素の一例にもなっています 😉
HCIとUXは、テクノロジーとデジタルインタラクションが絶えず進化する現代において、ますます重要性を増している概念です。
ユーザーインターフェースデザインにおける最も重要な概念のひとつ、ヒューマン・コンピュータ・インタラクション（HCI）です。この学際的分野は人とコンピューターの相互作用の設計に焦点を当てており、パーソナルコンピューターの普及とともに1980年代に生まれました。
HCI以前、コンピューターは専門的な環境のためだけに設計されたツールであり、その利用は熟練した人々に限られていました。しかし パーソナルコンピューターが普及するにつれて、より経験の浅い人々に合わせてインタラクションを再設計する必要が生じました。こうしてUXが生まれたのです。 つまり「ユーザー体験」のことです。
しかし、ユーザー体験はデジタル製品やサービスに限定されず、ユーザーにポジティブまたはネガティブな体験を生み出す可能性のある日常的なオブジェクトやサービスにまで及びます。
ユーザー体験デザインは、製品とのインタラクションにおいてユーザー満足度を高めるために欠かせません。製品のユーザビリティとアクセシビリティを向上させ、ユーザーにポジティブな体験を生み出すことを目的としたプロセスです。 良いユーザー体験を得るには、製品が使いやすく、有用で、望ましく、アクセス可能であることが重要ですつまり、製品は使いやすく理解しやすいものでなければならず、ユーザーのニーズを満たし、魅力的なビジュアルデザインを持ち、ユーザーの制約にかかわらず誰もが使えるように設計されている必要があります。そのためには、UXデザイナーがユーザーの立場になって、その行動、動機、目標、困難、ニーズを理解することが欠かせません。
そのため、コンピューターとのやり取りはますます人と人との対話に近づくべきだという考えが広まりました。この考えはHCIとして形になり、その主な目的は直感的で使いやすいユーザーインターフェースをつくることでした。
優れたユーザー体験がもたらすメリット
ユーザー体験（UX）デザインから得られる5つのメリットは次のとおりです。
- 生産性の向上：優れたUXデザインにより、ユーザーはより効率的にタスクをこなし、時間と労力を節約できます。
- コスト削減：効果的なUXは、ユーザーサポートやトレーニング、エラー修正や問題解決にかかるコストを抑えられます。
- ユーザー満足度の向上：ポジティブなUXは製品やサービスに対するユーザーの満足度を高めることができ、顧客ロイヤルティとポジティブな口コミにつながります。
- ユーザーの効率と効果の向上：優れたUXデザインは、ユーザーが特定のタスクを実行する能力を高め、効率と効果を向上させます。
- ブランドイメージの向上：ポジティブなUXは、ユーザーのブランドに対する印象を良くし、前向きなイメージづくりとブランドへの信頼向上につながります。
UXデザインの全体像
ここまでの内容を整理して知識を定着させるために言えるのは、優れたユーザー体験を実現するには次の要素を満たすことが重要だということです。
- 使いやすさ：製品はシンプルで使いやすく、理解できるようにデザインされている必要があります。
- 有用性：製品はユーザーのニーズを満たすものでなければなりません。
- 魅力的であること：ビジュアルデザインは魅力的で、ポジティブな体験を生み出す必要があります。
- アクセシブルであること：製品やサービスは、個人が持つ制約にかかわらず、できるだけ多くの人が利用できるように設計されなければなりません。
UXデザイナーは、ユーザーの行動、動機、目標、困難、ニーズを深く理解するために、ユーザーの立場になって考える必要があります。成功するには、製品やサービスがユーザーに価値を生み出すことが欠かせません。
ユーザー体験デザインは、技術の変化やユーザーのニーズに適応しながら絶えず進化する分野です。使いやすく、役に立ち、魅力的で、ユーザーにポジティブな体験をもたらす製品やサービスをつくることを目指しています。
UXという言葉の父、ドナルド・ノーマン
1995年、ドナルド・ノーマンは「ユーザー体験（UX）」という概念を提唱し、ユーザー中心設計の歴史における最も重要な転換点のひとつとなりました。ノーマンは著名なユーザビリティの第一人者であり、コンサルタント、ニールセン・ノーマン・グループの共同設立者、認知科学の教授でもあります。その著書「誰のためのデザイン？」は、あらゆるデザイナーにとって欠かせない一冊とされており、ユーザーのニーズや関心に基づくユーザー中心設計を提唱し、製品を使いやすく理解しやすいものにすることに特に重点を置いています。
UXはユーザビリティではない
ユーザビリティとは、ユーザーが製品、システム、サービスとやり取りして目標を効率的かつ効果的に達成できる容易さを指します。ユーザー体験の基本的な要素であり、製品の使いやすさに焦点を当てています。
一方、ユーザー体験とは、製品やサービスとのインタラクション中にユーザーが持つすべての知覚、感情、態度、反応を指します。 ユーザー体験は、感情や個人的な満足など、ユーザビリティを超えた側面を含む、ユーザーの完全な体験に焦点を当てています。
Lean UXという手法
従来、ユーザー体験デザインのプロジェクトは要件と成果物に焦点を当ててきましたが、Lean UXはこの枠組みを変え、目的は成果物のドキュメントを作ることではなく、現実の世界に何かを変えることになります。Lean UXのアプローチは、実験、アイデアの素早い反復、インクリメンタルなプロセスの活用に基づいています。さらに、デザイン思考とアジャイルなソフトウェア開発手法という支柱の上に成り立っています。Lean UXの手法は、前提、仮説の策定と検証、結果の測定という3つの部分に分かれます。
Lean UXは、チームがより良い結果とより満足度の高いユーザー体験を生み出すのに役立つ革新的な方法論です。
デザイン思考
デザイン思考は、問題を解決し革新的なソリューションを設計するための創造的で協働的なアプローチです。ユーザーに共感し、問題を定義し、アイデアを出し、プロトタイプを作成し、最終的な解決策にたどり着くまで反復的にテストすることを含みます。
デザイン思考の簡単な例として、新しいおもちゃを設計する場合を考えてみましょう。まず子どもに共感して、そのニーズや願いを理解することから始まります。次に、どんなおもちゃを作れるかという問題を定義します。その後、光や音のついたおもちゃ、さまざまな形に変形するおもちゃ、楽しく動くおもちゃなど、いろいろな解決策を考えます。そして、最も有望なおもちゃのプロトタイプを作り、子どもたちに試してもらって感想を集めます。最後に、寄せられた感想をもとにデザインを改良し、おもちゃを市場に送り出します。
アジャイル
アジャイルは、コラボレーション、柔軟性、反復を通じて高品質な最終成果を目指すプロジェクト管理の手法です。各フェーズを順番に完了してから次へ進む従来のウォーターフォール型とは異なり、アジャイルは反復サイクルと、プロジェクトの小さな部分の頻繁なリリースに重点を置きます。
アジャイルの一例は、チームが2週間のサイクルでプロジェクトの一部を完成させ、クライアントやエンドユーザーからフィードバックを受け取るスクラムというソフトウェア開発プロセスです。各サイクルは、チームがそのサイクルで取り組むタスクを決め、完了目標を設定する計画会議から始まります。その後、チームは次の2週間にわたってそのタスクに取り組み、毎日「スタンドアップ」と呼ばれる短い会議で進捗を確認します。サイクルの終わりには、チームが達成した内容をクライアントやエンドユーザーに発表し、次のサイクルでの改善に向けたフィードバックを受け取ります。このプロセスは、全体の目標が達成されるまでプロジェクトを通じて繰り返されます。
最終的には、小さなプロトタイプを素早く作り、その実現可能性と効果を確認することが狙いです。
ユーザー体験デザインにおける共感の重要性
スマートフォンに、とても気に入っているゲームがあるとします。ところがある日開いてみると、ボタンがとても小さくて押しにくいことに気づきます。さらに画面がとても暗く、ゲームの中で何が起きているのかよく見えません。
つまり、そのゲームは良いユーザー体験を提供できていません。言い換えれば、使う人のことやそのニーズが考えられていないのです。ユーザーのことを考えて設計されていれば、ボタンはもっと大きく押しやすくなり、画面も見やすくなって、もっと快適に遊べたはずです。
共感は、ユーザー体験デザインにおいて欠かせないスキルです。ユーザーのニーズや願いを理解し、それに合った解決策を設計できるようにしてくれます。共感はユーザー体験を高め、お客様のニーズを満たす製品づくりに役立ちます。
UXデザインのサイクル
ユーザー体験デザインは、積み木で遊ぶようなものです。まずどんなものにしたいかを想像し、それを形にし、うまく動くか試し、必要なら改善します。いつもその順番でやらなければならないわけではなく、その時々の必要に合わせて柔軟に進められます。大切なのは、最初からうまくいかなくても諦めず、試行錯誤と学びを続けて、ユーザー体験をできるだけ良いものにすることです。さらに、良いユーザー体験はとても重要です。ユーザーに覚えてもらい、競合より選ばれるようになるからです。それを実現するために、先ほど触れたLean UXという手法を用います。これは、ユーザーを考えること、アジャイルに働くこと、測定可能な結果を得るために実験することの3つを柱としています。
つながることは大切です
UXPA-UKは、イギリスにあるユーザー体験（UX）分野に特化した非営利団体です。さまざまな業界やセクターでUXの実践を奨励・推進し、UXの専門家がつながり、学び、知識や経験を共有できる場を提供することを目的としています。会員やUXコミュニティ全体に向けて、イベント、研修、リソース、ネットワーキングの機会を提供しています。
こちらのURLでページをご覧いただけます： https://uxpa-uk.org/
非営利団体であることの良さは、より独立性が高く、商業的な目的を追わない点にあります。彼らが行っているのは、使命感に基づく活動です。
ユーザー中心設計における発見とアイデア創出
ユーザー中心設計では、ユーザーのニーズを解決し、競争力のある価値を提供するデジタル製品を設計するために、対象ユーザーを深く理解することが重要です。そのためには、ユーザーの行動や環境を理解するための徹底した調査が必要です。
調査とニーズ発見のプロセスは順次的でも線形でもなく、必要な品質レベルに達するまでデザインを反復的にテストし最適化するサイクルで構成されています。
学習成果には、ユーザー体験の重要性を理解すること、ユーザーの行動に関する知識と情報を身につけること、ユーザーの問題を解決するソリューションを提案・検証すること、そしてリーンの手法とユーザー体験を結びつけることが含まれます。
ユーザー中心設計では、コンテンツ構造を計画し、ユーザーとデジタル製品のインタラクションを導くスキーマや設計図を作成することが、一貫性のある効果的なデザインを実現するために欠かせません。
さらに、この設計アプローチでは、製品づくりのプロセスに最初から最後までユーザーを関与させようとします。これには、ユーザーが製品をどう知覚し、どう行動するかについて貴重な情報を集めるためのテストとプロトタイピングが含まれ、デザインと機能性の改善につながります。
要するに、ユーザー中心設計は、ユーザーのニーズや期待に応えるデジタル製品をつくることを目指し、そのためにユーザーへの調査と深い理解、ソリューションの絶え間ない反復と検証、そしてデザインプロセスへのユーザーの積極的な参加を活用します。
UCDの手法
ユーザー中心設計（UCD）のプロセスは、次のようないくつかの段階で構成されます。
- 計画／調査：対象オーディエンスと市場を調査し、製品を概念的に定義します。
- デザイン／プロトタイピング：デザイン上の決定を行い、評価のためにプロトタイプを作成します。
- 評価：ユーザーを関与させることのある評価手法を用いて、デザイン上の決定や重要なプロセスを評価します。
- 実装：デザインを実装し、本番環境に投入します。
- モニタリング：ユーザーが製品をどのように使っているかを調べ、改善の機会を特定します。
Usability.govやInternational Usability Standardなど他の資料でも、ユーザーの理解、デザインと評価のプロセスへのユーザーの関与、そしてユーザー体験全体への注目を基盤とする同様の段階が定義されています。さまざまな進め方があるものの、いずれもユーザー体験を改善する機会を分析することに重点を置いています。
共感することの重要性
ユーザー中心設計（UCD）は、共感とニーズの理解を通じてユーザーのニーズを満たすことに焦点を当てたプロセスです。UCDの最初の段階では、ユーザーを深く理解するために共感が欠かせません。ユーザーを観察し、関わり、見つめ、耳を傾けることが重要です。共感によって、デザイナーはユーザーにとって何が大切かを捉え、その問題に対する意味のある解決策を設計できます。共感を実践するには、解決すべき問題を、それに直面する人々の視点から見ることが欠かせません。
問題を正しくフレーミングすることが正しい解決策を作り出す唯一の方法です。これを達成するには、ユーザーとそのコンテキストから学んだことを基にプロジェクトの課題を特定する必要があります。
問題文は、直接的でインスピレーションを与えること、アイデアを評価する基準を生み出すこと、調査対象者の心を掴むことなど、特定の基準を満たす必要があります。
エンパシーマップ
エンパシーマップは、ユーザーを深く知り、調査における弱点の可能性を見つけるための協働的な手法です。「言うこと」「考えること」「すること」「感じること」の4つの象限で構成されます。そこでは、インタビュー中のユーザーの発言、思考、行動、感情を分析します。この手法により、ユーザーのニーズを発見し、その行動を深く理解し、オーディエンスに関する客観的な情報を得られます。エンパシーマップはデザインプロセスにおいて貴重なツールです。
すべてのアイデアは価値がある
どんな創造的プロセスの初期段階でも、できるだけ多くのアイデアを出すことが重要です。私たちはしばしば、いくつかのアイデアを「突飛だ」「的外れだ」として切り捨てがちですが、この段階ではすべてのアイデアに価値があります。
アイデア出しにより、さまざまなアプローチに取り組み、革新的で創造的な解決策を提案できます。さらに、このプロセスにより、提案された解決策の実現可能性を評価するのに役立つプロトタイプを作成できます。
アイデアの生成と評価は分けて考えるべきだという点は重要です。つまり、生成の過程ではアイデアを判断したり捨てたりせず、すべての提案を集め、その後で客観的に分析するということです。
インタビュー
最も効果的な調査手法のひとつは、対面またはリモートでのユーザーインタビューです。インタビューを通じて、ユーザーの経験、意見、態度、知覚について一次情報を得られます。また、対面でのやり取りでは、リモートでは把握できないしぐさや細かな点に気づくことができます。
もうひとつの有効な手法はフォーカスグループです。これはグループインタビューで、インタビュアーが質問を投げかけ、参加者同士のやり取りのモデレーター兼観察者として関わります。この手法により、ユーザー同士がどう関わり合うか、また競合と比べて製品をどう捉えているかを理解できます。
ユーザーの本当のニーズを理解すれば、その要望に合った解決策を設計し、誤りのリスクを最小限に抑えられます。ユーザーインタビューとフォーカスグループは、ユーザーのニーズや願いについて一次情報を得るための効果的な手法です。
ペルソナ、つまり「ユーザータイプ」
UCDでは、「ペルソナ」というツールが、製品やサービスの代表的なユーザータイプを描くのに役立ちます。この手法には、人口統計学的、個人的、態度に関する情報、目標や動機、ユーザーの行動が含まれます。人口統計学的・個人的な詳細は、研究チームがユーザーに共感するのに役立ちます。市場セグメントやユーザーグループとは異なり、ペルソナはより現実的で身近な概念であり、デザインプロセスの中でデザイナーが覚えやすく、内面化しやすいものです。
プロジェクトには、UXを設計する際に頼りにできる、定義可能なアーキタイプに当てはまる、異なる特徴を持つ複数のペルソナが存在することがあります。
カードソーティング
「カードソーティング」は、ユーザーのグループがさまざまなカテゴリーを記したカードを並べ替える様子を観察する手法で、情報を分類し、ウェブサイトのアーキテクチャを整理することを目的としています。研究者の目的に応じて、オープン型とクローズド型があります。オープンカードソーティングでは、参加者が自分たちで決めたグループにカテゴリーを分類し、それぞれの内容グループに名前を付けます。クローズドカードソーティングでは、参加者が研究者によってあらかじめ定義されたカテゴリーにコンテンツを分類します。
この手法は、ユーザーが製品やサービスに何を期待しているかを明らかにし、対象オーディエンスに合わせてコンテンツに優先順位を付けるのに役立ちます。その結果、ユーザーのナビゲーションが容易になり、目標達成にかかる時間を短縮できます。
ユーザージャーニー
ユーザージャーニーとは、あるサービスの特定のプロセスを再現したものです。
製品との関わりの中でのユーザーの行動、思考、感情を含む反応を分析し、そのニーズや弱点を特定します。
ユーザージャーニーは、各ユーザーの平均的な感情を調べ、サービス内のペインポイントを見つけ出します。ユーザージャーニーを実装するには、ペルソナ、段階、重要な瞬間（ニーズ）、改善の機会（アイデア）を考慮する必要があります。
この演習は、必要に応じてシンプルにも複雑にもでき、サービスを知った時点から利用するまでのユーザーの道のりを可視化することを含みます。演習は、ユーザーの動機、重要な瞬間、改善領域に関する情報を含む大規模なスプレッドシートを使って行うこともできます。
チームを巻き込む
エンドユーザーを調査することはもちろん重要ですが、開発チームがアイデアや懸念を出すことも大切です。より技術的な意味では、これによって問題を早期に発見し、それを避ける新しい戦略を設計し、起こる前に解決策を用意できます。もちろん、ユーザーにとって製品やサービスを使いやすいものにすることは犠牲にしません。
インタラクションデザイン
インタラクションデザインは、サービスの機能性とユーザーインターフェースをつなぐ橋渡しです。私たちがつくっているデジタル製品の振る舞いを形づくり、定義し、導きます。ユーザーがどう使うかを予測し、一連の選択肢を通じて意図した目的へと導くのです。
たとえば、デザイナーがソーシャルメディアアプリをつくっているなら、ユーザー同士がどう関わるかを考慮することが重要です。ユーザー間のコミュニケーションややり取りを促すように適切に設計されていなければ、人はそれを使わなかったり、使っても不満を感じたりするでしょう。
もうひとつの例は、ウェブページのデザインです。ナビゲーションを簡単で効率的にするように適切に設計されていなければ、ユーザーはサイトを離れて別の選択肢を探すでしょう。
一般に、インタラクションデザインは、人々がデジタル製品やサービスとどう関わるかを設計し、そのやり取りをより簡単で快適、効率的にする方法に焦点を当てています。
ドナルド・ノーマンが提唱したモデルによると、インタラクションデザインのプロセスには3つの主要な段階があります。
- 目標の策定：この段階では、インタラクションデザインの目標と目的を明確に設定します。ユーザーのニーズや要件を特定し、機能性を定義し、デザインをどのように進めるかを決めます。
- 実行：この段階で、インタラクションシステムを設計・開発します。プロトタイプの作成、ユーザビリティテストの実施、デザイン改善のためのイテレーションを行います。
- 評価：インタラクションデザインのプロセスの最終段階では、設計したインタラクションシステムを評価します。ユーザーとともにテストを行い、ユーザビリティ上の問題を特定し、改善方法を探ります。
これらの各段階は、ユーザーにとって効果的で満足度の高いインタラクションデザインを実現するために重要であり、互いに補完し合うものです。これらの段階に沿って進めることで、デザイナーはインタラクションデザインが機能的で使いやすく、エンドユーザーにとって満足できるものだと確信できます。
間違えることの利点
良いユーザー体験を設計するうえでは、エラーに対する罰を与えるのを避けるべきです。罰は行動を抑え、その傾向を弱め、努力不足を生むおそれがあります。人は快楽主義的に、快を求め苦を避けようとします。誤るたびに罰があれば、学ぶことから遠ざかってしまいます。エラーが起きたときは前向きに動機づけることが大切で、これはデザインにも当てはまります。
意識的決定理論：ユーザーにとって簡単に
これは、人が何かをするのは、うまくいくと期待しているから、あるいは何らかの利益が得られると信じているからだ、という考えです。たとえば、子どもが宿題をすれば良い成績がもらえると知っていれば、宿題をする可能性が高くなります。
さらに、ウェブサイトやアプリなどを設計するときは、ユーザーが深く考えなくても必要なことができるように、できるだけ簡単にすることを目指します。これを「摩擦を減らす」と言います。たとえば、ゲームアプリで、そこにたどり着くまで何度もクリックするのではなく、すぐにゲームを始められるようにするのが一例です。
努力と利益の関係：利益が大きいほど許容度も高くなる
ユーザーがタスク中に高い利益を知覚すれば、努力に対する許容度が高まり、その製品を使い続ける可能性が高くなります。
したがって、インタラクションのデザインは、フラストレーションを避け、ユーザーに満足のいく体験を構築するために、ナビゲーション全体を通じて簡単で、一定で、一貫していることが重要です。
情報アーキテクチャ／フローデザイン
情報アーキテクチャとは、ユーザーが必要なものを見つけられるように、わかりやすいインタラクティブな空間を設計することです。情報アーキテクチャは、分類、タクソノミー、並べ替えの3つの部分に分かれます。
サッカー、バスケットボール、テニスなど、さまざまなスポーツ向けの服を販売するウェブサイトがあるとします。
- この場合の分類とは、目的や性質に応じて、服のさまざまなカテゴリーを情報ブロックに分けることです。たとえば、スポーツ別、性別別、年齢別、衣類の種類別などに分類できます。WordPressでは、これがカテゴリーにあたります。
- タクソノミーは、ウェブサイト上で情報を位置づけ、ユーザーがインターフェースをナビゲートできるようにするのに役立ちます。たとえば、「子ども用サッカーウェア」「女性用バスケットボールウェア」「男性用テニスウェア」などのタグを使って、ユーザーが探しているものをすぐに見つけられるようにできます。
- 並べ替えは、コンテンツブロックと表示される情報に秩序を与え、文脈の中で見つけやすくし、重要度の階層をつくります。たとえば、最も売れている服や最も割引率の高い服を最初に表示して、ユーザーの注意を引き、検索をより効率的にできます。その意味で、ホームページは重要な要素になります。
メニューとナビゲーション
メニューは、ユーザーが覚えやすいように、サブオプションの数を限定して分類することが重要です。通常、次のようなナビゲーションメニューがあります。
- ハンバーガーメニュー：これは多くのモバイルアプリでよく使われるメニューで、画面の左上または右上に3本の横線があるのが特徴です。この線をタップまたはクリックすると、ユーザー向けのさまざまなオプションを含む隠しメニューが開きます。このタイプのメニューは、メイン画面を圧迫せずにアプリに多くのオプションを含めたいときに特に便利です。
- タップバーメニュー：このナビゲーションシステムもモバイルアプリで非常によく使われます。画面下部に固定されたメニューで、アプリのさまざまなセクションをすばやく切り替えられます。各セクションには通常、アイコンとその機能を説明する短いテキストがあります。
- トップメニュー：このタイプのメニューは画面上部に配置され、タップバーメニューほど頻繁に使われないオプションを含むのが一般的です。このメニューは簡潔にし、オプションを整理して、ユーザーが探しているものをすぐに見つけられるようにすることが重要です。
- カルーセル：このナビゲーションシステムは、ユーザーが指で横にスワイプできる横長の画面に複数のオプションを表示するのに使われます。カルーセルを使うときにユーザーが混乱しないよう、オプションは明確で、整然と表示されることが重要です。同じレベルやカテゴリーにある項目へのリンクを提示するために、オンラインショップでもよく使われます。
- サイドメニュー：ウェブページやアプリのサイドバーに配置されるメニューです。Amazonのようにカテゴリーごとに整理されたオプションを含み、通常はボタンをクリックするかカーソルを合わせると開きます。サイドメニューは、ページを圧迫せずに多くのオプションを含めるのに便利で、簡単で整理されたナビゲーションを可能にします。ご指摘ありがとうございます。横から隠しメニューを開くハンバーガーメニューも、これに含めて考えることができます。
- タブ：このナビゲーションシステムは、アプリのさまざまなセクションを画面上部のタブとして表示します。各タブにはそのセクション固有の情報が含まれ、ワンタップまたはクリックで切り替えられます。このタイプのメニューは、複数のセクションや機能を持つアプリに便利で、ユーザーが探している情報に簡単にアクセスできるようにします。通常、ページの再読み込みは不要で、ヘッダー領域に置く必要もありません。
メニューにおける情報サポートの正確さは、ユーザーがインタラクションをよりよくコントロールするために欠かせません。
ゲシュタルトの法則
20世紀初頭にドイツで生まれた理論で、私たちの脳が視覚情報をどのように知覚し、組織化するかに焦点を当てています。Gestaltという言葉は「形」「図」「構造」と訳せます。画面を見るとき、私たちは見ているものを無意識的かつ自動的にまとまりとして知覚します。インターフェースデザインでこの即時的な知覚を促すために、近接の法則、類似の法則、対称の法則、共通領域の法則、図と地の関係といったゲシュタルトの法則が適用されます。以下で説明します。
- 近接の法則：互いに近くにある要素はひとつのまとまりとして知覚されます。UXでは、関連する要素（ボタンやフォームの入力欄など）をまとめて配置することで、ユーザーがそれらが関連していると理解しやすくなるという意味です。
- 類似の法則：似た特徴を持つ要素はひとつのまとまりとして知覚されます。UXでは、関連する要素（ボタンなど）に同じ色、形、サイズを使うことで、ユーザーがそれらを同じグループに属すると認識しやすくなるという意味です。
- 閉合の法則：人の心は不完全な形を補完しようとするため、完全に形づくられていないオブジェクトも完成したものとして知覚されることがあります。UXでは、シンプルな形を使ってより複雑な形を連想させることができ、ユーザーが形をより明確に知覚できるようになります。
- 連続の法則：一直線に並んでいる、または共通の方向に沿っている要素は、ひとつのまとまりとして知覚されます。UXでは、ラベルとフォームの入力欄など関連する要素を揃えることで、ユーザーがそれらをたどりやすくなるため、整列が重要です。
- 図と地の法則：心はオブジェクトを背景から分離する傾向があります。UXでは、CTAボタンなどの重要な要素が背景から際立つようにすることが重要です。
これらの法則はそれぞれ、視覚要素が私たちの心の中でどのようにまとめられるか、そしてこの理解を活かしてより効果的なインターフェースを設計する方法を説明しています。
フィッツの法則
フィッツの法則によると、要素を押すのに必要な時間は、その面積と距離の対数関係によって決まります。ユーザー体験デザインでは、ユーザーがインターフェースの別の要素とやり取りするために移動に費やす時間を減らすことで、これを応用します。特に、ユーザーが一連の操作をすることが想定される、論理的で明確なフローの要素である場合に重要です。こうしてプロセスが楽になり、ユーザーに好まれます。
デバイスごとに特性が異なるため、インターフェースを描くデバイスの種類ごとに、この法則を念頭に置いて適応させる必要があります。
意思決定
前の点とある意味で関連しますが、インターフェースの使用に最小限の努力と覚えやすさを求めるなら、意思決定を減らし、その結果としてA地点からB地点に到達するために必要なインタラクションの数も減らすべきです。
ユーザビリティ
ユーザビリティとは、使用のしやすさの観点から見た製品の品質属性です。
それは2つの次元に分かれます。 客観的次元と主観的次元。客観的次元は観察によって測定でき、次のようないくつかの属性で構成されます。
- 学習しやすさ：新しいユーザーが大きな努力なく使い方を覚えられること。
- 効率性：タスクを完了するまでの時間を短縮することです。
- 覚えやすさ：しばらく使わなくても、どのように動くかを覚えていること。
- 効果： ユーザビリティの低さによってユーザーが多くのエラーを起こすべきではなく、エラーは簡単に解決できるべきです。
主観的次元はユーザーの知覚に基づき、ユーザー満足度や製品の視覚的な美しさなどを含むことがあります。
自然なマッピング
ユーザーが行った操作の結果は、その操作の自然なマッピング、つまり期待どおりで予測可能な結果につながるべきです。
マッピングとは、ユーザーの操作と得られる結果との関係を指します。結果がユーザーの期待に合っていれば自然なマッピングが生まれ、合っていなければ評価のギャップが生じてユーザビリティ上の問題が明らかになります。
デザイナーは、ユーザーの社会文化的な知識を考慮しながら、各コントロールの機能とその使用結果を誤りなく予測できる必要があります。
自然なマッピングを実現するための3つの鍵があります。
- 説明的なアイコンの使用：アイコンは言語を簡略化し、ユーザーの理解を容易にするために使われる図的表现です。自然なマッピングを実現するには、アイコンが説明的で、ユーザーインターフェースにおける機能を明確に反映している必要があります。さらに、認識しやすく、コンテンツブロックを図的に表すことで、ユーザーが各コントロールの機能を覚えやすくする必要があります。
- 視覚的なまとまり：ユーザーインターフェースで自然なマッピングを実現する最も効果的な方法のひとつは、共通の関係を持つ要素を視覚的にまとめることです。つまり、ユーザーインターフェースの要素を整理され、秩序ある、一貫性のある形で提示し、ユーザーが関連する要素のグループをすぐに識別できるようにするということです。前述のゲシュタルトの法則でも触れたとおりです。
- ユーザーにとって見慣れたインタラクションの使用：ユーザーインターフェースは直感的で使いやすいものでなければなりません。つまり、ユーザーにとって見慣れたインタラクションを使い、混乱を招いたり、見込み客の登録プロセスを妨げたりするような革新的・破壊的な提案は避けるということです。たとえば、メールアドレスとパスワードを求めるログインフォームはユーザーにとって見慣れたインタラクションですが、文字の代わりに絵文字を使うような破壊的なログインフォームは、混乱を招き効果的でない可能性があります。
ワイヤーフレーム：画面の設計図
ことわざにもあるように、一枚の画像は千の言葉に値します。ワイヤーフレームはインターフェースの概略的な表現です。その役割は、デジタル製品の構造、各情報ブロックの内容、そしてそれらの内容間のナビゲーションフローを図で表すことです。
ワイヤーフレームは、デジタル製品がどうなるかのスケッチのような役割を果たし、従来のドキュメントよりも正確にインタラクション、デザイン、機能性を伝えます。
ユーザーインターフェースの制作を含むプロジェクトは、すべてこのデザインプロセスを経るべきです。インターフェースを必要としないプロジェクトでも、アイデアを図式化することで、開発したい内容を明確かつ正確に提示できます。
アクセシビリティ
アクセシビリティとは、身体的・認知的にどのような制約があっても、できるだけ多くの人が製品を利用できる能力を指します。 製品は、知覚可能、操作可能、理解可能、堅牢であるときにアクセシブルといえます。. これを達成するには、情報とUIコンポーネントが、現在および将来のロボットとユーザーにとって知覚可能、操作可能、理解可能、互換性があるように提示される必要があります。
このテーマについては、こちらの記事ですでに書いています： https://keruto.com/diseno/diseno-web/w3c-accesibilidad-aa/ 続ける前にぜひ読んでみてください。
チェックポイント1
学んだことを質問形式でまとめ、ユーザーを質問の主人公として、現在の知識をユーザー体験の資料に活用できるようにしましょう。
ユーザーは何を達成したいのか？
それを達成するためにユーザーは何をするのか？
その過程で何が起こり、ユーザーは期待していたものと比べて何を得たのか？
学びを促すために、エラーに対する罰を避けているか？
意思決定において、より高い労力への忍耐力を得るためのメリットを得ていますか？
ブロックは、その目的とコンテンツの性質に応じて適切に整理されているか？
ゲシュタルトの法則やフィッツの法則は適用されているか？
目標に効率的に到達できているか？
ユーザーは主観的に体験とインターフェースを魅力的だと感じていますか？
ワイヤーフレームは作成したか？
アクセシビリティの原則を守っているか？
満足度の高いユーザー体験をつくるために、ビジネス戦略とユーザーの目標をどうすり合わせればよいか？
これらの質問をすることは、前のポイントを覚える良い方法であり、プロジェクト全体で見落とした問題やステップを検出するための復習にもなります。
ユーザーインターフェースデザイン
これは、ソフトウェアで開発される機能に対して視覚的な解決策を見つけることを目指す分野です。UIデザイナーの仕事は美しいものをつくることだけだと思われがちですが、実際には、プロジェクトのニーズに合った機能的なデザインをつくることが仕事です。
その意味で、「形態は機能に従う」というデザイン原則が基本です。この原則は、対象の形はその具体的な機能から形づくられるべきであり、プロジェクト全体のニーズに応えるべきだというものです。さらに、優れたUIデザイナーになるには、製品の視覚的構築における最低限の要件を理解し、効率的なビジュアルデザインシステムをつくるための知識を身につけ、この分野のプロが用いる手法を知る必要があります。
ユーザーインターフェースデザインはソフトウェア作成の基本的な側面であり、効率的かつ機能的に取り組む必要があります。
美しさ
優れたデザインと、ユーザーが知覚する使いやすさとの間には関係があることが示されています。ユーザーは製品を選ぶとき、視覚的な印象に大きく左右される傾向があります。そのため、ユーザーが一目見たときに感情的にポジティブな反応を示すよう、製品の見せ方に気を配る必要があります。
デザインを美的にする万能の公式はありませんが、良いデザインを実現するのに役立つ概念はあります。そのひとつが 黄金比です。これは同じ直線上にある2つの線分の間に存在する無理数です。この比率は自然（花や葉など）や幾何学図形の中に見出すことができ、この条件が守られると美的な性質が認められます。
バランスもデザインの美しさにおける重要な概念です。構図を構成するすべての重みが線や形で釣り合っているとき、その構図はバランスが取れているといえます。バランスに応じて、対称的な均衡か非対称的な均衡かと考えることができます。
デザインにおけるバランスには2種類あります。 対称的な均衡と非対称的な均衡。対称的な均衡とは、デザイン要素を画面の両側に同じように配置することで、バランスと安定感を生み出すことです。非対称的な均衡とは、要素を画面に不均等に配置しながらも、異なる形、大きさ、色、位置を使って視覚的に釣り合わせることです。
UIデザインでは、バランスを使ってユーザーの注意を特定のインターフェース要素に向けることもできます。たとえば、重要なボタンが画面の視覚的に重い領域にある場合、バランスによってユーザーがそれに気づき、使うように促せます。
UIデザインにおけるバランスは、要素の配置だけでなく、画面上での大きさ、形、色、位置にも関わるという点に注意が必要です。これらの要素はすべて、視覚的バランスの知覚とユーザー体験に影響します。
視覚的階層
視覚的階層とは、ユーザーが目標を達成できるように、また情報過多で混乱しないように、インターフェース内で要素を目立たせる方法を指します。
目立たせる要素は、ユーザーの期待に直接関係し、タスクの完了をスムーズにするものでなければなりません。
要素を目立たせ、階層を高める方法には次のようなものがあります。
- アニメーション：アニメーションは、ユーザーの注意を引くための非常に強力なツールです。特定の要素を強調したり、オブジェクトの状態変化を示したり、ユーザーに視覚的なフィードバックを与えたりするために使えます。
- サイズ：大きな要素は先に目に入るため、インターフェースの重要な要素にユーザーの注意を向けるのに使えます。
- 色：色のコントラストはインターフェース内のリソースを際立たせるのに役立ちます。要素の重要性を強調し、関連要素をグループ化し、一連のステップを通じてユーザーを導くために使用できます。
- 位置：インターフェース内での要素の位置は、その重要性を示したり、ユーザーを特定のワークフローへ導いたりするのに使えます。
アフォーダンス
デザインの文脈における「アフォーダンス」という概念で、どのように使うべきかが明らかな性質を持つ要素を指します。
この概念はインタラクションデザインに関わるもので、ユーザーがコンポーネントを押したり操作したりする必要がありますが、どのように使うべきかを視覚的に明確に示すのはインターフェースデザイナーの役割です。
たとえば、ボタンの状態は、この概念を使って色で明確に示すことができます。
デザインシステム
これらは、製品におけるグラフィック資源の使用を標準化し、インターフェースデザインの一貫性を確保するための共通ガイドラインを定めたドキュメントです。
次の動画で紹介されている、Googleのチームがこのシステムとスタイルガイドを構築するプロセスは、興味深く、とても参考になります。 https://www.youtube.com/watch?v=rrT6v5sOwJg
スタイルガイドのつくり方
1. ブランド
まず最初にすべきことは、ブランドを知り、それを表現することです。
シンボルまたはロゴは、スタイルガイドの最初のページまたはセクションの一つであるべきです
2. タイポグラフィ
次に、デザインで使う書体を定義し、それらの階層を設定する必要があります。
各タイプとそのバリエーションの使用方法を指定する必要があります。ここでは非常に記述的で、すべての属性を考慮し、サイズ、太さ、色、スペースなど、それらをどのように使用するかを定義する必要があります。
定義されたタイポグラフィスタイルを持つHTMLタグを特定し、図解や実例で示すことが重要です。たとえば、H1とH2には明確に異なるフォントスタイルがあり、プロジェクト全体で常に同じように使いたいと考えるはずです。
3. カラーパレット
色のセットを作成し、階層を付ける必要があります。プライマリ、セカンダリ、ターシャリの色、リンク用の色、CTAボタン用の色などです…
これらのパレットを生成するのに役立つオンラインツールを使うこともできます。たとえば Adobe Color
4. 寸法とマージン
インターフェースを設計するとき、デザイナーはピクセル以外の測定単位を使うことがよくあります。適応型デザインが表示される画面の種類が多様で、特定の画面の特性だけではすべてのケースをカバーできないからです。そのため、1インチあたりのピクセル密度を考慮しながら、デザインの測定単位と画面の測定単位の関係を定める必要があります。こうすることで、さまざまな密度とその単位の関係を表にし、レイアウト用にピクセルへ変換できます。
たとえば、モバイル端末の画面の密度をmdpi（1インチあたりの中程度のドット数）で1xとし、デザイン上の1dpがこれらの画面では1pxに相当すると定めることができます。
一方、要素間に余白をつくるマージンを定義するときは、要素間のスペースを整理しやすくするために、ある数の倍数を使うことが勧められます。さらに、その倍数をもとに階層化された寸法のセットをつくれば、それぞれの使用に意味を持たせ、より状況に応じた使い分けができます。
余白をつくり、要素に息づかいを持たせるためにマージンを使うことは重要です。さらに、これらのマージンを一貫して使うことで、より論理的に統一感のあるデザインになります。
5. アイコン
アイコンはフォントと同じように、固有のスタイルを持ち、独自の特徴を持つファミリーを形成します。必要な要素がすべて揃っていないライブラリを補うために、同じデザインで異なるファミリーのアイコンを使うこともありますが、不整合を避けるために、デザインで使うアイコンに適用するスタイルルールを定義することが重要です。
使い方も定義することが大切です。うまく使えば、ユーザーがすぐに認識し解釈できる要素となり、そうした場面ではユーザー体験を大いに高めます。しかし誤った使い方をすると、ユーザーは期待した結果を得られず、悪い体験や混乱を招く可能性があります。
6. グリッドシステム
グリッドシステムはインターフェースデザインの基本ツールです。すべてのグリッドシステムは、カラム、ガター、マージンという3つの基本要素で構成されます。
- カラム：カラムは、デザイン内でコンテンツをまとめ、分ける縦方向の空間です。グリッドシステムでは、カラムの幅はあらかじめ決められ、一定の等分に分割されます。カラムの数と幅は、デザインのニーズと表示するデバイスに応じて選ばれます。
- ガター：ガターはカラム間の横方向の空間です。これもグリッドシステムであらかじめ定義され、通常はデザイン全体で同じ幅になります。
- マージン：マージンは、デザインの外側の縁に配置される余白です。デザインのすべての辺で同じにすることも、デザインのニーズに応じて変えることもできます。
カラム、ガター、マージンという3つの要素は、デザインのコンテンツに一貫性のある整った構造をつくるために連携します。グリッドシステムに従うことで、よりバランスが取れ、調和のとれた、読みやすいデザインを実現できます。また、グリッドシステムで作業することは、レスポンシブデザインのプロセスを簡略化するのにも役立ちます。
7. コンポーネント
ここまでを定義したら、次はコンポーネントの定義に進めます。コンポーネントとは、デザイン内でさまざまな目的に再利用できる、異なる特徴を持つ各種のインターフェース要素にすぎません。スタイルガイドでは、すでに作成したルールを使って、そのデザインと状態を定義し、コーディングを容易にします。
このセクションには、たとえばセレクター、ボタン、入力欄、メニュー要素などがあります…
このセクションには、適用における「すべきこと」と「してはいけないこと」を含めることができます。
アトミックデザイン
アトミックデザインは、Brad Frostが提唱したデザイン手法で、 シンプルなモジュール要素を再利用して、より複雑な情報構造をつくることに焦点を当てています。.
アトミックデザインの考え方は、ユーザーインターフェースをボタン、アイコン、入力欄などの原子的なコンポーネントに分割し、それらを組み合わせてより大きな要素を構築することです。こうすることで、各コンポーネントをさまざまな文脈で再利用・調整でき、ソフトウェアの設計と開発の効率が高まります。
この手法は、独立したコンポーネントや要素が多数あるプロジェクトで、ソフトウェア開発を最適化する必要性から生まれました。 プロジェクトに適用される要素を、デザインから開発まで階層化することは、この手法の主要な目的のひとつです。.
1. 原子
これ以上小さなコンポーネントに分解できない基本要素。例：ボタン、入力欄、チェックボックス…
2. 分子
複数の原子からなり、ひとつのまとまりとして機能する視覚要素のシンプルなグループ。例：検索バー。
3. 有機体
原子や分子からなるより複雑なコンポーネントで、ナビゲーションメニューのようなインターフェースのセクションを形成し始めます。
4. テンプレート
想像できる通り、これらは前身の組み合わせで形成され、ページのコンテンツの一般的な構造をすでに形成しています。完全なページになりますが、まだコンテンツはありません。
5. ページ
テンプレートがコンテンツのないページ構造だとしたら、ページは同じ構造に実際のコンテンツを加えたものです。
インターフェースデザインとフローチャートのためのツール
どんなプロフェッショナルも仕事のためのツールを必要とし、UIデザイナーも例外ではありません。デザインの世界ではAdobeが常に王座にありましたが、この比較的新しいデザイン分野では、非常に魅力的な代替手段を提供する2つの巨大な競合が現れました。
ここではインターフェースデザインの主要な3つのアプリを紹介しますが、最終的に良いデザイナーは選んだツールではなく仕事の結果によって決まるということを念頭に置いてください。
Adobe XD
名前の当否はさておき、Adobe XDは、同社の他のアプリと非常に相性がよく、さまざまなデザイン作業を容易にするアドオンを備えた、無料のデザインプログラムに対するAdobeの賭けです。個人的には、仲間やクライアントにプロジェクトを見せるときのデザイン発表用インターフェースがとても気に入っています。
Sketch
SketchはAppleデバイス向けの有料ツールで、そのブランドのデバイスで仕事をするデザイナーたちから、インターフェースデザイン作業における優れた操作性が評価され、非常に好意的に受け入れられました。
Figma
最後に紹介するFigmaは、他の2つに劣るわけではなく、無料の代替手段の代表格として登場しました。Adobeが最適化が進んだ段階でプラットフォームを有料化するかどうかは分からないからです。Figmaはコミュニティがはるかに大きく、デザイナーを助けるアドオンや作業を効率化するテンプレートが数多くあります。また、有料プランがある一方で、UIデザインの仕事をすべてこのプラットフォームで行う多くのプロフェッショナルや企業にとって、無料プランでも十分です。さらに、プログラムをダウンロードせずにブラウザで使えます。
3つのアプリはすべて、プロジェクトを共有している仲間と同時にオンラインで編集できます。
チェックポイント2
もう一度、まとめとして、学んだことを思い出すために、記憶を呼び起こすのに役立つ質問をいくつか書きます。また、スタイルガイドとデザインシステムを設計するプロセスにも役立ちます。これらのガイドを作成するときに自問すべき質問は次のとおりです。
ブランドデザインはあるか？
書体は定義されているか？
カラーパレットは適用しているか？
余白の値や、測定単位間の換算はあるか？
コンポーネントやアイコンは一貫したスタイルに従っているか？それぞれの状態を考慮し、表現しているか？
デザインは視覚的に魅力的で機能的か？
要素を最も基本的なものから構築し、要素を再利用しながらより複雑な構造へと拡張しているか？
プロトタイピング
プロトタイピングはデジタル製品のデザインプロセスの基本的な部分です。製品の動作を評価し、ユーザーからのフィードバックを得ることができる簡易版の作成で構成されています。
重要な2つの能力を身につける必要があります。
文書化された意思決定に基づいて設計すること y 明確な目的を持ってプロトタイプをつくること それによって提案を評価し、戦略的な基準とビジネス目標をもってデザイン上の決定を評価・検証できるようにすることです。 これらのスキルは、ユーザー体験を評価する方法論、ユーザーの問題を解決するソリューションの提案と検証、プロのUXデザイナーが使用する方法論を学ぶのに役立ちます。
プロトタイプは、開発前に提案を評価できるようにすることでプロジェクトのコストを抑え、リスクを最小限にし、製品への理解を深め、エラーや不具合を防ぎます。
プロトタイプはプロジェクトの初期に限らず、途中でも部分的なものをつくることができます。
プロトタイプのつくり方
デザインの世界では、プロトタイプは欠かせないツールです。アイデアを試し、問題を見つけ、市場に出す前にデザインを改善できます。効果的にプロトタイプをつくるためのヒントをいくつか見ていきましょう。
- まずはつくってみる：何をしているのか正確に分からなくても、材料を集めることでアイデアを具体化し、動き出すことができます。紙、段ボール、リサイクル素材など、思いつくものを使えます。この段階では素材の品質を気にしないでください。大切なのは、試し始められる有形のものを持つことです。
- ひとつのプロトタイプに時間をかけすぎない：自分のアイデアに惚れ込み、客観性を失うのは簡単です。だからこそ、感情的になりすぎる前にプロトタイプから離れることが大切です。試した結果うまくいかないと分かっても、心配はいりません。いつでも改善したプロトタイプをつくれます。
- 変数を特定する：各プロトタイプは特定の問いに答えるべきです。そのためには、オブジェクトとユーザーのやり取りから得られる反応に注意を払うことが重要です。各プロトタイプで評価したい変数を特定し、それらを評価するために必要な質問を用意しておきましょう。
- ユーザーを念頭に置いてプロトタイプに取り組む：特定のオーディエンス向けに設計するときは、最初からその人を念頭に置くことが重要です。ユーザーと何を評価したいのか、どのような行動を期待するのかを自問してください。実際の文脈でユーザーがどう行動するかを評価するために、プロトタイプを活用しましょう。
これらのヒントを使えば、より効果的なプロトタイプをつくり、市場に出す前にデザインを改善できます。プロトタイプの目的は、アイデアを試し、問題を見つけ、デザインを改善することだということを忘れないでください。幸運を祈ります！
プロジェクトのプロトタイプをつくるとき、「Lo-Fi」と「Hi-Fi」という言葉をよく目にします。どちらにも利点と欠点があり、プロジェクトのどの段階にいるかに応じて、どちらを使うべきかを知ることが重要です。
Lo-Fiプロトタイプ
プロジェクトの初期段階では、全体像を持ち、製品の全体的な構造を計画することが重要です。ここでLo-Fiプロトタイプの出番です。スケッチのように、このプロトタイプは製品の全体像をできるだけ早く、シンプルに表現することに焦点を当てます。細部に取りかかる前に、絵画の輪郭を描くようなものです。
Axureのように、Lo-Fiプロトタイピングに特化したプログラムもありますが、先ほど挙げたFigmaやAdobe XDなどを問題なく使うこともできます。
Hi-Fiプロトタイプ
このプロトタイプは、製品の最終版をより忠実に表現しようとするもので、開発チームやコーディングチームにとってはるかに有用なツールです。まだ開発していない最終製品にできるだけ近い体験をつくることを目指します。
Figmaの使い方
Figmaがどんなものかを少し説明します。ほかの選択肢ではなく、このツールの基本概念に絞って紹介します。Figmaは始めるのに最適なアプリで、クラウドベースのためプログラムをインストールする必要がなく、魅力的な無料プランによって小規模チームやフリーランスが費用をかけずに使えることから、近年利用が急増しています。私は個人的にAdobe XDで仕事をしていますが、Figmaも試したことがあり、とても直感的なインターフェースと、優れたアドオンやコミュニティによる公開プロジェクトがあると言えます。
さらに、次のツールとも簡単に連携できます。 Maze、プロダクトチームやマーケティングチームがユーザー体験を迅速かつリモートでテストできる迅速なテストプラットフォームで、結果を処理可能な定量化されたデータとして提供します。
Figmaの左側のパネルには、作成した階層を持つレイヤーが表示されます。
プロパティパネルには、選択した要素の編集可能な情報がすべて表示されます。
Figmaは共同作業ツールであるため、必要に応じて他のユーザーとプロジェクトを共有し、編集を共同で行えます。
Figmaには、インタラクティブな画面フローを生成するための完璧なプロトタイピングツールがあります。
Figmaには標準のツールに加えて、便利なプラグインやウィジェットをつくるコミュニティがあります。また、要素のグループを再利用可能なコンポーネントに変換でき、プロトタイプのコーディングを効率化できます。
これらはこのプログラムの機能のほんの一部です。この短い紹介は、はるかに多くを提供し、あらゆるプロジェクトの要件を満たすデザインを可能にするプログラムの氷山の一角にすぎません。
チェックポイント3
これ以上の前置きは不要でしょう。このチェックポイントが何かはもうお分かりですね。知識を定着させましょう。以下の質問は、学んだことを思い出すだけでなく、プロトタイピングのプロセスを正しく進めたかを確認するための適切な問いを自分に投げかけるのに役立つはずです。
プロトタイプをつくっている製品の中心に、アーキタイプとしてのペルソナを据えているか。そして、それは問題を解決しているか？
プロトタイプの作成に使ったツールやリソースは何か？
プロトタイプの作成にユーザーをどのように関与させましたか？フィードバックはどのように得ましたか？
プロトタイプの範囲はどのように定義したか？
どの種類のプロトタイプ（Lo-Fi、Hi-Fiなど）をつくるかをどう決めたか？プロジェクトのどの段階でつくったか？
デザインの仮説を検証するためにプロトタイプをどう使ったか？テストは行ったか？テスト中にユーザーから何を学んだか？
得られたフィードバックを、プロトタイプの反復と改善にどう活かしたか？
プロトタイプをチームやプロジェクトのステークホルダーとどう共有したか？そのコメントをどう受け取ったか？
プロトタイピングプロセスで得られた結果に基づいて、どのように意思決定しましたか？
プロトタイプから最終製品のデザインにどのような変更と改善を実装しましたか？
評価とCRO
コンバージョン率の評価と最適化、略してCRO（Conversion Rate Optimization）は、デジタル製品の効率を高めることを目的とした継続的改善の手法です。この手法により、ウェブサイトやモバイルアプリの改善点を特定し、利用指標を分析し、特定した問題を解決するための改善計画を立てられます。
CROの手法は、複数の分野や視点にまたがることがあります。たとえば、ビジネスモデルを分析してユーザーコンバージョンの問題を特定したり、ナビゲーションを調べてユーザー体験を改善したりできます。
評価とCROは、あらゆるデジタル製品の成功に欠かせません。CROの手法を実践することで、問題を特定し、それを解決するための策を立て、コンバージョン率を高め、ビジネス目標を達成できます。
効果的なCRO評価を行うために必要なスキルと知識の一部を以下に示します。
- ユーザー体験を評価する手法を知ること。
- ユーザーの問題を解決するソリューションを提案し、検証すること。
- デジタル製品の改善点を見つけるための知識を身につけること。
- サービスのコンバージョン率を改善すること。
- プロのUXデザイナーが用いる手法を知ること。
評価とCROは、デジタル製品の効率を高め、ビジネス目標を達成するために欠かせません。
デジタル測定計画 — ユーザー体験（UX）の改善
ユーザー体験（UX）デザインの世界では、測定計画は、デジタル製品のさまざまな箇所における逸脱や非効率を特定するための欠かせないツールです。しかし、その目的はネガティブな要因を見つけることだけにとどまりません。製品のどのプロセスが正しく機能しているか、あるいは期待を上回っているかも評価できます。この記事では、測定計画で設定できるさまざまな目標と、それらがデジタル製品の成功にどのように直接影響するかを探ります。
測定計画の目標:
測定計画では、目標を5つの主要なグループに分類できます。
- 売上：この目標は、収益の創出とコンバージョンの観点から製品のパフォーマンスを測定することに焦点を当てています。売上データを分析することで、収益創出における製品の効果を高める機会を見つけられます。
- 商業目的でのユーザー情報の取得：この目標は、製品を商業目的で利用するユーザーから、連絡先情報や人口統計データなどを取得することを指します。ユーザー情報の取得を測定することで、リード獲得戦略の効果と収集したデータの品質を評価できます。
- 利用頻度とロイヤルティ：この目標は、ユーザーが製品をどのくらいの頻度で利用するか、またそのロイヤルティの度合い、つまり製品への忠誠心や関与を測定することを指します。利用頻度とロイヤルティを測定することで、ユーザーのリテンションと製品に対する満足度を理解できます。
- 情報の理解とタスク実行の効果：この目標は、ユーザーが製品に提示された情報をどれだけ容易に理解し、特定のタスクを実行できるかを測定することを指します。つまり、ユーザビリティとユーザー体験のことです。情報の理解とタスク実行の効果を測定することで、ユーザビリティとユーザー体験を改善する機会を見つけられます。だからこそ、UXデザイナーである私たちにとってこの点が最も重要であり、その測定は大いに役立ちます。
- リテンション：この目標は、製品におけるユーザーのリテンション、つまり長期的にユーザーをつなぎとめ、製品から離れないようにする能力を測定することを指します。リテンションを測定することで、ユーザー満足度と顧客維持の観点から改善領域を特定できます。
定量的分析と定性的分析
データの測定と分析は、デジタル製品のユーザー体験（UX）を改善するうえで重要な要素です。そのために、製品のパフォーマンスを評価する定量的データと定性的データを得られるさまざまなツールがあります。
その 定量的データ は、ウェブページへの訪問数、アプリをインストールしたユーザー数、アクティブユーザー数など、製品の利用に関する客観的な情報を提供します。定量的測定で最もよく知られたツールのひとつは Google Analytics。これはウェブプロジェクト向けに多種多様なレポートと分析を提供します。
一方、 定性的データ は、デジタル製品の利用という文脈でデータを記録することに焦点を当てています。製品のインターフェースにおけるユーザーの行動を観察し、関心のある領域を特定し、ユーザーが間違えたり不満を感じたりする段階を見つけ、ユーザーが製品とどう関わるかについての情報を得られます。次のようなモニタリングツールが Smartlook o Hotjar やアイトラッキング（Eye Tracking）などは、ユーザー体験に関する貴重な情報を得るのに役立つ定性的ツールの例です。
ヤコブ・ニールセンの10のユーザビリティ原則
「ヤコブ・ニールセンの10のユーザビリティ原則」は、ユーザビリティとインタラクションデザインの著名な専門家であるヤコブ・ニールセンが策定したユーザーインターフェースデザインの原則群です。これらの原則は、ユーザーインターフェースデザイン分野の標準と見なされ、デザインやソフトウェア開発業界のプロフェッショナルによって広く使われています。
ヤコブ・ニールセンの10のユーザビリティ原則は次のとおりです。
- システム状態の可視性：システムは、エラーメッセージや実行したアクションの確認など、明確な視覚的インジケーターを通じて、アプリケーションまたはウェブサイトの現在の状態をユーザーに通知する必要があります。
- システムと現実世界の一致：ユーザーインターフェースで使われる言葉や慣習は、ユーザーにとって身近で理解しやすく、彼らが活動する現実世界を反映しているべきです。
- ユーザーのコントロールと自由：ユーザーはアプリやウェブサイトをコントロールでき、情報を失わずに操作を取り消したり、望まない状況から抜け出したりできるべきです。
- 一貫性と標準：ユーザーインターフェースは、確立された標準や認知されたデザインパターンに従い、デザイン、振る舞い、用語において一貫しているべきです。
- エラー予防：入力チェックや明確なエラーメッセージなど、エラーを防いだりその影響を最小限にしたりする仕組みを設計するべきです。
- 記憶ではなく認識：ユーザーインターフェースは、ユーザーが情報を覚えなくて済むように認知負荷を最小限にし、導くための視覚的・文脈的な手がかりを提供するべきです。
- 柔軟性と効率性：ユーザーインターフェースは、ユーザーが効率的に操作できるようにし、カスタマイズ、キーボードショートカット、その他ワークフローを効率化するツールを提供するべきです。
- 美的でミニマルなデザイン：ユーザーインターフェースのデザインは魅力的ですっきりしているべきで、視覚的な過密を避け、コンテンツの読みやすさと理解に重点を置くべきです。
- ユーザーがエラーを認識し、診断し、回復できるようにする：エラーが起きた場合、アプリやウェブサイトは、ユーザーが問題を理解し解決できるよう、明確なメッセージと推奨される対応を提供するべきです。
- ヘルプとドキュメント：アプリやウェブサイトを使いやすくするために、ドキュメント、チュートリアル、オンラインサポートなど、明確でアクセスしやすいヘルプをユーザーに提供するべきです。
これらはデザインとユーザー体験の品質評価のための重要なルールです。
UXでユーザーテストを行う方法
ユーザーテストという手法は、ユーザー体験（UX）分野の基本的なツールで、製品やプロトタイプをユーザーのグループで試すものです。得られる情報をできるだけ価値あるものにするため、ユーザーはあらかじめ選定されます。
たとえば、住宅ローンのオンライン試算と申込みのプロセスを開発しているなら、実際に住宅ローンを探しているユーザーにテストしてもらう方が価値が高いでしょう。この種のプロセスに関する彼らの経験が、得られるデータを豊かにするからです。
テストを準備するには、各ユーザーに課す課題を記したスクリプトを作成することが重要です。スクリプトに厳密に従う必要はありませんが、目標とするユーザーが製品をどう使うかについてデータを得る出発点になります。
テスト中は、ユーザーの行動を分析・観察し、見つかった使用上の問題を特定して、後で解決できるようにする必要があります。ユーザーの操作をメモし、その後、問題が表れた画面や要素をまとめた図を作ると役立ちます。次の画像のようにです。
ユーザーに自分のプロセスを言葉にしてもらい、何をしているのか、その操作で何を実現しようとしているのかを語ってもらうことは、貴重な情報をもたらします。付箋にメモを取ることで、ユーザーの期待をよりよく理解できます。
ノーマン・ニールセンのPUREメソッド
ノーマン・ニールセンのPUREメソッドは、ウェブサイトやモバイルアプリのユーザビリティを評価するための手法です。PUREは「Pide a los Usuarios que Ranqueen la Experiencia」（英語では「Get People to Rate the Experience」）の頭文字をとったものです。このアプローチは、デジタル製品のユーザビリティを評価するうえでユーザーの意見が欠かせないという考えに基づいています。
PUREメソッドは4つの主要なステップで構成されます。
- 評価基準を選ぶ：このステップでは、ウェブサイトやアプリケーションのユーザビリティを評価するために使用される具体的な基準を定義します。これらの基準は、ユーザー体験にとって明確で、測定可能で、関連性がある必要があります。
- ユーザーに評価してもらう：この段階では、事前に定義された基準を使用してデジタル製品を評価するようユーザーに依頼します。アンケート、質問票、その他のフィードバック形式を通じて行うことができます。
- ユーザーの評価を記録する：ユーザーの回答を記録し、評価で得られたデータを収集します。基準の数値評価、記述コメント、その他ユーザーから提供された関連情報が含まれます。
- 結果を評価・分析する：この段階では、収集したデータを分析し、評価したデジタル製品のユーザビリティについて結論を出します。ユーザーのフィードバックをもとに、パターン、傾向、改善領域を特定できます。
PUREメソッドでは、ユーザーは使いやすさに応じて1〜3の数値スコアを付けます。スコアは通常、次のように解釈されます。
- スコア1：簡単：ユーザーが評価対象のタスクや目標を低い認知負荷で簡単に完了できると認識していることを意味します。ユーザーは素早く、大きな困難なくタスクを実行できます。
- スコア2：普通：ユーザーが評価対象のタスクや目標に適度な認知負荷があると認識していることを示します。つまり、完了するには少しの努力や注意が必要になる場合があります。
- スコア3：難しい：ユーザーが、評価対象のタスクや目標を達成するのが難しく、認知負荷が高いと感じていることを意味します。達成するには、大きな努力、追加の時間、特別なスキルが必要になる場合があります。
PUREスコアは各タスクのスコアの合計で、色はその中で最も悪い評価によって決まります。
難易度を表すのに、数字だけでなく色も使います。
PUREメソッドは、ウェブサイトやモバイルアプリのユーザビリティを評価するのに役立つツールで、他のユーザビリティ評価手法と組み合わせて使うことで、ユーザー体験の全体像を得られます。ユーザーのフィードバックは、改善領域を特定し、デジタル製品のユーザビリティを最適化するうえで貴重だという点に注意が必要です。
ノーマン・ニールセンの手法を実践するステップ
PUREメソッドで従うべき10の重要なステップを説明します。
- 対象ユーザーのタイプを定義する：評価する製品やサービスの対象ユーザーを定義することが重要です。一貫した評価を得るために、対象ユーザータイプを2〜3に制限することをお勧めします。
- 主要なタスクを特定する：評価対象の製品やサービスでユーザーが行うべきタスクを特定する必要があります。これらのタスクは、ビジネスの実現可能性を評価する方向で設定するべきです。
- 「ハッピーパス」を分析する：「ハッピーパス」とは、ユーザーが特定のタスクを実行するために最も使用されるルートです。最も使用されるルートを特定し、そこに評価を焦点を当てるために定量的調査を行う必要があります。
- 境界を定める： 分析するルートを特定したら、各タスクの始まりと終わりを明確に定義する必要があります。
- 3人の専門家による評価：少なくとも3人のユーザー体験の専門家が、製品やサービスを独立して評価することが推奨されます。評価はそれぞれ独立している必要があり、より正確な評価を得るには少なくとも3人の専門家の参加が必要です。
- 評価者間で正確な計算を行う：正確な評価を得るためには、正確な計算を行うことが重要です。評価者はスコアを比較し、一貫性と正確性を確認する必要があります。
- 平均スコアを計算する：評価者が評価を終えたら、すべての評価の平均スコアを計算し、製品やサービスの総合評価を得る必要があります。
- 結果を解釈する：評価から得られた結果を解釈し、それが製品やサービスのユーザビリティにどう影響するかを理解することが重要です。これにより、改善領域を特定し、製品やサービスのユーザビリティを最適化するための情報に基づいた意思決定ができます。
- 評価者にフィードバックを提供する：評価者に、得られた結果と特定された改善領域についてフィードバックを提供する必要があります。これにより、将来のプロジェクトでの評価の精度と一貫性を向上させることができます。
- 結果を意思決定に活用する：最後に、ユーザビリティ評価から得られた結果は、評価対象の製品やサービスの改善について情報に基づいた意思決定を行うために活用するべきです。これらの結果は、機会を特定し、ユーザー体験を最適化して、今後の反復で製品やサービスのユーザビリティを高めるのに役立ちます。
PUREメソッドとヒューリスティック評価を区別することは重要です。ヒューリスティック評価は、できるだけ多くのユーザビリティ問題を特定し、製品やサービスのユーザビリティの全体像を得ることに焦点を当てます。一方、PUREメソッドは、その時点で提供されているデザインを通じて、特定のタイプのユーザーが事前に定義された主要タスクをどれだけ容易に完了できるかについて、信頼できる指標を提供することを目的としています。ヒューリスティック評価があらかじめ定められたデザインガイドラインに基づくのに対し、PUREメソッドは、ユーザー体験の専門家が製品やシステムのさまざまな側面に数値評価を付け、特定のタスクと最もよく使われるユーザールートに基づいてユーザビリティを評価することに焦点を当てています。
A/Bテスト
A/Bテストは、マーケティングやユーザーインターフェースデザインで使われる手法で、要素やプロセスの異なる2つのバージョンの効果を比較し、目標や結果の観点からどちらがより良い成果を出すかを判断します。この手法では、ユーザーをセグメント化して同じ解決策の2つの異なる提案を見せ、その後、各バージョンの効果を定量的に比較します。
たとえば、示された文脈では、Google PlayとApp Storeでのアプリの評価を増やしたいという話が出ています。それを実現するために、同じ目標を持つ2つの施策が、異なる2つのアプローチで提案されています。ひとつは端末のOS標準のコンポーネントを使って評価を依頼する方法で、もうひとつはスタイルガイドを用いた美的なインターフェースデザインに選択肢を組み込む方法です。
両方のバージョンを実装し、異なるユーザーセグメントに見せた後、追跡指標を用いて結果と目標の達成度を測定できます。ここでの目標は、ユーザーがストアにレビューを残すことです。たとえば、得られた評価の数、評価を残したユーザーのコンバージョン率、依頼に対する反応時間など、関連する指標を測定できます。
A/Bテストは、製品、サービス、ユーザーインターフェースの設計と最適化において情報に基づいた意思決定を行うのに役立つツールです。異なるアプローチの効果を比較・評価し、思い込みや直感ではなく具体的なデータに基づいて判断できるからです。さらに、この手法は 反復的に活用でき、実施した各A/Bテストで得られた結果に基づいて、継続的に調整と改善を行えます。
ROI
ROI（Return on Investment）は投資の収益性を測る指標で、良いユーザー体験がROIにプラスの影響を与え、悪いユーザー体験がROIにマイナスの影響を与え得るという意味で、UX（User Experience）と関係しています。ROIを計算する式は次のとおりです。
ROI =（投資から得られた利益 − 投資コスト）÷ 投資コスト
パーセンテージまたは比率で表され、ROIがプラスなら利益、マイナスなら損失を示します。投資のROIを計算・分析する際には、ユーザー体験を考慮することが重要です。そのため、正確な調査を行うには、常にKPI（Key Performance Indicators）と呼ばれる重要業績評価指標との関係で行う必要があります。
チェックポイント4
これまでのセクションと同じように、知識を定着させ、プロジェクトのユーザビリティとユーザー体験に関する分析と測定を適切に行えているか確認するための質問を用意しました。
- デジタル製品で達成したいビジネス目標を明確に特定し、測定可能な形で定義したか？
- デジタル製品のユーザビリティに関連する、情報の解釈とタスクの実行における効果を測定するための関連性が高く具体的なKPI（重要業績評価指標）を選択しましたか？
- デジタル製品のUXの全体像を得る必要性を考慮して、定量的・定性的データを取得するために使用される測定方法とツールを定義しましたか？
- 得られたデータを定期的に収集・分析・解釈し、結果を明確でわかりやすく提示するための計画を立てたか？
- 得られた定量的・定性的データを、デジタル製品のUXを改善する機会の特定と、それを最適化するための情報に基づいた意思決定に活かしたか？
- デジタル測定計画に対して測定可能で達成可能な目標を設定し、実施の期限と責任を定めたか？
- デジタル測定計画がUX/UIデザインの原則とベストプラクティスに沿っていることを確認し、計画の継続性と時間の経過に伴う更新を考慮したか？
結論
これらのセクションはすべて、UI-UXデザイナーであることの意味と、製品の使い勝手とユーザビリティを高めるためにデザイナーが引き出しにしまっている手法を、ひとつの記事に凝縮しようとしたものです。とはいえ最終的には、優れたデザイナーをつくるのは経験であり、創造性と論理をデザインの改善に活かす力です。
この記事がお役に立てば幸いです。必要なときにいつでも参照できるよう、ブックマークしておくことをおすすめします。もし評価していただけるなら、共有していただけるとうれしいです。
私の仕事が気に入ったら、SNSでもぜひフォローしてください。
