7年分のHMIを分析: UX/UIのベストプラクティスについて気づいたこと

状況を説明しましょう。

2019年、私はある会社に入社し、潜在顧客にデザインに特化した新しいツールでできることをデモンストレーションする役割を担っていました。具体的には、デザインから開発への移行を、彼らが想像しているよりもいかに早く進めることができるかということです。ミーティングの準備のために、その企業のデザインファイルが必要でした。彼らの実際のデザインを使って、私たちのワークフローを証明したかったからです。

ありがたいことに、彼らはファイルを送ってくれました。自動車、医療、産業オートメーション、IoT、航空宇宙・防衛の実際の作業ファイルのコレクションです。ポートフォリオではありません。雑多で、デザイナーが通常誰にも見せないようなものです。

私はいろいろなものを見てきました。

すばらしいものから、本当に恐ろしいものまで。安全上重要な画面上の豆のように小さいボタン。共有フォントとパワーポイントのテンプレートにすぎないことが判明した、いわゆるデザインシステム。その反面、火曜日の午前8時にFigmaのファイルを眺めていると、本当の感動を覚えるほど美しいインターフェースもありました。

どのようにデザインを調査したか

パターンを比較しやすくするため、私は一貫した基準で各インターフェイスを見ました。各カテゴリーの評価システムも必要だったので、「高」、「中」、「低」、そして「なし」（デザインにその機能が含まれていない場合）を使いました。これは、実際のチームが実際に出荷したものに基づいた、ユーザーインターフェイスデザインのベストプラクティスのフィールドガイドだと考えてください。

最終的に、私は5つの業界にわたる44のUX/UIデザインを調べました。以下は、産業用ユーザーインターフェースの業界チャートの一部です。（顧客名は公表していません。）

ご覧の通り、各インターフェイスはデザインの16の基準（レイアウト、インタラクション、ビジュアルなど）にわたって評価され、上の凡例に基づいて評価されました。私は品質だけに焦点を当てたのではなく、チームやデザイナーがどこに時間を投資し、どこを単純化し、現実世界の制約が最終的な結果をどのように形作るのかを明らかにすることを目的としました。

UX/UIのベストプラクティスを評価するための評価マトリックスの一部。16の異なるUI基準（ヘッダーバーからカメラフィードまで）を、複数のユーザーインターフェース例で評価。顧客名は非公開。

自動車UIデザイン：スピードとともに高まる「賭け金」

車載UIは、可能な限り最善の方法で、完全にレールから外れてしまいました。10数年前、ダッシュボード中央のスクリーンに必要だったのは、GPSと次の曲にスキップするためのボタンだけでした。私の2012年型ジープ・ラングラーがその証拠です。今では、ピラー・トゥ・ピラーのオールインワンディスプレイに、プレイリストに同期したアンビエントライト、3D地形レンダリング、さらには戦闘機に搭載されているようなADASインターフェースなどがあります。

自動車のUIデザインにはアテンション・マネジメントが必要。効果性に優れたデザインは、運転タスクと競合しない短いインタラクションを優先。

私がレビューしたデザインは、ミニマルで無駄のないインターフェースから、フォトリアルな3Dモデルやトランジション、ブランドテーマを特徴とするリッチでブランド化されたエクスペリエンスまで、幅広い範囲に及んでいます。異論はあるかもしれませんが、私が考える自動車UIデザインの最優先ルールはただ一つ――ドライバーにとって操作を難しくしないことです。運転中、彼らはすでに多くのことを同時にこなしています。うまくいったデザインはその点を理解していましたが、破綻したデザインはそれを忘れていたように思います。

自動車UIデザインでうまくいっていること（と、うまくいっていないこと）

