Un progetto di successo è una combinazione di buon design, contenuti killer e un po 'di fortuna. Troppo spesso un design è deragliato da semplici errori UX che rovinano il contenuto e confondono le azioni previste dell'interfaccia.
Gli utenti possono facilmente perdere la cognizione del perché sono lì e di cosa dovrebbero fare. Per fortuna, molti di questi errori di progettazione sono facili da identificare e correggere. (Come bonus, gli esempi in questo post stanno facendo le cose per bene, usali come guida!)
1. Tipografia illeggibile
C'è stata una fase breve in cui i progetti erano pieni di caratteri tipografici di novità. Anche se questo non è un problema in sé, presenta un problema quando le parole sono difficili da leggere. (Che punto sono le parole in un disegno se l'utente non riesce a capire cosa dicono?)
Quando guardi le opzioni di novità, sii consapevole di come le lettere guardano con le parole che stai usando. Alcune combinazioni potrebbero funzionare meglio in un carattere tipografico rispetto ad altri. Presta attenzione alla crenatura e al numero di caratteri usati, in particolare con un carattere tipografico di novità. (Meno caratteri sono spesso migliori con la tipografia del display di specialità).
Come fai a sapere che è difficile da leggere? Fai attenzione ai caratteri tipografici con slant estremi, forme di lettere strette e condensate, scansioni, code o legature eccessivamente elaborate o forme di lettera che sembrano correre insieme o avere forme non comuni.
Sistemalo ora: Spegni quel tipo di carattere illeggibile per qualcosa con una posizione più ampia e forme di lettera più comuni. Non devi cambiare fino a Helvetica, ma cercare qualcosa di interessante e leggibile. Prova qualcosa da questa raccolta di Google Fonts.
Farlo bene: LeadGen
2. Scarso allineamento
Sinistra, destra, venter, giustificato?
Non discuteremo i meriti dei tipi di allineamento qui. Il grande asporto è questo: l'allineamento coerente è ciò che conta davvero. Tipo ed elementi dovrebbero riposare comodamente all'interno di una griglia. I bordi frastagliati dovrebbero essere evitati.
Il problema con uno scarso allineamento è che interrompe il flusso visivo, rendendo difficile per gli utenti spostarsi da un elemento all'altro nella progettazione. Possono perdersi nel caos e potrebbero perdere ciò che è più importante quando si tratta di contenuti.
Sistemalo ora: Imposta gli stili di allineamento per gli elementi. Le foto sono centrate o si posizionano in linea con il testo sul margine sinistro? Crea una serie di linee guida, regola il design e segui le regole andando avanti.
Farlo bene: Lorem Ipsum
3. Immagini inappropriate
Le immagini inappropriate sono un killer dei contenuti. Può creare una connessione visiva disgiunta con il testo o lasciare all'utente grattarsi la testa.
Mentre le immagini che mancano spesso arrivano in un? Saperlo quando lo vedi? moda, ci sono alcune bandiere rosse da cercare nei tuoi progetti.
- Immagini di scorta sciocche o sovrautilizzate: se la foto non sembra reale (le persone in giacca e cravatta che sorridono senza scopo) o se l'hai vista su altri siti simili, evitali.
- Immagini di scarsa qualità: se la foto è sfocata, scura o composta male, non usarla. Nessuna foto è migliore di una brutta foto.
- Immagini a bassa risoluzione: un'immagine pixelata è sempre male. Molte delle regole fotografiche che facevano parte dei flussi di lavoro di progettazione un paio di anni fa, devono essere riviste grazie al dominio e alla popolarità degli schermi ad alta risoluzione.
- Le immagini Fluff non migliorano il contenuto: non rimanere bloccato includendo una foto solo perché è possibile, anche quando non ha alcuna relazione con il contenuto. Le immagini dovrebbero migliorare il contenuto, non fangoso.
Sistemalo ora: Fai un controllo fotografico. Passa attraverso il tuo progetto e rimuovi tutte le immagini che contengono le bandiere rosse sopra. Non devi sostituire un'immagine se non hai qualcosa di appropriato.
Farlo bene: Xpand Laces
4. Trascurare i dettagli mobili
È risaputo che i siti web dovrebbero essere progettati su framework responsive. Sarebbe difficile trovare un designer o uno sviluppatore che argomenterebbe diversamente. Ma un modello reattivo non è una soluzione one-stop. Il design deve essere regolato per diverse dimensioni dello schermo.
Troppo spesso quel dettaglio è trascurato. Il sito web funziona su dispositivi mobili, ma le dimensioni dei caratteri sono un po 'troppo piccole o le immagini vengono ridimensionate in modo proporzionale e proporzionalmente per le diverse proporzioni di un dispositivo mobile. Questi piccoli dettagli possono seriamente infastidire gli utenti.
Sistemalo ora: Passa un po 'di tempo con il tuo design mobile. Prendi nota di tutti i dettagli che sembrano fuori luogo e causano frustrazione. Controlla le dimensioni del testo, le immagini, i tempi di caricamento, i posizionamenti dei pulsanti e apporta le modifiche necessarie per offrire un'esperienza più fluida.
Farlo bene: E Co
5. Colore pazzo
Un designer annoiato creerà un design disgiunto. Uno dei modi in cui questo si manifesta spesso è il colore pazzo e la mancanza di una tavolozza definita.
Troppo colore può distrarre e spesso ha un aspetto amatoriale. Per ogni progetto che tira fuori una tavolozza ispirata all'arcobaleno, altri 1.000 progetti falliscono. A meno che le linee guida del marchio non richiedano l'uso di questo tipo di combinazione di colori, evitatelo. (E se il tuo marchio ha queste linee guida, incoraggia un aggiornamento).
Sistemalo ora: Crea una tavolozza di colori forte. Inizia con un colore dominante e una o due opzioni secondarie. Se hai bisogno di più varianza, usa sfumature e toni da quella tavolozza (e crea regole anche per quelli). Non iniziare ad aggiungere altro colore.
Facendolo correttamente: stampa Rush Flyer
6. Non dare agli utenti qualcosa da fare
Immagina di atterrare su una bella pagina web, ma poi non sai cosa fare dopo. Scorri? Fai clic? C'è un prossimo passo per trovare più contenuti?
Dovrebbe esserci.
Un buon design del sito web è una rete di azioni, interazioni e movimenti che fluiscono da una pagina all'altra. L'obiettivo è quello di far connettersi i visitatori con il maggior numero possibile di contenuti sul percorso verso un'azione desiderata.
Sistemalo ora: Ogni pagina nel design dovrebbe contenere un invito all'azione.Gli utenti devono sapere esattamente qual è l'obiettivo di ogni pagina e vogliono fare clic sul pulsante, compilare un modulo, giocare o acquistare un prodotto. La struttura di progettazione dovrebbe includere elementi di interfaccia utente in grassetto per incoraggiare i clic o i tocchi dagli stili dei pulsanti alle istruzioni eseguibili.
Farlo bene: Vinebox
7. Troppa di buona cosa
Non esagerare con il tuo elemento super-cool.
Hai una bella illustrazione? Usalo. Usalo grande, anche. Ma non ingombrarlo con molte altre illustrazioni che diluiscono l'immagine.
Lo stesso vale per le icone o qualsiasi altra tecnica che è il tuo gancio per attirare gli utenti. Vuoi lasciarli desiderati di più, non sopraffatti dal volume. Sembra abbastanza facile, ma può essere difficile in realtà. (Basti pensare a quel pacchetto di icone che hai acquistato e sentendo il bisogno di ottenere il valore dei tuoi soldi usando ogni articolo.)
Sistemalo ora: Impiegare meno è più strategia. Utilizza solo gli elementi necessari per migliorare il contenuto. Non travolgerlo. Passa attraverso il design attuale e immagina di prendere un elemento lontano da ogni pagina. Cosa sarebbe? Il design è migliore per questo?
Fallo bene: Art Lovers Australia
Conclusione
Ogni designer commette un errore di progettazione qua e là. (Alcuni di noi fanno più di quanto vorremmo ammettere). Ma puoi identificare i problemi e recuperare?
Dovresti iniziare bene in quella direzione con questo elenco di errori e modi per correggerli. Non vergognarti quando commetti un peccato di progettazione, regola e vai avanti.