Всего несколько лет назад пользователи выходили в интернет только с настольных компьютеров. Соответственно, и дизайн сайтов разрабатывался для комфортной навигации с большого экрана. Сейчас для выхода в интернет гораздо чаще используются мобильные телефоны. Поэтому интерфейсы сайтов должны быть удобны для навигации в том числе с небольших экранов. Началась эпоха развития функционального и интерактивного мобильного интерфейса. Так возникли подгруппы дизайна для настольных компьютеров, ноутбуков, планшетов и мобильных телефонов.
Сайт адаптированный под мобильные устройства или специально созданный для них?
Наверняка, многие из вас задавались вопросом, что лучше: адаптивный дизайн или отдельная мобильная версия? Отвечаем.
Большинство сайтов, созданных более 5 лет назад, разработаны для навигации с экранов компьютеров. Если внести в них соответствующие изменения, они будут хорошо отображаться в том числе и на мобильных устройствах. В последние годы стала набирать обороты обратная тенденция. Сайты создаются для удобной навигации в первую очередь с портативных устройств, и только потом с рабочего стола настольного компьютера. Наилучшим был бы так называемый multi-screen подход, при котором интерфейс может адаптироваться под каждый тип устройства. Этому служит ряд причин. Desktop-ная версия сайта должна обладать богатым функционалом и нести большой объем информации, в то время как мобильный интерфейс должен быть легким и интуитивным. Каким бы ни было разрешение экрана смартфона, читать информацию или заполнять формы на нем будет неудобно. А это влияет на конверсию. Поэтому для приобретения товаров чаще используются настольные компьютеры или ноутбуки. В этой статье мы рассмотрим, какие изменения помогут уравновесить количество продаж со всех устройств.
Чем отличается версия, созданная специально для мобильных устройств?
Давайте рассмотрим на примере интернет-магазина, каким характеристиками должен обладать сайт для комфортного использования с мобильных устройств.
Удобная навигация
Экраны мобильных телефонов – самые маленькие из портативных устройств. Это может создать неудобства при неправильно устроенной навигации. Вы наверняка сталкивались с ситуациями, когда хотите пройти по одной кнопке, но случайно кликаете на соседнюю. Приходится ждать загрузки ненужной страницы, чтобы потом вернуться на исходную и снова попробовать нажать нужный элемент. Зачастую это раздражает и заставляет терять время. Поэтому, при разработке меню навигации по сайту, приложите максимум усилий, чтобы упростить его до основных страниц, и сделать ссылки достаточно крупными для нажатия пальцем.
Заметные и кликабельные кнопки с призывом к действию
Призывы к действию должны быть хорошо заметны пользователям всех устройств.. Если ваша посадочная страница предполагает несколько действий клиента, сделайте наиболее видимыми самое важное из них. Например, в одном призыве вы побуждаете клиента прочитать более подробную информацию о продукте, а в другом – заказать его. Сделайте второй зрительно ярче и крупнее первого. Расположите кнопки с призывом к действию в нескольких местах на одной странице, чтобы их было легко найти. И помните, что зачастую навигация по экрану мобильного устройства производится большим пальцем, поэтому расположите call-to-action в удобных для нажатия местах и сделайте их соответствующего размера.
Звонок одним кликом
Изначально сотовые телефоны не использовались для поиска информации в интернете, а только для звонков, в лучшем случае смс. Несмотря на эволюцию в функционале, звонки остаются важной функцией (иначе все бы пользовались планшетами или ноутбуками). За минуту звонка мы получаем гораздо больше информации, чем за минуту чтения текста на экране. Можем задавать вопросы и получать незамедлительные ответы. Было бы разумно воспользоваться этим для увеличения продаж: установите на вашем сайте кнопку для прямого звонка в службу поддержки. Это поможет посетителям сайта разрешить сомнения, а вам – получить шанс осуществить продажу.
Полезная прокрутка страницы
Чтобы вместить содержимое сайта или посадочной страницы на экран мобильного телефона, неизбежно приходится сужать зону показа и удлинять страницу. Используйте это с пользой для интерфейса. Создавайте длинные страницы с прокруткой, помещайте на них как можно больше информации, чтобы избежать необходимости перехода на другую страницу. На длинной странице разместите больше кнопок с призывом к действию, расскажите об истории бренда, о его новостях, разбейте информацию на блоки с разным дизайном. Согласитесь, прокрутить страницу в мобильном телефоне гораздо легче, чем перейти на новую.
Короткие формы обратной связи
Последний, но очень важный элемент – это форма обратной связи. Сделайте ее настолько короткой, насколько сможете. Ее заполнение – это последний шаг, отделяющий вас от возможности взаимодействовать с клиентом. Форма должна содержать только личные данные (имя и фамилию) и способ обратной связи: адрес электронной почты или номер телефона (в зависимости от способа работы с клиентами в вашей фирме). Заполнение формы не должно занимать много времени, ведь часто люди посещают сайты в прямом смысле слова на ходу. Это еще и неудобно: нажимать на маленькой клавиатуре буквы и символы большим пальцем, особенно когда их много. Любите ваших пользователей. Чем больше полей в форме, тем меньше вероятность того, что клиент заполнит ее до конца и не откажется от покупки.
Пользовательский опыт – на первом месте
При создании сайта для электронной коммерции для настольных компьютеров или мобильных устройств важно помнить, что на первом месте стоит ощущение пользователя от навигации. Пользователь навряд ли превратится в клиента, если он запутается в страницах, шрифт будет мелким, или кнопку заказа будет трудно найти.
