Inici de sessió sense contrasenyes

Les contrasenyes no fallen perquè la gent sigui «despistada». Fallen perquè el mateix model està dissenyat per xocar amb la vida real: massa comptes, massa regles, massa moments en què l’usuari només vol entrar i continuar. En UI això es tradueix en un patró molt reconeixible: pantalles d’inici de sessió que semblen simples, però que amaguen fricció acumulada (errors, bloquejos, restabliments, suport, abandonament).

I el pitjor no és l’«Has oblidat la contrasenya?» en si. El pitjor és el que implica: que per accedir a un producte necessito recordar un secret (i recordar-lo bé) en el moment exacte, des del dispositiu exacte, amb el teclat exacte. Si fallo, em toca un flux de recuperació que normalment trenca el ritme, genera dubtes («m’arribarà el correu electrònic?») i afegeix càrrega mental («quina contrasenya hi vaig posar?»). A nivell d’experiència, la contrasenya converteix l’accés en un examen.

Aquí és on entren les passkeys amb una promesa molt atractiva des del disseny: fer que l’inici de sessió sigui més fàcil i més segur alhora. Fàcil, perquè el «secret» deixa de ser a la memòria de l’usuari i passa a ser una acció quotidiana: desbloquejar el dispositiu (biometria o PIN). I més segur, perquè redueix dràsticament el phishing: no hi ha cap contrasenya que l’usuari pugui teclejar en una web falsa o compartir sense voler. Dit d’una manera pràctica: la passkey no només accelera l’accés, també elimina una part enorme del risc sense demanar a l’usuari que es converteixi en expert.

Però aquesta promesa només es compleix si el disseny acompanya. Les passkeys no són «afegir un botó nou»: són canviar el contracte mental de l’inici de sessió. I aquí és on l’UX s’ho juga: com ho presentes, quan ho ofereixes, què expliques (i què no), i com gestiones els inevitables «i si…?» (un altre dispositiu, un navegador que no ho admet, una persona que no vol biometria, un dia que simplement falla). Aquest article va d’això: patrons d’interfície perquè l’«Inici de sessió sense contrasenyes» sigui una millora real i no una altra capa de confusió.

Què són les passkeys

Una passkey és una manera d’iniciar sessió sense contrasenya utilitzant el desbloqueig del teu dispositiu (empremta, cara o PIN). En lloc de demanar-te que recordis i escriguis un secret, el sistema confirma que ets tu amb un gest que ja fas cada dia. Per això, a la pantalla, l’«inici de sessió» s’assembla més a desbloquejar que a «autenticar-te». I com que no estàs teclejant una contrasenya, es redueix molt el risc de caure en pàgines falses: no hi ha res «copiable» que l’usuari pugui introduir on no toca. A la pràctica: entres més ràpid, amb menys errors i amb menys drama.

El més important per al disseny és entendre què canvia en l’experiència:

De recordar → a confirmar. L’usuari deixa de «demostrar» que sap una contrasenya i passa a «confirmar» la seva identitat amb un gest breu.
De text → a interacció nativa. El moment clau ja no passa a la teva UI, sinó al diàleg del sistema (biometria/PIN). La teva interfície ha d’acompanyar, no competir.
De «recuperar contrasenya» → a «recuperar accés». El problema ja no és «he oblidat la contrasenya», sinó «he canviat de dispositiu / ara no puc fer servir aquest mètode». Això canvia del tot com planteges el fallback i l’ajuda.
De desconfiança silenciosa → a senyals clars. Quan l’inici de sessió és tan ràpid, l’usuari necessita microsenyals que li confirmin què està passant («entraràs amb el teu dispositiu») sense explicacions tècniques.

En resum: les passkeys no són «més seguretat» com a càstig; ben dissenyades, són seguretat que es percep com a comoditat.

Quan i com introduir-les

L’adopció de passkeys no es guanya amb un pop-up insistent. Es guanya triant el moment adequat, reduint dubtes i deixant clar el benefici per a la persona, no per al teu roadmap. En disseny, això va de moment + llenguatge + control.

Moments ideals per oferir passkeys

1. Just després d’un inici de sessió correcte

L’usuari ja ha aconseguit entrar, està «confiat» i no està bloquejat.
Patró: minibàner o pantalla lleugera després de l’inici de sessió: «Fes que la propera vegada sigui més ràpida».

2. Després d’una acció d’alt valor

