グーグルマップのデザインの秘密が明らかに

Googleマップは2005年に発売され、革命でした。デスクトップブラウザに移動し、マウスで地図をクリックしてドラッグし、スムーズかつ迅速にレンダリングされるのを見ることができました。それまでは、通常、マップをパンするためにマップの端にある矢印をクリックして、ロードされるのを待つ必要がありました。

グーグルマップの「フィッシュボーン」ズームコントロールがマップを支配していた。結局のところ、画面の解像度は小さく、マップをダブルクリックすると、ズームインするのではなく、中央に再配置されます。地図の横に、提案された検索と指示の列が画面の幅の3分の1を占めていました。ああ、それはFirefoxとExplorerブラウザでのみ機能しました。

わずか8年後、Googleマップはデスクトップ上の複数のブラウザとオペレーティングシステムにまたがっています。 モバイル 、タブレット、およびウェアラブルデバイス。しかし、その最新の生まれ変わりはどのように作用しましたか?



2005年2月にGoogleマップがリリースされたとき、クリックしてドラッグすることで地図をパンすることは革命的でした

2005年2月にGoogleマップがリリースされたとき、クリックしてドラッグすることで地図をパンすることは革命的でした

2010年に地図の再考と再設計の初期に簡単に携わったとき、リードデザイナーのジョナジョーンズは、タスクとアルゴリズムで配置されたデータの従来の静的地図をはるかに超えて考え、複数のカスタマイズされた無限のバリエーションをより大胆に想像するように促しましたズームレベルごとだけでなく、クリックごとに変化するマップの数。

しかし、その時点では、宣言された詳細なデザインマントラから作業していなかったため、それぞれにお気に入りの教義や個人的なインスピレーションがあり、デザインを刺激しました。

私にとって、私のお気に入りの1つは、テクニカルライター、イラストレーター、およびユーザビリティコンサルタントとしての初期の頃から生まれました。その本はロビン・ウィリアムズの 非デザイナーのデザインブック (Peachpit Pressによる)これは元々、ページにタイポグラフィをレイアウトするための4つの主要な基礎を概説したものです。しかし、私にとって、これらの原則は、あらゆるタイプの情報デザイン、特に地図デザインに見事に機能しました。

CRAPの負荷

設計の原則は、微妙に、生意気に、そして皮肉なことに、CRAPと呼ばれ、コントラスト、繰り返し、整列、および近接を表します。マップにコントラストを組み込むことは、さまざまな情報タイプを明確に異なるものにすることです。

私たちのベースマップでは、太いオレンジ色の高速道路は、黄色の少ない二次道路に対して効果的に目立ち、細い白い歩道からさらに目立ちます。これらの違いは、ユーザーがパターンを認識し、マップがどのように構築されるかについてのメンタルモデルを構築するのに役立ちます。

活字でコントラストを使用することも重要です。都市ラベルは、ランドマークラベルなどと区別できる道路ラベルと区別できます。

興味がある点

Googleマップの初期の頃、地図自体には多くのラベルの付いた道路、政治名、地理的特徴がありましたが、興味のある場所はほとんどありませんでした。

何年にもわたって、役立つスポット、ランドマーク、近隣の名前、建物のフットプリント、交通機関の停留所などを追加しました。物事をより便利にするために、交通、自転車、地形などの新しいレイヤーも追加しました。

Googleマップの初期の頃は、データと情報が比較的まばらであったため、すべてが現在よりも高コントラストになりました。

Googleマップの初期の頃は、データと情報が比較的まばらであったため、すべてが現在よりも高コントラストになりました。

残念ながら、これは、競合するすべての要素間にますますコントラストを追加しようとしたため、マップに追加する情報タイプと要素が多すぎることを意味しました。

私たちのリードプロダクトマネージャーであるBernhardSeefeldは、それを「非常に多くの装飾が施されたクリスマスツリーであり、枝の重さを量って倒れる」と記憶に残っています。

