10 defectes comuns de disseny ... i com evitar-los

El treball de disseny és un negoci complex. És massa fàcil equivocar-nos.

Tots els petits detalls són d’importància crucial per a la producció de productes d’alta qualitat. Cal tenir en compte tots els detalls. Pot ser fàcil perdre't en els detalls i perdre el seguiment. Per això, hi ha alguns defectes de disseny increïblement habituals i vulnerabilitats de la interfície d'usuari.

Com es poden evitar aquests errors comuns? Llegiu més endavant per obtenir alguns consells i suggeriments que us ajudaran a evitar aquestes traves comunes.

Sí, tot això es basa en la meva dolorosa experiència com a dissenyadora. I sí, qualsevol semblança amb fets reals és purament coincident.

1. Falta de planificació per als casos marginals (digueu NO a Lorem Ipsum)

Amb les fotos de Lorem Ipsum i stock, podeu crear fàcilment un bell i harmoniós disseny que ràpidament serà irrellevant per a la realitat. El vostre bell disseny es trencarà tan aviat com s'ompli del contingut real.

Per evitar-ho i evitar la frustració del client amb productes finals que no semblen el que preteníeu, heu de reunir informació. Recolliu la màxima informació possible sobre el contingut que ja existeix o sobre el contingut que s'ha de crear.

En particular, heu de saber quin tipus de contingut apareix a cada secció de la pàgina abans de començar a treballar en un disseny d’UI. També cal conèixer la mida mínima i màxima del contingut (és a dir, quantes línies de text, mides d’imatge). Aquests punts d'inversió s'anomenen caigudes de vora perquè mostren quan i com canvia la interfície.

Selecciona imatges

També voleu examinar les restriccions d’imatge. Si el vostre client no té fotos personalitzades o no les comprarà, no té cap sentit utilitzar fotos boniques però sense sentit de Unsplash.

Per què? Les fotos són més conceptuals. No n’hi ha prou amb fer servir alguna cosa bonica. En canvi, cal triar imatges que crein una narració o que impliquin un significat més profund.

No utilitzeu mai fotografies que no hagin d’estar disponibles. Avui, una gran quantitat d'informació aclapara la gent. Una mica d’informació visual inútil només els irritarà.

El bàsic de repetir blocs

Un altre cas marginal es refereix a la repetició de blocs, p. B. Imatge + text, símbol + text, número + text, etc. Heu de considerar com es veuen aquests blocs de dues i deu línies de text i si estan independents.

Per a petits blocs de text que descriuen funcions, podeu utilitzar fàcilment un disseny de tres columnes. Tanmateix, si teniu més de cinc línies de text i voleu mostrar-ho tot sense el·lipsi, heu de trobar una altra solució visual. Per què? Perquè la lectura de llargues columnes de text només és adequada per a diaris i no per a Internet. Les possibles solucions podrien ser l’ús de transparències amb desplaçament horitzontal o una disposició de dues columnes.

Escala del pla

Si coneixeu el cas del vostre contingut, podeu utilitzar l'àrea de pantalla de manera més eficient i triar el tractament de la interfície d'usuari adequat per a cada part de la interfície d'usuari. Tanmateix, tingueu en compte que els casos de vora no es tracten només del que teniu en aquest moment. Un bon dissenyador hauria de pensar sempre endavant, tenint en compte la possibilitat que els clients puguin necessitar escalar la interfície d’usuari en el futur.

2. Anotacions a la pantalla insuficients

El següent gran error que hauríeu d'evitar és la manca d'anotacions en els vostres dissenys.

Tot el vostre equip, el responsable del projecte, els especialistes en garantia de qualitat, així com els desenvolupadors front-end i back-end, veuen les pantalles de disseny en formes estàtiques com una sèrie de belles imatges. No podeu saber quin comportament assumiu per a cada element d’interfície. No podeu predir com l’heu dissenyat al vostre cap. El que pot ser obvi per a vostès i els seus col·legues no és evident per a tots els membres de l’equip.

