Prototypning. Filmtajm. Prototypens roll: Evolutionär eller kasta bort. Dagens föreläsning. Detaljgrad. Detaljerad i vilket avseende?

Relevanta dokument
Prototypning och heuristisk utvärdering

Prototypningsverktyg. A Human-Centered Design Process (ISO , 2010) Mattias Institutionen för datavetenskap

Tjänsteprototypning. Föreläsning i kursen TDDD51 Linköpings universitet den 21 februari Johan Blomkvist

Hi-Fi Prototyping + laborationsgenomgång & verktyg

Gestaltningstekniker Innehåll ALLMÄNT. Att zooma in och zooma ut

Idag. Prototyper och användbarhetsutvärdering. Vad prototyper prototypar. Olika sorters prototyper. Del 2 Prototyper Utvärdering Analytisk Empirisk

HUMAN-CENTERED SYSTEMS Stefan Holmlid

Föreläsning 8, Design

Innehåll. Vad är prototyping? Low-, mid-, high-fidelity prototyping Konceptuella modeller Verktyg för mid/high-fi prototyping

Vad är en prototyp? En prototyp är en manifestation av ett designförslag som man kan interagera med på något sätt.

Hi fi prototyping. Johanna Persson MAM nov 2014

Fö 4: Utvärdering. Gästföreläsning. Muddy-cards resultat. Varför och vad? Varför? Vad? Mot vad? (Krav) Hur? IMPACT

Vad vi pratade om förra gången. Fast med andra ord

Wireframeskisser, pappersprototyper och heuristisk utvärdering

Tjänsteprototypning. och tjänsterepresentationer. Johan Blomkvist IDA-HCS-IxS

DESIGNMETODER. Koncep;asen - Målträd. Dagens föreläsning. Effektkartläggning. Effektkartläggning - Projektmål. Effektkartläggning - Effektmål

Prototyping. Susanna Olsson, TietoEnator Funda Denizhan, TietoEnator Ann Lantz, CID

Kravhantering med prototyp


Boken. Kapitel 10. Kapitel 11. Kap Ej Kap 10.7, det tar vi senare Resten, läs själva

Berättelser Scenarios Presentationer Skisser Formella modeller Mjukvaruprototyper Kartong modeller etc.

Prototyping. Planera och genomföra webbproduktionsprojekt. Innehåll. Fördelarna med Pappersprototyper. Lofi-prototyp. Prototyping

Interaktionsdesign och användbarhet Personas. Paper prototyping. » Metod för representation av användaren. » Metod för konceptutveckling

INTERAKTIONSDESIGN: VAD & HUR?

Agila Metoder. Nils Ehrenberg

Granskning av gränssnitt. Mattias Arvola

Interaktionsdesign som profession. Föreläsning Del 2

Interaktiva applikationer för dator (WPF) och web (Silverlight) Grafisk utvecklingsmiljö. Hela produktioner: design, layout, animationer, skins, etc.

Teman för föreläsningen. Gestaltlagarna Layout Typografi

Nya Medier. Gränssnitt, Interaktivitet och Digital kod

Introduktion av Trailer/Uppsamling

LOGISTIKSYSTEM FÖR SNABBA HJULET AB UTVECKLINGSPROCESS BASERAD PÅ DR. DEBORAH J. MAYHEW S THE USABILITY ENGINEERING LIFECYCLE

HUMAN-CENTERED SYSTEMS Stefan Holmlid

Kommunikationsorienterad. visuell design

Användarcentrerad Systemutveckling

Din idé Vår verklighet VIRTUELLT

Grupp 3. Projektplan

Grundläggande programmering med matematikdidaktisk inriktning för lärare som undervisar i gy eller komvux gy nivå, 7,5 hp

Olika syften. TDDD60 användbarhetstest. När passar vilken typ? Med eller utan användare

Microsoft Expression Blend + Sketch Flow

Människa-Datorinteraktion. HCI text

Redigeringsteknik och postproduktion

Chaos om datorprojekt..

Mediaverktyg. Grafik. Video. Ljud. Animationer. Strömmande media. Webb

Kommentarer till MDI tentamen

Att läsa: Sharp, Helen, Rogers, Yvonne & Preece, Jenny E. (2007) Interaction design. Wiley. Kapitel 11.

Förbered och planera bildmanuset

Introduktion och grunder

Kommunikations- orienterad visuell design

Viktiga begrepp. Algoritm. Array. Binärkod. Blockprogrammering. Bugg / fel och felsökning. Dataspel. Dator

Introduktion till Adobe Acrobat Connect Pro

Nya Medier. Gränssnitt, Interaktivitet och Digital kod

Bakgrund och motivation. Definition av algoritmer Beskrivningssätt Algoritmanalys. Algoritmer. Lars Larsson VT Lars Larsson Algoritmer 1

Profilinfo DPU3 Teknisk Design

Datorer och Människa-Maskin-Interaktion