• 色の一貫性は常に勝つ：最強のインターフェイスは、どの画面でも同じ色の決まりを使っています。時速88マイルで運転しているとき、予測可能なものは賢いものに勝ります。
• コンポジションは短いインタラクションを最優先：ユーザーは1秒以上スクリーンを見つめているべきではありません。この制約を理解して設計されたインターフェースは、高い評価を得ていましたが、視覚的な複雑さを詰め込みすぎたものは評価が伸びませんでした。
• ヘッダーバーは十分に活用されていない可能性を秘めている：ピラー・トゥ・ピラーのディスプレイが一般的になりつつある現在でも、大半のインターフェイスはヘッダーにロゴとステータスインジケーターしか配置していません。主要なタスクの邪魔にならない範囲で、もう少し状況に即した情報を載せる余地はあるはずです。
• ADASインターフェースには技術的な正確さが必要：評価が高かったデザインは、ADASモードにおける技術的完成度が非常に高く、高速走行中でも迷いなく信頼できるものでした。そうした状況で、中途半端な表現や不明瞭な作りは致命的です。
• 見た目の洗練度よりも文脈が重要：私にとって最も魅力的なインターフェイスは、必ずしも視覚的に最も印象的なものではありませんでした。走行中の車両という環境で、注意が分散しがちなドライバーが使うことをきちんと理解して設計されていたものです。そこにこそ、優れた自動車UIデザインの本質があります――画面のためではなく、「その瞬間」のためにデザインすることです。

医療機器のユーザーインターフェースデザイン：安全であることが良いことではない場合

医療用UIは、特有のプレッシャーがあります。間違えれば、人命に関わるかもしれません。医療UIが一般的に安全策をとるのは理解できます。保守的な配色。最小限のノイズ、集中力をそらすものは最小限に。

より理解しにくいのは、安全こそが混乱を招くような場合です。医師や看護師が数秒しか時間がないのに、ボタンを見つけるのに数分かかるような、視覚的な階層が削ぎ落とされた医療用インターフェースを見たことがあります。これではとても安全とは思えません。

医療機器のUIデザインは、生死に関わるプレッシャーの中で使われるものであり、わかりやすさは良いデザインであるだけでなく、安全性の要件でもある。（ Qt Oxyscanインタラクティブ・デモ）

医療機器のUIデザインでうまくいっていること（と、うまくいっていないこと）

• セマンティックカラーはブランドカラーよりも重要：ブランドカラーよりも重要なのは、セマンティックカラー、つまり意味を持つ色使いです。インターフェースにおけるセマンティックカラーの心理的効果は広く知られており、セーフティクリティカルな文脈でそれを無視することは、単なるスタイルの選択ではなく「リスク」そのものです。赤は危険、緑は安全を意味します。「ブランドだから」という理由で赤をアクセントカラーに使うことは、誤った警告を発生させかねません。最も優れた医療インターフェースは、既存の色の共通言語を尊重しています。

• 視覚的階層は安全機能の一部：視覚的階層を欠いたインターフェースは「ミニマル」ではなく、危険です。医療従事者が数秒以内にボタンを見つけなければならない状況では、余白の一ピクセル一ピクセルや、フォントウェイトのわずかな違いに至るまで、すべてが重要になります。

   

• 一貫性のないスペーシングは、組織的な問題：スペーシングのルールがスクリーンごとにバラバラだったり、階層がずれていたりするのは、単なる美的な問題ではなく、共有システムなしに複数の人がインターフェイスを触った兆候です。

• デザインシステムはほぼ皆無：共有された多くの事例を見る限り、統合されたデザインシステムはほぼ皆無でした。テーマ設定が行われているケースはまれで、あっても共通トークンがわずかに使われている程度でした。医療機器のユーザーインターフェース設計においては、設計の一貫性が患者の治療結果に直接影響する可能性があるため、より高い設計の厳密さが求められます。

• 「安全＝良いデザイン」とは限らない：保守的なカラーパレットと注意そらさない設計は、医療の文脈では理にかなっています。しかし、「無難」であることが判断を避けることの言い訳になっているように思われ、その結果、わかりにくく使いにくいインターフェイスを生み出しています。

航空宇宙システムデザイン：品質格差はさらに拡大

防衛向けインターフェースは、20年以上前の2003年ころに設計されたように見えますが、それには理由があります。動くから、そして安全基準のチェックリストに合格しているから。たとえそれが冷戦時代の潜水艦ドラマに登場するようなものであっても、純粋に尊敬の念を禁じえません。

現代の航空宇宙分野に目を向けると、突然、私がこれまで出会った中で最も洗練され、意図的で、技術的に洗練されたUIを目にすることになります。完全に整備されたデザインシステムが存在し、自動車分野で言及したADASレベルの完成度を、さらに一段引き上げたような水準に達しています。

航空宇宙システムのデザインでは、マルチスクリーンのコマンド・インターフェースは、構造化されたレイアウトと抑制されたビジュアルを強調し、ミッションクリティカルな環境では視覚的表現よりも信号の明瞭さを優先している。

