Come progettare per il web utilizzando i modelli di progettazione

I modelli di progettazione sono il fondamento di una buona usabilità del sito Web e sono i pezzi su cui sono costruiti i siti Web. Sono una decisione di progettazione strategica presa da un web designer per garantire una buona esperienza utente. Il lavoro di un designer è risolvere problemi di usabilità comuni e creare la soluzione più intuitiva per l'utente, mentre i modelli creano un'esperienza utente prevedibile, intuitiva e ottimizzata. Che tu sia un principiante del design o un professionista esperto, devi essere consapevole dei comuni modelli di progettazione dell'interfaccia utente e tenere il passo con l'evolversi dei modelli.

Esempi di modelli di progettazione

Probabilmente hai sentito parlare di componenti; cose come pulsanti, campi modulo, barre di ricerca, ecc. ne sono tutti esempi. Per usarli, puoi metterli a frutto creando modelli nel tuo design.

Una cosa da tenere presente: a volte i termini “componenti” e “design patterns” sono usati in modo intercambiabile. Ai fini di questo articolo, i componenti sono gli elementi costitutivi di un sito Web e i modelli sono modalità stabilite in cui gli utenti vengono utilizzati per eseguire attività.

Come vedrai, un pattern è "più grande" di un singolo componente. I modelli sono il modo in cui ottimizzi ciò che viene fatto con i singoli componenti. Esistono molti modelli di design tradizionali, come ad esempio:

• Un logo che si collega alla home page nell'intestazione di un sito Web
• Navigazione hamburger sui siti web mobili
• Moduli di accesso con un collegamento "Reimposta password".
• Breadcrumb che consentono agli utenti di tenere traccia della propria posizione su un sito
• Carrelli con contatori di articoli su di essi

Perché i designer dovrebbero concentrarsi sui modelli di progettazione?

Ci sono molti vantaggi nell'usare i modelli di progettazione. Non solo rendono il tuo lavoro più efficiente come designer, ma soprattutto, i modelli rendono l'esperienza più semplice per i tuoi utenti.

I modelli di progettazione stabiliscono la fiducia

Gli utenti fanno ipotesi rapide nel momento in cui arrivano sul tuo sito. In una frazione di secondo, determinano se vale la pena interagire con il contenuto o se devono trovare un'altra opzione.

Come progettare un sito Web aziendale di una pagina su WordPress

Esistono molti modi per progettare un sito Web per la tua attività, a seconda dei tuoi obiettivi e della quantità di contenuti che devi includere. Anche se a volte può avere senso creare siti intricati con ...

Il tuo sito è facile da navigare? È facile trovare le informazioni che i tuoi utenti stanno cercando? Non avranno la pazienza di fare clic e risolvere i problemi. È assolutamente fondamentale fare una buona prima impressione e stabilire fiducia con i tuoi utenti.

In quella che è diventata la storia del web, alcuni schemi sono diventati un luogo comune. I designer si sono affidati a questi elementi dell'interfaccia utente consolidati per progettare siti Web e gli utenti si sono abituati a vedere questi modelli di progettazione. Riconoscono i punti in comune tra i siti e si fidano di ciò che è familiare.

Prendiamo un esempio di un modello di progettazione consolidato su un sito di eCommerce. Gli utenti sono abituati a vedere piccole anteprime di prodotti in una griglia e quindi a fare clic per saperne di più sul singolo articolo. Utilizzando modelli consolidati nel tuo design e creando un'esperienza facile da usare, crei fiducia con i tuoi utenti, inoltre è più probabile che diventino un visitatore di ritorno.

I modelli di progettazione sono intuitivi

Quando gli utenti interagiscono con il tuo sito, il fattore di prevedibilità diventa molto importante. "I modelli prevedibili consentono l'esperienza più intuitiva. " Avere schemi familiari è fondamentale, ma è altrettanto importante assicurarsi che tali schemi vengano utilizzati in modo coerente.

Un esempio di modello comune e prevedibile si trova sui moduli. In particolare, tutti i moduli forniscono messaggi di convalida e di errore. Tutti i moduli sul tuo sito lo fanno in modo coerente? I messaggi sono tutti nello stesso posto? Che ne dici del pulsante di invio? C'è un messaggio che indica che il modulo è stato inviato?

