Vols un web agradable i entenedor? Pensa'l per a mòbil primer i per a escriptori després
La pràctica de molts equips que han de dissenyar un web els porta a pensar primer com es disposaran els elements que volen que el web tingui en pantalles grans primer, tipus ordinador d’escriptori o de portàtil, i quan han acabat, passen a fer la versió per a mòbil. La pantalla de l’ordinador és sovint la primera que ve al cap quan es pensa a consultar continguts a internet i, per això, aquesta inèrcia és comprensible. Però fer-ho a l’inrevés és generalment una idea millor, i són pocs els escenaris en què convé començar a projectar com serà un producte digital al final pensant primer com seria en pantalles grans.
Més simple, més clar, més directe
Els sistemes sempre van al màxim de la capacitat del menys capaç dels elements que els componen. Un dels principals avantatges de pensar un disseny d’interacció i un disseny gràfic d’un web començant a partir de com ha de veure’s en un mòbil és que la pantalla del mòbil té dimensions més modestes que la dels ordinadors portàtils i de sobretaula, i això limita l’espai disponible per posar-hi elements. Aquesta manera de treballar els dissenys web en particular, i els dissenys de productes digitals més en general, es coneix en l’argot com mobile-first.
La limitació obliga a la simplificació. Sempre és més fàcil tenir molt desordre en una habitació o en una taula que és molt gran. Començar pensant un web per la versió en què caben menys elements és la millor garantia per assegurar que hi deixem fora els elements innecessaris.
I anar directe al gra és, en el disseny de productes digitals, un valor a perseguir. Quan les persones interactuem amb interfícies, ho fem des d’un punt de vista pràctic: volem que el caixer automàtic ens doni els diners, imprimir un document o obtenir un bitllet de tren. No volem haver d’aprendre la idiosincràsia pròpia de la interfície, sinó que usem la interfície com a intermediació indispensable per assolit un objectiu i prou.
No t’oblidis de posar-li volant al teu cotxe
Si pensar primer en el mòbil ajuda a no sobrecarregar la interacció i el disseny gràfic, també és una eina perfecta que anima a no deixar-se res important en el moment en què estem pensant com serà un web. Tots els cotxes tenen volant, des dels minis fins als SUV, passat pels tot terreny i els karts. En planificar un web per a mòbil, la seva versió més senzilla i mínima, ens assegurem que res d’allò que és essencial queda fora del disseny del producte digital, perquè –també en mòbil– el fet indispensable hi ha de ser, passi el que passi.
Un cop estan clares les funcionalitats que el web ha de tenir en mòbil tant sí com no, afegir-ne de més en contextos on els dispositius tenen més capacitat sempre és possible, mentre que a l’inrevés no ho és. Tot allò que cap en una pantalla petita hi cap en una de més gran. A la inversa, això no passa. De la pràctica d’anar incorporant funcionalitats en contextos tècnics en què passen a ser possibles se’n diu progressive enhancement.
Quan l’equip encarregat de pensar una interfície ho ha fet projectant tot allò que volia incloure-hi en un espai gran i després ho ha intentat encabir tot en un de més petit, es nota. La tendència quan es fa això és intentar posar totes les funcionalitats i, per tant, tots els elements d’interacció que les fan possibles (botons, enllaços, elements interactius, etcètera) en el nou context. És a dir: una temptació habitual en aquests casos és posar en mòbil el mateix que en ordinadors d’escriptori però fent-ho tot més petit. El resultat és llavors inevitable: una interfície caòtica, botons que costa distingir d’allò que tenen al costat, texts illegibles i imatges que només es veuen amb lupa.
El primer és el primer
Un altre gran avantatge de començar un web pensant en el mòbil és que, d’una manera intuïtiva, això acompanya a presentar la informació en una pàgina simple d’una manera que es correspongui a la importància real de cada informació o element que l’equip de disseny hi està fent aparèixer.
Els portàtils, els ordinadors d’escriptori i les pantalles grans permeten dissenys d’interfície amb múltiples columnes, cosa que significa que, a primera vista, es pot situar informació diversa en lloc d’una sola idea. Però de la mateixa manera que els textos, tot i dir moltes coses, solen tenir un sol titular per alguna raó, una plana simple dins un web acostuma a tenir, en general, una raó de ser.
Els mòbils obliguen, a la pràctica, a pensar en una columna única. Això implica, necessàriament, pensar com organitzar la informació per tal que l’usuari se la trobi com se la trobaria en un llibre: primer allò que li permet entendre allò que vindrà després, i no en paral·lel.
Aquesta manera d’estructurar la informació s’alinea amb la forma amb què els visitants consulten la informació. Però és habitual no fer-ho així per contemporitzar diferents necessitats de traslladar informació. O, fins i tot, amb la intenció d’acomodar les exigències d’aparèixer en “el primer scroll” que diferents perfils dins l’organització que crea un web tenen pel que fa a la informació que senten com a seva. Aquestes vies no són òptimes perquè porten a pensar sobre un tauler que és massa gran i on tot i cap, i això no ajuda a l’esforç per jerarquitzar la informació de manera adequada pel visitant: aquella persona per a qui el web es crea, en definitiva.
La interacció tàctil és digital
Els sliders, o carousels, aquells components d’un web que mostren diverses imatges en una mateixa posició, necessiten un element d’interacció per passar d’una imatge a la següent o a l’anterior. En un dispositiu tàctil, com el mòbil, aquesta interacció es pot resoldre molt fàcilment: amb el desplaçament amb el dit. Quan aquest mateix component de la interfície, l’slider, el pensem per a ordinador, tenim, almenys, dos perifèrics d’entrada més que ens poden permetre interactuar amb ell: el ratolí i el teclat, que té fletxes a esquerra i a dreta. Cap dels dos no presenta cap inconvenient: la introducció del teclat en l’eqüació no requereix afegir cap element visible pel que fa a disseny gràfic; i el del ratolí sí, però en una pantalla més gran també hi tenim més espai.
Ara imaginem que pensem el web a l’inrevés: primer en escriptori. Estem decidint com ha de ser la interfície i, en aquest punt de la història, no hi ha cap inconvenient a posar un menú desplegable a l’espai inferior de la pantalla, per exemple un selector d’idioma. O a projectar-hi una interacció que només succeïx en posar el cursor a sobre d’un element, no en fer-hi clic. Però què passa quan intentem adaptar aquestes dues decisions a un telèfon mòbil? La segona directament és inviable: en una pantalla tàctil no hi ha cursor. En la primera, quedem obligats a solucions contraintuïtives, com que el desplegable es desplegui cap amunt en comptes de cap avall, la qual cosa és discrepant amb les expectatives de l’usuari.
No és només una qüestió d’espai: pensar com funcionaran les coses en el mòbil primer també obliga a pensar les interaccions des d’una posició que després fa més còmodes adaptar-les a altres circumstàncies que quan es pensa en ordinadors d’escriptori.
Estalvi (no només de pantalla)
Un efecte secundari de la simplificació obligada és l’estalvi. Totes les simplificacions comentades fins ara que comporta el fet de dissenyar pensant primer per a mòbils acaben produint un web menys sobrecarregat i que, per tant, ocupa menys espai en disc i és més ràpid de carregar. Això no és important només perquè els usuaris són, sovint, molt impacients. També és important perquè millora la velocitat de càrrega, que és un dels factors primordials que permeten el correcte posicionament en cercadors (SEO) d’un web.
Un altre estalvi menys directe, però no menys rellevant, és en iteracions sobre el disseny que acabarà necessitant el web. Més d’hora que tard, un disseny pensat per pantalles grans, quan arribi a la fase de programació, haurà de tornar cap a l’equip de disseny perquè hi faci canvis. Això passarà en el moment en què els programadors localitzin interaccions que no es poden programar perquè han estat plantejades per a un escenari de màxims i, en el millor dels casos, s’han reconduït després a un escenari de mínims, i s’han acabat definint en una forma i un funcionament que és impossible d’implementar. Per què impossible? Bé perquè la interacció no existeix en l’escenari de mínims (com l’exemple anterior: coses que només passen quan el cursor està sobre un element), o perquè, tot i ser tècnicament viable, li treuen el sentit al web en mòbil, com per exemple quan els elements d’interacció s’empetiteixen fins a límits insostenibles per encabir-los.
