Smidig utvikling med Balsamiq

Smidig utvikling med Balsamiq «Smidig prototyping: Dialog mellom produkteier, utviklere og kunde» Nettverksmøte i Den Norske Dataforening 4. september 2013, Trondheim Velkommen til dette foredraget som skal handle om designverktøyet Balsamiq, og hvordan det kan brukes i en smidig utviklingsprosess

Anders E. Bråten Fagansvarlig for brukeropplevelse Itema as @AndersBraten Jobber til vanlig med interaksjons- og UX-design Dvs hvordan gjøre en skjermbasert opplevelse best mulig for brukeren

Hovedpunkter Hva er en brukeropplevelse Intro til Balsamiq Smidig utvikling Hva kjennetegner en smidig utviklingsprosess? Hva gjør Balsamiq til et smidig verktøy? Hvordan bruke Balsamiq effektivt i en utviklingsprosess Interaksjonsdesigneren i SCRUM Designtips Dette er hva jeg vil snakke om i dag..

Hva er en brukeropplevelse? Bruker UX Objekt Kontekst Brukeropplevelsen finner vi i skjæringspunktet mellom brukeren, objektet som blir brukt og konteksten objektet brukes i - Det er stor forskjell på å bruke en pc og en mobil. - Det er også stor forskjell på å bruke mobilen mens man slenger på sofaen eller springer for å rekke et tog.

Hvordan lager vi en god brukeropplevelse? Desirable) Usable) User experience Useful) Performance)secure) Deployable)(func5onally)ok)) Finn ut hvor høyt oppe du er ved å lete etter «Nei» -svar (Bank-ID) - Er den i drift? Er den tilgjengelig (på brukerens platform)? Kan jeg logge meg på? - Er den oppe? Kan jeg stole på at den lagrer data? Kræsjer den midt i oppgaven? - Kan den utføre de oppgavene jeg ønsker? Får jeg printet? Har den støtte for kommunikasjon med andre? - Er det enkelt å komme i gang? Er det lett å huske fremgangsmåte fra gang til gang. Lar den meg utføre oppgaver på en smidig og naturlig måte? - Er det pent? Liker jeg å bruke den? Blir andre misunnelige? (hvor mange husker da iphone kom?)

Hva er UX-design? Utforskning UX design er normalt innom 3 faser Det første er utforskning - Let etter nøkkelinformasjon (Hvem - Hva - Hvor - Når) - Utforsk designrommet - Lag konsensus (mot bruker / oppdragsgiver) om hva som skal lages

Hva er UX-design? Utforskning Strategi Deretter kommer strategi - Identifisere viktig funksjonalitet - Konseptuell design -> Validere konsept mot bruker / kunde - Ta ett skritt tilbake og se det store bildet

Hva er UX-design? Utforskning Strategi Design Til slutt har vi design (80 %) - Design, testing, evaluering, re-design - Designen kan testes vha prototyper - Prototyping = Skjermbilder + Interaksjon) - Kontinuerlig iterering

Prototyping Balsamiq Kommet til det første av kveldens hovedtema: Prototyping i Balsamiq Snakker om skisser, mockups, storyboards og prototyper - Skisser og mockups -> enkeltskisser - Storyboards -> Flere skisser sett i sammenheng (a la tegneserie) - Prototype -> skjermbilde med innlagt interaksjon. Dvs klikker du på noe så skjer det et eller annet

Dette sier Balsamiq om seg selv. Intro til Balsamiq

Balsamiq = ren idyll? Starter med ulempene... 1) Mangler støtte for html-konvertering

Balsamiq = ren idyll? 2) Blir fort veldig mange skisser = uoversiktlig Bortsett fra det -> Genialt

Intro til Balsamiq Balsamiq er et billig verktøy, med en enkel filosofi... Få features gir.. færre bugs mindre team lavere utgifter billigere løsning Balsamiq er billig <klikk> Få features = billig løsning (for konsument) $79 for enkel lisens $12 per måned for web app Finnes også som plugin til Google Drive, Jira, etc

Intro til Balsamiq Balsamiq produserer skjermbilder som ser håndtegnet ut Leverer skisselignende skjermbilder Detaljfokuset forsvinner Gjør det lettere å fokusere på de store linjene

