Каждый год появляются новые элементы и стили в дизайне сайтов. Некоторые элементы помогают пользователям лучше понять стоящий за сайтом бизнес. Другие элементы улучшают восприятие контента. Применять все новое сразу не стоит. Но точечные изменения улучшат пользовательский опыт.
8 элементов веб-дизайна, которые улучшат пользовательский опыт в 2021
Рассмотрим, какие элементы дизайна оказывают наибольшее влияние на пользователя, его восприятие и решения на сайте.
1. Оригинальный крупный шрифт
Многие бренды используют оригинальную типографику, чтобы выделяться на фоне конкурентов. Сознание человека моментально считывает изображение, за доли секунд идентифицируя компанию.
К примеру, издание The New Yorker узнаваемо за счет применения оригинального шрифта Adobe Caslon Pro:
От типографики зависит многое: восприятие, читабельность материала, мнение о компании и доверие пользователей. Важно, чтобы шрифт поддерживался операционными системами и браузерами, иначе сайт будет отображаться как попало на разных устройствах.
2. Большое главное изображение
Medium — прекрасный пример того, как одно изображение подчеркивает тон статьи, задает настроение, доносит идею. Такое изображение часто работает значительно лучше кликбейтных заголовков, мотивируя пользователя погрузиться в материал.
Важно, чтобы изображение адаптировалось под размеры устройства, с которого пользователь просматривает сайт.
3. Фоновое видео
Видео на заднем плане, которое воспроизводится по ходу просмотра сайта, добавляет ценности и упрощает страницу. Оно расскажет пользователю больше, чем любой другой контент, позволит уменьшить объем контента на странице, точнее донесет идеи.
Такое видео захватывает внимание пользователя в момент перехода на страницу и приводит к нужным действиям. Видео может применяться в сложных тематиках, где пользователю непросто самому разобраться с вопросом. В отличие от текста фоновое видео не требует усилий от человека. Видео лучше покажет этапы производства, товар или бекстейдж — работу команды, то, что никогда не увидит потребитель, когда берет товар с полки.
Высокая скорость соединения и большие экраны смартфонов позволяют использовать видеоряд даже на тех сайтах, которые получают большую часть трафика с мобильных устройств.
4. Полуплоский дизайн
В 2013 году компания Apple перешла на плоский дизайн для iOS. В плоском дизайне отсутствует эффект реалистичности и трехмерности. Он прост для восприятия, быстрее загружается.
Но недавно плоский дизайн получил новый виток развития. Компания Uber в дизайне сайта добавила тени и второй слой:
При наведении курсора текст пропадает и пользователь видит скрывающуюся за ним картинку.
Плоский дизайн помогает пользователям лучше понять контент, добавление теней делает его более живым и интерактивным.
5. Меню-гамбургеры
Многие сайты показывают большое меню пользователям. Из такого меню пользователь может сразу перейти на нужную страницу без лишних кликов. Оно также исключает ошибочные переходы, а также снижает риск того, что пользователь в сложной структуре не найдет того, что искал.
Основным недостатком большого меню становится полезная площадь экрана, которую оно забирает. Решением становится группировка меню под одной кнопкой, а для быстрого доступа пользователей применяют всем известный значок:
Такой подход к организации меню упрощает дизайн, делает его более логичным, а доступ к разделам быстрым.
6. Большие изображения товаров
Большие изображения высокого качества помогают четко демонстрировать отличительные черты товара, что критично важно в мире, где большая часть решений о покупке принимается именно онлайн.
Крупный план товара вскрывает больше деталей. Так, к примеру, на странице Apple iPhone 12 мы увидим, что камера у смартфона выступает:
А вокруг дисплея присутствует заметная черная рамка:
Такие изображения дают четкое представление потенциальному покупателю о товаре.
7. Карточный дизайн
Воодушевленные Instagram и Pinterest, дизайнеры перенесли карточный дизайн на сайты. Он позволяет разбить контент на логичные блоки, в каждом из которых содержится соответствующее изображение. Такой подход к дизайну и организации информации упрощает навигацию и восприятие.
Такой дизайн разбивает монотонный контент на простые, небольшие блоки, позволяет сравнивать товары и решения.
8. Короткие видео о товарах и услугах
Видео помогает пользователям лучше понять товар или услугу, принять правильное решение. 42% пользователей смотрят видео о товаре/услуге перед заказом. Лучше, чтобы это видео было непосредственно на самой странице продукта, нежели в независимом источнике. Лучше, чтобы это видео было оригинальное, а не стандартное.
Небольшие демонстрационные видео покажут все функции товара, его применения. К примеру, такие видео отлично дополняют карточки товаров в магазинах игрушек:
Короткие видео показывают основную суть товара, не заставляя пользователя смотреть длинные обзоры.
Такие простые элементы дизайна помогут качественно улучшить пользовательский опыт: упростить доступ к контенту и его восприятие, сделать выбор и принять решение.
Эта публикация также доступна на Дзен-канале Миралинкс!
в принципе ничего нового, есть множество более интересных и лёгких элементов и решений.