Guida completa al web design

Leave a comment

l web design è complicato. Si deve prendere in considerazione un sacco di cose quando si progetta un sito Web, dall’aspetto visivo (come appare il sito Web) al design funzionale (come funziona il sito Web). Per semplificare il compito, abbiamo preparato questa guida.

In questo articolo, ci concentreremo sui principi principali, l’euristica e gli approcci che ti aiuteranno a creare un’esperienza utente ottimale per il tuo sito web. Inizieremo con le cose globali, come il viaggio dell’utente (come definire lo “scheletro” del sito web) e poi lavoreremo alla pagina individuale (cosa dovrebbe essere considerato durante la progettazione della pagina web). Tratteremo anche altri aspetti essenziali del design, come considerazioni e test sui dispositivi mobili.

Progettare il percorso dell’utente (Ux)

Informazione architettura

Le persone usano spesso il termine “architettura dell’informazione” (IA) per indicare i menu su un sito web. Ma non è corretto. Mentre i menu fanno parte dell’IA, sono solo un aspetto di esso.

L’IA riguarda l’organizzazione delle informazioni in modo chiaro e logico. Tale organizzazione segue uno scopo chiaro: aiutare gli utenti a navigare in un complesso insieme di informazioni. Una buona IA crea una gerarchia allineata alle aspettative dell’utente. Ma una buona gerarchia e una navigazione intuitiva non avvengono per caso. Sono il risultato di una corretta ricerca e test da parte dell’utente.

Esistono diversi modi per ricercare le esigenze degli utenti. Spesso, un architetto dell’informazione partecipa attivamente alle interviste agli utenti o allo smistamento delle carte, in cui l’architetto può sentire direttamente le aspettative degli utenti o vedere in che modo gli utenti potenziali classificano una varietà di gruppi di informazioni. Gli architetti dell’informazione hanno anche bisogno di accedere ai risultati dei test di usabilità per vedere se gli utenti sono in grado di navigare in modo efficiente.

Una struttura del menu verrebbe creata sulla base dei risultati delle interviste agli utenti e l’ordinamento delle carte verrebbe testato per verificare se soddisfa il modello mentale dell’utente. I ricercatori dell’UX usano una tecnica chiamata “test dell’albero” per dimostrare che funzionerà. Questo accade prima di progettare l’interfaccia reale.

Navigazione globale

La navigazione è una pietra miliare dell’usabilità. Non importa quanto sia buono il tuo sito Web se gli utenti non riescono a trovarlo. Ecco perché la navigazione sul tuo sito web deve rispettare alcuni principi:

  • Semplicità. La navigazione dovrebbe essere progettata in modo tale da attrarre i visitatori dove vogliono andare con il minor numero possibile di clic.
  • Chiarezza. Non dovrebbe esserci alcun dubbio su cosa significhi ciascuna opzione di navigazione. Ogni opzione di navigazione dovrebbe essere evidente ai visitatori.
  • Consistenza. Il sistema di navigazione dovrebbe essere lo stesso per tutte le pagine del sito web.

Considerare alcune cose durante la progettazione della navigazione:

  • Seleziona un modello di navigazione in base alle esigenze dell’utente. La navigazione dovrebbe soddisfare le esigenze della maggior parte degli utenti del tuo sito web. Un determinato gruppo target si aspetta un particolare tipo di interazione con il tuo sito Web, quindi fai in modo che queste aspettative funzionino a tuo favore. Ad esempio, evita la navigazione con menu di hamburger se la maggior parte degli utenti non ha familiarità con il significato dell’icona stessa.
  • Dare priorità alle opzioni di navigazione. Un modo semplice per dare la priorità alle opzioni di navigazione è assegnare diversi livelli di priorità (alta, media, bassa) alle attività utente comuni e quindi dare risalto al layout a percorsi e destinazioni con livelli di priorità elevati e uso frequente.
  • Rendilo visibile. Come dice Jakob Nielsen , riconoscere qualcosa è più facile che ricordarlo. Riduci al minimo il carico di memoria dell’utente rendendo permanentemente visibili tutte le importanti opzioni di navigazione. Le opzioni di navigazione più importanti dovrebbero essere disponibili in ogni momento, non solo quando prevediamo che l’utente ne avrà bisogno.
  • Comunicare la posizione corrente. “Dove sono?” È una domanda fondamentale a cui gli utenti hanno bisogno di una risposta per navigare in modo efficace. La mancata indicazione della posizione corrente è un problema comune su molti siti Web. Pensa agli indicatori di posizione.

Collegamenti e opzioni di navigazione

