Se hai sentito il termine "wireframe" ma sei un po' confuso su cosa sia realmente, a cosa serva o perché sia utile, questo articolo dovrebbe risolvere i tuoi dubbi.
Cos'è un wireframe?
Un wireframe è qualcosa come il disegno di un architetto. È bozza rappresentazione visiva dell'interfaccia utente Il tuo sito o la tua applicazione. Puoi utilizzare i wireframe per comunicare quattro cose:
- La struttura - navigazione e architettura dell'informazione
- Programma - Per esempio. gerarchia delle pagine e posizionamento degli elementi sullo schermo
- Il contenuto - l'idea di come il contenuto adattarsi al design
- Funzionalità – una descrizione di come funzionerà il prodotto e di come le persone lo utilizzeranno
Questo è uno strumento indispensabile per qualsiasi progettista UX ed è utile in molte situazioni diverse. Puoi creare wireframe a diversi livelli di fedeltà (eng. fedeltà) ed è proprio per questo che sono uno strumento così potente.
Bassa fedeltà (livello di fedeltà inferiore) prevede schizzi disegnati a mano, ottimi per dare corpo alle idee iniziali, sia per te stesso che per presentarle al tuo team. È modo veloce per creare, modificare e perfezionare le tue idee, e non importa quanto sei bravo a disegnare. Chiunque sappia disegnare un semplice cerchio, quadrato e triangolo è perfettamente in grado di realizzare uno schizzo di questo tipo.
Ora passiamo a ciò a cui pensa innanzitutto la maggior parte degli esperti quando diciamo "wireframe". Esistono centinaia di strumenti diversi che puoi utilizzare per crearli. Figma, Balsamic, OmniGraffle, Illustrator e UXPin sono solo alcuni di questi. Wireframe di questo tipo sono la soluzione comunichi la tua idea al tuo team, clienti o clienti. È un ottimo modo per spiegare il tuo prodotto e esattamente ciò che realizzi.
Sul alta fedeltà (alta fedeltà) dello spettro, un prototipo cliccabile consente di progettare le interazioni e il loro flusso. I prototipi cliccabili sono una buona scelta quando testerai l'usabilità. Puoi utilizzare Axure, Keynote o persino creare wireframe direttamente nel tuo browser utilizzando HTML.
A volte è sufficiente un rapido schizzo approssimativo, mentre a volte è più appropriato un wireframe con note dettagliate su cosa dovrebbe essere dove, come dovrebbe essere e a cosa serve. Dipende davvero dal progetto e dalla fase in cui ti trovi.
fotografato da Federica Galli Lui Unsplash
Il tuo wireframe dovrebbe mostrare un livello di dettaglio giusto, non di più. Ecco allora alcuni consigli pratici:
- Mantienilo semplice – velocità e semplicità sono fondamentali per il wireframing. Nella maggior parte dei casi, elimineremo o elimineremo il wireframe alla fine, non appena avrà raggiunto il suo scopo. Ecco perché non deve essere perfettamente allineato, né ogni elemento deve essere posizionato esattamente in un pixel.
- Utilizzare la griglia delle coordinate (eng. griglia) – La griglia ti aiuta a creare struttura e semplicità nel tuo layout. Ogni sito decente oggi è costruito secondo questo principio, quindi consiglio di usarlo anche a te.
- Usa appunti brevi e precisi - I membri del team leggeranno il tuo wireframe, quindi non mancare di lasciare loro appunti adeguati che trasmettano in modo chiaro e preciso il punto di ciò che hai abbozzato. Non esagerare, basta far capire il punto.
- Incoraggiare il feedback – Mostra il wireframe ai tuoi colleghi e chiedi la loro opinione. Questo è un modo infallibile per migliorarlo. Sentiti libero di appenderlo al muro più vicino e incoraggia l'intero team a fornire feedback.
Come puoi vedere, creare wireframe può essere relativamente semplice, anche se ovviamente ci vuole una certa esperienza per capire come sfruttarli al meglio per i propri obiettivi.
Se sei interessato ad un aiuto professionale nel campo della progettazione UX o di altri servizi IT, leggi di più su di noi.
Fonte: youtube.com/uxmastery
