Gränssni\sdesign I

Föreläsning 2 1ME403 Design av grafiska gränssni8, 7,5hp Gränssni)sdesign I Rune Körnefors Medieteknik 1 © 2014 Rune Körnefors rune.kornefors@lnu.se Områden •  Kapitel i boken •  ÖvningsuppgiC A •  Arkitektur, struktur •  Principer, guidelines •  Navigering •  Exempel på olika "pa)erns" 2 Bilder från freedigitalphotos.net 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) u`ö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 ÖvningsuppgiW A h)ps://coursepress.lnu.se/kurs/design-­‐av-­‐grafiska-­‐granssni)/ovningsuppgiCer-­‐a/ •  Kort beskrivning av uppgiCen och redovisningsformen 4 Uppdelning i kursboken Kap. 4 Utseende Layout Visuella flödet, i vilken ordning ska informa[onen ges? Vilken rela[on finns mellan elementen? Kap. 3 Navigering Hur vet jag var jag är, hur kommer jag vidare? Val av navigeringsmodell Kap. 2 Konkret Informa(onsarkitektur Vilka objekt behövs för a) användaren ska kunna u`öra sina uppgiCer? Vad ska användaren kunna göra med dem? Vilken organisa[on (kategorisering av objekten) ska gränssni)et ha? Hur? Vad? Abstrakt Tidwell, J. (2011) Designing Interfaces, 2nd ediKon, O'Reilly 5 Jämför med Garre8s modell Kap. 4 Utseende Layout Visuell design Visuella flödet, i vilken ordning ska I vilken ordning ska informa[onen ges? informa[onen ges? o  Dela in i grupper/avdelningar Vilken rela[on finns mellan elementen? Kap. 3 Navigering Hur vet jag var jag är, hur kommer jag vidare? Val av navigeringsmodell Kap. 2 Konkret Informa(onsarkitektur Vilka objekt behövs för a) användaren ska kunna u`öra sina uppgiCer? Vad ska användaren kunna göra med dem? Vilken organisa[on (kategorisering av objekten) ska gränssni)et ha? Hur? 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 Vad? 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 Garre), J. J. (2011) The Elements of User Experience, 2nd ediKon, New Riders Tidwell, J. (2011) Designing Interfaces, 2nd ediKon, O'Reilly 6 SyWe med principer, guidelines, pa8erns 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 u`ormning och "koder" •  Physical work –  Användning av inputenheter som mus, tangentbord, etc Cooper, A., Reimann, R., Cronin, D. (2007) About Face 3: The EssenKals of InteracKon Design, Wiley Publishing, Inc. 7 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) han/hon lokaliserar objekt, verktyg eller data •  Navigering är huvudsakligen "extraarbete" för a) uppnå målet –  E) bra navigeringssystem visar tydligt vad som erbjuds 8 ”Less is be8er” Less is more •  Minimera arbetet för användaren –  Minimera antalet element i gränssni)et –  Mimimera 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 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), www.ica.se •  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 el Kapit
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://www.vistaprint.se/vp/gallery.aspx?pg=96&xnav=TsrImage_02) • 
• 
• 
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 el 3 Kapit
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å hi)a.se, Lnu Växjö – 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, netonnet.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 el Kapit
4 Urval av pa8erns från kursboken • 
• 
Exempel på olika "pa8erns" Visual Framework –  Alla sidor ska ha konsekvent layout, färgval, etc. –  Exempel: posten.se –  Undantag:svt.se, bbc.co.uk (se bild 10) Grid of Equals –  Många liknande enheter placeras i en "tabell", där varje del följer samma mall –  Exempel: Presenta[on av möbler på ikea.se (h)p://www.ikea.com/se/sv/catalog/categories/departments/living_room/10661/) • 
• 
• 
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 tex`ält i PowerPoint Tidwell, J. (2011) Designing Interfaces, 2nd ediKon, O'Reilly 13