El disseny no és només píxels i patrons. També és ritme i sentiments. Alguns productes semblen cinematogràfics ja que ens guien a través de la incertesa, l'alleujament, la confiança i la calma sense moure'ns. Això és l'emoció en flux. D'altres van socavar els seus propis moments amb una broma al lloc equivocat, una finestra emergent sorpresa o una transició agitada. Això és Emoció en Conflicte. Aquestes no són idees només d'UX. Podeu veure'ls a tot arreu en l'entreteniment. I la manera més clara de sentir la diferència és comparar com l'anime gestiona els canvis emocionals amb com ensopeguen les pel·lícules de Marvel i DC. Farem servir dos exemples concrets, un de Dan da Dan (sèrie d'anime a Netflix) i un de la pel·lícula Superman de James Gunn, per definir els dos conceptes i, a continuació, traduir-los en patrons pràctics de disseny de productes que podeu aplicar immediatament. Nota: ens centrarem en productes digitals, com ara aplicacions, SaaS i web. Emotion In Flow (Anime: Dan da Dan) A Dan da Dan, la gamma tonal és salvatge, horror, comèdia, tendresa, però flueix. Exemple: en un arc, els protagonistes es troben en una estranya recerca còmica que implica els "genitals daurats" d'un dels personatges principals (sí, de veritat), i en un altre, estem abocats a una història desgarradora d'una mare el fill de la qual és segrestat. Sobre el paper, aquest canvi hauria de ser un accident de cotxe. A la pantalla, és coherent i emocionalment llegible. Per què funciona això a la pantalla?
Continuïtat de les apostes. Fins i tot quan arriba un gag, els objectius i el perill dels personatges es mantenen intactes. L'humor allibera tensió després d'una mini-resolució; no nega l'amenaça. Indicis clars de l'estat d'ànim. La música, l'enquadrament, el ritme i les reaccions dels personatges telegrafien el següent sentiment. Esteu preparat per al canvi, de manera que el conduïu en lloc de ser arrossegat. Una àncora emocional. Les relacions segueixen sent l'estrella polar, de manera que el cor de l'escena no es perd quan el to es mou.
Com es tradueix això a UX? Els bons productes fan el mateix: preparar-se, fer la transició, resoldre, de manera que els usuaris es quedin immersos a mesura que canvia el to emocional.
Emotion In Conflict (Marvel/DC: James Gunn's Superman) Lois i Clark estan mantenint una conversa sincera i íntima, un moment lent i humà, mentre que al fons es reprodueix un gag corrent (un monstre que es colpeja amb un bat de beisbol gegant). El gag roba el focus just quan l'escena et demana que sentis alguna cosa real. El resultat és un xoc tonal que perfora l'emoció en lloc d'alliberar-la. Per què això falla a la pantalla?
Augment de la càrrega cognitiva. El que està passant aquí es relaciona directament amb la teoria de la càrrega cognitiva. Quan una escena (o interfície) demana als usuaris que processin dos senyals emocionals competitius alhora, introdueix una càrrega cognitiva aliena, un esforç mental que no té res a veure amb la tasca o el moment en si. En lloc de centrar-se en el ritme emocional, l'atenció es divideix entre senyals que no es resolen entre si. En els productes, això és el que passa quan l'humor, les promocions o els canvis inesperats de la interfície d'usuari s'interposen en moments de gran risc: els usuaris es veuen obligats a interpretar el to i la intenció alhora que intenten actuar, la qual cosa alenteix la comprensió i augmenta l'estrès. Batecs competitius al mateix temps. L'acudit se superposa al clímax d'un ritme seriós; el públic presta atenció al canvi més que al sentiment. Sense traspàs tonal. No hi ha cap transició que aconsegueixi la intimitat abans que arribi l'humor, de manera que el moment se sent socavat més que resolt.
Com es tradueix això a UX? En els productes, aquest és el problema del confeti abans de la confirmació, l'error descarat en un flux de diners o el modal promocional que apareix just al mig d'una tasca crítica. Això també augmenta la càrrega cognitiva: els usuaris han de processar l'humor mentre intenten solucionar un problema, la qual cosa els frena i augmenta l'estrès.
Definicions ràpides Emoció a Flow Els canvis emocionals se senten guanyats, telegrafiats i cronometrats perquè resolguin els ritmes anteriors. La immersió s'aguanta. L'emoció en conflicte Un interruptor (o tall dur) que punxa un ritme emocional en directe. Pauses d'immersió.
Ara que l'hem nomenat: com es connecta això amb UX? Com les emocions configuren la memorabilitat del producte La gent no recorda la mitjana d'una experiència; recorden cims i el final. Si el màxim del vostre flux és la frustració, o el vostre final és desordenat, això és el que s'enganxa. Així que dissenyeu la corba emocional a propòsit. Les emocions viuen en tres capes (del disseny emocional de Don Norman) i el vostre producte ha d'alinear-les:
Visceral (intestí): senyals de primera impressió: visuals, moviment, hàptics, so. Exemples: un carregador d'esquelets constant calma més que un nerviosismefiladora; un suau timbre d'èxit/toc hàptic permet que la victòria aterri sense cridar; La pau/direcció coherent diu a l'ull què ha canviat. Comportament (fer): Puc completar la meva tasca sense problemes? La fricció aquí significa estrès. Exemples: tres passos de pagament clars amb un progrés previsible; estats d'error que expliquen què va passar i com recuperar-se; validació en línia en lloc d'explosions al final del formulari. Reflexiu (significat): La història que m'explico després: "Va valdre la pena? Confio en això?". Exemples: una pantalla de tancament ordenada ("Fet. Tindreu X el divendres") dóna el tancament; un petit resum (“Has estalviat 18 € aquest any”) crea orgull sense focs artificials.
Les microinteraccions són la cola emocional. Cadascun té un activador (jo toc Pagar), regles (què fa el sistema), comentaris (progrés i un resultat clar) i bucles o modes (què passa si l'usuari ho torna a provar). Fes-ho bé i les teves transicions uneixen els sentiments. Equivoqueu-los i trenquen el flux.
El full de ritme emocional s'ajusta clarament a les capes d'experiència de Norman:
La incertesa viu a les capes viscerals i del comportament primerenc, on els usuaris confien en senyals sensorials (moviment, claredat, retroalimentació) per entendre què està passant. La claredat està fermament a la capa de comportament, el moment en què la intenció del sistema i la següent acció de l'usuari es bloquegen al seu lloc. L'anticipació és una combinació de comportament (l'usuari està fent alguna cosa amb un propòsit) i reflexiu (l'usuari ja està predint el resultat i imaginant el que ve després). L'assoliment és un cim reflexiu, on l'usuari avalua l'èxit, la confiança i si l'experiència "s'ha sentit correcta". Calma/tancament és principalment reflexiu, ajudant els usuaris a embolicar el significat de la interacció i decidir si el producte és de confiança i val la pena tornar-hi.
En productes reals, aquesta seqüència no desapareix quan les coses van malament. Els errors, la latència i els estats degradats no són excepcions a l'arc emocional, sinó que en formen part. Vist a través d'una lent narrativa, aquests moments són els obstacles en el viatge de l'heroi. Un estat de recuperació ben dissenyat reconeix el contratemps, aclareix el que va passar i guia el següent pas sense introduir nous sorolls emocionals. Quan el fracàs es tracta com un ritme en lloc d'una ruptura, el flux emocional es pot preservar fins i tot sota estrès. Exemples d'UX: Emoció en flux vs. Emoció en conflicte Emoció en flux Pagament fet correctament (estil Stripe/Apple Pay): passos curts, progrés clar i estat d'èxit nítid (una marca de verificació amb un hàptic suau opcional). El cim (èxit) aterra i el final dóna tancament (rebut o pas següent).
Estat de recollida (aplicacions de transport, per exemple, Uber, Free Now o Bolt): les actualitzacions progressives mantenen l'orientació i redueixen l'ansietat ("Conductor que arriba", "2 minuts de distància", "Arribat"). La incertesa es converteix en claredat, amb un moviment suau preparant cada transició.
Emoció en conflicte Nota: aquí no anomenem productes específics; respectem el treball que hi ha darrere. En canvi, estem mostrant els patrons que causen conflictes emocionals i exactament com solucionar-los.
Bromes en moments greus. Estat de còpia en error descarada per diners/salut/seguretat. Els usuaris estan estressats; L'humor augmenta la irritació. Celebració abans de la resolució. Confetti, focs artificials o sons forts abans de la confirmació. La festa interromp el clímax. Salts en estat dur. Modals/promocions sorpresa a mitja tasca, adquisicions a pantalla completa sense preparació. Se sent com un tall brusc durant un ritme emocional.
Què podeu fer per garantir que l'emoció flueixi Aquí teniu una pàgina de nocions amb la plantilla completa que podeu duplicar:
Plantilla de full de ritme emocional.
1. Escriu primer el full de ritme emocional Per a cada flux bàsic (incorporació, pagament, recuperació), mapeu els sentiments per pas: incertesa → claredat → anticipació → assoliment → calma. Adjunteu còpies, moviments i microinteraccions a cada ritme. (Qui porta l'emoció on?) 2. Alineeu el to amb el risc de la tasca Creeu una matriu de tons (nivell de risc × estat). En errors d'alt risc, estigueu tranquils, clars i orientats a la solució. Estalvieu el joc per a contextos de baix risc. Fragments de plantilla:
Error d'alt risc: "No hem pogut verificar el vostre identificador. Torna-ho a provar o contacta amb l'assistència". Estat buit de baix risc: "Encara no hi ha res. Vols començar amb una mostra?"
Aquí és on molts productes madurs es desplacen en silenci cap a un conflicte emocional. Amb el pas del temps, els equips afegeixen plaer per hàbit més que per intenció. Una autocontrol útil és preguntar-se: si eliminem tots els elements lúdics o de celebració d'aquest pas, el flux encara se sentiria humà, o seriaaquests elements que emmascaren la fricció? Un bon disseny emocional aclareix l'experiència; un gran disseny emocional no necessita decoració per compensar la confusió. 3. Disseny màxim i final a propòsit Enginyera un pic clar (el moment de l'èxit) i un final net (confirmació i què passa després). Mesureu el record i la satisfacció en ambdós punts. 4. Utilitzeu les microinteraccions com a ponts, no com a focus
Preparació: pistes de moviment petites i consistents abans d'un gran canvi d'estat. Confirmeu: l'èxit s'assenta subtilment, amb una facilitat lleugerament més lenta i un hàptic lleuger opcional. Recuperació: la fallada repetida canvia amb gràcia el to d'alegria a de suport i guia el següent pas.
5. Test de continuïtat emocional A les sessions d'usabilitat, no us pregunteu només "Va ser fàcil?" En comptes d'això, podeu preguntar "Quina sensació ha canviat aquí?" Si escolteu "confós → divertit → confós", teniu un conflicte, no un flux. Itera transicions, no només pantalles. Com evitar les emocions en conflicte: llista de verificació ràpida Banderes vermelles → correccions:
Bromes en moments greus → canvia per un llenguatge tranquil, directe i un camí de recuperació clar. Celebració abans de la resolució → moure la celebració a després de la confirmació; atenuar-lo per a tasques d'alt risc. Salts d'estat dur → transicions de preanunci; mantenir l'enquadrament coherent; utilitzar un moviment significatiu per preservar la continuïtat. Deriva de to entre equips → centralitzeu les directrius de veu i to amb exemples per nivell de risc i estat.
Hi ha moments en què trencar el flux emocional és intencionat i necessari. Els avisos de seguretat, les confirmacions legals i les alertes crítiques per a la seguretat sovint es beneficien dels canvis de to bruscos. En aquests casos, la interrupció indica importància i demana atenció. El problema no és el conflicte emocional en si; és un conflicte accidental. Quan els dissenyadors trien la interrupció deliberadament, els usuaris entenen el que està en joc en comptes de sentir-se un cop de cert. Conclusió Les grans experiències són experiències dirigides. Dan da Dan mostra com moure's pels sentiments sense perdre'ns: es prepara, fa transicions i resol. L'escena de Superman mostra el contrari: un gag que xoca amb un ritme sincer. Fes el primer. Mapeja els teus ritmes emocionals, alinea el to amb el risc de la tasca i deixa que les microinteraccions uneixin els sentiments perquè els usuaris recordin el pic correcte i l'extrem correctes, no el cop de cernatge al mig.
