Редизайн Google Chrome

Перевод статьи Ханны Ли, дизайнера Google.

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

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

1. Знакомьтесь, наша строка

У меня часто возникают вопросы вроде «Зачем нужен дизайнер для Chrome?» Мой коллега Себастьян прекрасно описал это в своем посте на Medium, когда сказал:

Самая жёсткая обратная связь, которую я получил: «Это всё?»

В основе этого вопроса лежало предположение, что браузеры должны были выглядеть так:

Это знакомо, потому что похоже на то, что на моём компьютере и, кажется, работает с 2 млрд пользователей. Так зачем же что-то переделывать?

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

И мы хотели его создать так, чтобы он изменил представление о браузерах в мире.

2. Короткая история строк

Чтобы понять, как мы к этому пришли, давайте рассмотрим поподробнее:

Этот градиентный контур 0.5 dp, двойной тенью с непрозрачностью 22% и маленьким скруглением 1dp говорит одно: «Я могу писать внутри».

Почему? Потому что когда компьютеры были всего лишь клавиатурами, прикрепленными к мониторам, весь экран состоял из текста.

Но когда изобрели мышь, нужно было показать, на какую область можно нажимать. Так как мониторы могли рисовать только квадратные пиксели, родилось «текстовое поле ввода».

Когда появились браузеры, это поле играло двойную роль — показать ваш адрес или “Uniform Resource Locator (URL)” — отсюда и название «адресная строка».

В 2008 году, когда Chrome впервые появился на свет, основной принцип нашей разработки заключался в снижении нагрузки на когнитивные функции. Поэтому мы объединили поисковое окно Google с адресной строкой и добавили выпадающее меню с тенью 4dp, чтобы сделать предложения удобнее для сканирования — отсюда и название “omnibox”.

​2008 год

Когда браузеры впервые появились на мобильных устройствах, экранное пространство было очень ценным, поэтому мы создавали каждый пиксель так, чтобы занимать как можно меньше места. В качестве альтернативы мы использовали 1dp внутреннюю тень и сделали её серой.

​2012 год

С тех пор интернет стал более продвинутым, а устройства — «умнее». Мы начали заботиться о том, что происходит, когда сайт взламывается и компрометирует вашу личность. Или когда ты внезапно теряешь подключение к интернету. Или хочешь вернуться на страницу, которую посетил неделю назад, но не можешь вспомнить адрес.

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

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

Должна признать, я не знала и половины особенностей Chrome, пока не начала работать здесь. Например, для переключения между вкладками можно проводить пальцем по панели инструментов влево или вправо. Или проведите вниз, чтобы просмотреть все вкладки.

Такие функции казались скрытыми, потому что мы никогда не хотели засыпать пользователей спамом. На самом деле, наша многофункциональная панель была разработана, чтобы быть невидимой для соблюдения нашей основной ценности — «содержание, а не хром». Этот принцип нравится мне настолько, что стал одной из причин, по которой я стала работать тут.

Как у интроверта, был интерес к проектированию того, что также пытается быть невидимым. Сам продукт, казалось, отражал мой взгляд на дизайн: защищать священное пространство между пользователем и контентом, не привлекая внимания.

Подобно тому, как Беатрис Вард воспринимала типографию как «хрустальный кубок», я видела Chrome не более чем «кристаллическим дисплеем».

Я сильно ошибалась.

По мере изменения интернета третьи лица стали выдавать себя за Chrome для кражи информации и намеренно вводить в заблуждение.

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

Так что впервые мы начали сомневаться в том, что нам нужно быть менее невидимыми.

3. Поле с 2000 гранями

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

Выглядело так, будто я никогда ничего не создавала за 15 лет работы.

Мы поддерживаем более шести версий Android на 40 языках — включая те, которые не поддерживает Roboto Medium. Мы также позволяем разработчикам менять цвет панели инструментов практически на любой цвет, сохраняя при этом коэффициент контрастности для поддержки экосистемы веб-приложений.

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

Это более 2000 вариантов строки — еще до того, как вы с ней столкнётесь.

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

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

Наша строка с 2000 вариантов затем умножается на более чем 20 тысяч с учетом всех взаимодействий.

