Глазами пользователей: с чего начать улучшение мобильного интерфейса

С помощью эмулятора устройств вы можете взглянуть на свой сайт глазами мобильных пользователей и протестировать его работу в реальных условиях.

Маркетологи, владельцы компаний и специалисты по оптимизации часто видят свои сайты только на экране ноутбуков или компьютеров. При этом значительная часть пользователей открывает их с мобильных телефонов или планшетов — в дороге, за обедом или во время просмотра телевизора. Около половины трафика сайтов поступает с мобильных устройств1. А в России на них совершается 33% транзакций2.

Поэтому может оказаться, что ваше тестирование сайта не соответствуют реальности. 

Используйте эмулятор устройств 

В браузере Chrome есть эмулятор устройств, который позволяет посмотреть, как ваш сайт будет выглядеть на разных экранах. Вы можете проверить его именно на тех смартфонах и планшетах, которыми пользуются ваши клиенты, — данные об этом можно найти в Google Аналитике в разделе «Аудитория > Мобильные устройства > Устройства».

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

Это важно: каждая секунда задержки при загрузке мобильного сайта может сократить число конверсий на 20%3.

UXGIF

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

Шаг 1

Откройте свой сайт в браузере Chrome. 

Шаг 2

Нажмите правой кнопкой мыши в любом месте экрана и выберите «Просмотреть код». 

Шаг 3

Нажмите на значок устройств. 

Шаг 4
На панели меню нажмите Responsive («Адаптивный») и выберите модель устройства. Также можно перетащить маркеры, чтобы установить собственные размеры экрана. 

Что можно делать в эмуляторе устройств 

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

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

TWG_First_steps_in_mobile_UX

Почему это важно

79% пользователей из США ответили, что с большей вероятностью вернутся на мобильный сайт или поделятся ссылкой на него, если с ним легко работать4. Более 90% B2B-клиентов, которые высоко оценили мобильный интерфейс, готовы повторно совершить покупку у того же продавца. В то же время из тех, кто оценивает мобильный интерфейс отрицательно, это готовы сделать всего 50%5.

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

Барьеры и возможности: что мешает делать качественные мобильные сайты в России