8 Лучших практик мобильного дизайна для вашего лендинга

Posted on by riasevastopol

93% пользователей выходят в Интернет с мобильных устройств ежедневно. Это 3 500 000 000 человек, каковые в любое время смогут зайти на ваш лендинг со собственных смартфонов либо планшетов.

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

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

1. Избавьтесь от навигационной панели

Посмотрите, сколько места может занимать навигационная панель:

На мелких мобильных экранах ценен любой пиксель, и вам необходимо извлечь из него максимум. Один из несложных способов это сделать — избавиться от навигационной панели. На десктопах она возможно крайне полезна: с ее помощью визитёрам легко перемещаться по сайту и обнаружить то, что им необходимо.

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

Как же визитёрам перемещаться по сайту без навигационной панели? Имеется пара способов. Самый популярный из них — гамбургер-меню, маленькая верхняя панель.

«Гамбургер» является этаким коробкой, выдвигающимся из угла экрана и содержащим разные ярлыки меню.8 Лучших практик мобильного дизайна для вашего лендинга

Второй вариант — одностраничный мобильный сайт. Но в случае если на вашем сайте большое количество контента, он вам не подойдет.

Просматривайте кроме этого: ТОП-3 вопроса по оптимизации навигационного меню

2. Правило громадного пальца

Точно вы пользуетесь смартфоном довольно часто — в автобусе либо в очереди. Возможно, вы просматриваете с него эту самую статью. А как вы держите смартфон? Вероятнее, вы водите по экрану громадным пальцем.

Так делает 75% пользователей.

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

В последние пара лет экраны и наши телефоны становятся все больше — а руки остаются прошлыми. Мы уже по-второму держим смартфоны, территории касания сместились, и точность ближе к внешним углам экрана снизилась.

В следствии дизайнерам необходимо организовывать контент так, дабы главные функции размешались в центре, а второстепенные — внизу и вверху экрана.

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

3. Оптимизируйте и уменьшайте размеры файлов

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

Применяйте сайты наподобие TinyJPG либо такие инструменты, как ImageOptim (лишь для Mac) либо «Export for Web» в Photoshop, дабы снизить размер файла, перед тем как загружать изображения на собственный сайт.

На размер файла больше всего воздействуют две вещи:

  • Уровень качества. В случае если снизить его, файл станет меньше, вместе с тем упадет четкость, и смогут показаться артефакты.
  • Размер/разрешение. Конечно, размер файла сильно зависит от размера картины. Конечно, вы не захотите сделать изображения такими мелкими, что пользователи ничего не смогут рассмотреть, но в случае если, к примеру, ширина колонки, в которой вы размещаете изображение, образовывает 600 пикселей, ширина изображения не должна составлять 1000 пикселей. Измените размер, перед тем как загружать картину на лендинг.

4. Номер телефона, доступный для звонка в один клик

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

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

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

Достаточно разместить ссылку для того чтобы рода:

И номер будет смотреться так:

123-123-1234

Визитёры смогут кликнуть по нему и позвонить.

Другие ответственные элементы сайта также стоит сделать интерактивными: к примеру, в то время, когда пользователь кликает по адресу, должны раскрываться Гугл Maps. В большинстве приложений наподобие Facebook это происходит машинально, но вы имеете возможность ввести собственный адрес в Гугл Maps, скопировать ссылку и засунуть ее на собственный сайт.

Подобные мелочи оказывают помощь визитёрам вашего лендинга ощущать, что они ничего не упускают, и не делать лишней работы. Не разрешайте мобильным устройствам перекрыть вашу воронку конверсии.

Просматривайте кроме этого: 4 способа повышения конверсии, каковые прекрасно трудятся на мобильных лендингах

5. Респонсивный дизайн

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

Прошло около десяти лет, и ландшафт кардинально изменился. Экраны стали больше, соединение — стремительнее. И показался респонсивный и адаптивный дизайн.

Эти два типа дизайна отличаются друг от друга, но задача у них одна: создать единую разметку, которая динамично изменяется в зависимости от устройства, применяемого визитёром.

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

Имеется пара вещей, о которых необходимо не забывать в связи с респонсивностью:

  • Размеры изображений. В случае если изображения на вашем лендинге крайне важны, удостоверьтесь, что они прекрасно видны на мобильных устройствах.
  • расположение и Разметка контента. В зависимости от того, как расположены элементы в десктопной версии вашего лендинга, они смогут смещаться в мобильной версии. Удостоверьтесь в надежности, все ли остается на собственных местах на различных устройствах.
  • Анимация. Анимация, которая прекрасно выглядит в десктопной версии, может совсем не так прекрасно трудиться в мобильной. Удостоверьтесь в надежности ее, перед тем как публиковать.
  • Видео. Учитывая прошлые советы о размере изображений, поразмыслите о том, дабы запрятать видео в мобильной версии либо вовсе удалить его. Оно громадное, тяжелое и может значительно замедлить мобильный опыт.
  • JavaScript. Не смотря на то, что это и превосходный язык программирования, он не всегда работает на мобильных, исходя из этого удостоверьтесь в надежности, корректно ли все отображается.

Просматривайте кроме этого: Мелкие изображения на громадных экранах: от мобайла до десктопа

6. Избавьтесь от всплывающих окон

С 2017 года Гугл штрафует страницы с «навязчивыми вставками». По сути речь заходит о всплывающих окнах.

Примеры навязчивых вставок, делающих контент менее дешёвым.
1. Пример навязчивого всплывающего окна.
2. Пример отдельной навязчивой вставки.
3. Еще один пример отдельной навязчивой вставки.

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

В случае если контент в вашем всплывающем окне достаточно ответствен, добавьте его на страницу отдельной секцией. Тогда Гугл не понизит ваш сайт в поисковой выдаче.

7. Оптимизируйте формы для мобильных

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

Как решить проблему? Логика несложна. Долгие формы требуют большое количество печатать.

Печатать на мобильных плохо некомфортно. Следовательно, долгие формы плохо неудобны.

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

Сократите количество полей

Это легко: чем меньше необходимых полей, тем меньше упрочнений требуется от пользователя. Чем меньше упрочнений, тем меньше трение.

Сократить количество полей не всегда вероятно: в итоге, обычно поле существует вследствие того что информация, которую необходимо в него ввести, нужна. Но все, что возможно удалить, необходимо удалить, а кое-какие формы (фамилия и имя, к примеру) — объединить.

Поделите заполнение формы на пара этапов

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

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

8. Сворачиваемые секции

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

Ответом данной неприятности смогут стать сворачиваемые секции.

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

Заключение

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

Высоких вам конверсий!

По данным: blog.kissmetrics.com.

Случайные статьи:

Дизайн лендинга – с чего начать дизайн лендинга с нуля, веб-упаковка? (дизайн landing page)


Подборка похожих статей:

riasevastopol

More Posts