I 7 Peccati Capitali del Design di Prodotto (E Come Evitarli)
A questo punto della nostra cronologia, non esiste assolutamente alcuna scusa per un cattivo design di prodotto. Nel mondo sempre più competitivo dei prodotti software, una buona progettazione di UI e UX è imprescindibile. Anche se disponi di una tecnologia eccellente, in grado di risolvere i problemi dei tuoi utenti, una pessima UX farà scappare gli utenti dal tuo prodotto—sia perché non riescono a capire come utilizzarlo, sia, semplicemente, perché lo detestano.
Preparati: sto per darti un po’ di "tough love" su come NON fare UX, elencando i sette peccati capitali del design di prodotto ed esponendo alcuni dei peggiori colpevoli.
Peccato #1: “L’Albero di Natale”
Uno dei ricordi più piacevoli della mia infanzia è quando io e mia sorella addobbavamo l’albero di Natale. Appena finito, lo guardavamo con meraviglia, perché ai nostri occhi era assolutamente stupendo. Beh, almeno questo era il nostro punto di vista. Come appariva in realtà? Più o meno così.
Want more from The CPO Club?
Sign up for a free membership to complete reading this article:
Have an account? Log In
Immagino tu abbia capito dove voglio arrivare. A differenza dell’albero di Natale, che vuoi che i tuoi figli decorino come preferiscono, la UI e la UX del tuo prodotto non dovrebbero sembrare un gran caos di elementi e colori sparsi ovunque.
Ora, vediamo un prodotto reale che sembra un vero e proprio “albero di Natale”.
Osserva per un momento e prova a spiegarmi di cosa si occupa questo prodotto. Sono certo che anche tu ti sei perso nella UI e non hai capito per un po’ cosa fare. Ci sono semplicemente troppe cose che accadono su questa schermata: è praticamente impossibile comprendere dove ti trovi e cosa dovresti fare.
I problemi che vedo con questa interfaccia includono:
- Uso eccessivo del colore: Il colore è un potente strumento nelle mani di abili product designer, in quanto può guidare gli utenti nella direzione giusta. Tuttavia, se il tuo UI è troppo colorato, questa forza si indebolisce e ogni elemento colorato inizia a competere per attirare l’attenzione.
- Sovraccarico di CTA: Qual è la cosa più importante su cui dovrei cliccare ora? Onestamente, non ne ho idea—ci sono pulsanti dappertutto.
- Layout confuso: Praticamente, lo schermo è diviso in tre colonne, con quella centrale che ha due schede e anche una grande sezione della timeline in basso. I designer hanno provato a inserire il maggior numero possibile di cose in una sola schermata.
Fai Così Invece
Questo è un caso in cui si cerca di affrontare la UX creando un certo ordine da una marea di informazioni. Al contrario, pensa alla tua UX come a una mappa per il comportamento che desideri dagli utenti. È product design 101 che colore, CTA e layout devono lavorare insieme per guidare l’utente verso il passo successivo corretto.
Peccato #2: Cattiva Gerarchia Visiva
La gerarchia visiva si riferisce alla disposizione degli elementi nell’interfaccia utente in modo che trasmettano chiaramente il rapporto gerarchico tra di essi.
L’articolo che stai leggendo, ad esempio, possiede una gerarchia visiva chiara: il titolo è in dimensioni grandi in alto, i sottotitoli sono di dimensione inferiore ma molto più in grassetto rispetto ai paragrafi, e così via.
In entrambi i casi, mettiamo in risalto i titoli rendendoli più grandi o più in grassetto—indicando chiaramente che i paragrafi si riferiscono agli argomenti di ciascun sottotitolo corrispondente.
La gerarchia visiva è un ottimo modo per organizzare la UI e renderla facile da navigare. L’assenza di essa, invece, è un modo sicuro per far sì che i tuoi utenti si perdano nell’interfaccia.
Uno dei fallimenti più evidenti della gerarchia visiva che mi irrita quotidianamente è la sezione delle risposte su Quora.
Per incentivare le persone a navigare altre domande e rimanere a lungo sul loro sito, Quora include domande e risposte correlate a quella che stai consultando.
Non mi dispiace. È un comportamento utente già esistente e Quora ha trovato un modo organico per trarne beneficio.
Mi dispiace, invece, il modo in cui sono state progettate queste domande/risposte correlate. Sembrano quasi identiche alle risposte reali della pagina e mancano di una gerarchia visiva. Guarda lo screenshot qui sopra e dimmi quale è una risposta vera e quale è una domanda correlata. Devi veramente leggere con attenzione per accorgertene.
Fai Questo Invece
Idealmente, le domande correlate dovrebbero essere meno evidenti nell'interfaccia utente e occupare una posizione inferiore rispetto alle risposte principali nella gerarchia visiva (ad esempio, avere uno sfondo grigiastro invece di uno bianco).
Peccato #3: Interfaccia Utente Da Anni 2000
Lo so, lo so, Craigslist ha un'interfaccia utente terribilmente obsoleta e funziona comunque perfettamente. Ma è l'eccezione che conferma la regola e non dovresti pensare che sia ancora accettabile avere qualcosa del genere nel 2023.
Il problema è che, a differenza di Craigslist, il tuo prodotto non sarà super popolare e non ha un marchio riconosciuto universalmente. Pertanto, se le persone vedono qualcosa di datato quando visitano il tuo sito web o utilizzano la tua applicazione, semplicemente non ti prenderanno sul serio. Tuttavia, hai sempre la possibilità di farti riconoscere grazie al tuo design creativo del logo e al branding.
Purtroppo, a volte sono proprio le organizzazioni più "serie" a commettere questo peccato.
Ho avuto la possibilità di collaborare con la Banca Centrale dell'Armenia qualche anno fa. Hanno alcuni dei più talentuosi analisti finanziari ed esperti di politica monetaria. Inoltre, il presidente di questa istituzione (laureato ad Harvard) è stato mio professore ed è probabilmente la persona più intelligente che abbia mai incontrato nella mia vita.
Tuttavia, il sito web della Banca Centrale ha un aspetto talmente brutto che ti sarà difficile credere che si tratti di un'organizzazione altamente prestigiosa con uno staff di grande talento.
Peccato #4: Dark Pattern (Ovvero Usare La UX Contro I Tuoi Utenti)
Nel mondo della UX, i "dark pattern" sono percorsi utente e elementi della UI che disinformano l’utente e lo portano a compiere un’azione di cui non è consapevole.
C'è un certo negozio e-commerce con un logo a forma di freccia arancione particolarmente “famoso” per implementare dark pattern. Ne sono colpevoli a tal punto che ci sono denunce e indagini in corso contro di loro per non aver rispettato le regole della FCC.
Una delle esperienze utente più famose che rientra in questa categoria è il modo in cui si dovrebbe annullare un abbonamento Prime.
Ad essere onesti, penso che sia comunque una buona idea chiedere un feedback agli utenti quando annullano il loro abbonamento a pagamento o addirittura offrire loro uno sconto "ti prego, non andartene". Ma bisogna rispettare il tempo e la pazienza degli utenti.
Tieni presente che le persone che desiderano annullare il tuo abbonamento probabilmente sono già infastidite o insoddisfatte. Quindi, rendere difficile la procedura di disdetta le farà arrabbiare ancora di più (e puoi dimenticarti di riprenderle in futuro).
Se provi, ad esempio, ad annullare l’abbonamento Prime, Amazon ti chiederà di ripensarci.
Questa schermata è accettabile, la usano tutti.
Quello che non accetto, però, è il fatto che dovrai confermare la tua scelta altre due(!) volte per annullare (stai scherzando, vero?). Inoltre, il testo e i colori che usano per le CTA sono studiati per rendere difficile trovare quella per annullare davvero l’abbonamento invece che mantenerlo.
Fai Questo Invece
Non cercare di ingannare i tuoi utenti per farli agire contro la loro volontà, o prova a "sfiancarli" rendendo eccessivamente difficile cancellare l’abbonamento. Le persone sono abbastanza intelligenti da capire che lo fai apposta, e questo farà sembrare i tuoi concorrenti più attraenti. Invece, fai un breve sondaggio sul motivo per cui ti stanno lasciando e rendi il processo efficace, lasciando comunque aperta la porta per un ritorno futuro.
Peccato #5: Non Seguire Le Best Practice Dei Form
I form sono uno degli elementi fondamentali dei siti web e una delle primissime cose che gli sviluppatori imparano a costruire e i designer a, beh, progettare.
Realizzare una grande user experience per i form è probabilmente uno degli argomenti più discussi tra i designer e si possono trovare best practice, guide e lezioni praticamente ovunque.
Considerando la diffusione di materiali didattici sui moduli e l'importanza di realizzarli correttamente (dopotutto, influirà direttamente sull'acquisizione e su altri indicatori chiave), sostengo che non seguire le best practice di UX consolidate per i moduli sia un peccato.
Ora, lasciami farti un esempio di cattivo design di prodotto per i moduli.
Non riesco nemmeno a guardare questa pagina senza che mi brucino gli occhi. Ci sono davvero tantissime cose sbagliate qui. Eccone alcune:
Uso improprio degli spazi bianchi: Perché i nomi dei campi sono così lontani dai campi stessi? Perché usare un intero blocco per inserire solo due piccoli toggle per ritiro e consegna? Si può creare un modulo che contenga tutte queste informazioni almeno 4 volte più piccolo e molto più facile da consultare.
Formattazione errata dei campi: C'è un campo per il telefono in cui le cifre digitate non appariranno nel formato di un numero di telefono (ad es. +39 (333) 123-1234), rendendo più difficile la lettura. Si tratta di qualcosa di così comune che la maggior parte degli strumenti di design offre addirittura componenti già pronti.
Assenza di segnaposto: Si fa quasi fatica a notare che esiste un campo di testo nella sezione “Istruzioni aggiuntive per la consegna”. Inoltre, non è chiaro cosa bisognerebbe scrivere. Una buona UX dei moduli prevede sempre la presenza di segnaposto che offrono un suggerimento, come "Si prega di lasciare il pacco sul portico anteriore."
Ecco cosa fare invece
I rimedi per ciascuno di questi problemi sono abbastanza evidenti, ma questo è un caso in cui sembra proprio che gli unici ad aver testato questo modulo siano coloro che lo hanno realizzato. I designer avrebbero fatto bene a ottenere qualche vero feedback dagli utenti su questa UX prima di pubblicarla.
Peccato #6: Uso degli elementi UI sbagliati
Il prossimo "peccato" di cui voglio parlare è il proseguimento di quello precedente. I moduli non sono gli unici elementi UI del tuo prodotto che dovrebbero seguire le convenzioni e le best practice collaudate. Ci sono anche altri elementi comuni come le levette, le caselle di controllo e così via.
Infatti, gli utenti hanno già dei modelli mentali ben definiti su come funzionino ciascuno di questi elementi e devi assicurarti di usarli nel modo corretto.
Ecco un paio di esempi di cosa servono questi elementi e di come non usarli:
Toggle: Questo elemento mostra uno stato “booleano” (ad esempio qualcosa che è Attivo/Disattivo oppure On/Off). Sono ottimi per mostrare agli utenti lo stato dell'antenna Bluetooth dello smartphone e permettere loro di attivarla o disattivarla.
Nella form precedente, però, ci sono due toggle che permettono all'utente di scegliere tra ritiro e consegna.
Se ci pensi solo per un momento, ci hai pensato più del designer. Questi toggle implicano che devi disattivare "ritiro" e attivare "consegna" per selezionare l’opzione “consegna”! Avrebbero potuto usare i radio button. Mi chiedo sinceramente cosa accada se un utente li attiva entrambi contemporaneamente.
Menu a discesa senza filtro: Essendo uno degli elementi più "anziani" presenti nei siti web, i menu a discesa sono ancora popolari e molto comodi per l’utente se utilizzati correttamente.
Ecco cosa fare invece
Le best practice suggeriscono di utilizzare un menu a discesa nei casi in cui l’utente deve scegliere una sola opzione da un elenco di 5-15 scelte. Se le opzioni sono meno di 5, è meglio usare i radio button.
Nel caso in cui sia presente una lunga lista di opzioni tra cui scegliere (ad es. 50 stati USA o ~200 paesi), è necessario aggiungere un filtro al menu a discesa. Altrimenti, l’utente dovrà scorrere tutto l’elenco per trovare l’opzione desiderata.
Peccato #7: Trascurare chi sono i tuoi utenti e cosa vogliono
Infine, il peccato più grande di tutti: creare un nuovo prodotto con un design UX che non soddisfa le esigenze e gli interessi dei tuoi utenti. Questa è semplicemente la ricetta per il fallimento.
Ecco cosa fare invece
Un buon processo di progettazione del prodotto inizia sempre con la ricerca sugli utenti. A meno che tu non sappia chi sono i tuoi utenti e di cosa hanno bisogno, non importa quanto sia bella l'interfaccia utente che crei, finirai quasi sicuramente con un prodotto mal progettato.
Sono consapevole che la ricerca sugli utenti non è un compito facile. Dopotutto, Apple ha impiegato anni di test con gli utenti per raggiungere un livello eccezionale di usabilità sia nel design industriale sia nell'esperienza utente del loro iPhone. Tuttavia, credimi, è il singolo elemento più impattante su cui puoi lavorare per garantire il successo del tuo prodotto.
È Davvero Facile Evitare Di Commettere Errori Di Design
Se lavori nella realizzazione di siti web, parti già avvantaggiato. Perché? Perché i tool di web design normalmente offrono template che evitano già alcuni degli errori elencati qui. Tuttavia, non importa se sei una startup che sviluppa prodotti digitali o un'azienda che crea prodotti fisici (come tastiere o sensori di movimento), è davvero piuttosto semplice evitare un cattivo design.
Finché il processo di sviluppo del tuo prodotto si concentra sulle esigenze e sulle difficoltà dei tuoi utenti, e utilizzi il giusto software di progettazione del prodotto, potrai evitare difetti significativi nel design ed evitare di ritrovarti con un prodotto progettato male (questo è anche uno dei tanti vantaggi dei software di progettazione con IA).
Spero che questi esempi ti abbiano fatto sentire meglio riguardo ai tuoi prodotti, o almeno ti abbiano fatto sorridere. Per altri consigli sulla UX e altri articoli per chi si occupa di prodotto, assicurati di iscriverti alla nostra newsletter!
