Abans de començar

Aquesta guia amplia la fitxa de Diagrama de flux. El diagrama de flux és un mètode de disseny centrat en l’usuari inscrit en les fases de definició i generació que permet representar cadascun dels passos de la interacció de l’usuari fins a aconseguir el seu objectiu.

Aquesta tècnica es basa en la informació que s’hagi manejat prèviament en els escenaris i els user journeys, i representa un pas més en la definició del disseny. En la fase de modelatge, els escenaris ens serveixen per a descriure de manera narrativa com utilitza el producte o servei un usuari i ens ajuden a respondre la pregunta «què?»: què ha de fer el producte o servei i quines funcionalitats ha d’incloure per a facilitar als usuaris l’assoliment dels seus objectius? A partir d’aquesta informació, elaborem els user journeys incorporant les expectatives, emocions i nivell de satisfacció de l’usuari en cada pas de la interacció. Aquesta tècnica ens ajuda a entendre millor el context, detectar punts febles de la interacció i també oportunitats de millora.

Prenent com a punt de partida tota la informació obtinguda en els escenaris i els user journeys, els diagrames de flux se centren a definir i analitzar detalladament la interacció amb la representació de totes les possibles opcions que pot trobar un usuari fent una tasca. Per tant, fer els diagrames de flux permet:

  • Visualitzar les pàgines o el contingut amb el qual interactua l’usuari i les accions que són necessàries perquè aconsegueixi la seva meta.
  • Entendre d’on ve l’usuari i quina serà la seva propera destinació.
  • Identificar camins sense sortida, accions que requereixen retorn i possibles errors en la lògica de la interacció.

D’altra banda, segons el tipus d’interacció, els diagrames de flux poden representar:

  • Task flows: fluxos que són únics per a tots els usuaris i que, per tant, es faran de la mateixa manera, com per exemple el registre en una aplicació. En aquest tipus de fluxos és necessari analitzar la interacció i determinar la navegació òptima. Seguint amb l’exemple del registre en una aplicació, no podem estendre’l en gaires passos o camps de formularis, sinó que s’ha de trobar l’equilibri òptim entre la informació que necessitem i el temps que els usuaris estan disposats a dedicar-hi.
  • User flows: fluxos no tancats que representen la interacció d’un usuari específic. No són únics ni lineals, sinó que cada persona traça un camí al llarg del producte o servei, com per exemple la cerca d’un producte en una botiga en línia. En aquest cas és necessari analitzar totes les rutes possibles i tractar d’optimitzar l’experiència.

L’objectiu dels diagrames de flux és, per tant, analitzar amb detalls els journeys més importants del producte o servei per optimitzar-los, i també comunicar a la resta de l’equip com s’ha de desenvolupar la interacció.

Preparació

Abans d’elaborar els diagrames de flux és necessari tenir en compte, d’una banda, la informació que representaran i, de l’altra, els elements visuals que utilitzarem per a dibuixar-los.

Quant a la informació, és molt útil haver fet el modelatge (personas i escenaris), i també els user journeys (o altres mètodes, com l’storyboard o els casos d’ús) i l’arbre de continguts del producte o servei.

Respecte a la representació visual dels diagrames de flux, és recomanable seguir l’estàndard de formes i colors que es defineix a continuació:

Font: elaboració pròpia.

Encara que no hi ha un estàndard tancat sobre l’aspecte que han de tenir els diagrames de flux, l’ús d’aquestes formes s’ha estès i, com que permeten representar la interacció de manera relativament ràpida, s’utilitzen habitualment a aquest efecte. No obstant això, hi ha altres formats que es poden considerar en funció de les característiques del producte o servei.

Desenvolupament / execució

Per a elaborar els diagrames de flux, es recomana seguir el procés següent:

    1. Definir el punt d’inici i el punt final de la interacció: definir com comença la interacció de l’usuari amb el producte o servei i tenir clar quin és el seu objectiu final (sempre sobre la base del modelatge de personas i escenaris).
      Per exemple: punt d’inici = obre l’aplicació; objectiu = encarregar menjar a domicili.
    2. Determinar la seqüència de passos. En funció de l’estructura de l’arbre de continguts, definir la seqüència de passos de la interacció de l’usuari des de l’inici fins que aconsegueix la seva meta.
      Per exemple: log in > menús disponibles > detall del menú x > selecció del menú x > introduir adreça > pagament > confirmació.
    3. Aplicar les preguntes següents per a cadascun dels passos identificats:
        • Què passa abans d’aquest pas?
        • Què passa a continuació?
        • Aquest pas és una acció directa o l’usuari ha de prendre una decisió?
        • És necessària alguna acció per a fer el pas següent?
        • Què passa si les coses no van com haurien d’anar?
        • Són necessaris camins alternatius?

      En aquest punt l’objectiu és identificar quins passos de la interacció impliquen que l’usuari prengui una decisió per tenir en compte totes les vies possibles.

    4. «Dibuixar» el diagrama amb tota la informació definida en els tres passos anteriors, crear el diagrama seguint l’estàndard de formes descrit en la secció «Preparació».

Anàlisi / Resultats

Una vegada elaborats els diagrames de flux, cal analitzar els resultats tenint en compte que permeten:

  • Detectar possibles errors abans de donar pas al desenvolupament del producte o servei.
  • Identificar cada pas en la interacció per a analitzar d’on ve l’usuari i a on va, de manera que en tot moment es tinguin en compte les necessitats dels usuaris i que la interacció tingui sentit.

Executar iteracions ràpides durant el procés de disseny o desenvolupament.

Exemples

Font: elaboració pròpia.

Referències

Baskanderi, N. (2017). «UX glossary: task flows, user flows, flowcharts and some new-ish stuff». <https://uxplanet.org/ux-glossary-task-flows-user-flows-flowcharts-and-some-new-ish-stuff-2321044d837d>. [Data de consulta: 25 de gener de 2021].

Handley, A. (2018). «User flow is the new wireframe». <https://uxdesign.cc/when-to-use-user-flows-guide-8b26ca9aa36a>. [Data de consulta: 25 de gener de 2021].

Hanington, B.; Martin, B. (2012). Universal methods of design: 100 ways to research complex problems, develop innovative idees, and design effective solutions. Rockport Publishers.