Top 10 UX Articles of 2023

これは何

Top 10 UX Articles of 2023

These 10 user-experience articles published in 2023 were those that our audience read the most.

https://www.nngroup.com/news/item/top-10-ux-articles-of-2023/

記事一覧

1. How to Conduct a Heuristic Evaluation

• ヒューリスティック評価は、ユーザーインターフェースの設計問題を特定するための方法で、使いやすさを向上させるガイドライン（ヒューリスティック）に基づいて行われる。
• 「ヤコブ・ニールセンの10のヒューリスティック」
• システム状態の可視化
• 「システムがいま現在どのような状態なのか」をユーザーにわかりやすく伝える
• システムと現実世界の一致
• ユーザーにとって馴染みのあるフレーズやアイコン、画像、操作ボタンのレイアウトなどを採用する
• ユーザーに制御の主導権と自由度を提供
• ユーザーが間違った操作を行った場合、かんたんに元の状態に戻せるように設計する
• 一貫性と標準性を保持
• システム内では、一貫性のあるデザインや用語を使用する
• エラー防止
• ユーザーがエラーを引き起こす可能性を最小限に抑える
• 覚えなくてもわかるデザイン
• 情報をシンプルにし、かつ適切なレイアウトやグルーピング、階層構造で設計する
• 柔軟性と効率性
• システムを利用するユーザーは、初心者から上級者までを想定し、幅広いユーザーが使いやすいように設計する
• 美しさとシンプルなデザイン
• ユーザー自身で認識、診断、回復ができる
• 何が問題なのか、何が起こっているのかをメッセージによって正確に提示する
• ヘルプとマニュアルの準備
• ユーザーが必要な情報やサポートにアクセスしやすい環境作り
• Workbook

• この評価は、設計プロセスの初期段階や、限られたUXリサーチ予算の下で特に有用だが、ユーザーリサーチに代わるものではない。

• チームが評価を行う際には、各メンバーがヒューリスティックを理解した上で、独立して同じインターフェースを評価。
• ヒューリスティック評価は、1人の評価者ではなく、複数人で行うのが最も効果的。各個人が(どんなに経験豊富で専門家であっても)潜在的なユーザビリティの問題を見落とす可能性が高いため、

• 評価者は製品を使ってタスクを行い、設計の要素が10のヒューリスティックに違反していないかを確認する。

• 最後に、チームメンバーは独立した評価を集約し、議論を通じて重要な問題を特定し、解決策を検討。

Heuristic Evaluations: How to Conduct

Step-by-step instructions to systematically review your product to find potential usability and experience problems. Download a free heuristic evaluation template.

https://www.nngroup.com/articles/how-to-conduct-a-heuristic-evaluation/

2. User Journeys vs. User Flows

1. ユーザージャーニー：ユーザージャーニーは、高レベルの目標を達成するためにユーザーが複数のチャネルや時間をかけて取る一連のステップ。多くの相互作用点を考慮し、ユーザーのアクション、感情、思考を含む広い視野で捉える。

2. ユーザーフロー：ユーザーフローは、製品で実行される一般的なタスクを達成するための一連の相互作用を記述する。これはより具体的で、製品内の特定の目標に焦点を当てています。ワイヤーフロー、フローチャート、タスク図が表現方法です。

3. 組み合わせの利用：ユーザージャーニーとユーザーフローを組み合わせることで、ユーザー体験のマクロレベルとミクロレベルの両方を理解することができます。例えば、新患者のジャーニー内の特定のデジタル製品の使用を記録することで、より詳細な体験を捉えることができます。

4. 主な違い：ユーザージャーニーは広範囲に渡り、感情や思考を含むのに対し、ユーザーフローは製品内の具体的な相互作用に焦点を当て、感情や思考は含まれません

User Journeys vs. User Flows

User journeys and user flows both describe processes users go through in order to accomplish their goals. While both tools are useful for planning and evaluating experience, they differ in scope, purpose, and format.

https://www.nngroup.com/articles/user-journeys-vs-user-flows/

3. AI: First New UI Paradigm in 60 Years

• 人工知能（AI）がコンピューティング史上の第三のユーザーインターフェイス（UI）パラダイムを導入している

• 最初のパラダイムは1945年頃のバッチ処理であり、ユーザーが完全なワークフローを指定し、結果は翌朝に受け取ることができた。

