Come dovrei creare prototipi UI lo-fi (non interattivi)?

Preferisco una lavagna.

Rende facile cambiare quando prendi le decisioni senza ridisegnare il tutto. È facile condividere con altri (vicini) sviluppatori. È facile annotare utilizzando note adesive o altri colori.

I mockup Balsamiq sono di solito il primo punto di riferimento, quasi veloci quanto l'uso di carta e penna e riutilizzabili.

Inoltre puoi aggiungere un po 'di interattività se lo desideri, collegando le pagine, ad esempio.

link

The Pencil Project è un addin di Firefox che crea mockup semplici e semplici.

Pencil provides various built-in shapes collection for drawing different types of user interface ranging from desktop to mobile platforms. Starting from 2.0.2, Pencil is shipped with Android and iOS UI stencils pre-installed. This makes it even easier to start protyping apps with a simple installation.

Popular drawing features are also implemented in Pencil to simplify the drawing operations...

Uso una combinazione di MS Paint e Visual Studio. Uso VS per trascinare / rilasciare tutti i controlli che voglio su un modulo, quindi digitalo su MS paint per riorganizzarli finché non mi piace come appare.

In questo modo posso usare strumenti semplici, familiari, gratuiti e sempre accessibili (per me) per mettere a punto la mia interfaccia utente, e il client può vedere l'interfaccia utente come probabilmente guarderà una volta che l'applicazione è terminata. Inoltre, spesso VS finisce per contenere l'inizio del mio progetto per me.

Modifica: La risposta di Toby mi porta a Balsamiq , e questo è ora il mio principale strumento di scelta per i mockup UI da presentare ad altre persone.

In alcuni casi estraggo ancora MSPaint o penna / carta, ma di solito è solo quando disegno la progettazione dell'interfaccia utente di base per il mio riferimento, o se voglio presentare al client due opzioni per una schermata completata (es. "Vuoi i pulsanti Qui o Qui?" )

Sembra che tu stia usando dei buoni metodi, ma stai incontrando resistenza quando le persone accettano l'utilità della prototipazione rapida. Tutti amano codificare, ma se una mezz'ora, stanno ancora combattendo con JScrollBars e hai generato 12 prototipi, potrebbero capire che la forza di questi strumenti è in iterazione rapida .

Detto questo, i vari approcci low-fi hanno differenti punti di forza:

• La prototipazione della lavagna è utile perché chiunque può partecipare e aiuta a creare idee, ma è solo uno strumento di discussione. Volete qualcosa di un ulteriore passo avanti se state andando a scorrere su un disegno, se non altro perché è difficile cancellare il vecchio pennarello. ;)

• La prototipazione della carta è utile perché la gente capisce che è impermanente e aperta ai cambiamenti, e puoi scorrere rapidamente e puoi ancora ottenere ottimi risultati. Esegui un test di usabilità con alcuni utenti su un prototipo cartaceo e puoi ottenere un ottimo feedback su un progetto molto rapidamente, a costi piuttosto bassi. Le persone si impegnano davvero quando possono vedere e ritenere l'interfaccia su carta.

• Balsamiq è una scorciatoia per creare rapidamente prototipi di carta riutilizzabili. Stampo gli screenshot e li uso come prototipi di carta. Lo uso anche durante le riunioni di per aiutare a prendere in giro le idee come le abbiamo noi - simile alla prototipazione della lavagna. Ho usato Visio e OmniGraffle anche per questo.

• I prototipi di taglia e incolla sono ottimi per iterare su un progetto esistente: scattare una schermata, tagliarla in un editor di immagini e combinare con nuovi controlli (da Balsamiq o altrove). Ancora una volta il tuo obiettivo è una rapida iterazione del prototipo, non qualcosa di bello.

