Советы от Google: Как сделать идеальный мобильный сайт

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

Несмотря на активное проникновение и популярность мобильного интернета — только за последний год в России число его пользователей выросло в полтора раза, до 25,5 млн человек, — далеко не все сайты удобно смотреть с мобильника или планшета.

Специалисты из Google и компании AnswerLab провели собственное исследование и выяснили, что конкретно не устраивает пользователей смартфонов в мобильных версиях сайтов. В результате компании составили список рекомендаций для всех веб-разработчиков, занятых созданием мобильных веб-сервисов. Вот десять наиболее значимых из них.

Добавить панель для поиска

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

Советы от Google: Как сделать идеальный мобильный сайт

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

Выводить контент на экран частями

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

Советы от Google: Как сделать идеальный мобильный сайт

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

Избавить пользователей от необходимости авторизации

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

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

Сделать ссылку на главную страницу сайта вверху экрана

Владельцам мобильных сайтов стоит учитывать, что пользователь всегда должен иметь возможность в один клик вернуться на главную страницу. Зачастую для этого используется логотип сайта вверху страницы. Но пользователи, чьи жалобы изучали в Google, говорят, что далеко не все веб-разработчики размещают там эту ссылку. А стоило бы всем.

Убрать все акции с главной страницы

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

Советы от Google: Как сделать идеальный мобильный сайт

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

Разместить на главной странице номер телефона

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

Советы от Google: Как сделать идеальный мобильный сайт

Это предложение Google очевидно, но соблюдают его далеко не все.

Оптимизировать все страницы сайта

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

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

Избегать необходимости масштабирования

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

Советы от Google: Как сделать идеальный мобильный сайт

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

Отображать весь контент в одном окне

Довольно часто ссылки, на которые кликает пользователь, открываются в новом окне. Это тоже ошибка.

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

Убрать ссылки на "полную версию"

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

Советы от Google: Как сделать идеальный мобильный сайт

Перевод: mmr.ua

Как вы уже наверное заметили из презентации в самом начале статьи, рекомендаций гораздо больше. Мы постараемся в ближайшее время перевести их все и оформить в виде инфографики. Если есть желающие поучаствовать в переводе и подготовке инфографики пишите на igor@shopolog.ru.

Автор: Игорь Назаров

Подписаться на новости

Читайте также

25 октября / Комментарии

11 принципов веб-дизайна, которые повышают конверсию

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

далее →

26 сентября / Комментарии

Разбор юзабилити интернет-магазина Ulmart.ru и его преобразования за 2016 год

Изначально статья планировалась как одно целое, где я хотел рассмотреть возможные ошибки в юзабилити топа российских интернет-магазинов. Но после нескольких дней обзора, понял, что каждый сайт заслуживает отдельного разбора. Кроме того, мне захотелось не только осветить проблему, но и предложить своё видение ее решения. В связи с этим вся статья строится по схеме: Гипотеза о проблеме > Причина и Обоснование > Решение.
Поскольку статья начата еще в ноябре 2015 года, а закончена только сейчас, Ulmart успел исправить часть проблем,  обозначенных в статье. Об этом я дополнительно говорю в примечаниях . И сейчас мы можем отследить те преобразования, которые были сделаны.

далее →

6 сентября / Комментарии

Комфорт покупателей как залог успешного бизнеса. Основные ошибки в юзабилити интернет-магазинов

Четыре года назад была опубликована статья «22 ошибки в юзабилити интернет-магазинов, а также работающие варианты по их исправлению». Мы решили, что настала пора освежить данную информацию и задали разработчикам сайтов и CMS следующие вопросы: «Какие указанные в данном материале ошибки по-прежнему актуальны?», «С какими юзабилити-ошибками интернет-магазинов вам приходится встречаться чаще всего?», «Какие юзабилити-советы вы можете дать заказчикам?». И вот что мы узнали.

далее →

11 августа / Комментарии

Чек-лист юзабилити интернет-магазина

По-настоящему проверить удобство интернет-магазина без подтверждения данными веб-аналитики, не получится. Контекст взаимодействия; задачи, опыт и мотивы пользователей; устройства, с которых пользователи просматривают магазин — всё это влияет на конверсию и не может быть оценено чек-листом.
При составлении чек-листа, я ориентировался на исследования института Baymard, Юзабилити Лаб, Mastercart и студии Сибирикс + некоторые собственные наблюдения.

далее →

Навигация как способ управления вниманием пользователя

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

далее →

X
Нажмите «Нравится»,
чтобы читать Shopolog.ru в Facebook