• 第二のパラダイムは1964年頃に登場したコマンドベースのインタラクションで、ユーザーとコンピュータが交互にコマンドを実行した。

• 現在の第三のパラダイムは「意図に基づく結果指定」で、ChatGPTのようなAIシステムがその代表です。ユーザーはもはやコンピュータに何をするかではなく、どのような結果を望んでいるかを伝えている。

AI: First New UI Paradigm in 60 Years

AI is introducing the third user-interface paradigm in computing history, shifting to a new interaction mechanism where users tell the computer what they want, not how to do it — thus reversing the locus of control.

https://www.nngroup.com/articles/ai-paradigm/

4. Error-Message Guidelines

• 効果的なエラーメッセージの設計については、高い可視性、建設的なコミュニケーション、ユーザーの努力を尊重することが重要である。
• 可視性 = エラーメッセージがユーザーにどのように表示されるか。
• コミュニケーション = エラーメッセージが問題と可能な解決策について何を伝えるか。
• 効率性 = エラーメッセージが、ユーザーが評価と実行の溝を乗り越えるのをどのように助けるか。

• 可視性
• エラー発生部分の近くにエラーメッセージを表示する。
• 目立ちやすく、利用しやすいインジケータを使用する。
• 太字、高コントラスト、赤色のテキストとハイライトは、従来のエラーメッセージのビジュアルです。
• アニメーションを活用して、ユーザーの視覚的な注意を修正部分に誘導する。アクセシビリティ・ガイドラインにも寄り添い、エラーを示すのに色やアニメーションだけを使用しないい。
• 影響度によってエラーを設計する
• 「知っておいて損はない 」メッセージと、ユーザーの進行を妨げるメッセージを区別して表示する
• 早すぎるエラー表示を避ける
• 一方、ユーザーが最初の段階で正しい情報を入力する可能性が低いような、エラーが起こりやすいインタラクションに対しては、インラインでリアルタイムのエラーを考慮する。（修正にかかるインタラクションコストを削減するため）

• コミュニケーション
• 専門用語は避け、ユーザーに親しみのある言葉を使う
• 問題を簡潔かつ正確に説明する
• 「エラーが発生しました」のような一般的なメッセージは文脈を欠いているため、何が起こったのかをユーザーが理解できるように、正確な問題の説明をする。
• 建設的なコミュニケーション
• 単に問題を述べるだけでは不十分であるためけんせつてきなけんせつてきな。
• ex. eコマースサイトの在庫切れメッセージ。商品の再入荷時期の詳細を記載したり、Eメールを入力して再入荷通知を受け取るようユーザーに提案する。
• ポジティブなトーンで、ユーザーを責めない
• 肯定的で偏見のない口調で書く。ユーザーを非難したり、無効、違法、不正など、ユーザーが何か悪いことをしていることを暗示するような表現は使わない。

• 効率性
• 起こりそうなミスから守る。
• ex. メールアプリで添付ファイルを送付し忘れそうになった際に、送信前に検知し、エラーメッセージを表示する。
• ユーザーの入力を保存する
• ユーザーに、最初からやり直す代わりに、元のアクションを編集してエラーを修正させる。
• エラー訂正の手間を減らす。
• 可能であれば、正しいアクションを推測し、ユーザーに修正リストから選んでもらう。
• ex. 単にCityとZIP codeが一致しないと表示するだけでなく、ユーザーが入力したZIP codeと一致する市区町村のボタンをクリックできるようにする。
• システムの仕組みを簡潔に説明する

5. The Negative Impact of Mobile-First Web Design on Desktop

• モバイルファーストのウェブデザインは、デスクトップで見たときにユーザビリティに大きな問題を引き起こす。

• コンテンツが長いスクロールページに過度に分散され、余白が広がり、画像やフォントが拡大されるため、ユーザーが情報を消費し、理解することが難しくなる。

• コンテンツ分散はモバイルファースト、ミニマリズム、大きな画像といった複数のデザイントレンドの結果であり、結果として低い情報密度のページを生み出しています。

• デザイナーは、これらのデザインアプローチがデスクトップ体験に与えるユーザビリティへの影響を考慮し、重要なコンテンツをデスクトップでスキャン可能にするために再設計すること、画像の付加価値を評価すること、関連する重要なコンテンツを同じビューポートにまとめること、モバイル固有の相互作用やデザイン要素を避けること、分散を戦略的に利用することなどの設計上の推奨事項に従う必要がある。

