Presentation laddar. Vänta.

Presentation laddar. Vänta.

1 Gränssnitt. 2 Dagens arbete Ca-tider • 13.45 Teori • 14.30 Rast • 14.40 Grupparbete vid datorerna. • 15.10 Rast • 15.15 Redovisning • 15.30 TV-, radio-

Liknande presentationer


En presentation över ämnet: "1 Gränssnitt. 2 Dagens arbete Ca-tider • 13.45 Teori • 14.30 Rast • 14.40 Grupparbete vid datorerna. • 15.10 Rast • 15.15 Redovisning • 15.30 TV-, radio-"— Presentationens avskrift:

1 1 Gränssnitt

2 2 Dagens arbete Ca-tider • Teori • Rast • Grupparbete vid datorerna. • Rast • Redovisning • TV-, radio- och Internet-reklam • Redovisning av reklamuppgifter • Avslutning

3 3 Dagens arbete Ca-tider • Teori • Rast • Grupparbete vid datorerna. • Rast • Redovisning • TV-, radio- och Internet-reklam • Redovisning av reklamuppgifter • Avslutning

4 4 Dagens arbete Ca-tider • Teori • Rast • Grupparbete vid datorerna • Rast • Redovisning • Slut

5 5 Gränssnitt • MMS Människa Maskin System Idag: • Datorprogram • Internet

6 6 Grafiskt gränssnitt • Förenkla användarens kommunikation med systemet, dvs ”kommunikations- länken” mellan människa och maskin • Grafiskt gränssnitt för Internet, relativt nytt kunskapsområde, ca 10 år

7 7 Inför arbetet med att skapa ett grafiskt gränssnitt • Målgruppen styr hur gränssnittet ska se ut Kriterier • Lättlärt (ska uppmuntra användning) • Användbart (enkelt att hitta allt) • Tillfredställande (tiden att lära sig ska vara kort, stöd i form av hjälpmanualer) Ledord • Komplett (alla nödvändiga funktioner ska finnas med) • Enhetligt (kommandon och ikoner ska genomgående ha samma betydelse) • Robust (gör man otillåtna saker ska fel och/eller hjälp- meddelanden visas)

8 8 Internet Grafiskt användargränssnitt [GUI( Graphical User Interface )] och användarvänlighet • Stöd • Menyer • Hypertextlänkar • Färger • Felmeddelanden • Ikoner • Bilder

9 9 Varför grafisk design? Den grafiska/visuella utformningen av gränssnittet kan: • Öka användbarheten • Öka snabbheten och effektiviteten • Förebygga problem i interaktionen och stödja en god felhantering • Kan göra gränssnittet visuellt mer tilltalande

10 10 Layout (rutnät och gruppering) God layout kan användas för att: • Skapa struktur (vägleda användaren) • Skapa balans (god komposition) • Markera betydelse Grundregel • Komposition och gruppering • - Använd rutnät (för god komposition) • - Gruppera gränssnittets delar enligt en naturlig "semantisk" modell Tips! • Rutnätet bör vara "osynligt" (utnyttja harmoniska proportioner) • Undvik "plottrighet" (strukturera och gruppera) • På ett "uppslag" kan man ha 6 till 15 informationsgrupper (välgrupperade och med likartad struktur) • I första hand gruppering m h a mellanrum (och rutnät) • Utnyttja först därefter (vid behov) - Text/rubriker (se nedan om Text) - linjer (varsamt) - ramar (varsamt) - färg (försiktigt)

11 11 Färg Färger kan användas för att: • Gruppera information • Skapa/visa på associationer • Indikera betydelse, viktighet och struktur • Göra gränssnitt mer visuellt tilltalande (roligare och trevligare) men tänk på att: • många färger medför ofta "visuell förvirring" och "visuell trötthet" • ca 8% färgblinda (i olika grad) • färgpsykologi (delvis kulturellt betingat) Grundregel • Var sparsam med färger Tips! • Designa först monokromt - addera sedan färg försiktigt/sparsamt - Max 5 betydelsebärande färger - Diskreta bakgrundsfärger - Var konsekvent! • Gör färgkodningen redundant (form-färg, text-färg) • Var försiktig med starka färger och starka kontraster • Se upp med: - Blått på svart (mörkt) - Kombinationen blått och rött

12 12 Färg, lite extra Generellt så kräver färgerna rött, orange, gult och grönt mindre mer visuell fokusering än extremerna blått och rött. Blått och rött ligger på var sin ände av färgspektrat. Kombinerar man dessa två färger försvåras ögats fokusering. Ögat kan inte fokusera på rött och blått samtidigt. Spatial effekt, termisk effekt, psykologisk effekt Man kan använda färgers spatiella (rumsliga) effekt för att framhäva eller minska informationen som visas på skärmen. Mörka färger försvinner/rör sig bort från observatören. Ljusa färger närmar sig observatören. Blå färger rör sig bort från observatören. Spatial effekt Termisk effekt Psykologisk effekt • Grön Avlägsen Kall Vilsam • Gul Nära Varm Stimulerande • Blå Avlägsen Kall Vilsam • Röd Mycket nära Varm Mycket stimulerande • Brun Klaustrofobisk Neutral Stimulerande

