Webサイトやアプリケーションを作成する際、デザイナーやエンジニアがWebアクセシビリティに関して遵守すべきガイドラインは数多くあります。しかし、これらをすべて把握したり、さまざまなレベルを使い分けたりするのは非常に大変になることでしょう。

そこで本記事では、公式のWebコンテンツアクセシビリティガイドラインを、デザイナー向けにWebアクセシビリティチェックリストを用いてわかりやすく説明していきます。また、WCAG（Web Content Accessibility Guidelines：Webコンテンツのアクセシビリティに関するガイドライン） 1.0と2.0の違いや、各レベル（A、AA、AAA）についても見ていきます。

UXPinが提供するアクセシビリティ機能によって、デザイナーは UXPinから離れることなく、UIのコントラストや色覚異特性のテストを行うことができます。無料トライアルにサインアップし、UXPinでWebサイトやアプリの使いやすさをぜひご体験ください。

アクセシビリティチェックリストの目的

Webアクセシビリティのチェックリストで、デザイナーやエンジニアは、障がいがある人や支援技術を要する人のためにWebサイトをデザインするうえでの考慮事項を確認することができます。

また、チームメンバーは、チェックリストをデザインやコードと照らし合わせて参照し、WCAGに適合していることを確認することができます。

WCAG2.0とWCAG1.0の違い

WCAGは、技術とともに更新され、進化していかなければならず、更新のたびに新しいデバイスに沿った最新のガイドラインが追加されます。

また、ガイドラインとは別に、WCAGシステムには２つのイテレーション（反復）があり、最初のイテレーションである WCAG 1.0 では、優先度 1、2、3のガイドラインとチェックポイントが用いられています。

WCAG 2.0 では、２００８年にチェックポイントからレベルの成功基準に変更されました。現在使用されているシステムでは、以下が含まれます：

• ４つのデザイン原則
• 各原則に複数のガイドライン
• 各ガイドラインのテスト可能な成功基準レベル（A、AA、AAA）

公式文書によると、WCAG 2.0は主に以下のように改善されました：

• より多くの技術やデバイスに適用可能
• 将来の技術に合わせて進化するようにデザインされている
• 自動化されたテスト手法と人的評価により、要件のテストがしやすくなる。
• 国際社会からのインプットと連携
• ガイドラインの遵守と実施をしやすくするのに、サポート資料と文書を改善した。

詳しくは こちらのWCAG 2.0の公式発表資料をご覧ください。

アクセシビリティ準拠の成功基準における３つのレベル

WCAG 2.0 では、製品の意図された目的とターゲットオーディエンスに基づいて各ガイドラインを評価するのに、以下の３つの成功基準レベル（または適合レベル）が導入されています。

• レベル A – シングルエー
• レベル AA – ダブルエー
• レベル AAA – トリプルエー

レベル A

レベルA は、Webサイトが最低限のアクセシビリティ基準を満たしていることを保証するものであり、レスポンシブデザイン、（アイコンなど）文字以外の代替要素、キーボードナビゲーション、ビデオキャプションなど、Webサイトをよりアクセシブルにするための中核的な問題や要素に対応しています。

レベル AA

レベルAA では、誰もが Webサイトを利用できるよう、より広範なUI要素とベストプラクティスがおさえられており、世界中のほとんどの政府Webサイトは、国民の誰もが公共のコンテンツやサービスにアクセスできるよう、WCAGのレベルAAを要求しています。

このレベルでは、健常者と障がい者が同等のユーザー体験、機能性、効率でコンテンツを消化し、タスクを完了できるようになっています。

レベルAA の要件には以下のようなものがあります：

• 「4.5：1」 などのカラーコントラスト比
• 画像とアイコンの Alt（代替）テキスト
• 全テクノロジーに対応したナビゲーション
• 正確なフォームフィールドラベル
• 適切な構造の見出しタグ
• テキストサイズの変更
• 特定支援技術に関する要件

レベル AAA

レベル AAA は最も高い適合性レベルであり、 Webサイトのナビゲートや、コンテンツの消化をできるユーザーが最大数であることを保証するものです。ただし、レベルAAAはW3C（Web Accessibility Initiative）のサイトにあるように、以下に気をつける必要があります。

“It is not recommended that Level AAA conformance be required as a general policy for entire sites because it is not possible to satisfy all Level AAA Success Criteria for some content.”

（日本語訳：コンテンツによってはレベルAAA成功基準を全て満たすことは不可能であるため、サイト全体の一般的な方針として レベル AAA 準拠を要求することは推奨されない。）

Webサイトやコンテンツが特定の読者を対象としている場合、デザイナーはレベルAAAを使用する必要があります。レベルAAAのガイドラインは、スタイリングに大きな影響を与え（カラーコントラスト7：1）、音声や映像の手話通訳を必要とします。

デザイナー向け Webサイトのアクセシビリティのためのチェックリスト

次に、私たちはデザイナーにとって最も重要なWACGガイドラインを選びました。このガイドラインは視覚的要素に適用されますが、HTML要素に関連することも多いため、アクセシビリティについてはデザイナーとエンジニアの連携が必須となります。ちなみに、WCAG 2.0 の全リストは、W3Cの公式サイトでご覧いただけます。

コンテンツ

• 説明的なリンクラベルを使う（レベル A） – ボタンやリンクは、ユーザーにコンテクストが提供されないといけない。例えば、「ここをクリック」というボタンは意味がなく、誤解を招く可能性がある。Info & Relationships SC 1.3.1を参照。
• 中級以下の読解レベル（レベル AAA） – 専門用語、慣用句、俗語、比喩、皮肉、その他の複雑な用語を含まない「平文（プレーンテキスト）」であること。中学2年生相当のレベルが理想的。Reading Level SC 3.1.5を参照。
• テキスト・フォーマット（レベル AAA） – テキストは両端揃えであってはならず、右揃えか左揃えであり（言語による）、支援技術なしで最大２００％までサイズ変更できること。また、ユーザーは「ダーク/ライトモード」切り替えのように前景色と背景色をコントロールできないといけない。Visual Presentation SC 1.4.8を参照。
• 特殊なスクリーンとデバイスでデザインをテストする（レベル A） – 視覚に障がいがあるユーザーは、高コントラストまたは反転カラーモードを使用する。その条件下でコンテンツがどのように機能するかをテストすることが重要。Color SC 1.4.1を参照。

ページタイトル、見出し、ラベル

以下のガイドラインは、レベルAA に適合しています。Headings and Labels SC 2.4.6 を参照。

• １ページに H1（見出し１） タグは１つ – H1（見出し１）ヘッダタグは、Webページや記事全体の内容が記述されてないといけない。
• 論理的な順序で見出しを構成する – 入れ子になった見出しは、H1、H2、H3、H4、H5、H6という従来の順序に従わないといけない。例えば、H2 の次に H4、そして H3 というようなことは絶対しない。また、H2、H3、H4の順ではなく、H2 から H4 へというような、ヘッダーのタグを飛ばすべきではない。
• 見出しやラベルは、トピックや目的を説明するものでないといけない – 見出しやラベルで、ユーザーや、スクリーン・リーダーのような支援技術は、コンテンツを見つけたり消化しやすくなる。

画像

以下のガイドラインは レベルA に適合しています。Non-text Content SC 1.1.1 参照。

• 非テキストコンテンツには Alt（代替）テキストが必要：画像、アイコンなどには、説明的なAlt（代替）テキストが必要であり、画像にテキスト（文字）がある場合は、alt テキストが含まれていないといけない。
• CAPTCHA：Webサイトは、CAPTCHA （完全に自動化された、コンピューターと人間を区別する公開 チューリングテスト）を使用する場合、人間による認証やテキストベースの認証など、代替の確認方法が提供されないといけない。
• 装飾的な非テキスト・コンテンツ：支援技術がこのコンテンツを無視できるように、純粋に装飾的な画像やメディアの Alt テキストは、”null ” が使われないといけない。
• グラフィック表示の代替テキスト：グラフ、チャート、その他のグラフィックには、支援技術がそれを読み取れるように、代替テキストが含まれないといけない。

リスト

以下のガイドラインはレベルAに適合しています。Info and Relationships 1.3.1参照。

• 適切なHTMLマークアップを選択する – リストには、コンテンツに関連する ol、ul、または dl 構文が使われ、ユーザーが混乱しないようにリストの外観（または構造）が備わってないといけない。

コントロール

コントロール（制御）には、リンクやボタンなどのナビゲート可能なUI要素が全て含まれます。

• 新しいタブまたはウィンドウを開く警告（レベル A） – 例えば新しいタブやウィンドウが予告なしに開くと、認知能力に障がいのある人は混乱することがよくあることから、ユーザーは、ボタンまたはリンクがテキストまたはアイコンを使って新しいウィンドウまたはタブを開くかどうかを知る必要がある。On Focus SC 3.2.1 を参照。
• フォーカス状態（レベル A） – コントロールはフォーカス（またはホバー）状態がないといけない。これにより、支援技術を要するユーザーを含むユーザーは、アクティブにするリンクやボタンをいつ選択したかを把握できる。Focus Visible SC 2.4.7 を参照。
• リンクを識別できるようにする(レベル A) – デザイナーは、ユーザがすぐにリンクを識別できるように、色と下線の組合せを使わないといけない。Use of Color  SC 1.4.1」を参照。
• スキップリンク」を使う（レベル A） – スキップリンクを使うことで、支援技術やキーボードのユーザーは、ナビゲーショナルメニューやその他のブロックを迂回して、Web ページのコンテンツに直接行くことができる。Bypass Blocks SC 2.4.1 を参照。

フォーム

• フォームラベル (レベル A) – デザイナーは、視覚的に参照できるように入力全てにラベルを付け、支援技術のために HTM Lの ‘label’ タグを使わないといけない。Input SC 3.2.2を参照。
• エラーメッセージ（レベル A） – エラーメッセージを対応する入力フィールドの上に配置し、問題を解決するための明確な指示をユーザーに与える。Error Identification SC 3.3.1を参照。
• メッセージの状態（レベル A） – 「エラー」、「警告」、「完了」のメッセージの状態を色だけに頼らない。例えば、アイコンやテキストを追加することで、視覚に障がいがある人がエラー状態の種類を識別しやすくなる。Use of Color SC 1.4.1を参照。

マルチメディア

• 自動再生をデフォルトで無効にする（レベル A） – 自動再生は、認知能力にハンデがあるユーザーや発作性障害のあるユーザーにとって問題となる可能性がある。Audio Control SC 1.4.2 を参照。
• ビデオキャプション（レベル A） – ビデオにはキャプション（字幕）が必要で、キャプションがあることを確認する表示が必要。Caption (Prerecorded) SC 1.2.2 を参照。
• 発作を引き起こす要因を取り除く（レベル A） – ストロボや点滅するビデオは発作を誘発する可能性があることから、W3Cのドキュメントでは、Web ページやビデオの点滅は３回までと推奨されている。Three Flashes or Below Threshold SC 2.3.1 を参照 。
• 音声のトランスクリプト（レベル A） – 音声記述にトランスクリプトを含めることで、聴覚にハンデのある人が音声コンテンツを理解できるようになる。Non-text Content SC 1.1.1 を参照。

カラーコントラスト

• テキストのカラーコントラストをテストする（レベル AA） – コントラストチェッカーと色覚特性テスターを使って、視覚にハンデのある人が確実に本文とUI要素を読めるようにする。Contrast (Minimum) SC 1.4.3 を参照,。
• 非テキストのコントラスト（レベル AA） – アイコンやフォーム入力などの非テキスト要素は、視覚にハンデがある人が区別できるものでないといけない。Non-text Contrast 1.4.11 を参照。

モバイルおよびタッチ

• モバイルでは水平スクロールを避ける（レベル AA） – 水平スクロールは、手や指にハンデのあるユーザーにとってやりにくい（または不可能）な場合がある。なお、W3Cでは「水平スクロールと垂直スクロールのガイドライン」が提供されている。 Reflow SC 1.4.10 を参照。
• Webサイトの向き（レベル AA） – Webサイトは、モバイルやタブレット端末のどの向きでも表示できないといけない。Orientation 1.3.4 を参照。
• 適切なターゲットサイズの確保（レベル AA） – リンクが近すぎてアクティブにできなかったり、間違ったリンクに当たってしまわないようにする。Target Size SC 2.5.5 を参照。

Webアクセシビリティに関するその他のリソース

Webアクセシビリティは、最初は難しく感じるかもしれませんが、以下のようにUI（ユーザーインターフェース）を見つけたりテストするのに役立つリソースは多数あります。

• Official Web Content Accessibility Guidelines Website（WCAG 公式ウェブサイト）
• The A11Y Project（A11Y プロジェクト）
• Essential Accessibility（主なアクセシビリティ）
• 覚えておきたい Webアクセシビリティ 完全ガイド

コントラストチェッカーや色覚特性シミュレータなどの UXPinに内蔵されたアクセシビリティツールで、Webアクセシビリティテストを効率化しませんか。無料トライアルにサインアップして、コードベースのデザインでプロトタイプとテストがどのように強化され、ユーザーにインクルーシブなユーザー体験がもたらされるかをぜひご確認ください。

The post Webアクセシビリティ チェックリスト：遵守すべき２８点 appeared first on Studio by UXPin.

どんなに優れたアイデアでも、必ず成功するとは限りません。どんなに新しいコンセプトを確信していても、実際にフィードバックを得て、それを基にして良い製品を作るしかありません。

だからこそ、プロジェクトの規模にかかわらず、プロトタイプを作り、それをテストすることは必要不可欠なのです。これは、プロジェクト全体の礎となるものです。

最初は難しく感じるかもしれませんが、実際にプロセスに参加してみると、直感的に理解することができます。また、徹底的に行うことで、長期的にはリソースを節約し、ローンチをできるだけスムーズに行うことができます。

ここでは、ユーザーテストを最大限に活用するためのヒントをご紹介します。

1. 早めにテストを始める

製品が完成するのを待っていては、貴重なインサイトを逃してしまいます。もちろん、良いアイデアを思いついたその日にユーザーテストを開始することはできませんが、発売の準備が整うまで我慢するべきではありません。

すべてのディテールをカバーすることはできませんが、早い段階でインサイトを収集することで、問題点を修正したり、最初から問題を取り除いたりすることができます。自分のためにデザインしているのではないということを常に念頭に置き、修正に時間がかかりすぎる前に、ユーザーの協力を得て問題点を発見する必要があります。

プロトタイプの各段階で何ができるかを意識していれば、失敗しても次のバージョンを改善するための教訓になります。また、長い目で見れば、発売後に発生する修正に時間をかけずに済むため、コスト削減にもつながります。通常、期待値を設定するのに役立つ方法で、フェーズを分割することができます。

• ワイヤーフレームやスケッチは、1ページだけのシンプルな構成であるため、最小限の洞察しか得られません。全体像を把握することはできませんが、ユーザーがコンセプトをどのように理解し、次のステップに進むのかという基本的な期待を形成することができます。
• 低～中程度のフィデリティのプロトタイプ – これらのプロトタイプでは、UIインタラクションに関する基本的な洞察や、コンテンツを理解した場合にユーザーがどのように先に進むか、何か邪魔なものがないかなどの収集を開始できます。このステップは、後々のための強固な基盤を形成するのに役立ちます。
• ハイフィデリティ・プロトタイプ – 技術的には完全な製品ではありませんが、この段階では、ユーザーの問題点や、ユーザーがほとんどの要素と相互作用する方法をすべて把握することができます。この段階では、最終製品を作る準備ができているかどうか、対応しようとした問題を解決できたかどうかがわかるはずです。

すべてのプロセスを踏む時間がない場合や、すべてのインタラクションを備えたハイフィデリティ・プロトタイプの構築に時間がかかりすぎる場合は、代わりに完全にインタラクティブなコード・コンポーネントでプロトタイプを構築することができます。開発者のライブラリから直接提供されるUIコードコンポーネントは、デザインプロセスを10倍速くするのに役立ちます。10倍速くするのに役立ちます。

2. タスクをマップ化する

すべてのテストセッションには、明確な目標が必要です。もちろん、得られるすべての知見を得ることが目的ですが、効率的に、できるだけ多くの問題を解決するために、実行可能なプランを用意しておくべきです。

テストユーザーにタスクを提供する際の最も一般的な間違いのひとつは、漠然とした質問を多用することです。

具体的な経験についての答えを得るためには、簡単に追跡でき、洞察を集めることができる実行可能なステップを目指しましょう。例えば、「全部動くのか」というような無意味なテーマではなく（ネタバレになりますが、プロトタイプなので動きません）、明確な次のステップが得られるようなものを目指しましょう。

