Один из наших читателей, Александр Морозовас, перевел статью Дженни Гоув “What Makes a Good Mobile Site?”. Предлагаем его перевод вашему вниманию.

Те, кто заходят на сайт с мобильных устройств, хотят быстро найти то, что им нужно. Google и AnswerLab провели исследование, чтобы понять, что делает мобильную версию сайта удобнее и привлекательнее для пользователей.

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

Домашняя страница и навигация по сайту

Домашняя страница должна давать пользователям именно тот контент, который они ищут.

Пользователи должны видеть call-to-action в центре страницы

Сделайте самые важные задачи легко доступными — поместите их на первый экран. Второстепенные задачи уберите в меню или сделайте доступными в прокрутке. Но не стоит тратить драгоценное место на первом экране на абстрактные призывы к активности — например, «Узнать больше».

Сделайте меню коротким и удобным

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

Сделайте простым возврат к домашней странице

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

Не позволяйте рекламным баннерам скрывать контент

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

Сделайте поиск по сайту заметным

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

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

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

В примере слева поиск реализован грамотно: показываются только детские вещи (пользователь делает поисковый запрос в интернет-магазине детской одежды). Справа — пример неудачно реализованного поиска: он показывает все, где есть слово «дети».

Разработайте фильтры для простых запросов

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

Покажите пользователям, как правильно делать поисковые запросы

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

Коммерция и конверсия

Поймите, куда хочет попасть и что там найти ваш клиент, и помогите ему в этом.

Позвольте пользователям просматривать сайт до регистрации

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

Создайте для пользователей возможность использовать гостевые аккаунты

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

Используйте существующую информацию о пользователе для его удобства

Настройте автозаполнение полей для зарегистрированных пользователей.

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

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

Сделайте простым переключение между устройствами

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

Форма ввода

Обеспечьте удобные переходы между формами.

Сделайте ввод информации удобным

Пусть пользователь автоматически переходит к заполнению следующего поля после нажатия Return. Чем меньше нажатий пользователь делает, тем лучше.

Упрощайте ввод информации

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

Предложите визуальный календарь для выбора даты

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

Минимизируйте ошибки в формах

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

Повышайте КПД дизайна

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

Юзабилити и форм-фактор

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

Оптимизируйте ваш сайт

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

Не заставляйте пользователей работать с неудобными им масштабированием и прокруткой

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

Добавьте возможность увеличить фотографию продукта

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

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

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

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

Пусть у пользователя будет одно окно в браузере

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

Избегайте надписи «Полная версия сайта»

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

Объясните пользователю, почему вам важно знать его местонахождение

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