The Negative Impact of Mobile-First Web Design on Desktop

Mobile-first web designs cause significant usability issues when viewed on desktop. Content becomes overly dispersed across long scrolling pages with expansive white space and enlarged images and fonts, making it difficult for users to consume and understand the information.

https://www.nngroup.com/articles/content-dispersion/

6. ChatGPT Lifts Business Professionals’ Productivity and Improves Work Quality

• ビジネス専門家がChatGPTを使用して業務文書を作成することにより、タスクの時間が減少し、評価された品質が大幅に向上したという研究結果の紹介。

• MITのShakked NoyとWhitney Zhangによる研究では、444人の経験豊富なビジネスプロフェッショナルが参加し、一部はChatGPTを使用して文書を作成した。
• 結果として、ChatGPTを使用したプロフェッショナルは平均17分で文書を作成し、AIを使用しないプロフェッショナルは27分かかった。
• 通常の8時間営業日で59%の生産性向上と捉えられる。また、文書の品質評価は、AI支援ありの場合が4.5、なしの場合が3.8と、AI支援を受けた文書の方が品質が高かった。

ChatGPT Lifts Business Professionals’ Productivity and Improves Work Quality

In a study of business professionals using ChatGPT to write business documents, task time decreased, while rated quality improved substantially.

https://www.nngroup.com/articles/chatgpt-productivity/

7. The Anatomy of a Good Design: An Analysis of 4 Sites

• 視覚的に魅力的なデザインが、一貫したタイプスタイルと間隔、視覚的階層を作成し、基盤となるグリッド構造を利用していることを紹介。

• Dovetail（データ分析プラットフォーム）
• グリッド、タイプシステム、一貫したアイコノグラフィを使用して、快適な編集および閲覧体験を提供。

• MoMA
• モジュラーグリッド構造、楽しいカラーパレット、イメージを利用して、魅力的な視覚体験を創出。

• Aesop
• モノクロームのカラーパレットとネガティブスペースを利用して、洗練されたクリーンなインターフェースを作成。

The Anatomy of a Good Design: An Analysis of 4 Sites

Visually pleasing designs use consistent type styles and spacing, create a visual hierarchy, and utilize an underlying grid structure.

https://www.nngroup.com/articles/why-does-a-design-look-good-part2/

8. Bottom Sheets: Definition and UX Guidelines

• モバイルアプリで一般的に利用されるUIパターンであるボトムシートの紹介。

• 画面下部で文脈に応じた詳細画面や操作を行うために使われる。

• ボトムシートは特にモバイルデバイスに適した部分的なオーバーレイの一種で、一時的に重要な情報を簡単に利用可能かつ排除可能にする。

• モーダルボトムシートは、クラシックなモーダルポップアップのように機能し、ユーザーが他の操作を行う前にそれと対話するか、強制的に閉じるようにし向ける。

• ノンモーダルボトムシートは対話を要求せず、画面の下部に配置され、ユーザーが背景コンテンツと対話することを可能にする。

Bottom Sheets: Definition and UX Guidelines

A bottom sheet is a user-interface pattern used commonly in mobile apps for providing contextual details or controls in the lower area of the screen.

https://www.nngroup.com/articles/bottom-sheet/

9. Onboarding Tutorials vs. Contextual Help

• オンボーディングの為のチュートリアルはユーザーの行動を中断させ、必ずしもタスクのパフォーマンスを改善せず、すぐに忘れられること指摘している記事。

• 文脈に応じたヘルプがこれらの問題を回避できるが、介入しすぎないアクティベーション方法が必要

• なぜチュートリアル（およびプッシュ型の情報公開）が機能しないか
• ユーザー体験を中断してしまう
• スキップされやすい
• 簡単に忘れられる傾向にある。
• ユーザーが情報を必要とするユースケースでは既に忘れ去られている可能性がある。

Onboarding Tutorials vs. Contextual Help

Tutorials interrupt users, don’t necessarily improve task performance, and are quickly forgotten. Contextual help signals can avoid these pitfalls but require unintrusive ways to activate.

https://www.nngroup.com/articles/onboarding-tutorials/

10. UX-Research Methods: Glossary

UX Research Methods: Glossary

Use this glossary to quickly clarify key terms and concepts related to research methods in UX.

https://www.nngroup.com/articles/research-methods-glossary/