Dal punto di vista del design, gli utenti hanno già riscontrato questi modelli molte volte. Fornire la convalida del modulo con messaggi utili indica all'utente dove si trovano i problemi e avere un messaggio che indica che il modulo è stato inviato è un indicatore utile che è stata eseguita un'azione.

Può sembrare buon senso quando senti che i modelli e la prevedibilità sono necessari per una buona esperienza utente. Tuttavia, non è troppo difficile imbattersi in siti che rompono gli schemi comuni, il che può causare frustrazione o confusione. Con questo in mente, continua a progettare con modelli di interfaccia utente utili. Più gli utenti hanno familiarità con loro, più sanno quale comportamento aspettarsi. I modelli e le convenzioni impediscono agli utenti di confondersi e il rispetto dei modelli crea un'esperienza prevedibile.

I modelli di progettazione forniscono un linguaggio comune tra i designer

“Le grandi esperienze iniziano con un design efficace. "

In molti casi, i designer lavorano in team. Aiuta il team a lavorare in modo più efficiente quando sono presenti modelli di progettazione stabiliti. Non c'è bisogno di reinventare la ruota se il problema è già stato risolto.

Tenere tutti i modelli in una guida di stile front-end centrale è un ottimo posto per tenere l'inventario. In quanto risorsa globale, è una guida rapida per tutti i membri del team per comprendere il caso d'uso per ciascun modello. Anche se lavori da solo, tenere traccia dei modelli di progettazione che stai utilizzando ti consentirà di lavorare in modo più efficiente e di guardarli indietro in futuro.

La fase progettuale

È abbastanza chiaro perché i modelli di progettazione dovrebbero essere utilizzati, ma in che modo i web designer li mettono effettivamente in atto durante la progettazione per il web? Ecco alcuni suggerimenti che aiutano a semplificare il processo di progettazione.

Usa ciò che già conosci per iniziare

Se stai progettando una riprogettazione completa o una "espansione" del sito, è utile fare un inventario e guardare ciò che già sai. Ottenere un buon punto di partenza è fondamentale. Se si tratta di un progetto completamente nuovo, è importante pensare a queste cose e aspettarsi che alcune domande all'inizio saranno sconosciute. Per questa situazione, utilizzare l'esperienza di progettazione passata per iniziare è un buon primo passo. Questo informa le decisioni iniziali perché hanno lavorato su altri progetti.

Inizio ricerca

La ricerca è la chiave per una solida base di progetto. Come ben sai, gli utenti cercheranno sempre il modo più semplice per compiere una determinata azione su un sito web. Comprendere i problemi e le attività da svolgere ti assicurerà di progettare la cosa giusta. Per iniziare, pensa a questi elementi:

• Chi sono gli utenti attuali? (I loro obiettivi, dati demografici, ecc.)
• Cos'altro vuoi sapere su questi utenti?
• Con quali modelli interagiscono di più?
• Ci sono modelli con cui questi utenti hanno problemi?
• Quali miglioramenti si possono apportare?
• Quali nuove funzionalità sono state progettate?
• I modelli attualmente stabiliti possono funzionare?

La fase di ricerca è il momento per identificare ciò che i tuoi utenti devono realizzare quando interagiscono con il tuo sito web. Esempi potrebbero essere cose come cercare contenuti, iscriversi a una newsletter, effettuare un acquisto, ecc. Di fronte a elementi familiari, gli utenti avranno bisogno di meno tempo per pensare e avranno più motivi per convertirsi. Mantieni il design concentrato sulla creazione di modelli in un modo che sembri familiare ai tuoi utenti in base alle loro conoscenze esistenti da ciò che sperimentano sul Web.

Quando si risolvono problemi di progettazione, il tempo e il budget sono sempre un fattore importante, ma fai più ricerche che puoi. È il tuo momento di scoprire i principali punti deboli dei tuoi utenti e di studiare i modelli di progettazione esistenti. Cosa c'è di comune sul web? Quali modelli hai utilizzato con successo in passato? Una volta definiti i problemi che devi risolvere, esplora i siti con schemi che mirano agli stessi obiettivi dell'utente. Ciò servirà da buona ispirazione per il progetto. Non è necessario "copiarli", ma è utile prendere nota di ciò che è là fuori.

