Come utilizzare i modelli di progettazione dell'interfaccia utente
I modelli di progettazione sono soluzioni ottimali ai problemi di progettazione comuni. Mentre i problemi comuni vengono sballottati attorno a una comunità e risolti, spesso emergono soluzioni comuni. Alla fine, i migliori di questi salgono al di sopra del frastuono, si autoidentificano e diventano raffinati fino a raggiungere lo stato di un modello di progettazione.
Non definirei un design patern un trend nel web design, i pattern di design sembrano essere più incentrati sul modo in cui i design comuni sono classificati in retrospettiva, piuttosto che forgiare un nuovo territorio o guardare dove vanno le cose.
Come dovresti affrontare i modelli di progettazione dell'interfaccia utente?
Usiamo sempre modelli di design, se non li conosci, probabilmente non ti sei reso conto che sono tutti intorno a te.
Che dire del classico esempio di avere troppi contenuti da visualizzare su una pagina? Rivolgiamo la nostra attenzione a "Tabs", un modello di progettazione che ci consente di servire tutti i contenuti che vogliamo, senza che l'utente scompaia in un mare di link.
I vantaggi tipici dell'utilizzo di un modello di progettazione includono:
- mostrare ai principianti come utilizzare le migliori pratiche nel web design;
- imparare ad adattarsi alla comprensione collettiva dei designer;
- consentendo una migliore comunicazione, riducendo il rischio associato a scelte non familiari;
- ridurre il tempo e i costi necessari del flusso di lavoro per svolgere compiti specifici;
- evitare di perdere tempo a costruire qualcosa che è stato costruito prima;
- dando all'utente un'esperienza che gli è familiare e sperimentata (la natura degli schemi di progettazione).
Nell'esempio sopra vediamo Clicky Media utilizzando due modelli di design molto popolari oggi:
- Navicon - un simbolo universale per il menu, altrimenti noto come navigazione del sito, sta diventando sempre più popolare nel moderno web design, ma è già stato completamente adattato ai dispositivi mobili.
- Parallax Scrolling: uno schema di progettazione unico che consente di creare un sito Web a pagina singola, con un meccanismo di scorrimento facile da usare, ma include anche un elenco di sprite di sfondo che danno alla pagina un aspetto vivace.
Anche se sia il menu Navicon che il menu generale in cima alla pagina condividono scelte simili, sarebbe molto allettante includere tutti i link sulla stessa barra di intestazione: diventa chiaro che piccole scelte possono fare una grande differenza.
Ecco a cosa devi pensare quando valuti un modello di design e lo adatti alle tue esigenze:
- Riepilogo del problema: quale problema utente stai risolvendo? Rimani concentrato e commentalo come una storia utente - solo in una frase.
- Soluzione: come hanno risolto gli altri questo problema? Alcuni dettagli includono la navigazione dell'utente (compresi i collegamenti), l'input dell'utente, la gestione dei dati e l'integrazione con altri servizi o applicazioni e la visualizzazione di informazioni e contenuti (compresi i valori predefiniti).
- Esempio: fantastico, puoi mostrarmi? A volte è sufficiente uno screenshot o un mockup; altre volte sono necessari flussi utente e / o note aggiuntive per comunicare chiaramente il modello.
- Uso: quando dovrebbe essere usato questo modello (non)? Alcuni dettagli includono architettura del prodotto, layout dell'interfaccia, dispositivi, linguaggio di programmazione, assenza o esistenza di altri schemi di progettazione, tipo di utente e casi d'uso primari.
Ci vuole pratica e disciplina per pensare ai modelli in questo modo, se non l'hai ancora fatto. Prenditi il tempo necessario per rispondere a queste domande durante la progettazione del tuo prodotto, perché potrebbe aiutarti a risparmiare molto tempo per il refactoring lungo la strada quando gli utenti e il team chiedono dettagli simili.
L'aumento dei toolkit dell'interfaccia utente
Gli schemi di progettazione dell'interfaccia utente hanno sempre avuto lo scopo di semplificare all'utente la navigazione nel sito Web, nell'applicazione o nel sistema. Se l'utente impara come inviare un commento per la prima volta, è probabile che saprà immediatamente come inviarti una email utilizzando il modulo di contatto, è lo stesso concetto ripetitivo di input di informazioni.
Negli ultimi anni, abbiamo assistito a un'enorme crescita nel mercato degli strumenti di interfaccia utente. Un toolkit dell'interfaccia utente può essere semplicemente inteso come un insieme di widget che consente di creare un'applicazione grafica completamente nuova. Twitter Bootstrap è un perfetto esempio di un kit di strumenti dell'interfaccia utente di successo. Oggigiorno, una grande percentuale di web designer si affiderà alle funzionalità Bootstrap per facilitare il proprio flusso di lavoro. In un certo senso, non c'è bisogno di reinventare la ruota!
3 modelli di progettazione dell'interfaccia utente da ricordare
In breve, i modelli di progettazione sono soluzioni a problemi ricorrenti. Utilizzando i modelli possiamo superare semplici problemi di interfaccia utente. Se prestiamo molta attenzione, notiamo che i modelli ci circondano. Non c'è niente di speciale in questo specifico design, è il modo in cui è stato applicato che ti entusiasma!
Inviti all'azione cristallini
Il più semplice dei moduli web (e anche i più comuni) di solito ha un solo pulsante azionabile: in questo caso 'Crea sito web'. È piuttosto auto-esplicativo, che è il punto.
Quanto più facile potrebbe ottenere, giusto? Scegli sempre l'opzione facile, non reinventare la ruota solo per distinguersi dalla massa.
Pangrattato al salvataggio
I breadcrumb mostrano il percorso dalla prima pagina del sito alla posizione corrente dell'utente nella gerarchia di pagine del sito Web. Sono una forma di navigazione secondaria che aiuta gli utenti a comprendere la gerarchia e la struttura del sito web. I breadcrumb iniziano con la home page e terminano con la pagina attualmente visualizzata.
In questo esempio di Fares Farhan, vediamo come utilizza contemporaneamente due pattern di progettazione dell'interfaccia utente. In primo luogo, ha il modello di schede in cima, e in secondo luogo il modello di navigazione breadcrumb sul fondo. Abbinandoli insieme, offre un'esperienza di navigazione davvero piacevole.
La registrazione dovrebbe essere facile
A meno che tu non abbia vissuto sotto una roccia, sarai a conoscenza della registrazione sociale. La registrazione a un sito Web è una cosa comune da fare, e quindi dovrebbe essere reso il più semplice e piacevole possibile.
Questa è una delle mie pagine di registrazione preferite al momento. È il GitHub homepage e, come puoi vedere nello screenshot, tutto ciò che rappresenta l'azienda è presentato in meno di cento parole. Hai anche la possibilità di registrarti mentre sei in viaggio e il processo richiede meno di un minuto. Riceverai un'email per verificare il tuo account, ma è qualcosa a cui siamo abituati in ogni caso!
Parole finali
Ho costruito siti web per oltre otto anni e durante questi otto anni mi sono reso conto che la semplicità è la chiave per molti problemi di progettazione.
Sono giunto alla conclusione che l'ingombro nel design, gonfiato di elementi e forme inutili è l'esperienza più frustrante che si possa trovare sul web. Sì, il design è esattamente come funziona qualcosa, quindi perché non farlo funzionare correttamente? L'interfaccia utente (UI) è incredibilmente importante per il successo della tua azienda o della tua avventura.
Il modo migliore per assicurarti di progettare siti di successo è imparare e utilizzare schemi di progettazione esistenti.