Come il touch screen Revolution sta influenzando UX
L'introduzione di Windows 8 ha visto una massiccia revisione dell'interfaccia utente di Windows in linea con l'interfaccia di Windows Phone per essere più intuitiva per le persone che utilizzano i touch screen e Apple ha adattato sottilmente l'OSX nel tempo, semplificando le funzionalità che stanno diventando sempre più condivise attraverso i loro sistemi operativi mobili e desktop. Anche se dobbiamo ancora vedere un touchscreen Mac, è ovvio che la rivoluzione del touch screen incombe su noi utenti che passano sempre più tempo sui propri dispositivi mobili rispetto ai PC domestici.
Con questo in mente e una percentuale sempre crescente di navigazione che si svolgono su smartphone e tablet, i siti Web devono decidere in che modo si adatteranno alle persone che accedono ai loro contenuti senza mouse e tastiera. Anche se la risposta predefinita a questa situazione è stata "basta creare un'interfaccia mobile separata!", Una soluzione che ha funzionato bene in passato su dispositivi mobili più piccoli come i telefoni, c'è poco spazio per il gruppo centrale occupato da telefoni più grandi e display per tablet.
In questo articolo daremo un'occhiata ad un numero di siti che hanno ridotto sia i progetti di siti non convenzionali che quelli standard per diventare più intuitivi.
Siti Web mirati e siti Web reattivi
Molti siti Web hanno creato siti secondari o app specifici per gli utenti di touch screen, per consentire loro di concentrarsi su un tipo di utente alla volta. Un problema è che, poiché i siti web sono separati, si basano sul reindirizzamento dell'URL, che può spesso portare a problemi come l'utente che viene inviato al sito sbagliato dai link o uno scarso reindirizzamento a causa del bisogno di reindirizzamento a pagine formattate per utenti mobili.
Il problema più grande con i siti Web separati per gli utenti mobili, tuttavia, è che spesso nella versione mobile mancano funzionalità o informazioni ricevute da un utente desktop; caratteristiche e interfacce spesso semplificate, pulsanti ingranditi e opzioni ridotte. Questo può essere risolto usando un design "reattivo". Un sito Web reattivo è progettato per essere facilmente visualizzato su entrambe le piattaforme senza perdere qualità su nessuno dei due. Questo ha anche il vantaggio che è necessario progettare un solo sito Web, anziché due, tuttavia questo spesso si traduce in compromessi per entrambe le piattaforme.
Differenze di progettazione di base
Ci sono ovvie differenze tra un touch screen e un desktop a cui devi pensare quando crei il tuo sito web. Su un touch screen scorri verso l'alto la pagina per scorrere verso il basso, tuttavia su un desktop muovi la rotella di scorrimento verso il basso. Apple ha tentato di correggere questo problema consolidando le proprie tecnologie di interfaccia touch in trackpad sia sul laptop che sul desktop Mac, tuttavia gli utenti di PC o persino gli utenti Mac che utilizzano rotelline o cursori di scorrimento tradizionali per scorrere le pagine Web sono in svantaggio.
I pulsanti devono essere molto più grandi sui dispositivi mobili, in quanto il battere non è neanche lontanamente preciso quanto fare clic con il mouse, non c'è niente di più irritante che cercare di fare clic su un link per la pagina successiva e accidentalmente essere rimandati indietro su una pagina o su un annuncio. La mancanza di un cursore significa anche che non puoi avere stati di hover per spiegare dove va un link, cosa significa una parola o anche cosa è cliccabile.
Esiste anche una differenza tra la precisione sugli ingressi mobili poiché i touchscreen possono avere ingressi resistivi o capacitivi che hanno sensibilità diverse e successivamente la precisione può essere persa su touchscreen resistivi. Oltre a questo, i progetti devono includere due risoluzioni estremamente diverse per dispositivi mobili che hanno due orientamenti.
Orientamento dello schermo e proporzioni
Con risoluzioni multiple oltre le dimensioni normali del monitor significa che non puoi più pensare solo in termini di risoluzioni dello schermo standardizzate e movimento verticale. I rapidi cambiamenti nel mercato della tecnologia hanno prodotto dimensioni dello schermo che differiscono da modello e produttore e con tutte le voci sui cosiddetti orologi intelligenti potremmo iniziare a vedere schermi che non sono più limitati a quattro confini. Gli schermi mobili aggiungono ulteriore complessità grazie al fatto che possono essere visualizzati sia in modalità verticale che orizzontale attraverso la rotazione.
La risposta sono layout liquidi che si adattano automaticamente a qualsiasi risoluzione e possono adattarsi sia alla visualizzazione verticale che orizzontale. Alcuni siti Web utilizzano un layout liquido che modifica drasticamente l'aspetto del sito Web al fine di ottimizzare la facilità di controllo e sfruttare tutto il potenziale dello schermo in base al suo orientamento.
Mentre i mouse sono stati progettati specificamente con le rotelline per facilitare lo scorrimento verticale, molti utenti stanno migrando verso touchpad e touchscreen e da quando Apple ha adottato la forma più innovativa di touch-scrolling che è simile a trascinare una pagina anziché scorrere, l'idea più creativa di lo scorrimento orizzontale potrebbe non essere fuori discussione. La maggior parte delle app utilizza lo scorrimento orizzontale come strumento e il maggior successo nello scorrimento orizzontale è il kindle, quindi perché non implementarlo nell'interfaccia utente Web? Molti siti a pagina singola hanno un solo asse orizzontale, tuttavia spesso devono utilizzare i pulsanti per istigare lo scorrimento perché gli utenti potrebbero non comprendere il formato non standard.
Lo scorrimento orizzontale può essere simile allo scorrimento verticale in termini di design, tuttavia l'utilizzo di entrambi può aprire la possibilità di scorrimento a doppio asse, che potrebbe non funzionare nel browser. A molti utenti piace essere ancorati a un asse, ovviamente questo è solitamente l'asse x, che è statico, quindi se gli utenti si perdono nella pagina possono semplicemente scorrere verso l'alto e tornare alla navigazione principale. Sui siti a doppio asse questo potrebbe non essere così semplice, e quindi la navigazione potrebbe dover essere appiccicosa, usando una barra di stile HUD.
Quindi quale interfaccia utente dovrebbe utilizzare il tuo sito web?
Ovviamente non tutte le interfacce utente sono adatte per ogni tipo di sito Web, quindi ponetevi alcune domande di base: chi è il vostro pubblico di destinazione? Cosa stai cercando di "vendere"? Che impressione vuoi dare? È più probabile che i più giovani utilizzino i touch screen rispetto a un demografico più anziano che probabilmente utilizzerà un desktop, ma potrebbero comunque aver bisogno di pulsanti più grandi e un'interfaccia utente più chiara. Non ha senso creare l'UI più innovativa che si possa immaginare se nessuno può capire come usarlo, quindi ricorda sempre di creare un'interfaccia utente che un utente può vedere e sapere immediatamente come usare.
Menu radiale
Un menu radiale, noto anche come menu di torta, è un menu di scelta rapida circolare che utilizza il contesto multidirezionale anziché l'altezza o la larghezza come strumento di selezione.
Questa è una grande forma di design intuitivo che impedisce agli utenti di perdersi in dozzine di sottomenu. Un altro vantaggio è che un utente touchscreen ha un controllo migliore sui normali elenchi a discesa in quanto il controllo direzionale è più accurato del tocco. L'uso di menu radiali in moduli e siti Web potrebbe migliorare notevolmente l'esperienza degli utenti touch screen sul sito Web e si estende alle levette come quelle utilizzate sulle console di gioco, dove spesso vengono utilizzati i menu radiali poiché consente di trasferire facilmente i giochi su PC. In questo modo, gli utenti desktop non si perdono, in quanto i menu radiali possono semplificare le lunghe liste in categorie semplici aumentando la facilità d'uso o la produttività su un sito web.
I menu radiali sono un ottimo modo per mostrare informazioni sensibili al contesto, un esempio di ciò è fare clic su un'immagine di un piatto in un sito di cibo e ricevere l'opzione di retweet, il link della ricetta, la lista degli ingredienti o il salvataggio dell'immagine. Tuttavia, devi fare attenzione che il tuo menu rimanga accessibile e semplice, altrimenti puoi tranquillamente sopraffare l'utente soprattutto quando si combinano simboli e parole nello stesso menu radiale. I menu radiali sono molto più facili da usare quando sono statici piuttosto che dinamici in quanto ciò può portare a difficoltà nella selezione degli oggetti come su siti come Phong , in questo caso, specialmente quando si utilizza un mouse poiché il rilevamento del cursore lo rende particolarmente intuitivo.
Skeuomorphism
Il design Skeuomorphic imita l'aspetto e la funzionalità di un oggetto quotidiano per creare un'interfaccia utente intuitiva, qualcosa che recentemente è andato fuori moda, specialmente da quando Scott Forstall ha rassegnato le dimissioni da Apple e il design piatto di Sir Jony Ive ha assunto iOS e probabilmente OS X nel futuro. Lo Skeuomorphism è stato una parte importante della spinta di Apple verso un design più intuitivo, recentemente con Contacts su Mac progettato come una vera e propria rubrica, o Edicola e iBook su iOS come veri e propri bookshelves. Questo design è uno che apprezza in modo più evidente gli utenti di interfacce touch, dal momento che non interagiamo con il mondo intorno a noi con un cursore.
La familiarità aggiunge all'intuitività quando si utilizza qualsiasi interfaccia utente, questo è il punto dello skeuomorphism, per portare una dimensione extra di familiarità unendo le forze con oggetti reali in modo che l'utente sappia immediatamente come interagire con esso. Un design skeuomorphic di successo significa che semplicemente dando un'occhiata alla pagina web saprai per cosa è usato / la pagina, rendendo obsolete le descrizioni dei passaggi del mouse e i punti salienti del collegamento.
Componi l'interfaccia utente
Questa è una combinazione di entrambi i precedenti in cui l'intera interfaccia utente forma un quadrante semplice; il design assomiglia a un menu radiale, ma invece di incentrare il centro, selezionando da lì, il quadrante ruota su un singolo punto di selezione. Questo è molto efficace in casi come la musica in cui i dial vengono spesso usati per mixare una traccia e controllare il volume. Nel caso dell'etichetta di rete SHSK'H usano un tipo di interfaccia utente di composizione modificata per selezionare quale traccia si desidera riprodurre.
Il movimento minimalista
Il minimalismo è il luogo in cui un sito web viene ridotto ai suoi essenziali elementi essenziali. Questo è ottimo per gli utenti mobili in quanto riduce i tempi di caricamento e l'utilizzo dei dati e consente all'utente di accedere a tutte le informazioni necessarie in un'interfaccia chiara che è più facile da usare per risoluzioni più piccole. L'attuale minimalismo è andato oltre i siti di spoglio per l'essenziale, e ha formato un nuovo stile noto come design piatto. Ciò dipende dalla convinzione che l'intuizione non è più necessaria nel design poiché le interfacce e il loro utilizzo sono diventati una parte così importante della vita che il design può andare oltre a dire agli utenti cosa fare, un'interfaccia utente può finalmente essere uno strumento, piuttosto che raddoppiare come un mentore. Il design piatto è stato a lungo caratterizzato dall'uso di colori in grassetto, ma con l'introduzione di iOS7, le sfumature hanno preso il loro posto nel mondo del design piatto senza bordi, estraendo l'eleganza dal vistoso.
Infine, terminerò questo articolo con un sito che fa le cose in modo leggermente diverso. Thibaud è uno sviluppatore creativo che ha progettato un costruttore di siti Web di portfolio noto come Pikibox. Il sito Web è estremamente intuitivo ma senza ostacolare la sua accessibilità agli utenti desktop, su dispositivi touchscreen più piccoli, tuttavia l'utente viene inviato a un reindirizzamento mirato con un'interfaccia mobile.
Il design semplice funziona meravigliosamente mostrando il suo intero portfolio in modo professionale, pur mantenendo un aspetto nuovo e divertente che è estremamente intuitivo. Naturalmente, gran parte del design è nelle mani dell'utente, in quanto è in grado di modificare la posizione della navigazione e regolare l'utilizzo spaziale, che alcuni direbbero che non costituiscono esattamente una scelta progettuale. La versione desktop è disponibile in quattro stili, e vi invito a giocare con loro, e trarre le vostre conclusioni sul fatto che sia semplicemente indeciso o estremamente creativo.
Quali compromessi hai fatto in seguito ai touch screen? È il passato al passaggio del mouse? Fateci sapere nei commenti.
Immagine in primo piano / miniatura, toccare l'immagine via Shutterstock.