Per aquest motiu, és fonamental afegir comentaris sobre el comportament de cada element, la direcció dels enllaços, l’animació i com interactua amb la pantalla. Si omiteu aquest pas, risqueu malentesos. També arrisqueu molt després de la confusió innecessària si es treballa de manera exacta equivocada.

És fàcil veure com una cosa tan petita com una anotació de pantalla pot perdre molt temps de desenvolupament. Fins i tot pot afectar tot l'àmbit del projecte i augmentar els costos de desenvolupament.

3. Condicions d'error frustrant

A l’hora de dissenyar una interfície d’usuari, no oblideu la finalitat principal d’una interfície d’usuari: la interacció més suau possible entre l’usuari i el servei. Les interfícies no són un lloc per a dubtes, preguntes sense resposta o incerteses.

Els desenvolupadors han de proporcionar als usuaris una informació clara sobre les condicions, especialment en cas de fallades. Per tant, les notificacions d'error han de complir les següents regles simples:

  • Han de ser reconeixibles i reconeixibles (per exemple, el color vermell és un patró d’interès d’usuari habitual que indica un error).
  • Heu d’explicar clarament què va passar i com els usuaris poden solucionar l’error.
  • Han de ser contextuals. És millor mostrar missatges d’error a prop de l’element al qual fan referència.
  • No us hauria d’irritar. L’error no està suficientment irritat per l’error?

Els dissenyadors també han de tenir cura dels errors inesperats (per exemple, els errors del servidor, la pàgina no trobada). Tots els missatges d’error interfereixen amb el flux d’usuari. Per tant, hem d’ajudar l’usuari a afrontar-lo, proporcionar solucions possibles i intentar compensar una mala experiència, sobretot si no és culpa de l’usuari. Per exemple, una bona solució pot ser crear il·lustracions o animacions per a 404 i 500 pàgines.

Compte amb comprovacions de formulari

Quan dissenyeu condicions d’error, intenteu no molestar els usuaris. En especial, tingueu cura amb tot tipus de comprovacions de formularis.

Per exemple, imagineu-vos que teniu un formulari amb els camps obligatoris. Això vol dir que els desenvolupadors tenen una marca de verificació corresponent: "No s'han de deixar tots els camps obligatoris". Suposem que l’usuari intenta omplir el formulari en un ordre aleatori. Si el primer camp obligatori perd l’estat de l’enfocament, es torna un error: “Ompliu aquest camp. És necessari! "

El nostre pobre usuari exclama: "Espereu, amic, només faig clic entre els camps del formulari i ni tan sols heu fet clic a" Enviar "encara!" I pot empitjorar. Suposem que teniu una altra verificació i que el botó Envia està desactivat fins que tots els camps obligatoris ja no quedin en blanc.

Penseu-hi un segon. El vostre pobre usuari no ha fet res i no pot enviar el formulari, però ja li heu comès diversos errors. Sens dubte això molesta a tothom, així que el millor és evitar aquest tipus de situacions.

Pese els costos i el valor

No escolteu els desenvolupadors que intentin fer-vos saber que implementar-los tal com vulgueu pot ser costós. Recordeu-vos: evitar aquest problema us costarà clients! Ningú necessita un servei o un producte sense clients. Encara que fos barat de desenvolupar-se.

4. Estats buits massa buits

Aquest tema està relacionat amb l'estat d'error anterior i també està associat a casos marginals. Un estat buit és el cas marginal absolut, de manera que cal pensar de manera proactiva per evitar-lo.

Com es veu la vostra interfície d’usuari quan no hi ha dades a cada pàgina o secció? Serà amable o frustrant? Semblarà bé o quedarà trencat? Entendran els usuaris on són i què significa l’estat?

Aquí és recomanable proporcionar una imatge atractiva amb contingut informatiu. Pot ser una il·lustració, un símbol o simplement un bloc de text amb una bonica tipografia que explica la situació.

5. Falta la jerarquia de tipografia

A continuació, s’evita millor un altre tema que provoca molts defectes en el disseny: la tipografia.

