Тренды дизайна 2015 года на примере мобильного дизайна и разработки UI / UX

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

Начиная с тенденций плоского дизайна (Flat Design) и двигаясь к материальному дизайну (Material) было интересно, какие тренды появились и хотелось понять, что они из себя представляют и куда они нас ведут? Почему именно они стали наиболее удобными для пользователей?

1. Упрощение: дизайн стал намного проще

Что это? Вместо включения широкого спектра градиентов и теней здесь наблюдается смещение к Flat Design, что создает более легкую эстетику в приложении. Это означает, что использование отрицательного пространства вместо градиентов, теней и т.д. создает простой интерфейс, ориентированный на наличие только основной информации и удаление элементов дизайна, которые ни сами по себе не являются продуктивными, ни для притока пользователей. Для чего? Flat Design не отвлекает, а помогает глазу пользователя следить за смысловым содержанием на экране, что позволяет упростить навигацию и в то же время обеспечивая гладкую, современную эстетику самой марки.

2. Один шрифт для всех элементов

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

3. Блоки и пространства: линий больше нет

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

4. Центр внимания – данным

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

5. Микро-взаимодействия

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

6. Сокращаем цветовую палитру до минимума

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

7. Многоуровневый интерфейс

Совсем не так давно интерфейсы были сосредоточены вокруг принципа скевоморфизм – дизайн, который заимствует внешний вид и функциональность у исходных натуральных объектов (например, цифровой календарь, напоминающий настольный бумажный календарь, 3D глубина напоминает иконки приложений, щелчок затвора – звук мобильного телефона, и т.п.). В свою очередь Flat Design отошел от этого принципа при помощи использования многоуровневой системы, которая помогает создать более реалистичное ощущение размеров и глубины. Уровни дают возможность показать как один объект располагается над другим, показывая преимущество одного из элементов. Увеличение глубины и расслоение помогает пользователю быстрее определить взаимосвязь между различными элементами, правильно распределяя между ними внимание.

8. “Кнопки-призраки”

Упрощение интерфейсов коснулось и интерактивных элементов. Вместо выпуклых кнопок появились “кнопки-призраки” – это прозрачные кнопки, не имеющие цветовой заливки с очень тонкими границами, прямоугольной или квадратной формы, с прямыми углами. Текст в этих кнопках минимален и прост. Такие кнопки ненавязчивы, но в то же время захватывают внимание пользователя. Они позволяют более понятно обозначить иерархию кнопок в дизайне сайтов и приложений. Иногда в материальном дизайне используются едва уловимые тени, чтобы помочь пользователям воспринять эту иерархию.

9. Жесты

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

10. Движение – как управление вниманием

Развитие программного обеспечения дает дизайнерам возможность контролировать движение оформляя их всевозможными стилями и сценариями. Дизайн на основе движения элементов реализуется через огромное многообразие различных форм, переходов, анимации и даже текстур для имитации 3D глубины эрана или отдельных элементов. Использование движений в дизайне сайтов и мобильных приложений помогает пользователям более вовлеченно взаимодействовать с контентом, быстрее дифференцируя различные области и элементы, легче усваивая нужную информацию. Так же движения помогают привлечь внимание пользователя к определенной области или наоборот отвлечь от нее.

11. Сокращение пользовательских сценариев

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

12. Проектирование как норма

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

13. Использование прототипов как лучшая практика

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

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