Gränssnitt

1. Gränssnitt

2. 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 Dagens arbete

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

4. 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

5. 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)

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

7. 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

8. 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)

9. 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

10. 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önAvlägsen Kall Vilsam • Gul Nära Varm Stimulerande • BlåAvlägsen Kall Vilsam • Röd Mycket nära Varm Mycket stimulerande • BrunKlaustrofobisk Neutral Stimulerande

11. Färg, ännu mer!!!! GrönHarmoni, balans, kreativitet GulGlädje, stimulans, optimism BlåExklusivt, lyxigt, svalt RödLivslust, provocerande, varmt BrunOmbonat, mysigt, varmt GråNeutralt, sobert, anonymt SvartRebelliskt, syndigt Vit Renhet, fräschör

12. 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

13. 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 40-60 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

14. Användbarhetsanalys 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.

15. Framtiden • Nya annorlunda gränssnittdataprylarmsn-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

16. 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