まず、より多くの情報を得たい製品の側面に基づいて各セッションを制限し、優先順位で分類します。そして、例えば「インターフェイスを見て、ビデオを編集するオプションを見つける」とか「チェックアウトページに移動する」など、テスターに何を期待しているのかを説明しましょう。

これらはすべて、望ましいステップバイステップのプロセスや必要な時間など、達成すべきゴールもあるはずですが、ユーザーはテストを成功させるために情報を持っている必要はありません。

プロトタイプをテストする際には、ユーザビリティが重要であることを忘れてはいけません。この段階では、デザインや追加のデータでポイントを外したり、ユーザーを圧倒したりしないようにしましょう。テストを分かりやすく、シンプルで信頼性の高いものにするために、手取り足取り説明するのではなく、プロトタイプで最大限のインタラクティブ性を追求するようにしましょう。

3. 適切なユーザーを選ぶ

テストプロセスを開始する際、プロトタイプを見せる前にユーザーに技術的なスキル評価を受けさせる必要はありませんが、適切なテスターのプールを確保する必要があります。

代表的なユーザーとは、製品をローンチしたときに（できれば）使ってくれるであろうユーザーペルソナとして、実際に見ているユーザーのことです。例えば、料理アプリを作るのであれば、最低でも週に3、4回は家で料理をするようなユーザーを想定しておくといいでしょう。もちろん、すべての人がまったく同じであるべきではなく、さまざまな問題に気づくことができるような組み合わせでなければなりません。

試作品をテストするのに適したグループを見つけるのは難しいかもしれません。それが、テストを全く行わないチームがある理由の一つでもありますが、最終的には必ずその価値があります。新鮮な視点を持った適切なユーザーに参加してもらうことが最も重要なので、量よりも質を追求すべきです。10人以下の人数でも、実際には多くのことを学ぶことができます。

製品に新鮮な目を向ける必要があることも、家族や友人を避けるべきです。協力しようとしてくれたとしても、その製品についての知識がない場合では、実際に使ってもらうユーザーと同じアプローチをするのは難しいでしょう。この場合、製品を未発表なのであれば、NDA（秘密保持契約）を利用するのも良いアイデアとなります。

もうひとつ留意すべき点として、製品の性質と、ユーザーがどこでそれに接するかということです。つまり、国際的な製品やサービスに取り組んでいる場合は、それぞれの市場に特有の仕様があるため、さまざまな市場からテスターを集める必要があります。また、デバイスについても、ユーザーが実際に使用する環境でテストを行う必要があります。

テストの後半では、発売前に何が可能で、何を変更すべきかを明確に把握するために、社内の関係者からも意見を収集する必要があります。これには、すでに同様のプロセスを経験している販売店などの関係者も含まれます。

4. 何度も繰り返し行う

常に調整できるようにしておく必要があります。テストプロセスは必ずしも直線的ではないので、最高の結果を得るためには柔軟性が重要です。

例えば、ある機能が製品の主な機能から離れてしまっていることに気づいたら、それに対応するために方向性を変える準備をしておくべきです。

このフィードバックループは、テスト対象者に与えるタスクにも当てはまります。何かうまくいっていないことがあれば、即興で質問を変えて、最良の洞察を得ることができます。

また、タスク自体に問題がなくても、ユーザーはどうすれば改善できるか提案してくれるでしょう。だからこそ、チーム全員がこのプロセスに参加し、以前は考えもしなかった新しいソリューションを実行できるようにしておくべきなのです。

また、すべての問題を一度に解決しようとしないことも重要です。プロトタイプは途中で何度も変更されるはずなので、忍耐強く、最大の問題を最初に解決するようにしてください。プロトタイプには何度も変更を加える必要があります。段階を踏んでいる間は、データベースのバックアップを取っておくと、何かを最初の位置に戻す必要が生じたときに、大きく巻き戻さなくて済みます。

新しい機能を追加するたびに、新しいテストを行う必要があります。一見過剰に見え、すべてをまとめてしまいたくなるかもしれませんが、小規模にすることで、より詳細な知見を得ることができ、また、デザインに関しては特に重要な、大規模な変更の手間を省くことができるのです。

まとめ

できるだけ早くプロトタイプを目にしてもらうことを目指しましょう。実在の人物にプロセスに参加してもらうことで、新たな視点を得ることができ、予想外の方向への変更や改善に役立ちます。

腕まくりをしてデザインをやり直すことを恐れてはいけません。チーム全員を巻き込んで、テストはいつもスムーズに進むわけではありませんが、それぞれのステップを通して、製品をよりよく知ることができ、シームレスな発売に近づくことができます。優先順位付けのプロセスを経て、テストにさらに力を注ぎ、フィードバックループでプロトタイプを完成させ続ければ、いつの間にか誇りに思える製品ができあがるはずです。まずは、UXPinの無料トライアルに登録して、プロトタイプの作成を始めてみましょう。

The post プロトタイプでの ユーザーテスト で使える4つのヒント appeared first on Studio by UXPin.

ユーザーフローは、UX のデザインプロセスにおいて不可欠なものです。この貴重な UX のアーティファクトによって、プロダクトチームはユーザーの視点からフローやプロセスを視覚化し、エラーを減らし、UXを向上させることができます。

そこで本記事では、 ユーザーフロー について深く掘り下げ、その重要性、ユーザーフローを導く原則、視覚的表現、そして様々な種類のフローについて見ていきます。

アイデア出しからデザインハンドオフまで、デザインプロセスのあらゆる解決策となるオールインワンデザインツールである UXPin で、ユーザーフローの作成と高忠実度なプロトタイプのデザインをしませんか。今日からプロトタイプ第１合を作りましょう。無料トライアルのお申し込みはコチラ。

UXにおける ユーザーフロー とは？

ユーザーフローとは、デジタル製品、アプリ、Webサイトをナビゲートする際に、ユーザーが行う一連のステップ、決定、アクションを表すグラフィックビジュアライゼーションです。

プロダクトチームは通常、オンボーディングやECサイトで商品購入時など、一度に１つのタスクやゴールに焦点を当てます。デザイナーは、これらの場面でのユーザーフローにおけるプロトタイプを作成し、担当者やステークホルダーと UX（ユーザーエクスペリエンス）をテストし、フィードバックを繰り返しながら、開発可能な製品を完成させていきます。

UXデザインでの ユーザーフロー の重要性

ユーザーフロー は、ユーザーが特定のタスクやゴールを達成するために、アプリケーションやWebサイトを通過する経路を可視化するものであり、その可視化によって、チームはユーザーフロー内の摩擦点や機会を特定し、それを解決するためのソリューションを設デザインすることができます。

さらに、デザイナーは、より効率的で満足度の高いユーザー体験を実現するために、フローの最適化も視野に入れることができます。

よくデザインされた ユーザーフロー がもたらすメリット

ユーザーと組織にとって、以下のような多くのメリットにつながります：

• ユーザビリティの向上：最適化されたユーザーフローは直感的で、意思決定がシンプルであり、認知負荷を軽減するため、ユーザーが迷ったりイライラしたりすることのない、ユーザーに寄り添った体験がもたらされる。
• 顧客維持の向上：デジタル製品がユーザーのニーズを満たし、タスクの遂行や目標の達成を実現すれば、ユーザーはその製品を使い続け、そのポジティブな体験を共有する可能性が高くなる。
• コンバージョンの向上：ユーザーフローを効率化することで、サインアップ、購入、サブスクリプションなど、ビジネスの収益を生み出すタスクの障害となるものが取り除かれる。
• コスト削減：ユーザーフローの最適化によって冗長な画面や機能が削除されるため、デザイン、開発、メンテナンス、サーバーリクエスト、API 使用など、多くのコスト削減につながる。
• アクセシビリティの向上：デザインチームは、アクセシビリティ要件を満たすのにユーザーフローを視覚化して最適化することができ、それによって UI がより包括的なものになり、製品のユーザーベースが増える。
• データに基づいたデザインの決定：ユーザーフローを分析することで、ユーザーの行動や嗜好に関する貴重なインサイトが得られ、それによってデザイナーは、思い込みではなく実際のデータに基づいて意思決定を行うことができる。また、データに基づいたデザイン決定により、ユーザーのニーズを満たす製品や体験が実現し、より直感的で楽しく、ユーザーに寄り添ったものになる。

効果的な ユーザーフロー の UX の原則

うまくいくユーザーフローには、デザインコンセプトや意思決定の指針となる UX の原則が組み込まれています。ここでは、ユーザーフローをデザインする際に考慮すべき基本的な UXの原則 をいくつかご紹介します：

わかりやすさ と シンプルさ

ユーザーフローは、わかりやすく、ナビゲートしやすいものでないといけません。なので複雑なデザインや、使う前に学ばないといけないような機能は避けないといけません。また、ナビゲーションとインタラクションの要素は、一貫性があって予測可能で、わかりやすいものでないといけません。プロセスやインタラクションが、頭を使いすぎるのを強いられるようなものだと、それをやめるのが痛い出費になったとしても、より簡単な選択肢の方に行ってしまうでしょう。

一貫性

製品やユーザーフロー全体を通して、一貫したデザイン言語、レイアウト、パターン、インタラクションデザインを維持しましょう。デザインの一貫性で親しみやすさが高まり、より直感的でユーザーに優しい体験をもたらしますからね。

柔軟性

代替経路やショートカット、入力方法など、タスク完了のための方法を複数提供することで、さまざまなニーズや好み、能力に対応したフローをデザインしましょう。

フィードバックとコミュニケーション

UIフィードバックは、ユーザーをガイドし、ユーザーフローをナビゲートする際の期待値を管理するものであり、例えば、進捗インジケーター、視覚的ヒント、ステータス情報、「完了」や「エラー」などのメッセージ、警告などがあります。このようなコミュニケーションによって、ユーザーはシステムの状態、操作が完了したかどうか、次に何をすればいいかがわかります。

ユーザーニーズの予測

デザイナーは、ユーザーリサーチを活用してユーザーのニーズの予測や対処をすることで、障害や行き詰まりを防ぐことができます。役立つヒントやエラーを防ぐ機能が追加されれば、ユーザーはより早く問題を解決し、より効率的で効率的なフローを実現できます。

最小限の工程

デザイナーは、不必要な工程やアクション、意思決定ポイントを排除することで、ユーザーフローを効率化することができます。このような摩擦を最小限に抑えることで、効率性が上がり、エラーやドロップオフを減らすことができます。

ユーザーの目的を重視

あなたは、目的を効率的に達成できる製品を使いたいですか、それともビジネス価値の提案やその他の無関係なコンテンツで溢れかえっている製品を使いたいですか？ユーザーの目標や望む結果を優先し、効率と成功を高める機能を備えたユーザーフローをデザインしましょう。

アクセシビリティとインクルーシブ

多様な能力、嗜好、デバイスを持つユーザーが製品を使い、フローをナビゲートし、タスクを完了できるようにしましょう。デザイナーは、フォントサイズ、色のコントラスト、キーボードナビゲーション、言語、スクリーンリーダーとの互換性などの要素が、UX にどのような影響を与えるかを考慮しないといけません。アクセシビリティについての詳細は、こちら（英語のブログとなります）をご覧ください。

 ユーザーフロー の可視化するための方法

ユーザーフローの種類を調べる前に、デザインチームがジャーニーのマッピングを可視化するのに使う方法について説明することが重要です。

フローチャート

ユーザーフローチャート（ユーザーフロー図）は、情報の流れ、意思決定ポイント、ユーザーの行動を表現するために、多くの業界で使用されている図解技法であり、記号、矢印、その他の図形を使って、要素、プロセス、決定、データの入出力を表現します。

ワイヤーフロー

ワイヤーフローは、ワイヤーフレームとフローチャートを組み合わせて、ユーザーがインターフェースを通過するまでの道のりを詳細に表現しており、各画面のレイアウトや、ユーザーや情報が画面間をどのように流れるかが表現されています。

ワイヤーフローで、ユーザーと特定の要素とのインタラクションの視覚化や、そのインタラクションのコンテキストを理解することができ、デザイナーやエンジニアは、ワイヤーフローを使って情報アーキテクチャやナビゲーションをより詳細に視覚化することができます。

スクリーンフロー

スクリーンフローとは、ユーザーが製品を操作する際の経路を示す、注釈付きのスクリーンショットやモックアップのことです。ワイヤーフローを忠実に再現したもので、デザイナーやステークホルダーは、最終製品を正確に表現した画面を使って、ユーザーフローをより詳細に視覚化することができます。

ストーリーボード

デザイナーは、映画業界のようにストーリーボードを使い、一連のイラスト、画像、またはスクリーンを使ってユーザーのジャーニーを表示します。ストーリーボードで、デザインチームはユーザーフローからズームアウトして、ユーザーの環境や状況を視覚化することができます。

例えば、食品配達のドライバー向けのアプリをデザインする場合、ユーザーフローを以下のように多角的に可視化する必要があるでしょう：

• 徒歩
• 自転車
• 原付き／バイク
• 車
• バン

ストーリーボードとユーザーフローを組み合わせることで、デザインチームがユーザーとより深く共感し、より適切なソリューションを提供することができるのです。

ユーザーフローの種類

ここでは、一般的なユーザーフローのカテゴリーを７つご紹介します。デザインチームは、このユーザーフローを視覚化するために、上記のテクニックとメディアを使うといいでしょう。

タスクフロー

タスクフローは、特定のタスクを完了するためにユーザーが実行しなければならない手順を表しており、ユーザーの行動と意思決定の順序に焦点が当てられ、多くの場合フローチャートを使って視覚化されます。特にペインポイントを特定し、ユーザージャーニーを最適化するのに有効です。

オンボーディングフロー

オンボーディングフローで、プロダクトチームは製品の初期設定と導入を可視化し、デザインできるようになります。このフローは、アカウント作成、チュートリアル、ハイライト、カスタマイズされたオプションを組み込んでユーザーに慣れ親しんでもらい、すぐに使い始めてもらうことを目的としています。

コンバージョンフロー

コンバージョンフローは、収益と成長を生み出すのに非常に重要であり、ニュースレターの登録、購入、プランのアップグレードなど、目的の行動や結果に至るまでのステップを表すものです。デザイナーは通常、コンバージョン率やアップセルなどの収益を生み出す活動を最大化するために、このフローにおける摩擦や注意力を最小限に抑えることを目指します。

ナビゲーションフロー

ナビゲーションフローは、デジタル製品の構造とアーキテクチャを概説するものです。デザインチームは、ユーザーが画面、セクション、機能の間をどのように移動するのかを、この可視化によって理解するすることができます。ユーザーがより速く探し、より効率的にタスクをこなせるように、彼らはこのようなインサイトを使って機能やコンテンツの優先順位を決めていきます。

アカウント管理フロー

ユーザーは、住所、パスワード、請求書の詳細、アプリの設定、定期購読など、アカウント情報を更新する必要があることがよくあります。アカウント管理フローは、このような管理業務をシンプルにし、ユーザーがより重要な業務に専念できるようにするためのものです。

エラーフロー

エラーフローによって、デザインチームは問題をシミュレーションし、それを解決するためのソリューションをデザインすることができます。このようなインサイトは、ユーザーフローを改善し、エラーの発生をなくしたり、ユーザーが問題を修正するための適切なフィードバックを作成するのに使われます。

オフボーディングフロー

オフボーディングフローは、定期購入の解約やアカウントの削除など、製品やサービスの利用を中止する際にユーザーを誘導するフローです。このフローは、オンボーディングと同様に効率的でなければならず、それによってフラストレーションが最小限に抑えられ、顧客を取り戻す可能性が上がります。

 ユーザーフロー の作り方８つのステップ

ここでは、ユーザーフローを作成するためのフレームワークを順番にご紹介します。

１．目標とエントリーポイントを明確にする

分析したいタスクや目標を特定します。− これは、上記のユーザーフローや製品にとって固有のものである可能性があります。この目標で、ユーザーフローの範囲と焦点、およびどの視覚化が最も適切かを決めることができます。

また、Webサイトの UX をデザインする場合、フロー作成の前に、ユーザーがどこからやってくるのかを判断してマップ化するのもいい習慣です。モーガン・ブラウン氏の『Stop Designing Pages and Start Designing Flows （ページのデザインをやめてフローのデザインを始めなさい）』でのアドバイスに基づき、Webやモバイルのプロトタイプでは、以下のソースを検討することをお勧めします：

• ダイレクトトラフィック
• オーガニック検索
• 有料広告
• SNS
• 紹介サイト
• メール

２．ペルソナを特定する

あなたの製品には、多くのユーザーペルソナがあるかもしれません。その中から、ユーザーフローに最も関連性の高いものを決めましょう。また、複数のペルソナに対してユーザーフローを評価し、全員のニーズと期待を満たすようにするのもいいかもしれません。