Ex.: completar una compra, publicar alguna cosa, configurar el perfil.
Aquí l’«estalvi de fricció futura» té sentit.

3) En el primer «dolor» real

Ex.: després d’un «codi incorrecte», un intent fallit o un restabliment.
Atenció: no com a «càstig», sinó com una sortida elegant: «Evita això la propera vegada».

4. A Configuració → Seguretat

Sempre hi hauria d’haver un lloc estable on activar-ho, revisar dispositius, etc.
Aquí el to pot ser més explicatiu, però sense argot.

Què cal evitar

Forçar les passkeys en el primer contacte si l’usuari encara no confia en el teu producte.
Interrompre l’onboarding amb un «tema de seguretat» abans que l’usuari vegi valor.

Patrons d’UI que augmenten el «sí»

Patró A: «Primari suau»

CTA principal: «Crear una passkey» o «Activar l’inici de sessió sense contrasenya»
Secundari clar: «Ara no»
Important: l’«Ara no» s’ha de percebre com a legítim, no amagat.

Patró B: Benefici immediat + context

Una sola frase que connecti amb el dia a dia:
- «Entra amb 1 toc, sense recordar contrasenyes.»
- «Més ràpid i més difícil d’enganyar amb pàgines falses.»

Patró C: Expectativa del que passarà

Microcopy just sota el botó:
- «Faràs servir la teva empremta/cara o el PIN del teu dispositiu.»
Això redueix l’ensurt de «què em demanaran ara?»

Patró D: Tranquil·litat sobre la privacitat

Una línia simple, sense tecnicismes:
- «La teva empremta o cara no es comparteix amb nosaltres.»
Si vols ampliar-ho, fes servir un «Més informació» discret, no un bloc de text.

Microcopy que funciona

Sí:

Orientat a la vida real: «Més ràpid la propera vegada», «Sense contrasenyes», «Evita restabliments».
Amb llenguatge d’acció: «Crear», «Activar», «Fer servir aquest dispositiu».
Amb control: «Ho pots tornar a canviar quan vulguis.»

No:

Argot: «WebAuthn», «FIDO», «clau pública/privada».
Por: «Protegeix el teu compte o et podrien hackejar» (fatiga + desconfiança).
Promeses absolutes: «No tornaràs a tenir mai més problemes d’accés».

Un miniguió d’adopció

Títol: «Inici de sessió sense contrasenyes»
Text: «La propera vegada entra amb la teva empremta/cara o PIN. És més ràpid i ajuda a evitar enganys.»
CTA: «Crear una passkey»
Secundari: «Ara no»
Nota: «Pots continuar fent servir altres mètodes quan ho necessitis.»

La idea de base: no «ensenyar tecnologia», sinó dissenyar una decisió fàcil. Si l’usuari entén què hi guanya, què passarà en tocar el botó i que no quedarà atrapat, l’adopció puja sense necessitat d’insistir.

El flux «Crear una passkey» ben fet

Un bon flux de «Crear una passkey» no es percep com una «configuració de seguretat». Es percep com activar una drecera: ràpid, clar i amb un final satisfactori. La teva UI no ha d’explicar l’estàndard: ha de guiar, anticipar i tancar bé.

El flux ideal

Pas 1 — Pantalla d’invitació

Objectiu: que l’usuari sàpiga què passarà.
Components recomanats:
- Títol: «Crear una passkey» o «Activar l’inici de sessió sense contrasenya»
- 1 frase de benefici: «Entra més ràpid sense recordar contrasenyes.»
- 1 frase d’expectativa: «Confirmaràs amb la teva empremta/cara o PIN.»
- CTA: «Continuar» / «Crear una passkey»
Evita: text llarg, tecnicismes, llistes interminables.

Pas 2 — «T’ho demanarà el sistema»

Tan bon punt premis, l’important és preparar l’usuari per al canvi d’«escena».
Microcopy útil just abans:
- «S’obrirà una finestra del teu dispositiu per confirmar-ho.»
Disseny: quan el sistema prengui el control, la teva interfície ha de quedar «en pausa» (sense elements que semblin clicables).

Pas 3 — Confirmació del sistema

Aquí el teu producte no mana. Però sí que pots dissenyar la sensació:
- No llancis dos modals seguits.
- No mostris carregadors agressius mentre l’usuari decideix.

Pas 4 — Èxit: tancament clar + acció següent

