Gränssni\sdesign I
Transcription
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 [email protected] 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