航空宇宙システム設計でうまくいっていること（と、うまくいっていないこと）

• 品質の差はこの業界に特徴的：航空宇宙＆防衛における最高のインターフェースと最悪のインターフェースの差は、他のどの業界よりも大きいです。良いものは、私が見た中で最も洗練されたUIですが、悪いものは、ほとんど機能していません。

• 設計システムは品質に直結：完全なデザインシステム、トークン、コンポーネントライブラリを備えた航空宇宙インターフェイスは、すべての指標で高得点を獲得しました。デザインシステムのない防衛インターフェースは軒並み低スコアでした。

• レガシーは強みにも足かせにもなる：2003年頃からそのまま来たように見える防衛UIは、それが機能し、安全基準に合格していれば、必ずしも問題ではありません。しかし、必要な近代化が行われないままだと、それはやがてユーザビリティの足かせとなってしまいます。

• 技術的な洗練度は一目瞭然：優れた航空宇宙インターフェースは、ADASレベルの洗練度、カメラフィードの統合、そしてレイアウトや色調の調和に対する徹底した配慮を備えていました。精度が中核となる価値として扱われているか、後付けであるかは、明確に見て取れます。私が見てきた最高の航空宇宙システムデザインは、すべてのピクセルをミッションクリティカルなものとして扱っています。

• ギャップに見える組織の優先順位：デザインが早期から同じテーブル上で考慮されたか、あるいは本質的決定がすべてなされた後にデザインプロジェクトが始まったか、品質的ギャップの大きさがすべてを物語っています。

産業用UI：価値だった「慣れ」が通用しなくなった今

「慣れ」に支えられた空間にデザイン思考を持ち込む、インダストリアルUIの新しい波。Qt Factory Pulseデモ

これがうまくいかないと、まるで15年前の製品に新しいUIの皮を張ったように見え、結果的に全体の体験を悪くしてしまいます。見た目が良くなった分、使いにくくなった。これは、産業的な文脈では、デザインの対象となるペルソナ、つまりオペレーターに適合しません。

産業用UIでうまくいっていること（と、うまくいっていないこと）

• 色の調和はコミュニケーションの欠如：同じスクリーンに青、黄色、茶色があるのはデザインの選択ではなく、開発者が会話せずに別々のブランチで作業していた証拠です。最強のインターフェイスは、すべての画面にわたって、意図的で一貫した色の決定を行っています。

• 情報密度には階層性が必要：産業用インターフェースは、本質的にデータ量が多いものです。問題は、たくさんの情報を表示することではなく、視覚的な階層がない状態で見せることです。すべてが等しく重要に見えるとき、結果として何も重要に見えなくなってしまいます。

• デザイン・システムの欠如：意図的に文書化されたシステムがほとんどなく、あってもいくつかのローカルコンポーネント程度です。デザイン・システムの欠如こそが、色の不調和やレイアウト上の問題が広く見られる理由を物語っています。こういったインターフェースのほとんどは、デザイン・システムの成熟度について考える段階にすらいたっていないようです。

• 慣れは貴重だが必須ではない：オペレーターは慣れを重視するが、だからといってインターフェイスが15年も変わっていないように見える必要はありません。最高のアップデートは、使いやすさを向上させながら、慣れ親しんだパターンを維持します。優れた工業用UIは、オペレーターのメンタルモデルを尊重しながらも、その水準を引き上げるものです。

• 解決策は複雑ではない：システムを構築し、それを書き留め、誰かが別の色を追加しようとしたら「ノー」と言うことです。こうしたインターフェースのほとんどは、そのような会話すらされていない結果のように見えます。

IoT (Iternet of Things) のUX：領収書は嘘をつかない

IoTは基本的に、画面を持ち、他の画面と通信するあらゆるものの総称です。そのためデザインの質の幅が非常に広くなります。「本当にインスピレーションに満ちた」優れたデザインから「週末にうちの7歳の子どもが作ったような」ものまであります。誤解しないでくださいね、アビー。あなたは完璧です。

スマートホームアプリ。モニタリング・ダッシュボード。消費者向けウェアラブル。どれもIoTと呼べますが、それ以外の共通点はほとんどありません。最良のものはモバイル志向で、視覚的に説得力があり、予想外に驚くほど楽しいものです。最悪のものは、誰かがスプレッドシートをエクスポートし、ダークモードを追加して、その日は時間切れになったような感じです。

