Questo è un dibattito sorprendentemente controverso e importante che determina dove viene speso il budget per lo sviluppo. Tuttavia, prendiamoci qualche momento per assicurarci di essere tutti sulla stessa pagina prima di entrare nella "carne" di esso.

Cos'è il wireframe?

Un wireframe è uno schizzo o una rappresentazione visiva dell'aspetto di una pagina Web o di un'app mobile. A volte vengono chiamati anche "progetti dello schermo" o "schemi di pagina". Sono utilizzati per stabilire gli elementi fondamentali del design visivo e della funzionalità di una pagina Web, per definire come apparirà e cosa farà. Può quindi essere passato a designer, sviluppatori, copy writer, clienti e chiunque altro sia coinvolto nel progetto.

Il wireframing, quindi, è il processo di costruzione del wireframe. Significa stabilire le funzioni principali del tuo sito Web, il modo in cui queste funzioni verranno visualizzate e le basi di come l'utente interagirà con il sito in generale. È (o meglio può essere) il primo passo in quasi tutti i processi fondamentali della progettazione di siti Web: design visivo, UE, SEO e persino l'organizzazione del testo vero e proprio.

Cosa ottiene il wireframe?

Al centro, il processo di wireframing riguarda il risparmio di tempo, fatica e spese.

Come si suol dire, un'immagine vale 1000 parole. Ciò che i wireframe ottengono davvero è portare tutti i tuoi stakeholder creativi e aziendali "sulla stessa pagina" all'inizio di un progetto.

Sia che ciò avvenga mettendoli tutti insieme per produrre il wireframe iniziale (preferibile) o semplicemente tenendo un incontro in cui viene loro presentato un wireframe completo prima che inizino a pensare al progetto in dettaglio (ancora abbastanza utile), il processo può virtualmente eliminare lo sforzo sprecato che risulta quando il tuo "ragazzo UE" inizia a lavorare su qualcosa di intrinsecamente incompatibile con il modello che il tuo web designer sta producendo e nessuno dei loro concetti supporta il testo scritto dal tuo team di marketing.

Vale sempre la pena investire un po' di tempo e fatica per riunire tutti nella stessa stanza e fare brainstorming, anche se puoi risparmiare solo poche ore. Quindi stanno tutti effettivamente lavorando sul stesso progetto, piuttosto che 4 visioni diverse e incompatibili.

Quando è il momento giusto per wireframe?

In poche parole, prima è, meglio è. Ogni progetto dovrebbe iniziare con un wireframe a bassa risoluzione, anche se è disegnato sul proverbiale "retro di un tovagliolo". Non appena ti viene l'idea di un'app, di una pagina web o di qualsiasi altra cosa sia visiva che interattiva, devi iniziare il wireframing. Non solo aiuterà a "fondare" le tue idee in termini pratici e visivi, ma stabilirà un'idea centrale con cui tutti gli altri lavori possono essere realizzati in conformità o che può essere modificata per adattarsi alle necessità in modo tale che tutte le altre parti interessate può essere rapidamente informato.

Quando è il momento giusto per interrompere il wireframe?

Qui ci sono 2 scuole di pensiero. Alcuni processi interrompono il wireframing non appena i programmatori o gli specialisti UE iniziano a produrre prototipi e modelli. Altri continuano a creare wireframe aggiornati da distribuire al resto del team fino a quando il sito o l'app non vengono codificati e messi a letto. In entrambi i casi, continua a utilizzare i wireframe fino a quando i problemi che rappresentano non saranno decisi e definitivi.

Chi deve avere accesso (e input su) questi wireframe?

Quasi tutti sul tuo progetto!

L'accesso al wireframe più recente è fondamentale per chiunque lavori al progetto, in modo che possano evitare di perdere tempo con funzionalità che non funzioneranno o non funzioneranno nel modo previsto.

Per quanto riguarda la possibilità di modificare i wireframe, se hai team molto grandi, potresti fare meglio a dare solo a leader di team specifici la possibilità di alterare i wireframe o generare nuove versioni. Anche in questo caso, considera la possibilità di apportare tutte le modifiche in un incontro con tutte le parti interessate disponibili, in modo da non rovinare il lavoro di un intero team apportando modifiche di cui non erano a conoscenza.

Più le persone o i team coinvolti in diversi aspetti del tuo progetto collaborano attivamente, più efficiente diventerà il tuo progetto. Più testate, esaminate feedback e fate iterazioni in gruppo, migliore sarà il prodotto finale.

In che modo i wireframe influiscono sul tuo processo?

I wireframe servono a concentrare tutti i tuoi sforzi sugli stessi risultati. Consentono di testare rapidamente diversi approcci e di generare un feedback quasi immediato. Alla fine, il tempo e lo sforzo che investi nel wireframing verranno ripagati più volte, soprattutto su progetti più grandi o più coinvolti.

Cosa potrebbe costarti del tutto saltare i wireframe?

La risposta breve è, come sempre, "dipende da cosa stai lavorando". Realisticamente, tuttavia, siamo nel settore da abbastanza tempo per darti una risposta reale, basata sulla media dei vari progetti in cui siamo stati coinvolti nel corso degli anni.

Il wireframing è in genere il 5-6% del budget di sviluppo totale. Tuttavia, migliora l'efficacia di quasi ogni altro aspetto del tuo lavoro. Ad esempio: in media i costi finali per la codifica sono inferiori del 60% per progetti ben strutturati. I costi RFC (Richiesta di modifica) in genere diminuiscono dell'80%.

Ciò che significa per te è che anche se costasse 3-4 VOLTE di quello che fa realmente per wireframe, risparmieresti tempo e denaro facendolo.

Sfruttare al meglio un budget wireframe limitato

Ci sono alcuni suggerimenti e trucchi che possiamo presentare per fare un buon wireframing, anche se i contafagioli non ne apprezzano la reale importanza:

• Scegli uno strumento wireframe facile da usare o uno che sai già come usare bene. Questo ti farà risparmiare tempo per prendere velocità.
• Crea più varianti, soprattutto all'inizio. Ciò ti consentirà di eliminare rapidamente gli accordi impraticabili.
• Coinvolgi presto le parti interessate chiave e incorpora il loro feedback nelle nuove versioni.
• Conduci test utente per determinare se il tuo wireframe sarà utilizzabile dal pubblico o dal mercato previsto.
• Genera nuove iterazioni per il wireframe fino a quando tutte le parti interessate chiave non sono soddisfatte (o si sono rassegnate al compromesso).
• Assicurati di non dover "tornare al tavolo da disegno" dopo che la progettazione o la codifica sono iniziate.