Разбор кейса: Эволюция Карт Google и методология выбора цвета

Почти невозможно представить себе то время, когда мы не могли просто ввести адрес в свой смартфон и поехать. С момента своего появления в 2005 году Карты Google эволюционировали и адаптировались к желаниям и потребностям нашего стремительно развивающегося и постоянно меняющегося общества.

Одним из постоянно совершенствуемых аспектов продукта является цветовая система Google Maps. При взгляде на текущий интерфейс видно, что цвета сведены к минимуму, а небольшие изменения градиентов создают минимальное, но эффективное ощущение глубины. Но так было не всегда. В прошлом году компания Google предприняла экспедицию, длившуюся 1 год, чтобы совершить невероятный подвиг – постепенно усовершенствовать свою цветовую палитру с 700+ цветов до 25 основных и второстепенных оттенков, повысив при этом удобство использования. В этой статье мы рассмотрим переход к этой инновационной палитре.

С чего все начиналось?

В сообщении в блоге Google Алекс Валлис упоминает о том, как в первоначальной цветовой конфигурации каждой детали присваивался определенный цвет (например, для кустарников – один цвет, а для глубокого леса – другой). Это, в свою очередь, создавало настолько незначительные различия в цветах, что было практически невозможно выделить такие важные элементы, как дороги, текст и границы.

Дэвид Кронин (UX-директор) сказал, что помнит, как у него "отвисла челюсть, потому что было так много цветов". По словам Даны Штеффе (визуальный дизайнер), они начали строить гипотезу о том, можно ли сократить цветовую палитру до меньшего количества образцов, которые в большей степени соответствуют материальному дизайну, сохраняя при этом мельчайшие детали.

Переоценка текущего дизайна

Команда Google Maps начала с экспериментов по выделению деталей карты, улучшению доступности и сокращению цветовой гаммы. Они подвергли сомнению основные предположения и спросили, почему именно эти цвета были выбраны изначально.

Ниже приведен один из многих примеров. Пустыня Сахара отличается разнообразным рельефом, сформированным со временем под воздействием ветра. Географические особенности включают песчаные дюны, песчаные моря (эрги), бесплодные каменные плато, гравийные равнины, сухие долины и солончаки. Однако эта вариативность не была отражена в предыдущем дизайне Google Maps, где большая часть региона была представлена обычным светло-бежевым тоном.

Было очевидно, что реализация цветов не отражает истинную природу ландшафтов по всему миру. Было решено, что этот проект, если он будет осуществлен, позволит выявить несоответствия и ненужные аспекты текущей унаследованной системы, чтобы создать структуру, которая в гораздо большей степени отражает детали Земли.

Эмоции, скрытые за цветом

Хотя разные цвета могут вызывать различные эмоции у каждого человека в зависимости от географического и культурного контекста, они также могут помочь установить эмоциональную связь с конкретным визуальным ориентиром или земным объектом.

У жителя Амальфитанского побережья водоем может сразу ассоциироваться с прозрачной и блаженной голубизной или бирюзой, в то время как житель Амстердама с нежностью вспомнит о своих каналах коричневых тонов, которые в неподвижном состоянии отражают яркую окружающую архитектуру. Чтобы полностью понять важность эмоциональной связи с земными объектами, команда дизайнеров Google поделилась личными памятными вещами о водоемах, которые они видели по всему миру.

Самое пугающее в этом деле - точно отобразить мир людей. Как сделать это хорошо, и как сделать это глобально? Когда вы выбираете цвета для пустыни или леса, мы все знаем, что эти регионы не везде выглядят одинаково.
‍Дана Стеффе, штатный визуальный дизайнер

Продукт разрабатывался для пользователей со всего мира, поэтому при выборе цвета важно было учесть множество точек зрения. Хотелось отразить пользователей и мир, в котором они живут, передав яркие краски мира таким образом, чтобы в них чувствовался смысл.

Экспериментирование и совершенствование цвета

Команда начинала с маленьких шагов, делая небольшие изменения за один раз, что вселяло в них уверенность в переходе к более крупномасштабной работе.
Что сделало это сотрудничество действительно волшебным, так это наши разговоры о том, на какие типы вопросов мы пытаемся ответить и когда: Что мы пытаемся помочь пользователям узнать о мире? Как мы можем побудить их исследовать карту немного больше? Так мы начали совершенствовать иерархию, чтобы донести до пользователей мысль о том, что им еще многое предстоит узнать.
‍Сара Нидхэм, старший дизайнер взаимодействия

Лучший вариант не был получен моментально. Были сотни эскизов и итераций над цветами и иерархией, как вы увидите ниже в исследованиях цвета для воды.

Так как же все это работает? Google Maps располагает спутниковыми снимками высокой четкости для более чем 98 процентов населения Земли. Новая "алгоритмическая техника цветового картирования" Google способна использовать эти спутниковые снимки и преобразовывать их в комплексные и легко различимые элементы карты – от оживленных дорог до пышных зеленых лесов и различных типов синего цвета для озер, океанов и ущелий.

Для этого Google проанализировал современные спутниковые снимки и назначил более детальные цвета из цветовой модели HSV для различных типов областей. Мэтт Симпсон (штатный UX-дизайнер) заявил: "Мы смогли сделать больше, используя меньше".

Результат

Команде Google удалось ограничить цветовую палитру до 25 основных и второстепенных тонов, что значительно уменьшило сложность и приблизило ее к материальному дизайну.

После того, как изменения были реализованы в следующем обновлении, пользователи смогли полностью понять, что они видят, и осознать контраст между элементами. Ниже вы можете увидеть изображение Национального парка горы Рейнир "до" и "после". Теперь снежные вершины хорошо видны и эффектно детализированы, отражая истинную природу этого конкретного ландшафта.

Ниже приведен еще один яркий пример – Исландия до и после. Суджой Банерджи (дизайнер продукта) добавил: "Богатый ландшафт Исландии теперь гораздо легче представить. Вы можете увидеть различную плотность зелени по всей стране и легче заметить Ватнайёкюдль – самую большую ледяную шапку в Исландии, которая теперь изображена белым цветом".

Google удалось:

• Эффективно экспериментировать и совместно тестировать различные цветовые концепции, чтобы найти лучшие варианты для редизайна.
• Сократить сложную цветовую палитру до чего-то более минимального, но одновременно более детального и точного.
• Создать более доступный и удобный продукт, не забывая о миллиардах пользователей.
  

Этот просчитанный и обоснованный минимализм раскрыл потенциал для создания более точного отображения мира. Сведение всего к основам пошло на пользу команде, создав чистый, доступный и информативный продукт, который также выступает в качестве гибкой основы для дальнейшего развития.