Design fase - 1. iteration sitemaps wireframes interface metaforer 1 Design deliverables sitemaps - organisering af den samlede informationsmængde. flow charts - interaktion. wireframes - strukturering af individuelle sider. screen designs - præsentation. 2
Sitemaps Synonymer: taxonomi, sitestruktur, hierarki, navigationsmodel Formål Kommunikerer konceptuel struktur og organisering af indhold Publikum Designere og udviklere Kontekst Definerende eller diagnostisk 3 Sitemap layouts Tree: Hierarkisk organisering - vokser horisontalt. Comb: Hierarkisk organisering - vokser vertikalt. Star: Flade strukturer 4
Home Søg Nyheder finde events publicere events 5 Vocabulary Signaturforklaringer/legender: forklarer diagrammets symboler legende Side Side element Relation Gruppering Identiske sider 6
Home Søg Nyheder finde events publicere events 7 Home Søg Nyheder finde events publicere events søge interface browse efter titel browse efter dato event 8
Home Søg Nyheder finde events publicere events publiceringsinterface søge interface browse efter titel browse efter dato event 9 Cheat sheet til Jesse James Garreth s symbol bibliotek Visual Vocabulary 10
Sitemaps og dynamiske websites Udfordringen ligger i at afbilde større og mere dynamiske websites. Hvor relevant er side metaforen? Hvordan vise dynamisk indhold? Grupper bliver til områder. Links implicitte. Flade hierarkier og bløde kategorier. 11 Statisk vs. Dynamisk Statisk: Dynamisk: Explore Explore People Travel Nature People Travel Nature List Images images Travel List images images Nature List images images explore List images List images 12
Hvad så når de viste kategorier genereres dynamisk? Search List explore List images search categories explore List images List result...eller når det er brugerne der organiserer indholdet? Explore 13 Tagcloud explore List images List images Håndtering af store websites: Continuation points 14
Kobling mellem flow chart og site map 15 Et par øvelser Sitemap som design specifikation og sitemap som diagnose redskab. 16
Øvelse Test et sitemap ved at lave en wireframe på baggrund af det. (sitemap slide 18 og s. 282 i IA-Blueprints for the web) Er det nemt at se hvad der er en side og hvad der ikke er? Kan det tegnes bedre? Kan jeg forstå hvordan en bruger kan navigere mellem sider? Kan jeg forstå organiseringen og interaktionen i diagrammet? 17 18
Læg mærke til flg: Der er forskel på bokse En pil betyder link boks til venstre? Et stiplet boks er en gruppering 19 20
2 3 1 1 Dynamic data read from cases.xml, use description tag. 2 Text above char index 45 is omitted and replaced by more link 3 more link loads case template along with unique case.xml 21 Øvelse Tegn et sitemap for at forstå eller diagnostisere et website. Fra interface til sitemap - reverse engineering af Google Husk at præsentere anvendte symboler. 22
search search categories categories List tools Advertising Programmes Business Solutions About Google Go to... Google search Language Tools Advanced search 23 Sign-in Search Settings igoogle Featured Legend page group conditional page component link flow reference Wireframes Specificerer hvilket indhold brugeren ser og hvordan det indhold prioriteres. Eksisterer i grænselandet mellem Struktur og Præsentation viser navigation, features, indhold og indholdsgrupperinger på en side (samt placering heraf). Fokus på INFORMATION frem for design. 24
Formål med wireframes Formål Kommunikere struktur beslutninger. Kan også bruges til usability tests. Publikum Designere (brugere) Kontekst Mellem sitemaps og screen designs. 25 Vigtige beslutninger Er wireframen til interfacedesignfasen eller til implementeringsfasen? Hvad er wireframens rolle? - At præsentere en designløsning? - Forstå problemet vi skal designe os ud af? 26
Kun 1 formål! 27 Detaleringsgrad Low fidelity - high level - bredde High fidelity - low level - dybde 28
wireframes: Lag 1 indholdsområder - rektangler indholdsbeskrivelser - tekst indholdsprioritering - formatering el. kronologi 29 høj prioritet lav prioritet Movie box cover [...] Movie title and description [...] Add to rental queue [...] Movie metadata [...] Customer rating [...] Recommendation navigation [...] Recommendation reasons [...] Friends recommendations [...] Customer reviews [...] Critics reviews Global Navigation [...] Search Box [...] Support Navigation [...] 30
wireframes: Lag 2 Scenarios - en narrativ titel Funktionalitet - links og gui elementer Annotations - noter udenfor skærmen 31 32
wireframes: Lag 3 Layout og visuelt design kontekst i det samlede design Eksempel-indhold 33 34
Eksempel-Indhold Autentisk indhold - navigation labels - til alt lorem ipsum - brødtekst dummy indhold - til indhold der siger sig selv symbolsk indhold - til indhold med genkendelige formater 35 Omnigraffle - Mac Microsoft Visio Papir og blyant Diverse digitale tegneredskaber IA templates og stencils wireframe tools 36
http://www.designerstoolbox.com/designresources/elements/ Browser GUI elementer skærmopløsninger iphone GUI elementer Lorem Ipsum 37 Design med udgangspunt i et konceptuelt design: et eksempel 38
Tag udgangspunkt i et konceptuelt design Konceptuelt design er en løsningsorienteret respons på den viden der blev genereret i analyse fasen. Funktionalitet Data Brugere Brugeroplevelse konceptuelt design 39 Et konceptuelt design kan hjælpes på vej af at teamet beslutter sig for hvilke interaktionsformer og interfacetyper der er relevante og hvilke metaforer der kan støtte brugerens forståelse af produktet: De 4 Interaktionsformer: Instructing Conversing Manipulating Exploring For mere, se kapitel 2 i Interaction Design 40 Nogle Interface typer: GUI Advanced GUI Sharable Tangible Mobile For mere, se kapitel 6 i Interaction Design
Interface metafor Familær viden kombineres med ny viden på en måde der hjælper brugeren med at forstå systemet. En svær balance mellem brugbarhed og sjov. Erickson 1990, Working with Interface Metafors : trin 1: etablere en god forståelse for produktets funktioner. trin 2: identificere de kritiske steder i produktet. trin 3: generere metaforer 41 Interface metafor trin 1: en god forståelse for systemets funktionalitet. Systemet skal føre brugeren igennem en række strukturerede læreforløb som tilsammen udgør 3 års matematik curricullum. Forløbene skal kunne tilpasses ved at brugeren sammensætter indholdet på nye måder. En indholds-enhed skal kunne stå alene eller opleves i tilfældig rækkefølge. Indholds-enhed = Læringsobjekt. trin 2: identificere de kritiske steder i systemet At brugere kan orientere sig i stor indholdsmængde. At brugere fuldfører læreforløb. trin 3: generere metaforer 42
Hele systemet Matematik curriculum og undervisning for 1-3 kl. Metafor: Et narrativt univers om en ø beboet af monstre og fyldt med skrammel som de bruger til at bygge fartøjer, der skal få dem væk fra øen. 43 Curriculum - et narrativt univers 44
45 Et klassetrin - et sted i universet - 46
Hele systemet Matematik curricullum og undervisning for 1-3 kl. En gruppe læringsobjekter Et læreforløb om et matematisk emne. Metafor: Et narrativt univers om en ø beboet af monstre og fyldt med skrammel som de bruger til at bygge fartøjer, der skal få dem væk fra øen. Metafor: En mission der går ud på at samle nok brændstof til at få prøvekørt et fartøj. 47 Et emne - Test af et fartøj 48
Brændstof fra alle læringsobjekterne i et emne, fyldes på fartøjet. 49 Prøvetur - Belønning 50
Hele systemet En gruppe læringsobjekter Læringsobjekt og score Matematik curricullum og Et læreforløb om et matematisk emne. undervisning for 1-3 kl. Metafor: Et narrativt univers om en ø beboet af monstre og fyldt med skrammel som de bruger til at bygge fartøjer, der skal få dem væk fra øen. Metafor: En mission der går ud på at samle nok brændstof til at få prøvekørt et fartøj. 51 En pædagogisk aktivitet og et mål for elevens udbytte af aktiviteten. Metafor: Spil, leg, fortælling indenfor universets narrativ, som udløser en variabel mængde brændstof til fartøjet. Læringsobjekt og score 52
Test af metaforen Erickson 1990, Working with Interface Metafors Hvor meget struktur giver metaforen? Hvor meget af metaforen er relevant for problemet? Er metaforen nem at repræsentere med billeder, lyd og tekst? Vil målgruppen kunne forholde sig til metaforen? Kan metaforen udvides, har den flere elementer som kan blive nyttige senere? 53 Hvor meget struktur giver metaforen? Universets storyline giver struktur til det linære men samtidig frie forløb gennem materialet. Universets fysiske rum giver struktur til organisering af indholdet. 54
Konceptuelt design for Mondiso Matematik 1. - 3. klasse Klassetrin Emne Aktivitet 55 Historiens iterationer svarer til læreforløbets iterationer: Matematik 1. - 3. klasse På en skrammel ø i Bermuda trekanten bor der nogle monstre med en drøm om at komme over til en anden ø. Klassetrin Et sted på øen... Emne...bygges på et fartøj... Aktivitet...brændstof samles......fartøjet afprøves. Et sted nyt sted på øen opdages. Det lykkedes til sidst 56 at komme over til den anden ø.
Hvor meget af metaforen er relevant for problemet? Metaforen bedst til at understøtte fremdrift (progress). Fagligt indhold/aktiviteter og overordnet narrativ ikke nærtforbundet. Fx. er det ikke relevant at se selve konstruktionen af fartøjet. Det er ikke en metafor for matematik - det er en metafor for det tid-og-rum-kontinuum som matematik undervisningen sker i. 57 Vil målgruppen kunne forholde sig til metaforen? Vi hentede inspiration fra kulturfænomener som vi ved vores målgruppe kan lide Adventure spil genren 58 En humoristisk fortælling for børn
Kan metaforen udvides? Hver gang vi har en aktivitet kan vi trække på den overordnede narrativ i skabelsen af en mindre narrativ og på den måde udvide metaforen til også at rumme det faglige indhold. 59 Site map for Mondiso Træning Whiteboard 1. talrækken plus minus 2. gange former 3. dividere Evaluering Planlægning 60
Ressourcer Toolbox (print og web) http://www.designerstoolbox.com/designresources/ Artikelsamling: http://boxesandarrows.com/ Tegneprogrammer: http://articles.sitepoint.com/article/tools-prototyping-wireframing Magasin: http://wireframes.linowski.ca/ Jesse James Garrett s artikel om at beskrive IA og ID: http://www.jjg.net/ia/visvocab/#flow 61 Øvelser Hvis I finder det relevant: Diskutér mulige interface metaforer for jeres produkt. Evaluer jeres interface metafor med spørgsmålene på slide 53. Tegn et sitemap for systemet. Husk signaturforklaring. Senere kan I bruge denne tegning til at vise hvilke dele I vil implementere. Tag udgangspunkt i sitemap et og tegn en wireframe. Start med at tegne en skitse i hånden, ren-tegn i et tegneprogram. Gem en version for hver af de 3 lag beskrevet på slide 29-34. Sørg i hvert fald for at I har en wireframe med en detaljeringsgrad som den vist på slide 34. 62