Google の新しい UI から学べること (画像とテキスト)

2011 年に最も顕著なウェブサイトの変更は、一連の製品に新しいユーザーインターフェースを導入した Google でした。この記事では、Google のユーザーインターフェースデザインの背後にある思考プロセスを探り、そこから貴重な方法やデザイン原則を学ぶことができるかもしれません。
Google ユーザーインターフェース改革の歴史 1998
Google の新しい UI から何を学べるでしょうか?

Google オリジナルホームページ 2012

更新されたインターフェース「Google の使命は、世界中の情報を整理し、世界中の人々がアクセスして使えるようにすることです。」
統合された Google エクスペリエンス
Google のウェブページは初期の頃から劇的に進化してきました。ユーザーはこれまで以上に多くの方法で Web を体験でき、さまざまなデバイスで Web を視聴および体験できます。 Google はこれらの変更を反映するために変更を加えました。また、さまざまな Google 製品を統合して、ユーザーが製品間をスムーズに切り替えられるようにするための変更も行われています。 Google の説明は次のとおりです。
「私たちの目標は、どの Google 製品を使用していても、どのデバイスを使用していても、よりシームレスで一貫したオンラインエクスペリエンスを提供することです。」
Google の新しいエクスペリエンスは、3 つの主要な設計原則に基づいています。これら3つの原則を見てみましょう。宜枝
集中
フォーカスとは、ユーザーが達成したいタスクや作業に迅速かつ簡単に集中できるようにすることです。雑然としたものを片付けて、重要なコンテンツと頻繁に使用するツールを常に前面に配置します。同時に、明るい色を使用して未使用のナビゲーション機能を強調表示したり非表示にしたりするなどの簡単な操作を追加します。
このように、Google の UI は、ユーザーが達成しようとしているタスクに無意識のうちに集中できるようにし、ユーザーの失敗体験を減らします。
弾性
Google が変化を始めてから最大の変化は、ユーザーが Web にアクセスする方法です。
デスクトップコンピューターだけでなく、スマートフォン、高解像度のタブレット、テレビなどのモバイルデバイスにも Google 製品がますます登場するようになります。「柔軟性」の目的は、ユーザーがさまざまなデバイスを切り替えても一貫した視覚体験を維持できるようにすることです。
簡単 - 使いやすさ<br />Google が使用するテクノロジーと製品は非常に複雑ですが、Google はデザインでこの複雑さを表現したくありません。「使いやすさ」の考え方は、製品をシンプル、クリーン、そして一貫性のある状態に保つことです。
「Google の新しいブランドは、信頼、美しさ、テクノロジー、そして革新に根ざしたものになるでしょう。」 - ラリー・ペイジ
Google ナビゲーションバー

Google の再設計の目玉は、画面上部の古い「硬くて黒い」ナビゲーションバーに代わる新しい Google バーです。 Google は、この機能が画面上の貴重なスペースを占有していることに気づき、新しいデザイン原則に基づいて新しい外観を与えることにしました。
新しいメニューバーは、Google のナビゲーションバーと検索バーおよび Google+ ツールバーを組み合わせたものです。検索バーとナビゲーションバーのすべての製品機能は保持され、製品間の簡単な切り替えが可能になります。 Google ロゴにカーソルを合わせるだけでドロップダウンメニューが表示され、ユーザーは Gmail、ドキュメント、マップ、YouTube などの製品を効率的かつ簡単に切り替えることができます。
Eddie Kessler (Google の技術リーダー) は次のように説明しています。
「統一し、簡素化し、古いナビゲーションバーに別れを告げましょう。ユーザーに非常にシンプルなナビゲーションエクスペリエンスを提供することは、Google の全体的なブラウジングエクスペリエンスと、私たちが目指している方向性を変える上で重要な部分です。だからこそ、私たちはこの再設計にとても興奮しています。」
グーグル+