create+ Interactive Scene Redaktörshandbok episerver

Layout. Proportioner. Layout: Proportioner

Projektsteg: Detaljdesign. Måldriven design. I praktiken? Vattenfallsmetoder. Designdriven utveckling. Agila metoder

Chaos om IT-projekt..

Bygga kurser för mobila enheter

Prototyping medium/high fidelity Användarupplevelse Interaktionsflöde och flow Användbarhetsutvärdering - Usability testing Tillgänglighet

Praktikum i programvaruproduktion

Prototyping - faser, typer och potentiell problematik

Layout. Layout. Varför layout? Proportioner. Rutnät, gruppering & justering. skapa struktur skapa balans markera betydelse

P R O J E K T : D I C E

Ett projektarbete i svenska, teknik och engelska, riktat mot DICE. Thoren Innovation School HT2012.

Programmering, dans och loopar

Våra designmål Roligt Lättnavigerat Lekfull. Vår målgrupp Barn mellan 9-13 år som vill lära sig mer om väder.

Syfte : Lära sig objektorienterad programmering Syfte : Lära sig programmering i ett OO-språk vilket?

Kommunikations- orienterad visuell design

1. (3p) Inom MDI-området framhåller man att människor lär sig via metaforer. Hur menar man att detta går till?

Daniel Wetter. Senior UX- Interaktion och tjänsteutveckling

ANPASSNING FÖR ÖVERLEVNAD: 3 SÄTT ATT ANPASSA SIG TILL FÖRÄNDERLIG MILJÖ

Föreläsning 3 Användare, uppgift och omgivning. Kapitel 3-4 i Stone et al.

Fö 2: Designprocessen. Projektet. Design är... Forts. projektet

Till elev: Block: Trailer/ Introduktion. Vad ska du göra? Varför ska du göra detta? Material: Hur ska du arbeta?

Concept Selection Chaper 7

Interaktiva Bibliotek. Eva Eriksson. IDC Interaction Design Collegium

Industridesign. Mälardalens Högskola. KPP306 Produkt- och processutveckling

Introduktion till Adobe Acrobat Connect. I denna guide beskrivs hur man använder Adobe Connect samt användning av headset och webbkamera.

Operatörer och användargränssnitt vid processtyrning

USB C DisplayPort-adapter - 3 portar - USB C till DisplayPort MST-hubb - USB Type C skärmhubb

TDP025. Entreprenöriell programmering. Marcus Bendtsen Institutionen för Datavetenskap (IDA)

Design och Prototyping

NT- GYMNASIET UPPGIFT I DIGITALT SKAPANDE JUBILEUMSUTGÅVA UTIFRÅN EN VÄRDEPLATTFORM

Studentguide Adobe Connect Pro

Min syn på visuella verktyg i produktutvecklingsprocessen

Boken. Kap Kap 11.3

Användarcentrerad systemdesign introduktion till begrepp, processer och arbetssätt

Analys och design. Objekt. Klass. med hjälp av CRC. Klassdiagram

Spel som interaktiva berättelser. Mer teoretiserande!

Tentamen, InteraktionsDesign, 7,5 ECTS

En guide för att förbättra noggrannheten.

TDDD26 Individuell projektrapport

Temperaturmätare med lagringsfunktion DIGITALA PROJEKT EITF11 GRUPP 14, ERIK ENFORS, LUDWIG ROSENDAL, CARL MIKAEL WIDMAN

XP-projekt: En fördjupning

Datalogiskt tänkande är mer än Programmering. Fredrik Heintz Linköpings universitet

Design Metoder & Tekniker. Design Metoder & Tekniker. Bakgrund. Metoder och Tekniker

ToDo ios-applikation. Mikael Östman. Mikael Östman - mo22ez Linnéuniversitetet

Arbetet började med en ganska rejäl research och uppräkning av situationer, användare och kvaliteter.

Transkript:

Filmtajm Prototypning Sketch-a-move http://vimeo.com/5125096 Mattias Arvola Institutionen för datavetenskap 2 Dagens föreläsning Typer av prototyper Upplösning Pappersprototyper Datorprototyper Verktyg för att bygga datorprototyper Prototypens roll: Evolutionär eller kasta bort Funktion Integrerad Konstruktion Look & Feel 3 4 Detaljgrad Low Fidelity: Ofta gjorda i papper. Används för att testa en design med användare och förutse stora problem till en extremt låg kostnad. High Fidelity: Interaktiva och datorbaserade. Används för att övertyga ledning och andra intressenter om att man tänkt igenom designen ordentligt och att man är på god väg. Kostnaden för dem kan dock vara ganska hög och de kan orsaka orealistiska förväntningar bland kunder. Mixed Fidelity: HiFi i vissa avseende och LoFi in andra. Detaljerad i vilket avseende? Interaktionsrikedom: Representeras transitioner, animeringar och systemrespons på ett realistiskt sätt eller är det statiska skisser? Detaljrikedom i data: Faktiska, eller realistiska, data ger förståelse för om designen passar domänen. 5 6

