GränssniHsdesign II

Föreläsning 3 1ME403 Design av grafiska gränssni7, 7,5hp Gränssni)sdesign II Rune Körnefors Medieteknik 1 © 2014 Rune Körnefors [email protected] Områden •  Kapitel i boken •  ÖvningsuppgiC B •  Affordance •  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? (affordance) –  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-­‐grafiska-­‐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 & Rosenfield, 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 grafiska 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. & Rosenfield, L. (2007) InformaKon Architecture for the World Wide Web, O'Reilly 6 Affordance •  Affordance = 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 filmen "Star Trek IV: The Voyage Home" (1986) Norman, D. (2004) Affordances and Design, jnd.org [h)p://www.jnd.org/dn.mss/affordances_and.html] Norman, D. (2004) Affordance, ConvenKons and Design (Part 2), jnd.org [h)p://www.jnd.org/dn.mss/affordance_conv.html] 7 Affordance How"
What"
Physical Affordance Perceived Affordance -­‐ The cursor is used for poin]ng -­‐ The mouse is used for clicking -­‐ The screen is used for watching -­‐  The text field shows that you can write text -­‐  The bu)on shows that you can ac]vate the search Search
Why"
Affordance -­‐  The system offers 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å flera format och rä)a ]ll det som programmet kräver –  Återställa •  Möjlighet a) kunna backa ]llbaks flera 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 fler 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 filter 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 finns ]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 finns –  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