Утечка: Как и почему Google создал Material 3 Expressive

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

Полная запись в блоге была сохранена Wayback Machine (изображения, которые не отображаются в архивной версии, приведены ниже). Вот основные выводы:

Material 3 Expressive — это так называемое Google «смелое новое направление в дизайне», которое является «наиболее исследованным обновлением системы дизайна Google за всю историю». Google хочет, чтобы приложения «вышли за рамки «чистого» и «скучного» дизайна, создавая интерфейсы, которые эмоционально связывают людей». Помимо полного названия, оно также называется «M3 Expressive» или просто «выразительный дизайн».

Material 3 Expressive родился из исследований — не в том смысле, что 41 оттенок синего делегировал решения по дизайну данным, а в совместном исследовании, охватывающем исследования, дизайн и инженерию.

В 2022 году команда Material Design начала задаваться вопросом: «Почему все эти приложения выглядели так похоже? Так скучно? Неужели не было места, чтобы усилить ощущения?»

Реклама — прокрутите вниз для продолжения

За последние три года мы исследовали последствия этого разговора, итеративно проходя десятки раундов дизайна и исследований, чтобы найти следующее развитие Material Design. Благодаря 46 отдельным исследованиям с сотнями дизайнов и более чем 18 000 участников со всего мира, мы разработали систему, которая одновременно красива и высокопроизводительна. Принципы Material 3 Expressive основаны на надежных исследованиях и построены на проверенных временем передовых практиках удобства использования, поэтому дизайнеры могут уверенно использовать эти новые компоненты и принципы, зная, что они создают что-то простое в использовании и с чем люди смогут установить эмоциональную связь.

Эти исследования включали:

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

Google утверждает, что «фундаментальными частями выразительного дизайна являются использование цвета, формы, размера, движения и содержания». Кроме того: «Material 3 Expressive характеризуется смелым использованием формы и цвета — создавая приятный пользовательский опыт».

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

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

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

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

Опять же, важно подчеркнуть, что это всего лишь концептуальные дизайны, не отражающие реальные продукты. (В качестве более окончательного варианта, редизайн Google Clock просочился на выходных.) Тем не менее, пример «до» ниже явно представляет собой текущий интерфейс Gmail.

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

Другие концептуальные дизайны показывают приложение часов, голосовой ввод, фоторедактор, платежи и кошелек:

Тем временем, исследования и тестирование пользователей показали, что «хорошо примененный выразительный дизайн гораздо больше предпочтителен людьми всех возрастов, чем невыразительный дизайн, который следовал рекомендациям Apple Human Interface Guidelines».

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

• …мы обнаружили 32% увеличение восприятия субкультуры, что указывает на то, что выразительный дизайн делает бренд более актуальным и «в теме».
• …34% прирост современности, что делает бренд свежим и дальновидным
• …30% скачок в бунтарстве, предполагающий, что выразительный дизайн позиционирует бренд как смелого и инновационного лидера, готового отказаться от конвенций.

Спасибо, Саймон