Как улучшить мобильную версию сайта: 10 полезных функций

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

Время работы ближайшего представительства

Американская сеть магазинов товаров для дома Lowe’s реализовала в мобильной версии своего
сайта функцию, позволяющую пользователю узнавать о времени работы ближайшего к нему магазина (местоположение покупателя определяется с помощью возможностей геолокации его смартфона).

Ключевые элементы интерфейса в верхней части страницы

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

Подсказки для неочевидных элементов интерфейса

Мобильная версия
сервиса для бронирования авиабилетов ClearTrip имеет элементы, обозначающие длину перелета и число пересадок. Выполнены они в виде черточек, назначение которых пользователь может не понять с первого раза. Для того, чтобы объяснить ему, как пользоваться сайтом, посетителю показываются соответствующие подсказки:

Выделение популярных опций

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

Опции для совершения нужных компании действий представлены не только в меню, но и в верхней части на страницах сайта:

Ненавязчивое предложение о загрузке приложения

Британский
ритейлер Argos предлагает посетителям своего мобильного сайта скачать специальное приложение. Оповещение сделано аккуратно, не отвлекает и не мешает пользователю перемещаться по сайту:

Резервирование товара в один клик

На том же мобильном сайте Argos пользователям предлагается активировать возможность резервирования товара в один клик (по-умолчанию эта возможность отключена):

Цветовая дифференциация элементов форм

Онлайн-магазин по продаже солнечных очков
Warby Parker помогает своим мобильным пользователям сделать выбор, выделяя элементы форм разным цветом:

Крупный шрифт в меню

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

Социальные кнопки большого размера

Сайт другого онлайн-медиа — Huffington Post — для привлечения трафика использует социальные кнопки большого размера:

Кнопка для возврата наверх страницы

Британская сеть супермаркетов Sainsbury’s на своем мобильном сайте реализовала кнопку для возврата в верхнюю часть страницы — пользователям мобильных устройств прокручивать страницу самостоятельно часто неудобно, а данная функция экономит силы и время.