Come rovinare la fine migliora UX
Lo storytelling parla dello sconosciuto che diventa noto. Ma i designer non sono narratori, e le destinazioni che progettano dovrebbero essere sempre chiare all'utente. Inserendo piccoli spoiler nei nostri progetti di interfaccia utente e rovinando la sorpresa, progettiamo per esperienze utente molto migliorate.
È stato spesso sostenuto dai fan del pop-saggezza che ci sono solo due trame distinte in tutta la cultura occidentale: una persona intraprende un viaggio e uno straniero arriva in città.
Un breve sfogliare la tua libreria smentirebbe la regola, a meno che tu non permetta cammini metaforici, in cui tutto si adatta, ma la frequenza con cui si ripete l'idea, e il senso che sembra dare, parla della centralità dell'ignoto in occidente idee di narrativa.
In entrambe le trame, una persona viene introdotta in qualcosa di nuovo e inaspettato, l'unica variazione è il punto di vista da cui la narrazione parla; in entrambi i casi, l'arco narrativo è lo sconosciuto che diventa noto . Quando Clint Eastwood cavalca in una città in rovina nell'Idaho del 1800, la nostra curiosità per la sua identità è ciò che guida il nostro impegno. Quando leggiamo la trilogia de Il Signore degli Anelli di Tolkien, non dubitiamo mai che Frodo finirà per arrivare a Mt Doom, l'interesse è per ciò che accade lungo la strada.
La chiave per raccontare storie è che c'è uno sconosciuto, e che lo sconosciuto sarà conosciuto.
I designer non sono narratori
Numerosi designer si sono riferiti a loro come narratori, ma questo è semplicemente un modo kitsch di riferirsi alla comunicazione. Per raccontare una storia, dobbiamo promuovere l'ignoto in preparazione di una grande rivelazione, e il principale ostacolo a questo approccio è che le esperienze web - e io sostengo la maggior parte degli incontri con il design - sono non lineari e aperti.
Il design è infatti molto più vicino alla poesia. La poesia esiste tipicamente in blocchi di dimensioni mordenti e in cui vengono esplorati temi che sono aperti all'interpretazione.
Lungi dal costruire una storia, il lavoro di un designer è quello di chiarire il più in modo non invasivo possibile.
Usando Spoilers in Microinteractions
Qual è l'elemento più coinvolgente in Jaws ? Brody sta litigando con il sindaco? È Quint che racconta la storia di Indianapolis? È la relazione di Hooper con Ellen Brody (sì, davvero, leggi il libro!)? No. È la musica. Non appena lo squalo inizia a suonare il violoncello sappiamo che sta arrivando, il suo arrivo è letteralmente annunciato. [Incidentalmente, Jaws è un esempio interessante di un film in cui sia uno straniero (lo squalo) arriva in città, e poi un uomo che va in viaggio (verso il mare).]
Possiamo creare un impegno nel design facendo cadere continuamente gli spoiler, suggerendo ciò che sta arrivando, con la nostra musica per violoncello. Per fare ciò, utilizziamo microinterazioni: componenti UI semplici, con trigger e feedback. La parte di feedback della microinterazione è il posto dove inserire il tuo spoiler.
Funziona visualizzando in anteprima i dati che, in un'esperienza lineare, verranno introdotti in una fase successiva. La chiave è portare i dati in avanti.
miniature
Iniziamo con qualcosa di familiare: il classico esempio di portare avanti le informazioni è la miniatura. Una miniatura è un'anteprima di un elemento più grande, una guida visiva a cosa aspettarsi dall'altra parte di un collegamento.
Jacky Winter è un'agenzia di talenti per artisti, illustratori e animatori. Con una vasta gamma di talenti, il modo migliore per sfogliare il lavoro è con miniature tradizionali.
Le miniature non devono essere tradizionali. Alexandre Nacache è un art director e designer interattivo il cui sito utilizza anteprime di elementi di progetto, piuttosto che riproduzioni di un disegno in miniatura.
Bao è un ristorante taiwanese con tre sedi a Londra. Le loro illustrazioni sulla posizione si comportano come miniature, suggerendo non solo un look per il ristorante, ma una possibile esperienza.
Un giorno fuori è uno studio di design con sede a Glasgow. Le miniature sul loro sito costituiscono una componente importante della direzione artistica e stabilisce il proprio marchio estetico.
I 5 minuti letti
Nel corso della giornata, l'unico modo per sapere quanto tempo ci sarebbe voluto per leggere un articolo come questo era controllare l'ora, leggere l'articolo e controllare di nuovo l'ora.
Sulla base del suo assorbimento, uno degli elementi dell'interfaccia utente di maggior successo degli ultimi anni è il piccolo indicatore utile che ci dice quanto tempo ci vorrà per leggere un articolo. Popolato da siti come Medium, non è coinvolto il tracciamento oculare, o calcolata la velocità di lettura, la stima "5 minuti letti" si basa sul conteggio delle parole: 125 parole sono dovrebbe essere letto in 30 secondi o giù di lì. Ma anche questi dati grossolanamente generalizzati sono sufficienti per consentire agli utenti di prendere decisioni informate sul loro impegno verso un sito, articolo o prodotto.
La monotona di Radio di design australiano è rotto solo dal rosso contrastante utilizzato per gli stati al passaggio del mouse. L'unico elemento che utilizza il rosso senza interazione? L'indicatore di riproduzione che presenta la posizione e la lunghezza totale.
Sequoia è una società di venture capital con sede in California. I profili delle compagnie tecnologiche occupano la loro pagina di destinazione. Ogni profilo presenta una posizione numerata e il timer animato del cursore attira l'attenzione su dove ti trovi.
Vimeo presenta alcuni dei migliori video sul web. Avrebbero potuto mostrare tutte le informazioni che desideravano - produttore, soggetto, titolo - quando si libravano sopra le loro miniature. Hanno scelto la durata.
Cinelli è il marchio di bici più cool d'Italia. Il loro dispositivo di scorrimento del prodotto presenta i pulsanti numerici "successivo" e "precedente". Le frecce da sole sarebbero sufficienti a trasmettere significato, ma i progettisti hanno portato i dati in avanti con una semplice aggiunta ai pulsanti.
Dati di qualificazione
Uno dei modi più semplici per migliorare un'interfaccia consiste nel qualificare i dati con un contesto significativo. La chiave per questo non è fornire troppe informazioni, solo un semplice sommario che può essere letto a colpo d'occhio.
Aiuta lo scout è un servizio clienti SaaS. La loro dashboard mostra le metriche chiave come le conversazioni totali, che sarebbero prive di significato senza l'aggiunta di una freccia e una percentuale che indica se si tratta di un miglioramento o di una battuta d'arresto.
Prenotare un biglietto da Lione a Bordeaux è più semplice quando Linea ferroviaria visualizza una barra al di sotto del tempo di percorrenza, per fornire un'indicazione visiva della durata e del numero di modifiche.
Mappe e rassicurazione
Quando anticipiamo i viaggi, specialmente un viaggio nell'ignoto, spesso demistificiamo l'esperienza con una mappa. Nel mondo reale, una mappa è molto simile a una miniatura di una destinazione. Nella progettazione dell'interfaccia utente, le mappe che utilizziamo chiariscono l'architettura delle informazioni.
Le etichette sono una delle aree più complesse dell'architettura dell'informazione perché tendono al gergo, spesso al gergo aziendale esclusivo. L'aggiunta di una micropiastra senza gergo visualizza in anteprima la destinazione per gli utenti e li aiuta a trovare le giuste informazioni.
Reticolo è un SaaS per la gestione delle prestazioni, ma i loro prodotti sono molto incentrati sull'azienda. Risolvono questo problema segnalando la caratteristica chiave di ogni prodotto nel loro menu.
Thriva ti aiuta a monitorare la tua salute con esami del sangue che puoi portare a casa. Hanno tre livelli di prodotto che sono chiaramente spiegati nel loro menu.
Le transazioni finanziarie sono tecnicamente complesse. Plaid offre una varietà di prodotti API per gli sviluppatori. Il loro menu spiega non solo le funzionalità chiave di ciascun prodotto, ma prevede due potenziali soluzioni basate sulle combinazioni di prodotti.
La chiave per un'efficace progettazione dell'interfaccia utente è spoiler
Raccontare storie è l'antitesi di un design efficace, perché le storie per loro natura, fanno riferimento agli elementi sconosciuti in un'esperienza. Il design, al contrario, cerca di eliminare l'ignoto chiarendo.
Quando portiamo avanti i dati in un progetto, lo facciamo in genere in modo semplice. Un singolo pezzo di dati ben selezionati può chiarire un intero processo. Le microinterazioni sono il modo ideale per inserire questi 'spoiler', che consentono agli utenti di creare la propria esperienza, pur sapendo sempre esattamente dove si trovano nel contesto più ampio.
Svelando più di una trama lineare, coinvolgeremo gli utenti in modo molto più efficace e progettiamo esperienze robuste e divertenti da usare.