El text és la unitat principal d’informació. Per tant, ha de ser llegible, recognoscible i ben organitzada. El text amb format adequat facilita la percepció d'informació als usuaris i els manté centrats en allò que és realment important.

Utilitzeu tipus de lletra i estils

Jugar amb tipus de lletra pot ser divertit. Tanmateix, si algú intenta llegir alguna cosa que canvia els tipus de lletra deu vegades en un paràgraf, es pot tornar ràpidament esgotador i molest.

Per evitar aquest tipus de fatiga, recomano no utilitzar més de tres tipus de lletra en un sol disseny. Tanmateix, tingueu en compte la diferència entre tipus de lletra i estils de lletra. Cada tipus de lletra té els seus propis estils: normal, mitjà, negreta, negre, cursiva, negreta cursiva, etc. Si combinem tots aquests estils de lletra amb majúscules i minúscules, dos o tres tipus de lletra són més que suficients per crear un sistema de tipografia atractiu.

Crida l’atenció sobre el nucli

Quan pensis en tipografia, no oblidis fer servir el Kerning. Si mai heu sentit a parlar de Kerning, no patiu. és molt senzill. El nucli és el procés de tipografia en què l'espai entre caràcters s'ajusta manualment o automàticament.

El nucli és important perquè l’ajustament de l’espai entre caràcters en determinades situacions pot millorar la llegibilitat i l’aparença de la tipografia. Tanmateix, l’ús indegut de la nuca o el seu seguiment no pot provocar greus problemes. Això pot conduir a una mala interpretació o destruir involuntàriament la cohesió d’un disseny.

Mantenir la jerarquia visual

Proveu sempre de mantenir la jerarquia visual entre els estils de tipus de lletra de la vostra pàgina. Utilitzeu tipografia contrastada per subdividir visualment diferents capes de text i crear una jerarquia estricta. Per tal que la jerarquia de la informació sigui visible de manera clara en una pàgina, cal destacar els encapçalaments principals de la pàgina. Els subtítols han de ser significativament més petits, però encara són clarament visibles.

El mateix principi s'aplica a la jerarquia visual dins d'un bloc lògic. L’encapçalament ha de ser l’element de disseny més gran de la pàgina, seguit d’un encapçalament més petit i menys perceptible. A continuació, tots els títols de funcions següents haurien de ser sensiblement menors que l’encapçalament i del mateix pes. Els tipus de lletra més petits s’han d’utilitzar per descriure funcions, etc. Aquesta jerarquia visual permet als visitants del lloc diferenciar entre informació cada cop menys important.

6. Ampliació i espais lliures insuficients

Un emplaçament i un espaciatge adequats garanteix que el disseny és net i ordenat i facilita la lectura i la comprensió de la informació.

Els espais de la mateixa mida s’han de situar al voltant dels blocs lògics (per exemple, a sobre i a baix i a l’esquerra i la dreta). Si les llacunes són desiguals, la vostra pàgina es veuria desordenada i és possible que els usuaris no considerin cada secció per igual.

Un rellotge massa petit significa que els usuaris no poden dividir el contingut en blocs lògics. Per evitar que les parts lògiques es fonin entre elles, manteniu-les separades i inseriu un gran espai entre elles.

Una forma fàcil de mantenir la jerarquia visual és seguir aquesta senzilla regla: la distància entre diferents blocs lògics hauria de ser superior a la distància entre l’encapçalament i el text de cada bloc. Suposem que teniu un bloc llarg de text que conté encapçalaments, subtítols i paràgrafs:

  • Configureu el rellotge d'encapçalament a 40px i seguiu-lo amb un paràgraf de text.
  • Establiu l'espai entre paràgrafs a 10 pp.
  • Si hi ha una subpartida després del paràgraf, especifiqueu 30 píxels per omplir el paràgraf (és a dir, la distància entre el paràgraf i la vora superior del subtítol és de 30 píxels) i 20 píxels per omplir el paràgraf (és a dir, la distància entre la subpartida i el paràgraf) 20px, que és més gran que la distància entre els paràgrafs).

