Gränssnitt

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

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

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

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

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

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)

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

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

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)

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

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

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

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

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

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

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.

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

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