Content
- Què fa un dissenyador d’interfície d’usuari?
- Aplicacions web vs natives
- Millorar el vostre conjunt d’habilitats
Quan vaig començar la meva carrera, era dissenyadora web. Vaig treballar quatre anys en el disseny de llocs web, començant per llocs de petites empreses i, finalment, passant a clients més grans. Em vaig assabentar que no era el disseny gràfic el que m’interessava ni el treball per a marques més grans. M’interessaven més els patrons de paginació, la manera com la gent interactuava amb els formularis i coses com el rendiment percebut, que el disseny visual d’una pàgina web.
Quan veia pel·lícules de ciència ficció, mirava les interfícies. I quan jugava a videojocs, observava la forma en què es distribuïen els menús. Si us sembla familiar algun d’aquests trets, també podeu ser un dissenyador d’interfícies d’usuari.
Vaig deixar la meva feina d’agència i vaig crear la meva pròpia empresa. A la meva pàgina de LinkedIn, vaig intentar resumir el meu nou objectiu professional: fer el millor programari possible. Han passat quatre anys des que vaig començar com a independent, i el meu viatge no s’ha aturat. Actualment, ajudo a dirigir una petita empresa de disseny d’interfície d’usuari anomenada Mono. Recentment hem donat la benvinguda al nostre quart equip.
En aquest article vull descriure com és ser dissenyador d’interfície d’usuari, inclòs què implica exactament la feina, on trobar els millors recursos d’aprenentatge i com millorar el vostre ofici.
Què fa un dissenyador d’interfície d’usuari?
Trobo que, generalment, podeu dividir el treball d'un dissenyador d'interfícies d'usuari en quatre categories. Es comunica amb el client, s’investiga, es dissenya i es prototips i es comunica amb els desenvolupadors. Vegem més detalladament cadascuna d’aquestes fases.
Comunicació del client
La comunicació del client es tracta d’entendre el problema del client. L’objectiu és conèixer el negoci del vostre client, de manera que l’inici d’un projecte sol constituir una gran quantitat de converses. Està bé no saber massa sobre el domini del vostre client quan comenceu; podeu mirar el seu negoci d’una manera nova mentre preveieu possibles solucions de disseny.
Per ser un bon dissenyador d’interfície d’usuari, heu de poder acabar pensant junt amb el negoci del vostre client. Per exemple, és possible que el vostre client estigui en aviació. Treballar per a ells acabarà fent que tingueu coneixements sobre aquesta indústria. Per tant, un consell per a la vostra pròpia felicitat és escollir amb prudència les indústries per a les quals treballeu, de manera que no acabeu sent un expert en allò que no us importa o que no us interessi.
Durant un projecte, la comunicació no s’atura. Com a dissenyador, presentaràs el teu treball constantment. A la nostra empresa som un equip remot, de manera que no tenim moltes reunions presencials. En canvi, fem un ús intensiu de l’ús compartit de pantalla mitjançant videoconferències. Cada dia s’utilitzen eines de comunicació com Skype i Slack.
És útil combinar mètodes de comunicació síncrons i asíncrons. Una trucada és fantàstica si necessiteu molta informació ràpidament, però heu d’estar al mateix temps. Pensem en Slack com el nostre “refrigerador d’aigua virtual” i fem servir Basecamp per gestionar projectes de disseny complexos. Quan dissenyem prototips amb HTML i CSS, fem servir GitHub Issues per discutir directament sobre el codi.
Recerca
A més de la comunicació amb el client, investigareu molt. Això podria incloure estudis de camp, tallers amb el client, analitzar la competència o definir una estratègia, bàsicament tot el que us ajudi a entendre el problema que ens ocupa.
La investigació és el que informa les vostres opcions de disseny. És un article que heu llegit una vegada, o una cosa nova que acaba de publicar Apple. Quan arriba el moment d’explicar per què heu fet una tria de disseny concreta, la vostra investigació us avala.
La investigació pot ser molt àmplia. Sovint provo dispositius nous amb finalitats de recerca o em registro a una nova aplicació web per estudiar la seva interfície d’usuari.
Disseny i prototipatge
Com a dissenyador, probablement passareu la major part del vostre temps fent treballs de disseny i prototipatge. Un projecte de disseny d’interfície d’usuari pot avançar de diverses maneres, des de l’esbós fins al disseny detallat fins a la codificació.
El mètode que utilitzeu depèn en gran mesura del tipus de projecte. Què estàs dissenyant? És un lloc web o preferiu anomenar-lo app? Utilitza tecnologia nativa? És un redisseny o comences de zero?
A la nostra empresa no hi ha un procés fix, però la majoria de projectes segueixen el mateix ordre aproximat: comencen amb esbossos i armadures, passen a un disseny visual i d’interacció detallat i acaben amb un prototip.
Com a dissenyadors, passem molt de temps pensant en les nostres eines. Tot i que les eines excel·lents són importants, no són el més important. Poder utilitzar Adobe Creative Suite i aplicacions com Sketch de manera competent és l’equivalent a poder utilitzar un llapis per dibuixar o un pinzell per pintar. Encara cal fer la pintura.
Dit això, un bon interès per les eines és bo. M’encanta provar noves eines que m’ajudin a ser més productiu. La meva eina d’edició de vectors preferida és Illustrator, però la major part del meu treball de disseny visual es fa a Sketch actualment. Altres membres de l'equip han canviat a eines més noves com Affinity Designer.
Les eines són una opció molt personal. Sempre que puguem treballar junts fàcilment, tothom és lliure de triar el seu. Per fer més senzill parlar dels nostres dissenys amb els clients, fem prototips amb InVision. No obstant això, per fer prototips més avançats, fem servir HTML i CSS. L'eina que necessiteu depèn de la feina que vulgueu fer amb ella.
Comunicació del desenvolupador
Una part sovint oblidada del treball d’un dissenyador d’interfícies d’usuari és la comunicació amb el desenvolupador. Avui en dia no podeu evitar enviar els vostres dissenys als desenvolupadors i esperar que s’implementin correctament. Els millors dissenyadors saben que el repte no consisteix a crear el disseny, sinó a comunicar-lo, no només als grups d'interès que han d'aprovar, sinó també als desenvolupadors que han d'implementar-lo.
La comunicació d’un disseny es presenta de moltes formes: especificacions detallades, subministrament d’actius, revisió conjunta del disseny. El que tingui sentit lliurar en cada instància depèn en gran mesura de si el projecte és natiu o una aplicació web.
L’enfocament tradicional és lliurar recursos al costat de dissenys de pantalla. Els dissenys de pantalla es poden utilitzar per veure com serà el disseny en general, mentre que els recursos són PNG i SVG d’icones preparats per utilitzar, de manera que els desenvolupadors no han de tractar amb un editor de gràfics.
A la nostra empresa som partidaris de lliurar més que això. Utilitzem guies d’estil de components per ajudar a mantenir la coherència en els nostres dissenys. Quan es tracta d’un projecte web, lliurem conjunts detallats d’HTML i CSS, documentats peça per peça, a punt per implementar-los. Crec que tenir un ull de disseny en totes les fases del desenvolupament de programari és l’única manera d’assolir el meu objectiu de crear programari de classe mundial.
Aplicacions web vs natives
Quan dissenyeu una aplicació nativa per a una plataforma (per exemple, iOS o Android), acostumeu a complir determinades directrius. Quan dissenyeu per al web, no hi ha tanta orientació. El que sol passar és que el vostre client té un conjunt de pautes gràfiques per a la seva marca que determina com haurien de ser les coses.
Tot i això, aquestes directrius solen adaptar-se als llocs web de màrqueting i el que hi ha no sempre condueix a bones decisions d’interfície d’usuari. Els tipus de lletra solen triar-se per motius de màrqueting, no per motius de llegibilitat. Els colors poden ser atrevits i cridaners, cosa que funciona en una campanya publicitària, però no en una aplicació que utilitzeu el dia a dia. Cal interpretar aquestes guies.
Hi ha poques pautes d’interfície d’usuari per al web. Es podria argumentar que el web és un melting pot de diferents estils. Si feu alguna cosa que sembli més una aplicació que un lloc web, heu de saber sobre els marcs més utilitzats com Bootstrap i ZURB Foundation. El marc comença a determinar l’aspecte de les coses perquè no voleu reinventar la roda. I això probablement és bo.
A la nostra empresa, ens agrada utilitzar Bootstrap. Proporciona mides predeterminades sensibles per a elements d'interfície d'usuari comuns, com ara botons, taules de dades i modals.
En el disseny de llocs web, esteu més restringit per les capacitats tècniques del web. Abans era difícil implementar flors visuals simples com cantonades arrodonides en un lloc web. Actualment ja han passat: ara podeu dibuixar interfícies d’usuari amb moltes ombres, transicions, animacions i fins i tot 3D.
Com a dissenyador, és molt més realista controlar el procés i el disseny al navegador. No he vist que molts dissenyadors d’interfície d’usuari es fessin càrrec de la programació d’interfície d’usuari d’una aplicació nativa, però és habitual que un dissenyador que faci l’HTML i CSS d’una aplicació web. Si podeu codificar els vostres propis dissenys, tindreu un avantatge sobre els vostres companys que no codifiquen i, per a mi, és l’única manera d’entendre realment el funcionament del web.
Restriccions web
Aviat descobrireu que no tots els trucs divertits que apreneu són compatibles amb tots els navegadors, i aquesta és la realitat del disseny per al web. És bo seguir principis coneguts com la millora progressiva, on carregueu contingut millorat sempre que sigui possible, però també penseu en la degradació del contingut.
Recentment s’ha popularitzat el ‘tallar la mostassa’. Campionat per l’equip web de la BBC, això implica diferenciar entre navegadors “bons” i “dolents” i proporcionar una experiència limitada als navegadors “dolents”. Tot i això, realment només funciona per a llocs de contingut.
Quan es tracta d’experiències similars a les aplicacions, molta gent limita l’assistència només a alguns navegadors principals, per facilitar el desenvolupament. Malauradament, això ens torna a la situació del 1996 en què necessiteu un determinat navegador per veure el contingut.
Millorar el vostre conjunt d’habilitats
Com podeu mantenir-vos al dia amb la indústria web en moviment i millorar el vostre conjunt de competències? Vegem alguns mètodes diferents per augmentar les vostres habilitats ...
Coneixement de la plataforma
Una part important de l’arsenal d’un dissenyador és el coneixement de la plataforma. Hauríeu de conèixer els diversos sistemes operatius i com els fa servir la gent. Com a dissenyadors, acostumem a utilitzar Macs, però és fàcil oblidar que la majoria de gent que utilitza caixes de Windows per fer el seu treball.
Crec que només es pot comprendre realment alguna cosa si l’utilitza vostè mateix. Prefereixo fer servir el meu Mac per dissenyar, però dedico molt temps a recuperar l’evolució de diverses altres plataformes. Tinc diverses còpies de Windows instal·lades al meu Mac com a màquines virtuals. He estat ocupat provant noves versions de Windows 10 amb el programa Insider de Microsoft per comprovar els diversos canvis de la interfície d’usuari.
També compro maquinari nou periòdicament per provar el seu funcionament. Vaig comprar un Apple Watch només per provar la plataforma. Aleshores el vaig vendre perquè sentia que no aportava tant a la meva vida.
A més, el web es pot veure com el seu propi sistema operatiu. Està en constant evolució, amb noves funcions que s’afegeixen cada setmana a tots els proveïdors de navegadors. Val la pena conèixer els aspectes tècnics dels navegadors, especialment pel que fa a les capacitats de CSS i gràfics. Heu de saber què són SVG i WebGL i com podeu utilitzar l’API Animacions web.
Totes les plataformes evolucionen amb el pas del temps i, com a dissenyador d’interfícies d’usuari, la vostra tasca és estar al dia. Al cap i a la fi, tot el que estigueu dissenyant no viu aïllat, sinó que forma part d’un ecosistema de programari més gran.
Torneu als conceptes bàsics
El que lluitem avui no és tan diferent del que lluitàvem fa 20 anys. Hi ha un munt de bons consells als llibres. Proveu Disseny defensiu per al web de Jason Fried i Matthew Linderman i Don’t Make Me Think de Steve Krug per començar.
Si no coneixeu conceptes com modalitat i assequibilitat, heu de llegir-ne. Hauríeu de poder explicar què és la llei de Fitts. La llei Gestalt de proximitat? Aquest és el pa i la mantega del disseny de la interfície d’usuari.
Inspira’t en jocs i pel·lícules
Com a dissenyador d’interfície d’usuari, em baso en altres fonts d’inspiració per fer el meu treball. Trobo molta inspiració en els jocs. Alguns jocs són molt complexos i els dissenyadors d’interfície d’usuari han hagut de resoldre els mateixos problemes d’interfície complexos que els dissenyadors d’interfícies d’usuari que treballaven en projectes empresarials.
Els jocs també poden significar tendències. El minimalisme que es troba als menús de Colin McRae Rally em recorda la direcció d’iOS7. D’alguna manera, el disseny d’animació d’interfície d’usuari que ara està de moda apareixia en jocs fa anys i anys. El pas del skeuomorfisme a les interfícies funcionals i nues i al "disseny pla" també ha estat evident en els jocs. Compareu Oblivion del 2006 amb Skyrim del 2011. Tots dos jocs són jocs de rol de la mateixa sèrie, però la diferència és sorprenent.
Les interfícies futuristes de pel·lícules de Marvel com Iron Man també han estat una inspiració per a mi. No són exactament exemples utilitzables, però sí que em fan pensar més sobre la informàtica en general. Volem un futur de pantalles o volem que desapareguin? Aquesta és probablement una bona pregunta per plantejar-se en un pub ple de dissenyadors.
Creixeu com a dissenyador a través del treball dur, la persistència, la conversa amb els vostres companys i la lectura molt gran. Fa aproximadament un any vaig llegir un article al New York Times sobre persones de fins als 80 anys que continuen perfeccionant el seu ofici. Sento que només començo. I tu?