Missatge curt (no triomfalista, però sí tranquil·litzador):
- «Passkey creada.»
- «La propera vegada podràs entrar sense contrasenya.»
CTA de sortida: «Fet» / «Anar al meu compte»
Extra (opcional): un enllaç petit «Gestionar passkeys» a Configuració.

Estats i feedback: el que evita dubtes

1. Estat «en curs»

Si hi ha espera, fes servir un carregador sobri i una frase que expliqui:
- «Creant la passkey…» o «Confirmant…»
Evita: carregadors sense text (sembla que s’hagi quedat penjat).

2. Estat «cancel·lat»

Aquest és el punt on molts productes fallen i culpen l’usuari.
Resposta ideal:
- Títol: «No s’ha creat la passkey»
- Text: «Sembla que has cancel·lat la confirmació. Ho pots tornar a intentar quan vulguis.»
- CTA: «Tornar-ho a intentar»
- Secundari: «Ara no»
Clau: neutralitat. No «s’ha produït un error».

3. Estat «no disponible»

Si el dispositiu/navegador no ho admet o no està habilitat:
- «Les passkeys no estan disponibles en aquest dispositiu»
- «Pots crear-ne una des d’un mòbil compatible o actualitzar el navegador.»
Important: ofereix una sortida sense bloquejar l’inici de sessió.

Errors típics

Error 1: «Això em fa por»

Símptoma: l’usuari es queda aturat abans de tocar «Crear».
Antídot UI:
- Benefici + expectativa + control (3 línies com a màxim).
- Un «Més informació» discret, no un bloc.

Error 2: «Què ha passat? He entrat o he creat alguna cosa?»

Símptoma: després del diàleg del sistema, l’usuari no sap si ha acabat.
Antídot:
- Pantalla d’èxit sempre (encara que sigui breu).
- No ho resolguis amb un toast que es perdi.

Error 3: Confondre «crear una passkey» amb «canviar la contrasenya»

Símptoma: preguntes al suport, abandonament.
Antídot:
- No facis servir llenguatge de «substituir» o «desactivar la contrasenya» en el primer contacte.
- Millor: «Afegir una passkey» / «Activar l’inici de sessió sense contrasenya».

Error 4: L’usuari no pot o no vol fer servir biometria

Símptoma: rebuig per privacitat o pel context (dispositiu compartit).
Antídot:
- Microcopy: «Empremta/cara o PIN del dispositiu.»
- I una sortida clara: «Fer servir un altre mètode».

Error 5: Ho va intentar una vegada i ja no hi torna

Símptoma: cancel·lació i no ho torna a intentar.
Antídot:
- L’estat «cancel·lat» ha de convidar a tornar-ho a intentar sense culpabilitzar.
- I no hi insisteixis a cada inici de sessió: torna-ho a oferir en un moment millor (després de l’inici de sessió, a Configuració).

Un detall de disseny que marca la diferència

Pensa el flux com una coreografia: la teva UI inicia, el sistema executa, la teva UI tanca. Si qualsevol d’aquestes tres parts queda borrosa, l’usuari sent que ha passat «alguna cosa estranya». I en un inici de sessió, «estrany» = desconfiança.

Fallback i recuperació sense castigar

L’èxit de l’«Inici de sessió sense contrasenyes» no es decideix quan tot va bé, sinó quan alguna cosa falla. I en autenticació, fallar és normal: canvies de mòbil, et falla la biometria, ets en un ordinador prestat, el navegador no col·labora. El disseny aquí té un objectiu molt clar: mantenir la sensació de control sense convertir l’accés en un laberint.

Patró base: «Provar una altra manera»

Quan l’usuari veu una pantalla d’inici de sessió amb passkey, hi ha d’haver una sortida clara, humana i sense càstig:

Enllaç/botó secundari: «Provar una altra manera»
Sense sarcasme, sense amagar-lo, sense fer que sembli «menys segur» o una «mala opció».
Idealment, disponible abans que alguna cosa falli (no només després de l’error).

El que funciona

Una llista curta de mètodes alternatius (només els que realment admetis).
Ordenada per menys fricció i coherent amb el teu producte.
Amb microcopy que expliqui quan convé fer servir cadascun, en 1 línia.

Exemple de llista:

Fer servir una passkey en un altre dispositiu
- «Escaneja un QR amb el mòbil per confirmar.»
Codi per correu electrònic
- «T’enviem un codi d’accés.»
Contrasenya (si encara existeix durant la transició)
- «Entrar amb contrasenya (de moment).»

