Главная страница

Материальный дизайн в вебе: когда и как использовать

25 июня 2014 года Google на собственной I/O конференции анонсировал переход к материальному дизайну всех продуктов компании.

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

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

По своей амбициозности и сложности инженеры Google сравнивали эту задачу с полетом на луну — из-за чего разработка получила внутреннее название «проект Кеннеди» в честь президента Джона Кеннеди, с подачи которого стартовала легендарная лунная программа.

Главные принципы материального дизайна

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

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

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

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

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

    Матиас Дуарте, вице-президент Google по материальному дизайну



По умолчанию толщина каждого слоя составляет 1dp — примерно равно толщине листа бумаги или 1/96 дюйма. Естественно, это условное значение: экран все равно остается плоским. Но с помощью теней, которые в материальном дизайне не просто задают объем, но и помогают выстраивать иерархию слоев и отдельных элементов в интерфейсе, пользователь получает такой же опыт, как и при работе с привычными объектами физического мира.

Почему это важно


Сейчас уже никто не «ходит в Интернет» — как это было еще 10-15 лет назад, когда было нужно сначала попищать модемом, а потом еще минут 5 загружать пару сайтов или почту. И все это происходило на выпуклом мониторе с диагональю 17 дюймов и размером с небольшой ящик.

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

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

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

Когда нужен материальный дизайн, если вы не Google


  1. Если вашим интерфейсом пользуются со смартфонов и с десктопов одновременно. Зайдите в Яндекс Метрику или Google Analytics и посмотрите статистику по пользовательским устройствам: если доля мобильных пользователей больше 20-30% — материальный дизайн можно внедрять уже прямо сейчас.
  2. Если у вашего сайта или приложения высокий показатель отказов или плохой retention rate (показатель возврата пользователей). Тоже можно посмотреть в статистике.
  3. Если наблюдается большой перекос в конверсиях у десктопных и мобильных пользователей — значит, кому-то из них ваш сайт неудобен, а это повод задуматься о материальном дизайне, чтобы выровнять уровень конверсии.

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

Как использовать принципы материального дизайна для вашего проекта


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

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

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

Используйте стандартные иконки

ikonki dlya sajta.jpg
Больше иконок можно найти официальном руководстве по материальному дизайну от Google

Создавайте иерархию на странице при помощи теней

vvebe1.jpg
В этом примере мы видим, как приоритетный тариф с помощью тени выдвигается на первый план. Хотя объекты на экране находятся в одной физической плоскости, с помощью тени создается приоритет для одной из карточек — она как будто находится над остальными вариантами.

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

Сделайте так, чтобы интерфейс реагировал на действия пользователя


Кнопка до наведения курсора:knopka.jpg

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

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


Еще один пример — обычное изображение в галерее:foto na sajte.jpg

При наведении курсора появляется тень — объект выдвигается на первый план — и появляется стандартная иконка в углу изображения — мы сразу пониманием, что по клику или при нажатии на нее появится дополнительная информация:interfejs sajta.jpg

Так и происходит:dejstvija na sajte.jpg
Все действия понятны и предсказуемы. Интерфейс помогает пользователю получить дополнительную информацию. Хотя до начала взаимодействия эта возможность не была очевидной.

Делайте четкие края у элементов

graphika.jpg
Без размытостей, закругленностей и других геометрических излишеств. Принцип прост — чем проще, тем понятнее. И тем более предсказуемым и эффективным будет взаимодействие интерфейса с пользователем.

Делайте четкие края у элементов

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

Обратите внимание: в примере цвет блоков меню помогает в навигации на странице. Также цвет может использоваться для определения иерархии объектов на странице наравне с тенями.

Проверьте, как ваши пользователи реагируют на новый дизайн


В идеале нужно проверять и измерять реакцию на внедрение каждого отдельного элемента или принципа.

Мы подробно об этом писали в предыдущих статьях:
Почему тестирование — это постоянный и непрерывный процесс, а не разовая акция
Способы проверки решений и инструменты для тестирования прототипов и сайтов


Подводя итоги


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

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

Подпишитесь на обновления, чтобы быть в курсе!

Оцените статью:

( 1 оценок, средняя: 3.3 из 5 )

Новые кейсы и лайфхаки еще впереди. Подпишитесь на обновления, и узнавайте все первыми. Это бесплатно!

Адрес подписки уже существует. Пожалуйста укажите другой адрес.

Указать другой

На ваш почтовый адрес отправлено письмо для подтверждения подписки.

Если вы ещё не являетесь пользователем AskUsers,
но хотите улучшить свой сайт, то просто зарегистрируйтесь.

Хочу попробовать
Блог
Для заказчиков
Для асессоров
Каталог разработчиков
О сервисе
Партнерская программа
Пресса
Контакты
Сделано с  StudioF1  в Студии F1

AskUsers.ru © Copyright 2015 г.

Регистрация
Буду проводить исследования
Буду тестировать сайты
Необходим для подтверждения регистрации и восстановления пароля

Если у вас уже есть аккаунт, воспользуйтесь формой входа

Восcтановления пароля

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



Если у вас уже есть аккаунт, воспользуйтесь формой входа

Войти в личный кабинет
Забыли свой пароль?

Если у вас ещё нет аккаунта, зарегистрируйтесь прямо сейчас