Много? Не совсем.

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

4. 95 оттенков серого

Даже в нашей команде никто не знал, сколько вариантов текстовых стилей живет внутри этой рамки. Поскольку Chrome был создан более 10 лет назад, у нас был разбросанный набор неполных или устаревших исходных файлов.

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

Конечно, несколько лет назад мы «материализовали» наш пользовательский интерфейс, но у нас не было никаких указаний, как и когда использовать эти параметры, в результате чего мы получили более 14 оттенков серого цвета Material для обычного текста 14sp Roboto.

Мы использовали более 95 различных оттенков серого.

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

Ответ пришел почти полгода спустя: восемь.

Затем мы сделали то же самое для каждой иконки в нашем пользовательском интерфейсе. Все 115 из них — тщательно выбирая, какие из них должны быть Material (значки меню), какие специфичными для Chrome (например, Incognito), а какие специфичными для платформы (например, копирование, вставка), не включая выбранные, нажатые и отключенные состояния для всех из них.

Кроме того, некоторые из наших иконок перевернуты для языков справа налево, так что общее количество символов было более 400.

5. Дизайн никогда не готов

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

Обладая ложной уверенностью того, кто только что выиграл игру Getting Over It, я искренне думала, что смогу сделать это сама. Но чем больше я старалась, тем более очевидным становилось то, что эта проблема не решалась с помощью простого редизайна.

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

Это было сложно, потому что Chrome постоянно балансирует между спецификациями Google (вход в систему), спецификациями Material Design (кнопки и иконки), собственным пользовательским интерфейсом (клавиатуры) и брендовыми элементами Chrome (автономная игра Dino).

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

Чтобы дать вам представление о том, насколько удивительна наша команда инженеров, в ведущем заявлении Теда буквально сказано “Chrome Mobile Awesomification”.

С новой поддержкой мы решили построить визуальную спецификацию общих компонентов на основе библиотеки кода. Material-компоненты, которые другие приложения получают «бесплатно», должны были быть настроены таким образом, чтобы соответствовать всем 2000 модификациям Chrome к тому моменту, когда он был почти построен с нуля.

Поэтому нам нужно было найти масштабируемый способ выявить все эти различия.

Результатом стал наш первый в истории документ с изображениями Chrome:

6. Проектирование для скорости

Месяцами мы просто удаляли что-то. Устранение накопившейся за годы проектной и инженерной нагрузки. Теперь, когда у нас была кристально чистая поверхность и система строительных блоков, мы были готовы начать проектирование.

Давайте вернемся к ячейке, которую мы впервые встретили в первой главе. Ячейка №1 находится в серой ячейке большего размера, которую мы называем «панелью инструментов».

Панель инструментов отделяет наш пользовательский интерфейс от содержимого и системного пользовательского интерфейса. Когда вы нажимаете на белый квадрат, он заполняет серый квадрат, и внизу появляется еще один квадрат серого цвета. (Сбивает с толку, да?)

Здесь мы покажем все, что мы делаем за занавесом, чтобы сделать Chrome настолько полезным, насколько это возможно. Но почему все эти блоки изменяют размеры и состояние?

Когда что-то меняется от экрана к экрану, становится трудно распознать или привыкнуть к этому.

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

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

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

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

Даже если это экономит одному человеку в каждом городе всего 1 секунду, это примерно 2 млн секунд, или 23,14 дня времени. Подумайте, что люди могут сделать с 23 дополнительными днями!

Чтобы продемонстрировать, давайте посмотрим на нашу панель инструментов с удаленным текстом и иконками:

Вы замечаете, как много отбрасывает глаз вокруг экрана, чтобы обрабатывать различные элементы?

Теперь давайте посмотрим на тот же экран с удалением только цветов и теней:

Начало работы с нуля или то, что мы называем «строительством из белого», означало, что каждый элемент должен был быть обдуман. Включая эту строку, которая все эти годы тихо сидела над нашим пользовательским интерфейсом:

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

Но давайте перейдем к панели инструментов. Эти иконки поставлялись вместе с двумя другими невидимыми ячейками:

