Föreläsning 2 1ME403 Design av grafiska gränssni8, 7,5hp Gränssni)sdesign I. Rune Körnefors. Medieteknik Rune Körnefors

Transkript

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

2 Områden Kapitel i boken ÖvningsuppgiC A Arkitektur, struktur Principer, guidelines Navigering Exempel på olika "pa)erns" 2 Bilder från freedigitalphotos.net

3 Li8eratur Tidwell, J. (2011). Designing Interfaces, 2nd edikon, O Reilly kap. 2. Organizing the Content: Informa[on Architecture and Applica[on Structure Exempel och kort beskrivning av olika "pa)erns" Varje gränssni) (sida) 1. visar en enskild sak, 2. visar en lista eller uppsä)ning av saker, 3. [llhandahåller verktyg för a) skapa något eller 4. underlä)ar en uppgic. kap. 3. GeMng Around: NavigaKon, Signposts, and Wayfinding Var är jag, vart ska jag och hur kommer jag dit? Kort avstånd från start [ll mål (få klick, sidbyten, för a) uaöra uppgicen) "Less is be)er" Olika strukturer och navigeringsmodeller kap. 4. Organizing the Page: Layout of Page Elements Olika delar av en layout, vad är vik[gt? Rela[on mellan olika delar Visuellt flöde 3

4 ÖvningsuppgiW A h)ps://coursepress.lnu.se/kurs/design- av- grafiska- granssni)/ovningsuppgicer- a/ Kort beskrivning av uppgicen 4

5 Konkret Uppdelning i kursboken Kap. 2 Kap. 3 Kap. 4 Layout Visuella flödet, i vilken ordning ska informa[onen ges? Vilken rela[on finns mellan elementen? Navigering Hur vet jag var jag är, hur kommer jag vidare? Val av navigeringsmodell Informa(onsarkitektur Vilka objekt behövs för a) användaren ska kunna uaöra sina uppgicer? Vad ska användaren kunna göra med dem? Vilken organisa[on (kategorisering av objekten) ska gränssni)et ha? Utseende Hur? Vad? Abstrakt Tidwell, J. (2011) Designing Interfaces, 2nd edikon, O'Reilly 5

6 Konkret Jämför med Garre8s modell Kap. 2 Kap. 3 Kap. 4 Layout Visuella flödet, i vilken ordning ska informa[onen ges? Vilken rela[on finns mellan elementen? Navigering Hur vet jag var jag är, hur kommer jag vidare? Val av navigeringsmodell Informa(onsarkitektur Vilka objekt behövs för a) användaren ska kunna uaöra sina uppgicer? Vad ska användaren kunna göra med dem? Vilken organisa[on (kategorisering av objekten) ska gränssni)et ha? Utseende Hur? Vad? Visuell design I vilken ordning ska informa[onen ges? o Dela in i grupper/avdelningar Gränssni8sdesign Hur ska informa[onen matas in? o Form och val av element o Välj form så a) felak[ga inmatningar undviks i så stor utsträckning som möjligt o Olika modeller för navigering Interak(onsdesign Vilken informa[on behöver användaren ge? o Specificera vad o Vad måste ges och vad är valfri) Vilken feedback ska ges [ll användaren? Abstrakt Tidwell, J. (2011) Designing Interfaces, 2nd edikon, O'Reilly 6 Garre), J. J. (2011) The Elements of User Experience, 2nd edikon, New Riders

7 SyWe med principer, riktlinjer, mönster för design För utvecklaren Minimera [den för a) ta fram en design Ökad kvalitét Underlä)a kommunika[on mellan designers och programmerare För användaren Op[mera användarens "upplevelse" Minimera användarens "arbete" Cogni[ve work Förståelse av produktens beteende och struktur Memory work Komma ihåg hur man hanterar produkten och hur den beter sig Visual work Förståelse av gränssni)ets visuella uaormning och "koder" Physical work Användning av inputenheter som mus, tangentbord, etc principles, guidelines, pa8erns Cooper, A., Reimann, R., Cronin, D. (2007) About Face 3: The EssenKals of InteracKon Design, Wiley Publishing, Inc. 7

8 Navigering Navigering i gränssni) Alla handlingar som tar användaren [ll en ny del av gränssni)et eller handlingar som kräver a) man lokaliserar objekt, verktyg eller data Navigering är huvudsakligen "extraarbete" för a) uppnå målet E) bra navigeringssystem visar tydligt vad som erbjuds 8

9 Minimera arbetet för användaren Minimera antalet element i gränssni)et Less is be8er Less is more Reducera ej vad man kan göra eller möjligheterna för användarna a) uppnå målen Dela upp i enkelt gränssni) med det vanligaste och mer avancerat gränssni) för mindre vanliga opera[oner Vanliga opera[oner ska man snabbt komma åt Väl synligt för nybörjare Snabbt och effek[vt för mer vana användare Exempel: Pale)er och kortkommandon i många program Exempel: Sökfunk[onen på discshop.se 9

10 Navigeringshjälp Erbjud vägvisare (signposts) / landmärken Delar av gränssni)et som är stabilt och gör det lä)are a) se var man är och hur man tar sig dit man vill Exempel: logo och globala menyer (global navigering), Undvik exakt samma design på alla sidor Låt olika avdelningar skilja sig åt Hjälper användaren a) orientera sig Exempel: olika avdelningar på svt.se eller bbc.co.uk Erbjud en översikt Olika vyer Exempel: webbplatskarta (site map), smhi.se navigatorruta i Photoshop 10

11 Kapitel 2 Urval av pa8erns från kursboken Exempel på olika "pa8erns" News stream Ordning, sortering Exempel: Nyheter på discshop.se, svt.se, epost- program, Picture manager Små bilder (thumbnails) för översikt, stor bild för valt objekt Exempel: svtplay.se, visa som ikoner i opera[vsystemet, google bildsökning, Canvas + Pale)e Arbetsyta och liten pale) med verktyg Exempel: Photoshop, Word, UXPin, redigera gravyr på vistaprint.se (h)p:// Seyngs Editor Inställningsfönster Exempel: Olika inställningar i opera[vsystemet, inställningar i program (t.ex. utskricsformat), kontoinställningar på olika webbplatser Many Workspaces Olika delar (olika vyer av samma info) visas i olika tabbar eller fönster Exempel: Program för 3D- grafik, Dreamweaver Mul[- Level Help Olika typer av hjälp för a) stödja användare med olika behov (t.ex. beginner, intermediate, expert) Exempel: Hints, "hjälpmanualer", hjälpchat i UXPin Tidwell, J. (2011) Designing Interfaces, 2nd edikon, O'Reilly 11

