Come iniziare con la prototipazione di siti Web di prossima generazione
Recentemente sono diventato sempre più frustrato dall'attuale set di strumenti e dalle pratiche accettate per la creazione di 'deliverable' UI e UX.
Nella mia esperienza, la costruzione di modelli statici in Photoshop e Illustrator non cattura più l'essenza dell'attuale progettazione dell'interfaccia utente. Allo stesso modo, la creazione di wireframe e la documentazione UX in strumenti come Axure sembrano comunicare molto poco di come un sito o un'applicazione effettivamente si senta di usare.
Questi strumenti sono riduttivi, limitando il design a una serie di "stati" statici, piuttosto che comunicare l'esperienza ricca, dinamica e immersiva che speriamo di costruire.
Ad esempio, considera di fare clic su un elemento in una visualizzazione elenco per visualizzare una schermata di informazioni. Come viene smaltito l'elemento della lista? Come si costruisce il nuovo schermo? Cosa succede quando faccio clic per tornare alla visualizzazione elenco? Come vengono aggiunti nuovi elementi alla vista elenco?
Indipendentemente dal numero di "istantanee" sullo stato dello schermo che crei, il carattere essenziale del design moderno dello schermo è il modo in cui gli elementi dell'interfaccia utente passano da uno stato all'altro e il modo in cui nuovi elementi dello schermo vengono portati sullo schermo.
Mi sembra che le animazioni e le transizioni siano dove si trova l'essenza del design dell'interfaccia utente, mentre ci spostiamo verso schemi di progettazione più spaziali.
È uno spazio, non una pagina
In parte perché i media interattivi stanno diventando onnipresenti, non è più necessario fare riferimento alle metafore visive su carta, come "la pagina" per rendere le nostre interfacce facili da usare. Ora, metafore spaziali per la navigazione dei contenuti sullo schermo sono più utili e le transizioni descritte nella lingua dell'animazione.
Pasquale d'Silva chiama questa area di progettazione dell'interfaccia utente Interfacce transitorie, e penso che abbia identificato un'area chiave di indagine per il web design moderno e per le app.
Ma la maggior parte dell'attuale set di strumenti dei designer interattivi è inadeguata per esplorare, progettare e costruire queste interfacce.
Il software di animazione può essere utilizzato per creare prototipi e prototipi di interazione. After Effects, Adobe Edge Animate, anche Flash, può essere utilizzato per dimostrare effetti di transizione, che possono essere emessi come gif animate, video o file Flash. Tuttavia, questi possono richiedere molto tempo per essere costruiti e, mentre potrebbero essere utili a mostrare un particolare effetto di transizione dell'interfaccia utente, modificare i parametri può anche essere un esercizio ad alta intensità di lavoro. E ovviamente, una volta creata una ricca demo dell'interfaccia utente interattiva, dovrai tradurre tutte le transizioni e le interfacce in codice funzionante per la tua app o il tuo sito web.
Strumenti di composizione visiva
Non sorprende che molti degli strumenti a cui si rivolgono i designer interattivi siano strumenti di compositing multimediali visivi, utilizzati da VJ e programmatori di effetti video.
Il più noto di questi è lo strumento di programmazione visiva di Apple Quartz Composer che, se si dispone di un Mac, potrebbe già avere sul computer, supponendo che Xcode sia installato. (Lo troverai nella cartella Sviluppatore> Applicazioni, oppure può essere scaricato come parte di Xcode).
Quartz Composer è stato messo sotto i riflettori come strumento di prototipazione interattivo a causa di un articolo Vai alla grande andando a casa, dove Julie Zhuo, designer di Facebook, ha rivelato che il team di progettazione della nuova Home di Facebook ha utilizzato ampiamente il QC per testare e demo l'interfaccia utente di Home:
"Qualcosa come Facebook Home è completamente al di là delle capacità di Photoshop come strumento di progettazione. Come possiamo parlare di interfacce, pannelli e bolle basati sulla fisica che possono essere gettati attraverso lo schermo se siamo seduti a guardare i mock statici?
"Quando vedi una dimostrazione live, lucidata e interattabile, puoi immediatamente capire come qualcosa deve funzionare e sentire, in un modo che parole o descrizioni lunghe o wireframe non saranno mai in grado di raggiungere. Ciò porta a un feedback migliore e a migliori iterazioni e, in definitiva, a un prodotto finale migliore. "
Oltre al QC forum at Branch, i designer hanno iniziato a riprodurre il lavoro del team di Facebook.
Facebook seguito dal rilascio Facebook Origami, un kit di strumenti per Quartz Composer specificamente rivolto ai designer interattivi.
L'apprendimento di Quartz Composer può richiedere un po 'di tempo, ma il suo approccio basato sui nodi (dove i lead connettono gli input ai nodi di elaborazione (patch) e quindi a un output) è logico. La sua rappresentazione visiva di un processo computazionale può renderlo più comprensibile per i progettisti, ed è facile armeggiare con i parametri e modificare il cablaggio di una composizione.
Con Origami, la creazione di prototipi interattivi per cellulari e browser è abbastanza semplice. Offre elementi di interfaccia pronti all'uso per creare funzionalità e interattività della tua app, come pulsanti, transizioni, livelli di testo, ecc. È facile modificare i parametri di una transizione, per sperimentare effetti diversi.
Altri strumenti di programmazione visiva basati su nodi stanno anche trovando favore con i progettisti interattivi, tra cui Max da Cycling 74 e dall'open source Vvvv.
Un altro nuovo strumento che sembra interessante è vuo, attualmente in beta.
Mockup e prototipazione di prossima generazione
Sono stati rilasciati nuovi strumenti che mirano specificamente a consentire ai progettisti interattivi di prototipare app e siti web.
Uno dei migliori di questi è Slip. Briefs è uno strumento solo per Mac molto orientato alla creazione di app per iPhone e iPad, anche se è possibile creare mocking di app desktop. Oltre all'app Briefs principale per Mac, c'è anche un'app per iOS Briefscase, che ti consente di pubblicare il tuo progetto Briefs su un iPad o iPhone per demo e condividere i tuoi modelli su un dispositivo reale.
Lavorare con Briefs è molto logico. Puoi importare immagini dello schermo e aggiungere loro una semplice interattività, o per un'esperienza interattiva più ricca, costruire i layout dello schermo da una libreria di elementi dell'interfaccia utente standard come tabbar, caselle di ricerca, elementi di elenco, ecc. Esistono librerie per iOS, Android , Desktop e uno stile "Blueprint" agnostico della piattaforma. Quindi applichi l'interattività a quegli elementi che desideri demo, ad esempio per mostrare come vengono visualizzati i risultati della ricerca, o come la transizione funziona da una schermata all'altra.
In molti modi sembra lavorare con un'app di presentazione come Keynote, ma piuttosto che una timeline lineare, è possibile creare branching complessi, ovvero quando diventa utile la possibilità di vedere i propri schermi come nodi collegati dalle loro interazioni.
L'aspetto migliore di Brief è che non è solo uno strumento per la funzionalità di dimostrazione, è in realtà un ottimo strumento di progettazione, per aiutare a costruire buone interfacce utente nello spazio ristretto dello schermo di un telefono o tablet.
A $ 199 per il software principale Briefs, non è un prodotto economico, ma molto ben progettato, e fa quello che si propone di fare molto bene. (Una demo limitata è disponibile per la valutazione.)
Per una soluzione open source, dai un'occhiata Framer.js, un framework di prototipazione interattivo per creare rapidamente mockup dell'interfaccia utente. C'è anche un prodotto, Framer Studio, costruito sul framework framer.js, per fornire uno strumento di prototipazione già pronto.
Con Framer Studio, tutti gli elementi dello schermo devono essere creati prima in Photoshop come gruppi di livelli, prima di essere importati in Framer per aggiungere transizioni e funzionalità. Framer usa Coffeescript, un "piccolo linguaggio che compila in Javascript", per mantenere il codice pulito e semplice. Tuttavia, il codice che crei non ha alcun valore reale al di fuori dello strumento di prototipazione.
Se sei abile a usare Photoshop per i tuoi prototipi di siti Web o app, allora Framer Studio è un ottimo modo per aggiungere facilmente interattività ai tuoi progetti di schermo, per creare una demo.
Strumenti futuri per la progettazione e lo sviluppo
Come accennato in precedenza, tutti gli strumenti illustrati finora potrebbero aiutarti a visualizzare e presentare l'interfaccia utente dell'app o del sito che stai creando, ma devi comunque affrontare il compito di implementare il progetto.
Questo è forse un problema ancora più grande quando si usano questi strumenti piuttosto che produrre wireframes statici e mockup: ora non si deve solo riprodurre il layout, bisogna anche implementare la stessa funzionalità e le transizioni.
C'è una discussione progettazione nel browser è il modo migliore per garantire che le tue comp non stiano scrivendo assegni e le tue competenze in codice non possono incassare.
Tuttavia, ci sono alcune app che possono aiutare a colmare il divario tra la visualizzazione e il codice di produzione pronto.
RealTime Studio di Outracks, è un IDE ben implementato per la visualizzazione, quasi un mix tra gli strumenti basati sul nodo come Quartz Composer e uno strumento basato sulla timeline come Edge Animate.
Perché in RealTime Studio puoi vedere sia il codice che la sua rappresentazione visiva, sia i designer che gli sviluppatori possono utilizzarlo e comprenderlo. Outracks utilizza il proprio linguaggio chiamato Uno, che è molto simile a Java o Actionscript. La cosa migliore è che, poiché il codice può essere esportato per diverse piattaforme di destinazione, è uno strumento pratico di sviluppo, non solo un'app di visualizzazione.
Con così tante cose da fare non è una sorpresa che lo schermo sia piuttosto ingombrante. C'è una vista nodo, una vista timeline e una vista codice, nonché la finestra di anteprima. Sarebbe opportuno apportare alcuni miglioramenti all'interfaccia utente, per rendere più semplice la riduzione delle viste non necessarie, al fine di espandere quelle in cui si sta lavorando. Il visualizzatore di nodi è particolarmente scarso rispetto a qualcosa come Quartz Composer. Tuttavia, sono davvero entusiasta di questo prodotto. Attualmente in versione beta, è solo PC, e sul sito Outracks è disponibile una demo.
Un altro nuovo entusiasmante prodotto è NoFlo, uno strumento di programmazione Javascript basato sul flusso. Sviluppato come risultato di una campagna di successo di Kickstarter (divulgazione: ero un sostenitore), evidenzia sia l'insoddisfazione per gli strumenti attualmente disponibili, sia il potenziale non sfruttato per strumenti di programmazione basati sul flusso, che potrebbero essere più facilmente compresi dai non programmatori . NoFlo si basa su Node.js per fornire app funzionali al browser. L'output nativo per Android e iOS è in corso.
Il motore NoFlo è open source e può essere scaricato gratuitamente. C'è anche una versione ospitata su Flowhub.io. Flowhub può essere eseguito nel browser o come app di Chrome.
Tuttavia, Flowhub non è ancora all'altezza delle sue promesse, ma come un ambiente di programmazione intuitivo, sembra piuttosto lento, instabile e difficile da usare. I nodi creati nel grafico sorgente rappresentano funzioni (o metodi per utilizzare la terminologia corretta), il cui codice Javascript reale risiede altrove.
Al momento, usare Flowhub è un ostacolo piuttosto che un aiuto. Sospetto che la maggior parte degli sviluppatori preferisca un codice a manovella piuttosto che usare Flowhub. Tuttavia, questi sono i primi giorni,
Detto questo, Flowhub e NoFlo offrono uno sguardo potente su dove la programmazione basata sul flusso può richiedere sia la visualizzazione che lo sviluppo, e si spera si sviluppi nell'intuitivo strumento di sviluppo rapido delle applicazioni che intende diventare.
Sono convinto che il futuro del design dell'interazione risieda in strumenti basati sul flusso.