1. «Ограничительная рамка», которая обозначает зону, которую занимает изображение.

2. «Зона действия», которая обозначает область, к которой можно прикоснуться.

Поскольку значок меню «три точки» был тощим, он имел меньшую площадь касания. Но если просто увеличить размер площади, она стала бы визуально несбалансированной, создавая неравномерные зазоры между значками.

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

Да, я целую неделю смотрела на невидимые контейнеры. Кто-нибудь заметит? Скорее всего, нет. Оно того стоило? 2 млн раз да.

7. Одно окно, чтобы управлять ими всеми

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

Мы хотели найти способ тонко укрепить бренд Chrome, учитывая тот факт, что наш логотип редко появляется в пользовательском интерфейсе. Я создала десятки проектов, которые казались многообещающими, только чтобы понять, что ни один из них не работает, потому что у них у всех не было смысла.

Итак, я вернулась к столпам нашего бренда и внимательно изучила наш логотип. Первое, что я заметила, это строчная буква «С».

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

Круги — это естественные формы, в отличие от прямоугольников. Так что у них меньше зрительной когнитивной нагрузки. Эта форма была еще свежей в моем сознании после двухлетнего пребывания в Лондоне.

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

Мне показалось, что это лучшая метафора для нашего омнибокса.

Она должна не просто показывать, где ты находишься, она должна помогать тебе попасть из одного места в другое.

Глубоко изучив наш логотип, мне особенно понравилась его форма:

Это была буквально форма нашего бренда.

Он отразил наш характер, продемонстрировав, что это не просто «поисковая строка» или «адресная строка», а что-то новое, дружелюбное.

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

Случайно, у нас также была команда на выставке Фрэнка Стеллы в музее Де Янга. Использование Стеллой холстов криволинейной формы вырвалось из стандартной прямоугольной рамки.

Как и я, он любил гоночные автомобили, и в своей картине «Довиль», входящей в его «серию гоночных треков», он использовал похожую форму для обозначения скорости — одной из главных опор хрома.

Я повторила модернистские настроения, потому что традиционные формы искусства становятся неактуальными и устаревшими для наших задач. Поэтому мы назвали наше новое направление визуального дизайна «Модерн».

Затем мы изучили тысячи проектов.

Сначала я придерживалась того же подхода, что и мы изначально использовали в мобильном приложении. Использование 1 dp линии контура, казалось, имеет смысл. Но на практике он терялся в море белых сайтов с поисковыми строками сверху. Линия контура также не работала в режиме инкогнито и была плохо сбалансирована с толстыми очерченными иконками.

Один из наших дизайнеров действительно думал, что это просто вайрфрейм.

Использование тени Material также было не совсем уместно, так как это не решило нашу первоначальную проблему с представлением как простое «поисковое окно». А донная нижняя добавила еще 4dp, она была тяжелой и вертикально смещенной по центру.

Мы даже попытались полностью удалить контейнер, но элементы теперь казались случайно разбросанными, и изменение вроде центрирования URL-адреса повлекло за собой значительные затраты на разработку.

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

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

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

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

Идально? Пока нет, но это не то, что заставляет меня не гордиться тем, что мы сделали. Дело в том, что мы сделали Chrome меньше по размеру и снизили затраты на загрузку, сделав так, чтобы каждый пиксель, который мы создали, прокладывал путь следующему дизайнеру, который придет с чем-то еще более лучшим.

Лично я поняла, что мы что-то сделали правильно, когда один из участников нашего исследования пользователей сказал:

«Это заставляет меня чувствовать себя спокойнее и может помочь мне в течение всего дня».

Не потому, что им понравился дизайн, а потому что именно так я видела Chrome.

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

Больше статей, а также интервью с дизайнерами и полезные инструменты вы можете найти в моем телеграм-канале: @dezzigners

0
60 комментариев
Написать комментарий...
Ринат Г.

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

Ответить
Развернуть ветку
Roman Sergeevich
Ответить
Развернуть ветку
Юрий Дружинин

Вот спасибо, мил человек!
И почему они не сделают так, чтобы эта штука вылазила через секунду например?!

Ответить
Развернуть ветку
57 комментариев
Раскрывать всегда