今月の待望の発表に先立ち、Google は、同社の最新のデザイン方向性である Material 3 Expressive Design の背景にある考え方と研究について詳しく説明するブログ記事を誤って公開しました。
記事全文はブログにアーカイブされています。 ウェイバックマシン （下記アーカイブ版には掲載されていない画像があります。）要点は以下のとおりです。
Material 3 Expressive は、Google が「デザインの大胆な新しい方向性」と呼ぶものであり、「Google のデザイン システムに対するこれまでで最も求められているアップデート」です。 Google は、アプリが「すっきり」して「退屈な」デザインを超え、感情レベルで人々とつながるインターフェースを作成することを目指しています。正式名称の他に、「M3 Expressive」や単に「expressive design」とも呼ばれます。
Material 3 Expressive は研究から生まれました。デザインの決定をデータに委ねる 41 Shades of Blue のような方法ではなく、研究、デザイン、エンジニアリングを含む共同の調査から生まれました。
2022年、マテリアルデザインチームは「なぜこれらのアプリはどれも似たような見た目になっているのだろう？つまらない？もっと感覚的に使える余地はなかったのだろうか？」と疑問を持ち始めました。
過去 46 年間、私たちはこの対話の意味を探り、マテリアル デザインの次の進化を見つけるために、何十回もの設計と調査を繰り返してきました。数百のデザインと世界中の 18000 人を超える参加者による 3 件の個別調査研究を通じて、私たちは美しく、非常に使いやすいシステムを微調整しました。 Material XNUMX Expressive の原則は確かな研究に基づいており、確立されたユーザビリティのベスト プラクティスに基づいて構築されているため、デザイナーは、使いやすくユーザーがつながりを感じられるものを構築していることを確信して、これらの新しいコンポーネントと原則を自信を持って使用できます。
これらの研究には以下が含まれます。
- 視線追跡: ユーザーが注目する場所を分析します。アイトラッキングは、ユーザーの行動を理解し、デザインの改善領域を特定するための強力なツールです。
- 調査とフォーカス グループ: さまざまなデザインに対する感情的な反応を測定します。これらの方法は、ユーザーが感情的なレベルでデザインをどのように認識しているかを理解するのに役立ちます。
- 実験: 感情や好みを収集します。ユーザーが好むデザインを決定し、さまざまな要素がユーザー エクスペリエンスに与える影響を評価するには、実験が不可欠です。
- 使いやすさ： 参加者がインターフェースをどれだけ早く理解し、使用できるかを確認します。ユーザビリティは、あらゆるデザインの成功を測る重要な指標であり、ユーザーがどれだけ簡単かつ効率的に目標を達成できるかを決定します。
Google は、「表現力豊かなデザインに不可欠なのは、色、形、スケール、動き、そして包含の使い方です」と述べています。さらに、「Material 3 Expressive は、大胆な形状と色使いを特徴としており、楽しいユーザー エクスペリエンスを生み出します。」大胆な色と形の使用は、魅力的で記憶に残るユーザー エクスペリエンスを生み出すことを目指す、Material Design 3 Expressive の重要な部分です。
これらのデザイン面は、主要なアクションを強調表示したり、類似の要素をグループ化するなど、インターフェースの重要な要素に注意を向けることで、製品をよりユーザーフレンドリーにする上でも不可欠です。これにより、ユーザーエクスペリエンスが向上し、よりスムーズかつ効率的になります。
フローティング ツールバーは、Material 3 Expressive によって生成されたコンポーネントです。コンセプトデザインでは、画面の全幅に渡らない錠剤型の下部バーが表示されます。その結果、背景の小さな部分が見え、端から端までのデザインがより目立つようになります。これは現在 Google Chat で利用できる機能に似ています。
Google の調査によると、「表現力豊かなデザインは使いやすく」、ユーザーが「各画面で主なアクションをすばやく見つけ、より迅速に操作」できるようになります。
…参加者は最大 4 倍の速さで主要な UI 要素を識別することができ、これらのデザインによりユーザーの注意が画面の最も重要な部分に向けられることが実証されました。多くのアプリがこのレベルの改善を達成しているのを目にしてきましたが、それは単に視線を固定する時間だけにとどまりません。また、テストしたさまざまなデザインにおいて、主要なアクションをクリックするのにかかる時間が数秒短縮されたことも確認しました。
繰り返しになりますが、これらは単なるコンセプトデザインであり、実際の製品を反映したものではないことを強調しておくことが重要です。 （より決定的なものについては、リークされました。 Google 時計のデザイン変更 （週末にかけて。）ただし、以下の「以前」の例は明らかに現在の Gmail ユーザー インターフェースです。
以下に示すメール アプリのケース スタディの画面などの特定のデザインを見ると、表現力豊かなデザイン原則の利点を直接確認できます。たとえば、新しいデザインの送信ボタンは大きくなり、キーボードの真上に配置され、注目を集めるために二次色を使用しています。これを、画面上部のツールバーに小さな「送信」ボタンをファイルの添付などの他のコントロールと一緒に配置する、表現力のないデザインと比較することができます。参加者がアプリ内で「メールを送信」するように指示されると、絵文字デザインのボタンが 4 倍速く見えるようになりました。これは、ユーザーエクスペリエンスを向上させる上での「表現力豊かなデザイン」の重要性を反映しています。
その他のコンセプトデザインには、時計アプリ、音声入力、写真編集、支払い、ウォレットなどが示されています。
新しい UI の導入が成功するか失敗するかは、実装がどれだけ容易か、そして M3 からどれだけシームレスに更新されるかによって決まります。 Jetpack Compose は最近かなり良い状態にあるように思われるので、私は慎重ながらも楽観しています。
一方、調査とユーザーテストにより、「iOS のヒューマン ユーザー インターフェース ガイドラインに準拠した非表現的なデザインよりも、適切に実装された表現的なデザインの方が、あらゆる年齢層の人々に強く好まれる」ことが明らかになりました。
Google は、「表現力豊かなデザインは、特にブランドの魅力を高める上で優れている」ことを発見しました。「当社の調査によると、M3 の表現力豊かなデザインを使用すると、人々にとって製品の「クールさ」が増すことがわかりました。」
- …サブカルチャーの認識が 32% 増加したことが分かりました。これは、表現力豊かなデザインによって、ブランドがより関連性が高く、「情報通」に見えることを示唆しています。
- …新鮮さが 34% 増加し、ブランドが新鮮で革新的であるように見えます。
- …反抗心が 30% 増加し、表現力豊かなデザインによって、このブランドは常識を打ち破る大胆で革新的なリーダーとしての地位を確立したことを示しています。
コメントは締め切りました。