左: Alex Patrascu がデザインした Google+ ロゴ右: Google+ メニューとインターフェース各 Google 製品の UI がその効果を十分に発揮しているかどうかを分析するために、この記事では最も有名な Google スター製品をいくつか取り上げて説明します。
Google の再設計は、今年最も重要な Web プロジェクトの 1 つである Google+ の開始と同時に行われました。 Google+ はおそらく他のどの Google 製品よりも、その新しい設計原理をよく表しています。リリース後の期待については、ユーザーを引き付けるために使用する必要がある製品が 1 つあるとすれば、Google + がリストのトップに挙げられます。これは Google のデザイン哲学を完璧に体現しており、サークルに参加してから数日のうちに、私はそのシンプルなデザインに夢中になっていました。
Google Plus は、Andy Hertzfeld の UI/UX チームによって部分的に設計されました。多くの人が Google のデザインスタイルを Apple と比較するでしょう。この論争は、アンディが 1980 年代に Apple に雇用され、Macintosh プロジェクトに参加していたという事実に起因している可能性があります。このプロジェクトでアンディがしなければならなかったのは、ジョセフ・スマールとともに「円」の概念を探求することだけでした。
アンディはこの背景にある考え方を次のように説明しました。
「明らかに、人々を分類することが目的です。第二に、『サークル』の核となるアイデアは、楽しくて魅力的であること、やりたいことになることです。退屈になることもあるので、私たちは人々の行動に報い、笑顔を浮かべ、彼らがやっていることを楽しめるように努めています。」
Google Plus は現在、Google の全体戦略の不可欠な部分となっています。これは Google のほとんどの製品に統合され、検索結果にもボタンが表示されます。 Google を使用すると、発見したことを簡単に共有できます。「ソーシャル検索」という言葉はこれまで以上に重要な意味を持ち、検索がその先頭に立っていると私は信じています。 Googleは次のように述べた。
「Google ソーシャル検索は、ソーシャルネットワークから関連コンテンツを見つけ、オンライン上の友人や連絡先のネットワークを構築するのに役立ちます。友人や知人からのコンテンツは、見知らぬ人からのコンテンツよりも関連性が高く、意味がある場合があります。たとえば、オンラインサイトの映画レビューは役立つかもしれませんが、友人からのレビューの方が有益です。」
Gmail

Gmailの新しいレイアウト
CBS によれば、2010 年 11 月時点で Gmail のアクティブユーザー数は 1 億 9,330 万人でした。 Google はこれらのユーザーを維持するために、Gmail のデザインを簡素化し、ユーザーエクスペリエンスを向上させました。以下の変更が行われました。
簡素化された会話モード Gmail の会話モードは、メールをアーカイブしたときに閲覧しやすくするために完全に再設計されました。ユーザーが会話に参加しやすくなるよう、プロフィール写真が会話に追加されます。また、自分が言ったことを記録しておくのにも役立ちます。元の UI とは異なり、新しいデザインにより、ユーザーは同僚や友人とのコミュニケーションに集中できます。
優れたナビゲーション左側のサイドバーのナビゲーションが再設計され、ユーザーがカスタマイズできるようになりました。ユーザーは、チャットエリアのサイズを好みに合わせて変更したり、左サイドバーの下の小さなアイコンをクリックして完全に非表示にしたりすることができます。すべての新製品を組み合わせることで、ユーザーは Tab キーまたは矢印キーを使用して独自の方法で Google インターフェースをナビゲートできるようになり、最も便利なナビゲーション方法がユーザーに提供されます。
強化された検索

Gmail の新しい検索機能に重点が置かれました。電子メールは Web ユーザーにとって非常に重要なツールです。実際、毎日推定 294 億通の電子メールが送信されています。受信トレイに散らばったメールをどうやって見つけるかが最優先事項になっています。 Google には、標準的な検索を超えた方法でこれを行う方法があります。ユーザーは、高度な検索パネルを非表示にするドロップダウンリストをクリックし、数回クリックするだけで検索フィルターを作成できるようになりました。
段階的な展開<br />Google の新しいデザインが気に入るかどうかは別として、これが成功であることは間違いありません。ここ数ヶ月、インターネット上で話題となり、多くのファンを獲得しています。その成功の一部は、Google がすでに行った変更によるものかもしれません。 Google では、製品によって異なることが多いため、1 回限りのリリースではなく段階的な展開を選択します。こうすることで、ユーザーからのフィードバックをリアルタイムで収集し、何が機能しているかを判断し、プロジェクトの次のフェーズを再評価することができます。
段階的な展開には他の利点もあります。 Google は過去数か月間、UI のリリース日に関するニュースを発表することで、メディアを利用して UI を宣伝してきました。 BBC からニューヨークタイムズ、その他のメディアまで、誰もが Google の変更について報道しており、コミュニティフォーラムに投稿された多数のコメントも注目に値します。
Google UI を詳しく見る
Google UI の色