12 Kapitel 3 Urval av pa8erns från kursboken Exempel på olika "pa8erns" Clear Entry Point Tydlig ingång för nya användare, möjlighet a) komma in snabbare för återkommande användare Exempel: De flesta webbplatser (startsida samt url direkt [ll sidor på webbplatsen), t.ex. lnu.se och lnu.se/utbildning/kurser Exempel där det inte fungerar så bra: Word, Excel, etc. (bockar man i boxen a) inte få dokumentgalleriet, så blir istället ingången e) ny) tomt dokument) Modal Panel E) [llstånd där man måste göra klart (eller avbryta) uppgicen, innan man kan gå vidare Exempel: De flesta inställningsfönster i program och opera[vsystemet Deep- linked state En URL [ll den info man tagit fram kan sparas eller delas Exempel: Vägbeskrivning på Google maps, Lnu Växjö [ll Lnu Kalmar Fat Menus En meny med flera kategorier. Ger en översikt över vad som finns Exempel: smhi.se, elgiganten.se Sitemap Footer En webbplatskarta finns all[d [llgänglig i sidfoten. Jämför "fat menu" fast ej samma sak. Exempel: vistaprint.se, svt.se Sequence Map I en interak[on som är uppdelad i flera steg visar man hur långt man kommit och vad som återstår Exempel: Gå [ll kassan i en webbu[k, t.ex. bokus.com, beställa bilje) på sj.se Tidwell, J. (2011) Designing Interfaces, 2nd edikon, O'Reilly 12

13 Kapitel 4 Urval av pa8erns från kursboken Exempel på olika "pa8erns" Visual Framework Alla sidor ska ha konsekvent layout, färgval, etc. Exempel: nordea.se Undantag:svt.se, bbc.co.uk (se bild 10) Grid of Equals Många liknande enheter placeras i en "tabell" (rutmönster), där varje del följer samma mall Exempel: Presenta[on av möbler på ikea.se (h)p:// Module Tabs Olika typer av info placeras i olika flikar Exempel: Många inställningsfönster, verktygspaneler, etc i opera[vsystem och program, t.ex. PowerPoint och Photoshop Diagonal Balance Lägg "tyngdpunten" längst ner [ll höger, t.ex. knapp för a) gå vidare eller bekräca Exempel: Dialogrutor, t.ex. utskric och spara i olika program, köp- knapp i webbu[ker Responsive Disclosure & Responsive Enabling Visa olika delar av gränssni)et, beroende på de val användaren gör Exempel: Beställningsformulär i en webbshop, klicka i texaält i PowerPoint Tidwell, J. (2011) Designing Interfaces, 2nd edikon, O'Reilly 13