今日では、適切な情報を表示することを目的として、このコントラストを減らすことができました。場所をクリックすると、マイナーな通りの名前の多くが削除され、クリックに近接している重要な名前のみが表示されます。クリックするたびに、適切な情報を動的に含めたり除外したりする異なるマップが作成されます。

一貫した関係

繰り返しはコントラストと密接に関連しています。結局のところ、情報タイプごとに固有の視覚スタイルを確立すると、地球全体の村や都市の表現を管理するユニバーサルスタイルガイドを確立することになります。

たとえば、シドニーの高速道路はサンディエゴの高速道路のように見えます。これらのユニークなスタイルの注意深く一貫した繰り返しは、一見見えないスタイルガイドを強化します。これにより、ユーザーはマップのメンタルモデルを構築し、マップをはるかに効果的にスキャンできるようになります。

私がマップを始めたとき、Googleにはさまざまなデザインがありました。さまざまなデザインパターンで非常に多くのサービスを開始したため、ユーザーは一貫した期待や経験なしに1つのGoogleサービスから別のサービスに移動できるようになりました。

2011年、ラリーペイジは、デバイスに関係なく、1つの「美しくシンプルで直感的なエクスペリエンス」を作成するという課題を設定しました。これは、Googleマップサービス内だけでなく、組織全体で一貫性と繰り返しを確立し、ユーザーエクスペリエンスを向上させるための手段でした。

今日

今日のGoogleマップは、より豊富なコンテンツを地図に統合しているため、ユーザーは別のリストや凡例に戻らなくても一目でスキャンできます。

明確な道を提供する

私たちの自然界と都市世界の物理的な構成と空間的関係は完全に予測不可能であり、しばしば自然に整列していません。ページでは、一般的なレイアウトルールとして、ユーザーがページを効果的にスキャンし、ページの視覚的なアンカーを認識し、ページを統一感を持たせるために、配置が基本です。

地図上では、ランドマーク、スポット、検索結果の個々のラベルには、一貫性のある注意深い配置ルールが必要です。ラベルの配置には柔軟性が必要ですが、ユーザーの予測可能性も必要です。そのため、地図上のそのようなポイントにラベルを付けるには、ラベルをマーカーと垂直方向に中央揃えにし、マーカーの左または右からラベルを噴射できるようにします。

ラベルの密度が高すぎたり、より重要なラベルと競合したりする場合は、ラベルをマーカーの上または下に配置しますが、マーカーの周囲との左右の位置合わせ線を維持しようとします。

グーグルマップの再設計はラリーペイジの一部でした

Googleマップの再設計は、「美しく、シンプルで、直感的なエクスペリエンス」というラリーペイジのモットーの一部であり、組織全体で一貫したデザインパターンが繰り返されました。

グループ情報タイプ

近接性は私のお気に入りの基盤の1つかもしれません。簡単に言えば、視覚的に近いものは、ある種の関係を意味します。マップ上では、マーカーに付随するラベルは、マップ上の他のオブジェクトよりもそのマーカーに近いほうがよいでしょう。

類似の情報タイプをグループ化し、異なる情報タイプを遠ざけるこの方法は、ページを即座に整理します。これは、効果的なスキャンと消費のために複数の情報タイプと行動を促すフレーズを整理する必要があるマップから最も明白です。

スキャンを最適化し、地図に予測可能性をもたらすために、ランドマークラベルを比較的一貫して配置するのに役立つ配置ルールが確立されました

スキャンを最適化し、地図に予測可能性をもたらすために、ランドマークラベルを比較的一貫して配置するのに役立つ配置ルールが確立されました

マップのメッセージを増幅する

カナダの哲学者マーシャル・マクルーハンは、「メディアはメッセージである」と有名に引用しました。地図が媒体であり、地図がメッセージである場合、なぜこれほど多くの地図に地図が欠けているように見えるのでしょうか。

