Introduksjon til design, bruk, interaksjon Design, ... Medium-fidelity prototyping INF1500 ¢â‚¬â€œ Introduksjon

  • View
    0

  • Download
    0

Embed Size (px)

Text of Introduksjon til design, bruk, interaksjon Design, ... Medium-fidelity prototyping INF1500...

  • INF1500 – Introduksjon til design, bruk, interaksjon  Design, prototyping og konstruksjon 1 |

    18.09.12

    INF1500 - Introduksjon til design, bruk, interaksjon

    Design, prototyping og konstruksjon

    Institutt for Informatikk, 18. september 2012

    joshi@ifi.uio.no

  • INF1500 – Introduksjon til design, bruk, interaksjon  Design, prototyping og konstruksjon 2 |

    18.09.12

    Oversikt

    • Prototyping • Hva, hvordan og hvorfor?

    • Dimensjoner ved prototyping

    • Low-fidelity

    • High-fidelity

    • Kompromisser

    • Konstruksjon

    • Konseptuell design

    • Metaforer

    • Interaksjonstyper

    • Scenarioer

  • INF1500 – Introduksjon til design, bruk, interaksjon  Design, prototyping og konstruksjon 3 |

    18.09.12

    Behovsanalyse 

    kravspesifikasjon

    Design  prototype

    Evaluering  analyse

    Obligatorisk oppgave 1

    Obligatorisk oppgave 2

    Obligatorisk oppgave 3

    Brukersentrert utvikling

  • INF1500 – Introduksjon til design, bruk, interaksjon  Design, prototyping og konstruksjon 4 |

    18.09.12

    Er dette en prototype?

  • INF1500 – Introduksjon til design, bruk, interaksjon  Design, prototyping og konstruksjon 5 |

    18.09.12

    Hva er en prototype?

    • I andre design områder er en prototype en modell, i liten skala

    • Miniatyrbil

    • Miniatyrbygning

    • Prototype – etymologi

    Protos ”første” + typos ”intrykk”

  • INF1500 – Introduksjon til design, bruk, interaksjon  Design, prototyping og konstruksjon 6 |

    18.09.12

    Hva er prototyping?

  • INF1500 – Introduksjon til design, bruk, interaksjon  Design, prototyping og konstruksjon 7 |

    18.09.12

    Prototyping

    • Hva er en prototype?

    • Hvorfor lage prototyper?

    • Ulike typer

    • Low fidelity (lav nøyaktighet/oppløsning)

    • High fidelity (høy nøyaktighet/oppløsning)

    • Kompromisser ved prototyping

    • Vertikale

    • Horisontale

    • Konstruksjon av prototyper

  • INF1500 – Introduksjon til design, bruk, interaksjon  Design, prototyping og konstruksjon 8 |

    18.09.12

    Hvordan prototype?

    • To muligheter: 1. Begynne fra scratch

    2. Modifisere en eksisterende idé

    • En serie med skisser

    • Et storyboard (dreiebok); tegneserie

    • Lysark (powerpoint slides)

    • En video – som simulerer bruk av systemet

    • Fysisk modell (trebit for håndholdte terminaler)

    • Papp modell

    • Programkode som viser en begrenset funksjonalitet

  • INF1500 – Introduksjon til design, bruk, interaksjon  Design, prototyping og konstruksjon 9 |

    18.09.12

    Hvorfor prototype?

    • Gir mulighet til å vise frem og teste egne ideer

    • For å få til evaluering og tilbakemelding fra brukere

    • Aktører kan interagere med prototypen lettere enn ved ”skriftlige beskrivelser”

    • Gjør kommunikasjon mellom bruker og utvikler enklere og rikere. Også mellom

    medlemmer i designgruppa

    • Stimulerer til refleksjon

    • Prototyper gir svar på spørsmål, og støtter designere i å velge mellom alternativer

    • Gjør at utviklere og ikke-tekniske aktører kan snakke ”samme språk”

  • INF1500 – Introduksjon til design, bruk, interaksjon  Design, prototyping og konstruksjon 10 |

    18.09.12

    Hvorfor prototype?

    • Tradisjonell systemdesign vs. interaksjonsdesign

    • Systemutvikler • Hva kan jeg enkelt utvikle på denne plattformen?

    • Hva kan jeg enkelt utvikle med verktøyet jeg har tilgjengelig?

    • Hva finner jeg som utvikler mest interessant? (S.Greenberg 2005)

    • Interaksjonsdesigner • Hva er brukerens egenskaper og behov?

    • Hvilken kontekst designer vi for?

    • Hvilke oppgaver skal brukeren løse?

    • Hvordan kan jeg sikre brukervennlighet? (J.Nielsen 1993)

    • Obligatorisk oppgave 2  prototype to designforslag

    Bruker i fokus  Utallige løsninger

    Funksjonalitet i fokus 

    Ofte bare én riktig løsning

  • INF1500 – Introduksjon til design, bruk, interaksjon  Design, prototyping og konstruksjon 11 |

    18.09.12

    Dimensjoner ved prototyping

    Dimensjon Eksempler på variabler

    Utseende Størrelse, farge, form, fasong, tekstur, proporsjon, hardhet,

    gjennomsiktighet, haptisk, lyd

    Data Størrelse, type, bruk, personvern, hierarki, organisering

    Funksjonalitet Systemets funksjoner og brukernes behov

    Interaktivitet Input, output, feedback, informasjon

    Romlig

    struktur

    Sammensetning av grensesnitt og informasjonssystemer,

    relasjon mellom elementer, 2D/3D, tangible eller intangible

    Hentet fra s. 397 (3. utgave)

  • INF1500 – Introduksjon til design, bruk, interaksjon  Design, prototyping og konstruksjon 12 |

    18.09.12

    Dimensjoner ved prototyping

    Dimensjon Definisjon Eksempler på variabler

    Materiale Medium brukt til å forme

    prototypen

    Fysisk medium (papir, tre, plastikk), utstyr

    for å forme fysisk medium (kniv, saks, penn,

    sandpapir), programvareutstyr (Adobe

    Flash, Visual Basic), fysisk utstyr (Phidgets,

    Arduino).

    Oppløsning Detaljnivå (hva som

    manifesteres) –

    korresponderer med

    fidelity

    Nøyaktighet, utseende, interaktive detaljer,

    realistisk data vs. dummy data

    Scope Omfanget av det som

    manifesteres

    Grad av kontekstualisering

    Hentet fra s. 398 (3. utgave)

  • INF1500 – Introduksjon til design, bruk, interaksjon  Design, prototyping og konstruksjon 13 |

    18.09.12

    Hva kan man lage prototype på?

    • Tekniske forhold

    • Arbeidsflyt, oppgavedesign

    • Skjermlayout, informasjonsvisning

    • Interaksjonsforhold

    • Vanskelige, kontroversielle, kritiske områder

  • INF1500 – Introduksjon til design, bruk, interaksjon  Design, prototyping og konstruksjon 14 |

    18.09.12

    Low-fidelity

    • Bruker et medium ulikt fra det endelige produktet

    • Det er raskt, billig og kan endres hurtig  gir rask tilbakemelding på design

    • Lar oss eksperimentere med alternative design

    • Skaper forventningskontroll mellom bruker og utvikler

    • Innbyr til utforsking

    • Nesten all interaksjon kan fakes

    • Eksempler på low fidelity prototyper:

    • Storyboard

    • Skisser

    • Kortbaserte prototyper

    • ”Wizard of Oz”

  • INF1500 – Introduksjon til design, bruk, interaksjon  Design, prototyping og konstruksjon 15 |

    18.09.12

    Storyboards

    • Stammer fra film og animasjon

    • Serie med skisser som viser hvordan brukeren går igjennom ulike steg i oppgaven

    • Gir et ”manuskript” over viktige detaljer

    • Holder detaljer utenfor

    • Fokus på de viktigste interaksjoner

    • Blir ofte brukt med scenarioer  gir mulighet for rollespill

    • Blir brukt i en tidlig fase av designet

    CMU HCI Master's Capstone Project 2007

  • INF1500 – Introduksjon til design, bruk, interaksjon  Design, prototyping og konstruksjon 16 |

    18.09.12

    Storyboards

    • Eksempel fra obligatorisk oppgave 2 i fjor:

    (CMU HCI Master's Capstone Project 2007)

  • INF1500 – Introduksjon til design, bruk, interaksjon  Design, prototyping og konstruksjon 17 |

    18.09.12

    Skisser

    • Tegning av grensesnittets utseende, følelse eller funksjonalitet

    • Veldig raskt og enkelt å igangsette

    • Forenklingen gjør at brukere kan konsentrere seg om høynivå-temaer

    • Viktig å ikke la seg hemme av egne tegneferdigheter  bruk enkle symboler

  • INF1500 – Introduksjon til design, bruk, interaksjon  Design, prototyping og konstruksjon 18 |

    18.09.12

    Skisser

    (N. Carlson and H. Emsheimer, 2009)

    (N. Carlson and J. Bates, 2009)

  • INF1500 – Introduksjon til design, bruk, interaksjon  Design, prototyping og konstruksjon 19 |

    18.09.12

    Pictive

    • “plastic interface for collaborative technology initiatives through video exploration”

    • Brukes mye til å utforske