I collegamenti e le opzioni di navigazione sono fattori chiave nel processo di navigazione e hanno un effetto diretto sul viaggio dell’utente. Segui alcune regole con questi elementi interattivi:

  • Riconoscere la differenza tra i collegamenti interni ed esterni. Gli utenti si aspettano un comportamento diverso per i collegamenti interni ed esterni. Tutti i collegamenti interni dovrebbero essere aperti nella stessa scheda (in questo modo, consentirai agli utenti di utilizzare il pulsante “Indietro”). Se si decide di aprire collegamenti esterni in una nuova finestra, è necessario fornire un avviso prima di aprire automaticamente una nuova finestra o scheda. Questo potrebbe assumere la forma di testo aggiunto al testo del link, ad esempio “(si apre in una nuova finestra).”
  • Cambia il colore dei link visitati. Quando i link visitati non cambiano colore, gli utenti potrebbero rivedere involontariamente le stesse pagine.

Progettare singole pagine

Strategia dei contenuti

Forse la cosa più importante della strategia dei contenuti è focalizzare il design sugli obiettivi della pagina. Comprendere l’obiettivo della pagina e scrivere contenuti in base all’obiettivo.

Ecco alcuni consigli pratici per migliorare la comprensione dei contenuti:

  • Prevenire il sovraccarico di informazioni. L’overload di informazioni è un problema serio. Impedisce agli utenti di prendere decisioni o agire perché sentono di avere troppe informazioni da consumare. Esistono alcuni modi semplici per ridurre al minimo il sovraccarico di informazioni. Una tecnica comune è il chunking : suddividere il contenuto in blocchi più piccoli per aiutare gli utenti a capirlo e elaborarlo meglio. Un modulo di pagamento è un esempio perfetto. Mostra, al massimo, da cinque a sette campi di input alla volta e suddivide il checkout in pagine – progressivamente rivelando i campi se necessario.
  • Evita il gergo e termini specifici del settore. Ogni termine sconosciuto o frase che appare sulla pagina aumenterà il carico cognitivo sugli utenti. Una scommessa sicura è scrivere per tutti i livelli di lettori e scegliere parole che siano chiaramente e facilmente comprensibili a tutti i gruppi di utenti.
  • Riduci a icona le lunghe sezioni di contenuti con molti dettagli. In linea con il punto sul sovraccarico di informazioni, cerca di evitare lunghi blocchi di testo se il sito web non è orientato al consumo di informazioni importanti. Ad esempio, se è necessario fornire dettagli su un servizio o un prodotto, provare a visualizzare i dettagli passo dopo passo. Scrivi in ​​segmenti piccoli e scansionabili per facilitare la scoperta. Secondo il libro di Robert Gunning “Come togliere la nebbia dalla scrittura aziendale”, per una lettura comoda, la maggior parte delle frasi dovrebbe essere di 20 parole o meno.
  • Evitare di capitalizzare tutte le lettere. Il testo tutto maiuscolo, ovvero il testo con tutte le lettere maiuscole, va bene con piccole dosi, come per gli acronimi e i loghi. Tuttavia, evita le maiuscole per qualcosa di più lungo (ad esempio paragrafi, etichette del modulo, errori e notifiche). Come menzionato da Miles Tinker nel suo libro Legibility of Print, tutte le protezioni riducono drasticamente la velocità di lettura. Inoltre, la maggior parte dei lettori trova che tutte le capitali siano meno leggibili.

Struttura della pagina

Una pagina correttamente strutturata rende chiaro dove ogni elemento dell’interfaccia utente si trova nel layout. Sebbene non esistano regole valide per tutti, ci sono alcune linee guida che ti aiuteranno a creare una struttura solida:

  • Rendere la struttura prevedibile. Allinea il tuo design alle aspettative degli utenti. Considera siti web di una categoria simile per scoprire quali elementi utilizzare nella pagina e dove. Utilizza i modelli con cui il tuo pubblico di destinazione è familiare.
  • Usa una griglia di layout. Una griglia di layout divide una pagina in regioni principali e definisce le relazioni tra gli elementi in termini di dimensioni e posizione. Con l’aiuto di una griglia, la combinazione di diverse parti di una pagina in un layout coerente diventa molto più semplice.

Utilizzare un wireframe a bassa fedeltà per eliminare l’ingombro. Clutter sovraccarica un’interfaccia e riduce la comprensione. Ogni pulsante, immagine e riga di testo aggiunti rende lo schermo più complicato. Prima di costruire la pagina con elementi reali, crea un wireframe, analizzalo e sbarazzati di tutto ciò che non è assolutamente necessario.

to be continued…

Lascia un commento