Формулярите за контакт са ключов компонент на много уебсайтове. Въпреки че те обикновено са ясни, трябва да се уверите, че те са лесни за използване, ако искате да събирате възможни клиенти и да поддържате връзка с потребителите си. Това обикновено не е проблем с офис трафика, но използването на формуляри може да бъде трудно, ако използвате мобилно устройство.
В този урок ще поговорим малко за важността на проектирането на удобни за мобилни устройства форми. След това ще ви преведем през пет съвета, за да сте сигурни, че вашите формуляри работят безпроблемно на мобилни устройства.
Хайде да работим!
Защо е важно Вашите формуляри да бъдат удобни за мобилни устройства
Формулярите се предлагат във всякакви форми и размери. Най-често ще имате работа с формуляри за контакт:
Формите за регистрация (абонамент) също са много популярни, защото ви позволяват да събирате имейли и да ги насочвате по време на кампании:
Формулярите обаче могат да се използват за всякакви други цели. Например можете да събирате информация с помощта на онлайн проучване или въпросник , в този случай ще ви трябват формуляри, които позволяват на потребителите да въвеждат отговори.
С други думи, формулярите са много гъвкави и почти всички сайтове използват формуляри по един или друг начин. Ето защо е от съществено значение вашите формуляри да са лесни за използване (освен ако не искате да осигурите разочароващо изживяване на посетителите си).
Използването на формуляри от настолен или преносим компютър обикновено е много лесно. Имате пълна мишка и клавиатура, така че избирането на полето, което искате да използвате, и въвеждането на данни не би трябвало да представлява проблем. Все пак сърфирането в мрежата от вашия смартфон или друго компактно устройство има усложнения.
Когато работите с пръсти на малък екран, взаимодействието с формуляри понякога може да бъде смазващо поради лоши дизайнерски решения. Това е нещо, което трябва да избягвате в собствения си дизайн. В крайна сметка, ако мобилните потребители не могат да взаимодействат с вашите формуляри, може да загубите реализации, възможни клиенти или просто да дразните посетителите.
Също така е от решаващо значение да се разбере, че мобилният трафик сега е, ако не и по-важен, от източниците за настолни компютри. Всъщност мобилният трафик вече е надминал последния през последните години. Това означава, че проектирането на уебсайт, удобен за мобилни устройства, трябва да бъде вашата основна цел при стартиране на нов проект.
5 съвети за проектиране на лесни за използване мобилни формуляри
За щастие, проектирането на формуляри, удобни за мобилни устройства, не е толкова трудно, колкото си представяте. В повечето случаи просто трябва да имате предвид някои основни положения и да тествате добре формулярите си, преди да ги пуснете в употреба. Нека да поговорим как да го направим!
1. Изтрийте всички ненужни секции
Колкото повече полета съдържа вашият формуляр, толкова по-трудно ще бъде да се използват на мобилни устройства. Всъщност използването на формуляри на мобилни устройства е просто по-сложно. Чрез намаляване на броя полета или раздели, включени във вашите формуляри, можете да увеличите шансовете си посетителите да ги попълнят.
Ето един бърз пример за a Формуляр за връзка с някои допълнителни полета, които не са необходими на мобилни устройства:
В повечето случаи всичко, от което се нуждаете за страхотно Формуляр за връзка е име, имейл и текст на съобщението, което искате да получите. Всичко останало зависи от типа уебсайт, който използвате и дали се опитвате да събирате потенциални клиенти.
В крайна сметка, колкото по-малко полета има формулярът, толкова по-лесно ще бъде да ги използват мобилните посетители. В края на краищата, избирането на поле с помощта на сензорен екран може да бъде сложно, независимо колко добре проектирано, за да се сведе до минимум броят на хмела, който потребителите трябва да направят.
Вашата цел в този момент е да прегледате съществуващите формуляри на вашия сайт. Прегледайте всеки от техните раздели и определете дали наистина се нуждаете от допълнителни полета, различни от гореспоменатите. Ако има излишно поле, просто го изтрийте.
2. Използвайте падащи списъци, ако е възможно
Повечето от нас се чувстват удобно да пишат на мобилни устройства и да използват сензорни екрани. Въпреки това, изпращането на съобщение на приятел и попълването на a Формуляр за връзка са две много различни преживявания. С тях има голям шанс да се разочаровате, ако трябва да въвеждате много информация.
Един от начините да улесните живота на мобилния си посетител е да опростите избора, който трябва да направи по отношение на елементите на вашия сайт. За да добиете представа за какво говорим, нека да разгледаме предишния ни пример за резервация в ресторант:
За да направите резервация, вероятно ще трябва да оставите име, имейл, телефон et посочете час, както и броя на присъстващите. Има два начина да създадете поле на формуляр, за да потвърдите час за резервация:
- Конфигурирайте поле, което приема само цифрови записи.
- Създайте падащ списък, включително всички налични времена за резервация.
Както можете да си представите, последният е по-удобен за потребителите за мобилни потребители. С този подход не е необходимо да въвеждат числа и те могат просто да изберат кое им работи най-добре от опциите, които включвате.
Идеята да разгледате вашите формуляри и да видите дали те включват полета, които бихте могли да замените с падащи менюта. Това не винаги е така, тъй като не можете да използвате падащи менюта за събиране на имена или имейли, но могат да се използват други опции.
Какъвто и да е случаят им на употреба, искате да сте сигурни, че вашите падащи менюта включват опции, които са лесни за избор от мобилни устройства. С други думи, направете менюто достатъчно голямо, за да не се налага някой да кълве, за да избере правилната опция.
3. Уверете се, че бутоните за изпращане са лесни за докосване
Този съвет е съвсем прост, но все пак трябва да се спомене. Всеки формуляр, който проектирате, трябва да включва начин потребителите да потвърдят, че искат да изпратят въведените данни. В повечето случаи това означава създаване на бутон за изпращане:
Когато използвате обикновен компютър, щракването върху бутона за изпращане е най-естественото нещо в света. Въпреки това, ние сме попаднали на няколко форми на мобилни устройства, където е много по-трудно да натиснете бутон.
Ако посетителите ви не могат да изпратят информацията, която са въвели във вашите формуляри, всичките ви усилия ще бъдат пропилени. Освен това нищо не изглежда толкова непрофесионално, колкото бутон изпращам това не работи както се очаква.
За да създадете по-добри бутони за подаване за мобилни устройства, има три съвета, които да разгледате:
- Уверете се, че са достатъчно големи, за да можете лесно да докоснете мобилно устройство.
- Не поставяйте бутоните си твърде близо до други елементи, така че потребителите да не ги докосват правилно.
- Маркирайте бутоните си, например с помощта на контрастни цветове или креативна типография.
На всичкото отгоре ще искате да тествате и вашите бутони, преди сайтът ви да започне да работи. Ще разгледаме по-задълбочено как да направим това след минута. Засега нека поговорим за представянето.
4. Уверете се, че формулярите се зареждат бързо
Говорим много за ефективността на уебсайта в много от нашите статии и не защото се нуждаем от бързина. Въпросът е, че повечето хора не обичат бавните уебсайтове, което е напълно логично.
С по-бързата скорост на интернет може да е трудно да изчакате уебсайтът да се зареди твърде дълго. Освен това скоростта на мобилния интернет обикновено варира много повече от обикновените домашни връзки. Това означава, че вашият уебсайт ще трябва да бъде силно оптимизиран за мобилни устройства, ако искате да зарадвате тези потребители, тъй като не всички от тях ще имат достъп до интернет (т.е. бърз).
Този конкретен съвет може да се отнася за целия ви уебсайт, но е важен и за мобилни страници, показващи вашите формуляри. Ако тези части от вашия сайт отнемат твърде много време за зареждане, ви загубят конвертиране и възможности за връзка с посетителите.
Като цяло уебсайтът трябва да отнеме не повече от две секунди, за да се зареди. След като преминете този лимит, скоростта на отпадане има тенденция да се увеличава драстично, което е ужасна новина за вас, и като се има предвид естеството на мобилното сърфиране, най-добре е това време да бъде възможно най-ниско. .
Имайки предвид това, има много начини да подобрите цялостната ефективност на вашия сайт. Например можете да надстроите до по-добър планнастаняване, използвайте адаптивна тема, оптимизирана за скорост и компресирайте вашите изображения. Разбира се, това ще помогне на всички потребители, но ще бъде особено полезно за тези, които използват по-малки устройства.
5. Изпробвайте формулярите си, преди да ги публикувате
Като се има предвид, че формулярите са ключова част от повечето уебсайтове, има смисъл да ги тествате щателно, преди да ги публикувате. С WordPress този процес е доста ясен. Можете да продължите и да проектирате конкретни страници, за да показват вашите формуляри, и да не ги публикувате, докато не ги тествате напълно.
Разбира се, който и да е плъгин или тема, който искате да използвате, зависи от вас (стига да може да помогне за разработването на мобилни сайтове). Въпреки това, когато става въпрос за фазата на тестване, препоръчваме ви да го улесните и да използвате инструменти като OUTILS на развитието Chrome да вършат работата.
Нека да разгледаме един бърз пример. Ако използвате Chrome, продължете и визуализирайте страницата с формуляра, който искате да тествате. След това щракнете с десния бутон някъде на тази страница и изберете опцията инспектира . Chrome ще покаже набор от инструменти, които можете да използвате за преглед и редактиране на изходния код на страницата отдясно и отляво, можете да видите визуализация на външния му вид от мобилно устройство:
В горната част на екрана можете да използвате меню, за да превключвате между различни резолюции. Chrome включва настройки за няколко популярни мобилни устройства, но можете да въведете и персонализирана резолюция.
В този момент трябва да проверите външния вид и поведението на вашата форма за контакт на множество устройства. Вземете примера по-долу - формулярът работи добре, но можете да видите, че не се побира толкова добре, колкото би трябвало. Обърнете специално внимание на текста и иконите, които са твърде близо до ръба на екрана:
Един от начините да предотвратите този проблем е да улесните формулярите си, както споменахме в първия съвет. В примера по-долу формулярът използва множество падащи списъци и изисква само три полета. Това го прави лесен за използване и, което е по-важно, формата е толкова проста, че трябва да е идеална за всички устройства:
Ако имате някакви проблеми с някой от вашите формуляри, очевидно трябва да ги разрешите незабавно. В противен случай рискувате да отчудите мобилната си аудитория, което ние се опитваме първо да избегнем!
Заключение
Увереността, че вашият уебсайт е съвместим с мобилни устройства, е от ключово значение за запазване на трафика и да не разочаровате посетителите си. По-конкретно, вашите формуляри трябва да бъдат лесни за използване на мобилни устройства, ако не искате да пропуснете получаването на съобщения или събирането на ценни клиенти.
Когато става въпрос за проектиране на мобилни телефони, тук са пет съвета за опростяване на живота ви:
- Изтрийте всички ненужни секции.
- Използвайте падащи списъци, ако е възможно.
- Уверете се, че бутоните за подаване са лесни за натискане.
- Уверете се, че формулярите се зареждат бързо.
- Тествайте формулярите си, преди да ги публикувате.