Això posa en primer pla els elements més importants i importants. El text més gran (l’encapçalament) té més espai. Tanmateix, aquest espai s’hauria d’apropar més als elements relacionats posteriors.

7. Iconografia desordenada

Els símbols són increïblement útils quan cal expressar el significat amb un petit símbol o il·lustrar breument una descripció. També són una part essencial de les interfícies modernes, especialment per a dispositius mòbils.

En aplicacions, els símbols sovint corresponen als botons. Feu un cop d'ull a Instagram: només es mostren les icones i el text.

Per aquest motiu, és molt important escollir la imatge visual adequada que correspongui al significat d’un element. Sembla fàcil, no? Nah. Tot dissenyador del món sap el dolorós que pot trobar el símbol adequat.

Heu d’explicar la història amb imatges molt senzilles i generals que tothom pot entendre. I heu de combinar aquestes icones amb l'estil general de la interfície d'usuari. Heu de posar-los a disposició dels desenvolupadors en format SVG.

Potser estàveu buscant símbols gratuïts i us emocionà quan trobàveu una imatge bonica per a cada element. Pensen com es corresponen perfectament entre ells! Seràs comprensible per a tothom! Malauradament, la impressió general del conjunt de símbols que heu seleccionat té una aparença força caòtica i desordenada. Com podeu evitar aquest tipus d’embolic? Aquí hi ha una llista de comprovació ràpida:

  • Amplada de línia: després de redimensionar-la, tots els símbols haurien de tenir la mateixa amplada de línia. En cas contrari, és molt notable que no és així.
  • Radi de la cantonada: si els vostres símbols contenen formes rectangulars, compareu el radi de la cantonada de tots els símbols del vostre conjunt. Si és diferent per diferents símbols, millor arreglar-lo.
  • Forma de tapa de línia (per a símbols delineats): pot ser rectangular o arrodonida.
  • Connecta la forma de les cantonades (per a símbols descrits): pot ser rectangular o arrodonit.

És cert que els usuaris no exigents podrien notar diferents amplades de línia o ràdios de cantonada. Tanmateix, la impressió general serà errònia i els usuaris la sentiran.

Dit d’una altra manera, encara que no estigui mal utilitzar símbols lliures, el millor és conservar-los. Si utilitzeu símbols gratuïts, el projecte és econòmic i, en alguns casos, poc professional. També hi ha molts símbols gratuïts que la gent reconeixerà immediatament. Per què? Ja els heu vist arreu.

Per això, us aconsello que sigueu estrictament selectius amb símbols lliures o, encara millor, per dissenyar-vos els símbols. Els símbols personalitzats sempre proporcionen una experiència excel·lent.

8. Baix contrast

El contrast és un principi bàsic del disseny gràfic. Els nostres ulls agraden al contrast. El contrast és una eina que utilitzen els dissenyadors per controlar l’atenció dels usuaris.

El contrast es produeix quan dos elements d'una pàgina són diferents. Per exemple, es podria crear el contrast mitjançant diversos colors per al text i el color de fons. Podria ser un encapçalament en una lletra grossa i negreta que es troba al costat d'un elegant tipus sense serif del text principal. Aquesta pot ser la diferència entre un gràfic gran i un petit, o pot ser una textura tosca combinada amb una textura llisa.

L’important del contrast és que els elements contrastats han de ser completament diferents. No només una mica diferent: una diferència marcada i agosarada.

Utilitzeu l’espai blanc

Tanmateix, si situeu dos elements completament diferents entre si, l’usuari no pot entendre quin element és l’element principal. Per tant, podem dir que el contrast no només es tracta d'aplicar estils visuals diferents a elements, sinó també de com utilitzar l'espai blanc. Això es deu al fet que de vegades cal separar elements amb espais per aconseguir contrast.