非常に多くの場合、マップには非常に詳細なデータが含まれているため、空間指向のベースを識別できません。熱心な設計者やエンジニアとして、私たちはしばしばそのデータを共有することに熱心であるため、ユーザーを圧倒し、地図上の他の重要な情報を遮ることがあります。

これが、最新のマップデザインが、すべてのクリックがユーザーにとって何を意味するのかを判断するために多大な労力を必要とした理由です。マップをクリックするたびに、表示される内容と方法が劇的に変化しました。

ユーザーに力を与える

グーグルマップの誕生以来、ユーザーがグーグルマップの力を自分のカスタム作品に利用できるようにするという強い歴史があります。 データの視覚化

カスタムマップを作成する場合でも、ケンブリッジのお気に入りのカフェのコレクションでも、オックスフォードのコーヒー消費量を空間的に視覚化する場合でも、そのメッセージはマップ上で最も目立ち、魅力的なものになるはずです。

類似のコンテンツをグループ化し、異なるコンテンツを分離するという単純な行為は、ユーザーがページコンテンツをスキャンして理解するのに役立ちます

類似のコンテンツをグループ化し、異なるコンテンツを分離するという単純な行為は、ユーザーがページコンテンツをスキャンして理解するのに役立ちます

これを行うには、コントラストの原則を使用して、場所(コーヒーカップで視覚化されます)を地図上で最も目立つようにします。マップの「論文」をマップのベースと区別します。重要性が低い、または不要なマップのコンポーネントをミュートまたは抑制します。

表示するデータについては慎重に検討してください。データが多いからといって、一度にすべてを表示する必要があるわけではありません。

ビジュアルトラフィック

マップのメッセージが明らかな場合は、ほとんどの場合、スキャンに最適です。地図上の「視覚的なトラフィック」が少ないほど、人々はそれを消費して消化しやすくなります。

たとえば、次の場所に地図が表示されている場合 Googleのフライト検索ツール 、デフォルトのマップは大幅に簡略化されており、現在地、大陸内の国境、および一部の目的地の都市のフライト価格のみを表します。

簡単な実施

コンテンツの簡単な「ぼかしテスト」を実施すると、最も太字の領域がマップの最も重要な部分であるかどうかを評価するのに役立ちます

人々は地図を読むのではなくスキャンするので、これらの設計の基礎と原則が機能しているかどうかをどのように判断できますか?まず、簡単な「ぼかし」テストを実行します。あなたがそれをかろうじて見ることができるようにあなたの地図またはあなたのページと目を細めてください。最も目立つものは何ですか?少なくとも?

地図のメッセージが目立つように表示されていますか?その「論文」はあなたの注意の視覚的な焦点ですか?そうでない場合は、マップの設計上の決定を調整する必要があります。

また、簡単な「発声」テストを実行します。目立つ順序で、すべての要素が自分自身を識別するために話すことができる場合、マップは何を示しますか?地図はどのくらい「うるさい」でしょうか?以下のフライトマップの発声は、「ロンドン、フランクフルトへのフライト」で始まり、その後に近くの都市へのフライト価格の二次的な口述が続きます。

以来

犬と猫の描き方
Googleのフライト検索マップの「メッセージ」は主にフライト価格に関するものであるため、デフォルトのマップはこれを促進するために大幅に簡略化されています

最終的に、これらの基礎、原則、および演習により、私たちは「この地図は何を言うべきでしょうか?人々はそれをどのように使用しますか?このマップを使用した最終的な結果は何ですか?」

過去8年間のGoogleマップの進化の中で、これらの質問は私たちを興奮させ、挑戦し続けます。

言葉: パトリックホフマン 図: ジェームズ・オコネル

Patrickは、オーストラリアのシドニーにあるGoogleのシニアユーザーエクスペリエンスデザイナーです。彼は2007年にGoogleマップで働き始めました。この記事はもともと ネットマガジン 251号。