ペルソナのテンプレートや作成に役立つヒントについては、無料のeブック『The Guide to UX Design Process & Documentation （UXデザインプロセス＆ドキュメンテーションの手引き）』の「Analyzing Users Before Diving Into Design（デザインに入る前にユーザーを分析する）」の章をご参照ください。

３．ユーザーのアクションと意思決定ポイントをリストにする

ユーザージャーニーを個々の行動と意思決定ポイントのリストにして噛み砕き、目標達成のためにユーザーが取るべき各ステップとその選択肢を考えましょう。例えば、サインアップ画面には、メールでのサインアップや複数のソーシャルログインなど、いくつかのオプションがあるとします。サインアッププロセスを完了するための工程はオプションごとに違いますよね。

４．フローをマップ化する

まずは、紙やデジタルツールでフローをスケッチし、多くのアイデアを速やかに反復することから始めましょう。そしてこれは、チームメンバーがアイデアや提案を共有する共同作業であるべきです。

基本的な概要が決まったら、デザインツールでユーザーフローを作成するといいでしょう。UXPin にはデザインライブラリが５つ内蔵されており、そのうちの１つが「ユーザーフロー」という名前にふさわしいものです。UXPin のユーザーフローライブラリには、チームがユーザージャーニーを作成・共有するために必要な、以下のようなものがすべて含まれています：

• あらゆる方向に対応するフローライン
• アクションブロック
• アイコンブロック
• ラベル
• デバイス（モバイル、タブレット、デスクトップ）
• ジェスチャー

ここでは、フローアウトライン化するためのテクニックをいくつかご紹介します。

ライティング優先のアプローチによるフローのアウトライン化

ジェシカ・ダウニー氏がJumpstarting Your App Conception Without Sketching UI （UI をスケッチすることなく、アプリの構想をスタートさせる）という記事で書いている、「ライティング優先」のアプローチを使うといいでしょう。このアウトライン化手法で、アイデアを具体化し、アプリやサイトの各ページの「共通理解」を構築することができます。

例えば、銀行アプリを作ってみましょう。シナリオは、「自動入金をオンにしたい人がいる」です。以下のアウトラインで、[ 括弧 ]内のコンテンツはアクションボタン/リンクを表していることに注意してください。

ステップ1：自動入金の設定を希望しますか？

[自動入金の設定]

ステップ2: 入金頻度の選択

[月１回]　[月２回]

[一週間おき]　[毎週]

ステップ3：毎月１回入金する

[カレンダーの日付の選択]

ステップ4：金額の設定

金額表示欄

[自動入金の設定]

フローをアウトライン化するための速記法

また、Basecamp のライアン・シンガー氏が使っている速記法のアプローチも試してみてください。彼のアプローチは、フローを継続的な会話として扱います。

上記の銀行アプリの例では、ステップ２とステップ３の略記を作成すると、次のようになります：

シンガー が Basecamp でどのように速記を行い、このアウトライン化プロセスでどのように複雑なフローを描けるかは、「A Shorthand for Designing UI Flows （UIフローのデザインのための速記法）」でご確認ください。

５．スクリーンを追加する

ワイヤーフローやスクリーンフローをデザインしている場合、ユーザーフローに必要な忠実度のレベルに応じて、関連するワイヤーフレーム、モックアップ、スクリーンショットを追加するといいでしょう。

６．システムのフィードバックを含める

エラーメッセージ、完了通知、ロードインジケータなど、システムのフィードバックとレスポンスを追加しましょう。このような詳しい情報によって、デザイナーやエンジニアは、ユーザーを案内するための適切な UI コンポーネントやコンテンツを作成することができます。

７．レビューとイテレーション（反復）

ユーザーフローを分析し、潜在的な改善点、ペインポイント、または摩擦を確認しましょう。また、可視化したものをチームメンバーやステークホルダーと共有してフィードバックをもらい、プロトタイプに適したフローができるまで反復しましょう。

８．プロトタイプとテスト

デザインツールでユーザーフローのプロトタイプを作成しましょう。UXPin に内蔵されているデザインライブラリ（iOS、Material Design、Bootstrap、Foundation）は、Webおよびネイティブアプリケーション用の UI コンポーネントとパターンをデザイナーに提供しており、デザインライブラリパネルから UI 要素をドラッグ＆ドロップして、ブラウザでテストできる忠実度の高いモックアップの作成や、UXPinミラーを使ったモバイルアプリのテストを行うことができます。

以下のような高度な UXPin 機能を使って完全にインタラクティブなプロトタイプを作成し、最終製品を正確に複製する結果を達成しましょう：

ステート：UI 要素１つに対して複数のステートを作成し、アコーディオン、カルーセル、ステッパー などの複雑なインタラクティブコンポーネントをデザインすることができます。

変数：ユーザーの入力データを取得し、例えば、登録フォームの名前フィールドのデータを使ったウェルカムメッセージの作成など、個別化された動的なユーザー体験を実現します。

エクスプレッション： Javascriptのような関数で、複雑なコンポーネントや高度な機能をコードなしで作成できます。

条件付きインタラクション：ユーザーインタラクションに基づいて【if-then】や【if-else】の条件を作成し、最終製品の体験を正確に再現すべく、複数の結果を持つダイナミックなプロトタイプを作成します。

UXPinの高品質なプロトタイプとテストでユーザーフローを強化しませんか。世界最先端のデザインツールで、顧客に合った UX デザインを始めましょう。無料トライアルのお申込みはコチラ。

The post スムーズなUXをかなえるための ユーザーフロー とは？ appeared first on Studio by UXPin.

 ユーザビリティテスト は、デザイン思考のプロセスにおいて重要な役割を果たします。UX チームにとって、問題を解決しようとしている人達に自身のソリューションを発表する機会であり、緊張と興奮を伴う経験です！

UXPin は、世界で最も洗練されたプロトタイプと ユーザビリティテスト のデザインツールです。UXPin と Merge の技術を使うことで、デザイナーは、完全にインタラクティブですぐに使用できるコード コンポーネントを使って、最終製品の機能を備えた忠実度の高いプロトタイプを作成できます。UXPin で正確なテストと有意義な参加者のフィードバックが得ましょう。１４日間の無料トライアルにサインアップして、UXPin の高度なプロトタイプとテストをぜひご体験ください！

 ユーザビリティテスト とは

ユーザビリティテスト（「ユーザビリティ調査」とも呼ばれる）は、実際のユーザーを使って UI（ユーザーインターフェース）やフローをテストします。その際に UX リサーチャー（モデレーターまたはファシリテーター）は、参加者の行動や振る舞いを観察しながら、（通常はデジタル製品のプロトタイプ上で）一連のタスクを完了するよう依頼します。

モデレーターは、UX リサーチャーがプロトタイプを使う際に、その人がどのように考え、感じているかを理解できるように、参加者の考えや行動の言語化をお願いする可能性があります。

UXチームが ユーザビリティテスト を実施する理由

ユーザビリティテストは、UX チームに、以下のような貴重なフィードバックとユーザーインサイトをもたらします：

• ユーザーの問題解決に向けたデザインコンセプトの検証
• 修正すべきユーザビリティの問題の露呈
• 改善の機会の発掘
• ユーザーについての更なる理解

ユーザビリティテストは、テスト、問題の露呈/ユーザーについての学習、調整、再テストを繰り返すプロセスです。

また、エンジニアが開発プロセスを開始するデザインハンドオフまでに、プロトタイプを可能な限り修正改善することを最終目標としています。

「 ユーザビリティテスト 」と「UX テスト」

「ユーザビリティテスト」と「UX（ユーザーエクスペリエンス）テスト」の違いについては、よく混乱や議論が見られます。この用語は、異なる分野のテストを指すため、同じ意味で使うのは正しくありません。

•  ユーザビリティテスト ：UI、ナビゲーション、マイクロインタラクションなど、製品の使いやすさと性能のテスト
•  UX テスト ：デジタル製品を使用する際のユーザーの楽しさや満足度のテスト

この２用語の定義は異なりますが、UX リサーチャーは【ユーザビリティ】と【UX（ユーザーエクスペリエンス）】 を同時にテストします。

例えば、ある UX リサーチャーは、ユーザビリティ調査（ユーザビリティテスト）で参加者がどのようにタスクを完了するかを観察し、別のリサーチャーは、ユーザーの行動や振る舞いを研究します（UX テスト）。

この２つは、製品テストの際に考慮すべき重要なメトリクスです。ユーザーがあるタスクを完了できれば、UX デザイナーはこれを「よくできた」と思うかもしれませんが、その過程でもしユーザーが不満を抱いていたとしたらどうでしょう。より優れた UX を持つ競合製品に乗り換えられてしまう可能性がありますよね。

 ユーザビリティテスト の種類

ユーザビリティテストの方法は、主に以下の２つがあります：

• モデレートテスト
• 非モデレートテスト

UX チームは、この２つの方法をリモートおよびユーザビリティラボ （対面）テストに適用することができます。

モデレート

モデレートのユーザビリティテストでは、ファシリテーターが参加者と対話し、観察したり質問したりしながらタスクを完了するよう依頼します。

また、UXチームは、ラボや Zoom、Skype、または専用のテストツールを使ってリモートでユーザビリティ調査を実施できます。

利点：

• 参加者がタスクを理解し、正しく完了することを保証する。
• 参加者の行動、反応、振る舞いについて質問するなど、参加者と関わることができる。
• 上記のポイントは、UX チームに正確で有意義なフィードバックをもたらす。

欠点：

• 会場探し、参加者、チームスケジュールとの調整、機材の手配など、多くの計画が必要。
• より多くのリソースを必要とするため、テストのコストが上がる。
• コストや時間的な制約から参加者が限られる。

非モデレート

モデレートされていないユーザビリティテストでは、ファシリテーターは不在ですが、参加者に一連のタスクを完了するように指示を与えます。

参加者は、ラボ環境、フィールド（ユーザーが製品を通常使用する場所）、またはリモートでタスクを完了する可能性があります。

利点：

• リサーチャーは複数の参加者を同時にテストできる
• 少ないリソースで、モデレートされていないテストが大幅に安くなる

欠点：

• 被験者がガイダンスなしにタスクや指示を理解することに依存するため、タスクが完了しなかったり、テスト結果に一貫性がなかったりする可能性がある。

 ユーザビリティテスト の方法

カードソーティング

カードソーティングは、要素の階層性をテストし、情報アーキテクチャを確立するための初期段階のユーザビリティ手法です。

モデレーターは、参加者が仕分けできるように、トピックまたはカテゴリのグループを（通常は重要度別または関連性別のグループ）を提示します。

ペーパープロトタイプ

ペーパープロトタイプは、UX チームがユーザーフローや情報アーキテクチャをテストする、初期段階のユーザビリティ手法のひとつです。

ちなみに、ユーザビリティテストには費用がかかり、ペーパープロトタイプでは有意義なユーザーフィードバックが得られないことから、UX チームが参加者とともにペーパープロトタイプをテストすることはほとんどありません。

ただし、ペーパープロトタイプは、ユーザーのナビゲーションの期待値を知る上で、何らかのヒントを与えてくれます。

デジタル Lo-Fi プロトタイプテスト

デジタル Lo-Fi プロトタイプでは、一連のワイヤーフレームを使ってユーザーフローとシンプルなナビゲーションをテストしますが、ペーパープロトタイプと同様、Lo-Fi プロトタイプでは UX に関する限られたフィードバックしか得られません。

Hi-Fi プロトタイプテスト

高忠実度（Hi-Fi）プロトタイプをテストすることで、UXチームは正確で有意義なフィードバックが得られます。また参加者は、最終製品の完全に機能するレプリカを使ってタスクを完了します。

デザイナーは UXPin Merge で、「デザイン要素」を「最終的な製品の機能を備えた忠実度の高いプロトタイプを作成するためにデベロッパーが使うインタラクティブなコンポーネント」とつなぐことができます。コードコンポーネントでデザインすることで、参加者は他のどのデザインツールよりも優れたUXPinプロトタイプと対話することができるのです。

UXPin の１４日間無料トライアルでユーザビリティテストを試してみませんか？

クリックトラッキング（クリックの追跡）

クリックトラッキングは、ユーザーがプロトタイプのどこをクリックやタップしたかを調査するものであり、UX デザイナーはこの情報を使って、参加者が最も頻繁にクリック又はタップする場所を確認することができます。

また、クリックトラッキングで、リンク構造の検証や、参加者がボタンや CTA（Call To Action）を簡単に識別できるかどうかを確認できます。

アイトラッキング（目線の追跡）

UXリサーチャーは、アイトラッキング装置を用いて、参加者が UI をどのように探索するか、あるいはどの要素が最初に目に留まるかを調べます。このような知見によって、UX デザイナーは画面レイアウトの優先順位や CTA の配置を決めることができます。

 ユーザビリティテスト を６つのステップで成功させる方法

ユーザビリティテストでは、計画と目標を持つことが極めて重要です。計画と目標がないと、UX リサーチャーは何をテストすればいいのか、テスト結果の価値は何なのか知る由もないですからね。

そこで、ユーザビリティテストを以下のような簡単な６ステップに分けてみました：

1. 目標の確定
2. テストの選択
3. ユーザータスクの作成
4. リサーチ計画書の作成
5. テストの実施
6. レポート原稿の作成

１：目標の確定

最初のステップは、ユーザビリティ調査の目標の確定です。この目標は、例えば、以下のような大まかな質問や具体的な質問を投げかけます：

• 大まかな質問：どのチェックアウト法がユーザーの完了が一番速やかになるか
• 具体的な質問：ボタンをアニメーション化するとクリック率が上がるか

例えば、eコマースのチェックアウトフローのテストや、新規ユーザーの登録プロセスのテストなど、ゴールに優先順位をつけて、答えたい特定の質問に限定してテストを行うことが重要です。

ユーザビリティテストのセッションを最大限に活用し、できるだけ多くのフィードバックを得たいところですが、それではユーザーの疲労や不正確な結果を招きかねません。

２：正しいテストの選択

何をテストしたいのかが分かれば、適切なユーザビリティテストの方法を選ぶことができます。

ちなみに、無料のEブックである『The Guide to Usability Testing（ユーザビリティ・テストガイド）』では、３０種類のユーザビリティテスト手法の概要が説明されており、どの手法をいつ適用すればいいのかが解説されています。

そこでは、ユーザビリティテストは以下の４つのカテゴリーに分類されています：

• 説明付き：設定された指示に基づき、具体的な目標や個別の要素で、ユーザーの製品との対話を分析する。(例：ツリーテスト、廊下テスト、 ベンチマークテスト)
  
