7 передовых методов навигации для мобильных устройств

1. 7 рекомендаций по мобильной навигации для UX и SEO
2. 2. Сначала перечислите наиболее важные страницы
3. 3. Думайте о поиске как о части вашей навигации
4. 4. Сделайте вашу навигацию интуитивно понятной
5. 5. Заботьтесь о шрифтах и ​​контрасте
6. 6. Дизайн для Touch
7. 7. Дизайн для пользователя Multi-Screen Mobile
8. Мобильный дружественный является дружественным к клиенту

Сейчас 2018 год, и мы официально живем в мире мобильных телефонов. Фактически, Google начал переход на индекс «сначала для мобильных устройств» - это означает, что Google будет ранжировать ваш сайт на основе вашего мобильного контента, релевантности и UX.

Ваша мобильная навигация (меню и внутренние ссылки) вносит свой вклад во все три и должна работать для пользователей и для SEO.

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

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

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

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

1. Держите мобильную навигацию короткой и приятной.
2. Сначала перечислите самые важные страницы.
3. Думайте о поиске как о части вашей навигации.
4. Сделайте вашу навигацию интуитивно понятной.
5. Будьте внимательны в отношении шрифтов и контраста.
6. Дизайн на ощупь.
7. Дизайн для многоэкранного мобильного пользователя.

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

7 рекомендаций по мобильной навигации для UX и SEO

1. Держите мобильную навигацию короткой и приятной

Многие экраны мобильных телефонов имеют ширину всего 720 пикселей в портретном режиме.

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

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

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

Чтобы сделать его кратким и приятным, вы можете даже рассмотреть возможность добавления логотипа в верхней части страницы, который будет перемещаться на домашнюю страницу, и не использовать кнопку «Домой» вне навигации (как на веб-сайте BCI ниже).

Сравнение настольной и мобильной навигации BCI

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

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

Если типичные потребности вашего мобильного пользователя очень ограничены, рассмотрите возможность использования статической навигации, которая проходит через верх вашего дизайна, как мы видим на мобильном сайте GameStop:

GameStop использует статическую навигацию в верхней части экрана для мобильных устройств.

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

2. Сначала перечислите наиболее важные страницы

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

Чтобы создать навигацию по мобильному сайту, сначала подумайте о:

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

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

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

Короткая и приятная мобильная навигация - это выигрыш для SEO и ваших пользователей. Это сохраняет поток ссылок на ваши самые важные страницы, а также помогает пользователям обойти.

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

Например, длинный пост может содержать несколько разделов и тысячи слов. Помилуй своих мобильных пользователей - не заставляй их прокручивать, чтобы найти то, что может быть им уместно. Некоторые идеи:

• Показать резюме TL; DR в начале длинной статьи. Если читатели хотят больше подробностей, они прокрутят вниз.
• Дайте якорные ссылки вверху, которые переместят читателя к различным разделам ниже (как я делал в верхней части этой статьи).
• Включите полезные призывы к действию и ссылки на связанные страницы в основной части, где они имеют смысл.

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

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

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

Вы можете проверить скорость своей мобильной страницы с Тест скорости мобильного телефона Google (или используйте наш SEOToolSet ™ ).

3. Думайте о поиске как о части вашей навигации

Мобильные пользователи смотрят на поиск как на навигацию, и вы тоже должны.

Рассмотрим Amazon.com. На мобильном устройстве Amazon даже не беспокоится о выпадающем списке категорий (хотя он есть в разделе «Отделы», если кто-то этого хочет). В верхней части мобильного представления выделяется простое поле «Поиск».

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

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

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

Настройте его и убедитесь, что он работает хорошо!

4. Сделайте вашу навигацию интуитивно понятной

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

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

Если вы используете символы для передачи информации своим пользователям, убедитесь, что они являются понятными, обычными символами. Например, если элементы вашего меню раскрываются, используйте интуитивно понятный символ, такой как знак плюс ( + ) или стрелка ( > ), чтобы пользователи знали, что щелчок откроет дополнительные параметры.

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

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

Меню REI открывается из значка гамбургера.

СОВЕТ: значок меню в стиле гамбургера часто получает больше кликов, если под ним также есть слово «меню» в соответствии с A / B тестирование , Если в вашем дизайне есть место, вы можете проверить это, чтобы убедиться, что он делает ваш мобильный сайт более интуитивным и увеличивает количество кликов / конверсий.

Попробуйте добавить «меню» для ясности. (изображение в CXL )

Цель состоит в том, чтобы ваша мобильная навигация облегчала жизнь, ограничивая мышление, прокрутку и щелчки.

