DESIGN TIL DIGITALE KOMMUNIKATIONSPLATFORME. 7. November 2013 #9 Prototyping & sketching

Transkript

1 DESIGN TIL DIGITALE KOMMUNIKATIONSPLATFORME 7. November 2013 #9 Prototyping & sketching

2 MENU Sketching & Prototyping [Pause] Metoder [Pause] Gruppeøvelse

3 BESØG I begyndelsen af 2. time Hvis hun husker det!

4 HUSK AT EVALUERE KURSET! HUSK AT EVALUERE KURSET! Hvis I vil være så flinke Tak.

5 SKETCHING & PROTOTYPING

6 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)

7 Visualiser, visualiser, visualiser Merit og Nielsen (2006)

8 Visualiseringerne er afgørende for at sikre fremdrift i hele konceptudviklingsprocessen. Merit og Nielsen (2006)

9 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)

10 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.

11 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)

12 DIVERGENS + KONVERGENS De dynamiske bevægelser divergens og konvergens. Bill Buxton (2009): Sketching User Experiences, s. 91.

13 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.

14 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)

15 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.

16 RELEVANTE TYPER FOR JER Sketches Wireframes Flowcharts (storyboards, scenarier) Mock-ups Moodboards (roughboards) Style Tiles Software/Apps/Online ressourcer Andre bud?

17 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)

18 Bill Buxton (2009): Sketching User Experiences

19 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

20 BEARBEJDNINGSGRAD Forskellige grader af prototype-udtryk: Low fidelity - high fidelity Omhandler dels udseende og finish samt graden af interaktion.

21 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)

22 FIDELITY Fred Beecher (2009) Beecher (2009)

23 There is no such thing as high or low fidelity, only appropriate fidelity. Bill Buxton (2007)

24 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)

25 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)

26 ...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)

27 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å.

28 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)

29 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)

30 WIREFRAMES Streger og annotationer

31 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.

32 Daniel Brown (2007)

33 Daniel Brown (2007) Daniel Brown (2007)

34 Daniel Brown (2007)

35 UNDGÅ FOR MEGET DESIGN

36 SKAL VÆRE NEM AT AFKODE

37 FOKUS PÅ STRUKTUR (OG EVT. FUNKTIONALITET/INTERAKTION)

38 ARBEJD MED SIDE -TYPER

39 SLÅ NED PÅ FEATURES

40 SLÅ NED PÅ FEATURES

41 HUSK AT ANNOTERE

42 SCENARIER: SÆT PROTOTYPEN I SPIL

43

44 SÆT INDHOLDET I SPIL

45

46

47 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.

48

49 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.

50 BALSAMIQ balsamiq.com/products/mockups

51 AXURE

52 WEBFLOW

53 THE PENCIL PROJECT

54 POP PROTOTYPING ON PAPER

55 HOTGLOO

56 MOCKABILLY

57 BLEND

58 MOCKINGBIRD

59 MOODBOARDS Rough boards eller

60 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

61 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.

62 SÅDAN GØR DU

63

64

65 MOODBOARD - TEMPLATE

66 STYLE TILES STYLE TILES Værktøjer til at sikre design, udtryk og visuel identitet

67 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)

68 STYLE TILES EKSEMPEL #2 Logo Mulige farver Teksturer Adjektiver Typografi Knapper Baggrund Centralt indhold Version

69 STYLE TILES EKSEMPEL #2 Logo Mulige farver Teksturer Adjektiver Typografi Knapper Baggrund Version

70 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

71 HVIS DU VIL VIDE MERE Daniel Brown: Communicating Design Bill Buxton (Microsoft Research): Sketching User Experiences

72 BOXES & ARROWS

73 TAK FOR I DAG TAK FOR I DAG Frivillig øvelse: bit.ly/ddkp13_wireframes