Els espais són importants perquè els usuaris puguin llegir fàcilment el contingut. Per descomptat, no es pot utilitzar correctament l'espai blanc: massa espai blanc o massa contingut en una àrea petita. Molts llocs web amb publicitat excessiva també manquen d’espai blanc suficient.

Assegureu un contrast suficient entre el text i les imatges

Eviteu un baix contrast per a les còpies de text col·locades en una imatge. El contrast entre text i fons hauria de ser suficient. Col·loqueu un filtre de contrast sobre la imatge per ressaltar la còpia. El negre és un color popular, però també podeu utilitzar colors vius i barrejar-los.

Una altra opció és utilitzar una imatge contrastada des del primer moment. En aquest cas, podeu col·locar la còpia sobre una zona fosca de la foto o imatge.

Evitar una sobredosi de contrast

Eviteu utilitzar massa estils en una pàgina. Massa estils tipogràfics i de disseny en una pàgina fan que semblin poc professionals i també els fan més difícils de llegir. Per evitar-ho, limiteu-vos a un sol tipus de lletra i dues opcions de saturació (per exemple, normal i negreta).

Eviteu ressaltar els colors laterals estrets. Simplement no es veu bé. Per exemple, els encapçalaments ja estan ben marcats per la seva mida, tipus de saturació i encoixinat. Voleu destacar un punt concret d’una pàgina? Utilitzeu un fons de color per a tot el bloc, inclosos un encapçalament associat i una còpia del text.

9. No penseu a les plataformes

Sí, idealment això ja no hauria de ser un problema al món actual. Tots sabem que la majoria d’usuaris mòbils accedeixen als serveis web. Malauradament, molts dissenyadors encara tendeixen a oblidar aquest fet. (O els clients no volen perdre els diners per crear dissenys optimitzats per a telèfons mòbils?)

No obstant això, per als professionals del disseny, no hauria de sorgir el problema de no optimitzar per a diversos dispositius. Quan creeu una interfície d’usuari, sempre heu de considerar l’aclamat enfocament “Mobile First”. Centra’t en el contingut que cada tipus d’usuari veu a cada pàgina. A continuació, pregunteu-vos: "És pràctic o no el control de la interfície d'usuari que he mostrat per mostrar aquest contingut?"

Podeu triar un element gràfic agradable que funciona bé en dispositius d’escriptori. Tot i això, no és adequat per als usuaris de telèfons intel·ligents. O viceversa. Per aquest motiu, és important estar sempre atent a la varietat de dispositius per als quals hem de desenvolupar-nos avui en dia.

10. Massa disseny

El fet que pugueu afegir alguna cosa al vostre disseny no significa que ho hagueu de fer. La simplicitat ofereix molts avantatges. Així que vés amb compte si et tornes boig per estils. El disseny excessiu no és un error greu, però pot causar problemes seriosos.

Per exemple, usar massa colors en una pàgina és confús. no queda clar quins bits són més importants. Un o dos colors són suficients per ressaltar visualment el que és realment important.

El mateix s'aplica als estils de tipus de lletra. N’hi ha prou de ressaltar els encapçalaments i subtítols i utilitzar el contrast per als termes clau.

Com més "coses" incorporeu al vostre disseny, més difícil serà per a un usuari pensar-hi per extreure la informació que conté. Un disseny ha de respirar i viure de forma independent. Tingueu en compte que els espais no són necessàriament dolents. En molts casos, és millor que ompliu cada polzada quadrada d'espai buit.

El vostre disseny té errors que cal reparar? Feu-nos-ho saber! El nostre equip de disseny de classe mundial us pot ajudar a evitar la bogeria del disseny alhora que comuniqueu amb més claredat i bellesa.

Sobre l’autor

La dissenyadora sènior d’UI / UX, Maria Pisarenko, es va incorporar a la destil·leria el 2018. Compta amb més de 6 anys d’experiència en disseny i ha creat infinitat d’interfícies per a clients de tot el món. Les passions de Maria inclouen iconografia, tipografia i il·lustració; Ella creu que el disseny juga un paper clau per fer que el món sigui un lloc millor.