Ci siamo imbattuti tutti in siti Web e app che ci fanno venire voglia di urlare e scagliare i nostri gadget attraverso la stanza. Per lo meno, non penso che sia solo io. Una buona interfaccia utente, al suo livello più elementare, consente agli utenti di eseguire il lavoro per il quale sono giunti al sito Web con facilità e senza confusione.
I grandi designer dell’interfaccia utente fanno tutto questo e molto altro. Interfacce utente davvero straordinarie non solo delizieranno l’utente rendendo più facile svolgere il lavoro a portata di mano, ma lo delizieranno anche visivamente ed esperienziale.
E può significare qualsiasi cosa, da un’interazione di animazione elegante e innovativa che attira istintivamente l’attenzione dell’utente su una caratteristica specifica a un design ordinato e pulito e un uso intelligente dello spazio bianco che infonde una sensazione di pace nell’utente, solo per citare alcuni esempi.
Con un piccolo aiuto da parte del Nielsen Norman Group, affronterò l’argomento di ciò che costituisce una buona interfaccia utente in questo pezzo, prima di approfondire otto esempi di design eccezionale dell’interfaccia utente di siti Web e una giustificazione per la mia decisione. Scegli un esempio dal menu a discesa per accedervi direttamente o continua a leggere.
Quindi, come si fa a valutare se un’interfaccia utente è buona o addirittura eccezionale? Puoi dire se un’interfaccia utente è esteticamente bella guardandola e puoi anche usarla per vedere se è un’esperienza intuitiva e facile guardandola. Ma c’è qualcosa di più oggettivo? Sta diventando più formalizzato?
Come puoi sapere se il design dell’interfaccia utente di un sito Web è buono?
Personalmente, torno sempre ai criteri di usabilità del Nielsen Norman Group.
Apprendibilità, efficienza, memorabilità, errori e soddisfazione sono le cinque qualità che Nielsen utilizza per caratterizzare l’usabilità.
Apprendibilità: l’utente è in grado di eseguire le proprie responsabilità con facilità?
Efficienza: l’utente è in grado di eseguire attività in modo tempestivo grazie all’interfaccia?
Memorabilità: quanto è probabile che una persona ricordi come utilizzare un sito Web la prossima volta che lo visita?
Errori: quali azioni intraprende l’interfaccia per ridurre la probabilità di errore dell’utente e in che modo consente agli utenti di correggere i propri errori?
Soddisfazione: l’utente è soddisfatto di come il design interagisce con lui?
Un’eccellente interfaccia utente dovrebbe anche rappresentare la personalità del marchio per distinguersi dalla concorrenza e offrire ai clienti un’esperienza piacevole. Diamo un’occhiata ad alcuni casi in cui credo che le organizzazioni abbiano inchiodato il design dell’interfaccia utente del loro sito Web.
1. Medium
Medium, una piattaforma di lettura e scrittura online, è tanto bella quanto utile. Questo sito Web fa tutto bene con il suo uso limitato del colore, l’ampia spaziatura delle linee e il carattere tipografico ben scelto.
Il contenuto regna sovrano su Medium. Quando un utente effettua il login, viene visualizzata una casella con la dicitura “Scrivi qui” nella parte superiore dell’elenco degli articoli, consentendo e incoraggiando tutti a iniziare subito a scrivere. Agli utenti viene fornita una pagina bianca quasi vuota quando fanno clic sul collegamento “Scrivi una storia”, riducendo il disordine e offrendo semplicemente un posto chiaro in cui concentrarsi sulla scrittura.
Gli articoli sono disposti in uno stile a una colonna, che ne semplifica la lettura. Medium offre ai lettori un’esperienza di pubblicazione eccellente e senza interruzioni, con dettagli minori come il tempo di lettura previsto e l’opportunità di evidenziare e commentare direttamente determinati articoli.
2. Virgin America
Quando si è trattato di assistere i consumatori nel processo di prenotazione del volo, Virgin America è stata una delle prime, se non la prima, a dare priorità alle esigenze dell’utente. Prenotare un volo è una seccatura per la maggior parte delle persone. Il sito web di Virgin America ha rimosso la propria interfaccia per attirare l’attenzione sulla domanda più importante: “Dove vorresti andare?” Proprio come una lavastoviglie ci solleva dal dover lavare i piatti, il sito di Virgin America ha rimosso la propria interfaccia per attirare l’attenzione sulla domanda più importante: “Dove vorresti andare?” L’utente potrebbe iniziare subito il processo di prenotazione eliminando tutto il materiale circostante.
E, anche se il sito ora può sembrare un po’ vecchio, merita di essere incluso nella nostra lista come pioniere nella progettazione di interfacce incentrate sull’utente. Purtroppo, dopo essersi combinati con Alaska Airlines, la loro interfaccia utente è diventata molto più disordinata.
Ma torniamo a ciò che ha reso il sito Web di Virgin America così eccezionale: all’utente è stata ricordata la propria decisione durante il processo di prenotazione tramite una barra nella parte superiore della pagina che mostrava le opzioni correnti. Virgin ha reso semplice per gli utenti visualizzare e modificare le proprie selezioni mantenendo queste informazioni disponibili anziché dipendere da loro per ricordare le informazioni stesse. L’interfaccia utente era espressamente concepita per consentire agli utenti di concentrarsi sul raggiungimento del proprio obiettivo nel modo più rapido ed efficace possibile.
Virgin ha anche fatto uno sforzo consapevole per distinguersi esteticamente dalla massa. Colori vivaci, sfumature e immagini divertenti hanno contribuito a stabilire un’identità e un’esperienza di marca distinti che li distinguono dai siti Web dei loro rivali.
3. Airbnb
Il design dell’interfaccia utente del sito Web di Airbnb eccelle in due cose: prenotare una stanza e stabilire la fiducia tra due perfetti sconosciuti.
Un meraviglioso design dell’interfaccia utente per una home page può essere trovato su Airbnb.
Airbnb, come Virgin America, ha privilegiato la semplificazione della prenotazione di un soggiorno direttamente dalla schermata iniziale. Un utente viene simultaneamente e cortesemente accolto e indirizzato a iniziare a organizzare il proprio soggiorno, grazie al suo uso unico del linguaggio colloquiale, come il “Cosa possiamo aiutarti a localizzare, Edward?” sotto e un utile testo di spunto.
Questo invito colloquiale a iniziare a cercare è un metodo adorabile per esprimere la voce del marchio e allo stesso tempo semplificare il processo di ricerca di un posto dove stare. Durante questa prima ricerca, gli unici campi da compilare sono la destinazione preferita dell’utente, la durata del soggiorno e il numero di ospiti. La procedura è semplificata, piacevole e accessibile rinviando i filtri extra alla fase successiva.
Eventuali costi aggiuntivi che potrebbero essere coinvolti sono descritti in dettaglio nelle pagine dell’elenco. Per quasi tutti gli utenti, questa è una procedura piuttosto semplice e di base. Il pulsante “Richiesta di prenotazione” si trova proprio sotto questo e, essendo uno dei pulsanti più luminosi del sito Web, invita gli utenti a fare clic per completare la prenotazione.
Un utente viene inviato a una nuova pagina di pagamento dopo aver richiesto di prenotare una sede. Per ridurre la necessità per il visitatore di ricordare le informazioni della pagina precedente, l’elenco, il prezzo e le informazioni sulla prenotazione si trovano a destra della pagina.
Invece di andare direttamente al pagamento, la pagina a sinistra ti dice di “salutare il tuo host e dirgli perché stai visitando”. Presentando queste informazioni prima delle informazioni di pagamento, avvia una discussione e stabilisce una relazione tra il visitatore e l’host, oltre a coinvolgere ulteriormente l’utente nell’esperienza. Airbnb è orgoglioso di riunire le persone e dà la priorità al dialogo rispetto alle transazioni, e l’interfaccia utente lo riflette meravigliosamente.
Il testo di Airbnb è stato realizzato con cura e sono stati utilizzati fotografie e video accattivanti per garantire che l’interfaccia abbia un tono emotivo che aiuti a creare fiducia tra estranei.
4. Bestboards
Ora questo è un design dell’interfaccia utente del sito Web con carattere. Gli utenti vengono accolti con un video emozionante, divertente e dinamico del prodotto in azione non appena arrivano. Sei affascinato da uno skateboard unico nel suo viaggio, torcendosi e girando, moltiplicandosi e poi dissolvendosi nei suoi componenti costitutivi: è un bel giro. Quindi vedrai l’invito all’azione “Acquista ora” al centro dello schermo, in trepidante attesa che tu faccia clic.
Sei stupito, curioso ed è tempo di scoprire cosa c’è sotto tutta questa sicurezza. Quando fai clic su “Acquista ora”, l’interfaccia viene spogliata di tutti i colori, tranne le ruote arancioni brillanti del tabellone, e ti vengono presentati solo i dettagli più importanti: immagine, velocità massima, gamma, prezzo, tempo di consegna e, ovviamente, “Compra ora”. Cosa ti trattiene? Non c’è molto.
Non sei ancora convinto? Quando fai clic su “Ulteriori informazioni”, otterrai tutte le informazioni necessarie per passare dalla contemplazione alla consapevolezza: immagine, testo e componenti visivi che si supportano a vicenda sono effettivamente suddivisi in aspetti chiave del prodotto. Le valutazioni positive dei prodotti e le opzioni di finanziamento riducono l’ansia abbassando la sensazione di pericolo mentre scorri verso il basso. Nel complesso, è un eccellente esempio di come fondere vari elementi visivi e di testo per creare un insieme coeso.
5. Dropbox
Dropbox è di gran lunga una delle interfacce più intuitive. Chiunque abbia mai utilizzato un computer ha familiarità con il sistema di organizzazione di cartelle e file. Non c’è molto che l’utente ordinario non sappia come ottenere subito in termini di apprendibilità. Poiché è così comune, la maggior parte delle persone tenterà di trascinare e rilasciare i file dai propri desktop al sito Web senza nemmeno capire se è fattibile o meno.
Il comportamento accogliente di Dropbox, trasmesso tramite una grafica divertente, fa sentire l’utente a proprio agio durante l’utilizzo del software. Questo miglioramento dell’interfaccia utente fa sembrare il prodotto un vecchio amico, desideroso di assistere i consumatori con le loro esigenze di condivisione di file.
Hanno anche un design del blog che è forse il più grande al mondo in questo momento. Capisco che un’affermazione del genere abbia una buona dose di soggettività, ma raramente ho visto un equilibrio così riuscito tra interfaccia utente sperimentale, usabilità e contenuti multimediali in un unico luogo.
Riesce a sembrare sperimentale, innovativo e coerente, con tavolozze di colori in sequenza e icone dinamiche e un’eccellente grafica sincronizzata con tutti gli altri meravigliosi disegni. Questo è un bel risultato! Guarda!
Ci sono una varietà di generatori di tavolozze di colori online che puoi controllare se hai bisogno di assistenza per trovare un’eccellente tavolozza di colori. Assicurati solo di evitare alcuni degli errori più tipici della tavolozza dei colori realizzati dai designer dell’interfaccia utente.
6. Pitch
Pitch, uno strumento mobile e online che ti consente di creare e gestire presentazioni straordinarie, è una startup tecnologica basata sul design. Mirano a convincerti che possono fare per le presentazioni ciò che Slack ha realizzato per le comunicazioni. Sono davvero bravi anche a farlo.
Dal momento in cui visiti la loro pagina web, puoi vedere che ogni singolo aspetto è stato attentamente considerato. Dai un’occhiata allo slogan. “All hands on deck” è una frase versatile che richiama sia lo spirito di collaborazione, un aspetto importante di Pitch, sia il technobalbettio di “all hands meeting”. Infine, la parola “mazzo” è un gioco di parole “presentazione”. Chi l’ha inventato merita una stella d’oro!
I progettisti dell’interfaccia utente di Pitch svolgono un ottimo lavoro guidando l’utente attraverso un esempio di come sarebbe il loro viaggio se utilizzassero davvero l’app. Hanno ottenuto un fantastico mix tra pulito e accurato, riducendo al minimo il disordine e assicurando che gli elementi più importanti del prodotto siano coperti, consentendo al sito di scomparire davvero.
Con il suo ampio uso di immagini, il loro sito annuisce alle tendenze del design moderno, ma evita il design piatto e da cartone animato dei personaggi che vedi su così tanti siti in questi giorni. L’uso simile alla Pixar del design dei personaggi 3D è raro in questo mercato e quindi facilmente riconoscibile: mostrami una mano di Pitch domani, e scommetto che ricorderai l’azienda.
I vantaggi del design dell’interfaccia utente del loro sito Web non finiscono qui. Hanno anche incluso alcuni componenti dinamici e animazioni intelligenti e sottili che aiutano l’utente a passare da uno scorrimento all’altro. Attirano dolcemente la tua attenzione da destra a sinistra e l’avvio ritardato delle animazioni ti invita a fermarti su ogni caratteristica e vantaggio del prodotto. Sentirai una sensazione di lieve familiarità, divertimento e professionalità e fare presentazioni non sarà più un lavoro ingrato!
7. Frank and Oak
Frank and Oak, un’azienda di abbigliamento con una forte enfasi sui media e sullo stile di vita, utilizza la sua interfaccia utente per catturare l’attenzione dei consumatori e le preferenze di stile. Sebbene l’esperienza di acquisto online sia piuttosto semplice dal punto di vista UX, l’azienda combina foto forti e testo nitido e sans-serif per trasmettere la personalità del marchio e il suo target demografico. Nonostante alcuni messaggi di marketing forti e orientati alle vendite, con uno sconto del 20% su tutto il sito, la loro immagine del marchio è saldamente incisa fin dal primo punto di contatto dell’azienda. È bello, è pulito ed è da vicino e personale.
La pagina del prodotto è centrata su due elementi dopo aver fatto clic su un elemento: la fotografia del prodotto e il pulsante di invito all’azione, poiché questi sono gli unici componenti colorati nella pagina. Il pulsante “Aggiungi al carrello” non funzionerà finché non viene scelta una taglia, il che è un bel tocco. Quando un utente tenta di premere prima il pulsante, il colore svanisce e la dicitura cambia in “Seleziona la tua taglia”.
Compilare le informazioni personali per la prima volta durante il processo di pagamento non è mai un’esperienza piacevole. È inevitabilmente una procedura goffa o, per lo meno, nessuno ha escogitato come renderlo più facile per chi acquista per la prima volta una casa. Frank e Oak, d’altra parte, svolgono un ottimo lavoro nell’assistere gli utenti suddividendo il modulo in porzioni più piccole di campi di input, riducendo il carico cognitivo sugli utenti. Sì, è ordinato e ordinato.
Probabilmente hai capito che sono alcuni dei miei requisiti più critici per la progettazione di un’interfaccia utente di successo.
Nel complesso, gran parte dell’interfaccia utente sottostante, e sicuramente l’UX, di Frank e Oak può essere trovata su molti altri siti Web, ma è il modo in cui hanno combinato un’esperienza utente logica e semplice, un’interfaccia utente forte, potente e pulita e un’immagine e un messaggio del marchio stretti e ambiziosi che lo contraddistinguono.
Questo, suppongo, sia l’asporto del settimo sito nell’elenco: una bella interfaccia utente può essere eccezionale solo se è accompagnata da un’esperienza utente forte e da un messaggio ben congegnato e sicuro.
Oh, e ho menzionato il loro fantastico blog – o rivista? Hanno sicuramente imparato l’arte di stabilire il braccio dei media e dello stile di vita di un’azienda, arrivando al punto di creare una rivista in stile giornale che rende omaggio alle forme dei giornali delle edicole utilizzando opere d’arte contemporanee, audaci e taglia e incolla. È fantastico!
8. Semplice Labs
Semplice Labs, un portfolio WordPress realizzato dal famoso designer Tobias Van Schneider, che ha progettato per Spotify, BMW, Google e persino la NASA, è una delle mie istanze preferite di un’interfaccia utente bella e utile. Per non dire altro, sa cosa sta facendo.
Il contenuto qui fa davvero appello ai lettori, incoraggiandoli a saperne di più su Semplice con un linguaggio forte e sicuro. Il resto dell’interfaccia utente del sito Web è un’illustrazione di ciò che gli utenti del prodotto possono fare con i propri siti Web. Gli utenti ricorderanno e apprezzeranno questa interfaccia grazie alle animazioni fluide e alle transizioni senza interruzioni tra le pagine.
Conclusione
Questi sono solo alcuni dei miei esempi di progettazione dell’interfaccia utente preferiti per i siti Web. Realizzare un’interfaccia utente funzionale e senza attriti è un aspetto importante per stabilire una buona relazione con un utente, per non parlare della garanzia che sia progettata pensando all’utente. Per creare un prodotto che offra la migliore esperienza utente possibile, è meglio fare riferimento alle linee guida sull’usabilità di Nielsen durante la progettazione o la valutazione di un’interfaccia.
