DESIGN TIL DIGITALE KOMMUNIKATIONSPLATFORME 7. November 2013 #9 Prototyping & sketching
MENU Sketching & Prototyping [Pause] Metoder [Pause] Gruppeøvelse
BESØG I begyndelsen af 2. time Hvis hun husker det!
HUSK AT EVALUERE KURSET! HUSK AT EVALUERE KURSET! Hvis I vil være så flinke Tak.
SKETCHING & PROTOTYPING
Sketching in the broad sense, as and activity, is not just a byproduct of design. It is central to the design thinking and learning Bill Buxton (2007)
Visualiser, visualiser, visualiser Merit og Nielsen (2006)
Visualiseringerne er afgørende for at sikre fremdrift i hele konceptudviklingsprocessen. Merit og Nielsen (2006)
STYRKER Styrker opdagelsesprocessen Visualiseringer hjælper til at afdække problemområder og muligheder. Giver inspiration og skaber en vision for ens koncept. Styrker beslutningsprocessen Det nemt for alle at følge med, hvorved det er nemmere og hurtigere at nå konsensus omkring håndtering af udfordringer og problemer. Styrker forklarings- og involveringsprocessen Hjælper til at vise hvordan brugerne forholder sig til og benytter ens produkt - og hvordan det kan gavne dem. Merit og Nielsen (2006)
RESULTATER Dvs. både konstruktionen og selve prototypen vil levere resultater. Konstruktionen: Virker som facilitator for kreativitet igennem hele processen. Sikrer fremdrift i udviklingsprocessen. Prototypen: Leverer en fælles platform for kommunikationen og den fælles forståelse i udviklingsgruppen. Kan benyttes til at besvare spørgsmål og opfordrer til refleksion. Nødvendigt for at validere og teste med brugerne. Som formidlingsværktøj til idéer, resultater og progression i processen eksempelvis i forhold til interessenter.
FORMÅL Forskellige formål og fokus: Idégenerering, idévalidering Problemområder (usability, tekniske problemstillinger) Features og funktionalitet (flow og forløb, opgavegennemførelse, succesrater og -kriterier) Layout og informationsvisning (-prioritering) Look & feel, æstetik Formålet hænger sammen med tidspunktet i ens procesforløb: Idéskabelse, konkretisering, validering, salg & eksekvering (Merit & Nielsen, 2006)
DIVERGENS + KONVERGENS De dynamiske bevægelser divergens og konvergens. Bill Buxton (2009): Sketching User Experiences, s. 91.
TIDLIG DETALJEFOKUS: ULEMPER Brugere (og interessenter) kan tro, at der er tale om et endeligt system. Fjerner fokus fra indhold (koncept) til form (udførelse). Kan være vanskeligere at kritisere og sværere at skille sig af med. Er ressourcekrævende (tid, evner og økonomi) Kan medføre, at prototypeudviklingen havner hos enkelte personer med særlige kompetencer (evt. stærke tegnere eller udviklere). Kan medføre mindre fleksibilitet og færre iterationer.
TIDLIG DETALJEFOKUS: FORDELE Mere optimal formidling af produktet over for målgrupper, som kan have svært ved at tænke abstrakt (eksempelvis børn) Djævelen bor i detaljen (Merit & Nielsen) By prototyping isolated interactions at a high functional fidelity and testing them with users, I can get really good data about whether that interaction works before I base an application around it. (Fred Beecher, 2009)
TOP DOWN ELLER BOTTOM UP? Bottom-up: Tager udgangspunkt i et fokus på systemets bestanddele og delelementer uden et helt klart billede af, hvordan det endelige resultat skal være. De enkelte bestanddele beskrives og bearbejdes detaljeret og uafhængigt af hinanden for senere at blive klynget og sat i spil i forhold til hinanden. Kendt fra softwareudvikling, hvor især objekt-orienteret programmering (OOP) er en tilgang, som har vundet indpas. Kan levere fleksibilitet både i konceptudvikling, beslutningsprocesserne samt i detailudviklingen. Hermed er fokus på detalje ikke nødvendigvis en hæmsko men kan derimod medføre en række stærke enkeltstående konceptelementer.
RELEVANTE TYPER FOR JER Sketches Wireframes Flowcharts (storyboards, scenarier) Mock-ups Moodboards (roughboards) Style Tiles Software/Apps/Online ressourcer Andre bud?
TYPER De forskellige typer har forskellige egenskaber som på forskellig vis kan dække forskellige formål. Valget afhænger af tidspunktet i processen og konteksten formålet. Hvornår er der tale om en prototype? (Bill Buxton)
Bill Buxton (2009): Sketching User Experiences
Skitse Prototype Idégenererende Antyder Udforsker Spørger Foreslår Provokerer Afsøger Uforpligtende Vurderer Beskriver Konkretiserer Svarer Tester Løser Specificerer Eksekvering Frit oversat Bill Buxton (2009): Sketching User Experiences
BEARBEJDNINGSGRAD Forskellige grader af prototype-udtryk: Low fidelity - high fidelity Omhandler dels udseende og finish samt graden af interaktion.
OMFANG OG DETALJE Kompromiser: Horisontale (få detaljer men med et bredt udvalg af funktioner og/eller omfang) Vertikale (mange detaljer med få funktioner og eller begrænset omfang)
FIDELITY Fred Beecher (2009) Beecher (2009)
There is no such thing as high or low fidelity, only appropriate fidelity. Bill Buxton (2007)
Det afgørende er ikke hvilket medie eller værktøj, som har skabt prototypen, men hvordan prototypen anvendes af en designer til at udforske eller demonstrere aspekter af en fremtidig artefakt. Houde & Hill (1990)
For en pålidelig test skal visualiseringerne vise konceptet tydeligt. Det er nemlig vores erfaring, at man ikke må undervurdere de fleste menneskers manglende evne til at abstrahere og fantasere. Merit og Nielsen (2006)
...vi har flere gange oplevet, at brugerne ikke nænner eller tør kritisere dem [skitserne], fordi de ser så færdige ud Merit og Nielsen (2006)
HVOR FÆRDIGT ER FÆRDIGT? Det er vanskeligt at ligge et generelt niveau, da det jo afhænger af, hvilken kontekst skitsen anvendes i. Idéen med at lave en skitse er, at man skal smide den ud Idéen med at lave en skitse er, at man skal smide den ud og lave en ny. Det kan være sværere, hvis man har forelsket sig i en opsætning, man har brugt meget tid på.
ALTERNATIVE LØSNINGSFORSLAG Generating alternatives is the key principle in most design disciplines... The best way to get a good idea, is to get lots of ideas Sharp et al. (2007)
Just like with any other UX research or design tool, context plays a critical role in determining how effective prototyping will be for you. Fred Beecher (2009)
WIREFRAMES Streger og annotationer
WIREFRAMES En simplificeret udgave af hvilket indhold som vil optræde i løsning. Krydser grænsen mellem struktur (hvordan en type information forholder sig til en anden) og display (hvordan informationen skal vises på siden). Benytter sig primært af simple streger (wires) og er normalt opsat uden brug af farve, typografisk stil, billeder osv. Wireframes kan have forskellig detaljegrad og udtryk. Fra kun at arbejde med informationsomfang og prioritering til også at medtage informations-layoutet og tilnærmelser til slutdesignet.
Daniel Brown (2007)
Daniel Brown (2007) Daniel Brown (2007)
Daniel Brown (2007)
UNDGÅ FOR MEGET DESIGN
SKAL VÆRE NEM AT AFKODE
FOKUS PÅ STRUKTUR (OG EVT. FUNKTIONALITET/INTERAKTION)
ARBEJD MED SIDE -TYPER
SLÅ NED PÅ FEATURES
SLÅ NED PÅ FEATURES
HUSK AT ANNOTERE
SCENARIER: SÆT PROTOTYPEN I SPIL
SÆT INDHOLDET I SPIL
BRUG TUSCH OG BLYANT - Især disse simple værktøjer understøtter fordelene ved sketching (som risikerer at gå tabt, når udførelsen overføres til et digitalt værktøj). Skaber perfekt rum for kreativitet (også i formsproget). Kræver ingen tekniske færdigheder (alle kan være med). Nemt og hurtigt at lave og ligeså nemt at skille sig af med (iterationer). Tvinger i højere grad fokus på indhold og idé frem for design, teknik og udtryk. Ulempen er, at håndskitser er besværlige at ændre, og at interaktionen i test-øjemed ikke er helt optimal.
WIREFRAMING OG PROTOTYPING SOFTWARE Wireframe- og sketching software kan hjælpe til et ensformigt look og giver mulighed for nemt at rykke rundt og lave om uden at skulle tegne forfra. En af de primære fordele er dog muligheden for interaktivitet. Stiller dog krav til at man sætter sig ned og lærer endnu et stykke software - det kan nogle gange være mere effektivt at finde blyanten frem. Generalist-programmer: Adobe Illustrator og Microsoft PowerPoint (mulighed for interaktion) Interaktive HTML-prototyper (med mulighed for at ligge design nedover vha. CSS. Udover dette: en lang række af egentlige prototypeapplikationer på markedet.
BALSAMIQ balsamiq.com/products/mockups
AXURE
WEBFLOW https://webflow.com
THE PENCIL PROJECT http://pencil.evolus.vn
POP PROTOTYPING ON PAPER https://popapp.in
HOTGLOO http://www.hotgloo.com
MOCKABILLY http://www.mockabilly.com
BLEND http://www.microsoft.com/expression/eng
MOCKINGBIRD https://gomockingbird.com
MOODBOARDS Rough boards eller
STIL & UDTRYK Senere i jeres forløb, når I skal arbejde mere specifikt med design og look & feel, kan det evt. være relevant for jer at arbejde med moodboards/roughboards. Et moodboard er en slags poster bestående af tekst, billeder, materialeprøver og farveprøver, udklip osv. Opsætningerne kan bevæge sig fra meget abstrakte og hurtigt opsat til mere konkrete og gennemarbejdede visualiseringer afhængigt af anvendelsen. Anvendes af designere tidligt i processen til på en nem og effektiv måde at indsamle inspiration og teste konceptidéer. Anvendes desuden til at kommunikere idéer over for kunder og kan benyttes som referencer i et designteam i løbet af en udviklingsproces. Lidt gammeldags
SÅDAN GØR DU Jørgen Clevin: Saks + tape/lim + aviser/screenshots/magasiner/fotografier Digitalt eller fysisk? Find, klip, riv og sammensæt - det handler om indsamle inspiration og opstille alternativer. Arbejd frit og lad jer ikke begrænse eller bekymre om opsætningen og om, hvorvidt det tager sig pænt ud. Medtag overvejelser om genre, brugerbehov, designteori (farvepalette, typografi, billedestil og udtryk, layout) osv.
SÅDAN GØR DU
MOODBOARD - TEMPLATE
STYLE TILES STYLE TILES Værktøjer til at sikre design, udtryk og visuel identitet
STYLE TILES Det modsatte af wireframes Skrifttyper, farver, UI-elementer, teksturer osv. Former og formidler den visuelle identitet og udtryk Et redskab i designprocessen Tester grundidéer af tidligt og formidler dem (lav flere)
STYLE TILES EKSEMPEL #2 Logo Mulige farver Teksturer Adjektiver Typografi Knapper Baggrund Centralt indhold Version
STYLE TILES EKSEMPEL #2 Logo Mulige farver Teksturer Adjektiver Typografi Knapper Baggrund Version
AT BRUGE STYLE TILES Lyt, observer, spørg og diskuter (brugere, afsender, team) Fortolk og oversæt feedback til Designelementer: Linjer, farver, former, typer, mønstre, rum, tekstur Designprincipper: Enhed, harmoni, balance, rytme og vægt Skab et visuelt udtryk i form at dine style tiles Gentag! Ved at udvikle videre på dine stilistiske elementer skærper du dit visuelle sprog Fordele: Hurtig visualisering af designidéer = nemmere at få feedback undervejs Dokumenterer din iterative designproces Rummer de responsive rammer i design i dag
HVIS DU VIL VIDE MERE Daniel Brown: Communicating Design Bill Buxton (Microsoft Research): Sketching User Experiences
BOXES & ARROWS http://boxesandarrows.com/
TAK FOR I DAG TAK FOR I DAG Frivillig øvelse: bit.ly/ddkp13_wireframes