13 13 Färg, ännu mer!!!! Grön Grön Harmoni, balans, kreativitet Gul Glädje, stimulans, optimism Blå Blå Exklusivt, lyxigt, svalt Röd Röd Livslust, provocerande, varmt Brun Brun Ombonat, mysigt, varmt Grå Grå Neutralt, sobert, anonymt Svart Svart Rebelliskt, syndigt Vit Vit Renhet, fräschör

14 14 Ikoner Ikoner kan användas för att: • Öka begripligheten • Underlätta hågkomst • Spara utrymme • Göra gränssnittet mer visuellt tilltalande • men ikoner kan vara svåra att förstå och besvärliga att designa (måste ha rätt abstraktionsnivå) Grundregel • Ikoner bör vara enkla och bygga på substantiv Synvinkel som framhäver karaktärerna • Att effektivt karakterisera ett föremål på en ikon beror en hel del på att hitta den synvinkel som tar bort oviktiga detaljer och framhäver föremålets karaktärer. Man överdriver eller förstärker de karakteristiska egenskaperna hos föremålet. T ex vingar på flygplan, taxiskylten på biltaket. Tips! • Gör ikoner enhetliga (storlek, form, färg) • Testa om ikonerna är lätta att förstå • Kombinera gärna ikon + text

15 15 Text Utformning och layout av text är viktigt eftersom det ofta utgör en av huvudbeståndsdelarna i gränssnitt - man kan inte undvara texten. Grundregel • Enhetlighet (sparsam med olika typsnitt, storlekar, stilar, etc.) Tips! • Text behöver luft • Utnyttja informativa rubriker, underrubriker, etc - Viktigt för gruppering, struktur och översikt - Underlättar bearbetning (tar in texten i två steg) • Högst två typsnitt i en produkt (ev undantag rubrik) • Högst fyra storlekar på stilen (huvudrubrik, underrubriker, brödtext, fotnoter) • Max tecken per rad • Justera texten • Undvik versaler • Serifer på papper, sans-serifer på skärm (dock, vid stora mängder löpande text som ska läsas på skärm rekommenderas font med serifer) • Försiktigt med kursiv, fet, etc - använd en metod för att betona • Bra kontrast

16 16 Testa användbarhet Ett grundläggande mål är att hela tiden att sträva efter användbarhet. 1. Datasystemet(Artefakten) ska stödja uppgiften 2. Användaren ska förstå uppgiften

17 17 Användbarhetsanalys Det finns flera olika delvis överlappande definitioner och analysmetoder (som alla liknarvarandra mer eller mindre). En vanlig modell för analys av användbarhet är REALmodellen. Relevans Hur systemet hjälper användarna med det de behöver ha hjälp med. (Hur bra systemet stöder användarnas behov). Att systemets tjänster, funktioner, information, etc. är relevanta för de uppgifter användarna ska lösa - och att det inte finns en massa onödiga (förvirrande) funktioner och information. Effektivitet Kan delas upp i två olika effektivitetsmått: 1.Hur snabbt användarna löser de uppgifter som systemet ska stödja (snabbhet). 2.Hur ofta användarna gör fel (felfrekvens). Man kan här även diskutera felhantering - hur smidigt kan användarna korrigera både egna och systemets fel. Lärbarhet Kan delas upp i två olika lärbarhetsmått: 1.Hur lätt är det för användarna att lära sig systemet vid en första introduktion (förstagångsinlärning). 2.Hur bra minns användarna från gång till gång (hågkomst över tid). Attityd Användarnas (subjektiva) inställning till systemet. OBS! REAL-modellen är relativ med avseende på olika användare och användargrupper.

18 18 Framtiden • Nya annorlunda gränssnitt dataprylar msn-dating dataprylarmsn-dating dataprylarmsn-dating •AI (Artificiell Intelligens) •expertsystem (stora databaser med specifik kunskap) •genetiska algoritmer (simulerad evolution av t ex matematiska formler för att passa ett visst ändamål) Gränssnitt som anpassar sig efter användaren •neuronnät (efterapning av hjärnans organisation i självständiga och parallellt arbetande nervceller) Gränssnitt uppbyggda som hjärnan

19 19 Grupparbete • Lös uppgifter • Gör ”Tänka högt”-protokoll • Fyll i REAL-modellen • Vad är bra relativt dåligt med webbplatserna • Vad ska man göra för att det ska bli bättre • Redovisning


Ladda ner ppt "1 Gränssnitt. 2 Dagens arbete Ca-tider • 13.45 Teori • 14.30 Rast • 14.40 Grupparbete vid datorerna. • 15.10 Rast • 15.15 Redovisning • 15.30 TV-, radio-"

Liknande presentationer


Google-annonser