Тренды UX и UI в 2020 году

21 декабря 2020

Разработка web сайтовПо итогам 2019 года объем продаж рынка электронной коммерции достиг 4 млрд долларов. Аналитики прогнозируют 20% рост до конца 2021 года. Это 15% розничной торговли в мире.

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

Мы поговорим о тенденциях дизайна UI / UX в 2020–2021 годах и о том, что нужно улучшить на своем сайте, чтобы сделать его более удобным для мобильных пользователей.

Что такое UX и UI

UX или взаимодействие с пользователем, отображает действия пользователя на веб-сайте или в приложении. Дизайнер подстраивает UX под типичного пользователя. Хороший UX ведет пользователя вручную к кнопкам, страницам и категориям, которые он ищет.

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

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

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

UI и UX связаны: дизайнеры строят UI-дизайн поверх UX-прототипа. Как правило, при проектировании UI и UX не следует размещать кнопку «Купить» в нижней части сайта между «Пользовательским соглашением» и «О доставке».

Тенденции UX-дизайна в 2020 году

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

Например, индикатор, показывающий, насколько пользователь прокрутил страницу вниз. Индикатор не отрывается от основного дизайна и помогает пользователю понять, где он находится.

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

Эти анимации должны быть выдержанными и простыми. Их нужно использовать осторожно, чтобы не отвлекать пользователя от чтения веб-сайта.

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

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

Упрощенная навигация - когда легко найти то, что вам нужно. Например, список категорий, информация о доставке и оплате, информация о бонусах и скидках и т. д.

Тенденции UI в 2020 году

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

Хорошие веб-дизайнеры делают сайты асимметричными и экспериментируют с размещением контента. Благодаря асимметричному дизайну они могут легко контролировать внимание пользователя.

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

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

Адаптивная верстка и CSS Grid - когда веб-сайт самостоятельно адаптируется под смартфоны и настольные компьютеры. Несколько лет назад веб-сайты состояли из нескольких версий для размеров экрана мобильных устройств, планшетов и компьютеров. Система сайта определил устройство пользователя и перенаправил его на нужную версию. Но если у пользователя сверхширокий монитор или смартфон Blackberry с квадратным экраном, у него могут возникнуть проблемы с слишком маленькими или слишком большими элементами сайта.

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

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

Будущее UX / UI дизайна

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

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

Но пока они не предпочтут минимализм и яркие цвета, мы можем предположить, что будущее дизайна UX / UI будет за дальнейшим упрощением и адаптивной версткой.

Разработка web сайтов

Источник: it-rating.in.ua