По итогам 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 будет за дальнейшим упрощением и адаптивной версткой.
Источник: it-rating.in.ua
