Чаму вашы формы WordPress павінны быць адаптаваныя для мабільных прылад
Больш за палову ўсяго вэб-трафіку паступае з мабільных прылад. Калі вашы формы дрэнна працуюць на тэлефонах і планшэтах, вы штодня губляеце заяўкі — і патэнцыйна кліентаў.
У гэтым кіраўніцтве вы даведаецеся, чаму важныя адаптаваныя для мабільных прылад формы і што робіць форму сапраўды зручнай для мабільных прылад.
Мабільная рэальнасць
Статыстыка мабільнага трафіку
- 59% + глабальны вэб-трафік мабільны
- 92% доступ карыстальнікаў Інтэрнэту праз мабільныя прылады
- 70% вэб-трафік у некаторых галінах з'яўляецца мабільным
- Выкарыстанне мабільных прылад працягвае расці з году ў год
Што гэта азначае для формаў
Калі ваш сайт наведвае 1,000 чалавек у дзень:
- ~600 карыстаюцца мабільнымі прыладамі
- Неадапазітыўныя формы раздражняюць гэтых наведвальнікаў
- Расчараваныя наведвальнікі пакідаюць формы
- Закінутыя формы = страчаныя ліды, продажы, водгукі
Што адбываецца з неадэкватнымі формамі
вопыт карыстальніка
На неадэкватнай форме мабільныя карыстальнікі сутыкаюцца з:
TinyText
- Этыкеткі занадта малыя, каб іх было чытаць
- Прыжмураныя вочы на інструкцыі
- Адсутнічае важная інфармацыя
Немагчымыя палі ўводу
- Тэкставыя палі занадта малы, каб дакладна націснуць
- Няправільны ўвод палі
- Пастаяннае павелічэнне/памяншэнне маштабу
Пашкоджаныя макеты
- Палі абрэзаны па краях экрана
- Патрабуецца гарызантальная пракрутка
- Кнопка адпраўкі схаваная або недаступная
Расчаравальныя ўзаемадзеянні
- Выпадальныя спісы цяжка выбраць
- Сцяжкі занадта малы, каб дакрануцца
- Выбар даты непрыдатны для выкарыстання
Вынік
Карыстальнікі здаюцца. Яны:
- Цалкам адмовіцца ад формы
- Пакіньце свой сайт расчараваным
- Перайдзіце да канкурэнта з лепшымі формамі
- Ніколі не вяртайся
Кошт неадэкватных формаў
Страчаныя канверсіі
Кожная закінутая форма — гэта страчаная магчымасць:
- Кантактная форма → Страчаны лід
- Запыт прапановы → Страчаны продаж
- Рэгістрацыя → Страчаны кліент
- Форма зваротнай сувязі → Страчаныя звесткі
Сапсаваная рэпутацыя
Дрэнны мабільны досвед адбіваецца на вашым брэнде:
- «Гэтая кампанія выглядае састарэлай»
- «Ім усё роўна на карыстальніцкі досвед»
- «Калі іх формы дрэнныя, што наконт іх прадукту?»
SEO ўплыў
Google аддае перавагу сайтам, аптымізаваным для мабільных прылад:
- Індэксаванне для мабільных прылад з'яўляецца стандартным
- Дрэнны мабільны досвед шкодзіць рэйтынгу
- Ніжэйшы рэйтынг = менш трафіку
Канкурэнтная перавага
Пакуль вы раздражняеце мабільных карыстальнікаў, канкурэнты з добрымі формамі:
- Захапіце патэнцыйных кліентаў, якіх вы губляеце
- Будуйце адносіны са сваімі патэнцыйнымі кліентамі
- Расціце, пакуль вы здзіўляецеся, чаму канверсіі нізкія
Што робіць форму адаптаванай для мабільных прылад
1. Шырыня вадкасці
Формы павінны адаптавацца да памеру экрана:
- Поўная шырыня на малых экранах
- Падыходная шырыня на вялікіх экранах
- Ніколі няма гарызантальнай пракруткі
2. Чытальны тэкст
Увесь тэкст чытальны без павелічэння:
- Пазнакі: мінімум 14-16 пікселяў
- Уводны тэкст: мінімум 16 пікселяў (не дазваляе маштабаваць у iOS)
- Тэкст даведкі: мінімум 12-14 пікселяў
- Дастатковы кантраст
3. Мэты, зручныя для сэнсарнага кіравання
Элементы, якія можна націскаць, памерам з пальцаў:
- Мінімальны памер аб'екта націскання: 44×44 пікселяў
- Дастатковая адлегласць паміж элементамі
- Лёгка націскаць на сцяжкі і радыё
4. Шматслаёвая макетка
На мабільным тэлефоне размяшчайце элементы вертыкальна:
- Адно поле ў радку
- Пазнакі над уваходнымі элементамі (не побач)
- Кнопкі на ўсю шырыню
5. Тыпы ўводу ў якасці роднага поля
Актывуйце адпаведныя мабільныя клавіятуры:
- Поле электроннай пошты → Клавіятура электроннай пошты (@, .com)
- Поле тэлефона → Лічбавая клавіятура
- Поле URL → Клавіятура URL
- Лікавае поле → Лікавы ўвод
6. Мабільна-адаптаваныя кампаненты
Элементы, прызначаныя для дотыку:
- Убудаваныя выбаршчыкі даты (колы пракруткі)
- Вялікія выпадальныя трыгеры
- Загрузка файлаў з дапамогай сэнсарнага кіравання
7. Бачная кнопка адпраўкі
Карыстальнікі павінны мець магчымасць знайсці і націснуць кнопку «Адправіць»:
- Поўная шырыня або бачны памер
- Высокакантрасны колер
- Добра бачна без пракруткі (калі магчыма)
Найлепшыя практыкі мабільных формаў
Рабіце формы кароткімі
Мабільныя карыстальнікі менш цярплівыя:
- Задавайце толькі важныя пытанні
- Выдаліць палі, якія не патрэбныя
- Для больш доўгіх формаў разгледзьце шматэтапны варыянт
Выкарыстоўвайце макет з адной калонкай
Шматкалонкавыя макеты не працуюць на мабільных прыладах:
- Скласці ўсе палі вертыкальна
- Прасцей сканаваць і запаўняць
- Аднастайны вопыт на ўсіх прыладах
Аптымізацыя парадку палёў
Лагічна размясціце палі:
- Спачатку самае важнае
- Звязаныя палі згрупаваны
- Лёгка дабрацца вялікімі пальцамі
Забяспечце зразумелыя пазнакі
Пазнакі павінны быць адназначнымі:
- Над полем (не лунае ўнутры)
- Заўсёды бачны (не спадзявацца толькі на запаўняльнік)
- Апісальна, але лаканічна
Уключыць аўтазапаўненне
Дазвольце браўзерам дапамагаць карыстальнікам:
- Аўтазапаўненне імя, электроннай пошты, тэлефона
- Аўтазапаўненне адраса
- Памяншае колькасць набораў тэксту на маленькіх клавіятурах
Паказаць праверку ў тэксце
Дапамажыце карыстальнікам неадкладна выправіць памылкі:
- Паведамленні пра памылкі побач з палямі
- Праверка ў рэжыме рэальнага часу, калі гэта магчыма
- Зразумелыя інструкцыі па выпраўленні
Зрабіце кнопкі відавочнымі
Кнопкі адпраўкі павінны вылучацца:
- Кантрасны колер
- Вялікая мэтавая кнопка для дотыку
- Выразны тэкст дзеяння («Адправіць», «Адправіць», «Зарэгістравацца»)
Тэставанне мабільнай адаптацыі
Інструменты распрацоўшчыка браўзэра
Хуткае тэставанне ў браўзеры настольнага кампутара:
- Адкрыйце старонку формы
- Націсніце F12 (Інструменты распрацоўшчыка)
- Націсніце на значок пераключэння прылады
- Выберыце прылады розных памераў
- Узаемадзеянне з тэставай формай
Тэставанне рэальных прылад
Нішто не параўнаецца з сапраўднымі прыладамі:
- Тэставанне на iPhone і Android
- Тэст на таблетках
- Паспрабуйце розныя памеры экрана
- Насамрэч запоўніце форму
Што праверыць
- ✓ Ці можна прачытаць усе этыкеткі без павелічэння?
- ✓ Ці лёгка націскаць на палі ўводу?
- ✓ Ці адлюстроўваецца правільная клавіятура?
- ✓ Ці лёгка выбіраць выпадальныя варыянты?
- ✓ Ці можна націскаць на сцяжкі/радыё?
- ✓ Ці бачная і даступная кнопка адпраўкі?
- ✓ Ці паспяхова адпраўлена форма?
- ✓ Ці бачныя і зразумелыя паведамленні пра памылкі?
Google для мабільных прылад Test
Праверце агульную зручнасць старонкі для мабільных прылад:
- Перайдзіце да інструмента Google для тэставання мабільнай адаптацыі
- Увядзіце URL-адрас старонкі формы
- Вынікі агляду і прапановы
Распаўсюджаныя праблемы з мабільнымі формамі
Праблема: занадта малы тэкст
прычына: Фіксаваныя памеры пікселяў не маштабуюцца
Рашэнне: Выкарыстоўвайце адносныя адзінкі вымярэння (em, rem) або мінімум 16 пікселяў
Праблема: палі занадта вузкія
прычына: Кантэйнеры фіксаванай шырыні
Рашэнне: Выкарыстоўвайце працэнтную шырыню (100% на мабільных прыладах)
Праблема: форма чахлоў клавіятуры
прычына: Няма рэгулявання пракруткі пры з'яўленні клавіятуры
Рашэнне: Пераканайцеся, што сфакусаванае поле пракручваецца ў поле зроку
Праблема: Маштаб пры ўводзе фокуса (iOS)
прычына: Памер шрыфта меншы за 16 пікселяў у поле ўводу
Рашэнне: Усталюйце памер шрыфта ўводу не менш за 16 пікселяў
Праблема: выпадальныя спісы цяжка выкарыстоўваць
прычына: Выпадальныя спісы, якія выбіраюцца карыстальнікам, не аптымізаваны для сэнсарнага экрана
Рашэнне: Выкарыстоўвайце натыўныя элементы выбару або альтэрнатывы, зручныя для сэнсарнага кіравання
Праблема: кнопка адпраўкі не паказваецца на экране
прычына: Доўгія формы без бачнага прагрэсу
Рашэнне: Заліпаючая кнопка адпраўкі або ачышчальныя індыкатары пракруткі
Асаблівасці, спецыфічныя для мабільных прылад
Спасылкі для тэлефонных званкоў з магчымасцю націснуць
Нумары тэлефонаў у пацверджаннях павінны быць даступныя для націскання:
- Спасылкі з пратаколам tel:
- Адно націсканне для званка
Вызначэнне месцазнаходжання
Для палёў адраса:
- Магчымасць выкарыстоўваць бягучае месцазнаходжанне
- Аўтазапаўненне горада/рэгіёна
Інтэграцыя камеры
Для загрузкі файлаў:
- Магчымасць прамога доступу да камеры
- Доступ да фотабібліятэкі
- Сканаванне дакументаў
Націсніце Жэсты
Узаемадзеянне з натыўнымі мабільнымі прыладамі:
- Правядзіце пальцам паміж крокамі формы
- Пацягніце, каб абнавіць
- Звядзіце пальцы, каб павялічыць (пры неабходнасці)
Прадукцыйнасць на мабільных прыладах
Чаму хуткасць мае большае значэнне на мабільных прыладах
- Мабільнае злучэнне часта павольнейшае
- Абмежаванні на трафік для некаторых карыстальнікаў
- Менш цярпення на мабільным тэлефоне
- Меркаванні аб спажыванні энергіі батарэі
Парады па прадукцыйнасці формы
Мінімізуйце вагу формы
- Лёгкія плагіны формаў
- Мінімальны CSS/JavaScript
- Аптымізаваныя актывы
Адкладзеная загрузка, калі гэта магчыма
- Загружайце элементы формы па меры неабходнасці
- Не загружайце схаваныя ўмоўныя палі загадзя
аптымізацыя малюнкаў
- Сціскаць любыя выявы ў формах
- Выкарыстоўвайце адпаведныя фарматы (WebP)
- Адаптыўныя памеры малюнкаў
Мабільны падыход Auto Form Builder
Аўтаматычны канструктар формаў распрацаваны ў першую чаргу для мабільных прылад:
Адаптыўны па змаўчанні
- Усе формы аўтаматычна адаптуюцца
- Не патрабуецца спецыяльная канфігурацыя
- Адаптуецца да любога памеру экрана
Палі, аптымізаваныя для сэнсарнага кіравання
- Патрэбнага памеру аб'екты дотыку
- Мабільныя ўводы
- Сэнсарныя выбары даты/часу
Мабільны стыль
- Макет стэка на маленькіх экранах
- Палі поўнай шырыні на мабільным тэлефоне
- Чытальныя памеры шрыфтоў
Лёгкая прадукцыйнасць
- Мінімальны аб'ём JavaScript
- Хуткая загрузка формаў
- Аптымізавана для мабільных сетак
Кантрольны спіс: ці гатовая ваша форма для мабільных прылад?
Размяшчэнне
- ☐ Адзін слупок на мабільным тэлефоне
- ☐ Без гарызантальнай пракруткі
- ☐ Палі поўнай шырыні
- ☐ Дастатковая адлегласць паміж элементамі
Кнігадрукаванне
- ☐ Пазнакі чытаюцца без павелічэння (14 пікселяў+)
- ☐ Увядзіце тэкст памерам не менш за 16 пікселяў
- ☐ Добрыя каэфіцыенты кантраснасці
Узаемадзеянне
- ☐ Сэнсарныя аб'екты мінімум 44 пікселі
- ☐ Правільныя тыпы клавіятур
- ☐ Лёгкі выпадальны выбар
- ☐ Націскальныя сцяжкі/радыё
Функцыянальнасць
- ☐ Форма паспяхова адпраўлена
- ☐ Паведамленні пра памылкі бачныя
- ☐ Паказваецца паведамленне пра поспех
- ☐ Загрузка файлаў працуе
прадукцыйнасць
- ☐ Хутка загружаецца ў сетцы 3G
- ☐ Няма блакіруючых скрыптоў
- ☐ Мінімальнае выкарыстанне дадзеных
Questions fréquemment posées
Чаму мае формы павялічваюцца ў iOS, калі я націскаю на поле?
iOS аўтаматычна маштабуе шрыфт, калі памер шрыфта ўводу меншы за 16 пікселяў. Каб пазбегнуць гэтага, усталюйце памер шрыфта ўводу не менш за 16 пікселяў.
Ці варта мне ствараць асобныя формы для мабільных прылад і настольных кампутараў?
Не — адаптыўны дызайн спраўляецца з абедзве задачамі. Адна добра распрацаваная адаптыўная форма працуе на ўсіх прыладах. Падтрыманне асобных формаў падвойвае вашу працу і рызыкуе неадпаведнасцямі.
Як мне праверыць на прыладах, якіх у мяне няма?
Выкарыстоўвайце інструменты распрацоўшчыка браўзераў для базавага тэсціравання. Для дэталёвага тэсціравання выкарыстоўвайце анлайн-сэрвісы, такія як BrowserStack, або спытайце ў сяброў/калег з рознымі прыладамі.
Ці сапраўды мабільныя карыстальнікі запаўняюць формы?
Так! Мабільная камерцыя і генерацыя лідаў маюць велізарны аб'ём. Карыстальнікі чакаюць выканання задач на мабільных прыладах. Калі вашы формы добра працуюць, яны будуць імі карыстацца.
Якое самае важнае паляпшэнне мабільнай формы?
Правільныя памеры сэнсарных элементаў. Калі карыстальнікі не могуць дакладна націскаць на палі і кнопкі, нічога іншага не мае значэння. Пераканайцеся, што памер усіх інтэрактыўных элементаў складае не менш за 44×44 пікселяў.
Рэзюмэ
Як зрабіць формы адаптаванымі для мабільных прылад:
- Зразумейце стаўкі – Больш за 60% трафіку прыпадае на мабільныя прылады
- Выкарыстоўвайце адаптыўны дызайн – Зменная шырыня, шматслаёвая кампаноўка
- Памер для сэнсарнага экрана – Мінімальная даўжыня цэляў націскання 44 пікселя
- Забяспечце чытальнасць – мінімальны ўводны тэкст 16 пікселяў
- Актывуйце правую частку клавіятуры – Выкарыстоўвайце правільныя тыпы ўводу
- Тэст на рэальных прыладах – Не выкарыстоўвайце толькі сімулятары
- Выбірайце адаптыўныя інструменты – Пачніце з канструктараў формаў, гатовых да выкарыстання на мабільных прыладах
Conclusion
Мабільныя адаптаваныя формы не з'яўляюцца абавязковымі — яны неабходныя. Паколькі большая частка вэб-трафіку паступае з мабільных прылад, формы, якія не працуюць на тэлефонах, штодня губляюць вашы ліды, кліентаў і рэпутацыю.
Аўтаматычны канструктар формаў аўтаматычна стварае адаптаваныя для мабільных прылад формы. Кожная форма адаптуецца да памеру экрана, выкарыстоўвае сэнсарныя элементы і добра працуе ў мабільных сетках. Ніякай канфігурацыі не патрабуецца — проста стварыце форму, і яна будзе працаваць усюды.
Гатовыя да мабільных формаў? Спампаваць аўтаматычны канструктар формаў і дайце сваім мабільным наведвальнікам той вопыт, якога яны заслугоўваюць.