Fino a questo punto, ti ho raccomandato di rimanere coerente e prevedibile. Vale la pena ricordare che i modelli esistenti possono essere modificati e potrebbero esserci casi per fare qualcosa di nuovo. Assicurati solo che se stai introducendo un nuovo modello, sia giustificato dai dati dell'utente e sia ben testato.

Progettare per il web con modelli di design

Prototipo e collaudo

Dopo la fase di ricerca, è il momento di iniziare a mettere a frutto ciò che hai imparato. È qui che il design prende vita con la prototipazione. A seconda del processo, i prototipi possono essere semplici wireframe a bassa fedeltà o progetti più complessi ad alta fedeltà.

Inizia con i modelli esistenti della tua ricerca come linea di base. Durante il processo, assicurati che il prototipo copra tutte le funzionalità di cui hai bisogno e che tenga conto di tutti gli obiettivi dell'utente. Può essere necessario un po' di revisione e messa a punto per arrivare a un buon punto di partenza.

Una guida all'uso efficace dello spazio bianco nel web design

I designer lo adorano, ma i proprietari di siti web vogliono riempirlo. Lo spazio bianco è spesso considerato uno spreco di prezioso spazio sullo schermo. Eppure non è uno spreco di spazio! È un elemento di design essenziale e un po...

Una volta che sei sicuro che tutti i requisiti siano inclusi nel prototipo, è il momento di eseguire alcuni test per ottenere informazioni sull'usabilità del progetto. Qui è dove convaliderai l'efficacia dei modelli di progettazione insieme alla funzionalità generale.

Il motivo per cui i test sono così importanti nella fase del prototipo è che in alcuni casi i clienti non possono articolare o prevedere completamente i propri pensieri e bisogni. Il test degli utenti consente loro di mostrare invece di raccontare. I partecipanti dimostrano come userebbero effettivamente il sito, mentre tu osservi e impari dalle loro azioni. Questo è utile sia per i partecipanti che per te come designer.

È importante prendere appunti sugli obiettivi principali dell'utente quando si avviano i test, per rimanere concentrati. Dopo aver invitato i partecipanti al test, metti il ​​progetto di fronte a quanti più utenti possibile. Se i limiti di tempo sono stretti, assicurati di eseguire il test con almeno cinque utenti.

L'argomento del test degli utenti è un argomento intero in sé. Scegli il metodo più sensato in base al tuo tempo e al tuo budget. Sarebbe bello avere sempre tempo a sufficienza, ma questo potrebbe non essere sempre possibile. In un pizzico, possono essere utili test di usabilità "corridoio" o "stile caffetteria" (un test di usabilità impostato in un'area ad alto traffico pedonale, utilizzando persone che passano per testare il tuo prodotto). Anche coinvolgere un paio di colleghi è sempre meglio che nessun test.

È probabile che i tuoi modelli di progettazione non saranno perfetti fin dall'inizio. Sarà necessario apportare modifiche e saranno necessari ulteriori test per convalidare il design aggiornato. Tuttavia, otterrai maggiori informazioni da ogni fase di test e sarai in grado di incorporare ciò che hai appreso per continuare l'iterazione e il test fino a quando il design non sarà ottimizzato.

I modelli di progettazione Web garantiscono un'esperienza utente coerente. Di seguito sono riportati collegamenti utili che forniscono ulteriori informazioni per iniziare:

• Guida completa ai test degli utenti
• La chirurgia missilistica di Steve Krug resa facile
• Esempi di guide di stile

Pronto per imparare qualcosa di nuovo? Prova uno di questi tutorial:

• Come creare un effetto bagliore al neon in Photoshop
• Come progettare un sito Web aziendale di una pagina su WordPress
• Come rendere il tuo sito WordPress mobile friendly
• Come aggiungere variabili CSS per personalizzare i temi figlio di WordPress