Борис Флишкин предлагает Вам запомнить сайт «SUNMAG»
Хороший дизайн всегда заставляет задуматься. Вот вы весь день кликаете на ссылки и скроллите, но потом вдруг почему-то останавливаетесь — на оригинальном взаимодействии с пользователем, интересном фото или просто на детали, которую раньше не видели. Что бы это ни было, глаз зацепился.
Почему так случилось? Здесь наверняка замешаны актуальные тенденции UX, визуальный опыт пользователя, его путь на вашем сайте. Как раз в этом и заключается разница между хорошим и классным сайтом.
Как и все тренды, тенденции в UX меняются. Если вы представляете бизнес, ваш сайт должен привлечь внимание, вовлечь и продать. Это и есть задача UX: захватить внимание пользователя, удержать его на странице и повысить конверсию.
В блогах и портфолио UX работает на чтение и шеринг материалов в других источниках. 75% пользователей оценивают, доверять сайту или нет, по внешнему виду. Поэтому важно, чтобы каждый разработчик фокусировался на потребностях юзера.
В этом материале мы выделили последние тенденции в веб-дизайне и для каждой подобрали сайт, который ярко её демонстрирует.
Минимализм: Seriously Unsweetened
Чем меньше, тем лучше. Звучит как клише, но это один из топовых трендов ушедшего года, сохраняющий актуальность и сейчас. Бренд газировки Seriously Unsweetened создал минималистичный и подталкивающий к размышлению сайт.
Он сделан в конструкторе Squarespace. На основном изображении прозрачные бутылки с напитком размещены на ярком фоне: по одной на каждый вкус. А на узнаваемость бренда работает икс в логотипе.
Мы призываем дать свободу своему внутреннему минималисту. Вы облегчаете жизнь аудитории, не используя сложный UX — то, что дизайнеры называют «умственным усилием» (cognitive effort). Страница загружается быстрее, статистика отказов снижается и сайт фокусируется на целях вашего бренда.
Используйте пустое пространство с простыми, но контрастными цветовыми схемами, сосредоточьтесь на мелких деталях вроде логотипа и ставьте заголовки, которые чётко описывают содержание страницы.
Фокус на пользователе: Lemonade
Этот сайт — настоящий game-changer. Он меняет правила игры. Используя интеграцию с CUI (Conversation User Interface), он всего за пять минут способен предоставить пользователю подробные страховые котировки.
Lemonade — отличный пример привлекательного одностраничного сайта. На нём легко ориентироваться благодаря удобным кнопкам с действиями — например, «Узнать цены и подключить».
Интересное представление чат-бота — Майя — помогает быстрее подобрать подходящую страховку. Искусственный интеллект активно мимикрирует под живого человека: у Майи даже есть лицо. Этот чат-бот узнаёт нужную информацию маленькими кусочками. А также предсказывает возможные ответы пользователя и запоминает самые частые опечатки.
Такой веб-дизайн вызывает доверие. Кроме того, переходя между страницами, пользователь всегда знает, куда попадёт, — действия обозначены чётко.
Пример Майи показывает, как можно «очеловечить» своего бота
Нам целиком и полностью нравится этот UX — от заголовка «Забудьте всё, что вы знали о страховании» до розовых кнопок. И хотя чат-боты — идея совсем не новая, мы считаем, что за ними будущее.
Интересная анимация прокрутки: Crypton Trading
Сайт центра криптовалют, который использует искусственный интеллект для прогнозирования трендов и предпочтительных периодов покупки. Даже если вы не имеете отношения к крипте, вы будете прокручивать сайт и не сможете остановиться. И всё из-за потрясающей анимации, которая активируется во время скроллинга.
Каждый шаг прокрутки открывает новую букву, предложения формируются в неторопливом темпе — и пользователь вовлекается в криптопутешествие. Такой диалоговый UI помогает легко усваивать сложные технические детали.
Интерактивное приветствие
Вообще, если вы владеете JavaScript, то можете сами легко анимировать свой сайт. А если нет, у большинства веб-разработчиков есть инструменты для анимации, которые можно брать и использовать.
Но нужно оговориться: недавнее исследование NNG на рынке UX показало, что большинство пользователей замечают медленную загрузку страниц из-за нагромождения анимации прокрутки. Поэтому главное — не перестараться. Будьте осторожны, или вы рискуете пользователями.
Яркие фото товаров: Apple
Список топовых сайтов не обходится без Apple. Мы обсудили дизайн её сайта с Ганешем (Ganesh), старшим UX-разработчиком в MVF Global. Ему нравятся сверхреалистичные фото продуктов с разных углов, которые помогают продвигать товары благодаря особенному визуальному представлению.
Не каждый может конкурировать с Apple, это факт. Но принцип «качественные фотографии лучше продают» работает для всех. Поэтому вкладывайте время и деньги в фото и заботьтесь о том, что подумает покупатель.
Если хотите вдохновить сценариями использования своего продукта — так Apple продвигает линейку Pro — или просто показать его крупным планом, используйте вместо тысячи слов фото и получите отличную конверсию.
Видео в хедере: Leandro Pedretti
Если хотите построить личный бренд в вебе, нет примера лучше, чем сайт дизайн-студии Leandro Pedretti, созданный в конструкторе Wix [на момент подготовки статьи сайт, к сожалению, недоступен — прим.ред.]. В хедере — видео с разработкой прототипа, где сразу же демонстрируются возможности компании в дизайне.
Один клик — и вы под впечатлением. Видео вызывает больший эмоциональный отклик, чем картинка. Поэтому рекомендуем использовать возможности быстрого интернета. Но видео должно быть коротким, визуально привлекательным и без звука. Нет ничего хуже, чем звуки на сайте.
Mobile First: Harry’s
Сайт производителя бритв Harry’s продвигает мобильный дизайн. Мудрый шаг, учитывая, что недавний опрос показал: 83% покупателей по всему миру в будущем планируют делать покупки со смартфона.
Если вы разрабатываете интернет-магазин, убедитесь, что вы используете современные адаптивные технологии. Чётко представьте основные действия пользователей на сайте, упростите рекламные баннеры и укоротите меню.
В интернет-магазине также должны быть качественные фотографии товаров — это повышает доверие к бренду и демонстрирует актуальный ассортимент. Это именно то, что нам нравится в Harry’s, который разработан на конструкторе Shopify.
Последнее, но не по важности
Помните об основе основ — о заголовке. Чем крупнее, тем лучше. Жирные начертания шрифтов в сочетании с флэт-анимацией становятся всё популярнее. Пользователи проводят меньше времени на сайтах, и примерно 46% из них уйдут, если не увидят на странице чёткий месседж. Здесь поможет огромный красочный заголовок. Исследования показывают, что цвет увеличивает узнаваемость сайта на 80%, поэтому рекомендуем массивный заголовок, шрифт Sans Serif (без засечек) и яркий, однотонный фон.
Чтобы по-настоящему заинтересовать аудиторию, вы должны «повести её на прогулку», рассказать историю с запоминающимся содержанием. Анимация прокрутки хорошо подходит для этого — формирует повествование и не усложняет макет.
Узнайте свою аудиторию. Создайте сайт, который работает именно для неё, и подумайте об эстетике: оценят ли, например, любители технологий анимацию, или ваш смелый продукт не нуждается в этом? Какими бы ни были ваши страницы, никогда не забывайте о том, кто будет читать, нажимать и скроллить. Будьте в курсе тенденций дизайна, и тогда у вас получится сайт, который действительно привлечёт пользователей.
Эта статья — адаптированный перевод материала Website Building Expert. Недавно мы также писали об актуальных цветовых трендах по версии Shutterstock.
Хотите освоить лучшие практики веб-дизайна и все актуальные тренды? Тогда ждём вас на факультете веб-дизайна GeekUniversity! :)
Комментарии