Bones pràctiques a l’hora d’iniciar el disseny UI d’un projecte digital
12 recomanacions per dissenyadors UI que es trobin dins de la metodologia de Disseny Centrat en l’Usuari (UX)
És agost i el ritme de feina és un altre. Els clients hivernen durant l’estiu per venir amb més força al setembre. Aquí a Interactius a alguns ens costa fer vacances durant el mes més demandat pels viatgers i ens hem proposat tirar endavant el nostre propi projecte, un que fa mesos que volem iniciar però per falta de temps ens ha sigut impossible: redefinir, redissenyar i reprogramar la nostra web.
Així doncs, vull aprofitar aquest moment de tranquilitat per mostrar-vos una guia de “bones pràctiques” a seguir a l’hora de començar el disseny (UI) d’un projecte web interactiu.
Com iniciar el disseny de la Interfície d’Usuari (UI, de l’ànglès ‘User Interface’)
Per a poder arrencar de la millor manera la fase de disseny d’interfície primer s’han d’haver realitzat tres fases del projecte bàsiques: una àmplia Presa de Requeriments (tasca que normalment executa el UX researcher), una bona Definició de l’Arquitectura de la Informació i Interacció (tasca que desenvolupa el dissenyador UX) i un Manual d’Identitat Corporativa de la marca (tasca que desenvolupa el dissenyador gràfic especialitzat en Branding). A continuació detallaré algunes de les tasques que es realitzen dins d’aquestes tres fases del projecte:
Presa de Requeriments
- Estudi de Camp i de l’entorn on es podria utilitzar la web
- Focus Group d’usuaris potencials
- Entrevistes
- Qüestionaris
- Anàlisi del Públic Objectiu
- Anàlisi dels possibles escenaris
- Storyboarding
- Inventari de contingut
- Anàlisi del contingut
- Brainstorming
- Benchmarking
Per a comprendre millor el rol del UX Researcher en un projecte, us recomano l’article de Victor Yocco: “UX Researcher: A User’s Manual” (en anglès).
Definició de l’Arquitectura de la Informació i Interacció
- Mapa de contingut
- Desplegament de contingut
- Diagrames d’ús
- Wireframes
- Prototips
Amb tot això, cal conèixer les diferències entre dissenyador UX i dissenyador UI. Luis López ens ho explica molt bé en aquest vídeo (en castellà):
Manual d’Identitat Corporativa
- Valors de la marca
- Presentació del logotip i com s’utilitzarà
- Proporcions
- Reduccions i ampliacions
- Usos incorrectes
- Paleta de colors
- Tipografia
- Elements complementaris
Com a exemple il·lustratiu, podem consultar el nou Manual d’Identitat Corporativa d’Adobe Design.
Amb aquesta informació, ben documentada, el dissenyador UI podrà incorporar-se al projecte entenent a qui va dirigit, com s’estructurarà la informació i la interacció i amb quins aspectes s’identifica la marca. D’aquesta manera serà capaç de concebre quina serà la línia gràfica i, en definitiva, el disseny que requerirà el projecte.
12 recomanacions pel dissenyador UI
Com a dissenyadora he hagut de participar en diferents projectes durant els últims anys on he après diverses tècniques i bones pràctiques que han facilitat la meva feina. M’agradaria compartir aquests coneixements fruit d’aquesta experiència com a dissenyadora UI:
1. Per a assolir uns resultats òptims, el dissenyador UI ha de tenir el màxim d’informació anteriorment detallada abans de començar a treballar. L’ha d’analitzar i interioritzar per a posteriorment aplicar totes les idees que han agafat forma dins l’etapa de definició.
El dissenyador UI ha de centrar sempre el seu disseny en els requisits de l’usuari i aplicar uns mètodes que li proporcionin la millor experiència possible.
2. És molt recomanable llistar les idees i/o conceptes que a nivell d’estil gràfic puguin ajudar a reforçar els valors de la marca i el to que aquesta ha d’adoptar.
3. Tenir clar sobre quin context tecnològic realitzarem el disseny:
- Plataforma: desktop, tablet o smartphone.
- Llengüatges de programació: html, css, frameworks, php, javascript…
- Web estàtica o dinàmica.
Aquests tres punts condicionaran totalment la manera de realitzar el nostre disseny interactiu.
4. Tornar a analitzar la competència des de la visió d’un dissenyador UI. Veure punts forts i febles, què ens agrada i com ho podríem millorar, etc.
5. Crear una biblioteca de webs de referència, ja siguin de la competència, de dissenys extrets d’alguna galeria especialitzada o a nivell d’interacció. O d’altres que tinguin petits elements que es puguin incorporar a la nostra idea. La finalitat és comptar amb un catàleg de webs que responguin al to i estil gràfic que ha d’adoptar la nostra web per a ajudar-nos a elaborar un esquema aproximat del nostre disseny.
6. Durant el procés de disseny d’interfícies és molt important posar-nos en la pell dels usuaris, ser empàtic i entendre els escenaris hipotètics en que els perfils definits pel dissenyador UX es trobin còmodes.
7. És molt aconsellable acompanyar-nos sempre d’un bloc de notes o gravar àudios per anar emmagatzemant totes aquelles idees que ens van sorgint.
8. Abans de començar a posar color i formes al nostre disseny, idear una retícula ens ajudarà a acotar i assentar els elements que el formen, aconseguint així una harmonia visual consistent.
9. La posició i tamany de les tipografies condicionarà enormement la percepció que l’usuari tingui del site. Combinar i col·locar diferents ‘tipos’ crea estructura i significat. Quan la tipografia s’utilitza bé pot arribar a comunicar al mateix nivell que el significat de les paraules.
10. Les imatges poden aportar un gran valor a l’experiència. El tema, el to, la temperatura, com i quan les col·loquem… ajuda a reforçar l’estil gràfic de la pàgina i que l’experiència sigui més intuïtiva.
11. L’estil de la iconografia també juga un paper destacable. Podem escollir entre multitud de famílies iconogràfiques. El millor és escollir-ne un parell i contextualitzar-les en dos documents diferents sobre el mateix disseny. Després ho comparem i escollim la que més valor aport i encaixi amb la resta d’elements.
12. Una molt bona pràctica és la d’anar pensant les interaccions, animacions i estil d’hovers mentres dissenyem, ja que en molts casos condicionarà el resultat final.
D’aquesta manera, molts dissenyadors gràfics ens hem introduït dins la metodologia de Disseny Centrat en l’Usuari, convertint-nos en dissenyadors UX/UI. Però, en què consisteix exactament? Xavier Araque aborda aquest tema en el seu article: “Aprendiendo ¿qué es Diseño UX/UI?”
En definitiva
Moltes vegades, per especificacions del client o per falta de temps, ens hem de saltar o no dedicar suficient temps a algun dels punts comentats. Però si seguim aquestes bones pràctiques, podem assegurar-nos d’assolir uns resultats òptims satisfent les necessitats del nostre client i proporcionant una bona experiència a les persones destinatàries: els nostres usuaris.
Per acabar, us presento el resultat d’una bona feina de disseny UX/UI, obra de Pawel Malenczak per a realitzar el seu propi portfoli:
