Mobile vs Desktop: три ключевых отличия в дизайне веб-сайта

Mobile vs Desktop: три ключевых отличия в дизайне веб-сайта

К настоящему времени большинство из нас знает, что опыт просмотра веб-сайта на мобильных устройствах сильно отличается от опыта просмотра веб-сайта на desktop. Ориентации экрана разные, мы используем большие пальцы вместо мыши или трекпада, а некоторые задачи намного сложнее или громоздко. Именно поэтому проектирование веб-сайта для удовлетворения потребностей мобильных пользователей является настолько важным. Вот три ключевых компонента вашего сайта, которые должны отличаться на мобильных устройствах и на desktop.

  1. Организация контента

Одним из самых сложных элементов проектирования для мобильных устройств является вопрос о том, как организовать контент. Потребности мобильных пользователей могут отличаться от потребностей пользователей настольных компьютеров. Или их потребности могут быть одинаковыми (или похожими), но их поведение в браузере изменится в зависимости от того, какое устройство они используют.

При разработке для мобильных устройств первоочередной задачей должно быть создание контента веб-сайта для удовлетворения потребностей мобильных пользователей. Контент должен быть уложен вертикально, чтобы соответствовать узкой ширине мобильных устройств. Настольные устройства имеют портретную ориентацию, поэтому контент может растягиваться по экрану, и часто несколько сообщений или изображений могут комфортно жить в таком широком пространстве. Мобильные устройства обычно используются в портретной ориентации (а маленькие экраны означают, что даже в ландшафтном режиме горизонтальное пространство ограничено).

Розничный торговец очками, Уорби Паркер, при просмотре на мобильном устройстве переставляет содержимое с горизонтальной ориентации на вертикальное.

Еще одна вещь, о которой стоит подумать, - это то, какой контент следует расставить приоритетам. Разные потребности ваших мобильных пользователей? Если это так, то стоит подумать о разработке для мобильных устройств таким образом, чтобы приоритезировать потребности этих пользователей, а не просто дублировать их с вашего desktop, который, скорее всего, был спроектирован для пользователей настольных компьютеров.

В первые дни мобильного веб-дизайна, когда наши телефоны были менее сложными, и нам было менее удобно использовать их для выполнения более сложных действий, было принято снимать часть или большую часть контента веб-сайта и запускать мобильный сайт с помощью barebone Из того, что казалось мобильным пользователем, хотелось бы знать. В 2017 году такой подход больше не приемлем. Сегодня мобильные пользователи хотят иметь доступ к тем же самым браузерам на своих телефонах, что и на своих настольных компьютерах. Кроме того, мобильный телефон - это единственное или основное устройство для многих людей, поэтому полноценный мобильный сайт может быть единственным способом добраться до части пользователей.

Студийная цепочка Cult Cycling, Soul Cycle, позволяет пользователям заказывать класс на настольном или мобильном. Макет содержимого выровнен по вертикали в мобильной версии.

  1. Форма заполняет

Как маркетологи, мы тратим много энергии на оптимизацию наших веб-форм для максимальной конверсии. Мы знаем, что плохо спроектированная форма гарантированно будет убийцей конверсии. То же самое верно, конечно, на мобильных устройствах. И формы должны быть разработаны специально, чтобы облегчить для мобильных пользователей их заполнение.

Вертикальное выравнивание
Угадай, что? Это все вертикальное выравнивание? Это относится и к формам. Принцип тот же - для мобильных пользователей сложно и утомительно прокручивать взад и вперед по горизонтали, чтобы заполнить форму. Чтобы сделать процесс заполнения формы как можно более простым для мобильных браузеров, убедитесь, что поля формы выровнены по вертикали.

Equinox реорганизует поля формы для легкого завершения на мобильных устройствах.

Предсказуемый текст
Помогите своим пользователям, предоставляя прогностические варианты для полей с большим количеством потенциальных ответов. Предложенные прогнозы позволяют пользователям быстро перемещаться по форме и сокращать возможности опечаток, которые чаще встречаются при печатании большими пальцами на маленьком экране.

Kayak.com предлагает прогностический текст для места отправления и назначения полета.

Свернуть поля
Поскольку заполнение форм на мобильных устройствах обычно довольно обременительно, вы хотите сделать это как можно проще, уменьшив количество полей. Для этого вам нужно только попросить пользователя предоставить информацию, которая абсолютно необходима для завершения транзакции. Наличие дополнительной информации о пользователе может быть удобным для вашей компании, но оно не должно происходить за счет конверсии.

По возможности старайтесь использовать одно поле ввода. Опять же, рассуждение состоит в том, что это раздражает для мобильных пользователей, чтобы перепрыгнуть через большое количество полей. Если вы можете сконденсировать несколько полей в одну, это хорошая идея.

  1. Меню

Форматирование меню - это, безусловно, ключевая область различия между настольным и мобильным. На desktop обычно есть мега-меню со многими категориями и подкатегориями. Этот тип установки отлично подходит для пользователей настольных компьютеров, у которых есть достаточно большие экраны, чтобы они могли читать текст в этих меню и могли легко нажимать на текстовые ссылки.

Разумеется, это совершенно другая история на мобильном телефоне, потому что экраны маленькие, а большие пальцы (относительно) большие. Мобильные меню должны быть разработаны с учетом этих вещей. Это означает одноуровневое меню с большим текстом или кнопками и вертикальное выравнивание для меню со многими опциями.

На desktop Дж. Крю есть большие мега-меню с кучей категорий.

На мобильном устройстве меню сворачиваются, а затем расширяются по мере того, как пользователь сужается в категории.

Это далеко не полный список всех функций мобильного сайта, которые должны отличаться от настольной версии, но мы считаем, что эти функции являются тремя из наиболее важных. Не забывайте всегда учитывать потребности своего мобильного пользователя, а также уникальные способы, которыми они просматривают и потребляют информацию. Надеемся, примеры, приведенные в этой статье, служат вдохновением для совершенствования мобильных устройств на вашем сайте.

Дизайн и разработка

Теги:

Веб-дизайн , элементы веб-дизайна

Больше не нужно искать и обзванивать диджитал-агентства!
Создайте тендер и получите предложения по цене и срокам от лучших веб-студий Украины.
Это бесплатно и займет 2 минуты. В каталоге 1500+ диджитал-агенств, готовых помочь в реализации ваших задач. Выберите и сэкономьте до 30% времени и бюджета!
Создать тендер
Популярные статьи в разделе Разработка сайтов
Разработка сайтов
Как заставить сайт работать: проверенные советы и рекомендации Centum-D
При заказе сайта клиенты зачастую ориентируются на собственные представления о красоте. Но соверш...
Разработка сайтов
Виды целевых страниц Centum-D
Без преувеличений, на любом коммерческом сайте главную роль играют целевые страницы. В зависимост...
Разработка сайтов
Виды сайтов. Как понять, какой мне нужен? SySale
Сайт — инструмент, с помощью которого решаются бизнес-задачи. Наличие представительства в интерне...
Bug