Как проверить мобильную версию сайта с точки зрения удобства для пользователя?

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

Сайт адаптированный под мобильные устройства или специально созданный для них?

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

Большинство сайтов, созданных более 5 лет назад, разработаны для навигации с экранов компьютеров. Если внести в них соответствующие изменения, они будут хорошо отображаться в том числе и на мобильных устройствах. В последние годы стала набирать обороты обратная тенденция. Сайты создаются для удобной навигации в первую очередь с портативных устройств, и только потом с рабочего стола настольного компьютера. Наилучшим был бы так называемый multi-screen подход, при котором интерфейс может адаптироваться под каждый тип устройства. Этому служит ряд причин. Desktop-ная версия сайта должна обладать богатым функционалом и нести большой объем информации, в то время как мобильный интерфейс должен быть легким и интуитивным. Каким бы ни было разрешение экрана смартфона, читать информацию или заполнять формы на нем будет неудобно. А это влияет на конверсию. Поэтому для приобретения товаров чаще используются настольные компьютеры или ноутбуки. В этой статье мы рассмотрим, какие изменения помогут уравновесить количество продаж со всех устройств.

Сайт адаптированный под мобильные устройства или специально созданный для них?

Чем отличается версия, созданная специально для мобильных устройств?

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

Удобная навигация

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

Заметные и кликабельные кнопки с призывом к действию

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

Звонок одним кликом

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

Полезная прокрутка страницы

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

Короткие формы обратной связи

Последний, но очень важный элемент – это форма обратной связи. Сделайте ее настолько короткой, насколько сможете. Ее заполнение – это последний шаг, отделяющий вас от возможности взаимодействовать с клиентом. Форма должна содержать только личные данные (имя и фамилию) и способ обратной связи: адрес электронной почты или номер телефона (в зависимости от способа работы с клиентами в вашей фирме). Заполнение формы не должно занимать много времени, ведь часто люди посещают сайты в прямом смысле слова на ходу. Это еще и неудобно: нажимать на маленькой клавиатуре буквы и символы большим пальцем, особенно когда их много. Любите ваших пользователей. Чем больше полей в форме, тем меньше вероятность того, что клиент заполнит ее до конца и не откажется от покупки.

Пользовательский опыт – на первом месте

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

мобильная версия vs адаптивный дизайн

Понравилось? Тогда лайк, плиз!