Dissenyar per a diverses plataformes

Tendències de navegació web

La “gran guerra” per al desenvolupador web ha estat fins ara aconseguir la compatibilitat entre tota l’enorme varietat i versions de navegadors web disponibles al mercat.

Avui dia i com a tendència creixent s’afegeixen altres complicacions. La tecnologia avança molt ràpidament i anem cap a un futur absolutament mòbil en tots els sentits, de manera que el desenvolupador web no només haurà de “batallar” amb els diferents navegadors, sinó també amb els diferents dispositius que es fan servir per navegar per Internet.

Font: BradFrostWeb.com
Font: BradFrostWeb.com

La varietat de dispositius, marques, versions, funcionalitats, mides, prestacions, evoluciona a una velocitat vertiginosa, fet que fa del tot impossible plantejar una versió web per a cada cas i alhora ens impossibilita plantejar les aplicacions web estàndard i que siguin usables i visibles en tots els dispositius, sense excepció.

Podeu veure un vídeo resum d’estadístiques d’ús de dispositius mòbils:

https://youtu.be/IZA9qjt2A48

Experiència d’usuari

Criteris per a dissenyar una bona experiència d’usuari entre diferents plataformes d’acord amb Jakob Nielsen:

  • Continuïtat visual: les interfícies d’usuari o IU (en anglès, UI) poden variar per a adaptar-se a les guies de la plataforma, però el disseny s’ha d’assemblar prou perquè l’usuari el reconegui a l’instant i no se senti perdut.
  • Continuïtat en les funcions: per molt petit que sigui el dispositiu per al qual dissenyem, l’usuari ha de tenir la sensació que les funcions principals de la nostra aplicació estan igual de disponibles que en els seus “germans grans”.
  • Continuïtat en els continguts: haurem d’usar el mateix to i el mateix llenguatge en totes les plataformes, de manera que l’usuari “ens reconegui” en totes.
  • Continuïtat en les dades: la informació que proporciona l’usuari ha d’estar disponible i actualitzada a l’instant en totes les plataformes i dispositius, sense que aquest hagi de fer res perquè la informació se sincronitzi.

Com es pot aprofitar millor l’espai?

Quan dissenyem interfícies interactives, l’espai limitat que ens ofereix un dispositiu mòbil és tot un desafiament, sobretot quan treballem en un mateix disseny per a diverses plataformes. Una de les maneres de resoldre la falta d’espai és dissenyar “en profunditat”, és a dir, superposant diferents capes d’interacció que podem mostrar o ocultar segons ho necessitem. D’aquesta manera, als coneguts eixos x i y afegim un tercer eix, z, que aporta profunditat al nostre disseny. L’estil Material Design del sistema operatiu Android n’és un bon exemple.

Per a utilitzar aquest recurs correctament hem de tenir en compte dos elements:

  • Capes. Són l’element bàsic quan dissenyem “en profunditat”. Podem usar capes per a mostrar el menú de navegació i botons, o fins i tot quan recorrem a efectes com la paral·laxi (vegeu parallax scroll)
  • Transicions. Haurem d’animar les capes perquè l’usuari entengui la jerarquia entre les diferents capes utilitzades. Les transicions més habituals són el lliscament (per exemple, per a mostrar un menú ocult en una capa inferior) i el zoom, encara que en podem utilitzar d’altres.

Font: The Z-Axis: Designing for the Future