Design = Emozioni + Usabilità
Mentre l'arte artistica è un campo soggettivo, il design grafico è più formulato nei suoi fondamenti. Un design efficace dovrebbe far sentire le persone in un certo modo e fare una certa azione . In questo articolo mi piacerebbe condividere Gravity Switch principi del web design e il nostro pensiero dietro di loro.
Queste regole sono: definire prima gli obiettivi; concentrarsi sugli utenti in secondo luogo; design per emozione; seguire le regole del visual design; costruire una gerarchia visiva chiara; essere coerenti; infrangere le regole (quando necessario); non abusare di espedienti; e infine testare, misurare e migliorare.
1. Definisci prima gli obiettivi
Scommetto che pensavi che stavo per dire "concentrati sugli utenti prima", ecco cosa maggior partepersonedire. Dimentica quello, iniziamo con i tuoi obiettivi. Iniziare ogni progetto di progettazione di siti Web con una sessione di brainstorming che delinea obiettivi chiari e realistici del sito Web che rafforzano gli obiettivi aziendali .
Per meglio illustrare questo, diamo un'occhiata ad Amazon. Il loro obiettivo è massimizzare le vendite dei prodotti. Attraverso "upselling" e "cross-selling" possono massimizzare il potere d'acquisto di ciascun utente, ma per avere successo in questo rallentano il processo di acquisto. A differenza di molti dei loro concorrenti, Amazon non ha un pulsante "acquista ora" nei risultati di ricerca. Gli utenti devono visitare un'altra pagina (con potenziali upsells) prima di effettuare un acquisto. Questo è un perfetto esempio di come un design del sito può soddisfare chiari obiettivi di business.
La maggior parte dei siti di e-commerce moderni ha rimosso il pulsante "acquista ora" dai risultati di ricerca, anche se alcuni negozi di mattoni e cemento lo conservano ancora.
2. Concentrati sugli utenti in secondo luogo
Con i tuoi obiettivi chiari, dovrai quindi definire e assegnare priorità agli utenti . Essere il più specifici possibile. Alcuni esempi di domande da porre sono:
- Ripartizione maschile / femminile?
- Livello scolastico?
- Posizioni in paese?
- Hobby correlati?
- Fascia di reddito?
- Chi guida gli acquisti di prodotti per bambini? I bambini? I genitori? Nonni?
Il punto chiave è che i progettisti dovrebbero essere a conoscenza degli utenti in modo che possano garantire che i loro progetti non blocchino i percorsi di utilizzo delle chiavi.
3. Design per le emozioni
Assicurati di capire quali emozioni dovrebbe suscitare il tuo marchio . Brainstorm. Fare domande. Ottieni un accordo. E, cosa forse più importante, concentrati su queste emozioni quando ti riporti ai tuoi clienti. Non chiedere mai se al tuo cliente piace un progetto. Quando consegni i disegni dovresti invece porre domande come "Quale di questi ti fa sentire più professionale?" O "Quando confronti questi due disegni vedrai che questo è più moderno, mentre questo è più dinamico. Quelle erano entrambe emozioni che erano importanti per te, ora che le vedi visivamente quale pensi sia l'emozione più importante da presentare al tuo pubblico di destinazione? "
Quale di queste organizzazioni è divertente? Rilassante? Innovativo? Occupato? Vero? (Disegni di @JessicaShiner e Christine Mark)
4. Segui le regole del design visivo
Ci sono molti piccoli elementi che gli utenti del sito web usano consciamente e inconsciamente per decidere se avranno fiducia in un sito web. I più importanti sono:
- Ritaglio: la selezione delle foto è solo metà della battaglia, il ritaglio delle foto è ciò che crea o interrompe il layout di una pagina.
- Spazio negativo: prestare attenzione ai margini, al riempimento e all'altezza della linea è la differenza tra l'aspetto del New York Times rispetto a quello delle scuole superiori.
- Tipi di carattere: tutti amano scegliere i caratteri, ma un grande designer può individuare rapidamente un font professionale e ha il coraggio di mantenere il numero di caratteri sul sito web a 1-2 (senza contare il logo che è spesso il proprio carattere).
- Colori: i colori sono una delle cose più difficili da usare in modo efficace per i progettisti. Ci sono così tante regole per scegliere una buona tavolozza di colori, e mentre si è tentati di usare online generatori di palette di colori , dedica del tempo a progettare la tua tavolozza di colori.
- Layout: crea un buon "flusso" visivo della pagina in modo che gli occhi dell'utente vadano dove vuoi che vadano sulla pagina senza che altri elementi offuschino visivamente i tuoi obiettivi.
5. Costruisci una gerarchia visiva chiara
I visitatori del sito scremano. Non leggono. Attira la loro attenzione e portali alle informazioni più importanti con una gerarchia visiva ben definita e ben pensata . Un design ben progettato - sezione> pagina> sezione - conduce l'utente attraverso la pagina nel modo desiderato. Gli utenti dovrebbero essere in grado di dare un'occhiata alla tua pagina e capirla in una frazione di secondo.
Guarda il seguente esempio di un articolo e nota come è difficile per il tuo occhio dire di cosa tratta la pagina o dove inizia l'articolo!
Di seguito è riportato un mockup che ho apportato modificando una dozzina di righe di CSS per creare una gerarchia visiva più chiara su questa pagina nei seguenti modi:
- Il titolo dell'articolo dovrebbe essere l'elemento più importante nella pagina. Al momento è una dimensione del carattere più piccola rispetto alla voce più in basso nella pagina! Così ho aumentato la dimensione del titolo dell'articolo e ho ridotto le dimensioni delle intestazioni.
- Anche la voce più in basso nella pagina è stata disconnessa dal contenuto che era un titolo visivamente, quindi ho anche rafforzato la spaziatura sotto l'intestazione lasciando lo spazio sopra l'intestazione per far sapere agli utenti che si tratta di un titolo per il paragrafo sottostante .
- Ho spostato anche la piccola immagine a destra del titolo anziché a sinistra, in modo che quando un utente esegue la scansione sul lato sinistro della pagina per orientarsi, il titolo dell'articolo è nella loro visione.
- Ho rimosso le classi di confine e di sfondo sul blurb blu in modo che non sia più in concorrenza con l'intestazione e rimosso il margine superiore. C'era già una classe in atto per renderla grigia, che funziona bene in questo caso.
- Ho anche rimosso il testo e l'immagine che distrae, il che evidenzia che si tratta di un articolo di ristampa così come alcuni paragrafi vuoti e
tag.
Ho lasciato intenzionalmente tutti gli annunci come erano originariamente codificati, supponendo che questa sia una parte critica di questa pagina.
6. Sii coerente
Non confondere i tuoi utenti. I collegamenti dovrebbero essere coerenti e distinti. Se scegli di utilizzare icone, foto e illustrazioni, assicurati che sembrino appartenere a un set coesivo. Le incoerenze distraggono il tuo utente e oscurano il tuo messaggio. Non utilizzare più di 3 caratteri: è meglio se sono tutti della stessa famiglia. Limitatevi a 5-6 colori (Nota: il logo può essere un font diverso e spesso dovrebbe essere).
7. Rompere le regole (quando necessario)
Se c'è qualcosa di particolarmente unico o importante che devi evidenziare, potresti aver bisogno di "infrangere le regole". Puoi usare uno o due colori contrastanti per aiutare l'elemento a risaltare. Ad esempio, il sito web del Regno Unito sotto enfatizza l'aliquota fiscale rendendolo un elemento più grande con un tocco di colore.
Quando le persone visitano la pagina di informazioni su IVA, i progettisti di GOV.UK si sono assicurati che l'informazione di cui la maggior parte della gente ha bisogno sia anteriore e centrale.
8. Non abusare di espedienti
Rendi il tuo design divertente, ma assicurati che questi elementi supportino ciò che stai cercando di realizzare sul sito. Ad esempio il Inze il sito è bello da vedere e meraviglioso sul cellulare, ma quando l'ho visitato sul mio computer desktop ero perso. Si scopre che la navigazione è nascosta finché non inizi a scorrere il quale, sfortunatamente, mi ha indirizzato verso la parte inferiore della pagina. Di conseguenza non ho nemmeno notato la navigazione sottile che appare in alto. Scorri quasi fino in fondo prima di rendermi conto che c'era (finalmente) una navigazione in alto. La navigazione "nascosta" è un effetto pulito, ma il "design" mi ha impedito di compiere l'azione desiderata. Alla fine, trasmette un'immagine di marchio confusa e sciatta.
Confronta Inze con ciò che accade proprio in questo articolo qui Depot di Web Designer quando passi un collegamento sul tuo computer desktop. Abbiamo un effetto pulito ma non crea una "barriera" per gli utenti per il gusto di una trovata. Si degrada anche con grazia, quindi non si romperà sui browser mobili o vecchi.
9. Test. Misurare. Migliorare
I siti web si evolvono. Design per flessibilità e adattabilità. La raccolta e l'analisi dei dati dei test in corso guiderà un miglioramento costante. Ricorda, si tratta di creare un design che soddisfi i tuoi obiettivi.
Misurando attentamente i risultati di una serie di modifiche di progettazione minori alla pagina di destinazione originale (a sinistra) abbiamo creato un nuovo design (a destra) che ha aumentato del 60% la percentuale di registrazioni!
Ricorda
Un'efficace progettazione grafica deve connettere emotivamente l'utente con il marchio e allo stesso tempo indurli a fare ciò che si desidera. Può essere fatto
Sei d'accordo con queste regole per il design? Vuoi aggiungere altro? Fateci sapere le vostre opinioni nei commenti.
Immagine in primo piano / miniatura, immagine emozionale via Shutterstock.