Сейчас, более, чем когда бы то ни было, пользователи взаимодействуют с веб-сайтами и брендами посредством мобильных устройств. Прошли те дни, когда вам нужно было думать только о создании привлекательного сайта для лэптопов или десктопов. Ваш веб-сайт должен быть адаптивным, и речь идет не только о переходе от десктопов к мобильным устройствам — ваш сайт должен отлично смотреться на множестве устройств. Ниже, мы приведем десять особенностей, которые должны стать частью вашего адаптивного веб-дизайна.
1. Простота навигации
Когда адаптивные веб-сайты только начали появляться, было разработано то, что мы знаем, как «гамбургерное меню». Это был простой способ спрятать навигацию сайта до тех пор, пока она не понадобится пользователю. Но на протяжение последних нескольких лет, от гамбургерного меню стали понемногу отказываться, и оно было заменено на иконки, расположенные в верхней или нижней части страницы.
Сейчас иконки — это обычное явление. Пользователи хорошо понимают их значение. Использование иконок в навигации позволит пользователям быстро и эффективно перемещаться по вашему сайту.
2. Простой рассеянный фон
При создании веб-сайтов, дизайнеры применяют красивые оформления и фоновые изображения. Это оформление определяет ваш бренд, и создает в пользователях чувство чего-то знакомого. Вряд ли вы захотите терять эти аспекты, оптимизируя сайт под мобильные устройства.
Не удаляйте свои фоновые изображения. Вы можете использовать размытость, выделяя тем самым навигацию и функционал веб-сайта. Таким образом, ваши пользователи будут видеть всё тот же знакомый веб-сайт, а вы снизите время загрузки страницы и увеличите вовлеченность.
3. Цветовые палитры
Популярные приложения и мобильные вебсайты, к цветовым схемам применяют подход «меньше значит больше». Это не значит, что вы должны менять цветовую схему своего бренда. Вместо этого, при разработке мобильного веб-сайта, используйте больше белого пространства, и тонированные версии цветов вашего бренда.
Используйте цвет мудро. При чтении с мобильного устройства, пользователь скролит быстрее, чем на десктопе. Это значит, что яркие цвета, появляющиеся в этот момент, будут заставлять их остановиться, и переварить содержащуюся в этой области информацию. Стратегически размещайте цвета там, где пользователь сможет найти самую важную информацию.
4. Перелистывание и жесты
На мобильном сайте можно использовать большое количество жестов: касание, двойное касание, уменьшение, увеличение, перемещение. По мере проведения времени за просмотром веб-сайтов, пользователи к ним привыкают. Оставайтесь в курсе самых широко используемых жестов, и внедряйте их в свой дизайн.
5. Функциональная анимация и материальный дизайн
Функциональная анимация — это растущий тренд мобильного веб-дизайна. Добавление анимации на ваш сайт предоставит пользователям более понятную визуализацию. Эти визуализации создают связь между вашим бизнесом, и той ценностью, которую он предлагает вашим пользователям. Анимация создает более богатый опыт, а анимированные элементы могут упростить навигацию.
Эти элементы могут стать частью вашего материального дизайна, который не менее важен для юзабилити мобильного веб-сайта. Элементы материального дизайна включают в себя слои и градиенты, позволяющие сайту загружаться еще быстрее.
6. Карточный дизайн
Карточный дизайн — это не новая тенденция. Карточки разделяют контент вашего сайта на небольшие секции, по которым просто перемещаться. Такой функционал позволяет пользователям просматривать различные мультимедийные аспекты вашего сайта, и переходить к наиболее важной для них информации.
7. Интуитивный интерфейс
Не важно, какой девайс человек использует, все хотят хорошо в нем ориентироваться. Ваш интерфейс должен быть интуитивным на множестве устройств. Некоторые проповедники интернет-евангелия говорят о том, что «интуитивность» — это невозможный стандарт для дизайнеров, но это далеко не значит, что вам придется становиться экстрасенсом.
Не полагайтесь на шестое чувство, просто подумайте о том, каким будет самое естественное действие с учетом определенного девайса. Интерфейс вашего веб-сайта должен казаться знакомым пользователю даже в случае, если это его первый визит. Когда пользователь удобно себя чувствует, то останется на более продолжительное время, что в свою очередь увеличит его вовлеченность, увеличивая тем самым ваш рейтинг.
8. Touch ID
Touch ID изначально был разработан для обеспечения безопасности смартфонов. Но сейчас, веб-сайты применяют эту технологию для обеспечения безопасности свих служб. Реализация Touch ID на вашем сайте покажет пользователям, что их безопасность для вас важна, и что они могут безопасно осуществлять платежи.
9. Сервисы определения местоположения
Когда эти сервисы были разработаны, пользователи беспокоились о том, каким образом предоставление информации о размещении может повлиять на их безопасность или личную жизнь. Эти волнения остались в прошлом из-за удобства, которое эти службы в состоянии предложить.
10. Интернет вещей
И как только вы решили, что уже освоили адаптивность, появляются экраны еще меньшего размера. Люди начинают надевать технологии на себя, будь то Apple Watch, или Android-совместимые устройства. Количество приложений и веб-сайтов, которые можно на них просматривать с каждым днем увеличивается. Адаптация вашего веб-сайта к Интернету Вещей сохранит ваше место на передовом рубеже технологий.
Перевод статьи Алана Смита
