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

Storlek: px

Starta visningen från sidan:

Download "Föreläsning 4 1ME403 Design av grafiska gränssni7, 7,5hp. Gränssni)sdesign III. Rune Körnefors. Medieteknik Rune Körnefors"

Joakim Samuelsson
för 7 år sedan
Visningar:

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

2 Områden Kapitel i boken ÖvningsuppgiC C Egenskaper för objekt i visuella gränssni) Exempel på olika "pa)erns" 2 Bilder från freedigitalphotos.net

3 Li7eratur Tidwell, J. (2011). Designing Interfaces, 2nd edikon, O Reilly kap. 5. List of Things Användningsområden för listor, vad användare kan tänkas vilja göra med en lista. Organisering (informavonsarkitektur) för listor, egenskaper för listor, komplexitet (struktur för olika poster i listan). kap. 7. Showing Complex Data: Trees, Charts, and Other InformaKon Graphics InformaVon Graphics Visuell kommunikavon och interakvon. Inte bara stavsk presentavon, utan användaren deltar i processen a) ta fram presentavonen (visa/dölja, vrida och vända, zooma, panorera, urval, etc.) Hur presentera mönster eller avvikelser? (färg, storlek, form,...) Hur är data organiserat? Hur relaterar olika delar Vll varandra? Vad kan man göra (arrangera om, presentera på olika sä), urval, etc.)? 3

4 ÖvningsuppgiT C h)ps://coursepress.lnu.se/kurs/design- av- grafiska- granssni)/ovningsuppgicer- c/ Kort beskrivning av uppgicen och redovisningsformen 4

5 Egenskaper för objekt i visuella gränssni7 Egenskaper används för a) åtskilja olika objekt. Objekt med samma egenskaper tolkas a) höra ihop. Egenskaper: Storlek (Size) IndikaVon av ordning och kvanvtet. Färg (Hue) Skillnader uppfa)as snabbt Olika färger har olika innebörd (t.ex. röd=stopp/negavvt, grön=gå/posivv, blå=köp/bekräca). Form (Shape) Ej lika framträdande som storlek och färg. Kan indikera vika objekt som man kan göra något med och hur man ska agera. Ljusstyrka, kontrast (Value) Ordning, värdering. Riktning (OrientaVon) Upp, ner, åt sidan. IndikaVon av förändring. Kan också tolkas som posivvt eller negavvt. Sammansä)ning (Texture) Mönster kan vara alternavv Vll färg. Kräver lite större yta för a) synas. Kan också indikera hur man kan interagera med objektet. Placering (PosiVon) Förhållande Vll andra objekt. Kan indikera ordning och kvanivtet. Cooper, A., Reimann, R., Cronin, D. (2007) About Face 3: The EssenKals of InteracKon Design, Wiley Publishing, Inc. 5

6 Experiment E) antal symboler visas under fem sekunder. Frågor ecer visningen: Hur många olika typer av symboler? Vilken symbol förekommer det flest av? Vilken symbol förekommer det minst av? 6

7 7 Experiment

8 Experiment Hur många olika typer av symboler? Vilken symbol förekommer det flest av? Vilken symbol förekommer det minst av? 8

9 9 Experiment

10 Experiment Hur många olika typer av symboler? Vilken symbol förekommer det flest av? Vilken symbol förekommer det minst av? 10

11 11 Experiment

12 Experiment Hur många olika typer av symboler? Vilken symbol förekommer det flest av? Vilken symbol förekommer det minst av? 12

13 Manipulering av data i grafisk informakon Exempel på vad man kan vilja göra: Urval (filtrering, utökning, valda objekt) Ordning Skala PresentaVonsform SVl 13

14 Kapitel 5 Exempel på olika "pa7erns" Two- Panel Selector Två paneler. Lista i den ena, expanderingar i den andra. Exempel: Fönster med mappar och dokument i Mac OS One- Window Drilldown Gör e) val i en lista. Listan ersä)s med det man valde. Exempel: Sökresultat, kurslistan på lnu.se List Inlay Listan expanderas och det man valde visas som en del i listan. Exempel: Kalendariet på lnu.se, bildsökning på Google Thumbnail Grid Listan visas i e) rutmönster (tabell). Jämför med Grid of Equals (kap. 4) Exempel: Produkter på elgiganten.se Carousel Listan visas som (ibland överlappande) bilder, där man bläddrar framåt och bakåt. Exempel: Fönster i Mac OS, info om vad andra kunder köpt på amazon.com, senaste program på svtplay.se Row Striping Varannan rad får en annan bakgrundsfärg. PaginaVon 14 En lång lista delas upp i flera sidor och man bläddrar mellan sidorna. Exempel: Sökresultat på google.se, produktlista på discshop.se Jump to Item Snabbt komma Vll den del som börjar på de tecken som användaren skriver. Exempel: Välja land i lista i registrering på adobe.se, jmf med välja ort på klart.se (autocomplevon, kap. 8) Alphabet Scroller Knappar med bokstäver, för a) hoppa Vll en specifik del i en alfabevskt ordnad lista. Exempel: Produktlista på discshop.se Cascading List Kaskad (eller hierarki) av listor (jämför undermenyer i menyer). Tree Table Listan expanderas med underlistor som är lite inskjutna (jämför Cascading list och undermenyer). New- Item Row Första eller sista raden i listan har fält för a) lägga in ny data.

15 Kapitel 7 Exempel på olika "pa7erns" Overview Plus detail Översikt i liten ruta. Detaljerad inzoomning i annan ruta. DataVps En ruta med info om den punkt man pekar på visas. Exempel: Karta med objekt på hemnet.se Data Spotlight Framhäv den del av datan som användaren pekar på. Exempel: Diagram i Excel Dynamic Queries Möjligt a) filtrera resultat av en utsökning. Exempel: Sökning på hemnet.se Data Brushing Val görs i en ruta. Urvalet visas i en annan ruta. Local Zooming All data visas kompakt. Då markören förs över en del, förstoras den delen. (Jämför List Inlay) Sortable Table Data visas i en tabell. Raderna kan sorteras på innehållet i en eller flera kolumner. Radial Table Tabell eller lista visas som en cirkel. MulV- Y Graph Flera grafer visas i samma diagram. Exempel: Väderdiagram på smhi.se Small MulVples Data presenteras som en sekvens av bilder. Exempel: Väderkartor på klart.se Treemap Data visas i olika rutor. RelaVoner mellan dem markeras med olika storlek och färger. 15

Relevanta dokument

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

Föreläsning 2 1ME403 Design av grafiska gränssni8, 7,5hp Gränssni)sdesign I Rune Körnefors Medieteknik 1 2015 Rune Körnefors rune.kornefors@lnu.se Områden Kapitel i boken ÖvningsuppgiC A Arkitektur, struktur