6 секретов создания эффективной навигации в мобильной версии сайта
Традиционно в раздел навигации «запихивали» буквально всё, что есть на сайте. Огромные многоуровневые списки выглядели уродливо, но, просматривая ресурс с ПК, с этим ещё можно как-то мириться. На мобильных устройствах такой подход не работает. Если меню слишком громоздкое, а пользователь вынужден прокручивать его, то с большой вероятностью человек попросту не задержится на сайте.
Удобная и продуманная навигация — один из важнейших аспектов современного UX-дизайна. К тому же с каждым годом юзабилити всё больше влияет на SEO.
Вот несколько советов, которые помогут правильно оформить эту часть сайта.
Удобная и продуманная навигация — один из важнейших аспектов современного UX-дизайна. К тому же с каждым годом юзабилити всё больше влияет на SEO.
Вот несколько советов, которые помогут правильно оформить эту часть сайта.
Не усложняйте
Ширина экрана многих смартфонов в портретном режиме составляет всего 720 px. И это нужно учитывать. При столь ограниченном количестве свободного места, стоит избегать беспорядка и «креатива». Поэтому сразу переходите к делу и безжалостно избавляйтесь от всего лишнего.
Названия страниц и разделов должны быть как можно более короткими, но при этом понятными. Если пунктов больше 7–8, стоит задуматься о том, чтобы вообще сократить меню в мобильной версии.
Названия страниц и разделов должны быть как можно более короткими, но при этом понятными. Если пунктов больше 7–8, стоит задуматься о том, чтобы вообще сократить меню в мобильной версии.
Если без многоуровневой навигации не обойтись (обычно это касается только интернет-магазинов), структура всё равно должна оставаться простой. Максимум один раскрывающийся список под каждым пунктом меню.
А вот навигация, требующая горизонтальной прокрутки, будет не самым удачным выбором. Хотя некоторые сервисы используют интерфейсы карусельного типа на основе изображений, это скорее исключение, чем правило. Далеко не на каждом ресурсе такой ход будет уместен.
А вот навигация, требующая горизонтальной прокрутки, будет не самым удачным выбором. Хотя некоторые сервисы используют интерфейсы карусельного типа на основе изображений, это скорее исключение, чем правило. Далеко не на каждом ресурсе такой ход будет уместен.
Задайте себе вопрос: какие ссылки объективно нужны, чтобы пользователь смог выполнить приоритетные задачи? Какими элементами навигации можно пренебречь в мобильной версии?
Оптимальный вариант — от 4 до 8 пунктов. Логотип в верхней части можно сделать активной ссылкой, превратив его в аналог кнопки «Главная».
Оптимальный вариант — от 4 до 8 пунктов. Логотип в верхней части можно сделать активной ссылкой, превратив его в аналог кнопки «Главная».
Сначала перечислите самые важные страницы
У пользователей вашего сайта не так много времени или терпения. Ваша задача — помочь им максимально быстро добраться до нужной страницы. Чтобы сделать это, задайте себе несколько вопросов:
Какие страницы сайта являются самыми важными?
Какие действия чаще всего совершают посетители сайта с помощью смартфонов?
Какие страницы вашего сайта наиболее эффективно удовлетворяют потребности мобильного пользователя?
Ответы на эти вопросы позволяют понять не только то, какие элементы нужно добавить в главное меню, но также какие ссылки и призывы к действию следует разместить на каждой странице.
Главное чтобы меню навигации было единообразным на всём сайте. Здесь необходимо указать несколько верхних целевых страниц (например, основные категории).
Кратковременная мобильная навигация – беспроигрышный вариант с точки зрения SEO и юзабилити. Это поможет пользователям лучше ориентироваться, а также сохранит приток трафика на другие, менее приоритетные страницы.
Кратковременная мобильная навигация – беспроигрышный вариант с точки зрения SEO и юзабилити. Это поможет пользователям лучше ориентироваться, а также сохранит приток трафика на другие, менее приоритетные страницы.
Контекстные ссылки можно добавлять в основной контент каждой страницы разными способами. Например, при публикации лонгрида в блоге можно разместить вверху блок с содержанием и якорными ссылками на основные разделы статьи. Это не только обеспечит удобство для читателя, но и поможет поисковым системам лучше идентифицировать фрагменты вашего контента, отвечающие определённым поисковым запросам.
Другой вариант — добавление полезных призывов к действию и ссылок на связанные страницы в нижнюю часть страницы или в основной текст, там, где это уместно.
Другой вариант — добавление полезных призывов к действию и ссылок на связанные страницы в нижнюю часть страницы или в основной текст, там, где это уместно.
Воспринимайте поиск по сайту как часть навигации
Многие владельцы сайтов незаслуженно забывают о строке поиска. А между тем, на практике пользователи часто используют её, чтобы не блуждать по разделам портала. И успешные компании учитывают это.
Поиск по сайту — это наиболее удобный вариант навигации для мобильных устройств. Поэтому сделайте его заметным и убедитесь, что он хорошо работает.
Яркий пример — Amazon. В версии для мобильных устройств Amazon делает акцент не на раскрывающееся меню категорий (хотя его можно найти в разделе Departments, если кому-то очень нужно). Однако всю верхнюю часть экрана занимает обычная белая строка поиска.
Имея систематизированный, но огромный каталог Amazon не ждёт, что пользователи будут метаться по меню, чтобы найти то, что им нужно. В большинстве случаев человек просто вводит название продукта и сразу же видит соответствующие товары.
Сделайте навигацию интуитивно понятной
Пользователь должен точно знать, чего ожидать, когда он нажмет на тот или иной элемент. От креатива здесь лучше отказаться в пользу привычных большинству людей символов и обозначений.
Например, чтобы обозначить раскрывающиеся списки, используйте знак плюса (+) или стрелку (>).
Другой пример — использование пиктограммы увеличительного стекла для обозначения функции поиска.
Если вы используете гамбургер-меню, опять же, его нужно обозначить всем известной иконкой из трёх горизонтальных полос.
Другой пример — использование пиктограммы увеличительного стекла для обозначения функции поиска.
Если вы используете гамбургер-меню, опять же, его нужно обозначить всем известной иконкой из трёх горизонтальных полос.
Выберите читабельный шрифт и правильное сочетание цветов
Никто не захочет всматриваться в крошечные буквы на и без того небольшом экране. Это не нравится ни пользователям, ни поисковикам.
Весь текст в мобильной версии сайта должен быть достаточно крупным, чтобы его можно было без проблем прочитать с любого устройства.
Весь текст в мобильной версии сайта должен быть достаточно крупным, чтобы его можно было без проблем прочитать с любого устройства.
Чтобы меню было читабельным, выберите простой, строгий и достаточно высокий шрифт. Между строками, буквами и словами должны быть интервалы, обеспечивающие комфортное чтение.
Хорошие варианты шрифтов — Helvetica, Roboto, Open Sans, Proxima Nova.
Также убедитесь, что текст контрастирует с фоном. В соответствии с рекомендациями WebAIM, минимальное рекомендуемое соотношение — 4,5 к 1. Определить точное значение можно с помощью разработанного компанией инструмента Contrast Checker: вводите коды двух цветов — и сразу видите результат.
Учитывайте специфику сенсорных экранов
В то время как заострённый курсор мыши позволяет точно выбирать даже самые маленькие элементы, нажимая на сенсорный экран пальцем, «прицелиться» гораздо сложнее.
Google рекомендует создавать мобильные страницы, где цели касания (в данном случае ссылки меню) расположены друг от друга не менее, чем на 32 px — как по горизонтали, так и по вертикали. При этом ширина и высота самих кликабельных элементов должна быть не менее 40 px.
Оставьте свой номер телефона и мы свяжемся с вами в течение 10 минут
Хотите |
Оставь заявку и мы перезвоним в течении 30 минут
