Оптимизация UX под все экраны

оптимизация UX
Рассылки
Автор: Юлия Федотова
«Шеф-редактор блога GetGoodRank, веб-аналитик, блоггер.
Сегодня границы между десктопом, мобильным и оффлайн опытом стираются. Пользователь хочет видеть одинаково удобные сайты с любых экранов. Рассказываем, что оптимизировать на сайте в первую очередь.»

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

Для потребителя важен базовый функционал: просмотр товара, доступное легко читаемое описание, простое добавление в корзину, выбор оплаты и доставки, обращение в службу поддержки.

В этой рассылке мы расскажем, как создать безболезненный переход для пользователя с одного экрана на другой.

В этом выпуске:

  • Что важно для пользователя
  • Как оптимизировать структуру сайта
  • Как оптимизировать контент
  • Как оптимизировать скорость отклика сайта

Что важно для пользователя

Помимо основного функционала (который для каждого бизнеса свой и основывается на специфике предоставления товара или услуги), пользователю важны следующие факторы:

  • простая логичная структура
  • доступность и простота взаимодействия с контентом
  • скорость загрузки сайта с любого устройства

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

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

использование мобильных статистика

  • На сегодняшний день в мире используется 2,19 миллиардов смартфонов.
  • Наиболее популярная диагональ смартов — от 5 до 6 дюймов. Тенденция четко прослеживается по флагманским устройствам 2016-2017 года выпуска. Оптимальная диагональ составляет 5,15 — 5,2 дюймов.

Смартфоны существенно расширили возможности пользователя. Теперь человек может выполнять задачи на ходу, в отрыве от офиса, дома и стационарного подключения.

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

Как оптимизировать навигацию, структуру и функционал сайта

Станьте «трогательными»

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

  • Оптимальная ширина элемента для удобного клика пальцем — 48px.
  • Оптимальное расстояние между элементами — 8px.

Это поможет избежать ошибочных кликов и раздражающих переходов не туда.

Размер шрифта имеет значение

На любом экране важно избежать необходимости увеличивать, приближать, масштабировать.

  • Рекомендованный размер шрифта — 12px.

Как показывает практика:

  • Шрифт менее 16px также не всегда удобен для комфортного взаимодействия с мобильного.

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

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

Установите правильную ширину

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

Функции по наведению мышки

У мобильного пользователя нет мышки, единственное доступное действие — клик пальцем или стилусом. Для демонстрации вложенных меню (выпадающие списки) используйте клики. Обозначайте кнопки, по которым доступны выпадающие списки, к примеру, стрелкой вниз.

Не используйте всплывающие окна

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

Вместо всплывающих окон используйте баннеры и CTA-кнопки, правильно, логично и целесообразно встроенные в контент на странице.

Используйте описательные названия для кнопок

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

«Каталог — смартфоны — Huawei — Huawei P10 Lite»

или

«Корзина — оформление заказа — шаг 2: выбор способа оплаты».

Как оптимизировать контент

Объем имеет значение

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

Оптимизируйте, а не сокращайте

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

организация контента на сайте

Не прячьте ключевые функции

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

Если все доступные опции невозможно вместить в один экран, то предложите пользователю ссылку на десктопную версию сайта, где он сможет увидеть весь доступный функционал или контент.

Форматы медиа-файлов

Смартфоны и мобильные браузеры воспроизводят далеко не все форматы медийного контента. Проверьте все медиа-файлы на страницах, чтобы они правильно воспроизводились. В крайнем случае указывайте ссылку на YouTube, где видео 100% воспроизведется правильно с мобильного.

Упрощайте процесс покупки

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

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

Как оптимизировать скорость отклика сайта

Скорость и комфорт на ходу — основные преимущества использования мобильных устройств. Ускоряйте сайты. Сегодня вебмастерам доступны бесплатные и эффективные инструменты проверки скорости работы сайта с рекомендациями.

Многочисленные исследования доказывают, что медленная загрузка становится одним из ключевых факторов отказа от дальнейшего сотрудничества с сайтом:

1. Исследование: как время загрузки влияет на уровень отказов

2. Как время загрузки сайта влияет на настроение пользователей

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

 Факторы ранжирования коммерческих сайтов в Google: исследование

Слишком много HTTP-запросов

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

Оптимизация изображений

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

JavaScript и CSS

Длинный JavaScript и/или CSS код замедляет страницу.

Выводы:

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

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

Рекомендуем: Мобильная оптимизация — рекомендации экспертов.

Не забывайте, что проверить десктопную версию сайта по основным факторам ранжирования и удобства использования можно в GetGoodRank!

Добавить комментарий

Войти с помощью: 

Статьи по теме

реклама на сайте
Рассылки
Как реклама на сайте влияет на UX
Друзья! Реклама часто выбирается в качестве простейшего способа монетизации сайтов. По...
ошибки юзабилити GetGoodRank
Рассылки
Статистика GetGoodRank: топовые ошибки юзабилити
Друзья! Традиционно, раз в год GetGoodRank подводит итоги и определяет ТОП ошибок юзаб...