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

Attualmente sto lavorando per mettere insieme alcuni prototipi di base, in parte per raccogliere i requisiti e in parte per progettare l'interfaccia utente finale.

Al momento sto provando a costruire lo schermo usando Post-it notes, con note gialle per informazioni e rosa per azioni (pulsanti o menu). L'idea è che puoi facilmente spostare, rimuovere e aggiungere informazioni. Ma sono sicuro che ci sono metodi più efficienti là fuori.

Qual è il modo consigliato per gli sviluppatori di creare in modo efficiente prototipi di UI non interattivi?

E perché?

Ho provato alcune versioni di penna, carta e Post-it e sono cadute come un palloncino di piombo (probabilmente le mie abilità di disegno). Alla fine ho usato Balsamiq , che finora è piaciuto alla maggior parte degli utenti e lo ottengono è un prototipo. Purtroppo, alcune persone hanno ancora problemi con l'idea che prima si dovrebbe avere un'idea di cosa dovrebbe fare l'applicazione tramite alcuni prototipi lo-fi e vogliono davvero "vedere qualcosa sullo schermo" prima di impegnarsi in qualsiasi cosa.

Preferisco una lavagna.

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

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

Inoltre, se lo desideri, puoi aggiungere un certo grado di interattività, collegando insieme le pagine.

http://balsamiq.com/

The Pencil Project è un componente aggiuntivo di Firefox che fa simpatici e semplici modelli.

Pencil offre varie raccolte di forme integrate per disegnare diversi tipi di interfaccia utente che vanno dalle piattaforme desktop a quelle mobili. A partire dalla 2.0.2, Pencil viene fornito con gli stencil UI per Android e iOS preinstallati. Ciò rende ancora più semplice iniziare a proteggere le app con una semplice installazione.

Le funzioni di disegno più diffuse sono anche implementate in Matita per semplificare le operazioni di disegno ...

Uso una combinazione di MS Paint e Visual Studio. Uso VS per trascinare / rilasciare tutti i controlli che desidero su un modulo, quindi lo acquisisco in MS Paint per riordinarli fino a quando non mi piace l'aspetto.

In questo modo posso usare strumenti semplici, familiari, gratuiti e sempre accessibili (per me) per deridere la mia interfaccia utente e il client può vedere l'interfaccia utente come apparirà probabilmente al termine dell'applicazione. 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 modelli dell'interfaccia utente da presentare ad altre persone.

Talvolta estraggo ancora MSPaint o carta / penna, ma di solito è solo quando sto disegnando il design dell'interfaccia utente di base per mio riferimento, o se voglio presentare al cliente due opzioni per una schermata completa (es. "Do you vuoi i pulsanti qui o qui? " )

Sembra che tu stia usando buoni metodi, ma stai incontrando resistenza perché le persone accettano l'utilità della prototipazione rapida. Tutti adorano programmare, ma se entro mezz'ora, stanno ancora combattendo con JScrollBars e hai generato 12 modelli, potrebbero capire che la forza di questi strumenti è nella rapida iterazione .

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

• La prototipazione della lavagna è utile perché chiunque può partecipare e aiuta a fondare idee, ma è solo uno strumento di discussione. Vuoi qualcosa di un passo in più se hai intenzione di iterare su un disegno, se non altro perché diventa difficile cancellare il vecchio marcatore. ;)

• La prototipazione della carta è utile perché le persone capiscono che è impermanente e aperta al cambiamento, e puoi iterare rapidamente e puoi comunque ottenere ottimi risultati. Fai un test di usabilità con alcuni utenti su un prototipo cartaceo e puoi ottenere un ottimo feedback su un design molto rapidamente, a costi piuttosto bassi. Le persone si impegnano davvero quando possono vedere e sentire l'interfaccia sulla carta.

• Balsamiq è una scorciatoia per realizzare rapidamente prototipi di carta riutilizzabili. Stampo schermate e le utilizzo come prototipi di carta. Lo uso anche durante le riunioni per aiutare a simulare idee come le abbiamo - simile alla prototipazione della lavagna. Per questo ho usato anche Visio e OmniGraffle.

• I prototipi taglia e incolla sono utili per scorrere su un progetto esistente: scatta una schermata, tagliala in un editor di immagini e mescola e abbina i nuovi controlli (da Balsamiq o altrove). Ancora una volta il tuo obiettivo è una rapida iterazione del prototipo, non qualcosa di bello.

Non faccio mai prototipi 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 trattate come designer, vi ritroverete con salsa di pomodoro acquosa, caffè amaro (grazie Malcolm Gladwell) e auto The Homer. Raccogli l'input dell'utente per il tuo design e usalo per perfezionare il design con il team di progettazione.

I miei primi modelli sono sempre carta e matita o lavagna, ma una volta che le basi sono inchiodate di solito passo all'HTML. Ho un sacco di immagini segnaposto che dicono semplicemente "Intestazione", "Banner", "Immagine", "Grafico" e simili. Alcuni semplici CSS per disporre le cose in modo un po 'sano e ho finito. Un po 'di JS attaccato a un controllo può darti una parvenza di funzionalità e le persone sembrano semplicemente "ottenerle" meglio.

L'unico problema è che probabilmente sono il peggior designer dell'interfaccia utente vivente al 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 su rosa o qualcosa del genere, quindi ogni volta che qualcuno chiede "Deve essere rosa?" Posso contrastare con "Questo è solo un modello, la cosa reale avrà un aspetto diverso" (o "Dovrai discuterne con il designer").

Uso prima carta e penna, quindi dopo aver disegnato l'interfaccia utente un paio di volte velocemente, provo a farlo in powerpoint 2 o 3 volte. Avere 5 o 6 iterazioni prima di entrare nell'editor vero e proprio mi aiuta a ridurre le UI non realizzabili (come la generazione di contenuto Y basato sulla casella di testo X quando l'utente non ha ancora visto X). Lo vedo come un'opportunità per uscire subito dagli stupidi.

Penna e carta / lavagna e puoi anche usare Visio o qualcosa di simile (Visio viene fornito con modelli di interfaccia utente per controlli comuni). A volte faccio scatti dell'interfaccia utente (simile) esistente che abbiamo e taglio e incollo la nuova interfaccia utente su di essa usando un programma di disegno come Paint.NET.

Ho fatto diverse volte la prototipazione rapida a Delfi. Semplifica il lancio molto rapido di un layout dello schermo, molto più veloce rispetto a powerpoint o visio. L'ex risultante può essere allegato alle e-mail senza richiedere dipendenze. Da quando lo uso per prototipare le app Web, non c'è pericolo che le persone confondano il prototipo con una versione a metà.

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

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

• Lavagna (per la prototipazione interattiva / discussione. Scatta una foto dopo!)

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

  • Diventa bravo in questo, e può effettivamente diventare uno dei modi più veloci per creare prototipi di un'applicazione "finestre, widget e moduli". Bonus: i prototipi possono sembrare davvero molto professionali, a seconda della velocità con cui li metti insieme. A volte possono anche servire come punto di partenza per la creazione di cose reali, una volta approvato un prototipo.
    
    

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

• File statici HTML / CSS / JS su disco

  • Immagino che un'applicazione di progettazione WYSIWYG non farebbe male qui, ma di solito faccio solo hacking sull'HTML grezzo. Non faccio molti di questi, comunque.
    
    

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

• Strumenti di grafica raster - Photoshop / Gimp

• Arte ASCII ;-)