Non faccio mai la prototipazione con gli utenti. Lo faccio con il team di progettazione, in base ai dati dell'utente che abbiamo. Gli utenti non sono designer ; se li tratti come designer, ti ritroverai con salsa di pomodoro acquoso, caffè amaro (grazie a Malcolm Gladwell) e la macchina di Homer. Raccogli l'input dell'utente per il tuo design e usalo per perfezionare il design con il team di progettazione.

I miei primi mock-up sono sempre a matita e amp; carta o lavagna, ma una volta che le basi sono inchiodate, di solito mi muovo in HTML. Ho un sacco di immagini segnaposto che dicono semplicemente "Intestazione", "Banner", "Immagine", "Grafico" e simili. Alcuni semplici CSS per sistemare le cose in modo abbastanza sano e ho finito. Un piccolo JS attaccato a un controllo può darti qualche parvenza di funzionalità e le persone sembrano semplicemente "farlo" meglio.

L'unico problema è che sono probabilmente il peggior designer vivente dell'interfaccia utente del mondo e talvolta devo ricordare alle persone che sto solo raccogliendo i requisiti, non mostrando loro come sarà la cosa completata. Ho spesso impostato lo sfondo per il rosa o qualcosa del genere, quindi ogni volta che qualcuno chiede "Dev'essere rosa?" Posso contrastare con "Questo è solo un mock-up, la cosa reale sarà diversa" (o "Dovrai discuterne con il designer").

Per prima cosa utilizzo carta e penna, quindi dopo aver disegnato l'interfaccia utente alcune volte, provo a farlo in powerpoint 2 o 3 volte. Avere 5 o 6 iterazioni prima di entrare nell'editor attuale mi aiuta a ridurre le UI non lavorabili (come la generazione di contenuti Y sulla base della casella di testo X quando l'utente non ha ancora visto X ancora). Lo vedo come un'opportunità per tirar fuori gli stupidi subito.

Pen & carta / lavagna e puoi anche utilizzare Visio o qualcosa di simile (Visio viene fornito con i modelli dell'interfaccia utente per i controlli comuni). A volte prendo colpi di un'interfaccia utente (simile) esistente che abbiamo e tagliamo e incolliamo la nuova UI su di essa usando un programma di disegno come Paint.NET.

Ho fatto prototipazione rapida a Delphi diverse volte. Semplifica molto rapidamente il layout di una schermata, molto più rapidamente rispetto a PowerPoint o Visio. L'exe risultante può essere allegato alle e-mail senza richiedere alcuna dipendenza. Dal momento che lo uso per prototipare applicazioni web, non c'è pericolo che le persone confondano il prototipo con una versione a metà percorso.

Ho provato a fare lo stesso con Sencha Ext Designer, ma il sistema di layout di Ext JS è più difficile da usare e mi sembrava più un fardello che una comodità per velocizzare le idee.

Non uso sempre lo stesso approccio. Alcune delle tecniche che uso sono (in ordine approssimativo di frequenza):

• Lavagna bianca (per la creazione di prototipi in modo interattivo / discusso. Scatta una foto in seguito!)

• Designer GUI in stile RAD (Visual Studio, NetBeans, Delphi)

  • Sii bravo in questo, e può davvero diventare uno dei modi più veloci per creare prototipi di un'applicazione "windows, widgets and forms". Bonus: i prototipi possono sembrare davvero molto professionali, a seconda della velocità con cui li si riunisce. A volte possono anche servire come punto di partenza per creare la cosa reale, una volta approvato un prototipo.
    
    

• Carta e penna / matita (di solito per il brainstorming a me stesso)

• File HTML / CSS / JS statici sul disco

  • Immagino che un'applicazione di progettazione WYSIWYG non danneggi qui, ma di solito mi sto solo hacppando sull'HTML grezzo. Non ne faccio molti, comunque.
    
    

• Strumenti di disegno vettoriale - Illustrator / Inkscape / Visio / PowerPoint / Impress

• Strumenti grafici raster - Photoshop / Gimp

• arte ASCII; -)