4 Съвети за дизайн на UX, които трябва да знаете (с примери)

Склонни сме да мислим за формите като за средство за събиране на потребителски данни, но те също са един начин, понякога единствения начин, за нашите потребители Свържи се с нас. Вероятно е заблуда да мислим, че можем да направим потребители обичам попълване на формуляри, но със сигурност е възможно да намерят решения, които не ги дразнят твърде много, и им помагайте по време на процеса.

Докато разглеждаме мрежата, можем да намерим понякога изненадващи решения, които са програмно коректни, но са проектирани по начин, който е най-вероятен кара много потребители да напуснат сайта поради лошото потребителско изживяване.

Ако нашите формуляри са добре проектирани, ние ще можем не само да угодим на нашите потребители, но и на екипа, който може да се справи с тях много по-малко грешки при въвеждане от потребителя. Така в тази статия ще разгледаме как можем минимизиране на грешките при въвеждане от потребителя и все пак поддържайте нашите потребители щастливи.

Очаквайте нуждите на потребителите

Уебсайтовете и приложенията имат различни потребителски бази и цели, и дори едно и също местоположение може да бъде домакин на много форми, които събират различни видове данни, само за да назове най-често срещаните:

• Формуляри за вход
• Регистрационни формуляри
• Формуляри на потребителски профил
• Формуляри за регистрация на бюлетин
• Формуляри за проверка
• Проучвания на потребителите
• Формуляри за контакт
• Формуляри за коментари
• Формуляри за търсене

Всички тези видове форми изискват различни неща. При създаването на формуляр за плащане е изключително важно да се уверят надеждно потребителите в сигурността, докато в случая с формулярите за коментари е добра идея да добавете emojis или други методи, които позволяват на потребителите да изразят действителното си настроение.

Но дори и подобни типове форми може да се нуждаят от различно проектиране, тъй като всички сайтове имат своите уникална потребителска база. Преди да се заемете с процеса на проектиране, винаги е добра идея очаквайте това, от което се нуждаят нашите потребители, и проектирайте съответно.

Пример: Социални логари, насочени към нуждите на потребителите

Формулярът за влизане в Codepen съдържа три социални входа с Github на върха. Този избор би бил неразумен за повечето сайтове.

Но Той е идеален за Codepen, тъй като тяхната потребителска база се състои от разработчици, много от които ще искат да влязат с профилите си в Github, или да свържат сметките си за развитие едно с друго наведнъж.

Мисли първо за мобилния

Мобилните и настолните потребители имат различни нужди, но като попълването на формуляри е много по-голямо предизвикателство на мобилния екран, използвайки жестове с ръце, отколкото на физическа клавиатура, a мобилен подход може да ни отведе, когато искаме да проектираме използваеми форми.

Освен това, много форми на потребителския интерфейс, които работят добре на мобилния, ще работят добре и на десктопа.

Пример: контролируеми контроли

Висококачествените мобилни форми не могат да бъдат представени без видими контроли на която мобилните потребители могат лесно да докоснат с пръсти.

Формата за регистрация на бюлетина на конференцията за уеб дизайн Събитие за събития се адаптира към начина, по който мобилните потребители имат достъп до екрана - той съдържа две лесни за четене полета за въвеждане и a бутон с размер на пръста.

Полетата за въвеждане на текст са по-високи, както обикновено, за да могат мобилните потребители лесно да ги докосват, а големият оранжев бутон с икона за отметка допълнително насърчава потребителите да изпратят формуляра.

Десктоп версията на сайта използва същия дизайн на формата, тъй като тя също изглежда добре и работи добре на по-големи екрани.

Пример: Изходен вход

Когато проектирате формуляри за мобилни устройства, винаги е важно да обмислите как можем минимизираме пространството, което използваме. Най- консумативи Шаблонът за дизайна на потребителския интерфейс е доста популярен напоследък и работи особено добре на мобилни устройства.

Booking.com използва този модел в формуляра за търсене на мобилния си сайт. Когато потребителят докосне в полето за търсене, той се разширява, за да оставете повече пространство за жестове, и под него се появява списък с избрани препоръки.

Когато потребителят излезе от полето, той се свива и допълнителната информация изчезва.

Пример: Morphing Button

Бутони за морфинг вземете допълнителния входен модел още една стъпка, тъй като потребителите първо виждат бутон, който след това преобразува се във форма когато го докоснат.

Снимката по-долу е от брилянтната статия на Startup за иновативен дизайн на форми, която представя и много други творчески решения.

Улесняване на въвеждането

Дългите форми обикновено възпират потребителите. Най-доброто, което можем да направим, е да питам само за входа, от който наистина се нуждаем. Това е важно не само от гледна точка на потребителския опит, но и потребителите могат да се поколебаят да дадат твърде много лична информация поверителност.

