Content
- 1. No marqueu els camps obligatoris
- 2. No utilitzeu filadors
- 3. Tingueu només un tipus de botó o millor, només un botó per formulari
- 4. Camps de trossos
- 5. Penseu per què pregunteu alguna cosa i com se sent a l'usuari
- 6. Les dates són uns nois esqueixats
- 7. Els formularis com a embarcació per a desenvolupadors
- 8. No utilitzeu columnes als formularis
- 9. No utilitzeu dos camps quan un ho faci
- 10. Sigues amable
Forms, no hi ha res que molts dissenyadors odien més que les formes. No necessàriament aporten creativitat, oi? Potser és hora que tornem a examinar els formularis i entenguem que un formulari, com a molt bàsic, és una conversa entre l’usuari i el programari.
Oblideu d’assenyalar i fer clic, els formularis representen la interacció més rica que afrontarem com a dissenyadors digitals. La propera vegada que us aparegui un formulari, no penseu que només és qüestió d’aplicar alguns efectes CSS o afegir un bon flor de jQuery. Hi ha molta més profunditat en el disseny de formularis.
Els usuaris han provat centenars de formularis i he dissenyat formularis complexos per a companyies d'assegurances, interaccions de reserves de vacances i molts més. És probable que hàgiu utilitzat un dels meus formularis en els darrers mesos.
Aquí teniu les lliçons que desitjaria haver après abans de començar a dissenyar formularis.
1. No marqueu els camps obligatoris
Coneixeu el petit asterisc que indica un camp obligatori? He vist que fallaven moltes vegades en les proves d’usuaris. Com a concepte, els camps obligatoris no tenen gaire sentit, ja que no tenen cap equivalent fora de línia. Són excel·lents per als desenvolupadors perquè ofereixen un bon enfocament en blanc i negre fins a la finalització. L'asterisc i el camp obligatori falla perquè es tracta d'un comportament apresa. El comportament típic que he vist a les proves d’usuari és que l’usuari emplena el formulari a la part superior i finalitza quan hi ha alguna cosa que els atura o bé prem un botó.
La solució és senzilla, marqueu els camps opcionals, marqueu el lloc on s’ha d’aturar el nostre bon usuari i penseu si ha de completar-lo.
2. No utilitzeu filadors
HTML5 és genial, oi? Ofereix un munt de noves eines brillants i emocionants per jugar. Hem de pensar en la idoneïtat de les nostres joguines noves. Ara, el camp numèric inclou petites fletxes amunt i avall per permetre a l'usuari circular per números.
Aquí hi ha dos problemes. En primer lloc, la visualització per defecte del navegador de les fletxes les fa molt petites. Molt complicat de fer clic i el greix dit entre nosaltres lluitarà en un iPhone. Es diu Fitt’s Law, com més petita és més difícil fer-hi clic.
Però t’escolto cridar, només pots escriure el número directament al camp numèric. Sí, podeu, però vegem la visualització del navegador, les fletxes giratòries amunt / avall s’assemblen al quadre de selecció del nostre amic de confiança. Un usuari que tingui un filador per primera vegada assumirà, ja que s’assembla a un quadre de selecció, que no hi pot escriure.
El meu consell és mantenir-se clar fins que esdevinguin un lloc més comú o que els desenvolupadors de navegadors ordenin el disseny predeterminat.
3. Tingueu només un tipus de botó o millor, només un botó per formulari
Hi ha un principi de psicologia poc conegut anomenat Hick’s Law. La llei de Hick diu que com més opcions se’ns ofereixen, més difícil és triar. Jo no sé ciència dels coets, però sí que cal tenir en compte una norma.
Podeu ajudar el vostre bon usuari ajudant-lo a triar. Si feu que tots els botons primaris siguin d’un color i que només en tingueu un per pàgina, sigui més fàcil triar. Quin és el botó que hauria de prémer? Oh, és fàcil, és el gran color.
4. Camps de trossos
Vaig estudiar neurociències en una vida anterior i, per tant, vaig estudiar la psicologia de la memòria, concretament la memòria a curt termini o de treball. Ara abans de dir-ho; no, la capacitat de memòria a curt termini no és de 7 +/- 2, 4 +/- 1 o en humans parlem de tres a cinc trossos. Nosaltres, com a humans, som excel·lents en l’avaluació d’estímuls visuals, la limitació és que som millors quan el nombre és menor. Unir un formulari en grups més petits fa que l’avaluació sigui més fàcil, ja que sovint allò que l’usuari ha d’introduir al formulari prové de la seva memòria.
Assegureu-vos que els grups de camps tinguin una longitud aproximada de quatre.
5. Penseu per què pregunteu alguna cosa i com se sent a l'usuari
Aquest és probablement el consell més directe que dono, però sovint és el menys utilitzat.
Prenem el següent:
Pregunteu totes les preguntes que feu. És necessari? Com se sent que se't demana això?
Amb freqüència, hi ha una necessitat empresarial de fer una pregunta i nosaltres, com a dissenyadors, podem discutir sobre la necessitat fins que siguem de color blau. La pregunta s’ha de fer. En entendre la necessitat empresarial d’aquestes dades, sovint ens podem comprometre.
Podem ajudar-nos explicant al nostre simpàtic usuari per què hem de fer aquesta pregunta. Tranquils sobre l’ús i l’ús compartit d’aquestes dades i, en general, sigueu agradables.
Prenem de nou el nostre exemple:
Encara és una pregunta dura, però espero que hàgim endolcit la píndola.
6. Les dates són uns nois esqueixats
Introduir dates pot ser un autèntic repte i hi ha algunes trampes que podeu evitar. L’únic problema més important és tractar els errors.
L’enfocament més senzill és llançar un calendari. Val a dir que les setmanes comencen un dilluns al Regne Unit i un diumenge als EUA. Si el vostre usuari no es concentra, pot seleccionar un diumenge si vol dir un dilluns.
També val la pena esmentar els formats de data internacionals. Els Estats Units situen el primer lloc al Japó, és el primer any. Per tant, una data com el 4/5/12 es podria interpretar de tres maneres.
Per això, és millor utilitzar quadres selectes.
7. Els formularis com a embarcació per a desenvolupadors
Els formularis són manuals per a desenvolupadors i dissenyadors. Comprendre quins possibles errors es poden cometre amb la introducció de dades i el disseny del codi de fons per fer-hi front és un repte.
Aquí en teniu un de senzill. Introducció d’un valor de moneda. Els possibles errors que l’usuari podria cometre són enormes. Forçar els formats de dades que han de complir els usuaris és frustrant per al vostre usuari i, siguem sincers, és una mica mandrós per part dels desenvolupadors.
Quin millor desafiament per a un desenvolupador que crear un formulari a prova de vinyetes.
8. No utilitzeu columnes als formularis
El gran problema en utilitzar columnes en formularis és el flux. Comencem un formulari a la part superior i acabem a la part inferior. En introduir columnes es pot trencar el flux del formulari.
No suposeu la pestanya dels usuaris a través dels formularis i, per tant, l'enfocament és una forma de navegar pels formularis a les columnes. És rar que ho hagi vist en proves d’usuaris. La majoria de les vegades que veiem introduïu detalls, feu clic al camp següent amb el ratolí / trackpad / dit, després introduïu detalls, etc.
9. No utilitzeu dos camps quan un ho faci
La majoria de la gent no és mecanògrafa tàctil. En les proves d’usuaris, veiem persones mirant el teclat mentre escriuen.
Quan introduïu un número de telèfon que divideix el camp del formulari, per exemple, per afegir un codi d'àrea i un número, es produeixen problemes reals. Els usuaris no veuen ni recorden que hi ha dos camps, així que introduïu el número complet al primer, pitjor si el camp està limitat a un nombre determinat de caràcters.
Utilitzeu només un camp per al número de telèfon, el mateix passa amb el número de casa / carrer: utilitzeu només un quadre d’entrada de text.
10. Sigues amable
Us sorprendrà el nombre de missatges d'error bastant grollers que hi ha.
Aquí en teniu un exemple que m’he trobat recentment.
El fet que us estiguin suggerint que introduïu de bona gana una data en el futur i després una resposta bastant divertida, bé, no és molt agradable.
Torneu a posar-vos al lloc de l'usuari, com us sentiríeu en veure aquest error? Molest? Potser pitjor encara. Ser agradable és fàcil.
He elaborat un bressol / full de trucs que es pot descarregar per ajudar-vos a dissenyar millors formularis. Inclou moltes altres formes de pràctiques recomanades per dissenyar millors formularis.