Intro til Balsamiq Balsamiq brukes primært for å lage skisser storyboards enkle prototyper Kort sagt er Balsamiq et verktøy for å simulere skisseringsprosessen (som vanligvis gjøres på papir)

<VIS DEMO> Demo: En enkel app

Smidig utvikling Design develop Over til kveldens andre hovedtema Hvordan bruke Balsamiq smidig? Designprosessen ER iterativ. Vi kan si at den er iterativ innenfor planleggingsfasen til et agile utviklingsløp

Smidig utvikling - iterativ utvikling «Design and development are facets of an iterative process. Design leads development. Development informs design.» - Aral Balkan (Twitter) Flink mann

Smidig utvikling Hva kjennetegner en smidig utviklingsprosess? Litt repetisjon (for å vise hvordan skisser passer inn)

Smidig utvikling - enkel dokumentasjon Masse dokumentasjon + store prototyper = vanskeligere å endre løsningen må lage kompromisser gir en sub-optimal løsning Hvorfor enkel dokumentasjon er viktig ser vi enklest ved å se på det motsatte... Dokumentasjon (som ingen leser) Prototyper (som tar tid å lage) <klikk> = Veldig vanskelig å endre kurs underveis <klikk> Gir løsninger som bommer på målet -> Lav lønnsomhet / lite fornøyde brukere / etc

Smidig utvikling - få artefakter User stories & tasks Prototyper Testkriterier Vi vil heller ikke ha for mye dokumentasjon Akkurat nok er idealet Med testkriterier, så mener jeg her en tekstlig beskrivelse som kan bevises i kode. Lages av designer / PO

Smidig utvikling - få artefakter User stories & tasks Prototyper Testkriterier } Skisser / mock-ups Skisser kan håndtere to artefakter i samme dokument (hvis vi tenker på dokument som et papir)

Smidig utvikling - smidige grep Vi spesifiserer kun det som er nødvendig til enhver tid Vi prioriterer det viktigste først Vi har god kommunikasjon og delt kunnskap Vi har en høy grad av behovsforståelse Vi er fleksible og endringsvillige Så da sitter vi igjen med en liste av krav til smidig dokumentasjon - Kun nødvendig dokumentasjon - Prioritere det viktige - God kommunikasjon - God behovsforståelse - Fleksibilitet (hold på denne tanken i et par slides)

Smidig utvikling Hva gjør Balsamiq til et smidig verktøy? Så hva gjør Balsamiq til et smidig verktøy?

Smidig utvikling - krav til designverktøy Krav Skal være enkelt å spesifisere kun det som er nødvendig til enhver tid Skal forenkle prioritering Skal føre til god kommunikasjon og delt kunnskap Skal føre til god behovsforståelse Skal gi støtte for fleksibilitet /endringer Balsamiq Kan vise dette ved å vurdere om Balsamiq tilfredstiller kravlista vi satte opp i sted

Smidig utvikling Hvordan bruke Balsamiq effektivt i en utviklingsprosess Hittil har vi snakket om hvordan Balsamiq er et smidig verktøy Nå er vi (omsider) over på hvordan Balsamiq kan brukes smidig i utviklingsprosessen Snakker i hovedsak om tre enkle grep Alle omhandler synliggjøring av designet

Smidig utvikling - gjør designen tydelig for teamet Hekt skisser / storyboards på tavla På tavla: Bruk skisser til å illustrere hva som er hensikten med en user story, og hvordan den skal representeres i løsningen Bruk bare der det er hensiktsmessig

Smidig utvikling - gjør designen tydelig for teamet Legg med testbeskrivelser / testkriterier i skissene På tavla: Hver skisse kan kompletteres med en testbeskrivelse. Dette gjøres først når designen er så klar at man kan starte koding. Liker å «tvinge» utviklerne til å skrive det på nytt -> Må tenke selv!

Smidig utvikling - gjør designen tydelig for teamet Involver PO / interessenter Skisser kan settes sammen i Storyboards / enkle prototyper Klikkbare pdf'er fungerer utmerket som interaktive prototyper, noe som gir produkteier og stakeholdere en følelse av interaksjonen med løsningen på et svært tidlig stadium.

