Presentasjon lastes. Vennligst vent

Presentasjon lastes. Vennligst vent

From Abstraction to Realization in UI Designs: Abstract Prototypes Based on Canonical Abstract Components Mats B. Pettersen Jøran B. Sandberg 25.09.2002.

Liknende presentasjoner


Presentasjon om: "From Abstraction to Realization in UI Designs: Abstract Prototypes Based on Canonical Abstract Components Mats B. Pettersen Jøran B. Sandberg 25.09.2002."— Utskrift av presentasjonen:

1 From Abstraction to Realization in UI Designs: Abstract Prototypes Based on Canonical Abstract Components Mats B. Pettersen Jøran B. Sandberg SIF80AP

2 Abstrakt - Konkret Abstrakt Konkret Idé Papirprototyp Oppgavemodell Konstruksjonsspek. Innholdsmodeller Oppgaveorientert design GUI design Innholdsnavigering Anvendelsesmodell

3 Abstrakte Prototyper Holder fokus på innhold, organisering og funksjonalitet uavhengig av layout, utforming og oppførsel. GUI-tools: kjapt og gæli Abstrakte prototyper: mer gjennomtenkt produkt

4 Abstrakte Prototyper Sammenknytter konseptuelt gap mellom Oppgavemodell - generelt hva som skal gjøres - ingen designdetaljer - typisk use-case, kravspek -> Realistisk prototype - detaljert beskrivelse av systemet - typisk skisse over skjermbilde, papirprototyp o.l.

5 Abstrakte Prototyper Består ofte av to deler: Innholdsmodell - Representerer innholdet til brukergrensesnittet. - En innholdsmodell er en samling ”views” bestående av de nødvendige (abstrakte) komponentene som trengs for å utføre ulike oppgaver innenfor hvert view. Navigasjonskart - Utfyller innholdsmodellen og kobler de ulike views’ene sammen.

6 Abstrakte Prototyper Wire-frame mockups - variant av abstrakt prototyping som viser relativ størrelse og posisjon til elementene. - fargekoding brukes for å vise prioritet eller type element.

7 Abstrakte Prototyper Abstrakt layout diagram - annen variant av abstrakt prototyping. - viser også relativ størrelse og posisjon til elementene.

8 Ulike prototyper Abstrakt Konkret Innholdsmodell (helt abstrakt) Wireframe mockup Abstrakt layoutdiagram Low-fi papirprototype (grov skisse) Hi-fi papirprototype (realistisk og detaljert)

9 Abstrakte problemer Vanlige novice-problemer ved disse modelleringsteknikkene  Vanskelig med navngiving i abstrakte termer  Vanskelig å skille tools fra materials  Vanskelig å mappe abstrakte komponenter til fysiske komponenter  Vanskelig å lage skjermlayouts og andre UI-kontekster fra abstrakte ”views”

10 Semantisk brobygging Mellom abstrakt modell og et godt endelig design kan det derimot være vanskelig å finne en slik enkel semantisk mapping. Mange avgjørelser og tradeoffs å gjøre. Broen mellom oppgavemodell og abstrakt modell er rimelig grei skuring. Ofte en-til-en mapping.

11 Semantisk brobygging (2) En abstrakt innholdsmodell er gjerne for nært oppgavemodellen og for langt unna det endelige designet. Abstrakt Konkret Oppgavemodell Abstrakt innholdsmodell Endelig design Trenger bedre bro!

12 Bedre brobygging Selv om abstrakt prototyping har en del ulemper, har studier vist at det finnes et klart behov for modellering mellom oppgavemodellen og det endelige designet. Det man trenger er en modelleringsvariant av abstrakt prototyping som ligger litt nærmere det endelige designet. Denne må være: 1. enklere og mer naturlige å utvikle. 2. lettere å oversette til et faktisk visuelt interaksjonsdesign. 3. enklere å koble opp mot andre modeller gjennom domenemodellen.

13 Kanonisk abstrakt prototyping Bruk av standardiserte, abstrakte komponenter kan være med på å løse problemene med brobyggingen mellom abstrakt og konkret. -> Kanonisk abstrakt prototyping Kanonisk prototyping er en metodikk utviklet for dette, der man bruker et ”toolkit” for å prototype layout, størrelse og posisjon til kanoniske komponenter på en måte brukere kan forstå.

14 Kanoniske abstrakte komponenter Gir et standard ”toolkit” av abstrakte komponenter. 1.Kjernesett av grunnleggende, generelle abstrakte komponenter 2.Utvidelse av 1 med litt mer spesialiserte komponenter 3.Special-purpose komponenter som kan være nyttige

15 Materialer Der er tre basismaterialer: o Container o Element (Ett element) o Collection (Samling av elementer) Og to til (ekstra): o Melding/varsel o Akseptor (aktiv container) Konvensjonell navngiving er å bare bruke navnet til innholdet – dvs. det som skal representeres i materialet.

16 Tools Handlinger: Initiate/start Terminate/quit Operasjoner: Select Create Delete Modify Move Duplicate Aux.tools: Go/link/drill Perform (w/return) Toggle Operasjoner: Gjør noe med materialer Handlinger: Trigger en handling. Setter i gang ting. Navngiving for tools er konvensjonelt å navngi handlingen som skal gjøres, e.g. ”(Do) Symbol checking”. Operasjoner og handlinger er to typer abstrakte tools.

17 Tools (2) Ved bruk av tools i modelleringen kan det være greit at det kommer klart fram, enten grafisk eller vha. tekst, hvilke materialer verktøyet jobber mot. Tekstlig: Anbefales for web-baserte eller store prosjekter

18 Å designe fra kanoniske prototyper To parallelle aktiviteter: Visuelt design Utvelging av riktige komponenter for å realisere modellen med de kanoniske komponentene Layouten av de visuelle komponentene Interaksjonsdesign Utvelgelse eller konstruksjon av interaksjonsmetodene Beskrive den påkrevde oppførselen til grensesnittet Organisering av interaksjonssekvenser mellom ulike views eller kontekster

19 Eksempel på bruk Flere mulige designløsninger fra en abstrakt prototype: 2. Arne Sølvberg 1. Hallvard Trætteberg 3. Dag Svanæs Editerbare sekvensnummer 1.Arne Sølvberg 2.Hallvard Trætteberg 3.Dag Svanæs Flytting av elementer opp/ned vha pilerLegge til eller fjerne elementer fra en hovedliste Arne Sølvberg Hallvard Trætteberg Dag Svanæs Add -> <- Remove 1.Hallvard Trætteberg 2.Arne Sølvberg

20 Eksempel på bruk (forts.) Interaksjonsdesign. For forrige eksempel kan man tenke seg flere ulike interaksjonsmåter: Klikk for å velge kilde-punkt og mål Drag-and-drop Editere sekvensnumre Klikk på ”flytt opp” / ”flytt ned” Det kan være gunstig å kombinere flere av disse interaksjonsmåtene – for å passe både novisebrukere og mer avanserte brukere.

21 Konklusjoner Bruk av abstrakte layoutdiagrammer vha. kanoniske abstrakte komponenter funker for å strømlinjeforme og effektivisere usage centered design. Kanoniske prototyper ligger nærmere det ferdige produktet enn hva abstrakte modeller gjør – men uten å legge for sterke føringer for det visuelle designet og implementasjonen av brukergrensesnittet.


Laste ned ppt "From Abstraction to Realization in UI Designs: Abstract Prototypes Based on Canonical Abstract Components Mats B. Pettersen Jøran B. Sandberg 25.09.2002."

Liknende presentasjoner


Annonser fra Google