Вдизайне веб-сайта, удобном для мобильных устройств, приоритет отдается работе с мобильным браузером, а не настольной версии.
Этот подход стал чрезвычайно важным в последнее десятилетие. Согласно исследованию Statista , чуть более половины всего трафика веб-сайтов сейчас происходит на мобильных устройствах, что составляет примерно 45% всех покупок в Интернете . Учитывая, что смартфоны появились только в последние десять лет, ожидается, что эти цифры будут только расти, поскольку просмотр мобильных веб-сайтов станет еще более укоренившимся, а дизайн - более интуитивным.
Вот почему веб-сайты, которые не прилагают искренних стратегических усилий для обеспечения качественного мобильного взаимодействия, рискуют резко отстать от своих конкурентов. Чтобы помочь вам не отставать, мы собрали в этом руководстве некоторые из наиболее распространенных советов и приемов по созданию самых дружелюбных веб-сайтов, оптимизированных для мобильных устройств.
7 лучших советов по дизайну веб-сайтов для мобильных устройств
-
Используйте подход, ориентированный на мобильные устройства
Используйте рекомендуемые размеры для мобильных устройств
Оптимизировать для портретного режима
Свернуть меню
Свернуть вторичный контент
Ограничить поля формы и ввод текста
Мобильный - значит удобный для большого пальца
Совет 1. Используйте подход, ориентированный на мобильные устройства
-
Поскольку просмотр веб-сайтов с мобильных устройств почти превзошел возможности просмотра веб-сайтов на компьютерах, дизайнерам пришлось отказаться от рассмотрения веб-сайтов для компьютеров в качестве «основной» версии. Вот почему подход, ориентированный на мобильные устройства, - разработка веб-сайта для мобильных устройств до версии для настольных компьютеров - уже много лет является общепринятой передовой практикой.
Ориентируя художественное направление на мобильный опыт, дизайнеры поощряются в принятии дизайнерских решений в силу ограничений. Существуют не только ограничения по размеру, мобильные пользователи часто взаимодействуют одной рукой, а ввод, помимо касания и прокрутки, обычно более громоздок, чем на настольном компьютере. Рассмотрим, например, анимацию наведения, которая зависит от ввода мыши: если ваша настольная версия слишком сильно полагается на такого рода визуальную обратную связь, позже это станет проблемой для мобильных устройств.
В результате дизайн, ориентированный на мобильные устройства, с самого начала имеет тенденцию подчеркивать простоту и удобство использования. Имейте в виду, что такой подход не обрекает настольные версии на минималистичную разреженность. Напротив, проще расширить простой макет, чем упростить сложный.
Также важно сначала протестировать свои мультимедиа на мобильном телефоне, поскольку фотографии или видео, сделанные для альбомной ориентации, могут не подойти для портретной. Мелкие детали, такие как выражение лица или элементы фона, труднее читать при небольшом размере. Кроме того, часто есть место только для одного изображения за раз, и если вы сначала создадите веб-сайт с большим количеством изображений для настольных компьютеров, прокрутка каждого изображения на мобильном устройстве может стать излишним.
Совет 2. Используйте рекомендуемые размеры для мобильных устройств
-
На портативном устройстве пространство может казаться более ограниченным, чем в любом другом контексте дизайна. Но учет ограничений по размеру в начале вашего проекта - лучший способ избежать конфликтов в дальнейшем.
Разрешение экрана мобильного устройства зависит от устройства, но на данный момент наиболее часто используется разрешение 360 × 640 (соотношение сторон 9:16), согласно исследованию, проведенному statcounter . Google Analytics может сказать вам, какие именно устройства предпочитают ваши пользователи, и вам следует убедиться, что дизайн вашего веб-сайта достаточно адаптивен, чтобы учитывать различные варианты.
Когда дело доходит до размера шрифта для мобильного дизайна , для основного текста рекомендуется не менее 16 пикселей. Это также может варьироваться в зависимости от используемых гарнитур (в зависимости от их конструкции некоторые шрифты будут менее разборчивыми на 16 пикселей, чем другие).
Не существует стандартного размера для шрифтов заголовков, но цель состоит в том, чтобы установить четкую типографскую иерархию за счет контраста по размеру, весу и стилю. Но если сомневаетесь, просто проверьте размеры шрифта на мобильном устройстве.
Изображения и другие мультимедийные материалы, конечно, могут быть настолько широкими, насколько позволяет устройство. Пусть объект изображения диктует, насколько он должен быть большим или маленьким, чтобы сохранить четкость. Имейте в виду, что вам не обязательно помещать все изображение, но вы можете увеличить объект и обрезать посторонние элементы фона, как в примере выше.
И последнее, но не менее важное: размер кнопки чрезвычайно важен для дизайна веб-сайта, удобного для мобильных устройств, поскольку сенсорные экраны гораздо менее надежны при приеме пользовательского ввода, чем мышь и клавиатура. Исследование с упором на пожилых пользователей рекомендует сенсорные кнопки на экране между 42 и 72px для оптимальной доступности.
Совет 3. Оптимизируйте книжную ориентацию
-
Хотя мобильные веб-сайты технически можно использовать в ландшафтном режиме, когда устройство перевернуто на бок, портретный режим гораздо более распространен. Blackberry популяризировала использование двуручных мобильных телефонов в 2000-х годах, но с появлением смартфонов это было полностью прекращено, и пользователи отдали предпочтение портретному режиму одной рукой.
Узость портретного режима идеально подходит для макетов в один столбец . В этом стиле элементы сайта размещаются последовательно сверху вниз. Хотя выравнивание содержимого по центру обычно является обычным явлением, чередование выравнивания по левому и правому краю может создать визуальный интерес и иллюзию макета из двух столбцов. Кроме того, более мелкие элементы, такие как значки и фотографии, могут быть представлены в виде сетки, а карусели изображений могут прерывать вертикальную прокрутку горизонтальной прокруткой.
Помимо поиска творческих способов разбить макет с одним столбцом, есть способы использовать его в своих интересах. Поскольку приложения для социальных сетей подготовили мобильных пользователей к длительным циклам прокрутки, дизайнеры веб-сайтов могут размещать контент с помощью пробелов и отступов. Благодаря этому контент остается чистым и читаемым, а постоянная прокрутка поощряется к взаимодействию.
Представьте себе обратное: как контент, собранный на одном экране с ограниченной прокруткой, может показаться сложным для чтения.
Разбиение на разделы также полезно для группировки схожей информации, чтобы пользователь понимал общую цель каждого раздела, не читая глубоко. Это особенно полезно, если учесть, что примерно 79% посетителей страницы только просматривают контент сайта . Различный цвет фона помогает различить эти разделы, а границы творческих разделов нарушают ощущение квадратности, которое эти разделы создают.
Совет 4: сверните меню
-
Навигация - это еще одна область, которая может быстро усложняться в зависимости от количества пунктов назначения и параметров, предоставленных пользователю. В то время как веб-сайты для настольных компьютеров, как правило, имеют панель навигации с полным заголовком с несколькими главными меню и подменю, стало стандартом содержать все это в простом, узнаваемом значке гамбургера. В результате заголовки большинства мобильных веб-сайтов, как правило, сводятся к этому значку и логотипу.
Для стиля реального меню общий подход - это выдвигающаяся боковая панель, которая перекрывает часть экрана с параметрами навигации. Это позволяет меню работать в отдельном измерении от остального содержимого страницы, оставляя пользователю место для выхода из меню и возврата к предыдущему экрану.
В зависимости от того, насколько сложным является ваше меню, каждый пункт меню может содержать больше вложенных параметров или подменю. Когда пользователь щелкает по одному из этих подменю, лучше, чтобы новый список опций заменил существующее меню, чтобы список оставался коротким.
Не забудьте прикрепить панель навигации к экрану, чтобы пользователю не приходилось прокручивать ее до самого верха. Обычной практикой для мобильных устройств является скрытие фиксированной навигации при прокрутке вниз, уделяя должное внимание контенту, и отображение навигации, когда пользователь начинает прокрутку вверх.
Существуют альтернативные средства навигации, которые можно использовать вместо стандартных меню или в дополнение к ним. Вкладки позволяют пользователю легко перемещаться по другим разделам содержимого без необходимости загружать совершенно новую страницу.
Многие дизайнеры UX в наши дни также изучают навигационные решения, выходящие за рамки ввода на основе касания - горизонтальное и / или вертикальное смахивание является наиболее распространенным. Когда ничего не помогает, удобный значок поиска становится обычным явлением на мобильных устройствах, позволяя пользователю находить конкретные вещи, которые они ищут.
Совет 5. Сверните вторичный контент
-
Веб-сайты для настольных ПК часто имеют место для подробного основного текста, спецификаций продуктов и другого контента. Но поскольку мобильные сайты требуют, чтобы информация была точной, дизайнеры должны исключить или сократить весь несущественный контент. Здесь пригодятся складные / расширяемые секции.
Сворачивание содержимого включает добавление пояснительной информации с помощью значка, например треугольника или знака «плюс», который раскрывает или раскрывает скрытое содержимое. Хотя скрытие вашего контента может показаться плохим, преимущества упрощенного просмотра, подкрепленного убедительными заголовками, намного перевешивают вероятность пропущенной информации. Микро-взаимодействия в переключени также еще одно приглашение пользователю взаимодействовать со страницей , в отличие от пассивно чтения.
Дизайнеры должны зарезервировать сворачивающееся содержимое для копии нижнего уровня под заголовком. Повторяющийся контент можно объединить, чтобы перекрыть одно и то же пространство, а не накладывать друг на друга. В изображенном здесь дизайне Артема Оста под заголовком в настольной версии есть три цитаты клиентов, а в мобильной версии дизайнер свернул их вместе в карусель.
В дизайне веб-сайтов, оптимизированном для мобильных устройств, вам следует избегать постороннего контента: межстраничных объявлений и всплывающих окон. Хотя это может сэкономить место за счет наложения контента в отдельном окне, веб-сайты, пронизанные навязчивыми всплывающими окнами, не только неприятны, но и наказываются Google .
Совет 6. Ограничьте поля формы и ввод текста
-
Ввод текста должен быть одним из самых больших препятствий на пути к мобильному доступу. Хотя слово здесь и нет ничего страшного, кто не стонал, когда мобильный сайт требует адрес электронной почты, заставляя вас перемещаться по меню с буквами, заглавными буквами, пунктуацией и символами одной рукой? По этой причине вы должны минимизировать поля формы, насколько это возможно.
Возможности автозаполнения, такие как определение большей части адреса по почтовому индексу или предоставление предварительно заполненных вариантов для общих суффиксов электронной почты, могут облегчить некоторые из этих взаимодействий. Личная информация пользователя и информация для входа в систему могут быть упрощены до нескольких щелчков мышью за счет интеграции с другим программным обеспечением на основе профиля, таким как Apple, Google или Facebook.
Сторонняя интеграция с поставщиками платежей, такими как PayPal, также может пригодиться на страницах покупок для торговых сайтов, где получение данных кредитной карты может быть обременительным даже на компьютере. Если этот параметр недоступен, вы также можете разрешить пользователям быстро оформлять заказ в качестве гостей и повторять информацию о доставке в своих платежных данных.
Совет 7: удобство для мобильных означает удобство для большого пальца
-
Согласно исследованию, включенному в книгу Джоша Кларка Designing for Touch , пользователи взаимодействуют большим пальцем как минимум в 75% всех мобильных взаимодействий. Это включает в себя всю прокрутку, щелчки, пролистывание и ввод текста, а остальные пальцы заняты поддержкой задней панели телефона. Учтите также, что во многих случаях пользователи просматривают свой телефон менее доминирующей рукой, занимаясь другими делами. Таким образом, очевидно, что дизайнеры должны уделять первостепенное внимание при любом взаимодействии с мобильными устройствами.
Большой палец - самый большой палец, что делает его неточным. При создании кнопок дизайнеры должны использовать самый большой размер для важных взаимодействий (см. Предыдущий раздел о размере), потому что сенсорный экран не будет регистрировать ввод, если части большого пальца выходят за пределы кнопки.
Не менее важно расположение интерактивных элементов на странице. Обычно мобильное устройство держится за нижний конец, а большой палец опирается на середину. Чтобы добраться до интерактивных элементов вверху, пользователю придется переставить всю руку или использовать пальцы второй руки. Исследования показывают, что идеальная зона взаимодействия (которая сужается по мере увеличения размеров телефонов) находится в нижней средней части.
В последние годы многие UX-дизайнеры возглавили идею размещения панелей навигации внизу экрана, а не вверху. Хотя это обеспечивает более легкий доступ для большого пальца, нарушение правил проектирования, к которым привыкли пользователи, также может ухудшить восприятие. Время покажет, какая позиция является наиболее идеальной, но пока лучший способ решить эту проблему для вашей собственной пользовательской базы - это протестировать и то, и другое.
Воспользуйтесь мобильным дизайном веб-сайта
-
Судя по тому, как его глобальный трафик продолжает расти, за мобильным веб-сайтом явно будущее. Но если учесть все ограничения, с которыми приходится сталкиваться дизайну по сравнению с настольными веб-сайтами - нехватка места и периферийных устройств, - это может показаться скорее обузой, чем возможностью. Эти проблемы не являются непреодолимыми, но к ним также нельзя относиться легкомысленно.
Хотя советы в этой статье дадут вам основу для практических решений проблем, связанных с дизайном веб-сайтов, оптимизированным для мобильных устройств, их освоение требует большой осторожности и практики. Чтобы мобильный веб-сайт помогал, а не мешал вашим пользователям, подумайте о том, чтобы связаться с талантливым дизайнером веб-сайтов.
Нужен красивый сайт? Пишите мне. Цены от фрилансера, качество веб- студий!
