La guia de disseny d’interfície d’usuari definitiva

Content

• 01. Trieu la vostra tipografia
• 02. Tria la paleta adequada
• 03. Enllaços i botons d'estil
• 04. Creeu els vostres components
• 05. Documenta i col·labora

Què és el disseny de la interfície d'usuari? Una millor pregunta seria: què passa realment en el disseny d’una interfície d’usuari? Estètica? Usabilitat? Accessibilitat? Tots ells? Com s’uneixen tots aquests factors per permetre una experiència d’usuari òptima i quins haurien de ser els primers?

L’accessibilitat sempre hauria de ser la primera, establint les bases per a una usabilitat òptima (aquí us ajudareu a crear un lloc web de primer nivell) I després, quan una interfície d’usuari és accessible i útil, ja hauria de semblar bastant decent en termes d’estètica (les eines de disseny de la interfície d’usuari us ajudaran aquí). A continuació, per assegurar-vos que el vostre disseny funcioni a tots els nivells, haureu de provar-lo a fons, cosa que podeu fer amb la nostra selecció de les millors eines de prova d’usuaris. Vegem de prop els elements fonamentals de la majoria de dissenys i què es pot fer per garantir la coherència visual.

01. Trieu la vostra tipografia

Una gran tipografia (com molts aspectes del disseny) es redueix a l’accessibilitat. El disseny visual sens dubte s’afegeix a l’experiència general de l’usuari, però al cap i a la fi, els usuaris interactuen amb la interfície d’usuari i no la veuen com a art. Les lletres llegibles resulten en claredat i les paraules llegibles són les que ajuden els usuaris a digerir contingut de manera eficient. Tots dos són més importants que qualsevol estètica visual.

Tot i això, una tipografia ben dissenyada pot ser encara estèticament satisfactòria. L’Helvetica negre sobre blanc (o un tipus de lletra similar) pot ser una cosa de bellesa després d’unes poques millores tipogràfiques simples. Per millores, ens referim a ajustar la mida de la lletra, l’alçada de les línies, l’interlineat entre lletres, etc., no la font ni el color del text.

La tipografia "bonica" és en realitat lletja quan no es pot llegir perquè la frustració sempre supera l'estètica. El gran disseny és equilibrat i harmoniós.

Igual que molts aspectes del disseny de la interfície d’usuari, afinar les imatges per equilibrar l’accessibilitat i l’estètica no és el repte. El repte és mantenir la coherència durant tot el disseny. La coherència estableix una clara jerarquia entre elements de diversa importància, que al seu torn ajuda els usuaris a entendre una interfície d’usuari més ràpidament i fins i tot a digerir el contingut de manera més eficient.

Pel que fa a la llegibilitat i la llegibilitat, la mida mínima acceptable de la font definida per les Directrius d’accessibilitat al contingut web WCAG 2.0 és de 18 punts (o de 14 punts en negreta). La millor mida de la lletra que s’utilitza depèn en gran mesura de la mateixa font, però és important tenir en compte la jerarquia visual i com es distingeix aquesta mida base dels resums i dels encapçalaments h1>, h2>, h3>).

Amb l’eina de disseny d’interfície d’usuari que escolliu (utilitzarem InVision Studio), creeu una sèrie de capes de text (T) i, a continuació, ajusteu totes les mides per correlacionar-les amb la plantilla següent:

• h1>: 44 px
• h2>: 33 píxels
• h3>: 22 píxels
• p>: 18 píxels

Amb InVision Studio (i totes les altres eines de disseny de la interfície d’usuari), es fa ajustant els estils mitjançant el tauler Inspector situat a la part dreta.

A continuació, trieu el vostre tipus de lletra, però vés amb compte, perquè el que podeu notar amb alguns tipus de lletra és de 18 px p> i 22 píxels h3> no sembla tan diferent. Tenim dues opcions: ajustar la mida de la font o considerar una font diferent per als encapçalaments. Aneu amb aquest últim si preveieu que el vostre disseny serà molt pesat.

Tingueu en compte que:

• El disseny de la IU visual sovint és un enfocament sensible
• Res està decidit; tot està subjecte a canvis

Alçada de la línia