Понякога обаче ние все още трябва да върви с по-дълги форми. В този случай е добра идея нарежете ги на по-малки парчета, и обслужват парчетата като последователни екрани.

Много сайтове за електронна търговия (например Amazon) използват това решение, за да намалят процента на изоставяне в кошницата.

Ако искаме да облекчим попълването на полетата за формуляри, правилото е да намаляване на разсейването и действията на потребителите колкото се може повече.

Пример: Персонализиран избор на въвеждане

Различните събирачи на съдържание, като берачи на дата или цветни устройства, не само улесняват правилното въвеждане, но и правят формата по-атрактивен, и значително намаляване на потребителските грешки.

Приложението за вземане на списък на Todoist дава персонализирани съвети в рамките на избора на дата, когато потребителят се движи в дните.

Например на екрана по-долу потребителят може да види, че за 31 август тя вече има 2 дължими задачи и може да вземе под внимание тази информация, когато определя правилната дата за задачите. Това е отлична идея за приложение, където производителността е основната грижа на потребителя.

Пример: Drag-and-Drop Input

Модели с плъзгане и пускане обикновено работят добре с полета за качване на файлове, особено когато потребителите трябва да качват снимки.

Вероятно те не намаляват действията на потребителите в сравнение с обикновения бутон за качване на файл, но го правят много по-лесно изберете кой файл желае да качи, следователно намалява вероятността за подаване на грешен файл.

WordPress.com предлага елегантен и интуитивен интерфейс за въвеждане на потребителски данни в формата за редактиране на публикации. Най- малки миниатюри и визуално представяне на вече качени файлове помагат на потребителите бързо да изпълнят качването.

Пример: Наслагване за премахване на разсейване

Ако потребителите се разсейват при попълването на нашия формуляр, те са по-склонни към грешки, а също така се раздразняват по-лесно

Насложени съдържания са чудесна алтернатива на минималистичния дизайн. Те се използват от по-сложни обекти които искат да показват различни видове информация на един и същ екран.

На екрана по-долу можете да видите десктоп версията на Booking.com. Когато потребителите задържат върху формата за търсене, останалата част от съдържанието получава покрити със сиво покритие да им помогнем фокусирайте се върху процеса на попълване на формуляри.

Дайте отзиви на потребителите

Даване на правилната обратна връзка в точното време може значително да подобри потребителския опит.

В дизайна на формата има два вида потребителски обратни връзки:

1. Дадена е обратна връзка преди подаване на формуляр - за да намаляване на грешките и форми на изоставяне, като проследяване на напредъка, незабавно валидиране на входа, което незабавно възнаграждава потребителите за правилния вход или помощни пояснения
2. Дадена е обратна връзка след подаване на формуляр - , за да могат потребителите да знаят те са извършили грешка, като съобщения за грешки

От обратната връзка на потребителите, от която се нуждаят нашите потребители, зависи много от характеристиките на нашата целева аудитория и целта на нашия сайт.

Пример: Проследяващ прогрес

Формулярите, които са по-дълги от една страница, като например проучвания и повечето формуляри за електронна търговия, могат да вземат ливъридж на проследяващ напредък дизайн модел. Проследяването на напредъка дава незабавна визуална обратна връзка на потребителите относно техния статус и да ги насърчи да продължат процеса.

Уеб приложението SnapSurveys проучване създател уеб показва малко напредък следа точно над бутона за подаване, така че потребителите могат естествено го забелязват.

той не използва никакви етикети, а начина, по който е проектиран поставя целта си ясно - броят на кръговете показва броя стъпки, вече изпълнените стъпки стават сини и потребителите могат лесно да видят колко стъпки са още пред тях.

Пример: валидиране в реално време

Магазинът за козметика на Body Shop използва валидиране в реално време в неговия формуляр за потребителски профил, за да елиминирате грешки и да подобрите UX на процеса на завършване на формуляра.

Входовете се проверяват, докато потребителите попълват формуляра, а правилните и грешните отговори незабавно се посочват с лесно различими икони малко по-надясно, но все пак във видимата област.

Пример: Expressive Tooltips

Разбираема микроскопия Също така е съществена част от успешната обратна връзка на потребителите при проектирането на формуляри. По дефиниция, микрокопията на уебсайт се състои от малки парчета текст използва се в различни елементи - етикети, бутони, съобщения за грешки, подсказки и др.

В своята форма за влизане, банковата група Barclay отговаря на въпросите, които потенциално могат да задават потребителите с помощта на добре проектирани подсказки които включват лесна за разбиране микрокопия.

Подсказките са скрити зад малко? икони да не разсейват потребителите които знаят как да попълнят формуляра за вход, но винаги да присъства за потребители, които не са сигурни.

Някои от подсказките дори съдържат малко визуално на анотирана дебитна карта така че потребителите могат лесно да намерят данните, които трябва да влязат във формуляра за вход.