Image Image Image Image Image
Scroll to Top

To Top

apps

03

Mar
2017

In apps
disseny

By rogerserra

WORKFLOWS, WIREFRAMES I MOCKUPS

On 03, Mar 2017 | In apps, disseny | By rogerserra

Prèviament a la programació d’una aplicació mòbil o d’una pàgina web cal fer bé la feina de disseny de la navegació, de la interfície d’usuari i finalment fer una mica de testing de tot plegat. Per això sovint fem servir 3 parauletes en anglès que defineixen cada un dels processos. En aquest post ens proposem explicar-los una mica més.
 

WORKFLOWS – també els podem dir diagrames de fluxe, arbres de navegació, esquemes de navegació, etc… però amb el concepte workflow s’intenta posar èmfasis en que no ha de ser només un esquema de com s’imagina que serà l’estructura de la informació de l’app, sinó també de quina serà la navegació, la interactivitat, etc.. En definitiva, es tracta de dissenyar quins són els camins que l’usuari podrà seguir, quins volem que siguin principals i quins secundaris, etc… Parlem doncs principalment de l’experiència d’usuari (UX). 
 
 
En un símil arquitectònic, podríem dir que aquí es tracta de saber quines funcions volem que tingui l’edifici, que ens imaginem què farà la gent, que pensem si ha de tenir quantes plantes, com s’integrarà amb l’entorn, com s’hi mourà la gent, etc…
 
Hi ha moltes maneres de fer un workflow, de fet tantes com persones, però tots tenen un important element d’esquematització i de visualitzaci´de la informació gràficament. Via fletxes, etc.
 
WIREFRAMES – són els esquemes, els esbossos, de cada pàgina de l’app o web, on cal visualitzar l’espai que ocuparàn tots els seus elements. No es tracta encara d’un disseny final, és només fer el plànol de la casa un cop sabe. Es tracta de que reflecteixin el workflow alhora de prioritzar quines activitats han de ser principals i quines secundaries, com mostrar la informació a cada pàgina etc.
D’aquesta informació acabaran sortint tot les pantalles que necessitarà l’aplicació mòbil. Cal tenir en compte les limitacions de disseny i usabilitat i respectar també els GUI de les plataformes. No tot és possible en un wireframe.
 
 
 Seguint amb el símil arquitectònic, aquí es tracta de fer els plànols amb autocad, decidint on anirà i com serà cada habitació, quina estructura tindrà l’edifici, etc… però aquí encara no triem els quadres ni el color de les parets.
 
 WIREFLOWS – De vegades, per a apps amb una navegació i interactivitat complexe, és interessant realitzar un esquema que vinculi les pantalles i la interactivitat, és a dir, que integri el wireframe i el workflow. Això pot ser de gran ajuda als programadors per a entendre bé com ha de funcionar l’app i també alhora de realitzar el mockup.
 
MOCKUPS – Amb el símil que feiem amb arquitectura, alguns desenvolupadors pensen en aquesta fase com la del decorador, però està clar que és més que això. No només es posen els colors, logos, icones definitives, etc… sinó que penso que símil sería millor si pensem amb els renders 3d o fins i tot la maqueta de l’edifici. El mockup serveix per tenir una idea visual de com quedarà l’app, però sobretot també per a  poder simular-hi els fluxes i interaccions que hem pensat inicialment i validar que funcionen (que s’entenen i són àgils)
 
 

Tags | , , ,