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 gli elementi su cui si basano i siti web. Sono una decisione di progettazione strategica che un web designer prende per garantire una buona esperienza utente. Il compito di un designer è risolvere problemi di usabilità comuni e creare la soluzione più intuitiva per l'utente, mentre i pattern creano un'esperienza utente prevedibile, intuitiva e ottimizzata. Che tu sia un principiante o un professionista esperto, devi essere consapevole dei comuni modelli di progettazione dell'interfaccia utente e tenere il passo con l'evoluzione 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 "modelli di progettazione" sono usati in modo intercambiabile. Ai fini di questo articolo, i componenti sono gli elementi costitutivi di un sito Web e i modelli sono i modi stabiliti in cui gli utenti sono abituati a eseguire le attività.

Come vedrai, un modello è "più grande" di un solo 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 rimanda alla home page nell'intestazione di un sito web
• Navigazione hamburger su siti web mobili
• Moduli di accesso con un collegamento "Reimposta password".
• Breadcrumb che consentono agli utenti di tenere traccia della loro posizione su un sito
• Carrelli con contatori di oggetti su di essi

Perché i designer dovrebbero concentrarsi sui modelli di progettazione?

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

I modelli di progettazione creano fiducia

Gli utenti fanno supposizioni 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.

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 un rapporto di fiducia con i tuoi utenti.

In quella che è diventata la storia del web, alcuni schemi sono diventati all'ordine del giorno. I progettisti 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.

Facciamo un esempio di un modello di progettazione consolidato su un sito di e-commerce. Gli utenti sono abituati a vedere piccole anteprime dei prodotti in una griglia e quindi fare clic per saperne di più sul singolo articolo. Utilizzando modelli consolidati nel tuo design e creando un'esperienza di facile utilizzo, stai costruendo fiducia con i tuoi utenti, inoltre è più probabile che siano un visitatore di ritorno.

I design pattern sono intuitivi

Man mano che gli utenti interagiscono con il tuo sito, il fattore di prevedibilità diventa molto importante. [twitter_link]Gli schemi prevedibili consentono un'esperienza più intuitiva.[/twitter_link] Avere schemi familiari è fondamentale, ma è anche importante assicurarsi che questi 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? Tutti i messaggi sono 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 incontrato questi modelli molte volte prima. 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 un'azione ha avuto luogo.

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 interrompono schemi comuni, il che può causare frustrazione o confusione. Con questo in mente, continua a progettare con utili modelli di interfaccia utente. Più utenti li conoscono, 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

[twitter_link]Le grandi esperienze iniziano con un design efficace.[/twitter_link]

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

Mantenere tutti i modelli in una guida di stile front-end centrale è un ottimo posto per conservare l'inventario. In quanto risorsa globale, è una guida rapida per tutti i membri del team per comprendere il caso d'uso di ogni 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 di pianificazione

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

Usa quello che sai già per iniziare

Se stai progettando una riprogettazione completa o una "espansione" del sito, è utile fare un inventario e guardare ciò che sai già. Ottenere un buon punto di partenza è fondamentale. Se si tratta di un progetto completamente nuovo, è importante pensare a queste cose e aspettarsi che all'inizio alcune domande siano 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 della 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 certa azione su un sito web. Comprendere i problemi e le attività a portata di mano ti assicurerà di progettare la cosa giusta. Per iniziare, pensa a questi elementi:

• Chi sono gli attuali utenti? (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 possono essere apportati?
• Quali nuove funzionalità sono state progettate?
• Tutti 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 convertire. Mantieni il design concentrato sulla creazione di modelli in un modo che sia 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, ma fai più ricerche che puoi. È il tuo momento per scoprire i principali punti deboli dei tuoi utenti e studiare i modelli di progettazione esistenti. Cosa c'è di comune sul web? Quali schemi hai utilizzato con successo in passato? Una volta definiti i problemi da risolvere, esplora i siti con schemi che mirano agli stessi obiettivi degli utenti. Questo servirà come buona ispirazione per il progetto. Non è necessario "copiarli", ma è utile prendere nota di cosa c'è là fuori.

Fino a questo punto, ti ho consigliato 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 Design Patterns

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 modelli esistenti dalla tua ricerca come 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 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à complessiva.

Il motivo per cui il test è così importante nella fase del prototipo è che in alcuni casi i clienti non possono articolare o prevedere completamente i propri pensieri e bisogni. I test degli utenti consentono 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 va ai test, per rimanere concentrati. Dopo aver invitato i partecipanti al test, mostra il progetto a quanti più utenti possibile. Se i limiti di tempo sono stretti, assicurati di eseguire il test con almeno cinque utenti.

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

È probabile che i tuoi modelli di progettazione non saranno perfetti fuori dal cancello. Sarà necessario apportare modifiche e 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 imparato per continuare a iterare e testare fino a quando il progetto non sarà ottimizzato.

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

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