Så här börjar du med nästa generations webbplats prototyper
Nyligen har jag blivit alltmer frustrerad med den nuvarande verktyget och accepterade metoder för att skapa användargränssnitt och UX "leveranser".
Enligt min erfarenhet bygger inte uppbyggnad av statiska mock-ups i Photoshop och Illustrator kärnan i nuvarande användargränssnitt. På samma sätt verkar skapandet av trådramar och UX-dokumentation i verktyg som Axure kommunicera mycket lite om hur en webbplats eller app faktiskt känns att använda.
Dessa verktyg är reduktiva, vilket begränsar designen till en serie statiska "stater", snarare än att kommunicera den rika, dynamiska, uppslukande erfarenheten som vi hoppas bygga.
Tänk på att klicka på ett objekt i en listavy för att avslöja en informationsskärm. Hur hanteras listan? Hur bygger den nya skärmen? Vad händer när jag klickar för att gå tillbaka till listvy? Hur läggs nya objekt till listvy?
Oavsett hur många skärmtillstånd "snapshots" du gör är den väsentliga karaktären av modern skärmdesign hur UI-element övergår från ett tillstånd till ett annat, och hur nya skärmelement tas in / från skärmen.
Animationer och övergångar verkar mig vara där kärnan i UI-designen ligger nu, när vi flyttar till mer rumsliga mönster.
Det är ett utrymme, inte en sida
En del av detta beror på att interaktiva medier nu blir allestädes närvarande, vi behöver inte längre referera till pappersbaserade visuella metaforer, till exempel "sidan" för att göra våra gränssnitt enkla att använda. Nu är rumsliga metaforer för att navigera innehåll på skärmen mer användbara och övergångar beskrivna i animationsspråket.
Pasquale d'Silva kallar detta område för UI-design Övergångsgränssnitt, och jag tror att han har identifierat ett viktigt undersökningsområde för modern webb- och appdesign.
Men de flesta av de nuvarande interaktiva designers verktygssats är otillräckliga för att utforska, designa och bygga dessa gränssnitt.
Animationsprogram kan användas för att bygga mockups och prototyper av interaktion. After Effects kan Adobe Edge Animate, even Flash, användas för att visa övergångseffekter, som kan matas ut som animerade gifs, videor eller Flash-filer. Men dessa kan vara tidskrävande att bygga, och medan de kan vara bra för att visa en viss UI-övergångseffekt kan anpassning av parametrarna vara en mycket arbetsintensiv övning. Och självklart, när du väl har byggt upp en rik interaktiv gränssnittsdemo måste du översätta alla dina övergångar och gränssnitt till arbetskod för din app eller webbplats.
Visuella kompositionsverktyg
Det är ingen överraskning att många av de verktyg som interaktiva designers vänder sig mot är visuella multimedia-kompositionsverktyg, som används av VJs och videoeffekterprogrammerare.
Den mest kända av dessa är Apples eget visuella programmeringsverktyg Quartz Composer som, om du har en Mac, kanske du redan har på datorn, förutsatt att du har installerat Xcode. (Du hittar den i mappen Utvecklare> Program, eller den kan hämtas som en del av Xcode).
Quartz Composer har slagits in i rampljuset som ett interaktivt prototypverktyg på grund av en artikel Gå Big genom att gå hem, där Julie Zhuo, en designer på Facebook, avslöjade att designteamet för det nya Facebook-hemmet hade använt QC i stor utsträckning för att testa och demo UI-hemmet:
"Något som Facebook Home är helt bortom Photoshops förmågor som ett designverktyg. Hur kan vi prata om fysikbaserade användargränssnitt och paneler och bubblor som kan slängas över skärmen om vi sitter och tittar på statiska mocks?
"När du ser en levande, polerad, interaktiv demo, kan du direkt förstå hur något är tänkt att fungera och känna på ett sätt som ord eller långa beskrivningar eller trådramar aldrig kommer att kunna uppnå. Och det leder till bättre feedback och bättre iterationer, och i slutändan en bättre slutprodukt. "
Över vid QC forum på Branch, designers började reproducera Facebook-lagets arbete.
Facebook följde upp genom att släppa Facebook Origami, en verktygslåda för Quartz Composer som särskilt riktar sig till interaktiva designers.
Learning Quartz Composer kan ta ett tag men dess nodbaserade tillvägagångssätt (där ledningar kopplar in ingångar till bearbetningsnoder (patchar) och sedan till en utgång) är logiskt. Dess visuella representation av en beräkningsprocess kan göra det mer begripligt för designers, och det är lätt att tinka runt med parametrar och ändra ledning av en komposition.
Med Origami är det enkelt att skapa interaktiva mockups för mobiler och webbläsare. Den erbjuder redo att använda gränssnittselement för att bygga upp din funktionalitet och interaktivitet, t.ex. knappar, övergångar, textlager etc. Det är enkelt att tweak parametrarna för att säga en övergång för att experimentera med olika effekter.
Andra nodbaserade visuella programmeringsverktyg finner också fördel med interaktiva designers, inklusive Max med Cykling 74 och den öppna källan VVVV.
Ett annat nytt verktyg som ser intressant ut är Vuo, för närvarande i beta.
Nästa genmockup och prototyping
Nya verktyg släpps som särskilt syftar till att låta interaktiva designers prototypa appar och webbplatser.
En av de bästa av dessa är Kalsonger. Briefs är ett Mac-bara verktyg som är väldigt mycket inriktat på skapandet av appar för iPhone och iPad, även om det är möjligt att mocka upp stationära appar. Förutom den huvudsakliga Briefs-appen för Mac finns det också en iOS-app Briefscase, så att du kan publicera ditt Briefs-projekt till en iPad eller iPhone för att demo och dela dina mock-ups på en riktig enhet.
Att arbeta med Briefs är väldigt logiskt. Du kan importera skärmbilder och lägga till enkel interaktivitet för dem eller för en rikare interaktiv upplevelse, bygga upp skärmlayouterna från ett bibliotek med vanliga användargränssnitt, t.ex. flikfält, sökrutor, listelement etc. Det finns bibliotek för iOS, Android , Skrivbord och en plattform agnostisk "Blueprint" stil. Då tillämpar du interaktiviteten på de element du vill demo, till exempel för att visa hur sökresultaten visas eller hur övergången fungerar från en skärm till en annan.
På många sätt känns det som att arbeta med en presentationsapplikation som Keynote, men snarare än en linjär tidslinje kan du skapa komplicerad förgrening, vilket är när möjligheten att se dina skärmar som nodar som är kopplade till deras interaktioner blir användbara.
Den bästa aspekten av Briefs är att det inte bara är ett verktyg för demofunktionalitet, det är faktiskt ett bra designverktyg, för att hjälpa till att bygga bra användargränssnitt i det snäva skärmutrymmet på en telefon eller surfplatta.
Vid $ 199 för Main Briefs-mjukvaran är det inte en billig produkt, men väldigt bra designad, och gör vad det står för att göra väldigt bra. (En begränsad demo är tillgänglig för utvärdering.)
För en öppen källkodslösning, kolla in Framer.js, en interaktiv prototyping ram för att snabbt bygga UI mockups. Det finns också en produkt, Framer Studio, byggt på framer.js-ramverket, för att tillhandahålla ett färdigt prototyperverktyg.
Med Framer Studio måste alla skärmelement skapas först i Photoshop som lagergrupper innan de importeras till Framer för att lägga till övergångar och funktionalitet. Framer använder Coffeescript, ett "litet språk som kompilerar till Javascript", för att hålla koden ren och enkel. Koden du bygger har dock inget reellt värde utanför prototypverktyget.
Om du är skicklig till att använda Photoshop för dina mock-ups för webbplatser eller appar, är Framer Studio ett bra sätt att enkelt lägga till interaktivitet för dina skärmdesigner för att skapa en demo.
Framtida verktyg för design och utveckling
Som nämnts ovan kan alla verktyg som hittills hittats hjälpa dig att visualisera och presentera användargränssnittet på appen eller webbplatsen du bygger, men du står fortfarande inför uppgiften att implementera designen.
Det här är kanske ett ännu större problem när du använder dessa verktyg än att producera statiska wireframes och mockups: nu behöver du inte bara reproducera layouten, du måste också implementera samma funktionalitet och övergångarna.
Det finns ett argument att utforma i webbläsaren är det bästa sättet att säkerställa att dina comps inte skriver kontrollerar din kodfärdighet kan inte kontanter.
Det finns dock några appar som kan hjälpa till att överbrygga klyftan mellan visualisering och produktionsklar kod.
RealTime Studio av Outracks, är en väl implementerad IDE för visualisering, nästan en blandning mellan de nodbaserade verktygen som Quartz Composer och ett tidslinjebaserat verktyg som Edge Animate.
Eftersom i RealTime Studio du kan se både koden och dess visuella representation kan både designers och utvecklare använda och förstå det. Outracks använder sitt eget språk som heter Uno, vilket mycket liknar Java eller Actionscript. Bäst av allt, eftersom koden kan exporteras för ett antal olika målplattformar, är det ett praktiskt utvecklingsverktyg, inte bara en visualiseringsapp.
Med så mycket pågår är det ingen överraskning att skärmen är ganska rörig. Det finns en nodvy, en tidslinjevisning och en kodvy samt förhandsgranskningsfönstret. Vissa förbättringar av användargränssnittet är välkomna för att göra det enklare att minimera de åsikter du inte behöver, för att expandera de du arbetar med. Kodvisaren är speciellt mycket dålig jämfört med något som Quartz Composer. Jag är emellertid väldigt glad över den här produkten. För närvarande i beta är det bara PC, och det finns en demo på Outracks webbplats.
En annan spännande ny produkt är NoFlo, ett flödesbaserat Javascript programmeringsverktyg. Utvecklat som ett resultat av en framgångsrik Kickstarter-kampanj (avslöjande: Jag var en bärare) framhäver både missnöje med de verktyg som för närvarande finns tillgängliga och den outnyttjade potentialen för flödesbaserade programmeringsverktyg, som lättare kunde förstås av icke-programmerare . NoFlo bygger på Node.js för att leverera funktionella appar till webbläsaren. Native-utdata till Android och iOS finns i verken.
NoFlo-motorn är öppen källkod och kan laddas ner gratis. Det finns också en värdversion på Flowhub.io. Flowhub kan köras antingen i webbläsaren eller som en Chrome-app.
Flowhub lever dock inte riktigt upp till sitt löfte men som en intuitiv programmeringsmiljö verkar det ganska långsamt, fläckigt och svårt att använda. De noder du skapar i källgrafen representerar funktioner (eller metoder för att använda rätt terminologi), vars faktiska Javascript-kod finns annanstans.
För närvarande använder Flowhub ett hinder snarare än en hjälp. Jag misstänker att de flesta utvecklare hellre vill vrida koden än att använda Flowhub. Men dessa är tidiga dagar,
Med det sagt, Flowhub och NoFlo erbjuder en kraftfull inblick i var flödesbaserad programmering kan ta både visualisering och utveckling, och kommer förhoppningsvis att utvecklas till det intuitiva verktyget för snabb applikationsutveckling som det syftar till att bli.
Jag tror att framtiden för interaktionsdesign ligger i flödesbaserade verktyg.