Оптимизация UX под все экраны
Сегодня границы между десктопом, мобильным и оффлайн опытом стираются. Пользователь хочет видеть одинаково удобные сайты с любых экранов. Рассказываем, что оптимизировать на сайте в первую очередь.»
Для пользователя становится все более естественным искать товар с планшета, читать отзывы и сравнивать с мобильного, делать заказ с десктопа. Важно, чтобы ваш сайт одинаково круто работал на всех экранах. Пользователю абсолютно не важно, какие технологии применяются, какие фишки доступны.
Для потребителя важен базовый функционал: просмотр товара, доступное легко читаемое описание, простое добавление в корзину, выбор оплаты и доставки, обращение в службу поддержки.
В этой рассылке мы расскажем, как создать безболезненный переход для пользователя с одного экрана на другой.
В этом выпуске:
- Что важно для пользователя
- Как оптимизировать структуру сайта
- Как оптимизировать контент
- Как оптимизировать скорость отклика сайта
Что важно для пользователя
Помимо основного функционала (который для каждого бизнеса свой и основывается на специфике предоставления товара или услуги), пользователю важны следующие факторы:
- простая логичная структура
- доступность и простота взаимодействия с контентом
- скорость загрузки сайта с любого устройства
Переход от одного экрана к другому естественный для современного пользователя. Человек использует в конкретный момент времени то устройство, которое наиболее удобно здесь и сейчас.
С какого бы экрана пользователь не совершал доступ к сайту, важно, чтобы тот работал, всего-то. Никому не хочется ждать вечность, пока прогрузятся страницы каталога, никто не хочет бороться с горизонтальной прокруткой, чтобы понять, вся ли информация просмотрена, или масштабировать экран, чтобы прочитать о товаре или доставке.
В особенности эти проблемы актуальны на экранах менее 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!
Статьи по теме
