Föreläsning 3 1ME403 Design av grafiska gränssni7, 7,5hp. Gränssni)sdesign II. Rune Körnefors. Medieteknik Rune Körnefors rune.kornefors@lnu.

Transkript

1 Föreläsning 3 1ME403 Design av grafiska gränssni7, 7,5hp Gränssni)sdesign II Rune Körnefors Medieteknik Rune Körnefors rune.kornefors@lnu.se

2 Områden Kapitel i boken ÖvningsuppgiC B Affordance Formulärobjekt i HTML5 Exempel på olika "pa)erns" 2 Bilder från freedigitalphotos.net

3 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

4 ÖvningsuppgiV B h)ps://coursepress.lnu.se/kurs/design- av- grafiska- granssni)/ovningsuppgicer- b/ Kort beskrivning av uppgicen 4

5 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

6 Mapping och metafor Mapping (Norman, 1998) Rela\onen mellan e) objekt i gränssni)et, vad det påverkar och det avsedda resultatet Natural mapping Förstår användaren vad man ska välja och vad som kommer a) ske? 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 Funk\onell metafor Metafor för a) förstå vilka uppgicer man kan uköra Visuell metafor 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

7 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:// Norman, D. (2004) Affordance, ConvenKons and Design (Part 2), jnd.org [h)p:// 7

8 How" Physical Affordance - The cursor is used for poin\ng - The mouse is used for clicking - The screen is used for watching Affordance What" Perceived Affordance - 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

9 Hantering av fel Hur hanterar vi situa\oner där användaren kan göra "fel"? Förhindra Rä)a Input- element där indata endast kan ges på korrekt form 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

10 Formulärobjekt i HTML5 Några nya inpu)yper i HTML5: <input type="date"> <input type="month"> <input type="date\me- local"> <input type=" "> <input type="number"> <input type="range"> <input type="color"> F3test.htm" w3schools (2014) HTML Input Type, Refsnes Data [h)p:// Clark, R. (2013) HTML5 forms input type, html5 Doctor [h)p://html5doctor.com/html5- forms- input- types/] 10

11 Kapitel 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 Exempel: Paneler i PowerPoint, etc., panelerna i vänsterkanten och överkanten i UXPin Prominent "Done" Bu)on Knapp för a) bekräca, avsluta interak\onen görs framskjutande och placeras sist Exempel: "OK"- knapp läggs längst ner, oca \ll höger (jmf. Diagonal Balance i kap. 4), 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 Även exempel på: Sequence Map Grid of Equals Diagonal Balance Hover Tools

12 Kapitel 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, Skriva kod i en HTML- editor, t.ex. Dreamweaver 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: Fylla i fält i en kolumn i Excel 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 Exempel: UtskriCsdialog i olika program Same- Page Error Messages Visa felmeddelanden in\ll den plats där felet finns Exempel: Rutor med felmeddelanden i formulärobjekt i HTML5 F3test.htm" 12

13 Exempel på rä)stavning som blir fel Det blev inte som det var tänkt 9 augusk