Правила юзабилити

Примеры материального дизайна

Команда AskUsers

Команда AskUsers

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


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


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


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

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

  1. Материал — это метафора.

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

  2. Печатный дизайн.

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

  3. Движение создает смысл.

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


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



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

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


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

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

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


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


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

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

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

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

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

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

Сделать проект с материальным дизайном — не означает, что нужно слепо скопировать 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

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


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


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

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


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

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

Закажи юзабилити-тестирование прямо сейчас
Заказать
4062
Читать также