Oggi esamineremo 15 bit di interfaccia utente e progettazione dell'esperienza che aumentano l'esperienza di utilizzo di un sito o di un'applicazione.
Usa questi esempi di applicazioni per siti Web, iPhone e desktop come fonte d'ispirazione per creare esperienze utente coinvolgenti in modo univoco.
introduzione
Questo post servirà come mia piccola interfaccia hall of fame. È un miscuglio completo di diversi tipi di interfacce ed elementi che trovo utili e di ispirazione.
Ogni esempio è pensato per farti pensare a nuove possibilità che non hai mai preso in considerazione e per incoraggiarti a cercare sempre di massimizzare il valore dell'esperienza che stai fornendo ai tuoi utenti.
Effetto Parallax a scorrimento laterale
Questo piccolo è un chiarore superfluo puramente visivo, ma migliora davvero l'esperienza di un sito a scorrimento laterale.
Lo scrolling parallasse è un effetto in cui lo sfondo viene suddiviso in livelli diversi che si spostano a velocità diverse durante una scroll. Gli strati più indietro si spostano più lentamente degli strati da vicino e viene creata un'illusione 3D.
Il portfolio di Charlie Gentle sopra è un eccellente esempio di questo effetto. Il sito Web è diviso in sezioni separate, accessibili facendo clic sui pulsanti avanti e indietro sul lato dello schermo.
Quando fai clic su un pulsante, il sito scorre agevolmente fino alla sezione successiva, a quel punto l'effetto di parallasse inizia con il bokeh nella parte superiore dello schermo. È un trucco semplice che rende davvero vivo il sito.
iPhone verso il basso per aggiornare
La maggior parte delle app di social phone ha un sistema per aggiornare il flusso di dati. Alcuni ti scuotono, altri toccano un pulsante, ma il metodo che sembra davvero più sensato per me è "tirare giù per aggiornare".
App come Gowalla, Foursquare e Tweetie hanno adottato questo come il modo principale per aggiornare. La ragione per cui funziona così bene è a causa della immediatezza dell'interazione. Stai guardando e sfogliando una lista con il dito e quando vuoi che si aggiorni, non dovresti lasciare quell'area.
Posizionando un pulsante in qualsiasi altra posizione sullo schermo si crea una disconnessione e un'interruzione nel flusso di azioni dell'utente. Devono lasciare la lista, interagire con una parte dell'interfaccia utente separata e tornare a quello che stavano facendo. In questo modo si tratta di un'unica azione, localizzata in un'unica posizione primaria.
La lezione qui è esaminare le interfacce utente per elementi che interrompono inutilmente il flusso di attenzione dell'utente. Considerare se l'interfaccia possa essere migliorata o meno integrando elementi distanti nell'area interessata.
HUD accessibili a livello globale
Alcune delle mie applicazioni Mac preferite sono quelle che funzioneranno silenziosamente in background, ma possono apparire in un attimo con una speciale scorciatoia da tastiera, quindi scomparire quando hai finito con loro.
Nel caso di The Hit List, l'head up display (HUD) non è l'interfaccia principale dell'applicazione, ma piuttosto un pezzo ridimensionato dell'app che è utile per annotare gli elementi che ti vengono in mente.
Questo tipo di funzionalità globale (accesso da qualsiasi luogo) rende queste applicazioni meno simili e più simili a funzioni integrate direttamente nel mio sistema operativo.
Considera come puoi utilizzare gli HUD nelle tue interfacce per estendere la funzionalità di alcune parti delle tue applicazioni e dei tuoi siti web.
Converti i menu circolari
Convertbot è uno di quei pochi esempi di progettazione dell'interfaccia utente che è discutibilmente più difficile da usare e allo stesso tempo molto più divertente.
Questa app per iPhone utilizza uno strano ma bellissimo menu circolare per convertire le unità di base. Ci sono un sacco di app nell'app store di iPhone che svolgono questa attività in modo molto più diretto e facile da capire, ma non sono nemmeno divertenti da usare.
Con Converbot seduto sul mio iPod guardo costantemente agli scenari che mi meritano tirando fuori l'app. L'interfaccia utente presenta animazioni slick, colori e trame meravigliosi e funzionalità fluide che ne fanno un piacere.
Questa app dimostra che in rare occasioni, dare agli utenti il contrario di ciò che si aspettano può essere proprio ciò che il medico dell'interfaccia ha ordinato. Assicurati solo di avere l'abilità di progettazione per sostenerlo come i ragazzi di Tapbots ovviamente fanno.
SlideDeck
Non c'è carenza di slider jQuery sul Web, ma ce ne sono alcuni che si distinguono dagli altri come un'implementazione utile e unica. SlideDeck è uno di questi.
SlideDeck utilizza un formato di fisarmonica per riempire tonnellate di informazioni in uno spazio incredibilmente piccolo, organizzato e completamente accessibile. Il contenuto è diviso in sezioni che sono quindi nascoste in barre verticali che si espandono quando si fa clic su. Man mano che una sezione si espande, la sezione precedentemente aperta crolla in un'animazione fluida e piacevole.
La cosa che lo rende così eccezionale è quanto è facile ottenere la parte giusta dello slideshow che vuoi vedere. Questi tipi di cursori utilizzano in genere piccole icone o punti per passare a pagine specifiche, ma questo metodo è molto più descrittivo ed evidente.
Email di Strongbad: Go Rando!
Prima di tutto, se non sai chi è Strongbad, vergognati. È di gran lunga il personaggio più popolare nel lungo cartone animato di Internet con Homestarrunner e i suoi amici.
Ogni settimana Strongbad risponde a un'e-mail da uno spettatore e ne consegue l'ilarità finale. Gli episodi passati sono conservati in una lista enorme e ingombrante che si scorre mentre Strongbad canta la sua ultima canzone sullo scorrimento.
Recentemente, gli sviluppatori hanno aggiunto un? Go rando? pulsante. Cliccando su questo piccolo frammento di testo potresti averti semplicemente portato a un'e-mail casuale, ma questo non era abbastanza buono per Strongbad. Invece, facendo clic su questo pulsante si imposta l'intero elenco scorrendo come Ruota della fortuna (completo di rallentamento e arresto) mentre Strongbad fornisce gli esilaranti effetti sonori.
Ovviamente, è così incredibile che devi usarlo diverse volte prima di poterti considerare finito.
Il punto è che a volte mettere un po 'di pensiero (e persino commedia) nella tua più piccola caratteristica può trasformare quella cosa nella caratteristica preferita di tutti sul tuo sito. Inoltre, rendere il tuo sito web semplicemente esplosivo da usare è un modo sicuro per conquistare e fidelizzare gli utenti.
Made By Tinder Color Picker
Tinder è qualcosa di super segreto che la Fuel Brand Network si è nascosta nella manica. Anche se non ho idea di cosa sia, adoro la piccola pagina teaser che hanno sviluppato.
I piccoli rettangoli nella parte superiore dello schermo forniscono sette diversi schemi di colori per visualizzare il sito. Quando fai clic su un colore, lo sfondo cambia e il contenuto della pagina si aggiorna per massimizzare il contrasto sul nuovo sfondo.
Ho passato più tempo di quanto ammetto in questo sito e giocherellando con quei piccoli pulsanti. Un saluto affettuoso alla squadra Fuel per aver creato una delle mie pagine preferite in arrivo.
Pixelmator: stringhe collegate
Pixelmator è un'alternativa di modifica delle immagini eccellente e conveniente per Photoshop. Sebbene non sia così potente, Pixelmator apporta molta innovazione al tavolo e offre tariffe migliori di qualsiasi altro concorrente di Photoshop che abbia mai incontrato.
Una delle mie caratteristiche dell'interfaccia utente preferite in Pixelmator sono queste piccole stringhe che si aprono quando si applicano gli effetti. Nel caso precedente puoi trascinare il punto per riposizionare il centro dell'effetto applicato. Il punto è collegato a questa stringa che lo lega alla finestra del filtro. Mentre sposti il punto, la corda rimbalza per la corsa con una fisica realistica.
Onestamente non vedo nemmeno la necessità che queste piccole stringhe esistano, perché è ovvio che la finestra e l'effetto sono correlati, ma la loro presenza serve come un buon rinforzo visivo di questo fatto e rende l'applicazione dei filtri molto più divertente.
Enormi effetti Hover
Quasi ogni sito web che visiti ha una specie di evento hover applicato ai link. Di solito, questo è qualcosa di piccolo e non troppo distratto; quel tanto che basta per dirci che c'è un link lì.
Riot Industries ha giustamente deciso che avevano bisogno di rompere questa tendenza dando all'effetto hover la maggior parte dello spazio sulla pagina e il collegamento di una piccola quantità di spazio.
Mentre si posiziona il puntatore del mouse sopra la piccola striscia verticale delle miniature, il testo enorme a destra inizia a ingrandirsi. Corre e colpisce la parte superiore dello schermo, dove sfarfalla a un nuovo messaggio corrispondente all'icona che stai passando sopra e poi torna indietro per fermarsi accanto a quell'icona.
Non ho mai visto un altro sito con un effetto simile a questo e mi piace molto la funzionalità tipografica di tutto questo.
Trascina e rilascia online
Come un avido utente Mac, tendo a pensare che tutto nella vita dovrebbe funzionare con? Trascina e rilascia? funzionalità. Sempre più di recente, sto vedendo questa idea riflessa in un ambiente online.
Nell'esempio sopra, facendo clic su un'icona si verrà indirizzati alla pagina dedicata dell'applicazione. Tuttavia, se si desidera ignorare questo e scaricare l'applicazione subito, è sufficiente trascinare l'icona dell'app sul pulsante di download. Nifty no?
Un altro posto in cui si vede la grande funzionalità di trascinamento della selezione online si trova sul carrello degli acquisti IconDock. Qui basta trascinare le icone che si desidera acquistare sul dock per tenerle per l'acquisto in un secondo momento.
Photoshop.com Photo Pile
Questo è un altro esempio che è davvero inutilizzabile dal punto di vista funzionale, ma rappresenta un bel tocco in più che manterrà i visitatori interessati più a lungo.
Mentre la pagina di Photoshop.com si carica, una pila di polaroid viene rilasciata sullo schermo e rimbalza in tutte le direzioni. La pila diventa quindi completamente interattiva. Puoi fare clic e trascinare le aree dello schermo per lanciare foto selvaggiamente e guardarle mentre si infrangono sugli altri.
La fisica sembra funzionare abbastanza bene e il tutto aggiunge sicuramente una grande interazione alla pagina.
Segui il mouse
Il sito sotto è un altro che presenta un buon effetto di parallasse, ma questa volta voglio concentrarmi maggiormente sul modo in cui interagisci con questa scena.
Non appena carichi questa pagina ti rendi conto che sta succedendo qualcosa di strano. Mentre muovi il cursore a sinistra ea destra, lo sfondo reagisce come se stessi muovendo la testa. Mentre la pagina si sposta di lato, viene rivelato più del paesaggio.
Anche se non è appropriato sulla maggior parte dei siti, questo metodo unico di guardarsi intorno funziona davvero bene qui e aggiunge davvero all'effetto 3D. Ho persino visto altri siti che adottano questo metodo ancora di più rendendolo il modo principale per navigare in tutto il contenuto della pagina.
Dual Slider
Questo è un altro slider jQuery che si distingue come un design straordinariamente brillante.
Il template WordPress di ThemeForest sopra presenta una sorta di doppio cursore dell'immagine. Il primo cursore contiene immagini e il secondo contiene descrizioni dell'immagine.
Quando il cursore dell'immagine si sposta verticalmente, il cursore della descrizione scorre orizzontalmente. L'effetto risultante è simile alla visione di una macchina complessa; le due animazioni si sentono come se fossero una singola funzione.
È un modo eccezionale per mostrare immagini e testo che mi hanno davvero lasciato di stucco e volere di più.
Scorrimento con quantità di moto
Quando per la prima volta ho messo le mani su un iPhone alcuni anni fa, mi sono subito innamorato dell'idea di interazione dell'utente basata sul momento. Quando ho fatto scorrere il dito su Safari, non c'era un rapporto di movimento 1: 1, piuttosto il dispositivo ha usato il mio film come se fossi effettivamente un foglio di carta che avrebbe creato slancio, picco e poi rallentato in base al forza della mia azione.
Da allora, ho voluto più tecnologia per raccogliere questa idea, in particolare OS X. Fortunatamente, il Magic Mouse di Apple ha prodotto proprio quella cosa.
Attivando? Scorrere con slancio? puoi imitare la funzionalità di scorrimento dell'iPhone. Tuttavia, scorrendo rapidamente su un iPhone, lo schermo si abbassa mentre sfogliando su un Magic Mouse lo schermo si solleva. Questo ha senso a causa dell'indipendenza del mouse, ma desidero ancora che tu possa cambiare la funzione del mouse per specchiare l'iPhone.
La lezione qui è che ogni volta che puoi inserire un pezzo di realtà in un'esperienza utente simulata, aumenta il timore dello spettatore e fa sembrare tutto più magico (guarda ora, mi sembra un impiegato Apple).
Veramente minimo
Sebbene io ami le interfacce meravigliosamente complesse, ci sono momenti in cui hai solo bisogno di essere produttivi con i tuoi pensieri e quasi nient'altro. Di tanto in tanto arriva un'interfaccia che rende davvero questa idea, e non riesco a pensare a una migliore di WriteRoom per Mac.
Nonostante il suo aspetto, WriteRoom è un editor di testo piuttosto potente e ricco di funzionalità e opzioni di personalizzazione. Si nasconde semplicemente tutto sotto un'interfaccia meravigliosamente semplice che ti fa sentire come se stessi digitando numeri in un tratteggio su LOST.
Per quanto possa sembrare folle, questo è il tipo di esperienza utente che trovo più avvincente. Qualcosa di unico e coinvolgente che ti porta via in un altro momento e dove tutto cade e puoi concentrarti interamente sull'attività da svolgere.
Conclusione
Bene, questa è la mia lista di elementi e interfacce ispiratrici. Spero che aiuti a suscitare grandi idee nella tua testa su come migliorare ulteriormente i tuoi progetti in modi grandi e piccoli.
Usa i commenti qui sotto per raccontarci di quei piccoli frammenti di interfaccia utente che ritieni siano davvero grandi e cosa pensi degli esempi sopra.