19 ярких примеров веб-дизайна из Австралии
Previous
выбрать за меня
Instagram внедряет "канал актуального контента"
Next
веб-дизайн, интерфейс, юзабилити
Юзабилити

4 самые главные ошибки при создании мобильных лендингов

Автор: Денис Давыдов03.11.2015

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

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

Длинные и пугающие формы

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

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

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

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

веб-дизайн, интерфейс, юзабилити

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

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

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

СТА-кнопка, которую никто не может найти

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

веб-дизайн, интерфейс, юзабилити

СТА-кнопка. Вы бы обратили на нее внимание, если бы мы дополнительно не обозначили ее на этом изображении?

При оформлении мобильной версии лендинга СТА-кнопка должна действительно резко отличаться от остального дизайна страницы, заметно выделяясь на фоне остального дизайна страницы.

Следует учитывать не только тот факт, что искать какой-либо элемент на экране мобильного гаджета очень непросто, но и то, что скорее всего пользователь не будет видеть одновременно заголовок лендинга и СТА-кнопку – по этой причине она должна иметь четкий и однозначный призыв к действию. Креативные надписи в данном случае могут сбить с толку и отвлечь, ведь речь идет именно о мобильном опыте, опыте просмотра веб-страниц «на ходу».

Скроллинг, который никак не заканчивается

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

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

веб-дизайн, интерфейс, юзабилити

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

Сенсорная «рука гориллы», которая не учитывается

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

веб-дизайн, интерфейс, юзабилити

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

Реакция на статью
поделюсь
0%
интересно
0%
полезно
0%
не уверен
0%
скучно
0%
где автор?
0%
Денис Давыдов
Всем привет! Я Денис Давыдов – автор статей о юзабилити, интерфейсах и интернет-маркетинге. Будучи энтузиастом в сфере электронной коммерции и UX, сотрудничаю с различными российскими компаниями, предоставляя качественный контент и публицистику для веб-проектов. Изучаю актуальную культуру и политику, пишу очерки по мотивам наиболее острых и любопытных феноменов современности.
Комментарии
Оставить отзыв

    You must log in to post a comment

    ПОДПИШИТЕСЬ НА НАШУ РАССЫЛКУ!
    Уведомления о новостях, статьях и инфографике будут приходить раз в неделю.
    ПОДПИШИТЕСЬ НА НАШУ РАССЫЛКУ!
    Позвольте нам обновлять ваши знания раз в неделю.