dentsu aegis network

RUSSIA

UX is king: как упростить пользователю путь и почему выигрывает тот, кто быстрее

28 май 2020

Дарья Лагутина, исследователь пользовательских интерфейсов digital-performance агентства iProspect Russia, рассказала, как доступность влияет на SEO, что нужно учитывать при адаптации страниц, а также поделилась советами, как повысить скорость загрузки сайта.

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

Согласно исследованиям World Health Organization, на начало 2018 года в эту категорию попадает более одного миллиарда человек (15% населения Земли). Если вы не уделяете внимание доступности при разработке продуктов, вы теряете существенную часть пользователей. Добавьте к этой доле пожилых людей, и она увеличится в 2, а то и 3 раза.

Конечно, это не значит, что все эти люди не смогут пользоваться вашим продуктом, но им это будет в значительной мере сложнее сделать. Перечень гайдлайнов по доступности, официально утвержден Консорциумом Всемирной Паутины (World Wide Web Consortium).

С другой стороны, уделяя внимание доступности, вы напрямую влияете на SEO. Несмотря на то, что нет официальных данных о том, насколько велико это влияние, косвенно это подтверждается тем, что в инструменте для оценки качества веб-сайтов от компании Google - Lighthouse, отдельным пунктом идет раздел “Доступность”.

Интерфейс Google Lighthouse 

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

Тут важно брать в расчет различные заболевания, связанные с недостатком так называемого «цветного зрения». Так, согласно статистике, дефект зрения, связанный с восприятием красно-зеленной гаммы встречается у 1 из 12 мужчин и у 1 из 200 женщин, таким образом этот сегмент достигает 8-9%.

Типовые нарушения зрения 

Классический подход к визуализации данных – светофор. Для повышения контрастности отдельных элементов и привлечения внимания используются красный и зеленый цвета. Рассмотрим график акций компании TESLA на портале https://finance.yahoo.com/ в двух вариантах: без фильтров и с примененным фильтром протанопии.

 

График цены акций при нормальном зрении  

График цены акций при протанопии

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

Speed Index (показатель скорости)

Можно выделить две составляющие скорости, на которые обращает внимание пользователь при работе с сайтом:

1.      Скорость загрузки

То есть время до первого значимого отображения содержимого на экране (time to first meaningful paint). Существуют различные метрики для расчета скорости загрузки веб-сайта, которые используется в совокупности с различными весовыми коэффициентами: время до первого значимого отображения содержимого, время до первого взаимодействия, время до простоя ресурсов CPU и другие. Применительно к UX наиболее релевантным будет время до первого отображения содержимого на экране с точки зрения пользователя.

Скорость загрузки прямо пропорциональна объему скачиваемых данных. Статистика webpagetest.org говорит о том, что по результатам тестировании 11 миллионов сайтов в 2018 году средняя скорость загрузки мобильной страницы по 4G соединению составила 15,3 секунды. Для 70% сайтов время до первого значимого отображения содержимого составило более 5 секунд, а страница до сгиба - более 7 секунд.

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

Некоторые из способов, которые позволяют повысить скорость загрузки веб-сайта:

  • Исключите ненужные файлы из загрузки. Это может показаться банальным, но происходит очень часто по причине того, что разработка - процесс итеративный. При изменении некоторых составных частей можно забыть убрать лишние и неактуальные блоки. Это могут быть неиспользуемые файлы, стили CSS, закомментированные блоки кода и т.д.
  • Используйте подход lazy-load для загрузки медиа-содержимого. Этот метод позволяет отложить загрузку некритичных элементов, например, которые находятся за пределами экрана (viewport).
  • Оптимизируйте изображения. Есть перечень next-gen форматов, имеющих высокое качество сжатия при сохранении исходного качества изображения.
  • Используйте сжатие данных: gzip или более современный алгоритм brotli.
  • Шрифты - укажите перечень используемых на сайте шрифтов и их алфавит, чтобы снизить объем скачиваемых данных.
  • Используйте ограничения на размер собираемого бандла. Если ваши изменения превысили этот размер, оптимизируйте их до тех пор, пока не уложитесь в рамки.

2.      Отзывчивость или скорость работы функционала сайта

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

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

Все приведенные аспекты UX стоит принимать во внимание и рассматривать как перечень базовых принципов, необходимых при разработке продукта, но оценить их эффективность и значимость можно только на практике.

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