4 Форм Десигн УКС савета која треба да знате (са примерима)

Склони смо размишљати о облицима као о једноставном начину прикупљања корисничких података, али они су такођер један од начина, понекад једини начин, за наше кориснике Повежите се са нама. Вероватно је делусионално мислити да можемо направити кориснике љубав попуњавање образаца, али је свакако могуће пронаћи рјешења која их не нервирају превише, и помоћи им у процесу.

Док претражујемо мрежу можемо наћи понекад изненађујућа рјешења која су програмски исправна, али су дизајнирана на начин који је највјеројатније многе кориснике напуштају због лошег корисничког искуства.

Ако су наши обрасци добро осмишљени, ми ћемо бити у могућности не само задовољити наше кориснике, већ и тим који се може носити са тим много мање грешака у уносу корисника. Тако ћемо у овом чланку погледати како можемо минимизира грешке при уносу корисника и још Задовољите наше кориснике.

Предвидите потребе корисника

Веб странице и апликације имају различите корисничке основе и циљеве, чак и на истој локацији могу бити смештени многи облици који прикупљају различите врсте података, само да би навели оне најчешће:

• Пријавни обрасци
• Формулари за регистрацију
• Обрасци корисничког профила
• Формулари за пријаву на билтен
• Цхецкоут формс
• Анкете корисника
• Контактни обрасци
• Облици коментара
• Сеарцх формс

Све ове врсте форми захтевају различите ствари. Приликом израде обрасца за наплату кључно је поуздано увјерити кориснике у сигурност, док је у случају форми за коментаре добра идеја додајте емојис или друге методе које омогућују корисницима да изразе своје стварно расположење.

Међутим, чак и слични типови форми можда морају бити различито дизајнирани, јер све локације имају своје јединствена корисничка база. Пре него што кренете у процес дизајнирања, увек је добра идеја предвидите шта наши корисници требају, и дизајн у складу с тим.

Пример: Друштвени логини Циљање корисничких потреба

Цодепен-ов образац за пријаву садржи три социјална логина са Гитхуб-ом на врху. Овај избор би био неразуман за већину локација.

Али савршено је за Цодепен, јер се њихова корисничка база састоји од програмера, од којих ће многи желети да се пријаве са својим Гитхуб налозима, или да повежу своје развојне рачуне једни са другима одједном.

Размислите о мобилном првом

Корисници мобилних и десктоп рачунара имају различите потребе, али као попуњавање образаца је много већи изазов на мобилном екрану, користећи ручне гестове него на физичкој тастатури, а приступ за мобилне уређаје може нас одвести даље када желимо да дизајнирамо корисне форме.

Штавише, многи обрасци корисничког интерфејса који добро функционишу на мобилном уређају ће добро функционисати и на десктопу.

Пример: Контроле са додиром

Висококвалитетне мобилне форме не могу се замислити без видљиве контроле на којем корисници мобилне телефоније могу лако да додирну прстима.

Формулар за пријаву на невслеттер конференције веб дизајна Евент Апарт прилагођава се начину на који мобилни корисници приступају екрану - он садржи два поља за унос која се лако додирују и а дугме величине прстију.

Поља за унос текста су виша као и обично, тако да мобилни корисници могу лако да их додирну, а велико, наранџасто дугме са иконом откуцаја даље охрабрује кориснике да пошаљу образац.

Десктоп верзија сајта користи исти облик обрасца, јер добро изгледа и добро ради на већим екранима.

Пример: потрошни улаз

Приликом дизајнирања образаца за мобилне уређаје, увек је важно размотрити како можемо смањили простор који користимо. Тхе потрошни улаз Узорак дизајна корисничког интерфејса постао је веома популаран у последње време, а посебно добро ради на мобилним уређајима.

Боокинг.цом користи овај образац у обрасцу за претрагу на свом мобилном сајту. Када корисник додирне поље за претрагу, он се проширује да би оставити више простора за гестове, и листа избора са препорукама се такође појављује испод ње.

Када корисник лупне из поља, он се скупља, а додатне информације нестају.

Пример: Морпхинг Буттон

Морпхинг дугмад узмите потрошни улазни корак још корак даље, јер корисници прво виде дугме, које онда претвара се у форму када га додирну.

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

Олакшајте унос преузимања

Дуге форме одвраћају кориснике. Најбоље што можемо је само тражите улаз који нам је заиста потребан. Ово није важно само из перспективе корисничког искуства, већ и корисници могу да оклевају да дају превише личних информација због приватност.