О сухарях в поисковой выдаче
Стоит отметить, что с 2015 года Google отображает URL-адреса в результатах своего мобильного поиска по-другому, чем в настольных поисковой выдаче. Изменение заменяет URL-адрес веб-страницы описанием местоположения страницы в формате, похожем на крошки. Если это не кричит о важности силосования и четкой иерархии, ничего не происходит!

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

Например, результаты мобильного поиска по «истории Google» включают в себя результаты Википедии, показывающие, как URL-адрес появлялся в прошлом по сравнению с текущим стилем хлебных крошек :

Как изменились URL-адреса результатов поиска Google для мобильных устройств

СОВЕТ: Вы можете контролировать, как будут выглядеть ваши хлебные крошки, если вы добавите разметку схемы в HTML на своих страницах. Ссылаться на Структурные данные хлебных крошек Schema.org для деталей и Google файл справки о сухарях , (Подробнее об этом обновлении и о том, что оно значит, читайте в нашем посте. Новые мобильные URL-адреса Google Breadcrumb: максимально эффективное использование названия сайта и структуры URL .)

5. Заботьтесь о шрифтах и ​​контрасте

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

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

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

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

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

После того, как вы решите, настройте свой CSS и создайте письменное руководство по стилю, чтобы ваш контент был согласованным.

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

Также убедитесь, что между текстом и фоном достаточно контраста. В руководящих принципах WebAIM предлагаются правила для цветового контраста (рекомендуемое минимальное соотношение 4,5: 1). Вы можете попробовать их инструмент проверки контрастности чтобы увидеть, как ваша обработка текста соответствует.

Google дает несколько Примеры из того, как выглядят разные коэффициенты контрастности:

Текст должен контрастировать с фоном для удобства чтения на телефоне. (Per Google )

К тому же, Google указывает что «классическая теория читабельности предполагает, что идеальный столбец должен содержать от 70 до 80 символов в строке (от 8 до 10 слов на английском языке). Таким образом, каждый раз, когда ширина текстового блока превышает 10 слов, рассмотрите возможность добавления точки останова ».

Этот совет относится к основному тексту; рассмотрите более короткую максимальную длину для ваших пунктов меню.

Не уверены, что ваш текст легко читается? Запустите свой сайт через Google Мобильный дружественный тестовый инструмент ,

6. Дизайн для Touch

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

Google рекомендует создание мобильных страниц с минимальным размером сенсорной цели 48 пикселей с правильно установленным окном просмотра (подробнее об этом позже). А сенсорные цели должны быть разнесены примерно на 32 пикселя, как по горизонтали, так и по вертикали.

Кнопки и сенсорные цели должны быть достаточно большими, чтобы быть мобильными. (Per Google )

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

Не расстраивайте своих пользователей!

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

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

Изменения цвета показывают, к какому пункту меню обращаются на SearchEngineLand.com.

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

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

Сайт винтажной одежды RustyZipper.com использует большую графическую «кнопку» с текстовыми метками для удобной навигации с мобильных устройств.

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

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

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

в Google «Поскольку использование экрана на мобильных устройствах ограничено, любая вставка негативно влияет на восприятие пользователем».

Пример интрузивного всплывающего окна (кредит: Google )

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

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

7. Дизайн для пользователя Multi-Screen Mobile

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

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

Однако ваша мобильная и настольная навигация не обязательно должна быть - а иногда и не должна быть - одинаковыми близнецами.

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

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

• Какие мобильные призывы к действию должны быть встроены в вашу навигацию, чтобы помочь пользователям?
• Имеет ли смысл включать кнопку «Позвонить» или найти магазин?
• Может ли мобильный пользователь легко найти необходимую информацию, такую ​​как ваш адрес, маршрут, номер телефона, часы работы или другие факты?

Помните: пространство ограничено, мобильные потребности уникальны, а терпение в пути минимально.

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

Веб-сайтам необходим масштабируемый мета-видовой экран для корректного отображения на смартфонах.

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

Мобильный дружественный является дружественным к клиенту

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

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

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

✔ Короткие и сладкие, когда это возможно
✔ легко читать
✔ Задача ориентирована
✔ Приоритет с тем, что самое важное перечислено первым
✔ Доступно и последовательно размещено на всех страницах
✔ ясно, прямо и ожидаемо
✔ Вертикальный, если требуется прокрутка (никогда не используйте горизонтальную прокрутку!)
✔ Легко на глазах
Inger удобный для пальцев
✔ быстро

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

ПРИМЕЧАНИЕ РЕДАКТОРА: Эта статья является обновлением предыдущего поста, написанного Челси Адамсом для блога Брюса Клея.

Отправленный Брюсом Клеем 29 января 2018 года в 11:38

43 Ответа на «7 передовых методов навигации для мобильных устройств - BruceClay»

Похожие

Комментарии