Большинство из нас довольно хорошо знакомы с отзывчивым веб – дизайном. В основном, программисты используют media queries, а также различные макеты, для изменения дизайна и структуры сайта, чтобы он мог соответствовать различным размерам экранов мобильных устройств.
Но мобильный сайт – это не только размеры и скорость загрузки, разрабатывая мобильную версию своего сайта, не стоит забывать и о пользовательском опыте. В этой статье мы остановимся на одном из аспектов работы пользователя — меню навигации, рассмотрим подробно несколько подходов, которые помогут улучшить навигацию вашего мобильного сайта.
Что такое отзывчивое меню?
Под отзывчивым меню навигации, мы подразумеваем такое меню, которое быстро адаптируется под экраны разного размера различных мобильных устройств. Существую разные способы создания такого меню, с помощью CSS, PHP и других языков программирования. В этой статье мы посмотрим, что можно создать media queries с помощью CSS.
Есть несколько способов, с помощью которых может изменить меню на различных мобильных устройствах:
- Меню можно изменить, используя разный дизайн, а также изменив местоположение меню в окне браузера.
- Меню может иметь разное содержание, в зависимости от мобильного устройства под которое создается приложение.
Зачем использовать отзывчивое меню навигации?
У каждого пользователя, который использует мобильное устройство с экраном небольшого размера, пользовательский опыт будет разным.
Первая и наиболее очевидная причина разного пользовательского опыта заключается в размере экрана. Правильная и удобная навигация размещается даже на экранах небольших размеров таким образом, чтобы пользователю было удобно пользоваться мобильным приложением. Другим фактором является то, что процент мобильных устройств с сенсорным управлением стремительно растет, а это значит, что удобная навигация должна учитывать то, что палец пользователя будет прикасаться к той или иной иконке или значку. При этом важно, что бы иконки были хорошо видны пользователю, но при этом они не должны закрывать собой всю пространство на экране пользователя, или перекрывать другие иконки. Это актуально также и для планшетных компьютеров.
Отзывчивое меню имеет ряд преимуществ:
- Дизайн меню. Дизайн меню навигации является неотъемлемой частью общего дизайна мобильного приложения, поэтому он редко хорошо смотрится с другими макетами.
- Эргономика. Ссылки в меню навигации должны быть понятными и узнаваемыми, чтобы пользователь мог в любом состоянии воспользоваться ими. «Пользователь должен быть в состоянии воспользоваться вашим меню даже если у него один глаз и один палец», пишет в своей книге под названием Mobile First Люк Врублевский. В своем руководстве для разработчиков «User Experience Guidelines» компания Apple советует создавать иконки размером около 57 пикселей. Это намного больше, чем ссылка в текстовое меню, которая может быть только в 14 пикселей в высоту. Таким образом, активная область ссылки на мобильном сайте должна охватывать не только текст, но область вокруг текста, так чтобы пользователь сразу видел ее.
- Пользовательский опыт. Мобильные пользователи могут по-разному взаимодействовать с меню на своем устройстве. В дополнение к содержанию меню и размерам ссылок, подумайте, как расположение самого меню повлияет на пользовательский опыт. Например, пользователь, который прокручивается длинного сообщение в блоге до самого конца страницы, вряд ли захочет вернуться обратно, чтобы воспользоваться панелью навигации. Некоторые дизайнеры располагают меню в верхней или нижней части экрана, чтобы обойти эту проблему, или они в нижней части страницы добавляют ссылку «Menu», и когда пользователь кликает по ней, он автоматически перенаправляется на самый верх страницы. Некоторые дизайнеры частично скрыли меню, пользователь нажимает на панель, и скрывает ее, если у него есть в этом необходимость.
Некоторые подходы к отзывчивой навигации
Итак, это были некоторые из преимуществ отзывчивого меню. Очевидно, они будут варьироваться в зависимости от содержания сайта, его верстки и функциональности. Ваш подход будет также зависеть от времени и имеющегося бюджета, а некоторые из этих подходов требует длительного времени и ресурсов. А сейчас давайте рассмотрим некоторые подходы, которые могут заставить навигацию вашего сайта работать лучше. Мы представляем несколько способов от самых легких до самых трудных.
1.Настройка визуального оформления меню
Мы могли бы сначала сделать простой дизайн, чтобы меню выглядело лучше на узком экране, а также сосредоточить все внимание на портретном режиме (этот подход применим к мобильным устройствам, экраны которых уже, чем 480 пикселей).
На скриншоте ниже изображен дизайн сайта One to One Interview Coaching, с простой одноуровневой навигацией.
Нажмите для увеличения.
На сайте с отзывчивым дизайном, возможны простые изменения макета в зависимости от размера экрана мобильного устройства. На телефонах в портретном режиме, этот сайт выглядит следующим образом:
Нажмите для увеличения.
Больше всего на данном сайте пользователь пользуется меню, которое расположили в верхней части страницы. На данном примере все ссылки в меню разбросаны, сейчас я покажу, как можно выровнять их по центру.
Чтобы сделать это, мы добавим CSS в соответствующие media queries. Пункты меню в настоящее время в неупорядоченном списке. Мы можем изменить это с помощью следующего кода:
.menu {
text-align: center;
margin-top: 10px;
}
.menu a {
display: inline;
}
.menu li {
float: none;
display: inline;
}
Этот код центрирует текст в меню, удаляет поплавки из списка элементов и связей, а также отображает список встроенных элементов, а не блоки. Если все, что мы делали, было центром текста, то каждая ссылка будет расположена, как список по центру, одна над другой.
После этих изменений, веб — сайт выглядит следующим образом:
Нажмите для увеличения.
Теперь ссылки красиво расположены по центру. Нам просто пришлось немного изменить текст меню.
Очевидно, что это изменение сильно не улучшило эргономику и функциональность меню, но оно улучшило дизайн. И само изменение не занимает и 10 минут. Конечно, увеличение размеров ссылок улучшило бы юзабилити этого сайта. Но мы обратимся сейчас к другому сайту, который больше предыдущего нуждается в доработках.
2.Повышение эргономики: сделать меню более удобным для использования
Точное нажатие ссылки, расположенной в середине панели навигации не так просто, как это должно быть на небольшом мобильном устройстве с сенсорным экраном. Мы можем поспособствовать этому, сделав зону меню больше. Тогда ссылки будут выглядеть, как кнопки, и у пользователя будет больше возможности попасть пальцем по большой поверхности этой кнопки.
Понятие tappability, то есть способность пользователя попадать по кнопке с первого раза актуально не только для мобильных телефонов с маленькими размерами экранов, но и для пользователей планшетных компьютеров.
Улучшение навигации на планшетных компьютерах
Мой собственный веб-сайт, Компас Design, разрабатывался с помощью отзывчивого веб – дизайна, но еще не оптимизирован для сенсорного интерфейса. Его расположение на IPad и других крупных планшетных компьютерах схоже с тем, как он выглядит со стационарных компьютеров. И все бы было прекрасно, если бы ни навигационные ссылки, которые слишком малы для экранов планшетных компьютеров. Это создает некоторый дискомфорт для пользователей. На узких экранах (например, когда пользователь просматривает сайт в портретном режиме), навигация выглядит неряшливо.
Нажмите, чтобы увеличить.
Мы можем исправить это, сделав каждую ссылку одинаковой ширины, с текстом в одну или две) линии, если это будет необходимо. Единственным недостатком является то, что этот подход работает, только если вы знаете, как много ссылок в меню — если вы добавите больше, то придется дорабатывать CSS.
Этот эффект делается с помощью следующего кода:
@media screen and (max-width: 780px) {
.menu li {
width: 10%;
padding: 1%;
margin: 0;
border-left: 1px solid #fff;
border-right: 1px solid #333;
}
}
.menu li:first-child {
border-left: none;
}
.menu li:last-child {
border-right: none;
}
.menu li a {
margin: 0;
padding: 0 0 0.2em 0;
line-height: 1.1em;
text-align: center;
height: 3.8em;
}
Этот код выполняет следующие действия:
- Устанавливает ширину каждого пункта меню до 10% от ширины полного меню, и добавляет заполнения;
- Удаляет поля, которые ранее были установлены справа от каждого пункта меню;
- Добавляет двойною рамку, что делает каждую ссылку похожей на кнопку;
- Уменьшает высоту строки ссылки в каждом пункте меню;
- Предлагает в ручную исправить высоту для каждого канала, а также центра текста.
Это намного улучшило нашу навигацию. Пункты меню выстраиваются по горизонтали, и ссылки теперь легко нажимать большим пальцем. Но расположение текста наверху страницы выглядит недоработано, поэтому давайте исправим это с помощью CSS таблицы:
.menu li {
display: table;
}
.menu li a {
display: table-cell;
vertical-align: middle;
}
Теперь ссылка в каждом пункте меню ведет себя как ячейка таблицы, и это позволяет нам централизировать текст по вертикали, техническая документация расположена на CSS-Tricks.
Навигационные ссылки, теперь достаточно большие, чтобы нажать большим пальцем, они больше похожи на кнопки, и макет выглядит гораздо аккуратнее. Это хорошее решение, когда горизонтальная навигация слишком широкая, чтобы поместиться на экране. Мы добились некоторых улучшений в дизайне и пользовательском интерфейсе, с помощью всего лишь нескольких строк CSS.
Улучшение навигации для те …
Если вы хотите прочитать полностью статью, посетите сайт наших спонсоров