Объясняем, как сохранять логичность и порядок UI/UX элементов при адаптации на мобильные устройства.
Хорошая навигация сайта – как лифт: она ведёт тебя туда, куда ты хочешь и, если она хороша, ты пользуешься и не задаёшь ей вопросов. Вопросы же возникают, если что-то идёт не так гладко как хотелось бы: например, если лифт уводит тебя вбок или кнопки этажей расположены на его полу или потолке.
(Теоретически это возможно, но у вас должны быть веские причины на такой смелый шаг).
Сегодня рассказываем, почему важно сохранять одинаковую навигацию для всех ваших сайтов, и какие инструменты могут в этом помочь.
Как сохранить одинаковую навигацию?
Сперва о практической пользе: вот несколько советов по сохранению навигации в адаптивной версии сайта.
- Используйте Grid или Flexbox
Эти инструменты, появившиеся в CSS3, позволяют создавать адаптивные макеты, которые распределяют элементы по экрану в нужном порядке.
Flexbox поможет выровнять элементы по горизонтали или вертикали, а Grid, как более продвинутая двухмерная система, позволит создавать более сложные сетки, при этом сохраняя порядок элементов.
- Сохраняйте последовательность элементов
При использовании CSS Grid или Flexbox старайтесь сохранять порядок элементов в HTML-коде. Это обеспечит правильную последовательность отображения на экране, даже если вы меняете их визуальное расположение с помощью CSS.
- Используйте адаптивные изображения
Используйте атрибуты srcset и sizes для изображений, чтобы загружать разные версии изображений в зависимости от устройства. Это поможет сохранить скорость загрузки и качество изображения без потери иерархии.
- Не бойтесь скрыть некоторые элементы
В зависимости от устройства, некоторые элементы можно скрыть с помощью свойств CSS: к примеру display: none и display: block помогают управлять видимостью UI/UX элементов, что позволяет скрывать или показывать элементы в зависимости от контекста.
Теперь немного теории: рассказываем, почему важно пользоваться всеми этими инструментами.
1. Психология пользователя
Внимание пользователя, который зашёл к вам на сайт с мобильного устройства, гораздо сложнее удержать. Любой минус – мелкие шрифты, непонятные инструменты, долгая загрузка – повышает шансы, что он ничего у вас не купит.
И кривая навигация тоже относится к списку таких вещей. Всё очень просто: человек приходит на сайт с определённой целью. Если вы затрудняете ему к ней путь – он просто уйдёт от вас, и клиент будет утерян.
Чувствуете, как некомфортно ощущается, если на сайте поиск расположен в правой стороне экрана?
Поэтому нужно чтобы шапка, заголовки, кнопки и все остальные элементы интерфейса оставались там где были, где мозг их запомнил или хотя бы ожидает увидеть.
Контакты со ссылками на мессенджер – в самом низу страницу, кнопка быстрой связи с поддержкой – в правом нижнем углу экрана, кнопка поиска – в самом верху, или как правило, где-то слева.
2. Это важно для поддержания общего визуального стиля
Стоит ли говорить о том, что визуально сайт на разных устройствах выглядит гораздо лучше, когда все элементы расположены там, где ты ожидаешь их встретить?
Сайт сети магазинов «Пятёрочка» – хороший пример адаптации, потому что и в мобильной, и в десктопной версиях все элементы остаются на своих местах, выглядят одинаково и навигация ощущается удобной, потому что ты знаешь: если ты проскроллишь вниз, ты найдёшь список товаров. Спойлер: так и оказывается.
Так что удобная навигация играет роль не только в уважении к пользователю, его времени и ресурсам, но и в целом в соблюдении стилистики бренда.
3. Адаптивный дизайн и мобильная версия – это совсем не одно и то же
Если у версии для мобильных устройств в теории может быть иная навигация, чем у десктопных (хотя это тоже может вызывать вопросы), то в адаптивной версии сайта лучше такого не допускать, чтобы не вызывать недовольства пользователей.
К примеру у сайта ВКонтакте на мобильной версии часть навигации изменена из-за особенностей платформы: во вкладки «Музыка» и «Видео» вы заходите через нижнее меню, которое нужно настраивать как вам удобно. Логично, что на десктопной версии этой кнопки нет, так что музыку можно включить с помощью верхней панели.
Представьте, что однажды панель музыки переедет в нижний левый экран. Вот тогда вы поймёте, почему не стоит шутить с навигацией. Музыка на сайтах практически никогда не расположена снизу слева.
А вы когда-нибудь встречали примеры неудобной навигации по сайту?