上記の色の例から、Google は常に色調を最小限に抑えていることがわかります。重要な機能を強調するために青と赤が使用されていますが、どちらも元の Google ロゴから派生した色です。
ボタン

Google の新しいボタンとアイコンのデザイン<br />新しいデザイン戦略の一環として、Google は新しいボタンシリーズを発表しました。これらのボタンはすっきりと簡潔でシンプルで、Google の「フォーカス」設計原則を明確に示しています。これらは HTML5 および CSS3 テクノロジーを使用して作成されました。ユーザーを驚かせるのは、ボタンが実際にはボタンではなく、アンカータグでもなく、div を使用して作成されていることです。これは、一般的なタグが標準コンポーネントとして機能することを示すために使用されます。これは、スクリーンリーダーなどのデバイスを使用してサイトを閲覧するユーザーにとって役立ちます。
Google は CSS3 を使用して丸みのある繊細なグラデーションボタン効果を実現し、ホバーボタンの下部に微妙な影を追加してファッション感をさらに高めています。ボタンは一般的に、「独立」と「左、中央、右」の 2 つのカテゴリに分けられます。各カテゴリーには「標準」と「ラージ」の 2 つのサイズがあります。 Google は、製品全体でこれら 4 つのスタイルを選択することで、ユーザーに統一されたエクスペリエンスを提供します。
快適、居心地が良い、コンパクト

あらゆるデザインにおいて優れたユーザーエクスペリエンスを促進するための最も重要な要素の 1 つは、視覚的な魅力です。 Google では、一部の製品でユーザーが画面の表示密度をカスタマイズできるようにしています。この機能は、Gmail、リーダー、ドキュメント、その他のテキストアプリで利用できます。「快適、快適、コンパクト」のオプションは、ユーザーのコンピューターのディスプレイ密度によって異なります。メディアで話題になっていることから、こうしたタイプの画面密度オプションが他の Web 製品を飛び越えて新しい時代を先導すると確信しています。
結論<br />過去 6 か月間、Google の新しい UI 設計原則の調査にかなり力を入れてきましたが、その中で私が観察して学んだことや、Google が実装した戦略について皆さんにお伝えしたいと思います。インターネット上で最大のブランドの一つとして、彼らはシンプルで統一された体験が重要であることを明確に理解していました。
「シンプルさと統一された体験が鍵です。」
また、個人的には UI 要素の強度を抑えることも学びました。影の不透明度は本当に 80% にする必要がありますか? 20 ～ 30% に下げることはできますか? デザイナーとしては、影の割合を減らしたり、遷移をより目立たせて見やすくするなど、私たちが行った余分な努力に気づいてもらいたいと考えています。場合によっては、微妙な変更によって、視覚効果を生み出す場合でも、ユーザーの注意を引く場合でも、より優れたスムーズな効果が得られ、期待されるアイデアを実現できます。同じ原則を境界線の半径にも適用できます。通常の 5 または 10 ピクセルから 1、2、または 3 ピクセルにトーンダウンしてみてください。もちろん、これらの方法はすべてのプロジェクトに適しているわけではありませんが、「クリーンな」デザインを選択する場合は、これが最善の選択となるはずです。
同時に、私たちは今日のウェブがこれまでとは大きく異なる場所になっていることを学びました。 Internet Explorer に関する最新のニュースは、IE がブラウザを自動的に更新し、最新の Web テクノロジを活用してブラウザ間で作業できるようになることです。 Google は、新しい製品設計作業ではなく、これに対して新しいアプローチを採用している可能性があります。ブラウザの制限なしにデザインできるようになりました。今こそ、デバイスや画面解像度を問わず互換性のある Web サイトを作成し、最終的に優れたユーザーエクスペリエンスを実現することに注力すべき時です。

<<: HTML ファイルにフラッシュビデオ形式 (flv、swf) ファイルを埋め込む方法

>>: VMware Workstation16 と Navicat リモート接続での Centos7 での MySQL8.0 インストールプロセス