info@bef5.com
Introducció
Cap de les 60 directrius no és invenció meva. La meva tasca ha estat únicament de recopilació i síntexis.
Potser hauria d’haver justificat la raó de ser de cada directriu, ja que abunden els que creuen saber el que necessita l’usuari, independentment del que diguin els estudis d’usabilitat, els test d’usuari o els experts en usabilitat.
La usabilitat no consisteix que tu i jo elucubrem prenent un cafè sobre el que li resultarà més usable a l’usuari. La usabilitat és una disciplina seriosa.
Sigui com sigui, com d’altres abans que jo han explicat molt bé el perquè d’aquestes directrius, encara que sigui en diferents articles o estudis, me’ls remeto directament: fonts de l’article.
Generals
1. Demani només la informació absolutament necessària.
2. Infereixi informació a partir d’una altra de disponible.
Per exemple, la província es pot inferir del C.P.
3. Reutilitzi els camps quan sigui possible.
Per exemple, l’email pot servir-nos en ocasions com a nom d’usuari.
4. No demani la informació dues vegades.
Per exemple, si l’usuari ha omplert la direcció de facturació, no li obligui a tornar a omplir la direcció de tramesa si no és necessari, li pregunti si vol que sigui la mateixa.
Texts
5. Proporcioni un títol al formulari que expressi clarament la seva funció.
6. Si necessita instruccions, que siguin breus i comprensibles.
7. Utilitzi una nomenclatura clara i familiar, sense tecnicismes ni estrangerismes.
8. Sigui consistent en l’ús dels termes.
És a dir, usi sempre les mateixes paraules per als mateixos conceptes.
9. No utilitzi preguntes complexes ni faci pensar l’usuari.
10. Redacti sempre les opcions de forma afirmativa.
Per exemple, al costat d’un check escrigui “Desig rebre el butlletí” en comptes de “No desig rebre el butlletí”.
Organització
11. Organitzi els camps en una sola columna de dades.
Sense entrar en les raons d’accessibilitat que el justifiquen (veure “75 Directrius d’accessibilitat de Jakob Nielsen”) em costa moltes discussions fer comprendre que, amuntegant-se les dades en la mateixa línia o col·locant-los a diverses columnes, es perd tant a nivell d’usabilitat que no val la pena l’espai vertical que es guanya.
Com sempre, hi ha molts contexts d’ús i excepcions justificables, com els formularis que s’omplen de forma repetitiva i constant, però l’excepció mai no pot convertir-se en norma.
Una sola columna funciona millor. Els formularis amb dues columnes tenen més probabilitats que els usuaris passin per alt alguns camps, ja que creguin un ordre ambigu de lectura. Els seus ulls es mouran cap a on espera trobar el pròxim camp, que serà habitualment cap a baix, en vertical. No esperen que se’ls indiqui mitjançant el parpelleig del cursor on mirar.
12. Organitzi els camps en grups lògics, utilitzant per a això la mínima quantitat d’elements visuals (evitant així soroll visual).
13. Agrupi, si és possible, els camps obligatoris al començament del formulari.
14. Eviti fragmentar la petició d’informació.
Per exemple, no demani separadament el tipus de via, el carrer, el número, etc. si no és estrictament necessari.
15. Proporcioni un disseny ordenat, alineant verticalment totes les etiquetes i tots els camps entre si.
Tots els camps han d’estar verticalment alineats entre si a l’esquerra.
Com alinear les etiquetes entre si: a la dreta, a l’esquerra o les col·loquem a sobre del camp?
“Consells per al disseny de formularis”: resum en espanyol de les conclusions de Luke Wroblewski
16. Situï les respostes dels camps radi buttons i check box després dels mateixos.
D’aquesta manera s’afavoreix l’alineació vertical de tots els controls.
17. Utilitzi etiquetes estàndard per agrupar camps i fer més manejable la informació (OPTGROUP, FIELDSET)
18. Si s’utilitzen ràdio buttons o checks box agrupi visualment de forma clara i unívoca els diferents grups d’opcions.
19. Distingeixi visualment els camps deshabilitats seguint les normes de facto (posant-los en gris clar)
Tipus de camps
20. La mida visible dels camps de text s’ha de correspondre amb la longitud del contingut que ha d’introduir l’usuari.
21. Homogeneice els amples dels camps de text quan aquests siguin similars (evitant així soroll visual).
22. Dot als camps de text de flexibilitat perquè admetin les dades en qualsevol format.
Per exemple, un camp per introduir el número telèfon hauria d’admetre parèntesi, guions, espais; un camp per introduir imports hauria d’admetre decimals amb punt o amb coma, etc.
23. Eviti l’ús de combos.
No les usi per exemple per seleccionar el país, data o professió tret que sigui estrictament necessari, en el cas del qual n’inclogui una opció del tipus “altres” que pugui englobar casos no recollits en les opcions proporcionades.
24. Eviti que les combos recarreguin la pàgina per omplir altres camps, però quan així sigui, s’asseguri que el formulari conserva el mateix estat que tenia abans de recarregar la pàgina: amb els mateixos camps visibles o actius, i amb tots els camps farcits amb les mateixes dades que abans de la recàrrega.
25. Si s’utilitzen combos o radi buttons seleccioni sempre una opció per defecte, assegurant-se que sigui la més probable.
Altrament, l’usuari no pot tornar a l’estat inicial del formulari; si és necessari inclogui una opció “Cap”.
26. Si s’utilitza un check box per presentar una única opció que no és obligatòria (rebre publicitat, acceptar unes clàusules) no la marqui per defecte.
27. Si s’utilitzen ràdio buttons s’asseguri que totes les opcions són clarament excloents.
28. Si un radi button té més de dues respostes, les col·loqui en vertical, unes sota d’altres alineades a l’esquerra.
Funcionament
29. Valori la possibilitat d’evitar, mitjançant JavaScript, que en determinats camps es pugui introduir determinats caràcters.
Per exemple, que en el camp DNI només es puguin introduir números i lletres, fent que la resta de caràcters no es puguin teclejar en el camp.
[A mi, personalment, no m’agrada aquesta pràctica]
30. No implementi salts automàtics del focus del formulari.
Per exemple, en els camps de compte, no faci que el focus es mogui només al següent camp quan s’ha omplert l’anterior.
Un error típic és introduir el salt automàtic entre camps de text consecutius i fer innecessari l’ús del tabulador.
Encara que aquest comportament pot semblar que facilita la tasca d’introducció de dades, no és adequat perquè treu control als usuaris, no és un funcionament estàndard i és necessari mirar la pantalla per saber que camp s’està.
Tot això pot provocar fàcilment errors, com per exemple, introduir dades pertanyents a un camp en el següent quan no s’introdueix el format esperat pel salt automàtic.
31. Asseguri’s que la tecla “Intro” realitza l’acció principal.
32. Eviti, mitjançant JavaScript, que l’usuari pugui impacientar-se i enviar dues vegades el formulari.
33. En implementar la validació dels formularis (o en limitar la mida dels camps) pensi si el seu formulari pot ser utilitzat per usuaris d’altres països.
Per exemple, el C.P. o el telèfon no tenen la mateixa longitud en uns països que en d’altres; per exemple, a Espanya hi ha usuaris que no tenen DNI sinó targeta de residència.
Ajuts
34. Identifiqui clarament els camps obligatoris i els opcionals mitjançant el literal (Obligatori) o (Opcional), segons si es marcaran els obligatoris o els opcionals, col·locant l’esmentat literal darrere de l’etiqueta del camp i per tant abans del camp.
Per saber si marcar els obligatoris o els opcionals seguir les directrius de Luke Wroblewski:
Per saber per què posar el text (Obligatori) o (Opcional) després del literal i no després del camp, o per què s’ha d’indicar mitjançant un text i no mitjançant un asterisc, llegir “75 Directrius d’accessibilitat de Jakob Nielsen”
35. Incloure ajuts breus o exemples al costat dels camps, però només quan sigui realment necessari per saber com ingressar una dada.
S’asseguri que en llegir en línia aquests ajuts o exemples es llegeixin abans que el camp, per això, un bon lloc per col·locar-les és a sobre del camp. Per comprendre per què col·locar-les en aquesta posició llegir: “75 Directrius d’accessibilitat de Jakob Nielsen”
Botons
36. No inclogui un botó “Reset” (és a dir, de Netejar o Borrar el formulari)
37. Als formularis d’un només pas eviti tenir un botó “Cancel·lar” la funció del qual sigui en realitat tornar a la pàgina anterior.
38. Distingeixi entre les accions primàries i secundàries (tornar, imprimir etc.) del seu formulari.
Eviti les secundàries, però si ha d’incloure-les distingeixi-les visualment de forma inequívoca, destacant visualment les primàries.
Per exemple, posant les accions primàries com botons i les secundàries com enllaços.
39. Col·loqui els botons o enllaços que realitzen les accions primàries (per exemple el botó “Enviar”) el més a prop possible de l’últim camp del formulari. No els vaig separar del formulari mitjançant, per exemple, una línia.
40. Doni un nom adequat als botons del formulari, relacionat amb la seva acció i no de caràcter general.
Per exemple, usi “Buscar” en comptes d’un genèric “Acceptar”.
Errors
41. Quan es produeixi un error en omplir el formulari proporcioni en la part superior del mateix, i amb suficient contrast, un llistat dels errors. Per cada error indiqui quin camp ho ha provocat, per quin motiu, com solucionar-lo i un enllaç al camp.
42. Vaig destacar els camps que han donat error però no es basi per a això únicament en el color.
Acompáñelos d’una icona d’error que aparegui també en el resum del començament de la pàgina.
Repeteixi el missatge d’error al costat del camp per no haver de tornar a la llista inicial per saber quin error el va provocar. Veure un exemple de com mostrar els errors d’un formulari.
43. Quan es produeixi un error, el formulari no deu resetearse, és a dir, els camps no erronis han de continuar mantenint la informació en ells introduïda.
44. Redactar clarament els texts d’error mitjançant termes clars, senzills i no tècnics.
No utilitzar missatges genèrics del tipus “No s’ha pogut enviar el formulari”.
45. Eviti validar els camps un a un, quan perden el focus, mostrant immediatament un missatge d’error a l’usuari. Als usuaris els incomoda aquesta pràctica.
Feedback
46. Quan l’usuari enviï el formulari, informi’l del resultat de la seva acció: indiqui-li si s’ha realitzat correctament, quines dades s’han enviat, com pot posar-se en contacte amb els responsables del lloc si hi ha hagut problemes o per fer un seguiment del mateix, o com pot modificar les dades enviades.
47. Si el procés de tramesa és lent, inclogui a la pàgina un missatge d’”enviant dades”.
Resposta
48. Informi els usuaris de per què han d’omplir el formulari i quan i a través de que mig rebran una resposta.
49. Si és un formulari de contacte enviï un email automàtic confirmat que s’ha rebut.
50. Si és un formulari de contacte, asseguri’s que l’empresa tingui els mecanismes necessaris per respondre de forma ràpida i adequada al mateix.
Legalitat
51. Inclogui les clàusules de protecció de dades quan sigui pertinent.
Accessibilitat
52. Associï explícitament les etiquetes amb els seus controls mitjançant LABEL i el seu atribut “for”.
53. Comprovi que el tabulador permet accedir a tots els camps en el mateix ordre que el visual.
54. Millori l’experiència de l’usuari mitjançant JavaScript i AJAX però asseguris que el formulari funcioni correctament sense ells.
55. No estableixi un límit de temps ajustat per complementar el formulari.
Formularis extensos
56. Si els formularis són molt extensos la solució no són les columnes, sinó la divisió en pàgines ben retolades que indiquin a l’usuari en qui passo està del procés (per exemple Pas 3 de 4).
57. Si el formulari es presenta a diverses pàgines cal seguir el lema 1 tema =1 pàgina.
58. L’usuari ha de poder tornar als passos anteriors.
59. No sol·liciti informació externa al mig del procés mitjançant l’obertura d’una finestra nova del navegador.
60. Eviti la utilització de pestanyes per crear formularis de diverses pàgines.