Strategier Bredd i funktionalitet: En bred funktionalitet (t.ex. uttag, insättning, kontoutdrag, betalningar)ger förståelse för hur systemet hänger ihop. Djup i funktionalitet: En detaljerad sekvens av en feature (t.ex. uttag) ger förståelse en hel uppgift. Visuell upplösning: Från handritade skisser till pixelkorrekta mock-uper. Horisontella prototyper ger en övergripande bild av systemet ur användarens perspektiv. Viktiga för att koordinera stora utvecklingsteam. Är ofta evolutionära. Vertikala prototyper testar en viss feature från användargränsnittet och ned i algoritmerna bakom. Validerar ofta designlösningars konstruktion. 7 8 Uppgifts-orienterade prototyper baseras på en uppgiftsanalys där syftet är att testa en uppsättning uppgifter som användarna ska göra i systemet. Inkluderar endast de funktioner som krävs för att göra uppgifterna. Kombinerar bredden av horisontella och djupet av vertikala prototyper. Kallas därför även T-prototyper. Scenariobaserade prototyper påminner om uppgifts-orienterade prototyper men betonar ett realistiskt scenario för hur systemet faktiskt skulle användas i verkliga världen. Går från användningscenarios till designscenarios till prototyp. Hur mycket ska vi implementera? Bygg det om ni kan bygga det. Fejka det om ni inte kan bygga det. Om ingen kan bygga det så är det fel på er design. 9 10 Pappersprototyper Görs tidigt i utvecklingsprocessen för att utforska idéer Interaktiva! Billiga, snabba och portabla Lätta att ändra, kan t.o.m. skapas under en session med användare Användare har lätt att föreslå förändringar Vad vill du testa? Ju finare de är desto mer fokuserar användare på utseende 11 12

13 14 15 16 Fysisk mock-up 1:1 eller skalmodeller ungefär som arkitekter använder Kartong, lego, styrofoam Får systemdesigners att tänka 3D och fysiska begränsningar 17 18

Wizard-of-Oz Gör att man kan testa en avancerad AI eller parsning för att se om och hur den borde konstrueras. Ger användarna intrycket av att de jobbar med ett verkligt system utan att något sådant faktiskt existerar. Kan också användas för att bygga upp en korpus som sedan driver ett naturligt språkgränssnitt. Styrs helt eller delvis av en wizard som tittar på vad användaren gör och ger systemresponsen. 19 20 Videoprototyper Linjära illustrationer av hur användare interagerar med det nya systemet Kan bygga på pappersprototyper, fysiska mock-upper, existerande mjukvara och bilder av faktiska miljöer Utgå från ett scenario, och gör en storyboard för filmen Ta fram what-if-scenarios och flytta omkring delar av storyboardsen för att sätta ihop sekvenser av klipp Filma klippen i rätt ordning utifrån storyboard för att slippa redigera och klippa så mycket 21 Starfire: 1992. En vision från Sun Microsystems som förutsäger och guidar utvecklingen av framtidens datorer. 100 ingenjörer, designers, visionärer och filmskapare föreställer sig en dag i en kunskapsarbetares liv i det fjärran 2004. 22 Screen casts: Linjär datorprototyp Körbara datorprototyper En film av hur skärmen ser ut när användaren kör ett scenario. Helt linjär och görs vanligen i program som Director och Flash. Kan också göras i Powerpoint eller Keynote med efterbehandling i MovieMaker, imovie eller AfterEffects. Påminner om slutprodukten och görs senare i utvecklingscykeln Testar känsla och detaljerad interaktion Jobbigt att ändra och en felaktig detalj kan stoppa upp testningen Används oftast när man inte kan visa en feature med papper, mock-up, wizard of oz eller analog videoprototyp. Börja med en storyboard! Kan göras med stop: stannar vid varje steg och väntar på input. Men endast en sak går att göra för att ta sig vidare till nästa steg. 23 24

Iterativa och evolutionära prototyper Byggs inte primärt för att testa en design utan för att både testa och bygga vidare på. Görs i traditionella utvecklingsmiljöer, men gärna med GUI-byggare Sådana miljöer har ofta färdiga bibliotek. De gör det snabbt enkelt att använda standardkomponenter. De får en lätt att låsa sig vid standardkomponenter och inte tänka på nya interaktionstekniker XHTML Verktyg för att bygga datorprototyper Presentationsverktyg: PowerPoint, Keynote, Acrobat, FireWorks, OmniGraffle, Visio Multimediaverktyg: Director, Flash, Expression, Real Studio Specialiserade prototypningsverktyg: Flash Catalyst, Expression Blend, Axure Grafiska programmeringsmiljöer: Interface Builder, Visual Studio Express, LiveCode, Eclipse http://c2.com/cgi/wiki?guiprototypingtools 25 26 www.liu.se