Quando si tratta di progettare un sito web veramente intuitivo, reattivo e coerente che sia anche unico e interessante, spesso sembra difficile riconciliare le due priorità. Ma in realtà, nulla è più lontano dalla verità: ci sono solo alcune idee fondamentali che devono essere impiegate per fare facilmente le scelte migliori nei tuoi progetti.

Il più essenziale di questi concetti è che i disegni belli e utilizzabili non sono difficili da realizzare quando la UX viene data la precedenza, e il design è adattato per adattarlo. Dopo tutto, la natura dell'esperienza utente impone che ci siano alcune regole inflessibili, mentre il design è quasi infinitamente flessibile. Una volta imparati i modi e i mezzi con cui dovresti adattare i tuoi disegni, dovresti essere sulla buona strada per trasformare una battaglia in un trattato di pace.

Anticipare l'errore dell'utente; diminuire l'irritazione dell'utente

Considera sempre cosa potrebbe accadere se l'utente si smarrisce sulla tua pagina web. Messaggio di errore non dovrebbe essere oscurato in gergo tecnico, ma piuttosto dovrebbe dare una spiegazione di quale potrebbe essere il problema, e, se applicabile, dove dovrebbero andare per ottenere aiuto. Bilancia queste considerazioni con ciò che potrebbe essere migliorato sulla tua parte. Non importa quanto sia bello un sito, se impiega troppo tempo per caricarlo, non ne vale la pena. Gli esperti dicono che se una pagina web richiede più di 3 secondi per essere caricata, deve essere semplificata.

Mantenere le forme il più brevi e non intimidatorie possibile; se l'informazione non è necessaria, non chiederla. Se non lo hai già fatto, prendi in considerazione l'idea di offrire un log-in opzionale tramite Facebook o Twitter; i siti che offrono questo spesso trovano i loro tassi di conversione in aumento perché l'utente lo trova più conveniente, ed è quindi più probabile che abbia il tempo di registrarsi. Inoltre, assicurati che il resto del tuo sito abbia una presenza integrata sui social media, che non sia in conflitto o prepoli il tuo progetto, ma sia anche facilmente identificabile, come il Lavora su Play sito web. Piccole aggiunte come questa sono ciò che si aggiunge a uno snellimento cumulativo dell'esperienza utente.

A tal fine, è importante tenere a mente alcuni standard che dovrebbero rimanere abbastanza coerenti su qualsiasi tipo di sito web.

Mantenere gli standard web

Alcuni elementi comuni di un sito, come i link a piè di pagina o una barra di ricerca, possono attivamente soffrire di eccessiva creatività. Mentre c'è spazio per l'originalità in molti di questi elementi, è importante mantenerli più o meno nella stessa forma che vedi su ogni altro sito, perché sono abbastanza onnipresenti da permettere agli utenti di aspettarsi che vengano presentati in un certo modo . Segui queste linee guida:

  • Assicurati che le aree cliccabili siano immediatamente identificabili (come i link su questo sito ) e sono abbastanza grandi da poter essere facilmente attivati;
  • Rompere blocchi di testo con immagini e altri stimoli visivi;
  • Uso briciole di pane quando applicabile;
  • Cerca di evitare di diffondere lo stesso articolo o la ricerca di prodotti su più pagine;
  • Rendi le informazioni di contatto, le domande frequenti, una barra di ricerca e altre funzionalità standard facili da trovare e utilizzare.

Sebbene Grip Limited il sito Web è accattivante ed eccitante, è anche incredibile confusione. Mentre c'è una spiegazione su come trascinare le colonne per rivelare il contenuto, è perso nel guazzabuglio di altre tipografie. Un menu tradizionale è accessibile, ma solo se spii il piccolo menu a discesa. È un design del sito così bello che a molti utenti non interessa quanto sia difficile da usare, ma molti altri sarebbero rimandati. Ma se il sito ha incorporato i suggerimenti di cui sopra nel suo design, potrebbe ancora mantenere il suo fattore interessante e fornire una buona UX.

Ad esempio, anche se il Soda comica gli altri elementi di design del sito web sono abbastanza distraenti, l'utente è ancora facilmente in grado di trovare la barra di ricerca; è l'etichettatura e la posizione è abbastanza chiara che la confusione è ridotta al minimo. Queste piccole osservazioni alla confusione dell'utente sono ciò che fa la differenza.

Dove disegnare la linea

Ci sono altre regole UX che possono essere piegate ma non rotte. Ma a che punto un designer va troppo lontano? Gli elementi di navigazione sono un buon esempio con cui lavorare, perché ogni sito ha qualche forma di essi. Convenzionalmente, sono organizzati in due modi:

  • Orizzontalmente lungo la parte superiore della pagina; questo consente un ampio look per le liste brevi;
  • Verticalmente lungo il lato sinistro di una pagina; questa disposizione può ospitare liste più lunghe.

