Статьи

Насколько Мобильный Дружественный Ваш Дизайн? 12 советов для подражания

Хотя смартфоны и планшеты существуют уже менее 10 лет, доступ к мобильному Интернету уже догнал доступ к рабочему столу. Поисковые запросы Google выполняются на мобильных устройствах, чем на компьютерах в 10 странах, включая США и Японию.

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

Поисковая оптимизация — это не только область интернет-маркетинга. Дизайн сайта и его реализация оказывает влияние на результаты поиска.

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

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

1. Хорошо ли он отображается на разных устройствах?

Мобильные устройства бывают разных размеров и форм. Интеллектуальные устройства охватывают диапазон от смартфонов с 3-дюймовыми экранами до планшетов с 7-дюймовыми экранами и выше. Сначала проверьте, правильно ли отображается ваш веб-сайт на всех устройствах. Вот несколько инструментов, которые вы можете использовать для этого:

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

Сайт отображается на разных устройствах

2. Насколько легко мобильные пользователи могут выполнять общие задачи?

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

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

3. Является ли ваш призыв к действию центральным и заметным?

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

Нажмите, чтобы позвонить

4. Есть ли у вас глубокие многоуровневые меню?

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

5. Насколько легко вернуться на домашнюю страницу?

Когда пользователь прошел уровни глубоко в вашей иерархии страниц, публикациях в блоге или продуктах, как легко пользователям вернуться на домашнюю страницу? В этом исследовании Google участники ожидали, что вернутся на домашнюю страницу, когда нажмут на логотип сайта, и расстроятся, если он не сработает. Конечно, они также могут нажать, чтобы открыть меню, а затем нажать «Домой», но почему бы не сделать это проще для пользователей? Зачем использовать два крана вместо одного? Простое связывание вашего логотипа с домашней страницей может избавить вас от разочарований, лишних нажатий, а также освободить одно место в вашем меню.

6. Легко ли искать на вашем сайте?

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

7. Подходят ли ваши формы для виртуальных клавиатур?

Мало кто любит заполнять формы на маленьких виртуальных клавиатурах. Сделайте формы для мобильных устройств максимально простыми. Помогите пользователю, заполнив поля по умолчанию и сделав автозаполнение доступным. Для каждого типа поля используйте самый простой и подходящий метод ввода. Например, с датами используйте всплывающий календарь, где пользователь может нажать на дату, вместо того, чтобы печатать ее в формате ДД / ММ / ГГГГ.

8. Нет масштабирования. Кроме изображений продуктов.

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

Обратное верно для изображений продуктов. Пользователи хотят иметь возможность увеличивать и видеть продукт на более детальном уровне. Вам нужно будет сбалансировать качество изображения с размером изображения.

9. Можно ли сканировать весь ваш сайт?

Google распознает три разные конфигурации для мобильных устройств:

  • Адаптивный дизайн, где макет адаптируется к размеру экрана.
  • Динамическое обслуживание, когда веб-серверы отправляют различный HTML в зависимости от UserAgentString
  • Отдельные URL-адреса, которые предоставляют разные коды для каждого устройства, на разных URL-адресах.

Независимо от того, какой метод вы используете, если робот Google не сможет правильно сканировать ваш сайт, это повлияет на результаты поиска. Убедитесь, что робот Google может видеть ваш сайт как обычный пользователь. Держите ваши CSS, JavaScript и изображения просматриваемыми. Вы можете проверить ваш robots.txt с помощью этого инструмента .

10. Весь ли контент воспроизводится на мобильных устройствах?

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

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

Страница не найдена

12. Как вы справляетесь со сложными задачами и конфиденциальной информацией?

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

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

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