Правите всичко възможно, за да създадете уебсайт, който ще доведе посетителите до реализация. Когато преглеждате анализите си, с вълнение виждате, че създаденото от вас потребителско пътешествие се следва от посетителите ви отново и отново. Има обаче нещо, което им пречи да извършат реализация.
Формулярът за контакт е жизненоважна част от пътуването на вашите посетители. Дори и да имате почти всичко, което един уебсайт може да предложи, формулярът за контакт може да съсипе потребителското изживяване, ако не се използва правилно. „Неработещи“ бутони, объркващи полета, твърде много стъпки, неорганизиран интерфейс... дори разположението на формуляра за контакт може да наруши потребителското изживяване.
Има много неща, които могат да се объркат.
5 правила за изграждане на перфектната форма за контакт
Проучване на Google за проследяване на погледа, публикувано през 2014 г., показа, че следването на най-основните насоки за използваемост при дизайна на формуляри значително ще подобри потребителското изживяване. По-конкретно, когато даден формуляр за контакт следва всички правила, 78% от потребителите могат да го попълнят и изпратят с един опит. Когато даден формуляр за контакт нарушава тези правила обаче, само 42% успяват да го попълнят с един опит.
Любопитни ли сте какви са тези правила? Така че продължавайте да четете.
Правило # 1: Фокусирайте се върху подравняването
Както ще видите в други правила тук, хората често са загрижени за дължината на формулярите за контакт, което често води до лоши дизайнерски решения. Вземете например въпроса за подравняването.
Може да видите формуляр като този на уебсайта на BrainTraffic и да помислите: Хммм ... но това не е ли твърде дълго за попълване?
Един от начините да помислите за решаването на този „проблем“ е да преместите етикетите вляво и да поставите полетата за отговор вдясно. Експертите на UX обаче ще ви кажат, че това е основно не-не, тъй като компрометира способността за сканиране на формуляра. Същото важи и ако сте мислили да поставите полетата едно до друго хоризонтално.
Ако искате вашите формуляри за контакт да отговарят на стандарта за подравняване, ето какво трябва да направите:
- Изравнете вляво всички етикети, полетата на формуляра и основния бутон с подканваща фраза.
- Никога не подравнявайте свързаните полета хоризонтално. Можете да структурирате формуляра логически, но всеки въпрос или поле трябва да бъдат подредени вертикално.
- Всяко поле с въпроси с множество възможности за избор (с по-малко от шест опции) трябва да се показва във вертикален списък от точки или квадратчета, а не в падащо меню.
Правило 2: Включете всички подходящи полета
Що се отнася до проектирането на формуляри за контакт, може би си мислите, че колкото по-кратък е, толкова по-добре, нали? Не винаги е така. Най-важното е, че предоставяте на потребителите всички необходими и подходящи полета.
Майкъл Аагаард, старши оптимизатор на преобразуване за Unbounce, го направи презентация през 2015 г., който разгледа този въпрос. Той и екипът му искаха да знаят какво ще се случи, ако съкратят тази форма за контакт:
Както можете да видите, те премахнаха полетата, които смятаха за ненужни, за да рационализират процеса на попълване на формуляра. След приключване на теста обаче те откриха 14% спад в конверсиите с по-късата форма.
Правило № 3: Опростяване на полета
Няма значение дали вашите потребители взаимодействат с вашата форма за контакт с помощта на настолен компютър или мобилно устройство, или ако се нуждаят от помощни технологии, за да им помогнат, формулярът трябва да бъде оборудван. за опростяване на процеса на влизане.
Ето някои техники, които трябва да знаете:
таблица
За потребителите на настолни компютри и тези с проблеми с достъпността, уверете се, че във вашия формуляр за контакт е активирано подреждането на логически раздели.
Входни маски
Вместо да принуждавате потребителите да предполагат как искате да бъдат форматирани определени полета, можете да ги добавите с входни маски, които автоматично ги форматират.
Google Автодовършване
Вместо да кодира всяко поле, така че да е формиат автоматично в съответствие със стандартите, които трябва да се спазват, активирайте автоматично попълване с помощта на приставката за автоматично попълване на Google Адреси. Това не само ще ви спести от необходимостта да се справяте с правописни грешки и неправилно попълнени адреси, но и ще спести посетителите ви от въвеждане на по-голямата част от тази информация.
Правило № 4: Излезте от всички
Въпреки че осъзнавам, че това правило ще противоречи на основите на минимализма, това е правило, на което трябва да обръщате голямо внимание, за да избегнете ненужното разочарование на посетителите си.
Позволете ми да обясня: Имате форма за контакт, която изглежда доста ясна. Потребителите ви го попълват въз основа на това, което предлагат етикетите, и те щракват върху бутона за изпращане. Тогава те получават това ужасно червено съобщение: „Не си го направил правилно! Върнете се, коригирайте формуляра и го изпратете обратно! "
Вероятно сте се сблъсквали с него като потребител и знаете колко разочароващо може да бъде, особено ако част от въведената от вас информация се изтрие при появата на грешката. Така че, вместо да оставяте потребителите да гадаят какво и как трябва да се поправи, не позволявайте да стигнете до този момент. Напишете всичко по пътя:
- Осигурете фокус в областта (особено на мобилните устройства), така че потребителите да знаят къде точно попълват формуляр.
- Запишете всички изисквания за форматиране, ако не използвате маски за въвеждане за автоматично форматиране на полетата.
- Изрично посочете кога полето е "По избор" (използвайте думата, а не червената звездичка).
- Дайте на потребителите възможност да показват или скриват полето за парола, докато го въвеждат.
- Показвайте съобщение за грешка веднага щом потребителят се е включил в дадено поле. Не чакайте до края, за да го направите.
Правило № 5: Не крийте съвети
Текстът на дъската във формуляр за контакт изглежда така:
Вижте как Target поставя етикетите в полето? В някои форми за контакт тези етикети / индикации просто изчезват, когато потребителят щракне върху поле. Целта се справя с това малко по-различно и премества етикета в горната част на полето (вижте "имейл адрес").
Независимо как се справя това, експертите по използваемост харесват групата Нилсен Норман, ще ви каже, че това е лоша дизайнерска практика, защото:
- Това е проблематично за многозадачни, разсеяни или твърде забързани потребители в следващото поле. Когато следата изчезне, потребителите трябва да напуснат полето, за да преоткрият това, от което се нуждаят.
- Съветите, които изчезват, също пречат на потребителите да се върнат към формуляр, за да проверят работата си или да коригират грешка, без да изтрият напълно отговора, за да видят какво е по-долу.
- По-светлият сив текст, използван за съвети за заместители, не е идеален за лесно четене.
- Полета с текст на подсказка могат да бъдат объркани с полета, които вече са попълнили данни, оставяйки потребителите да ги игнорират, да изпратят формуляра и да получат съобщение за грешка.
- Някои инструменти за четене на екрана не могат да четат текст с намек.
Според NNG потребителите намират празните полета за по-привлекателни от тези, които съдържат текст с указания. Дори ако вашите формуляри изглеждат по-дълги, за да поставят тези етикети или дескриптори над полето, това ще подобри използваемостта.
Това е всичко за тези съвети, надявам се, че ще ви помогнат да изградите по-добри форми за контакт.