Interaksjonsdesigneren i SCRUM «No question: if you can afford to, hire someone like me.» - Steve Krug («Don t make me think») En ting er å ha tilgang til skisser. Men enda viktigere er det kanskje å ha designeren «i omløp» for å kunne diskutere (hensikten bak) skissene

Interaksjonsdesigneren i SCRUM Kan utviklere / PO være interaksjonsdesignere? Ja Alle som lager et design som inneholder interaksjon er per def en interaksjonsdesigner Men: Interaksjonsdesign er et eget fagfelt av en grunn.. Å lage en god UX opplevelse krever tid, kompetanse / innsikt, og ikke minst dedikasjon Veldig fristende å hoppe over design og starte rett på kode..

UX-designerens rolle i SCRUM Chicken vs Pig?Høna er involvert, mens grisen er dedikert.. - Har prøvd begge deler. - Chicken kan fungere, dersom man har tett kontakt med PO og et veldig bra team med mange undersøkende/spørrende utviklere. Krever mye tid, både fra UX-designer og team. Fordel: Kan spre UXkompetanse over flere team. - Pig er utvilsomt best. Må sitte sammen med teamet. Gir automatisk hurtig iterering. Må dedikere seg til et team

UX-designerens rolle i SCRUM Interaksjonsdesigner som Scrum master? Interaksjonsdesigner som PO? Interaksjonsdesigner som Team member? - Scrum Master -> Fungerer dårlig. Blir en konflikt mellom å få gjennom flest mulig User Stories, og det å raffinere designen - PO -> Fungerer ok, men gir UX-designer veldig mye makt. Må være flink til å lytte til teamet. Krever også at man har minst en annen person som er opptatt av UX, enten i teamet eller på forretningssiden. (Motstand) - Team member -> Veldig bra, men krever at det er en viss størrelse på prosjektet. Vanskelig å splitte seg mellom flere team som Team Member, og samtidig være dedikert.

Designtips På tampen har jeg noen enkle tips, dersom noen vil prøve seg i rollen som UX-designer

UX-designerens rolle i SCRUM «Parskissering» gjør at prosessen går mer enn dobbelt så raskt, Idégenerering «as you go» Gir hverandre motstand -> Dårlige ideer kan inneholde kimen til gode løsninger

Designtips En skisse bør reflektere hvor langt vi har kommet i designprosessen Idé Skisse Prototyp Ferdig løsning Poleringsgraden sier noe om hvor moden designen er. En grov skisse eller wire frame = umoden (åpen for ideer) bra for: å gi overblikk - å vise sammenhenger - å sette fokus på funksjonalitet og virkemåte Photoshop og html = moden (løsning spikret) bra for: å diskutere detaljer - å vise løsningens endelige form - å validere at designen fungerer

Designtips Besøk http://www.uxapprentice.com/ Veldig bra side for å forklare UX på en rask og enkel måte. Laget av folka bak Balsamiq (eller noen tett på dem)

Designtips Les «Don t make me think» av Steve Krug Hvis du ikke alt har gjort det. Les denne boka.

Oppsummering Brukeropplevelsen oppstår i møtet mellom bruker, objekt og kontekst Design av brukeropplevelse gjøres best med skisser - Brukeropplevelsen oppstår i møtet mellom bruker, objekt og kontekst - Design av brukeropplevelse gjøres best med skisser, ikke tekst eller modeller

Oppsummering Balsamiq er et billig og enkelt verktøy for å generere skisser, storyboards og prototyper Balsamiq fokuserer på å få frem funksjonaliteten og interaksjonen i en løsning ved å ta vekk fokus fra detaljer Balsamiq tilfredsstiller 5 krav til en smidig designprosess - Balsamiq er billig og brukes til utforsking og validering av design - Balsamiq fokuserer på funksjonalitet og interaksjon - Balsamiq er smidig i seg selv og gir «smidig» dokumentasjon

Oppsummering Det er viktig å synliggjøre designen for hele teamet Interaksjonsdesigner bør ideelt sett være dedikert og en del av teamet - Tydeliggjøring av design er viktig for å få til den gode dialogen i teamet - Nærhet til teamet er viktig

Spørsmål? Diskusjon? The End