Человеку гораздо проще взять мобильный телефон и войти в Интернет с него, чем включать компьютер. Тем более, если есть мобильный сайт, где интерфейс интуитивно понятен. Добавьте к этому омниканальность. И ваши соцсети (89% заходов туда производятся со смартфонов), где можно собирать лиды, прогревать аудиторию к покупке. И сразу же к ней её подводить.
В общем, при создании сайта очень важно также создать его мобильную версию. Причем, адаптированную как под небольшие вытянутые по-вертикали экраны, так и под особенности использования (активность большого пальца). Кстати, зачастую лучше начинать именно с мобильной версии сайта, а затем уже делать десктопную. Так вы сможете обозначить главное, которое затем уже будет дополняться версией для ПК.
Приведем 4 важных вещи, о которых не стоит забывать при создании мобильной версии сайта.
1. Адаптация под большой палец и небольшой экран
Прокрутка, свайпы, клики, ввод текста – в основном мы делаем это большими пальцами. У врачей даже появился термин «смартфонный палец», когда пациенты жалуются на тянущие боли в кисти, настолько активно мы можем пользоваться смартфонами. При дизайне мобильных версий чего-либо важно уделять большое внимание стилю использования устройства, и учитывать это при проработке UX\UI. Расположение блоков должно быть логичным и интуитивно понятным пользователю.
Также важно уделять внимание размерам экранов ваших пользователей. Сайт должен адаптироваться под большинство популярных размеров экранов смартфонов. Картинки, если они одинаковы и в мобильной и в десктопной версии, могут отличаться своими размерами, ориентацией, шириной, в зависимости от ширины экрана устройства, но при этом все равно отражать суть. Кнопки должны быть такими, чтобы палец человека мог «попасть» конкретно по ней, а не соседней, и без каких-либо проблем. Рекомендуемые размеры находятся в промежутке между 42 и 72 пикселями.
2. Минимум текста
Не у всех пользователей размер экрана их смартфона настолько велик, что он может отображать большое количество текста. И чтобы данный текст был легко читаем. Сокращайте по максимуму всю информацию.
Также, небольшой размер экрана не позволит вставить на одну страницу множество активных кнопок. Здесь мы имеем ввиду разделы меню. Поэтому необходимо продумать навигацию так, чтобы пользователь не терялся в обилии вариантов, ему было понятно, куда он зайдет при клике на определенную кнопку, и что он там увидит. Огромный раздел меню точно здесь не нужен. Делайте подразделы. Но не увлекайтесь.
Также, вспомните, в каком виде вам обычно показана иконка меню. Это три полоски в верхнем углу сайта. Пользователи уже привыкли к ним. И к данному месторасположению.
3. Размер сайта
Красивая анимация, разнообразие шрифтов, цветов, фотографий, видео. Все это имеет свой вес. А мобильный интернет не везде может такое быстро загрузить. Пять секунд ожидания загрузки одной страницы, и пользователь уже не хочет ждать. И отказывается от посещения сайта. Поэтому в мобайле лучше быть минималистом. И четко знать, для чего предназначена каждая страница и к чему она должна привести пользователя по итогу. Ну и помните о глубине страниц. Скролить далеко вниз будет не каждый.
4. Ввод данных
У вашего сайта может быть множество целей: собрать контакты, проинформировать, привести к покупке. Наверняка на пути пользователя будет форма для заполнения. Хотя бы его телефона для связи. Так как для нас важно, чтобы клиент заполнял эти поля, то также важно, чтобы процесс заполнения был удобен клиенту. Отображались нужные на данный момент формы. Они были удобны по размерам, чтобы можно было кликнуть на нужную. Поле ввода просматривалось при введении данных и не пропадало под клавиатурой, чтобы пользователь мог перечитать то, что ввел.
Также полезными могут быть: настройка автозаполнения, интеграция с профилем Apple, Google, Facebook, Yandex, с платежными системами, – все это упростит процесс ввода данных пользователем, не будет раздражать, и, соответственно, снижать желание заполнить форму до конца. И сделать то действие, к которому ваш сайт и вел. Если же такую систему ввести невозможно, то сделайте так, чтобы пользователь мог сохранить введенные данные и при следующих заполнениях формы мог сразу использовать сохраненный шаблон.
Нужно цифровое решение для бизнеса? Свяжитесь с нами!
