Sådan kommer du i gang med Next Generation Website Prototyping
For nylig er jeg blevet mere og mere frustreret over det nuværende værktøjssæt og accepterede fremgangsmåder til oprettelse af UI og UX 'deliverables'.
Efter min opfattelse opfører statiske mock-ups i Photoshop og Illustrator ikke kernen i det nuværende UI-design. På samme måde synes oprettelse af wireframes og UX-dokumentation i værktøjer som Axure at kommunikere meget lidt af, hvordan et websted eller en app faktisk føles at bruge.
Disse værktøjer er reduktive, hvilket begrænser designet til en række statiske "stater", snarere end at kommunikere den rige, dynamiske, fordybende oplevelse, som vi håber at bygge.
Overvej f.eks. At klikke på et emne i en listevisning for at afsløre en informationsskærm. Hvordan er genstanden bortskaffet? Hvordan opbygger den nye skærm? Hvad sker der, når jeg klikker for at gå tilbage til listevisningen? Hvordan tilføjes nye elementer i listevisningen?
Uanset hvor mange skærmtilstands "snapshots" du laver, er det væsentlige karakter af moderne skærmdesign, hvordan UI-elementer overgår fra en tilstand til en anden, og hvordan nye skærmelementer bringes til og fra skærmen.
Animationer og overgange synes mig at være hvor essensen af UI-design nu ligger, da vi flytter til mere rumlige designmønstre.
Det er et mellemrum, ikke en side
En del af dette skyldes, at interaktive medier nu bliver allestedsnærværende, vi behøver ikke længere at henvise til papirbaserede visuelle metaforer, f.eks. 'Siden' for at gøre vores grænseflader nemme at bruge. Nu er rumlige metaforer til navigation af indhold på skærmen mere nyttige, og overgange, der er beskrevet i animationssproget.
Pasquale d'Silva kalder dette område af UI-design Overgangsgrænseflader, og jeg tror, at han har identificeret et centralt undersøgelsesområde for moderne web- og appdesign.
Men de fleste af de nuværende interaktive designers værktøjssæt er utilstrækkelige til at udforske, designe og opbygge disse grænseflader.
Animationssoftware kan bruges til at bygge mockups og prototyper af interaktion. After Effects kan Adobe Edge Animate, selv Flash, bruges til at demonstrere overgangseffekter, som kan udgives som animerede gifs, videoer eller Flash-filer. Men det kan være tidskrævende at bygge, og selvom de kan være gode til at vise en bestemt grænseoverskridende effekt, kan det også være en meget arbejdskrævende øvelse at tilpasse parametrene. Og selvfølgelig skal du først oversætte alle dine overgange og grænseflader til arbejdskode til din app eller hjemmeside, når du har opbygget en rig interaktiv UI-demo.
Visuelle kompositionsværktøjer
Det er ikke overraskende, at mange af de værktøjer, som interaktive designere vender mod, er visuelle multimedie kompositionsværktøjer, der bruges af VJs og videoeffekter programmører.
Den mest kendte af disse er Apples eget visuelle programmeringsværktøj Quartz Composer, som - hvis du har en Mac - kan du allerede have på din computer, hvis du har installeret Xcode. (Du finder den i mappen Udvikler> Programmer, eller den kan downloades som en del af Xcode).
Quartz Composer er blevet fremhævet som et interaktivt prototypeværktøj på grund af en artikel Gå Big ved at gå hjem, hvor Julie Zhuo, en designer på Facebook, afslørede, at designteamet på det nye Facebook Home havde brugt QC i vid udstrækning at teste og demo brugergrænsefladen:
"Noget som Facebook Home er helt ud over Photoshops evner som et designværktøj. Hvordan kan vi tale om fysikbaserede brugergrænseflader og paneler og bobler, der kan slettes på tværs af skærmen, hvis vi sidder og ser på statiske mocks?
"Når du ser en levende, poleret, interaggerbar demo, kan du øjeblikkeligt forstå, hvordan noget er meningen at arbejde og føle på en måde, som ord eller lange beskrivelser eller wireframes aldrig vil kunne opnå. Og det fører til bedre feedback og bedre iterationer, og i sidste ende et bedre slutprodukt. "
Over på QC forum på Branch, designere begyndte at gengive arbejdet i Facebook-teamet.
Facebook fulgt op ved at frigive Facebook Origami, et værktøjssæt til Quartz Composer specielt rettet mod interaktive designere.
Learning Quartz Composer kan tage et stykke tid, men dens knudebaserede tilgang (hvor leads forbinder input til processionsnoder (patches) og derefter til en output) er logisk. Dens visuelle repræsentation af en beregningsmetode kan gøre det mere forståeligt for designere, og det er nemt at tinker rundt med parametre og ændre ledningsføringen af en sammensætning.
Med Origami er det ret simpelt at skabe interaktive mockups til mobil og browsere. Det giver dig klar til at bruge grænsefladeelementer til at opbygge funktionaliteten og interaktiviteten af din app, såsom knapper, overgange, tekstlag osv. Det er let at justere parametrene for en overgang for at eksperimentere med forskellige effekter.
Andre nodebaserede visuelle programmeringsværktøjer finder også fordel med interaktive designere, herunder Max ved at cykle 74 og den åbne kilde Vvvv.
Et andet nyt værktøj, som ser interessant ud, er Vuo, i øjeblikket i beta.
Next-gen mockup og prototyping
Nye værktøjer udgives, der specifikt er rettet mod at tillade interaktive designere at prototype apps og websteder.
En af de bedste af disse er Briefs. Briefs er et værktøj til Mac, der er meget orienteret for oprettelsen af apps til iPhone og iPad, selvom det også er muligt at opføre desktop-apps. Ud over den vigtigste Briefs app til Mac er der også en iOS app Briefscase, der giver dig mulighed for at udgive dit Briefs-projekt til en iPad eller iPhone for at demo og dele dine mock-ups på en ægte enhed.
At arbejde med Briefs er meget logisk. Du kan importere skærmbilleder og tilføje simpel interaktivitet til dem eller for en rigere interaktiv oplevelse. Opbygger skærmlayouterne fra et bibliotek med standard UI-elementer som flikslinjer, søgefelter, listelementer osv. Der er biblioteker til iOS, Android , Desktop og en platform agnostisk 'Blueprint' stil. Så bruger du interaktiviteten til de elementer, du vil demo, for eksempel for at vise, hvordan søgeresultaterne vises, eller hvordan overgangen fungerer fra en skærm til en anden.
På mange måder føles det som at arbejde med en præsentationsapplikation som Keynote, men snarere end en lineær tidslinje kan du oprette komplekse forgreninger, hvilket er, når evnen til at se dine skærmbilleder, som knuder, der er forbundet med deres interaktioner, bliver nyttige.
Det bedste aspekt af Briefs er, at det ikke kun er et værktøj til demo funktionalitet, det er faktisk et fantastisk designværktøj, der hjælper med at opbygge gode brugergrænseflader i det stramme skærmrum på en telefon eller tablet.
Ved $ 199 for den vigtigste Briefs-software er det ikke et billigt produkt, men meget godt designet, og gør det, som det siger sig rigtig godt. (En begrænset demo er tilgængelig til evaluering.)
For en open source løsning, tjek Framer.js, en interaktiv prototyping ramme til hurtigt at bygge UI mockups. Der er også et produkt, Framer Studio, bygget på framer.js-rammen, for at tilvejebringe et klargjort prototypeværktøj.
Med Framer Studio skal alle skærmelementer først oprettes i Photoshop som laggrupper, før de importeres til Framer for at tilføje overgange og funktionalitet. Framer bruger Coffeescript, et "lille sprog, der kompilerer til Javascript", for at holde koden ren og enkel. Koden du opbygger har imidlertid ingen reel værdi uden for prototypeværktøjet.
Hvis du er dygtig til at bruge Photoshop til dine mock-ups til websteder eller apps, er Framer Studio en fantastisk måde at nemt tilføje interaktivitet til dine skærmdesigner for at oprette en demo.
Fremtidige værktøjer til design og udvikling
Som nævnt ovenfor kan alle de værktøjer, der fremhæves hidtil, hjælpe dig med at visualisere og præsentere brugergrænsefladen til den app eller websted, du bygger, men du står stadig over for opgaven med at implementere designet.
Dette er måske et endnu større problem, når du bruger disse værktøjer end at producere statiske wireframes og mockups: Nu skal du ikke bare reproducere layoutet, du skal også implementere samme funktionalitet og overgange.
Der er et argument, at designe i browseren er den bedste måde at sikre dine comps ikke skriver, kontrollerer din kodefærdigheder ikke kontanter.
Der er dog nogle apps, der kan hjælpe med at broere kløften mellem visualisering og produktionsklar kode.
RealTime Studio af Outracks, er en velimplementeret IDE til visualisering, næsten en blanding mellem nodebaserede værktøjer som Quartz Composer og et tidslinjebaseret værktøj som Edge Animate.
Fordi i RealTime Studio du kan se både koden og dens visuelle repræsentation, kan både designere og udviklere bruge og forstå det. Outracks bruger sit eget sprog, der hedder Uno, hvilket meget ligner Java eller Actionscript. Bedst af alt, fordi koden kan eksporteres til en række forskellige målplatforme, er det et praktisk udviklingsværktøj, ikke kun en visualiseringsapp.
Med så meget foregår det ikke overraskende, at skærmen er ret rodet. Der er en nodevisning, en tidslinjevisning og en kodevisning samt preview-vinduet. Nogle forbedringer til brugergrænsefladen vil være velkomne for at gøre det nemmere at minimere de synspunkter, du ikke behøver, for at udvide dem, du arbejder i. Nodeviseren er især meget dårlig sammenlignet med noget som Quartz Composer. Jeg er imidlertid meget begejstret for dette produkt. I øjeblikket i beta er det kun pc, og der findes en demo på Outracks websted.
Et andet spændende nyt produkt er NoFlo, et flowbaseret Javascript programmeringsværktøj. Udviklet som resultat af en succesfuld Kickstarter-kampagne (afsløring: Jeg var en backer) fremhæves det både utilfredsheden med de aktuelt tilgængelige værktøjer og det uudnyttede potentiale for flowbaserede programmeringsværktøjer, der lettere kunne forstås af ikke-programmører . NoFlo bygger på Node.js for at levere funktionelle apps til browseren. Native output til Android og iOS er i værkerne.
NoFlo-motoren er åben kilde og kan downloades gratis. Der er også en vært version på Flowhub.io. Flowhub kan køres enten i browseren eller som en Chrome-app.
Flowhub lever imidlertid ikke virkelig sit løfte endnu som et intuitivt programmeringsmiljø, det virker ret langsomt, flakket og svært at bruge. De noder, du opretter i Kildegrafen, repræsenterer funktioner (eller metoder til at bruge den korrekte terminologi), hvis faktiske Javascript-kode er placeret andetsteds.
I øjeblikket er brug af Flowhub en hindring snarere end en hjælp. Jeg formoder, at de fleste udviklere hellere vil håndtere kode end at bruge Flowhub. Men disse er tidlige dage,
Når det er sagt, tilbyder Flowhub og NoFlo et stærkt indblik i, hvor flowbaseret programmering kan tage både visualisering og udvikling, og forhåbentlig vil udvikle sig til det intuitive værktøj til hurtig applikationsudvikling, som det sigter at blive.
Det er min opfattelse, at fremtiden for interaktionsdesign ligger i flowbaserede værktøjer.