Föreläsning 3 1ME403 Design av graﬁska gränssni7, 7,5hp Gränssni)sdesign II Rune Körnefors Medieteknik 1 © 2014 Rune Körnefors rune.kornefors@lnu.se Områden •  Kapitel i boken •  ÖvningsuppgiC B •  Aﬀordance •  Formulärobjekt i HTML5 •  Exempel på olika "pa)erns" 2 Bilder från freedigitalphotos.net Li7eratur •  Tidwell, J. (2011). Designing Interfaces, 2nd ediKon, O’Reilly –  kap. 6. Doing Things: AcKons and Commands •  Olika typer av objekt och handlingar, som användaren använder för a) ak]vera något. Synliga objekt (knappar, menyer, etc.) och osynliga handlingar (dubbelklick, drag-‐and-‐drop, etc.). •  Hur vet man a) det är möjligt a) göra något med e) objekt, vad man ska göra och varför? (aﬀordance) –  kap. 8. GeSng Input from Users: Forms and Controls •  Formulär är lä)a a) hantera, men kan bli förvirrande om inte användaren förstår vad som eCerfrågas och varför. •  Olika typer av formulärobjekt tas upp och beskrivs. 3 ÖvningsuppgiV B h)ps://coursepress.lnu.se/kurs/design-‐av-‐graﬁska-‐granssni)/ovningsuppgiCer-‐b/ •  Kort beskrivning av uppgiCen och redovisningsformen 4 Hur känner vi igen objekt i gränssni7et? •  •  •  •  •  •  •  Form Storlek Ljusstyrka, kontrast Färg Symboler Struktur, mönster Placering Förstår vi hur objekten ska användas? Förstår vi varför de ska användas? 5 Mapping och metafor Mapping (Norman, 1998) Metafor (Morville & Rosenﬁeld, 2007) –  Organisatorisk metafor •  Metafor för a) underlä)a för användaren a) förstå hur programmet eller informa]onen är organiserad –  Rela]onen mellan e) objekt i gränssni)et, vad det påverkar och det avsedda resultatet –  Funk]onell metafor –  Physical mapping och logical mapping •  Metafor för a) förstå vilka uppgiCer man kan uköra –  Visuell metafor –  Förstår användaren vad man ska välja och vad som kommer a) ske? •  Förståelse av gränssni)ets graﬁska objekt •  Metaforer är huvudsakligen associa]va och knyter an ]ll något man redan kan Norman, D. (1998) The Design of Everyday Things, Basic Books Morville, P. & Rosenﬁeld, L. (2007) InformaKon Architecture for the World Wide Web, O'Reilly 6 Aﬀordance •  Aﬀordance = erbjudande, lockelse, är ]ll för, … –  Vad är det? Hur hanterar man det? –  Varför ska jag använda det? Vad kommer a) hända? Ur ﬁlmen "Star Trek IV: The Voyage Home" (1986) Norman, D. (2004) Aﬀordances and Design, jnd.org [h)p://www.jnd.org/dn.mss/aﬀordances_and.html] Norman, D. (2004) Aﬀordance, ConvenKons and Design (Part 2), jnd.org [h)p://www.jnd.org/dn.mss/aﬀordance_conv.html] 7 Aﬀordance How" What" Physical Aﬀordance Perceived Aﬀordance -‐ The cursor is used for poin]ng -‐ The mouse is used for clicking -‐ The screen is used for watching -‐  The text ﬁeld shows that you can write text -‐  The bu)on shows that you can ac]vate the search Search Why" Aﬀordance -‐  The system oﬀers you to search 8 Hantering av fel •  Hur hanterar vi situa]oner där användaren kan göra "fel"? –  Förhindra •  Input-‐element där indata endast kan ges på korrekt form –  Rä)a •  Tillåt indata på ﬂera format och rä)a ]ll det som programmet kräver –  Återställa •  Möjlighet a) kunna backa ]llbaks ﬂera steg eller återgå ]ll en ]digare version •  Hjälp användaren a) göra "rä)" Garre), J. J. (2011) The Elements of User Experience, 2nd ediKon, New Riders 9 Formulärobjekt i HTML5 •  Några nya inpu)yper i HTML5: –  –  –  –  –  –  –  <input type="date"> <input type="month"> <input type="date]me-‐local"> <input type="email"> <input type="number"> <input type="range"> <input type="color"> F3test.htm" w3schools (2014) HTML Input Type, Refsnes Data [h)p://www.w3schools.com/html/html_form_input_types.asp] Clark, R. (2013) HTML5 forms input type, html5 Doctor [h)p://html5doctor.com/html5-‐forms-‐input-‐types/] 10 el Kapit 6 Urval av pa7erns från kursboken •  •  Exempel på olika "pa7erns" Bu)on Groups –  Gruppera knappar (och andra objekt) för ak]viteter som hör ihop –  Exempel: Knappar i verktygsfält, t.ex. i PowerPoint Hover Tools –  När användaren för in markören över e) element, dyker det upp ﬂer objekt som hör ]ll det –  Exempel. Möbler på ikea.se, restauranger på h)p://onlinepizza.se/postnummer/35195 –  Variant: Expandera genom a) klicka (List Inlay i kap. 5) –  Exempel: Filtreringsalterna]v i sökresultat på bytbil.com (h)p://bytbil.com/bilar/sokresultat/AUABUDIAAYfAAA__!?Brand=Bentley&Model=) •  •  •  •  Ac]on Panel –  Panel med objekt som all]d är synliga, ]ll skillnad från i en meny Även exempel på: –  Exempel: Paneler i PowerPoint, etc., panelerna i vänsterkanten och överkanten i UXPin Sequence Map Grid of Equals Prominent "Done" Bu)on Diagonal Balance –  Knapp för a) bekräCa, avsluta interak]onen görs framskjutande och placeras sist Hover Tools –  Exempel: "OK"-‐knapp läggs längst ner, oCa ]ll höger (jmf. Diagonal Balance i kap. 4), www.ginza.se Preview –  Visa förhandsgranskning av resultatet av handlingarna –  Exempel: Preview vid användning av ﬁlter i Photoshop, sammanställning av beställning på sj.se Mul]-‐Level Undo –  Kan ta bort en sekvens av handlingar –  Exempel: Undo/redo i Excel, Step backward/step forward i Photoshop, Undo/redo i UXPin 11 el Kapit 8 Urval av pa7erns från kursboken •  •  •  •  •  •  •  Exempel på olika "pa7erns" Forgiving Format –  Flera olika format ]llåts och omformas ]ll "rä)" format av programmet –  Exempel: Stavningsrä)ning i Google-‐sökning, datum i Excel Fill-‐In-‐the-‐Blanks –  Användaren fyller i eller gör val, så a) det bildar en "mening" –  Exempel: Skapa interac]on för e) objekt i UXPin, uxpin.com Input Hints och Input Prompt –  Kort förklaring som anger vad som ska fyllas i –  Exempel: Sökrutan och avancerad sökning på imdb.com Autocomple]on –  Ge förslag medan användaren skriver –  Exempel: Sökrutan på imdb.com –  Variant: Fyll i texkält eller andra val, beroende på vad användaren fyllt i ]digare –  Exempel: Postnr / ort i registreringsformulär på adlibris.se List Builder –  En lista med vad som ﬁnns ]llgängligt. Fly)a ]ll en lista som visar vad man valt. Good Defaults –  I menyer, radioknappar, etc. görs förval som är troliga för användaren Same-‐Page Error Messages –  Visa felmeddelanden in]ll den plats där felet ﬁnns –  Exempel: Rutor med felmeddelanden i formulärobjekt i HTML5 12 Det blev inte som det var tänkt •  Exempel på rä)stavning som blir fel 13