Поделитесь
Содержание

    Все для людей. Да, этот принцип работает и в интернете! Кто будет смотреть ваш сайт? Кто закажет и купит продукт? Кто скачает приложение? Разумеется, человек. Отсюда и важно проработать проект под требования реального пользователя, а не только поисковой системы. Так, чтобы с каждым касанием человек получал определенные впечатления и эмоции. В идеале — положительные.

    Тема сегодняшней статьи — пользовательский опыт. Узнаем о том, что представляет собой нашумевший UX, какое отношение он имеет к юзабилити и как улучшать User Experience.

    Пользовательский опыт

    Что такое пользовательский опыт (UX)?

    User Experience — это совокупность эмоций, действий и результатов, которые человек получает при контакте с сайтом, товаром или приложением. То есть опыт взаимодействия. Если брать сайт, основой его популярности и успеха становится дизайн пользовательского опыта. То есть интуитивный, согласованный в плане кнопок и прочих привычных для людей элементов. Лишь с учетом этих факторов веб-дизайнер сумеет создать интересный и привлекательный для посетителей дизайн интернет-магазина и любого другого проекта.

    В чем разница между UX и Usability?

    Оба понятия используют для определения удобства пользователя. Это не совсем верная трактовка. Юзабилити — это часть пользовательского опыта сайта, которая отвечает за качество проекта. UX же основывается на принципах эстетики. Если ресурс удобный для посетителей, найти нужное на нем человеку будет легко. Вместе с тем такой «удобный» сайт может быть скучным. Получается, Usability хорошее, но улучшить пользовательский опыт все равно необходимо.

    Что влияет на эффективность пользовательского опыта?

    Рассмотрим главные параметры дружелюбного UX.

    Пользовательские маршруты

    Карта путешествия пользователя представляет собой визуальное представление «пути» человека по странице, взаимодействия с продуктом или брендом. Дизайнеру нужно понимать перспективу действия пользователя в разных средах. Важный момент в работе с пользовательскими маршрутами — делать выводы с точки зрения клиента, учитывая при этом бизнес-задачи. Таким образом, в карту вносится несколько основных моментов:

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

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

    Примерно таким образом выглядит эта карта:

    Пользовательские маршруты

    Визуальная иерархия

    Она есть во всех аспектах дизайна. Даже посмотрите на обычный текст, где присутствует крупный заголовок Н1, помельче Н2 и еще более мелкие Н3. Такое структурирование позволяет увидеть главное и понять суть контента без его детального прочтения. Так же и в дизайне. Визуальная иерархия помогает привлекать внимание посетителя к важным элементам страницы, что упрощает контакт с сайтом.

    Какими факторами занимаются дизайнеры при работе с иерархией:

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

    А как определить эффективность того или иного решения? С помощью А/В тестирования. На практике веб-дизайнеров не раз случалось так, что конверсии взлетали буквально после изменения цвета одной единственной кнопки призыва. Когда удобство для пользователя соблюдено, показатели растут.

    F-Pattern

    Частично этот пункт вытекает из предыдущего. Если человеку не давать зрительных сигналов в дизайне, для поиска нужной информации ему придется напрягаться. Пользовательский опыт от этого страдает.

    Применяйте заголовки, разделы, жирные шрифты, чтобы сориентировать человека в нужном направлении. По результатам исследований Nielsen Noman Group, пользователи сканируют страницу таким образом, как на скриншоте:

    F-Pattern

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

    Отзывчивый и адаптивный дизайн сайта

    Проблема отзывчивого дизайна — перемещение разных элементов страницы. Это меняет первоначальную задумку. Как сохранить эффективность страницы для мобильных пользователей?

    Все просто:

    • на сайтах со множеством разделов меню размещайте гамбургер-меню (или подобное);
    • оптимизируйте картинки под все устройства;
    • оптимизируйте текстовое наполнение;
    • улучшите скорость загрузки страниц на всех устройствах (например, внедрите Google AMP);
    • адаптируйте ресурс под мобильные устройства.

    Если хотите улучшать пользовательский опыт, это все необходимо делать.

    Призыв к действию

    Вызывайте у людей желание кликнуть по кнопке CTA. При работе с призывами можете ориентироваться на такие рекомендации:

    1. Размер кнопки призыва должен быть таким, чтобы быть замеченным на фоне остальных элементов дизайна. Если вы разместили конверсионную кнопку внизу формы, делайте ее аналогичной ширины.
    2. Поиграйте с размером заголовков и основного текста. Контент важен в формировании положительного пользовательского опыта, поэтому тщательно оптимизируйте его.
    3. Помните, что 70% внимания привлекает цвет. Сделайте кнопку призыва контрастной и яркой.
    4. Не забывайте о форме кнопки. Делайте ее контрастной в отношении остальных частей дизайна.

    Призыв к действию

    А/В тестирование поможет найти лучшие решения: цвет, размер и форму кнопки, варианты шрифтов текста, удачное сочетание разных элементов. Обязательно исследуйте эффективность внедренных изменений, ведь почти всегда можно сделать еще лучше.

    Пользовательский интерфейс

    Что такое UX, мы разобрались. А как насчет еще одной аббревиатуры UI, которую часто используют наряду с User Experience?

    Расшифровывается она как User Interface — пользовательский интерфейс. Попробуем на примере разобраться, что это такое.

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

    Например, вы стремитесь похудеть. Скачали приложение для самоконтроля с удобным интерфейсом. Проходит 1—2 месяца упорных усилий, цель достигнута. Внезапно появляется новое аналогичное приложение. Ваша цель «похудеть» все еще с вами, и здесь разработчики новинки предлагают вживить чип, благодаря которому вам теперь не нужно озадачиваться самоконтролем, но результата добиться получится. Причем за более короткое время! Тема с чипом утрирована, просто нужна суть. Если вы будете уверены в безопасности чипа, то скорее предпочтете этот вариант. Легче, проще и быстрее. Даже несмотря на преимущества первого приложения. Чем короче этот путь пользователя до цели, тем ему лучше.

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

    Улучшение пользовательского опыта (UX) — почему это так важно для SEO?

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

    Снова слово «удобный»? Вот и прямая связь UX с SEO. Если ресурс не будет отвечать критериям удобства, усилия по продвижению оправдать не получится. Так что оптимизаторам необходимо заниматься скоростью загрузки страниц, мобильной адаптацией, структурой контента, перелинковкой, чтобы добиться привлекательности сайта для пользователей, и подгонять его под критерии UX. В противном случае ресурс так и будет пылиться в закромах поисковой системы.

    Примеры сайтов с хорошим UX

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

    eBay

    eBay

    Всемирно известная платформа, которая наглядно демонстрирует, что такое UX. На стартовой странице сразу видим категории продукции. Человек кликает по нужной и с легкостью находит товар.

    Walmart

    Walmart

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

    Zappos

    Zappos

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

    Best Buy

    Best Buy

    Сайт по продаже быттехники на территории США, Канады и Мексики. Есть очень удобные фильтры для быстрого выбора товаров.

    Выводы

    Пользовательский опыт — это то, что посетитель чувствует при контакте с системой: сайтом, приложением, ПО и т. д. Важно дать ему положительные эмоции, какие потом будут ассоциироваться с проектом. Успешный UX помогает привлекать и удерживать клиентов, уверенно стоять на ногах в обилии сильных конкурентов и достигать главных бизнес-целей. Начните прорабатывать пользовательский опыт уже сейчас.

    У Вас остались вопросы?
    Наши эксперты готовы ответить на них.
    Оставьте ваши контактные данные.
    Будем рады обсудить ваш проект!
    Получить консультацию
    Наш менеджер свяжется с Вами в ближайшее время