• 非文脈化：予備的なユーザーテストやユーザーリサーチ（ユーザーテストとユーザビリティテストの違いを参照）に最適。必ずしも製品に関わるものではなく、一般的で理論的なテーマを分析し、アイデアの創出や幅広い意見を対象とする。(例：ユーザーインタビュー、アンケート、カードソートなど）
  
• 自然（または自然に近い）：リサーチャーは、ユーザーが製品を最も頻繁に使う環境においてユーザーを分析する。このテストでは、ユーザーがどのように行動するかを調べ、それによって、コントロールの代償としてユーザーの感情を正確に把握できる。(例：フィールドテスト、日記テスト、A/Bテスト、ファーストクリックテスト、βテスト）。
  
• ハイブリッド：従来の方法を捨てて、ユーザーのメンタリティを特徴的にとらえる。(例：参加型デザイン、短時間暴露記憶テスト、形容詞カード）。

テスト方法を選択したら、チームと共有し、目標と戦術をユーザビリティ計画書にまとめます。

３： ユーザータスクの作成

ユーザビリティテストでは、質問や言い回しなど、参加者に提示するものすべてが、参加者の反応に影響します。

ユーザビリティのタスクには、オープンなものとクローズなものがありますが、テストでは、その両方をうまく組み合わせる必要があります：

• クローズ：解釈の余地が少なく、例えば「12人収容できる会場を探す」というような、成功か失敗かが明確に定められた問題が与えられ、定量的で正確なテスト結果が得られる。
• オープン：参加者にはオープンタスクをこなす方法がいくつかある。例えば「お友達は Optimal Workshop（ユーザー調査のプラットフォーム） のことを話しているけど、あなたは使ったことがないみたいだから、どのように機能するのか調べてみてましょう。」といったような『サンドボックス』スタイル（プログラムがシステムの他の部分に悪影響を及ぼすことのないように設計された環境）のタスクであり、 定性的で、時には予想外の結果を生み出す。

また、モデレーターは、偏った考えを与えないように質問の言い回しに気を配る必要があります。

例えば、あるECストアで、ユーザーが母親へのプレゼントをどのように見つけるかを知りたいとします。もし、「当店で母の日のギフトを検索していただけますか」というような質問をすると、参加者が自然な直感に従うのではなく、検索機能を使うことを示唆することになるかもしれません。それに、この質問は、質問というよりも、指示のように聞こえますね。

なのでこの質問は、「当店での母の日ギフトはどのように探しましょうか。」という言い方がいいかもしれません。

４： ユーザビリティ 調査計画書の作成

ユーザビリティ調査計画書は、以下の７項目がないといけません：

1. 背景：ユーザーリサーチに至った理由や経緯について、一段落で記述する。
2. 目標：この研究で何を達成したいかを箇条書きでまとめる。目標は客観的かつ簡潔に。例えば「新しいチェックアウトプロセスがユーザーにどのように好まれているかをテストする 」ではなく、「新しいチェックアウトプロセスが初めて利用するユーザーのコンバージョンにどのように影響するかをテストする 」と書く。
3. 質問：この研究で答えてほしい質問を５〜７個程度挙げる。
4. 戦術：UXリサーチャーがテストを行う場所、時間、方法。この特定のテストを選択した理由を説明する。
5. 参加者：行動特性など、研究しているユーザーのタイプを記述する。ペルソナを添付して、さらにコンテクストを深めることもできる。
6. タイムライン：募集開始日、テスト開始・終了日時、ステークホルダーが結果を期待できる時期。
7. テスト説明 ：スクリプトが準備されている場合は、スクリプトを含めておく。

ステークホルダーからの提案やフィードバックを促し、確実に全員が納得して見落としがないようにしましょう。

さらに読む ： The Plan That Stakeholders Love: The One-Pager.（ステークホルダーに愛されるプラン： ワン・ページャー（１ページでまとめられたもの））

５：テストの実施

以下は、ユーザビリティテストを実施するタイミングです：

参加者が快適に過ごせるようにする： 参加者に、自分の能力ではなく、製品をテストしているのだということを再度確認しましょう。事前に説明を作成することで、モデレーターの指示、フェイズ、トーンに一貫性を持たせることができます。

干渉しない ：偏見を避けることができ、予測していなかったユーザー行動のインサイトを明らかにできるかもしれません。有意義なインサイトは、予想もしなかった方法で参加者が製品に接することから生まれます。人間の自然な行動を観察し、それが機能改善のインスピレーションになるようにしましょう。

セッションを記録する：チームは、後からユーザビリティ研究を見直す必要があるかもしれませんからね。

連携：レインボー・スプレッドシート（一瞬で色分けできるスプレッドシート）を使用して、各ユーザビリティ・テストの解釈を記録するといいでしょう。UXリサーチャーは、メモを比較して、共通する観察事項やユニークな観察事項を確認することができます。ちなみに、レインボースプレッドシートは、我がチームが Yelp の再デザインを行った際に、ステークホルダーのために結果を要約するのに効果的でした。(出典：Rainbow Spreadsheets by Tomer Sharon　（トマー・シャロン氏によるレインボースプレッド)

６：レポートの作成

ユーザビリティ調査報告書は、結果をまとめてステークホルダーと共有するのに有効な手段です。

ここでは、ユーザビリティレポートを作成する際のポイントをご紹介します：

具体的にする：「ユーザーは適切な製品を購入できなかった」は、理由を説明していないため、あまり役に立ちません。例えば「検索バーが見つからなかったため、ユーザーは正しい商品を購入できなかった」など、UXの観点から具体的な問題を説明しましょう。

問題に優先順位を付ける：ユーザビリティの問題を分類し、優先順位を付けることで、デザインチームがどこから手をつけるべきかを把握しやすくなります。その際はナビゲーションの問題やレイアウトの問題などのレポートを分類し、優先順位に「低/中/高」がわかるカラーコードを使うことをお勧めします。

推奨事項を記載する：あとは、ステークホルダーに解決策があることを知ってもらえるように、ユーザビリティの問題を解決するためのチームの推奨事項を盛り込みましょう。

その他、ユーザビリティレポートを作成する上で考慮すべき点に以下のようなものがあります：

• 正式なユーザビリティレポート
• 内容を補足するチャート、グラフ、図
• 過去のテストドキュメント 
• テストのビデオまたはオーディオトラック

UXPinを使ったユーザビリティテスト

UXPinは、包括的なデザインおよびプロトタイピングツールです。他のデザインツールとは違い、UXPin はワイヤーフレーム、モックアップ、プロトタイプ、テストの要件を満たすための プラグイン や アプリ を必要としません。

さらに、UXPin はさらに多くの機能を備えており、プロトタイプのステートやインタラクションを利用することで、参加者の製品インタラクションを強化し、有意義なフィードバックや結果を提供することができます。

UXPin の１４日間トライアルにサインアップして、UXデザイン、プロトタイプ、ユーザビリティテストの全く新しい世界をぜひご体験ください！

The post ユーザビリティテスト とは？成功させる6つの秘訣 appeared first on Studio by UXPin.

ヤコブ・ニールセン氏の『ヒューリスティック』は、全体的なUX（ユーザーエクスペリエンス）監査が可能であることから、デザインチームでは、それを使って人間とコンピュータのインタラクションを評価するのが一般的です。

『ヒューリスティック評価』では、製品のUXに重要なファセット１０項目を調査し、それによってデザインチームはユーザーインターフェースやインタラクション内の特定のユーザビリティ問題に集中できるようになります。  

最終製品のように見える高度なプロトタイプを使って、製品のユーザビリティ性能について正確なインサイトを得ませんか。無料トライアルにサインアップして、UXPinのインタラクティブなプロトタイプをぜひご体験下さい。  

ヒューリスティック評価（ヒューリスティック 分析）とは

  ヒューリスティック とは、通常、「試行錯誤による問題解決や自己啓発」を指しますが、UXデザインにおける『ヒューリスティック』は、「意思決定やタスクの完了に必要な認知的負荷や精神力」を表します。デザイナーは、ユーザビリティ・テストを使ってヒューリスティックを評価し、修正すべき問題を特定します。

ユーザビリティのヒューリスティックは１０項目あり、ヒューリスティック評価ではそれを評価し、製品のユーザビリティ性能を特定します。このユーザビリティヒューリスティックは、ニールセン・ノーマン・グループの共同創設者であるヤコブ・ニールセン氏が、１９９０年代初頭に考案した「インタラクションデザインの１０大原則」に由来しています。

ユーザビリティ・ヒューリスティック１０項目

  ヤコブ・ニールセン氏は、他２人のUXとエンジニアリングの専門家の研究に基づいて、以下のようにユーザビリティ・ヒューリスティック１０項目を作成しました：

• ゲルハルト-ポワルズ氏の『 Cognitive Engineering Principles』
• ベン・シュナイダーマン氏の『 Eight Golden Rules of Interface Design』

システムステータスの可視化

  デザイナーは、さまざまなインタラクションやユーザータスクのために、システム・ステータス・インジケータを使います。たとえば、携帯電話のバッテリーアイコンには、バッテリー残量のステータスを表示されますよね。このバッテリー残量表示は、電力が十分かどうか、いつ充電すればよいかをユーザーに知らせるのに重要で、これがないと、警告なしに断続的に電池が切れてしまい、エンドユーザーのフラストレーションの原因になってしまいます。

システムの状態を可視化することで、視覚的なフィードバックが重要になります。例えば、ユーザーが、クリックやタップ、ホバー、スワイプなどのコンポーネントを操作したり、フォームを送信するなどのアクションを完了すると、何が起こるのでしょうか。システムは、”何かが起こっていること” や ”タスクが実行されたこと” をユーザーに知らせるために、フィードバックの提供が必須なのです 。

以下のユーザーインターフェースのデザイン要素は、システムの状態を可視化するいい例です。

• フォームのプログレストラッカー
• 『読み込み中』のアイコン
• 「完了』、『警告』、『エラー』などのシステムメッセージ
• ショッピングカートやテキストアプリなどのバッジ
• アプリの通知

  デザイナーは、システム状況の更新でユーザーを圧倒しないよう注意し、フィードバックの提供は、適切かつ必要な時のみにしなければいけません。

システムと現実世界の一致

  システムと現実世界の一致には、以下の２つのルールがあります。：  

• ユーザーの言葉で話す
• 現実世界の慣習に従う

  まずコンテンツデザイナーは、常に分かりやすい言葉や表現を用いなければなりません。例えば、Facebookの「ニュースフィード」と「写真タグ付け」は、ユーザーの言葉を使った素晴らしい例です。レックス・フリードマン氏とのポッドキャストで、Facebookの初期の幹部であるチャマス・パリハピティヤ氏は、同社がどのように最もわかりやすい名前を選んで、人々がその機能を知るようにしたかを語っています。

言語と密接に関係しているのが、『現実世界での慣例』です。例えば電子書籍が、ページめくりやテキストへのマーカー引き、しおり付けが紙の本と同じようにできるというような、現実世界での体験やインタラクションをデジタル製品でも繰り広げるといったことなどが挙げられます。

システムを現実世界に合わせることで、ユーザーの体験が明白になり、製品のナビゲーションやタスクの完了に必要な認知的負荷が軽減されます。そしてこの明白さは、テクノロジーを学んでいる人々、高齢者、認知障害のあるユーザーにとって特に重要です。

ユーザーのコントロールと自由度

  デザイナーは、【編集】、【取り消し】、【やり直し】、【戻る】、【キャンセル】などを通じて、ユーザーのために出口や出口への誘導を提供しなければいけません。ユーザーが自由に間違いの訂正や、考えを変えたりできるということは、良いUXには不可欠です。

この『自由』は、購入や有料サービスの変更など、金銭的な決定において特に重要です。ユーザーにこのような自由とコントロールを与えることで、製品やその機能を探求することに怖気づくのを最小限に抑え、信頼を築くことができるのです。

一貫性と標準

  「一貫性」と「標準」には、以下のように２つの側面があります：

• 内的
• 外的

  内的な一貫性と標準は、UIとコンポーネントに適用され、製品のデザインシステムまたはデザイン言語によって通常は確定されます。デザイナーは、タスクやアクションが常にユーザーにとって確実に明白であるようにするために、この内部の標準に一貫して従わないといけません。

外的な一貫性と標準は、例えば、ナビゲーションの引き出しを開くための「ハンバーガー」のアイコンや、ECサイトの「ショッピングカート」のアイコンなどの、世界的に認知されたUXパターンを指します。こういった慣習を破ると、ユーザーは何かしら新しいことを学ばなければならず、その結果、認知負荷が上がってしまいます。

一貫性と標準に従うことで、アクションについて考える必要性が減り、ユーザーは最小限の精神的労力でコンテンツを見つけてタスクを完了することができるのです。

エラー防止

  エラーの防止は、最も重要なヒューリスティックの一つです。特に、間違った銀行口座への振り込みや、誤って何かを削除したりといった不可逆的な行動では、エラーにより大きな苦痛を与える可能性があります。

デザイナーは、認知的摩擦と呼ばれる戦略を使って、ユーザーがアクションを完了する前に立ち止まって考えざるを得ないような、何かしらのタスクを敢えて作成します。例えば、【送金】をクリックすると、「金額」、「受取人の名前」、「銀行口座番号」、「支店コード」などを確認するダイアログが出てきて、取引の【確定】か【キャンセル】を選択させることができます。

いいUXデザインは、こうした摩擦点を作り出すことでエラーを防ぎ、場合によっては、例えば最近削除した項目を３０日間保存するなど、それを逆手に取ることもできます。

「思い出す」より、「認識する」

  人間は短期記憶に乏しいため、情報の持ち続けるのは大変です。そこでデザイナーは、ユーザーが記憶する必要がないように、コンテンツを表示したり、呼び出したりできるようにしなければなりません。例えば、ECプラットフォームでは、配送先や請求先の情報を保存しておけば、チェックアウトの際にそれを思い出す必要がないですよね。

このコンセプトには、ユーザーが製品を使うためにドキュメントを参照したり、チュートリアルを見たりする必要がないように、デザインをシンプルにすることも含まれます。なのでデザイナーは、ユーザーのタスクを完了をサポートすべく、フォームラベル、メニュー項目、ツールチップ、プレースホルダ文字、その他のリマインダーを使います。

柔軟性と使用効率

  柔軟性と使用効率によって、タスクやアクションを実行する方法が複数提供され、ユーザーは自分のタスクやアクションを速やかに完了することができます。この原則の最も良い例が、「コピー＆ペースト」です。アプリケーションによって異なりますが、ユーザーには通常、選択肢が以下のように３つあります：

• アプリの主要なナビゲーション、【編集】→【コピー】、【編集】→【貼り付け】を使う
• マウスの右クリックで【コピー】、右クリックで【貼り付け】を実行する
• キーボードショートカットを使う、【⌘/Ctrl】 + 【C】（コピー）、【⌘/Ctrl】 + 【V】（貼り付け）

  また、インスタグラムの利用者には、ハートマークや「いいね！」のアイコンをタップする代わりに、画像をダブルタップして「いいね！」を押すという方法もあります。

ユーザーが初めて製品を使い始めるとき、一般的に最もわかりやすいデフォルトのオプション、つまりInstagramの場合はアプリのナビゲーションやアイコンを使いますが、慣れてくると、ショートカットを使って効率を最大化するようになります。

美しさとシンプルなデザイン

  ユーザーが最も重要なコンテンツとアクションに集中できるように、美的感覚に優れたシンプルなインターフェースでないといけません。例えば、あるECストアがWebサイトに広告を掲載しないのは、A）見た目がごちゃごちゃな UI になるから、B）競合他社の広告が表示され、ユーザーが別のオファーに移動してしまう可能性があるから、などの理由が考えられますね。

「メールリストに登録する」「この製品を購入する」「Twitterでフォローする」「Facebookで ”いいね！”を押す」「デモを予約する」など、企業はあらゆる手段でユーザーを獲得しようとウェブサイトやランディングページにCTA（Call To Action）を過剰に設けていますが、選択肢が多すぎると、ユーザーは逆に離れていってしまいます！

なのでデザイナーは、ユーザーの主な目標やタスクをサポートするコンテンツを優先し、無関係で邪魔な UI エレメントは排除しなければいけません。  

ユーザーによるエラーの認識、診断、回復をサポートする。

  エラーメッセージは、ユーザーへの問題警告だけでなく、その問題を解決するための簡単な解決策を提供する必要があります。例えばGoogleのマテリアルデザインのスナックバーでは、ユーザーが誤ってメールをアーカイブしてしまった場合に備えて、【元に戻す】のアクションが追加されています。

GoogleのGmailでは、メールの送信後に、スナックバーで【送信取り消し】ができるようになっており、「ファイル添付を忘れてしまった！ → 【送信取り消し（Undo）】あーよかった。ありがとう、Gmail！」のようなリカバリーができるようになっています。

その他、デザイナーがユーザーのリカバリーをサポートする例としては、以下のようなものがあります：

• お役立ちリンク付きの エラー４０４
• 解決策へのリンクを含むエラーメッセージ
• 入力フィールドのエラーメッセージと、問題を解決するための明示的な指示

ヘルプとドキュメント

  誰だって、今やっていることを離れてドキュメントを読むのは好きではないですが、問題を解明して解決策を見つけるには、それをしなければいけないことがよくあるのです。デザイナーは、ウォークスルー、ツールチップ、ポップオーバー、チャットなどを使って、作業中のページを離れずに答えを見つけられるようにすることで、ユーザーをサポートすることができます。

Google Docsには、ユーザー向けのヘルプのポップアップがあり、そこで製品のドキュメントを検索して解決策を見つけることができます。さらに、Google Docsのコミュニティへのリンクや、Googleに直接問題を報告するオプションも用意されています。

ドキュメントは、検索と案内が簡単で、かつユーザーへの便利で実用的な回答の提供が必要です。UXPinのドキュメントでは、最も検索されたヘルプのカテゴリと検索オプション（オートコンプリート付き）がユーザーに提供されており、各セクションでは、画像、GIF、文書による説明が提供され、ユーザーが必要なものを見つけられるようになっています。

ヒューリスティック評価の方法

各ユーザビリティ原則を理解した上で、いよいよヒューリスティック評価の実施に移りましょう。 ヒューリスティック評価を行うプロセスは、業界やデザインプロジェクトに関係なく全部同じです。

• フェーズ１ – プランニング：デザインチームによる、ユーザーリサーチを用いたヒューリスティック評価のマップ作成、および、タスクの委任と目標の確定。
• フェーズ２- 実行：ヒューリスティック評価の実行。
• フェーズ３- レビュー：評価の総括とレビュー、および、アクションプランのデザイン。

プランニング

まず、チームはどのヒューリスティックを使って、どのように評価するかを確定しますが、ヒューリスティックは、市場調査、過去のユーザーテスト、そして慎重なデザインの原則に基づいて慎重に選択されるべきです。

次に、チームは、評価を担当するユーザビリティの専門家である『評価者』を選ばなければいけません。評価者は、バイアスを減らし、より多くのユーザビリティの問題を発見するために、通常２人１組で作業を行い、一回につき１つのヒューリスティックしか評価できません。複数のヒューリスティックを同時に評価すると、エラーが発生しかねないですからね。

実行

1. まず、使用するヒューリスティックとシステムの機能を評価者に理解してもらうために、評価者に説明を行います。
2. 次に、評価者はその仕組みを理解すべく、システムと対話します。
3. 評価者は、あらかじめ決められたヒューリスティックに基づいてシステムを評価し、使い勝手の問題点があれば指摘します。

レビュー

評価者は、問題点の解決のための推奨行動とともに、調査結果を発表します。チームはそれを1つのマスター文書にまとめ、ユーザビリティの問題を解決するためのタスクを作成し、優先順位をつけます。

UXPinの高度なインタラクティブプロトタイピングで、ユーザビリティの問題をより多く特定し、エンドユーザーに届く前にエラーを修正しましょう。無料トライアルにサインアップして、UXPinの洗練されたデザインツールをぜひお試しください。

The post ヒューリスティック評価 – 重要な10項目とヒント appeared first on Studio by UXPin.

ピーター・モービル氏の【 UXハニカム 】は、2004年に発表され、今でも現代の製品開発プロジェクトに非常に適したデザインフレームワークであり、デザインチームにUX（ユーザーエクスペリエンス）の7つの側面から製品を評価させ、改善すべき領域を特定させるものです。  

本記事では、 UXハニカム の概要と、それが最も効果的になる状況についてお話します。問題を解決してプロジェクトの成果を上げる【UXモデル】については、英語にはなりますがこちらの デザインフレームワーク の記事が特におすすめです。  

主なポイント：

• UXハニカムは、UXを測るための最も一般的なUX デザインフレームワーク の1つである。
• UXハニカムは、情報アーキテクチャに関する書籍を多数執筆しているピーター・モービル氏による考案である。
• UXハニカムには、「有用性」、「使いやすさ」、「見つけやすさ」、「好ましさ」、「アクセス性」、「信頼性」、「価値」、という、優れたUXの実現に向けて一体となる７要素がある。
• 製品の再デザイン時やUXの負債を測る際のチェックリストとして、また教育ツールとして使われる。

  世界最先端のUXデザイン＆プロトタイピングツールで、ワークフローに革命を起こしませんか。無料トライアルにサインアップして、UXPinのコードベースのデザイン機能をぜひすべてご覧ください。  

 UXハニカム とは

  UXハニカムは、2004年にピーター・モービル氏によって開発された デザインフレームワーク です。このフレームワークは、UXの7つの側面を用いて、デザインチームが優れたCX（カスタマーエクスペリエンス）を提供するためのガイドとなるものであり、ユーザー中心のデザインや顧客に愛される製品をデザインする方法について、若いデザイナーを教育するための素晴らしい教育ツールでもあります。  

「UXハニカム」の著者であるピーター・モービル氏とは

  ピーター・モービル氏は、米国バージニア州スコッツビル出身の情報アーキテクト及びUXデザイナーであり、ベストセラーになった著書に『Web情報アーキテクチャ―最適なサイト構築のための論理的アプローチ 』、『Intertwingled – 錯綜する世界／情報がすべてを変える』、『検索と発見のためのデザイン- エクスペリエンスの未来へ』、『アンビエント・ファインダビリティ』などがあります。  

彼は、世界中の会議やワークショップで情報アーキテクチャやUXについて講演し、自身の会社であるSemantic Studioを通じて多くのフォーチュン500社のコンサルティングを手がけています。  

さらに彼は、ミシガン大学、AIIP（Association of Independent Information Professionals）、STC（Society for Technical Communication）、国立がんセンター などからいくつかの賞を受けています。   自身のブログである「Intertwingled」では、彼の貴重な知識やインサイトが紹介されています。  

UXハニカムの7面

  ピーターのUXハニカムは、ユーザーのニーズをきちんと満たす製品を提供するために、デザイナーが満たさなければならないUXの7つの側面を以下のように特定しています：

1. 有用性
2. 使いやすさ
3. 好ましさ
4. 見つけやすさ
5. アクセス性
6. 信頼性
7. 価値

  この7つの側面について、より詳しく見ていきましょう。  

1. 有用性

  有用な要素について問うべきは、「この製品や機能はユーザーにとって価値があるか」、「需要や必要性があるか」「ユーザーの問題を解決する製品か」などです。

製品や機能が有用でなければ、製品に目的はありませんし、そもそもそれを作る理由もありません。有用かどうかは、徹底したユーザー調査とエンドユーザーへの理解から来るものなのです。  

2. 使いやすさ

  「使いやすさ」は、UXデザインの重要な要素です。製品が便利でも、ユーザーにストレスを与えるものであれば、それは「使いやすい」とは言えません。  

デザイナーは、直感的なUI（ユーザーインターフェース）と情報アーキテクチャを構築し、タスクの実行や機能の使用をしやすくしながら、学習曲線を最小限に抑えなければいけません。  

プロトタイプとテストは、ペインポイントの特定やUXの向上に不可欠であり、デザイナーは、新しいリリースがユーザーニーズを満たしながらプロジェクトの要件を満たしていることを確認するのに、UX監査の実施が必要です。  

3. 好ましさ

  デジタル製品を堪能するには、美的感覚とデザイン性が必要です。なのでデザイナーは、レイアウト、ビジュアルデザイン、インタラクションデザインなど、ユーザーを惹きつけ、わくわくさせるUIデザインの要素を考えなければいけません。  

ユーザビリティテストやインタビューにおいて、デザイナーはユーザーの感情や感覚を考慮して製品の望ましさを判断する必要があり、問題を難なく解決する製品や機能によって、ユーザーを喜ばせることを目的としています。  

4. 見つけやすさ

  「見つけやすさ」とは、コンテンツや機能を見つけやすくすることです。製品を「見つけやすい」ものにするには、情報アーキテクチャ、検索、ナビゲーションが不可欠であり、デザイナーは、ユーザーのニーズとビジネスの目標に応じて、ナビゲーションの優先順位を決めなければいけません。

例えば、モバイルアプリをデザインする場合、デザイナーはどのメニューをタブバー上に配置するか、ナビゲーショナルドロワーの後ろに配置するかを決めなければいけません。  

「見つけやすい」というのものには、アラートメッセージやエラーメッセージも含まれます。例えば、フォームフィールドのエラーメッセージのように、ユーザーができるだけ早く問題を解決できるよう、デザイナーは案内しなければいけません。  

5. アクセス性

  アクセスしやすい製品をデザインすることは、現代の製品開発において不可欠であり、デザイナーやエンジニアは、身体的・精神的な能力に関係なく、誰もが効果的にサイトを閲覧し、その内容を消化できるようにしなければいけません。

アクセス性は、こうした身体的・精神的な制約にとどまらず、状況や環境による制約にまで広がっています。例えば、VUI（音声ユーザーインターフェース）は、目の不自由なユーザーがアプリケーションを使う際に便利ですが、車を運転する人にとっても重要です。  

デザイナーは、製品がどのような人に使われ、どのような状況や環境でどのような問題に遭遇するかを考えなければなりません。また、ハンディキャップについて考え、サポート技術に匹敵する体験をどのようにデザインするかを考えることも不可欠です。  

6. 信頼性

  信頼と信用は、顧客の獲得や維持に不可欠であり、 ユーザーは、「期待に応え、ごまかしのない、信頼できる一貫した製品」を期待しているのです。

例えば、有料サービスのダウングレードやキャンセルの難易度はどの程度でしょうか。こういった作業を簡単にすることは、信頼を生み、有料顧客として戻ってくる可能性を高めます。一方、難しい操作をされると、人々はフラストレーションを感じ、製品やブランドの信頼性が損なわれます。  

デザイナーは、CTA（Call To Action）と指示の内容を確実に実行するようにしなければいけません。曖昧な言葉を使ったり、ユーザーを騙してタスクを完了させたりすると、あっという間に顧客はいなくなってしまいますよ！  

7. 価値

  ユーザーは、あなたの製品を使いたい、もしくは使わなければいけないはずです。価値ある製品とは、問題を解決し、投資に対するリターンをもたらすものですが、そのリターンは金銭的なものである必要はありません。時間の節約や、他の方法ではできないことの実現、あるいは待ち時間の気晴らしになったり、喜びを与えてくれるものであってもいいでしょう。

例えば、フードデリバリーアプリは、多くの国の人々にとって、ロックダウン時に非常に貴重な存在となりました。それにより多くのレストランが営業を続けられ、客に食事を提供することができたのです。  

ユーザーを理解し、その欲求を満たすサービスの提供が、「製品の価値」となります。  

UXハニカムの使用法

  UXハニカムは、評価のための優れたフレームワークであり、ゼロからのデザインよりも、既存の製品に最も効果的です。ここでは、デザインチームがUXハニカムのフレームワークを使用する可能性のあるシナリオをいくつかご紹介します：

• デザイン負債の解消： デザイン負債には簡単に修正できるものもあるが、ユーザビリティの問題では、体系的なアプローチで問題の核心を特定する必要があり、UXハニカムで、デザイナーは問題を多角的にとらえ、根本的な原因を突き止められるようになる。
• UXチェックリスト：UX監査やその他のデザイン評価において、デザイナーに基礎となるUXのチェックリストを提供。
• 教育ツール：デザイナーは、ジュニアデザイナー、クライアント、ステークホルダー、CFT（部門横断的なチーム）に対して、UXとユーザビリティの問題がユーザーに与える影響について教育するためのフレームワークとして、UXハニカムを使うことができる。
• 再デザイン：デザイナーは、再デザインの前にUXハニカムを使って、既存製品におけるUXの欠陥を特定することができる。

UXPinで、より高い忠実度とコードのような機能でテストや実験を実施しませんか。無料トライアルにサインアップして、UXPinで顧客のためのより良いUXを構築しましょう。

The post UXハニカム – 7つの デザインフレームワーク appeared first on Studio by UXPin.

製品の進化と成長には、「ユーザーレビュー」と「フィードバック」が欠かせません。このフィードバックを使って、組織は製品の問題修正や、UX（ユーザーエクスペリエンス）の改善ができ、成長および収益のための新たな機会の特定もできるのです。  

というわけで、本記事では、デザインチームが問題解決や製品改良のために顧客からのフィードバックを活用する方法についてお話します。また、とあるビジネスが、ユーザーとの対話だけで、10年足らずで顧客ゼロから10億ドルのユニコーン企業になった例もご紹介します。  

  UXPinの高度なプロトタイピングで、製品のUXを向上させ、有意義なフィードバックを得ませんか？無料トライアルにサインアップして、顧客が共有したくなるような素晴らしいエクスペリエンスのデザインを始めましょう!  

ユーザーレビューが重要な理由

  製品分析は、デザインの問題点や成功例の特定に不可欠ですが、その問題の原因や成功の理由についてまではわかりません。この定量的なデータは、ユーザーを分析する上で非常に重要ですが、ユーザーが何を考え、何を感じているかはわからないのです。

多くの見込み客を獲得し、高いコンバージョン率を誇っていても、顧客がUXに満足していなければ、顧客の維持は難しく、もっといいオファーを出す最初の競合他社に乗り換えてしまうでしょう。  

そこで、ユーザーレビューやフィードバックで、デザインチームが顧客の感情を理解し、分析ではわからない問題や成功を特定するのです。  

ケーススタディ – Coinbaseのユーザーレビューの成功例

  2022年7月に放送されたポッドキャストで、Coinbase創業者兼CEOのブライアン・アームストロング氏は、顧客からのフィードバックを元に、当時のスタートアップのビジネスモデルを変え、アプリを通じてビットコインを購入する機能を追加したことを語っています。  

「Y-Combinatorでは、”顧客と対話し、製品を証明し、製品や市場の適合性を見つけよ “とよく言われます」。サインアップしたものの、一度もCoinbaseを利用しなかったある顧客との電話で、ブライアンは、ビットコインを持っていない人にはこの製品は何の役にも立たないことを知りました。当時、ビットコインを買うのは大変なことで、Coinbaseのウォレットに暗号を追加する方法がわからなかったのです。  

彼が顧客に、「もしそこ（アプリ）にビットコインの購入ボタンが設置されたら、あなたはそれを使ったでしょうか？」と尋ねたところ、顧客は、「そうですね、そうかもしれないですね。 」と答えました。  

そこでウォレットにビットコインの購入ボタンを追加した後、コインベースは驚異的な成長を遂げ、今では世界中で5000人以上の従業員を雇用する数十億ドル規模の企業に成長しました。ブライアンが顧客と対話し、彼らのニーズや製品への思いを理解したことが、この成功のきっかけですね。  

ユーザーとチャットする前は、ブライアンにはお金を払ってくれる顧客がおらず、Coinbaseには何の儲けもなかったことから、彼は自分の製品に疑問を持ち、これを続けるべきか迷いました。もし彼が、”身の製品がうまくいっていない”という事実しかわからない分析にしか頼っていなかったら、Coinbaseは存在しなかったでしょう！

人々が望む製品や機能を提供するには、客と関わり、ユーザーのレビューやフィードバックに対応することが不可欠なのです。

ユーザーレビューが見つかる場所

製品チームが顧客のフィードバックを集める方法は数多くありますが、ここでは、最も一般的な方法をいくつかご紹介します：

1. 製品またはウェブサイトのウィジェット
2. サポートチケットやチャット
3. 顧客への質問
4. アンケート
5. SNS（レビュー、ハッシュタグなど）
6. アプリストアとレビューサイト
7. フォーラムとコミュニティ

1. 製品またはウェブサイトのウィジェット

ツールの中には、顧客のフィードバックを集めるために、ウェブサイトやアプリケーションにウィジェットを配置できるのもあります。例えば、HotjarのFeedbackウィジェットでは、ユーザーが自分の体験を評価し、特定のUI要素やコンテンツについてコメントすることができます。

このようなフィードバックツールには、以下のような複数のUXのメトリクスに対するフィードバックを収めるためのウィジェットがあります：  

• NPS（ネットプロモータースコア）：その製品を薦める可能性を1～10で評価する。
• CSAT（顧客満足度）：顧客が製品や機能に満足しているかどうかを示す2択（「はい」か「いいえ」）の質問。
• CES（顧客努力指標）：タスクを完了するのがどれくらい難しいかを顧客に尋ね、通常は 1 ～ 10 のスケールで表示される。
• SUS（システムユーザビリティスケール）：UXデザイナーがデジタル製品のユーザビリティを総合的に判断するための質問項目10問。

2. サポートチケットとチャット

  サポートチケットやチャットの追跡は、例えば、顧客が特定の機能を見つけられないとか、タスクの完了方法がわからないなどの傾向を特定するのにとてもいいフィードバックソースとなります。  

UXデザイナーは、このフィードバックを元にさらにテストを重ねて問題の特定や修正ができ、UXベンチマークは、再デザインによって問題が解決されたかどうか、つまりサポートチケットを減らすことができたかどうかが分かることから、このような修正において非常に重要です。  

3. 顧客への質問

  Coinbaseの例で見たように、顧客に質問をすることは、ユーザー体験と成長のために不可欠であり、顧客に理由を聞くことで、製品が満たしていないニーズや期待を理解することができます。

例えば、顧客のアカウント閉鎖やプランのダウングレードの理由を聞くことが、製品の改善につながるかもしれません。このような顧客をメーリングリストに登録し、不足していた機能をリリースする際に、再度獲得するようにするのもいいでしょう。

4. アンケート

  アンケートは、顧客が何を好み何を嫌っているかを知るための優れたリソースであり、UXデザイナーは、UX調査の枠を超えて、セールス、マーケティング、カスタマーサポートなど他の部門からインサイトを集め、あらゆるタッチポイントでの顧客体験の理解が必要です。  

5. SNS

  SNSは、ユーザーレビューの発見やブランド感情の理解、顧客とのエンゲージメントには素晴らしい場所です。SNS担当者は、ユーザーの評価だけでなく、Twitter、Facebook、Instagramを利用して、ブランドに関連するキーワード、ハッシュタグ、投稿を検索し、製品に関する顧客の声を知るのもいいでしょう。  

またSNSは、競合他社に対する顧客の意見を調査し、チャンスを見極め、失敗を回避するための優れたリソースでもあります。  

6. アプリストアとレビューサイト

  製品のアプリストアや、Trustpilot、Yelp、TripAdvisorなどのレビューサイトには、実際のエンドユーザーからのフィードバックが掲載されています。星評価やキーワードでフィルタリングし、特定の問題や顧客感情を掘り下げることができます。  

また、返信の際にカスタマーサポートのメールアドレスを記入することで、ユーザーと関わり、体験談を詳しく聞くことができます。  

7. フォーラムとコミュニティ

  業界や製品のフォーラムやコミュニティは、問題やビジネスチャンスの特定に適しており、ユーザーは、質問やヘルプを求めるためにこういったプラットフォームを訪れることがよくあります。  

ブランドのコミュニティ・フォーラムを作ることで、顧客との関わりや、賛成票による機能リリースの優先順位の決定が実現できます。また、顧客はこのプラットフォームを利用して、バグの報告や、新しい機能のリクエストもすることができます。  

ユーザーレビューでどのように良くなるのか

  ユーザーレビューは、チームがそれを使って行動を起こす場合にのみ有益です。以下に、カスタマーレビューがUXを導くための方法をいくつかご紹介します：  

• ユーザー中心のデザイン：レビューによって、UXデザイナーはユーザーの視点から製品を見ることができ、より共感できるようになる。
• パフォーマンスの分析：企業は、たとえば、「機能リリース後に否定的なレビューがなくなれば、それは新しいデザインによって問題が解決されたということになる」というように、レビューをモニタリングしてパフォーマンスを評価することができる。
• UXの最適化：フィードバックとレビューにより、デザイナーは製品のUX（ユーザーエクスペリエンス）を最適化するための微調整を行い、顧客の維持と新規顧客の獲得につなげることができる。
• UXベンチマーキング：組織は、製品や競合他社のレビューを利用して、UXのベンチマークと製品目標を設定することができる。
• チャーンの減少：ユーザーレビューとフィードバックをモニタリングすることで、デザインチームは、ビジネス損失につながる前に問題を特定し、対応することができる。
• 紹介を増やす：顧客からの紹介は、低コストで優れた見込み客となり、NPSとCSATのスコアを上げることで、顧客が製品をシェアする可能性が高まる。

ネガティブなレビューとポジティブなレビュー：どれを使うか？

  チームは、以下の理由からネガティブレビューとポジティブレビューに等しく注意を払わなければいけません：  

• ネガティブなレビュー：顧客が不満を持つ理由とその解決策がわかる
• ポジティブなレビュー：顧客が製品やブランドを好きな理由がわかる

​​ このようなレビューを分析することで、機能や修正の優先順位を決めることもできます。例えば、特定の機能に対して圧倒的に否定的なレビューが多い場合、新しいものをリリースする前にその修正に注力するのがベストでしょう。  

また、競合他社のネガティブレビューやポジティブレビューを分析することで、機能の改善や同じような失敗を避けることができます。  

ユーザーレビューツール8選

  ここでは、よく利用されるユーザーレビューとフィードバックツールをいくつかご紹介します：  

1. Hotjar：フィードバックとアンケート
2. Lucky Orange：ライブチャット、フォーム解析、アンケート
3. Crazy Egg：ウェブサイト/製品の最適化、アンケート、エラー追跡など
4. FullStory：フラストレーション・シグナルとジャーニー・マッピングによるUX最適化
5. VWO 高度なユーザー追跡とA/Bテストテンプレート
6. Survicate：複数の統合機能を持つ顧客調査
7. CustomerGauge：ユーザーとアカウントレベルのエンタープライズフィードバックツール
8. SurveySparrow：アンケート、NPSソフトウェア、チャットボット、アセスメントによるエンタープライズオムニチャネルエクスペリエンスの管理

UXPinによるUXの最適化

問題や機会が特定されたら、正しい解決策を見出すのにアイデアや仮説の検証は不可欠ですが、UXPinがあれば、デザインチームは最終的な製品体験を正確に再現する高度なプロトタイプを構築できます。  

このようなプロトタイプを使って、ユーザーテストの改善や、ステークホルダーからの有意義なフィードバックを得ることができます。ユーザーは、コード プロトタイプの場合と同じようにUXPin プロトタイプを使って操作できるため、機能が何をするのかを「想像する」必要がなくなります。

そうするとデザイナーは、ユーザー サインアップフローやECのお会計、パスワード検証、および従来の画像ベースのデザインツールでは再現できないその他のエクスペリエンスを機能させることによって、動的なエクスペリエンスを作成することができます。

デザイナーは、ユーザーからのフィードバックに基づいたプロトタイプの作成や、UIのテストや問題の特定を行うことができ、競合製品のプロトタイプを作成することで、競合製品との比較を行い、改善の機会を特定することができます。  

UXPinのコードベースのデザインソリューションで、UXワークフローを最適化し、製品のUXをぜひ上げましょう。無料トライアルにサインアップして、世界最先端のデザインツールであるUXPinを使ったプロトタイピングとテストの改善をぜひご体験下さい。

The post ユーザーレビューでより良いUIデザインができるためには appeared first on Studio by UXPin.

アクセシビリティのためのデザインは、現代のWebやアプリのデザインにおいて非常に重要な部分であり、デザイナーは、UXとアクセシビリティのベストプラクティスを組み合わせて、インクルーシブなUX（ユーザーエクスペリエンス）を構築しなければいけません。   そこで本記事では、 ウェブアクセシビリティ について、その重要性と、デザイナーがワークフローに適用できる8つの重要なベストプラクティスについてお話します。  

 UXPinのアクセシビリティ機能内蔵とは、色覚異常やコントラストのテストを行うための追加ツールがデザイナーには必要ないということです。A、AA、AAAなどのWC3ガイドラインに準拠しながら、UXPinを離れることなく生産性を上げましょう。ぜひ今すぐ無料トライアルにお申し込みください。  

ウェブアクセシビリティ とは

ウェブアクセシビリティと は、デザイナーやエンジニアが、弱視、色盲、視覚障がい、認知障がい、聴覚障がい、移動障がいなどのハンディキャップを持つユーザーに対応した体験を構築するための、一連のガイドラインのことです。

W3C（ワールドワイド・ウェブ・コンソーシアム）は、世界中の政府機関と協力して、ウェブアクセシビリティ方針をまとめており、これらをガイドラインとして扱う国もあれば、アメリカ、イスラエル、カナダ、イギリスなどのように、法律によって特定のアクセシビリティポリシーを要求する国もあります。  

アクセシビリティ に関する課題の種類

ここでは、ユーザビリティとアクセシビリティを両立させるためにデザイナーが考慮すべきアクセシビリティの課題の一覧を挙げますが、アクセシビリティは、必ずしも身体的または精神的な課題を指すわけではありません。

W3Cのガイドラインでは、インターネットの速度が遅い、片手しか空いてない親など、特定のユーザーやグループを排除する状況や環境も考慮されています。

• 視覚
• 聴覚障がい
• 環境問題
• 移動性障がい
• てんかんのリスク
• 認知・学習障がい
• 偶発的または状況的な状況

アクセシビリティ が重要な理由

アクセシビリティについて考えるとき、我々はハンディキャップについて考えがちですが、必ずしもそうとは限りません。現に上記のリストは、デザイナーやエンジニアがアクセシビリティを十分に考慮しないと、世界人口の大部分が取り残されることを概説しています。  

アクセシビリティを考慮したデザインを行うことで、ウェブサイトやデジタル製品を誰もが使いやすいものにすることができます。例えば、ビデオにキャプションを付けると、耳の不自由なユーザーは物語を追いやすくなり、同時に、音声のないビデオコンテンツをユーザーが吸収することもできます。  

アクセシブルなデザインは、誰もが「自分が受け入れられている」と感じる点で最も重要です。そのためにデザイナーは、さまざまなタイプのユーザーに共感し、ウェブサイトや製品がどのように彼らを疎外しているかの理解が必要です。  

例えば、視力障がい者の学生が学校の課題について調べようとしたとき、ウィキペディアを含むほぼすべてのウェブサイトが支援機器に対応しておらず、ウェブページの移動を妨げる複数の「壁」があるとします。  

みんなと同じように情報にアクセスできないもどかしさを想像してください。あなたの人生を変えるかもしれない情報にですよ！  

ユーザビリティと アクセシビリティ – すべてのユーザーに向けた体験を作る

  我々は、ユーザビリティとアクセシビリティがどのように交差し、”すべてのユーザーにとってより優れたユーザー体験 “を生み出すかを示す、システムソフト社のこのベン図をオススメします。

このバランスを実現するために、デザイナーはUXの原則を超えて、以下のようなよりインクルーシブなUXの実現が必要です：

• W3C標準の適用：アクセシビリティチェックリストを使って、製品やWebサイトに応じて、デザインがレベルA、AA、AAAに関連するガイドラインを満たしていることを確認する。
• 支援技術のためのデザイン：Webサイトや製品は、キーボード操作や支援技術に対して、同等のUXを提供しているか。
• コンテンツへのアクセス：支援技術を含め、誰でもコンテンツにアクセスし、消化することがでるか？また、UXは同等か？

  この3つの原則をプロジェクトに適用することで、デザイナーはユーザビリティを超えた発想で、より幅広いユーザー層に対応することができるのです。  

UXを改善する8つのウェブサイトアクセシビリティのベストプラクティス

以下で、109ページに及ぶ無料のeBook『The Essential Elements of Successful UX Design』から、8つのベストプラクティスをご紹介します。  

1. 基本的なことを完璧に実行する

  アクセシビリティの実践の多くは、UXの原則とUIデザインの基本を実行しており、明確で論理的なデザインやナビゲーション、およびアーキテクチャは、誰にとっても有益です。

このような基本を無視したデザインは、ユーザビリティやアクセシビリティの問題を引き起こし、ハンディキャップがあるユーザーにとって大きな障害となります。

2. ウェブデザインにおけるキーボードナビゲーションを可能にする

  ハンディキャップある方を含め、多くのユーザーはキーボードによる操作を好むことから、ショートカットや論理的なキーボードナビゲーションが提供されれば、より多くのユーザーがウェブサイトを体験できるようになります。  

キーボードナビゲーションは、ユーザーがウェブページを「タブ」で操作できるようにするだけのものではありません。ウィキペディアの「キーボードショートカットの表」には、ウェブサイトをキーボードで操作できるようにするための包括的なリストが掲載されています。  

3. テキストの明瞭性を優先する

  読みやすさは、ハンディキャップのあるユーザーやスクリーンリーダーにとって最大の課題の1つです。コンテンツを吸収できない人は、他のユーザーに対して、特に重要なコミュニティやサポート、政府関連の情報では不利になります。  

そこでデザイナーは、誰もがテキストコンテンツを読んで理解できるように、読みやすさ（文字の明瞭さ）と可読性（テキストブロックの明瞭さ）を確実に上げなければいけません。以下は、文字を明瞭にするための簡単な4つのデザインテクニックになります：  

1. W3Cでは、テキストと背景の最小コントラスト比を「４：５：１」としており、大きなフォントや太いフォントの場合は、「３：１」の比率が許容される。
2. 本文のテキストは最低でも１６ピクセルを使う。
3. 行間はフォントサイズの１．５倍または１５０％以上とする。
4. CSSで固定ピクセルではなく、em、rem、%などのアダプティブ/レスポンシブ・フォント・サイジングを使う。

4. 色だけに頼らない

  世界人口の約4.5％（3億5千万人）に色覚異常があり、そのうち男性の方が圧倒的に多く、12人に1人（8％）の割合でいると言われています。  

デザイナーが色を使う場合、色覚異常のユーザーがコンテンツを区別できるように、2つ目のインジケータを含める必要があります。例えば、多くのメッセージの状態では、【エラー】、【警告】、【完了】など、異なるタイプのアイコンと色を使っています。

コントラストも、ユーザーに影響を与える色の問題です。特に高齢者や視覚障がい者は、色のコントラストが苦手な人が多く、それで文字を読むのが難しく、例えば青地に黒文字の場合はほとんど読めません。  

デザイナーは、常にアクセシビリティツールを使ってこのような色の問題をチェックする必要があります。UXPinには、色覚異常シミュレーターやコントラストチェッカーなどのアクセシビリティ機能を内蔵されているので、デザイナーはキャンバスを離れることなくその場で作品をチェックすることができます。ぜひ無料トライアルにごサインアップしてUXPinに組み込まれたアクセシビリティやその他の高度な機能をお試しください。  

5. HTMLコンテンツは適切に配置する

  大抵のユーザーは、ウェブページを見渡して必要なものを見つけることができますが、スクリーン・リーダーはすべての要素を読み取る必要があります。不適切なHTMLの使用、ラベル付けの欠如などは、スクリーン・リーダーの使用感を悪くすることにつながります。  

デザイナーは、エンジニアと協力してコンテンツを適切に構成し、”障害物 “に対する迂回路を提供する必要があります。たとえば、ヘッダーナビゲーションなどの繰り返されるリンクやコンテンツをスキップする仕組みを提供したり、コンテンツをヘッダータグで区切ったり、目次を含めたりすると、スクリーンリーダーがウェブページをより速く読み、ナビゲートできるようになります。  

6. リンクテキストを明示する

  スクリーンリーダーのユーザーは、ページ上のすべてのリンクをリストアップして、次に移動する場所を決めることができます。しかし、この機能は、テキストに「ここをクリック」や「もっと詳しく」としか書かれていない場合、そのリンクがどこに行くのかを文脈から知ることは不可能であることから、意味がありません。  

また、スクリーン・リーダーが文字列全体を読んだり綴ったりしなければならないため、デザイナーはURL全体をリンクとして使用することを避けなければならず、これは文字や数字を含む長く曖昧なURLの場合に特に問題となる可能性があります。  

たとえば、Mediumの記事では、重複を避けるためにURLの末尾にランダムに生成された文字や数字が使用されていますが、このUXPinの記事のURLを貼り付けると以下のようになり、スクリーンリーダーにとって悪夢となります: https://medium.com/@uxpin/have-you-tried-designing-with-code-introducing-mui-5-kit-in-uxpin-3a6d7f928dd4.   

記事のタイトルを以下のようにハイパーリンクすればもっとよくなりますね：Have You Tried Designing with Code? Introducing MUI 5 kit in UXPin  

PluralSightのこの記事では、ウェブリンクを画面読み上げソフトに対応させる方法について、より多くの例が紹介されています。  

7. タッチ操作の対象領域は４０×４０ピクセルにする

親指でリンクをタップしようとして、間違えて一番近いリンクに当たってしまったことはありませんか？どうしようもないほど腹立たしく、イライラしますよね。タッチ操作で４０×４０ピクセルのターゲットエリアを使うのは、すべてのユーザーにとって理にかなっていますが、ハンディキャップのあるユーザーにとっては特に便利です。  

8. メディアコンテンツにアクセスできるようにする

  画像、動画、音声などのメディアは、ユーザーが好みのメディアでコンテンツを消化できるため、Webページに異次元の世界をもたらします。

しかし、メディアで多くのユーザーが疎外されかねません。例えば、耳の不自由な人は音声や映像コンテンツを聴くことができませんし、目の不自由なユーザーは、画像や動画を見ることができません。そこで、メディアコンテンツをよりアクセシブルにするために重要なヒントをご紹介します：  

• 画像、アイコン、その他の静止メディアには、常に説明的で適切な「altテキスト」を使用する。
• 音声の場合は「トランスクリプト」を、動画の場合は「キャプション」を含める。
• カルーセル内のすべての画像にキャプションを付ける（キーボードナビゲーションを可能にすることも忘れずに）。
• 認知障がい、てんかん障がいのあるユーザーに害を及ぼす可能性のある自動再生を無効にする。
• ストロボや点滅効果のあるメディアは、発作を誘発する可能性があるので使用しない。

ボーナスヒント：アクセシビリティ・チェックリストを使う

  デザイナーやエンジニアがアクセシブルなWebサイトやデジタル製品を構築するのに役立つリソースがたくさんあり、UXPinにはデザイナー向けのウェブアクセシビリティチェックリストがありますが、W3Cの公式文書に従うこともお勧めします。  

UXPinによるアクセシビリティのためのインタラクティブなプロトタイピング

 デザイナーは、アクセシビリティテストのために正確なプロトタイプ・モデルを使わなければならず、プロトタイプは、テスト中に最終製品のように見え、機能し、反応しなければなりません。これにより、デザイナーは、自身のソリューションがW3Cの要件を正しく満たしているかどうかを知ることができるのです。  

UXPinのコードベースデザインがあれば、デザイナーは、コードのような忠実度と機能性を持つ、完全にインタラクティブなWebサイトや製品を構築することができます。  

例えば、このUXPinのサインアップフォームでは、入力フィールドが完全に機能するため、デザイナーは条件付きロジック、エラーメッセージ、コンポーネントのステートなどをテストし、典型的なサインアップフローの再現ができます。  

この登録フォームのようなインタラクティブなプロトタイプは、ユーザビリティの参加者に本物のユーザー体験を提供するため、デザイナーはすべてのユーザーを対象としたテストから有意義で実用的な結果を得ることができます。

無料トライアルにサインアップして、プロトタイプ作成、テスト、イテレーションをより迅速かつ正確に行い、お客様に優れたUXを提供しましょう。

The post ウェブアクセシビリティ – 8つの重要なベストプラクティス appeared first on Studio by UXPin.

このレスポンシブWebデザインガイドは、複数のビューポート幅に対応するデザインのプロセスを段階的に説明するものです。このプロセスをUXワークフローに組み込むことで、デザインチームがユーザーインターフェースをデザインする際に、さまざまな画面幅を考慮することが可能になります。

UXPinでデザインする場合、ウェブ、iOS、Android、カスタムキャンバスの各サイズから選択できます。無料トライアルにサインアップして、UXPinを使った色々なデバイス向けのデザインがいかに簡単であるかをご確認ください。

レスポンシブデザイン とは

レスポンシブデザインとは、複数のビューポートに対応するユーザーインターフェースをデザインするプロセスです。使用するデバイスに関係なく、一貫したユーザーエクスペリエンスの提供を目的としています。

従来、レスポンシブWebデザインは、携帯電話、タブレット、デスクトップという3つの主要スクリーンを考慮していましたが、現在ではスマートウォッチ、テレビ、車のダッシュボード、冷蔵庫など、デザイナーが手掛けるスクリーンやデバイスの数は増えています。また、製品によっては音声も含まれるため、デザインチームはVUI（音声ユーザーインターフェース）も取り入れなければなりません。

ステップ1： レスポンシブデザイン の理解

デザイナーは、レスポンシブUIのデザインを始める前に、レスポンシブデザインと、デベロッパーが製品に用いる技術の理解が必要です。

例えば、エンジニアはCSS（カスケーディングスタイルシート）を使ってユーザーの画面サイズに応じた画像を提供することもできますし、自動的に最適化するツールを使うこともできます。前者の場合、デザイナーは複数の画面サイズに対応したアセットを用意しなければなりませんが、後者の場合は1つで済みます。

そのため、デザイナーはプロジェクト始動前にエンジニアと相談し、以下のような質問をして、技術的な要求や制約を理解しておく必要があります：

• 製品はレスポンシブグリッドかフルードグリッドを採用していますか？
• 製品のブレイクポイントは？
• オペレーティングシステム（Apple iOS、Android、Windows）は、製品のレイアウトに影響を与えますか？
• エンジニアはどのように画像のスケーリングや配信をしていますか？
• エンジニアが使用する動画や画像、アイコンなどのメディアはどのような形式ですか？
• 製品はどのようなグリッドシステムを採用していますか？
• 製品にFlexboxや通常のCSSが使われていますか？

レスポンシブ グリッドとフルードグリッド

レスポンシブグリッドは、ピクセルを使用した標準の12列グリッドシステムを使ってサイズ設定します。ピクセルの使用というのは、エンジニアがCSSメディアクエリでのみ変更されるコンポーネントまたはコンテナのサイズを設定するということです。フルードグリッドは、パーセンテージを使用し、利用可能なスペースに応じてUI要素のサイズを変更することができます。

ステップ2：ブレークポイントの確定

例えば複雑な機能の中には、モバイル版とデスクトップ版のアプリケーションでできることが制限されるものがあるように、ブレークポイントをリストアップすることで、デザイナーは、各デバイスに対応した情報アーキテクチャ、レイアウト、機能を計画することができます。

最も一般的なブレークポイントは以下の通りです：

• デスクトップパソコン – 最大幅: 1200px
• ノートパソコン – 最大幅: 991px
• タブレット – 最小幅: 768px, 最大幅: 990px
• スマートフォン – 最大幅: 500px

例えば、iPhone 13は390ピクセル×844ピクセルで、横長と縦長では幅が2倍以上違うといったように、デザイナーは、画面の向きやランドスケープレイアウトでのデザインの調整についても考慮が必要です。

ステップ3：コンテンツ優先のアプローチ

コンテンツを中心にレイアウトをデザインすることで、直感的で操作しやすいUIを構築でき、コンテンツの階層を確定することで、ブレークポイントに応じたレイアウトの整理が可能になります。

デザイナーは、ユーザーにやって欲しいアクションに関連する階層の考慮が必要です。例えば、ブログフィードの目的は、ユーザーに記事の一覧を表示し、興味のあるものをクリックしてもらうことであり、そのためには、記事のクリックを促す画像と見出しが最も重要な要素となります。

デスクトップフィードでは、記事の抜粋、公開日、著者、カテゴリータグなど、より多くの情報を含めるためのスペースがあり、ユーザー調査やインタビューは、ユーザーにとって何が最も重要であるかに応じて、レスポンシブデザインを導くことができます。

ステップ4：モバイル優先のデザイン

モバイル優先のデザインは、最小のスクリーンサイズから始めて、拡大していくプロセスですが、このデザイン戦略には、主に2つの利点があります：

1. 小さな画面という制約の中で、デザイナーは最も重要な機能とUIコンポーネントのみを搭載することを余儀なくされます。不要な機能を削減することで、コストと市場投入までの時間が短縮されます。
2. モバイルレイアウト（小画面）を大画面に変換する方が、その逆よりも速くて簡単です。デスクトップ優先のデザインは、しばしばモバイル版へのスケールダウンのために妥協やデザインの変更を余儀なくされます。

モバイルファーストのアプローチは、ウェブデザインにおいてもビジネス的な意味を持ちます。例えば、Googleはモバイルフレンドリーなコンテンツを優先します。つまり、レスポンシブデザインはSEOに有利で、上位に表示され、より多くのクリックを生み出す可能性があります。

ステップ5: コンテンツの優先順位付け

モバイル優先とコンテンツ優先のアプローチの一環として、小さなデバイスで常に見えるコンテンツを優先し、ナビゲーションの引き出し、ドロップダウンメニュー、アコーディオンの後ろに隠すべきものを選択します。

例えば、デスクトップのレイアウトでは、デザイナーはFAQセクションの質問と回答をユーザーに表示することがよくありますが、このようなレイアウトでは、モバイル端末でユーザーが目的のものを見つける場合、すべてのQ&Aをスクロールしなければならないことになります。その代わりに、小さな画面に質問を表示し、答えをアコーディオンの後ろに隠すことで、モバイルユーザーのスクロールを減らすことができます。

ステップ6： レスポンシブ な画像と動画

プロジェクト始動時にメディアフォーマットを決めておくと、後々のデザイナーの手直しを省くことができます。例えば、デザイナーはアイコンにPNGを使うかもしれませんが、エンジニアはレスポンシブレイアウトに対応しやすく、パフォーマンスも高いSVGを使うかもしれません。

複雑なレスポンシブデザインでは、デバイスやビューポートに応じて異なるメディアを提供するのに、複数のサイズとフォーマットが必要になる場合があります。これらのフォーマットについて最初から合意しておくことで、デザイナーはプロトタイプを正しくテストし、よりスムーズなデザインのハンドオフのためのアセットの準備ができます。

ステップ7： レスポンシブ ・タイポグラフィ

タイポグラフィは、ブランド/アイデンティティ、読みやすさ、音声、読みやすさに影響を与える重要なデザイン要素です。デザイナーは何時間も何日も、あるいは何週間もかけて熟慮を重ね、複数のデバイスに対応する書体を選択します。

A guide to responsive typographyでは、UXデザイナーのオーガスティン・トーマス氏が、レスポンシブ・タイポグラフィーのためにデザイナーが考慮しなければならないことを、以下のように挙げています：

• 正しいタイポグラフィの選択
• タイポグラフィーのスケールの選択
• アライメントとスペーシング

画像、ビデオ、グラフィックなど、プロジェクトのコンテンツは、上の3要素に大きな影響を与えることから、正確な結果を得るには、ダミーテキストを避け、必ず実際のコンテンツで書体の組み合わせをテストしてください。

ステップ8：レスポンシブ デザイン・パフォーマンスの最適化

パフォーマンスはデベロッパーの仕事であることが多いのですが、デザイナーの負担を減らすためにできることがいくつかあります：

システムフォントの使用

iOSではSan Francisco、AndroidではRoboto、WindowsではSegoe UIが使用されています。このデフォルトフォントを使用することで、レスポンシブWebサイトやアプリケーションは追加のリクエストの必要がなく、パフォーマンスを向上させることができます。

美しさよりもパフォーマンスを優先する製品の場合は、カスタムフォントの代わりにシステムフォントを使用することを検討してください。すべてのオペレーティングシステムで一貫した結果を得るには、必ずそれぞれのフォントで製品をテストをしてください。

アニメーション

CSSやJavascriptのアニメーションは、パフォーマンスに影響を与え、ユーザーエクスペリエンスに悪影響を与える可能性があります。逆に、エンジニアが機能のロードに数秒を要する場合、デザイナーはアニメーションを使用することができます。この2つの適切なバランスを見つけるには、デザイナーとエンジニアの連携とテストが必要です。

まとめ

RWD（レスポンシブWebデザイン）と最適化は、デザイナーとエンジニアの連携に大きく左右されます。画像ベースのデザインツールを使用すると、デザイナーが正確に応答性をテストするのは不可能になります。

デザイナーは、いくつかのレスポンシブ要素を考慮し、コンテンツ、レイアウト、タイポグラフィー、その他のUI要素が複数のビューポートでどのように相互作用するかの考慮が必要です。

Mergeによる レスポンシブデザイン

レスポンシブデザインの課題のひとつは、画像ベースのデザインツールの静的な性質により、デザイナーが複数のビューポートでUIやコンポーネントを正確にテストできないことです。

ウェブページの正確なテストには、デザイナーにはほとんど知られていないHTML、CSS、Javascriptを使うしかないのです。

UXPin Mergeはコードベースのデザインツールで、デザイナーはエンジニアが使用するのと同じコンポーネントを使用してプロトタイプとテストを行うことができます。また、エンジニアはレスポンシブ・プロパティをプログラムすることができるので、UI要素がプロトタイプでも最終製品と同じように機能します。

UXPin Mergeとは

UXPin Mergeは、製品のコンポーネントライブラリをUXPinのデザインエディタに同期させ、デザイナーが完全に機能するコードコンポーネントを使用してプロトタイプを作成できるようにするものです。

Git または Angular、Ember、Vue、およびその他のフロントエンド フレームワーク用の Storybook 統合を使って、React コンポーネント ライブラリを Merge に直接接続することができます。

Mergeを使用したレスポンシブコンポーネントの作成

Reactコンポーネントライブラリを用いて、エンジニアは、IFrameコンポーネントがレスポンシブプロパティ、メディアクエリ、スタイリングに反応するようにプログラムし、最終製品のコンポーネントと同じレスポンシブ機能を提供することができます。

UXPin Merge を使ってレスポンシブなコンポーネントを構築するためのステップバイステップのチュートリアルをご覧ください。

テストの強化

複数のフレームを使用する代わりに、単一のフレームとコンポーネントを使用して、コードと同じレスポンシブな機能の実現ができます。また、これらのUI要素は、最終製品と同じ忠実度と機能を持ち、デザイナーはユーザビリティテストやステークホルダーからの有意義なフィードバックが得られます。 Merge を使用すれば、デザイナーはコードを書いたり、エンジニアに頼ったりすることなく、コンポーネント ライブラリからきちんと機能する応答性の高い UI 要素を使用してプロトタイプやテストの作成ができます。

デザインハンドオフの効率化

これらのレスポンシブ Merge プロトタイプは、デザインのハンドオフの効率化を実現し、市場投入までの時間が短縮されます。エンジニアは、デザインをレスポンシブ コードに変換するための複数のモックアップやドキュメントの検査が必要なくなり、レポジトリからコンポーネントをコピーして貼り付け、UXPin から JSX の変更を行うだけで、ウェブ開発プロセスを開始することができます。

世界最先端のデザインツールで、レスポンシブプロトタイピングとテストを改善しましょう。無料トライアルにサインアップし、MUI 統合による UXPin Merge をお試しください。

The post レスポンシブデザインガイド – 簡単な8ステップ appeared first on Studio by UXPin.

デザインがデザイナーの創造性だけに頼っていたのは、もう昔の話です。

技術は高度化し、ユーザーの要求も高度化しています。UXデザインは、アートとサイエンスの境界を曖昧にしています。Adobeによると、38%の人が、レイアウトやコンテンツの見た目がよくないと、そのウェブサイトを利用しなくなるそうです。また、画像の読み込みに時間がかかると、同じような割合でウェブサイトの訪問をやめると言われています。

そこで、劣悪で直感的でないデザインでダメになるのを回避できるように、データサイエンスの世界に入ってみましょう。

推測を排除する

うまくいくUXデザインには、しっかりとした科学的根拠があります。データに基づいた意思決定は必須です。そのため、デザインを始める前に、科学的手法を模倣した6つのステップを踏むことが不可欠なのです。

• 質問
• リサーチ
• 仮説
• 実験
• 結果分析
• データに基づいた意思決定とその実行

ウェブサイト訪問者が長く滞在し、コンバージョンに至るには何が必要なのか、決して闇雲にダーツを投げたり、思い込みで判断してはいけません。情報の海を潜り抜け、自分に必要なものを探し当てるのです。とはいえ、ユーザーの嗜好に関する膨大なデータをすべて集めることが問題なのではなく、そのデータを体系的に処理・分析し、すぐに使える見解を出すことがポイントなのです。

Google Analytics（GA）はその助けになるかもしれません。このツールは無料で、訪問者についての貴重な情報を得やすくします。訪問者がウェブサイト上で何をしているか、何を探しているか、どこから来たか、各ページにどれくらいの時間を費やしたか、特定のコンテンツに興味を持ったか、モバイル訪問者はデスクトップ訪問者と異なる行動を取ったか、など様々なことを知ることができるのです。

Google Analyticsの活用方法：

直帰率の最適化

直帰率が最も高いページと最も低いページを査定します。GAでは、各ページのレポートにアクセスできる以外に、ランディングページを分析し、訪問者がウェブサイトに入るソースを確立することができます。

平均ページ滞在時間指標の改善 

その名前が示すように、このレポートは、訪問者が特定のページでコンテンツに関わった時間を示しています。平均時間が短いということは、特にそのページが長いブログ記事を掲載している場合、訪問者がコンテンツにあまり反応していないことを表しています。ということは、コンテンツを最適化する必要があります。しかし、場合によっては、訪問者がすぐに去ってしまうのは、探していた情報が簡単に見つかったからということもあります。

デバイス使用状況の把握

これは、近年ますます重要度が上がっている指標です。Cisco Mobile Forecastが言うように、モバイルトラフィックは年々膨大な量へ増え続けています。このレポートで、訪問者がどのようにあなたのウェブサイトにアクセスしているかを調べてみましょう。モバイルセッションが極端に短いことに気づいたら、事態を修正し、マルチデバイスに対応したアプローチをとりましょう。

人口統計の把握

性別、年齢、興味、教育レベル、収入、場所、その他の情報は、ユーザー体験や満足度に関して、ターゲットの要件や好みを理解するのに非常に重要です。

データサイエンス＋UXデザイン＝コンバージョンの向上

関連する指標に基づいて、訪問者の注意を引き、フォームへの入力や購入を促すことができるUXデザインのウェブサイトを構築することができます。膨大な量の処理済みデータにアクセスすることで、魅力的で機能的なデザインにするために具体的に何をすべきかをピンポイントで判断することができるようになります。

レイアウトの微調整

A/Bテストは、Webページ上の各要素のパフォーマンスを判断する最も効果的な方法として、長い間利用されてきました。しかし、この一か八かの方法は時間がかかります。したがって、訪問者のインタラクションに基づいて適応する動的なウェブサイトデザインが良いのです。ヒートマップ分析も、コンバージョンを押し上げるための戦術のひとつです。視線やマウスカーソルの動きを観察することで、どのような色、フォント、ボタン、コンテンツの種類が訪問者の心を動かすかを知ることができます。これはかなり難しいので、ウェブデザインを専門とする高名なエージェンシーの作品をチェックして、そのコツをつかむとよいでしょう。

コンテンツに磨きをかける

ご存知のように、コンテンツは依然として幅をきかせています。しかし、訪問者が興味のあるトピックに関する有益な記事を見つけられないのであれば、あまり意味がないですよね。そこで検索ボックスが必須になります。検索ボックスは小さな要素なのですが、訪問者にウェブサイト内を簡単に案内してくれるだけでなく、訪問者が得た検索結果が彼らの探しているものと一致するかどうかを照らし出してくれるのです。その結果、コンテンツの価値が高まり、彼らの期待に応えることができるのです。

体験を個別化する

関連する訪問者のデータは、コンテンツをカスタマイズし、それぞれの訪問者にユニークで個別化された体験をもたらすのに欠かせません。重要なのは、画一的な定型文や、ありきたりな一般的な方法でのターゲットオーディエンスの対応を避けることです。むしろ、CTAやメッセージ、ビジュアルを工夫することで、より深く、よりパーソナルなレベルで、訪問者と繋がりましょう。区分を行うことで、異なるターゲットグループに適切なメッセージと画像を提供し、彼らが興味がないような余計な情報を避けることができます。

トラフィックを分析する

新しいリード線は、すべてのビジネスの生命線です。リードジェネレーションのプロセスを最適化する方法を理解するには、何が最も効果的な方法であるかを特定し、それを主張しなければなりません。あらゆる獲得チャネルを評価し、最も質の高いトラフィックをもたらすチャネルを活用しましょう。

データ価値を最大化する

データを評価する際に留意すべき点：

A/AテストはA/Bテストと同じように有用である

データの報告ミスにより発生する偽陽性結果を防ぐために使用されます。A/Bテストの結果のうち、誤検出が占める割合は実に80%とのこと。しかし、2つのランダムなグループに、2つの異なるバリエーションではなく、同じランディングページやCTAを見せれば、分析ツールだけでなく、実行の質も確保できます。

ノベルティ効果に注目

リニューアルしたWebサイトの初期のパフォーマンスが、稀に急激に上昇傾向を示すことがあります。UXデザインが改善されたからではなく、その変化した姿に興味を持ったからです。しかし、このような現象はすぐに収束し、より現実的な状況を目の当たりにすることになります。

トワイマンの法則に注意

面白い統計や変わった統計が正しいと誤解させられることがあります。この不具合は、ある種の偏り、データの誤り、あるいはデザインやテストの状況が悪いことが原因であることもあります。

計装効果は、UXデザイン研究の妥当性を脅かすもう一つの要因です。

これは、経過の途中で測定器や観測者、測定装置を変更した場合に発生します。なので、実験は必ず本番前にテストしてください。つまり、ブラウザやデバイスを変えてみたり、より念入りなチェックをして、問題が起きないようにするということです。

結論として、データサイエンスはUXデザインを成功させるために不可欠なものとなりえます。データサイエンスは、訪問者の行動と期待を把握する鍵を握っていますが、必ずその使い方を学び、潜在的な落とし穴を認識しておかないといけません。

The post データサイエンス×UXデザインでデータドリブンな最高なUIUXを！ appeared first on Studio by UXPin.

UXPinでは、変数を使って情報を保存・移行、条件付きのインタラクションの追加ができるようになりました。プロトタイピングが、今まで以上にさらにインタラクティブになりました。 これらの新機能により、実際にコード化されたアプリケーションにぐっと近づくことが可能になりました。 特にユーザーテストの際に大変便利になります。

この記事では、UXPinの2つの新機能についてや、それらの機能のつながりをご紹介します。

各新機能のご紹介

変数

変数によって、いくつかの要素がページ中に分散している場合でも、互いに「通信」することができます。 このデータは、プロトタイプを通してクリックしてもページ間で保持されます。 つまり、とあるページで変数の値を設定してから、まったく別のページでその値に基づいた実行をすることができるのです。

変数を使用すれば、プロトタイプにおける要素の間での関係を構築できます。これをするには、組み合わせたい要素に同じ変数を設定するだけです。 たとえば、入力でユーザーデータを収集するには、プロトタイプの別の部分のメッセージで「ユーザーネーム」を使用すればいいのです。

条件付インタラクション

条件付きインタラクションによって、プロトタイプに論理レイヤーが付きます。これは、ほんの一握りのプロトタイピングツールにだけ備わった特徴的で非常に素晴らしい機能です。 そして、UXPinはその数少ないツールのうちの１つなのです。 条件付きインタラクションにより、条件が満たされた場合にのみインタラクションが発生するルールを設定することができます。

新機能を使うタイミング

• 名前などの情報を収集し、それを別のページに移して挨拶メッセージの一部として表示する時
• ユーザーが入力したデータを簡単に保存し、プロトタイプの要素やページ間で再利用する時
• プロトタイプのコンテンツと動作をユーザーテストのさまざまなシナリオに合わせて調整する時

取り入れた理由

• プロトタイプをより最終製品に近いかたちにし、ユーザーによるデータまたはアクションを操作しているように感じさせるため（特にユーザーテストの場合）
• プロトタイプはより動的になり、一般的ではなくなるため。
• ソリューションが実際にどのように機能するかを（例えば開発者に）示すのがはるかに簡単になるため。
• さまざまなユースケースに合わせて構成しなおす必要がないため、より柔軟なプロトタイプを作成し、作成にかかる時間を大幅に節約できるため。

最後に

UXPinを使用されている場合、これはすべてアカウント（Web・デスクトップ両方）に既に存在します。まだUXPinを使っていない方は、今回ご紹介した変数と条件付インタラクションを試してみませんか？

UXPinの無料トライアルサインアップはこちらまで。

The post インタラクティブなプロトタイピングを導く – 変数と条件付きインタラクション – appeared first on Studio by UXPin.

携帯電話、ウェアラブル、スピーカー、車、冷蔵庫に至るまで、あらゆる製品に音声ユーザー・インターフェース（VUI）が搭載されています。Statistaによると、音声アシスタントデバイスの台数は2024年までに84億台を超え、世界の人口を上回るとされています。

2019年5月時点で、9万400台以上のスマートホームデバイスが音声アシスタントに対応しており、そのうち6万台以上がAmazonのAlexaです。VUIがスクリーンに取って代わるかどうかは分かりませんが、音声製品の需要がますます高まっていることがわかります。

VUIとそれに付随する情報アーキテクチャの設計は、UXチームにとって複雑かつエキサイティングな試みです。この記事では、VUIの設計と、デザイナーが顧客にとってより良い音声体験を生み出す方法について見ていきます。

VUIの使用例「あなたの製品に音声は必要ですか？」

どんなデバイスやアプリケーションでも音声で動作するからといっても、実際にそれが必要とは限りません。デザイナーは、音声コマンド、スクリーンUI、またはその両方の組み合わせのいずれかがユーザーに最適なのかを評価するために、各製品を個別に評価する必要があります。

例えば、金融や健康といったセンシティブなデータを扱うアプリケーションは、特に個人情報に気をつけなければなりません。デザイナーは、このようなセンシティブなデータに関する倫理と法律の両方を考慮しなければなりません。

VUIの最適な使用例としては、料理中、運転中、運動中などの手や体を使う必要があるときに、ハンズフリーで操作できるようにすることが挙げられます。

徹底したリサーチとユーザーインタビューにより、音声がユーザーの悩みを効果的に解決するのか、あるいはユーザーがタスクをより良く、速く完了できるようになるのかをデザイナーが判断することができます。

VUIはどのように情報を処理するのか？

VUIは、人工知能・機械学習、音声認識、効果音、音声合成（TTS）を組み合わせて、ユーザーと対話するものです。

VUIのユーザーへの語りかけ方

音声デザインの専門家であるGuillaume Privat氏は、AppleのSiri マネージャーとして、「VUIデザイナーは、プロンプトとステートメントを区別する必要がある」と述べてます。

• プロンプト：VUIからの質問「ご用件は何でしょう？」 など。
• ステートメント：VUIの回答やコメント、その他のコミュニケーションにおいて必ずしも応答を引き出さないもの。例「こんにちは、Jane」や「Britney SpearsのHit Me Baby One More TimeをSpotifyで再生中」など。

プロンプトは、ユーザーの期待に応えつつ、システムの制約を考慮した質問を投げかけなければならないため、デザイナーにとっていくつかの課題があります。

例えば、オープンエンドのプロンプトは、人間の複雑なコミュニケーションにAIがさらされることになりますが、クローズドエンドの質問は扱いやすくなります。

設計者は、選択肢を最大3つに制限することでプロンプトを最適化することができます。これは通常、頻繁に使用される機能に対応します。

例えば、銀行アプリの場合、VUIで「残高確認、請求書払い、またはその他を行いますか？」といった事を尋ねるかもしれません。

また、ユーザーがすぐに反応しない場合のためにも、再送信のプログラムも考慮する必要があります。再送信は、大切な人があなたの質問を聞いていないと思ったときにするような、自然で会話的な表現でなければなりません。

ステートメントは、ユーザーの質問に対する答えを提供するだけでなく、プロンプトに続く指示を確認するものです。

例えば、

「あなたは20ドルを電気会社に支払いたいのですね。」（ステートメント）

「これは正しいですか？」(プロンプト)」となります。

音声ユーザーインターフェースに関する8つの考慮する点

ユーザーの期待値を管理することは、VUIデザインの最大の課題の一つです。適切なエラー処理や音声アシスタントからの明確な指示がなければ、ユーザーはしばしば「使えない」と思い、製品を使わなくなってしまいます。

また、背景の騒音やアクセント、明瞭度、音量など、声のニュアンスも考慮しなければなりません。その上で、言語そのものの複雑さも忘れてはいけません。

私たちは、VUIデザインの課題を克服するための成功事例を何人かの著名なUXデザイナーにリサーチしました。

1. ユーザーペルソナ

どのようなデザインプロジェクトでもそうですが、ペルソナはユーザーとの共感において重要な役割を担っています。VUIのユーザーペルソナは、声のトーン、一般的な単語の選択、文章の構造などの詳細も含める必要があります。また、アメリカ・カリフォルニア州とイギリス・ヨークシャー州の人々の話し方など、文化の違いも考慮しなければなりません。

2. デバイス

ほとんどのビジュアルUIデザインは、モバイル、タブレット、デスクトップでの体験に焦点を当てていますが、音声インターフェースは、以下のように多くの可能性を秘めた、はるかに複雑なものです。

• スマートフォン
• タブレット端末
• デスクトップ
• テレビ
• スマートスピーカー
• ホームシアターシステム
• カーステレオ
• ウェアラブル
• ヘッドホン
• モノのインターネット(IoT)
• 家電製品

場合によっては、1つのVUIを複数のデバイスで動作させなければならず、ユーザーとシステムの相互作用に影響を与えることもあります。設計者はこれらの要因を考慮し、複数のデバイスや環境において一貫したユーザーエクスペリエンスを維持する必要があります。

3. VUIのマイクロインタラクションおよびシステムステータス

マイクロインタラクションは、ユーザーエクスペリエンスを向上させるための強化やフィードバックを提供します。デザイナーは、システムの状態やステータスを示すために、効果音、画面アニメーション、触覚フィードバック、LEDイルミネーションなどを選択することができます。

VUIのマイクロインタラクションで欠かせないのは、ユーザーが 「Hey Siri 」や 「Hey Alexa 」と言った後の「目覚まし」です。デザイナーは、VUIがユーザーの指示を受ける準備ができていることを示すことが必要です。また、デザイナーはVUIが聞いていることを示すためにもディスプレイのないスピーカーやデバイスに特定のLEDを使用する必要があるかもしれません。

4. VUIトリガー

デザイナーは、ユーザーエクスペリエンスを向上させ、ユーザーに付加価値を与えるために、いくつかのVUIトリガーを使用することができます。ここでは、いくつかの例と使用例を紹介します。

• 音声：VUIを起動し、対話するための主要なトリガーです。
• タッチ：UIコンポーネントや物理的なボタンを使用する。
• モーション：ウェアラブルやスマートフォンの中には、特定の動きを検知してVUIや機能を起動させるものがあります。
• 時間：リマインダーやイベントの日付と時間によって、VUIの応答やシステムのアクションが起動します。
• 位置情報：VUIは、地理的な位置情報を利用して、リマインダーやアクションをトリガーすることができます。

機械学習は、VUIのトリガーの可能性を広げ、命を救うフィードバックやアドバイスも提供することができます。

例えば、あなたが知らない街を運転している場合、音声アシスタントは、リスクの高い犯罪地域に入る前に警告したり、前方の事故を知らせたりすることができるのです。

5. ユーザーにコントロールを与える

ユーザーエクスペリエンスの重要なファクターとして、ユーザーによるコントロールが挙げられます。デザイナーは、VUIがユーザーに「1マイル以内のすべてのレストラン」のような長いコンテンツのリストを聞くことを強いるかもしれないことを考慮する必要があります。また、「車いすで入れるレストラン」のような具体的な情報は、最初から入力することなく、ユーザーが中断したり、追加したりできたほうが良いでしょう。

6. VUIのアクセシビリティ

また、VUIをアクセシブルにすることも考慮しなければなりません。音声認識の課題として、声の震え、発話障害、第二言語話者などがありますが、デザイナーはこれらを克服しなければなりません。

認知障がいや聴覚障がいでは、情報を咀嚼することが困難な場合が多々あります。その解決策のひとつは、ユーザーのためにゆっくり、あるいは大きな声で繰り返すという選択肢を入れることです。デザイナーは、VUIのプロンプトとステートメントを簡潔に保ち、「より多くのコンテキストを追加する」または「詳しく説明する」オプションがあることも考慮する必要があります。

デザイナーは、第二言語話者、障がい者、または認知障がいを持つ人々を混乱させるかもしれない曖昧な表現を避けるべきです。また、専門用語、略語、頭字語は、ユーザーに疎外感を与える可能性があります。

情報が吸収され、解釈されやすいように、全体の単語と自然な言語を使用する必要があります。

7) GUI（グラフィカル・ユーザー・インターフェイス）の統合

ホームマネジメントシステムやIoTには、VUIをサポートするGUIタッチスクリーンやモバイルアプリが付属していることが多い。GUIは、音声アシスタントと対話するための別の選択肢をユーザーに提供することで、アクセシビリティやユーザビリティの問題を解決することにも役立ちます。

8）VUIのデザインパターン

VUIは、ビジュアル・インターフェースに比べるとまだ初期段階にあるため、業界標準のVUIパターンやアクセシビリティ・ガイドラインを開発するには、まだまだ多くの作業が必要です。それでも、Amazon、Samsung、Google、Appleから役立つ情報やガイダンスを見つけることができます。

Amazon Alexaの開発者向けドキュメントでは、デザインパターンを4つのセクションに分け、それぞれを以下のように要約しています。

1. 適応性がある：ユーザーが自分の言葉で話せるようにする。
2. 個別化する: インタラクション全体を個別化する。
3. 利用可能である：メニューは折りたたみ、すべての選択肢をトップレベルにする。
4. 親近感を持ってもらう：相手に向かって話すのではなく、相手と一緒に話す。

VUIのデザインパターンについてより多くのアイデアを得るために、主要な音声アシスタントのドキュメントへのリンクを以下に示します。

• AppleのSiri：Siri for Developers（開発者のためのSiri）
• AmazonのAlexa：Alexaデザインガイド
• Googleアシスタント(Google Home)：Googleでのアクション
• SamsungのBixby：Samsung Developers
• Microsoft：音声アシスタントのドキュメント

感想

音声ユーザーインターフェースデザインは、エキサイティングで進化し続ける分野であります。AIと機械学習によって、ユーザーは仮想アシスタントと人間のような絆を築き、家族の一員として迎え入れることができます。

AmazonのEcho Dotを購入されたお客様の口コミより：

「AI？そうかもね。人が私を笑わせたり、微笑ませたりすることはめったにない。でも、アレクサは違う。アレクサが家にいることで得られる楽しみ、それは決して 『人工的 』なものではない。」と。

UXデザイナーは、VUI技術がユーザーを楽しませ、人間体験（HX）を高めることができるクリエイティブな方法を探さなければなりません。正しく設計すれば、音声アシスタントは、人々がスクリーンやデバイスと物理的に対話する時間を減らすことができます。

UXPinでユーザーエクスペリエンスを向上させる

どのようなプロジェクトであっても、優れたデザインの基礎となるのは反復的な改善です。デザインチームが連携・調整するためのツールを使用すれば、市場投入までの時間を短縮し、よりスマートなデザインを選択し、素晴らしい製品体験でユーザーを驚かせることができます。

UXPinは、創造性とコラボレーションを促進する、エンドツーエンドのコードベースのデザインツールです。UXデザイナーは、他の主要なデザインツールよりも高い忠実度と機能性で、デザイン、プロトタイプ、テスト、イテレーションを迅速に行うことができます。

無料トライアルに登録し、世界最高のデザインツールによってUXワークフローがどのように強化され、カスタマーエクスペリエンスが向上するのか是非、実際にお確かめください。

The post VUI：音声UIのためのデザイン appeared first on Studio by UXPin.