Ma ci sono altri stili e sistemi di navigazione che possono funzionare se vengono usati con attenzione e con attenzione. Per esempio, questo sito portfolio ha una lista di navigazione che occupa la maggior parte della pagina e ogni parola è parzialmente oscurata. Inoltre, gli elementi non rimangono stazionari; scendono e si separano per mostrare il contenuto all'interno di ciascuna sezione. Tutti questi svolazzi potrebbero essere stati combinati per formare un sistema confuso che avrebbe rapidamente frustrato l'utente. Tuttavia, il design evita di essere problematico in virtù dell'essere così semplice; le parole sono ancora leggibili; i menu a discesa hanno un'informazione così ridotta che il resto della lista di navigazione non corre il rischio di perdersi. Tutto sommato, è un sistema audacemente diverso che evita di essere problematico.

Dall'altro lato della linea c'è un concetto che è stato definito come navigazione della carne misteriosa, in cui le considerazioni estetiche del design superano completamente l'usabilità. Nel caso del Sito Web di FlatPak, la navigazione deve essere spostata per leggere a cosa si riferisce; una terribile funzionalità di usabilità che non dovrebbe mai essere emulata.

Familiarità contro funzionalità

In molti modi, la vera battaglia dell'attuale web design sembra essere tra nuove idee nuove che rendono meno intuitiva l'interazione, e vecchie pratiche pesanti che potrebbero non essere la soluzione migliore, ma sono ciò a cui sono abituati gli utenti. Un esempio di questo problema si pone spesso quando si considera la progettazione skeuomorphic; che è uno stile che imita il predecessore di un oggetto realizzato in un altro supporto.

Questo tipo di design avviene continuamente sul web, dal tuo computer desktop che guarda e funziona come la sua controparte reale, ai pulsanti di un sito web che hanno un'effetto ombra realistico e un effetto smusso. Ha senso fino ad un certo punto, perché la familiarità di questi disegni fa sentire gli utenti immediatamente a proprio agio nell'utilizzarli. Tuttavia, non sono necessariamente la soluzione migliore perché sono incredibilmente limitanti.

Lo scontro tra queste due priorità può essere illustrato dalla tecnologia realistica di "page turn" di Apple, che viene utilizzata per la lettura digitale. È un'idea accattivante perché rende l'esperienza un po 'più simile a trasformare pagine fisiche, di carta, qualcosa che gli utenti potrebbero trovare tranquillamente familiari. Tuttavia, nonostante il piuttosto lunghezze ridicole l'azienda è andata a creare questo effetto, a detrimento dell'esperienza dell'utente. Ci vuole un po 'più di tempo per caricare, e sfogliare la pagina è un movimento più difficile da eseguire con una semplice spinta; un movimento ingombrante potrebbe inviare l'utente nel modo sbagliato.

Utilizza un chiaro canalizzazione di conversione

Se stai lavorando su un sito Web complesso con molti percorsi di navigazione, è molto importante consentire all'utente di spostarsi logicamente attraverso il sito e tenerli informati su dove si trovano nella mappa del sito nel suo complesso. È qui che sono utili le briciole di pane e altri dispositivi di navigazione. I link predefiniti viola temuti non hanno bisogno di essere impiegati per mostrare un utente che hanno già visitato; ci sono molte altre soluzioni più interessanti che realizzano lo stesso effetto.

I siti di e-commerce sono di solito quelli che vengono svalutati per i loro imbuti di conversione mal concepiti, ma ci sono molti ottimi esempi là fuori di negozi web ottimamente progettati e ottimizzati per UX. Prendiamo ad esempio il Frutto del telaio sito, che ha un'interfaccia pulita e amichevole che è ancora logicamente costruita. Non è nemmeno il risultato di uno sviluppo backend personalizzato e complicato; il sito è stato creato utilizzando semplice Software di e-commerce Amazon, che qualsiasi piccola impresa sarebbe in grado di sfruttare.

Accogliere la scansione e aggiungere interesse visivo

Tenere presente che le persone leggono le pagine Web in modo diverso rispetto ai supporti di stampa. Studi di localizzazione dell'occhio mostra che gli utenti web sfogliano l'intera pagina (concentrandosi inizialmente sul contenuto nell'angolo in alto a sinistra), alla ricerca di elementi accattivanti come titoli, virgolette o immagini. Quindi si approfondiscono in sezioni che sembrano interessanti. È fondamentale progettare per questo tipo di mentalità e assicurarsi di utilizzare una gerarchia visiva che indirizza l'utente dove si desidera che vada.

Il Thrive Solo blog ha un sacco di contenuti, ma mantiene un aspetto spazioso e interessante utilizzando un sacco di spazio bianco, immagini grandi, icone e caratteri tipografici variegati. I titoli grandi e centrati sono particolarmente utili per la scansione dei visualizzatori.

La linea di fondo

Mentre l'estetica di un sito crea una prima impressione, la funzionalità è ciò che dà all'utente un'esperienza duratura a cui speriamo si possa tornare. Non c'è situazione in cui le considerazioni di design e funzionalità non possano essere riconciliate; infatti, è l'interazione tra queste due priorità che finisce per creare tutti i siti migliori e più memorabili sul web.

Hai mai compromesso l'usabilità per l'estetica? Il design può essere buono senza l'usabilità? Fateci sapere che ne pensate nei commenti.

Immagine in primo piano / miniatura, immagine funzionale via Shutterstock.