Gränssnitt.

En presentation över ämnet: "Gränssnitt."— Presentationens avskrift:

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- och Internet-reklam 16.00 Redovisning av reklamuppgifter 16.15 Avslutning

3 Dagens arbete Ca-tider 08.30 Teori 09.15 Rast
09.25 Grupparbete vid datorerna. 09.55 Rast 10.00 Redovisning 10.15 TV-, radio- och Internet-reklam 10.40 Redovisning av reklamuppgifter 10.45 Avslutning

4 Dagens arbete Ca-tider 13.00 Teori 13.40 Rast
13.45 Grupparbete vid datorerna 14.30 Rast 14.40 Redovisning 15.00 Slut

5 Gränssnitt MMS Människa Maskin System Idag: Datorprogram Internet
Datorprogram - datorer, slutet på 50-talet - PC (Mac), början på 80-talet Visa DOS-miljö (Kör.., cmd) kontra Utforskaren (Den här datorn) Vad gör det enklare med Utforskaren? Grafisk presentation (bilder) Ikoner Motsvarande för Internet: Visa Mosaic ver1 kontra dagens Explorer

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 Inför arbetet med att skapa ett grafiskt gränssnitt
Målgruppen styr hur gränssnittet ska se ut 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) 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)

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 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 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 Färg men tänk på att: Grundregel Tips! 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 Färg, lite extra Spatial effekt, termisk effekt, psykologisk effekt
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 Färg, ännu mer!!!! Grön Harmoni, balans, kreativitet
Gul Glädje, stimulans, optimism Blå Exklusivt, lyxigt, svalt Röd Livslust, provocerande, varmt Brun Ombonat, mysigt, varmt Grå Neutralt, sobert, anonymt Svart Rebelliskt, syndigt Vit Renhet, fräschör

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 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 Testa användbarhet Ett grundläggande mål är att hela tiden att sträva efter användbarhet. Datasystemet(Artefakten) ska stödja uppgiften Användaren ska förstå uppgiften

17 Användbarhetsanalys Lärbarhet Attityd OBS!
Det finns flera olika delvis överlappande definitioner och analysmetoder (som alla liknar varandra 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: Hur snabbt användarna löser de uppgifter som systemet ska stödja (snabbhet). 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: Hur lätt är det för användarna att lära sig systemet vid en första introduktion (förstagångsinlärning). 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 Framtiden Nya annorlunda gränssnitt dataprylar msn-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 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