Понекад, међутим, ми још увек морају ићи уз дуже форме. У овом случају то је добра идеја исеците их у мање комаде, и служе комаде као узастопни екрани.

Многе странице е-трговине (нпр. Амазон) користе ово рјешење како би смањиле стопе напуштања кошарице.

Ако желимо да ублажимо попуњавање поља обрасца, правило је да смањити ометања и акције корисника што је више могуће.

Пример: Персонализовани Инпут Пицкер

Различити сакупљачи садржаја, као што су берачи датума или сакупљачи боја, не само да олакшавају преузимање одговарајућег уноса, већ и чине образац атрактивнија, и значајно смањите грешке корисника.

Апликација Тодоист лист-такинг даје персонализоване савете када изаберете датум када корисник лебди током дана.

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

Пример: Драг-анд-Дроп Инпут

Повуци и испусти обично добро раде са пољима за отпремање датотека, посебно тамо где корисници треба да шаљу слике.

Они вероватно не умањују корисничке акције у поређењу са обичним дугметом Уплоад а филе, али чине га много лакшим изаберите који фајл корисник жели да учита, стога смањује шансе за слање погрешне датотеке.

ВордПресс.цом пружа елегантан и интуитиван кориснички интерфејс за повлачење и испуштање у облику за уређивање постова. Тхе мале сличице анд тхе визуелни приказ већ учитаних датотека додатно помаже корисницима да брзо изврше уплоад.

Пример: Преклапање за уклањање дистракција

Ако су корисници ометени док попуњавају наш образац, они су склонији грешкама и лакше се изнервирају

Слојеви садржаја су одлична алтернатива минималистичком дизајну форме. Користе се сложенијим локацијама који желе приказати различите врсте информација на истом екрану.

На слици испод, можете видети десктоп верзију Боокинг.цом-а. Када корисници пређу на форму претраге, остатак садржаја добија прекривен сивкастим слојем да им помогне фокусирајте се на процес попуњавања формулара.

Пошаљите повратне информације корисницима

Гивинг тхе праве повратне информације у право вријеме може значајно побољшати корисничко искуство.

У облику дизајна, постоје две врсте корисничких повратних информација:

1. Феедбацк гивен пре него што подношење обрасца - да би смањити грешке и стопе напуштања форме, као што су трагачи за напредак, тренутна валидација улаза која одмах награђује кориснике за исправан унос, или помоћне описе
2. Феедбацк гивен после подношење обрасца - да би корисници могли да знају починили су грешку, као што су поруке о грешкама

Врсте повратних информација које наши корисници захтевају веома зависе од карактеристика наше циљне публике и циља нашег сајта.

Пример: Трацкер напретка

Обрасци дужи од једне странице, као што су анкете и већина образаца за наплату е-трговине, могу имати утицај на прогресс трацкер дизајн образац. Прогресс трацкери дају тренутне визуелне повратне информације корисника о њиховом статусу и охрабрити их да наставе са процесом.

Веб апликација СнапСурвеис сурвеи цреатор показује мали напредак праћења изнад тастера за слање, тако да корисници могу природно је угледати.

Он не користи ознаке, већ начин на који је дизајниран јасно поставља свој циљ - број кругова означава број корака, већ извршени кораци постају плави, а корисници могу лако да виде колико је корака још пред њима.

Пример: Валидација у реалном времену

Боди Схоп козметички трговац користи валидација у реалном времену на обрасцу корисничког профила да би се елиминисале грешке и побољшао УКС процеса попуњавања обрасца.

Улази се проверавају док корисници попуњавају образац, а прави и погрешни одговори се одмах означавају лако препознатљиве иконе мало даље десно, али још увијек у видљивом подручју.

Пример: Изражајни описи

Разумљива микрокопија је такође битан део успешних повратних информација од стране корисника у дизајну формулара. По дефиницији, микрокопија сајта се састоји од мали делови текста користи се у различитим елементима - етикете, дугмад, поруке о грешкама, описи алатки итд.

У свом обрасцу за пријаву, Барцлаи-ова банкарска група одговара на питања која потенцијално могу поставити корисници уз помоћ добро дизајниране описе које укључују лако разумљива микроскопија.

Описи алата су скривени иза мало? ицонс да не омета кориснике који знају како да попуне формулар за пријаву, али да буде увек присутан за кориснике који нису сигурни.

Неки од описа алата садрже чак и мало визуелне ознаке дебитне картице тако да корисници могу лако пронаћи податке које морају да унесу у образац за пријаву.