L'alçada òptima de les línies garanteix que les línies de text tinguin prou espai entre elles per aconseguir nivells decents de llegibilitat. Això és cada vegada més reconegut com a «estàndard»; L'eina Lighthouse Audit de Google fins i tot la suggereix com a comprovació manual (o fins i tot com a indicador si el text conté enllaços que poden estar massa junts com a conseqüència de l'alçada de la línia no òptima).

Una vegada més, el WCAG ens ajuda amb aquest, declarant que les altures de línia haurien de ser 1,5 vegades la mida de la lletra. Per tant, a la vostra eina de disseny d’interfície d’usuari, a sota de “Línia” (o similar), només heu de multiplicar la mida del tipus de lletra per, com a mínim, 1,5. Com a exemple, si el text del cos és de 18 px, l'alçada de la línia seria de 27 px (18 * 1,5 - també podeu executar l'operació matemàtica directament a l'Inspector). Tingueu en compte, de nou, que si l’1,6x s’adapta millor, utilitzeu 1,6x. Recordeu que diferents tipus de lletra donaran resultats diferents.

És massa aviat per pensar en utilitzar dades reals en el nostre disseny, però, com a mínim, hauríem d’utilitzar dades una mica realistes (fins i tot lorem ipsum). InVision Studio té una aplicació nativa de dades reals per ajudar-nos a veure com podria ser la nostra tipografia.

Espai entre paràgrafs

L'espaiat de paràgrafs no és un estil que puguem declarar mitjançant l'Inspector d'InVision Studio. En lloc d'això, haurem d'alinear manualment les capes mitjançant Smart Guides (⌥). De manera similar a l’alçada de la línia, el multiplicador màgic és 2x (el doble de la mida de la lletra). Com a exemple, si la mida de la font és de 18 px, hauria d’haver almenys un espai de 36 px abans d’accedir al següent bloc de text. L'espaiat entre lletres ha de ser com a mínim de 0,12.

Tot i això, no ens hem de preocupar d’això fins que no comencem a crear components.

Estils compartits

Si la vostra eina de disseny d’interfície d’usuari l’admet (InVision Studio encara no ho fa), penseu a convertir aquests estils tipogràfics en “Estils compartits” per fer-los reutilitzables ràpidament i assegurar-ne la coherència visual. Això normalment s’aconsegueix a través de l’inspector.

02. Tria la paleta adequada

La selecció dels colors perfectes per al vostre disseny va molt més enllà de l’estètica: pot informar tota la jerarquia del vostre lloc.

Pel que fa al disseny de la interfície d’usuari, el color és habitualment una de les primeres coses amb les que ens agrada jugar, però se’ns ensenya que submergir-se directament en el disseny visual és dolent. Certament, això és cert, però, quan es tracta de consistència visual, el color ha de ser el principal motiu de preocupació perquè exerceix altres funcions.

El color en el disseny de la interfície d’usuari pot ser molt eficaç, però atès que alguns usuaris (molts, en realitat) pateixen diversos tipus de discapacitats visuals, no sempre és fiable. Dit això, no es tracta necessàriament del color específic que s’utilitza, sinó del tipus de color. Pot ser que això no sigui cert quan es tracta de marca, ja que el color s'utilitza per a l'impacte emocional en aquest sentit, però, en el disseny de la interfície d'usuari, el color també s'utilitza per comunicar la intenció, el significat i, per descomptat, la jerarquia visual.

01. Stark
El connector Stark és compatible amb Sketch i Adobe XD i us ajuda a comprovar el contrast de color i simular el daltonisme directament des del llenç. Molt aviat es donarà suport a Figma i InVision Studio.
02.Colors
Colors és un conjunt de 90 combinacions de colors que tenen la quantitat adequada de contrast de colors per tal de satisfer les directrius de WCAG 2.0, algunes d'elles fins i tot compleixen l'estàndard AAA.
03. Projecte A11y
El Projecte A11y és un centre massiu per a totes les coses relacionades amb l'accessibilitat. Inclou recursos, eines, consells, tutorials i és creat pel creador del connector Stark i rep finançament d’InVision.

Els tres tipus de color

Els colors tenen significat, per tant, és important no tenir-ne massa. Massa significats donen lloc a més coses que l’usuari ha d’entendre i recordar, per no parlar de més combinacions de colors per a les quals ens podem preocupar. En general, aquest seria el format recomanat:

• Un color de crida a l'acció (també el color de la marca principal)
• Un color fosc neutre (millor per als elements de la interfície d’usuari o el mode fosc)
• Per tot l’anterior, una variació una mica més clara i fosca

Això permet el següent:

• Es podrà aconseguir fàcilment el mode fosc
• El nostre color CTA mai entrarà en conflicte amb altres colors
• En qualsevol cas, podrem destacar i desmarcar

Configureu la vostra paleta

Amb l’eina de disseny d’interfície d’usuari que trieu, creeu una taula de treball bastant gran (toqueu A) per a cada color (anomenada "marca", "neutre / clar" i "neutre / fosc"). A continuació, a cada tauler, creeu rectangles addicionals més petits que mostrin les variacions més fosques i més clares del color i també els altres colors.

Consideraríem una mica més clar i fosc com un 10% de blanc extra i un 10% de negre extra respectivament. Quan hàgiu acabat, mostreu una còpia dels estils tipogràfics a cada tauler. El color d’aquestes capes de text hauria de ser neutre, excepte al tauler d’art neutre, on haurien de ser neutres foscos.

Contrast

A continuació, haurem de comprovar els colors per obtenir un contrast de color òptim. Hi ha diverses eines que poden fer-ho, per exemple, el connector Stark per a Sketch i Adobe XD o Contrast per a macOS, però, una solució en línia com Contrast Checker o Color Contrast Checker funcionarà bé.

Comproveu el contrast de color de cada combinació i ajusteu els colors en conseqüència. Si no esteu segur de quins colors heu d’utilitzar, proveu d’utilitzar les recomanacions de Color Safe.

03. Enllaços i botons d'estil

Mida

Els botons i els enllaços, com la tipografia, haurien de tenir algunes variacions. Al cap i a la fi, no totes les accions tenen un nivell d’importància igual i, com hem comentat anteriorment, el color és un mètode de comunicació poc fiable, de manera que no pot ser el mètode principal d’influència en la jerarquia visual. També hem de jugar amb la mida.

Una prova d’abonament visual és una prova d’usabilitat que s’utilitza per determinar si els objectius tàctils semblen fer clic. Sincronitzeu el disseny de Studio a Freehand (⌘⇧F), envieu l'URL resultant als provadors i feu que encerclin els elements que creuen que es poden fer clic.

Els usuaris que no siguin InVision Studio també poden utilitzar Freehand, però els usuaris d’InVision Studio poden llançar els seus dissenys a Freehand des d’InVision Studio, que és la forma més ràpida i eficient d’obtenir comentaris visuals dels usuaris.

En general, recomanem que el text del botó es declari com a 18 px (igual que el text del cos), però que els botons tinguin tres variacions de mida:

• Normal: 44 px d’alçada (cantonades arrodonides: 5 px)
• Gran: 54 px d’alçada (cantonades arrodonides: 10 px)
• Extra gran: 64 px d’alçada (cantonades arrodonides: 15 px)

Això ens permet fer que alguns botons semblin més importants sense dependre del color i també niar botons (per exemple, utilitzar un botó dins d'un camp de formulari d'aspecte mínim).

Profunditat

Independentment de si l’orientació tàctil és un botó o un camp de formulari, s’han d’utilitzar ombres per augmentar la profunditat i, per tant, suggerir la interactivitat. Hi ha un estil d’ombra únic per a totes les variants de botons i camps de formulari.

Interactivitat

Cada tipus de botó necessita una variació per indicar el seu estat de vol. Això aclareix a l'usuari que el que ha intentat fer és totalment correcte i garanteix que continuï sense demora.

Aquest és en realitat un dels aspectes més complexos de mantenir la consistència visual, perquè el color és sovint l’estil preferit per canviar a l’hora de crear un estat. Afortunadament, aquests canvis d'estat poden ser relativament subtils, de manera que està bé canviar el color per la seva variació lleugerament més clara o més fosca, per a això serveixen. Això també s'aplica als enllaços.

Decidir-nos en contra farà que utilitzem un color que ja té un significat significatiu, cosa que provoca que els usuaris es confonguin o bé decideixin un altre color. La decisió d’utilitzar un color secundari està totalment bé, però s’hauria de guardar per a màrqueting visuals en lloc d’elements d’interfície d’usuari. Menys és més (i més fàcil).

Recordeu repetir aquest pas per a totes les taules de treball. No incloeu els botons CTA de marca al tauler de disseny de la marca; més endavant tractarem què passa quan determinades combinacions no funcionen.

04. Creeu els vostres components

Els components són un estalvi de temps enorme i totes les eines de disseny de la interfície d’usuari ofereixen aquesta funció (per exemple, a Sketch, s’anomenen símbols). A Studio podem crear components seleccionant totes les capes que haurien de formar el component i utilitzant el ⌘K drecera.

Ús de components

Els filferros són molt útils, no només per dissenyar interfícies d’usuari d’alta usabilitat, sinó també per esbrinar què requerirà la nostra interfície d’usuari a la llarga. És una mena de prova de futur.

Això no vol dir que hàgim de dissenyar una gran quantitat de components o estar preparats per a qualsevol escenari possible, però sí que hem d’utilitzar una actitud de “Què passa si?”.

Per exemple, si el nostre wireframe requereix un component de 3x1, però sabem que el contingut no està marcat, una petita contemplació ens pot fer preguntar-nos: "Què passa si aquests components acaben sent 4x1?". La regla general és: dissenyar només per a les necessitats de l'usuari que ja existeixen, però intentar que les solucions siguin relativament flexibles. En cas contrari, acabarem amb un "deute de disseny" molt desordenat més endavant.

Ara podem reutilitzar aquest component arrossegant-lo al llenç des de Biblioteques> Document a la part esquerra, tot i que tingueu en compte que aquest flux de treball pot variar segons la vostra eina d’interfície d’usuari.

Aquest mètode de creació de guies d’estil (i, finalment, de creació del disseny en si mateix) funciona especialment bé amb dissenys modulars / basats en targetes, tot i que ‘àrees comunes’ com ara capçaleres, peus de pàgina i navegacions també són excel·lents candidats per a un component.

Tal com hem fet amb els nostres estils, colors i botons tipogràfics, hem de recordar d’organitzar els nostres components amb cura.

Utilitzant les nostres regles

Abans vam fer una observació sobre no utilitzar botons CTA de marca a la part superior del color de la marca, ja que, evidentment, els botons CTA de marca han de destacar entre tota la resta. Llavors, com podem fer per crear un component de marca sense deixar de poder utilitzar un botó CTA de marca? Al cap i a la fi, si fem servir botons foscos neutres per, diguem-ne, botons de navegació o simplement botons menys importants, no seria una opció, oi?

Dret. Per tant, aquesta seria una oportunitat ideal per crear un component, concretament una combinació de capçalera + text + botó. Fixeu-vos en com he creat un fons de "targeta" de llum neutra per permetre l'ús del botó de marca. De la mateixa manera, el camp de forma de llum neutra (els camps de formulari solen ser blancs a causa del model mental històricament sinònim de formes de paper) no sembla increïble en el fons clar neutre, de manera que només es poden utilitzar en el fons fosc neutre, directament o dins un component fosc neutre. Així fem el nostre disseny flexible alhora que complim les nostres regles i mantenim la coherència.

Proves d’estrès

Idealment, la forma més ràpida i eficaç d’assegurar la robustesa del nostre disseny és provar-lo per esforç. Posar a prova un disseny significa ser cruel. Diguem que tenim una navegació amb X quantitat d’elements de navegació perquè aquest era el requisit; per tal de garantir realment la flexibilitat, proveu de canviar aquests requisits afegint més elements de navegació o, per llançar una clau de camp, intenteu també afegir un element de navegació amb una jerarquia visual més alta que els altres. Les nostres normes de mida, tipografia i color permeten alguna cosa així? O per oferir una usabilitat òptima, necessitem una altra regla?

Tingueu en compte que hi ha una diferència entre afegir regles i doblegar-les. Més casos avantguardistes significa menys consistència, de manera que la majoria de les vegades és millor, per qüestions d’utilització, repensar simplement el component.

05. Documenta i col·labora

Com podem fer que els nostres fitxers de disseny siguin més fàcils d’utilitzar tant per a nosaltres com per a qualsevol altre dissenyador que pugui utilitzar el nostre fitxer de disseny? Bé, és important mantenir-los emmagatzemats de manera segura en un emmagatzematge al núvol fiable i compartit, tal com ho descobrireu.

Colors

El primer pas és guardar tots els colors a la mostra "Colors del document" si encara no ho hem fet; això facilitarà l'accés quan els hàgim d'aplicar al nostre disseny.Per fer-ho, obriu el widget de selecció de colors de l'Inspector, trieu "Colors del document" al menú desplegable i feu clic a la icona + per afegir el color a la mostra. Funciona de la mateixa manera a la majoria d’eines d’interfície d’usuari.

Biblioteques compartides

A continuació, hem de convertir el nostre document, completat amb estils tipogràfics, colors, botons, àrees comunes i components bàsics, en una biblioteca compartida.

Bàsicament això vol dir que cada element ha de ser un component, fins i tot si només consta d’una capa. Feu clic al botó + ‌ a la barra lateral de Biblioteques de l'esquerra i, a continuació, importeu aquest document a un document nou. És cert: el nostre document ara és una biblioteca i ja es pot utilitzar per dissenyar interfícies d’usuari amb una coherència garantida.

InVision Studio és una mica limitat en el sentit que encara no se sincronitza amb l’eina oficial de Gestió del sistema de disseny d’InVision, però és prou fàcil allotjar la biblioteca a Dropbox perquè altres dissenyadors l’utilitzin i actualitzin amb el pas del temps. Quan es fa un canvi (local o remotament), tots els fitxers Studio que utilitzen la biblioteca (de nou, localment o remotament) us preguntaran si voleu actualitzar els colors i els components. Així es mantenen les biblioteques de disseny entre equips.

A l’hora de dissenyar interfícies d’usuari que siguin visualment coherents, reutilitzeu-ho tot. Dissenyeu botons i, a continuació, utilitzeu els botons per crear components de botons i, a continuació, utilitzeu
components del botó per crear altres components com alertes i diàlegs.

Simplement no creeu components que no siguin necessaris. Recordeu, construir una biblioteca és un esforç de col·laboració continu. No cal completar-ho alhora, completar-lo sol o completar-lo mai. Només ha de transmetre un idioma.

Disseny a escala

A mesura que el disseny s’expandeix, gestionar-lo es fa més difícil. Hi ha diversos ajustos que és possible que vulguem fer per mantenir-lo eficient i mantenible, sobretot perquè DSM d’InVision encara no funciona amb Studio.

Per exemple, és possible que vulguem utilitzar capes de text per anotar la nostra biblioteca com a mitjà per explicar els casos d’ús de diversos elements. Per als estils tipogràfics, fins i tot podríem editar el text per ser més descriptiu (per exemple, "h1> / 1.3 / 44px"). Això diu això h1>s ha de tenir 44 px i tenir una alçada de línia d'1,3.

Disseny Handoff

Les eines de transferència de disseny mostren els diversos estils utilitzats per tots els elements del disseny perquè els desenvolupadors puguin crear l’aplicació o el lloc web. Aquestes eines inclouen una visió general dels estils i també una còpia de la mostra de "colors del document". Els desenvolupadors poden fins i tot copiar aquests estils com a codi, cosa excel·lent si heu decidit crear documentació de disseny escrita i voleu incloure representacions de fragments de codi dels components.

Si us preocupa la resolució de problemes i la gestió d’un lloc web, us ajudarà a assegurar-vos que teniu el servei d’allotjament web adequat, però per al vostre sistema de disseny, l’eina d’intervenció de disseny d’InVision, Inspect, és el que cal utilitzar. Per utilitzar-lo, fem clic al botó / icona "Publica a InVision" a InVision Studio, obrim l'URL resultant i, a continuació, toca per canviar al mode d'inspecció. És molt convenient.

Aquest contingut va aparèixer originalment a la revista net.