Мобильная версия сайта: принципы удобного интерфейса

Рубрика: Дизайн и юзабилити · Время чтения: ~5 мин.

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

Проектируйте с мобильной версии

Подход mobile first означает, что интерфейс сначала проектируется для маленького экрана, а затем расширяется для планшетов и компьютеров. Это заставляет с самого начала расставить приоритеты: на экране смартфона мало места, и в него помещается только самое важное. Такой подход часто делает и десктопную версию лучше — она становится чище и понятнее.

Контекст использования

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

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

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

Размеры элементов

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

Типографика

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

Формы

Формы — самое слабое место многих мобильных сайтов. Правила удобной формы:

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

Изображения и медиа

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

Таблицы и сложный контент

Широкие таблицы — частая проблема адаптивной вёрстки. Варианты решения: горизонтальная прокрутка внутри блока с явной подсказкой, превращение строк таблицы в карточки, скрытие второстепенных столбцов. Слайдеры и карусели на мобильных лучше заменять на вертикальные списки или прокрутку пальцем с видимой частью следующего элемента.

Скорость

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

Всплывающие окна

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

Типичные ошибки

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

Тестирование

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

Пример: как мобильная версия изменила конверсию

Фитнес-клуб обратился к нам с жалобой: трафик на сайт хороший, а записей на пробное занятие почти нет. Анализ показал, что больше трёх четвертей посетителей заходят со смартфонов, а на мобильных сайт был по сути уменьшенной копией десктопа. Расписание занятий представляло собой широкую таблицу, которую приходилось прокручивать во все стороны, кнопка записи была спрятана в подвале, а форма состояла из девяти полей с мелким шрифтом.

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

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

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

Итог

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

Нужна помощь с вашим проектом?

Специалисты «Студии-125» проконсультируют бесплатно и предложат решение под ваш бюджет.

Получить консультацию