5.0

View in English

5.0 第5部の導入: UIとUXのデザイン

この部は、ソフトウェアがそれを使う人々と出会う場所についてです。それは多くを含みます。ユーザーが必要とするものを明らかにするリサーチ、それを提示するインターフェースとデザインシステム、行動を導く言葉、すべての人が使えるようにするアクセシビリティと言語サポート、そして現実の乱雑なブラウザとデバイスの世界にそれを届けるフロントエンドエンジニアリング。これらすべてを、最後に施す装飾として扱いたくなります。どうかそれに抵抗してください。ここは、上流のすべての仕事がユーザーに届くか、崩れ去るかが決まる場所であり、最後の画面が磨かれるずっと前に決まります。

大きなチームにとって、プロダクトデザインは本当は調整の問題です。数十のスクワッドが一つの共有のプロダクトに出荷するとき、独立した決定が積み上がって混乱になります。重複したフロー、矛盾した用語、一貫しないコンポーネント、誰も所有しない言語のパイプライン。ここのすべての章での修正は、同じ形をしています。一度きりの決定を、共有され統治された資産に変えます。ペルソナ、デザインシステム、コンテンツ戦略、国際化(i18n)のフレームワーク、コンポーネントライブラリ、パフォーマンスの予算といったもので、別々に働く多くのチームが、それでも一つの一貫した体験にまとまるようにします。

企業と政府は、賭け金をさらに上げます。企業のソフトウェアにはしばしば逃げられないユーザーがおり、彼らは貧しいデザインの代償を、去ることではなく、訓練、エラー、サポートの負荷で払います。政府のサービスは公衆全体に届きます(危機にある人、古いデバイスを使う人、デジタルへの自信が低い人、他の提供者がいない人を含みます)。したがってデザインの質は、公平性と市民の信頼の問題になります。ここでは、アクセシビリティはあれば良いものではなく法的義務です。公的機関は、障害のある人々が使えるソフトウェアを築くことを法で求められ、平易な言葉と言語アクセスの義務も、しばしば法の力を持ちます。

この部の章

  • 5.1 UXの基礎: 組織が推測ではなく証拠に基づくプロダクトの決定をできるようにし、すべてのチームにユーザーの同じ地図を与える、リサーチ、ユーザーのモデリング、デザイン思考の実践。

  • 5.2 UIデザインとデザインシステム: 人々が見て触れるものを形づくる技芸と、多くのチームにわたる数千の画面を一貫して保つ、トークン、コンポーネント、パターンの共有され統治されたシステム。

  • 5.3 アクセシビリティ: 障害のある人々が知覚し、操作し、理解し、使えるソフトウェアを築くこと。法的義務、倫理的義務、そして単に良いデザインとして同時に扱われます。

  • 5.4 コンテンツとコミュニケーションのデザイン: 言葉はインターフェースだからこそ、人々が行動するのを助けるために、平易な言葉と一貫した声で、プロダクトが使う言葉、メッセージ、コミュニケーションを形づくること。

  • 5.5 国際化とローカライゼーション: ソフトウェアがあらゆる言語と地域に適応できるようにするアーキテクチャと、各ロケールに向けて翻訳し文化的に適応させるワークフロー。

  • 5.6 フロントエンドエンジニアリング: 制御できない環境のために、フレームワークの寿命、レンダリングの戦略、パフォーマンス、レジリエンスに注意しながら、クライアント側の層を築くこと。

  • 5.7 モバイルアプリケーション開発: モバイルデバイスのための構築。ネイティブ、クロスプラットフォーム、プログレッシブウェブのアプローチ、プラットフォームのデザインガイドライン、オフライン、バッテリー、断片化の制約、アプリストアでの配布、モバイルのセキュリティとアクセシビリティを扱います。

  • 5.8 デザインリサーチとユーザビリティテスト: 生成的および評価的リサーチ、各問いに合った方法、うまく行われたユーザビリティテスト、代表的な被験者の募集、実際に決定を変える統合を通じて、間違ったものを築くリスクを減らすこと。

  • 5.9 サービスデザイン: チャネルをまたぎ、時間を通じて人が体験するサービス全体を、フロントステージとバックステージで、サービスブループリントとジャーニーマップを使って設計し、単一の画面だけでなく、サービスの背後に組織を揃えること。

  • 5.10 データ可視化デザイン: 問いに合った適切なグラフを選び、データを誠実にエンコードし、優れたグラフィックス、アクセシブルで色覚に配慮したパレット、明確な注釈を適用して、グラフが決定を誤導するのではなく、知らせるようにすること。

これらの章の相互関係

これらの章は、理解からデリバリーへの一本の筋道を形づくります。UXの基礎(5.1)は、ユーザーが誰で、どんな仕事をしようとしているかを確立します。UIとデザインシステム(5.2)は、その理解に一貫した視覚的な形を与えます。コンテンツデザイン(5.4)は、それを運ぶ言葉を供給します。フロントエンドエンジニアリング(5.6)は、結果を出荷します。アクセシビリティ(5.3)と国際化(5.5)は別々の段階ではなく、他のすべてに織り込まれた品質です。アクセシブルで翻訳可能な体験は、共有のコンポーネント、コンテンツのパターン、コードに最初から設計され、後からボルトで留められることは決してありません。特に5.3章は、各コンポーネントでアクセシビリティを一度解決するために5.2章に、それをセマンティックで標準ベースのマークアップに保つために5.6章に依拠します。

この部は、本書全体にも及びます。ここでの「一度きりより資産」のパターンは、8.4章(プラットフォームエンジニアリングと開発者体験)の共有プラットフォームの考え方に呼応し、1.1章と1.4章の価値観と働き方は、デザインの一貫性をそもそも可能にする組織的な条件を設定します。アクセシビリティ、ビジュアルリグレッション、パフォーマンス予算のチェックは、8.1章(CI/CDとデリバリー)のデリバリーのパイプラインに属し、品質が、ローンチ直前に監査されるのではなく、あらゆる変更で徹底されるようにします。そしてフロントエンドのパフォーマンスが依存するリアルユーザーモニタリング(実際のユーザーのデバイスとネットワークから集められるパフォーマンスデータ)は、9.2章のオブザーバビリティの実践に直接つながります。うまく行われれば、ここでの仕事こそが、他の箇所で述べられるシステムを、それが仕えるべき人々にとって実際に使えるものにします。