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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Перевод: mmr.ua

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

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

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

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

Какие изображения повышают конверсию сайта: на основе тестов

Изображения повышают конверсию сайта. На эту тему написано много статей. В основном приводят примеры сайтов из США. Мы решили на своем опыте протестировать разные изображения. Чтобы понять, когда конверсия выше.

далее →

Как избежать 10 ошибок в работе с цветом на сайте

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

далее →

18 апреля / Комментарии

Правила оформления шапки интернет-магазина

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

далее →

17 апреля / Комментарии

Как психология цвета может увеличить конверсию вашего сайта

Пользователю хватает всего 90 секунд, чтоб сформировать в голове решающее мнение о продукте. Как достучаться до него за такой короткий промежуток времени? Понятно, что красочное описание чудодейственной функциональности продукта, удачный нейминг и прочие маркетинговые фишки эффективны, но как сыграть на эмоциях клиента? Цвет – вот что мотивирует (или демотивирует) пользователя – в 62-90% случаев цвет становится главным аргументом в пользу совершения покупки!

далее →

12 апреля / Комментарии

Что, как, зачем, куда: проверенные принципы компоновки элементов интернет-магазина

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

далее →

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