Clau d’UX: «una altra manera» no és un pla B vergonyós, és part del sistema.

Cas 1: «La biometria/PIN falla»

La majoria de fallades aquí no són «errors», són context: dits mullats, Face ID amb mascareta, etc. El copy ha de ser neutral i útil:

Missatge: «No s’ha pogut confirmar»
Acció principal: «Tornar-ho a intentar»
Secundària: «Provar una altra manera»

Evita textos com ara «autenticació fallida» o «error 0x…». En l’inici de sessió, l’usuari interpreta «error» com «m’han bloquejat».

Cas 2: «He perdut el dispositiu»

Aquí convé separar dues idees en el disseny:

Tens un altre dispositiu on ja hagis fet servir passkeys?
Si no, quin mètode real de recuperació existeix en el teu producte?

Pantalla mínima (sense manuals):

Títol: «Has perdut el dispositiu?»
Opció A (prioritària): «Fer servir un altre dispositiu»
- «Si tens un altre mòbil o ordinador on ja has iniciat sessió, podràs entrar des d’allà.»
Opció B (recuperació): «Recuperar l’accés»
- «Et guiarem per verificar el teu compte.» (i llavors ja decideixes si és per correu electrònic, suport, etc.)

El que cal evitar

Fer que l’usuari «endevini» què ha de fer.
Enviar-lo a Configuració (no hi pot entrar).
Donar opcions que no estan disponibles de veritat.

Cas 3: Multidispositiu

L’usuari no pensa en estàndards, pensa en situacions:

«Soc al portàtil de la feina»
«M’he comprat un mòbil nou»
«Vull entrar des de la tauleta»

La teva UX ha de respondre amb dos patrons simples:

Patró A: «Fer servir la passkey amb el mòbil»

A l’escriptori, ofereix un accés per QR de manera natural dins de «Provar una altra manera».
Copy útil:
- «Fes servir el teu mòbil per confirmar aquest inici de sessió.»
Feedback imprescindible:
- Estat: «Esperant confirmació…»
- Confirmació final a la teva UI (no només al sistema).

Patró B: «Afegir aquest dispositiu»

No intentis resoldre el multidispositiu durant l’inici de sessió si ho pots fer millor després d’entrar.
A Configuració → Seguretat:
- «Afegir una passkey en aquest dispositiu»
- Text: «Recomanat si fas servir aquest dispositiu sovint.»

Regla d’or: inici de sessió = entrar, configuració = configurar. No ho barregis.

Els 3 microtextos que més redueixen tiquets

Sota el CTA de passkey:
1. «Confirmaràs amb la teva empremta/cara o el PIN del dispositiu.»
A «Provar una altra manera»:
1. «Si ara no pots fer servir passkeys, tria una altra opció per entrar.»
A «He perdut el dispositiu»:
1. «Si tens un altre dispositiu on ja havies iniciat sessió, podràs recuperar l’accés més ràpidament.»

Amb això cobreixes el mínim imprescindible: una sortida elegant, una recuperació entenedora i continuïtat entre dispositius sense prometre màgia. La clau és que l’usuari senti que sempre hi ha un camí i que cap d’ells no el fa sentir «culpable» per no poder fer servir passkeys en aquell moment.

Conclusió

Llançar un Inici de sessió sense contrasenyes no va d’afegir una opció més, va de dissenyar un canvi d’hàbit. L’adopció arriba quan l’usuari entén d’una ullada què hi guanya, sent que el procés és natural i sap que no es quedarà bloquejat si un dia no pot fer servir passkeys.

El que jo portaria a producció és una introducció en el moment adequat, preferiblement després d’un inici de sessió correcte o quan l’usuari ja ha obtingut valor, un flux de creació que es percebi breu i guiat amb un inici clar, un traspàs net al sistema i un tancament inequívoc, i un «Provar una altra manera» visible i digne que funcioni com a part del producte i no com un recurs amagat.

Si ho fas bé, les passkeys es converteixen en aquella rara millora en què seguretat i comoditat deixen de competir i l’accés per fi se sent com s’hauria d’haver sentit des de fa anys: simple, ràpid i fiable.

Si demà poguessis eliminar l’«Has oblidat la contrasenya?» del teu producte, què dissenyaries primer: un onboarding de passkeys que la gent entengui en 10 segons, o un fallback que eviti que algú quedi fora quan canviï de dispositiu?