Неліктен 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 Mobile-Friendly Тесті
Беттің жалпы мобильді құрылғыларға ыңғайлылығын тексеріңіз:
- Google-дың мобильді құрылғыларға арналған тест құралына өтіңіз
- Форма бетінің URL мекенжайын енгізіңіз
- Нәтижелер мен ұсыныстарды қарап шығыңыз
Мобильді форманың жиі кездесетін мәселелері
Мәселе: Мәтін тым кішкентай
Себебі: Масштабталмаған пиксель өлшемдері түзетілді
Шешім: Салыстырмалы бірліктерді (em, rem) немесе кемінде 16 пиксель пайдаланыңыз
Мәселе: Өрістер тым тар
Себебі: Бекітілген ені бар контейнерлер
Шешім: Пайыздық ендерді пайдаланыңыз (ұялы телефонда 100%)
Мәселе: Пернетақта қақпақтарының пішіні
Себебі: Пернетақта пайда болған кезде айналдыруды реттеу жоқ
Шешім: Фокусталған өрістердің көрініске айналдырылуын қамтамасыз етіңіз
Мәселе: Кіріс фокусын үлкейту (iOS)
Себебі: Енгізілген деректерде қаріп өлшемі 16 пиксельден төмен
Шешім: Енгізілген қаріп өлшемін кемінде 16 пиксельге орнатыңыз
Мәселе: Ашылмалы мәзірлерді пайдалану қиын
Себебі: Арнайы ашылмалы тізімдер сенсорлық режимде оңтайландырылмаған
Шешім: Жергілікті таңдау элементтерін немесе сенсорлық баламаларды пайдаланыңыз
Мәселе: Жіберу түймесі экраннан тыс
Себебі: Көрінетін прогрессиясыз ұзын формалар
Шешім: Жабысқақ жіберу түймесі немесе айналдыру индикаторларын тазалау
Ұялы телефонға тән мүмкіндіктер
Қоңырау шалу үшін басу арқылы қоңырау шалуға болатын телефон сілтемелері
Растаулардағы телефон нөмірлерін түртуге болады:
- Тел: хаттамасымен сілтемелер
- Қоңырау шалу үшін бір рет түртіңіз
Орналасқан жерді анықтау
Мекенжай өрістері үшін:
- Ағымдағы орналасқан жерді пайдалану мүмкіндігі
- Қаланы/аймақты автоматты түрде толтыру
Камераны біріктіру
Файлдарды жүктеу үшін:
- Камераға тікелей қол жеткізу мүмкіндігі
- Фотосурет кітапханасына кіру мүмкіндігі
- Құжатты сканерлеу
Қимылдар түймесін түртіңіз
Жергілікті мобильді өзара әрекеттесулер:
- Форма қадамдары арасында сырғытыңыз
- Жаңарту үшін тартыңыз
- Масштабтау үшін шымшу (қажет болса)
Мобильді құрылғыдағы өнімділік
Неліктен жылдамдық ұялы телефонда маңыздырақ?
- Мобильді байланыстар көбінесе баяулайды
- Кейбір пайдаланушылар үшін деректер шектеулері
- Ұялы телефонда шыдамдылық аз
- Батареяны тұтынуды ескеру
Форма өнімділігі бойынша кеңестер
Форма салмағын азайту
- Жеңіл форма плагиндері
- Минималды CSS/JavaScript
- Оңтайландырылған активтер
Мүмкін болған кезде жалқау жүктеме
- Қажет болған жағдайда форма элементтерін жүктеңіз
- Жасырын шартты өрістерді алдын ала жүктемеңіз
Кескіндерді оңтайландыру
- Формадағы кез келген кескінді қысыңыз
- Тиісті форматтарды пайдаланыңыз (WebP)
- Бейімделгіш кескін өлшемдері
Автоматты форма құрастырушының мобильді тәсілі
Автоматты форма құрастырушысы алдымен мобильді құрылғыларға арналған:
Әдепкі бойынша жауап береді
- Барлық формалар автоматты түрде жауап береді
- Арнайы конфигурация қажет емес
- Кез келген экран өлшеміне бейімделеді
Сенсорлық оңтайландырылған өрістер
- Дұрыс өлшемді нысаналар
- Жергілікті мобильді кірістер
- Сенсорлық қолжетімді күн/уақыт таңдау құралдары
Mobile-First стилі
- Кішкентай экрандарда орналасуды стекпен орналастырыңыз
- Мобильді құрылғыдағы толық енді өрістер
- Оқылатын қаріп өлшемдері
Жеңіл өнімділік
- JavaScript-тегі минималды із
- Жылдам жүктелетін формалар
- Мобильді желілер үшін оңтайландырылған
Тексеру тізімі: Сіздің формаңыз мобильді нұсқада пайдалануға дайын ба?
формат
- ☐ Мобильді құрылғыдағы бір баған
- ☐ Көлденең айналдыру жоқ
- ☐ Толық енді өрістер
- ☐ Элементтер арасындағы жеткілікті арақашықтық
Typography
- ☐ Масштабтаусыз оқуға болатын белгілер (14 пиксельден жоғары)
- ☐ Мәтінді кемінде 16 пиксель өлшемінде енгізіңіз
- ☐ Жақсы контраст коэффициенттері
Өзара әрекеттесу
- ☐ Сенсорлық нысаналардың ең аз өлшемі 44 пиксель
- ☐ Дұрыс пернетақта түрлері
- ☐ Ашылмалы тізімнен оңай таңдау
- ☐ Түртілетін құсбелгілер/радиолар
Функционалдық
- ☐ Форма сәтті тапсырылды
- ☐ Қате туралы хабарламалар көрінеді
- ☐ Сәттілік туралы хабарлама көрсетіледі
- ☐ Файлдарды жүктеу жұмыс істейді
орындау
- ☐ 3G желісінде тез жүктеледі
- ☐ Бұғаттайтын сценарийлер жоқ
- ☐ Деректерді минималды пайдалану
Жиі Қойылатын Сұрақтар
Неліктен iOS жүйесінде өрісті басқан кезде формаларым үлкейтіледі?
iOS жүйесі кіріс қаріп өлшемі 16 пиксельден төмен болған кезде автоматты түрде масштабтайды. Мұның алдын алу үшін кіріс қаріп өлшемін кемінде 16 пиксельге орнатыңыз.
Мобильді және жұмыс үстелі формаларын бөлек жасауым керек пе?
Жоқ — бейімделгіш дизайн екеуін де басқарады. Бір жақсы жасалған бейімделгіш форма барлық құрылғыларда жұмыс істейді. Бөлек формаларды сақтау жұмысыңызды екі есеге арттырады және сәйкессіздіктер қаупін тудырады.
Маған тиесілі емес құрылғыларда қалай тестілеу керек?
Негізгі тестілеу үшін браузер әзірлеуші құралдарын пайдаланыңыз. Мұқият тестілеу үшін BrowserStack сияқты онлайн қызметтерді пайдаланыңыз немесе басқа құрылғылары бар достарыңыздан/әріптестеріңізден сұраңыз.
Мобильді пайдаланушылар шынымен де формаларды толтыра ма?
Иә! Мобильді коммерция және лидтерді генерациялау өте үлкен. Пайдаланушылар тапсырмаларды мобильді құрылғыда орындауды күтеді. Егер сіздің формаларыңыз жақсы жұмыс істесе, олар оларды пайдаланады.
Мобильді форманы жақсартудың ең маңыздысы қандай?
Тиісті сенсорлық нысана өлшемдері. Егер пайдаланушылар өрістер мен түймелерді дәл баса алмаса, басқа ештеңе маңызды емес. Барлық интерактивті элементтердің кемінде 44×44 пиксель екеніне көз жеткізіңіз.
қысқаша мазмұндама
Формаларды мобильді құрылғыларға бейімдеу:
- Қателерді түсініңіз – Трафиктің 60%-дан астамы мобильді құрылғыларда
- Жауапты дизайнды пайдаланыңыз – Сұйықтық ендері, қабаттасқан орналасу
- Сенсорлық өлшем – ең аз түрту нысаналары 44 пиксель
- Оқылымдылықты қамтамасыз етіңіз – ең аз енгізу мәтіні 16 пиксель
- Оң жақ пернетақталарды іске қосу - Дұрыс енгізу түрлерін пайдаланыңыз
- Нақты құрылғыларда сынақ – Тек симуляторларды пайдаланбаңыз
- Жауапты құралдарды таңдаңыз – Мобильді құрылғыларға арналған форма құрастырушылардан бастаңыз
қорытынды
Мобильді құрылғыларға бейімделетін формалар міндетті емес - олар өте маңызды. Веб-трафиктің көп бөлігі мобильді құрылғылардан келетіндіктен, телефондарда жұмыс істемейтін формалар сізге күн сайын лидтерге, тұтынушыларға және беделге шығын әкеледі.
Автоматты форма құрастырушысы мобильді құрылғыларға бейімделетін формаларды автоматты түрде жасайды. Әрбір форма экран өлшеміне бейімделеді, сенсорлық элементтерді пайдаланады және мобильді желілерде жақсы жұмыс істейді. Конфигурация қажет емес — тек формаңызды құрыңыз, сонда ол барлық жерде жұмыс істейді.
Мобильді құрылғыларға ыңғайлы формаларға дайынсыз ба? Автоматты форма құрастырушысын жүктеп алыңыз және мобильді келушілеріңізге лайықты тәжірибе беріңіз.
