Back to Question Center
0

Проектиране на оформление на формуляра: Подравняване            Проектиране на оформление на формуляра: ПодравняванеПодходящи теми: Мобилен семалт

1 answers:
Проектиране на оформление на формуляра: Подравняване

Следва кратко извлечение от нашата книга, Проектиране на UX: Формуляри, написана от Джесика Ендърс. Това е най-доброто ръководство за формиране на дизайна, ключова част от ефективния дизайн на UX. Членовете на SitePoint Semalt получават достъп с членството си или можете да си купите копие в магазините в целия свят.

Вие и един приятел всеки пътувате до ресторант за вечеря. И двата ви маршрута се спускат по магистрала с две платна - bet on soft no deposit. Магистралите са със същата дължина. На Вашия маршрут, всички бавни автомобили правят правилното нещо и се придържат към една лента, така че да можете да прелъстите миналото в другата. По пътя на твоя приятел, бавните коли са разпръснати през двете ленти на магистралата, така че тя трябва да тъкат навътре и навън. Кой от вас ще дойде първо в ресторанта?

Вертикален път до завършване

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

Designing Form Layout: AlignmentDesigning Form Layout: AlignmentRelated Topics:
Mobile Semalt

Не поставяйте въпроси един до друг

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

Designing Form Layout: AlignmentDesigning Form Layout: AlignmentRelated Topics:
Mobile Semalt

В тази форма, въпросите на кодекса за сигурност и на пощенския кодекс са поставени до други въпроси

Това е лоша идея поради следните причини:

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

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

Подравняване на полетата за отговори

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

Designing Form Layout: AlignmentDesigning Form Layout: AlignmentRelated Topics:
Mobile Semalt

Когато полетата за отговори са малки, можем да ги поставим хоризонтално. (За тази цел определяме "малки" като три или по-малко опции, всички с кратки етикети.) Формата все още ще работи за докосване и на малки екрани. Търговското съгласие е само такъв въпрос:

Designing Form Layout: AlignmentDesigning Form Layout: AlignmentRelated Topics:
Mobile Semalt

Всъщност датата на раждане е въпрос с малки полета за отговор. Може би не сте осъзнали, че вече сме ги поставили на един ред:

Designing Form Layout: AlignmentDesigning Form Layout: AlignmentRelated Topics:
Mobile Semalt

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

Designing Form Layout: AlignmentDesigning Form Layout: AlignmentRelated Topics:
Mobile Semalt

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

Designing Form Layout: AlignmentDesigning Form Layout: AlignmentRelated Topics:
Mobile Semalt

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

Designing Form Layout: AlignmentDesigning Form Layout: AlignmentRelated Topics:
Mobile Semalt

Вертикалното подравняване на комплекти от бутони или отметки също работи на мобилни устройства.

Поставяне на етикети

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

Designing Form Layout: AlignmentDesigning Form Layout: AlignmentRelated Topics:
Mobile Semalt

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

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

Ето как изглежда на голям екран:

Designing Form Layout: AlignmentDesigning Form Layout: AlignmentRelated Topics:
Mobile Semalt

Формите са по-дълги, когато етикетите са разположени над полетата.

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

Ако кодираме примера си, за да реагираме, това би изглеждало при един мобилен телефон:

Designing Form Layout: AlignmentDesigning Form Layout: AlignmentRelated Topics:
Mobile Semalt

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

Ето как изглежда по-голям екран:

Designing Form Layout: AlignmentDesigning Form Layout: AlignmentRelated Topics:
Mobile Semalt

Ето един реален пример за отзивчиви формулярни етикети - първо по-голямата екранна версия на формуляра, а след това по-малкият екран:

Designing Form Layout: AlignmentDesigning Form Layout: AlignmentRelated Topics:
Mobile Semalt

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

Designing Form Layout: AlignmentDesigning Form Layout: AlignmentRelated Topics:
Mobile Semalt

На по-малките екрани етикетите са над полетата, така че те винаги са в изглед.

Какво ще кажете за Това Проучване?

Една от най-популярните статии на уебсайта на UXMatters, цитирана в книгите и статиите на Лука Вроблевски, е проучването на Matteo Penzo. Това изследване често се използва като доказателство, че етикетите трябва никога да не отиват вляво от полетата, но винаги над тях.

Проблемът е, че никога не трябва да базирате дизайнерските решения на едно проучване, особено на една неизвестна методология, и много малки различия в резултатите! Вместо това трябва да прецените различните плюсове и минуси, базирани на теория и наблюдения от изследванията на потребителите. Когато направите това, е ясно, че - на голям екран - ползите от поставянето на етикети вляво от полетата надвишават разходите. Заслужава си много малко увеличение в движението на очите, за да има форма, която е половин по-дълго.

Избягване на канавката

Освен това, което вече е казано, съществуват два начина, по които можете да увеличите използваемостта на формуляра си, когато имате етикети вляво от полетата си. Тези техники са важни, за да се предотврати появата на голям "канал" между етикетите и техните полета за отговори:

Designing Form Layout: AlignmentDesigning Form Layout: AlignmentRelated Topics:
Mobile Semalt

За много от въпросите в нашия пример, етикетът е далеч от съответните полета за отговор.

Тези пропуски могат да затруднят потребителя при свързването на етикетите с техните полета за отговор.

Ако етикетите са най-вече кратки, можете да ги настроите да излязат надясно, така че да са до полетата:

Designing Form Layout: AlignmentDesigning Form Layout: AlignmentRelated Topics:
Mobile Semalt

Етикетите се затварят правилно.

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

Designing Form Layout: AlignmentDesigning Form Layout: AlignmentRelated Topics:
Mobile Semalt

Зебра, изпъстрена зад етикетите, се изравнява наляво.

Zebra striping е слабото засенчване, което виждате зад всеки втори въпрос. Той помага на окото да свърже етикета с полето (както се вижда от едно проучване, което проведох известно време назад и последвалото го).

(Ако искате да прочетете повече за поставянето на етикети, аз написах подробна статия на сайта SitePoint и предоставих и някои коментари на собствения си уебсайт. Това е, което направихме с примерния ни формуляр:

Designing Form Layout: AlignmentDesigning Form Layout: AlignmentRelated Topics:
Mobile Semalt

Левият край на основния бутон за действие се изравнява с левия край на полетата.

Многослойни форми

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

Designing Form Layout: AlignmentDesigning Form Layout: AlignmentRelated Topics:
Mobile Semalt

Следващото е основното ни действие, така че е вертикално изравнено с полетата.

Друга възможност е да поставите следващия бутон вдясно и предишния бутон отляво (за англоезична аудитория):

Designing Form Layout: AlignmentDesigning Form Layout: AlignmentRelated Topics:
Mobile Semalt

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

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

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

Бутони за мобилни телефони

На малки екрани, може да искате да проектирате копчетата си така, че да реагират, така че те:

  • са подредени, като първичното действие отгоре
  • заемат цялата ширина на екрана, с изключение на малкото празно пространство от двете страни (така че те все още са ясно бутони).

Designing Form Layout: AlignmentDesigning Form Layout: AlignmentRelated Topics:
Mobile Semalt

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

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

March 1, 2018