IoTでは、他のどこよりも、UIは基本的に領収書次第です。

IoTのユーザーエクスペリエンスは、意図的にデザインされたもの（明確で、まとまりがあり、目に見えないもの）か、あらゆる継ぎ目を露呈する断片的なシステムのどちらかになる。 Qt Smart Homeプロジェクト

IoTユーザー・エクスペリエンスでうまくいっていること（と、うまくいっていないこと）

• 品質の振れ幅は航空宇宙分野と同じくらい広い：純粋にインスパイアされたものからほとんど機能しないものまで、IoTの品質には極端なばらつきがあります。ユーザー・インターフェースには、意図的なデザインが施されているか、そうでないかのどちらかです。

• デザインシステムは理解を生み出す：強固なデザインシステムを持つ事例は、派手さがあるからではなく、全体に一貫性が感じられるという理由で、ひと目で際立っていました。一方で、デザインシステムを欠いた事例は、その不統一さが同じくらい即座に露呈していました。

• モバイルファーストの考え方が功を奏す：最強のIoTインターフェイスは、モバイルファーストで、視覚的に説得力があり、しばしば驚くほど楽しいものでした。スマートフォンは主要なインターフェイスであり、後付けではいけないことが理解されていました。

• UIが企業の優先順位を露呈：IoTでは、他のどこよりも、UIが領収書次第となります。デザインが同じテーブルの上で話し合われたのか、ローンチ後のメールにCCで共有されただけのか、即座にわかります。

• 消費者の期待は高まっている：ユーザーはIoTアプリを銀行アプリ、ライドシェアアプリ、ソーシャルメディアと比較しています。消費者向けソフトウェアがより洗練されるにつれて、「受け入れられる」UIのハードルは常に上がっています。IoTのユーザーエクスペリエンスは、好むと好まざるとにかかわらず、地球上で最高のアプリと比較して判断されるようになっています。

これが意味すること

5つの業界にわたる44のデザインファイルをレビューした結果、パターンが明らかになりました。うまくいったデザインと失敗したデザインの間のギャップは、デザインチームのスキルセットの問題ではなく、優先順位の差です。

最強のデザインを生み出すチームは、必ずしも賢かったりクリエイティブだったりするわけではありません。彼らはただ、デザインが重要だと早くから判断し、それを取り巻くインフラ（システム、標準、合わないものにはノーと言う文化）を構築してきただけなのです。

私が収集した、いわゆる「悪い」インターフェースには、すべてデザイナーが関わっていました。分かりにくい医療画面、3色のアクセントカラーがランダムに配置された産業用ダッシュボード、スプレッドシートをエクスポートしたようなIoTアプリなど、誰かがデザインしたものです。違いは才能ではなく、デザインを正しく行うための組織的なサポートがあったかどうかです。

私がこの分析でデザインシステムについて言及し続けるのは、それが組織のコミットメントを示す最も明確なシグナルだからです。企業がデザイン・システムを構築するということは、こういうことです。「私たちは一貫性を維持するのに十分な価値を認めています。私たちは無秩序な色の追加に反対します。出荷が遅くなるとしても、標準を徹底します。」

そのコミットメントは、最終的なユーザー・エクスペリエンスにすぐに現れます。デザイン・システムのあるインターフェイスは、まとまりがあり、意図的で、信頼できると感じられました。システムのないものには、妥協の跡や、急いだ決断、「後で直します」と言って結局直さなかった瞬間がありありと表れています。

もしあなたが何らかのインターフェース（自動車、医療、産業、航空宇宙、IoT、その他何でも）を構築しているなら、問題は 「優秀なデザイナーがいるかどうか 」ではありません。問題は、「デザインに、ノーと言い、デザインシステムを構築し、長期にわたって標準を維持するために必要な組織的サポートがあるかどうか？」です。

デザイン・ファイルを7年間アーカイブしてきた結果、これはどの業界にも共通するパターンです。最高の仕事は、最も才能のある個人から生まれるのではありません。デザインが重要であると判断し、それを証明するための基盤を構築したチームから生まれるのです。これが、UX/UIのベストプラクティスが実際にどのようなものであるかということであり、ユーザーインターフェイスデザインのベストプラクティスのチェックリストに従うこととは何の関係もありません。それは組織の意志の問題なのです。