Brukergrensesnitt HiO 22.9.05 faø

Oppstart (i) Hva er brukergrensesnitt? Nevn noen brukergrensesnitt Hva forbinder du med gode/dårlige brukergrensesnitt? Diskusjon

Oppstart (ii) Eksempler: Godt/dårlig:

Mål med forelesningen Forstå begrepet ”brukergrensesnitt” – user interface Kjenne til historikk om brukergrensesnitt Kriterier for godt brukergrensesnitt – debatter omkring brukergrensesnitt Kjenne begrepet ”universell utforming” Kjennskap til noen nettesteder som omhandler brukergrensesnitt Gjøre egne forsøk og refleksjoner omkring hva som kjennetegner et godt brukergrensesnitt

Disposisjon for dagen Noen generelle refleksjoner omkring brukergrensesnitt – menneskers møte med teknologien Historikk om ulike brukergrensesnitt Krav til godt brukergrensesnitt Om universell utforming Egne forsøk/refleksjoner Diskusjoner

Generelle refleksjoner om brukergrensesnitt Hvem programmerer VCR, klokker, TV, mobil? Hva kjennetegner gode brukergrensesnitt? Hvordan klarer vi overgangen til nye apparater? Symbolbehandlingskompetanse

Hva vet dere om brukergrensesnitt for datamaskiner? Typer Kjennetegn

Historikk – datamaskiner og brukergrensesnitt (i) ENIAC Hullkort Papir bånd ”Punche-maskin”

Historikk – datamaskiner og brukergrensesnitt (ii) Kommandostyring Menystyring

Historikk – datamaskiner og brukergrensesnitt (iii) Det grafiske brukergrensesnitt (GUI) Vårt norske bidrag med objektorientering SIMULA Hva er objekter?

Historikk – datamaskiner og brukergrensesnitt (iv) Windows/MAC/Xerox Parc Historien om GUI http://toastytech.com/guis/guitimeline.html Hypertext som grunnlag for WWW og GUI http://odur.let.rug.nl/~usa/ SAA – Systems Application Architecture CUA – common user access (IBM 1989) Se f.eks: http://www.findarticles.com/p/articles/mi_m0ISJ/is_n3_v31/ai_12547724 http://www.research.ibm.com/journal/sj/313/ibmsj3103C.pdf

Krav til godt brukergrensesnitt (i) CUA – krav Brukeren skal bygge på en hensiktsmessig begrepsmodell for programmets virkemåte under kjøring av programmet Brukeren skal ha kontroll over dialogen Bruksområder Spill, læremidler, aviser, applikasjoner Metaforer Hva er en metafor? Eksempler på metaforer Desktop, hule, eventyr, markedsplass Moderne spill-metaforer???

Krav til godt brukergrensesnitt (ii) Brukerkontroll i forhold til sekvensielle og hierarkiske programmer Tilgivende grensesnitt (reversering, advarsler) Bruk av indikatorer Form på musepeker, lyd, rammer, markeringer, inverteringer

Krav til godt brukergrensesnitt (iii) Elementer i brukergrensesnitt Popup-vinduer, dialogbokser, modale/ikke-modale dialogbokser, meldingsvinduer, kontrollere (radioknapper, valgruter, blafelt, innskrivningsfelt, listebokser, combobokser, knapper etc) Hovedpoeng: hvordan navigerer du i et program?

Hvilke krav stiller du til et godt web-grensesnitt?

Brukergrensesnitt på WEB (Jakob Nielsen – www.useit.com) Grunnleggende designprinsipper Nedlastingshastighet Søkemekanismer Struktur og oversikt Sitemaps se for eksempel http://www.forbrukerradet.no/ Ikke scrolling på navigasjonssider – se helheten Hva med animasjon og rullefelt? ”Repurposing” – webifisering av gammelt materiale (Hvordan fylles shoppingkurven på en handelsside?) (Hvordan finne flytider uten å bestille?) (Hvordan finne egentlige priser?)

Teknikker for å forenkle og tydeliggjøre web-steder Aggregering En enhet kan representere en samling av mindre enheter Summering Å representere store datamengder ved hjelp av mindre (sammendrag, oversikter) Filtrering Få bort ting som brukeren ikke er opptatt av Utelating Bruk eksempler

”Usability” (i) Hva er ”usability”? ”Learnability” ”Efficiency” Hvor lett er det å få gjort det som skal gjøres – første gang ”Efficiency” Når brukeren har lært utformingen – hvor raskt får en gjort det en skal? ”Memorability” Når brukeren kommer tilbake til stedet etter en tid – hvor lett er det å etablere gode ferdigheter? ”Errors” Hvor mange feil gjør brukeren? Hvor alvorlige er feilene? Hvordan rette opp feilene? ”Satisfaction” Hvor behagelig/tilfredsstillende er det å bruke stedet Egen merknad: Nye tjenester Eksempel: Amazon.coms anbefalinger

”Usability” (ii) Hvorfor ”usability”? Hvordan Når Hvis et web-sted er vanskelig å bruke, så forlater brukeren det (normalt – men det er jo ikke alltid mulig) Hvordan Skaff representative testbrukere La testbrukerne foreta vanlige oppgaver Observer hva brukerne gjør – hvor lykkes de, hvor gjør de feil, hvor har de vanskeligheter Når På alle trinn i designprosessen – test gammelt design, test konkurrenters design, foreta feltstudier (i brukernes normale omgivelser), bruke prototyping

Har du eksempler på gode/dårlige web-steder?

Relevante nettsteder Den amerikanske kreftforeningen www.usability.gov Jakob Nielsen's Website www.useit.com Clay Shirky’s Writings About the Internet Economics & Culture, Media & Community, Open Source www.shirky.com

Hva tenker dere om gode grensesnitt for funksjonshemmede?

Universell tilgjengelighet (i) Se Si @ http://www.shdir.no/index.db2?id=4242 Hva er problemet? Tilgjengelighet til Internett betyr at innholdet på en nettside kan leses av alle, uavhengig hva slags utstyr som brukes, eller hvilke fysiske forutsetninger brukeren har. Ofte betyr det at alt essensielt innhold må foreligge som tekst, som igjen kan konverteres til lyd eller for eksempel blindeskrift.

Universell tilgjengelighet (ii) Blinde trenger spesialprogrammer som leser opp innholdet på en nettside (og andre dokumenter) med syntetisk tale. De bruker også tastaturet i stedet for mus for å navigere på nettsiden. På denne måten leser de nettet på en lineær måte, og ikke, slik mange av oss, fra omtrent midten av en side, og rundt etter hvordan siden er lagt opp. Spesialprogrammene kan selvfølgelig bare lese opp det som er tekst. Derfor må alt som ikke er tekst, alle viktige, meningsbærende elementer, tilknyttes et tekstlig alternativ. Svaksynte kan se konturer og kontraster og kan lese tekst hvis den er forstørret. Dette betyr at grafiske representasjoner av tekst bør unngås, og at designere ikke bør hindre brukeren i å kunne forstørre teksten. Døve er avhengige av at teksting er synkronisert med lydsporet. Lyd og multimedia blir viktigere ettersom flere får raskere datamaskiner og raskere internett-tilkopling. Nyhetssendinger og undervisning kan tekstes som vanlig TV-teksting. Bevegelseshemmede er avhengige av å kunne bruke andre redskaper enn mus for å bruke Internett. De får problemer med mange av de store portalene (SOL, Startsiden) og avisene (Aftenposten, VG, Dagbladet) fordi de har flere hundre linker på forsiden, som man må tab'e seg gjennom (med tabulatortasten) for å komme dit man vil. Lesevansker gjør informasjon generelt (ikke bare på Internett) til et problem, men på Internett har man muligheten til å få lesestøtte gjennom syntetisk tale (opplesning av innholdet mens man leser), samt at bilder og video kan gjøre det lettere å forstå navigasjon og innhold. Alder kan som nevnt gi vansker i form av kombinasjoner av alt det ovenstående. Redusert bevegelighet/koordinasjon, svaksynthet, svakere hørsel…? Forskjellige typer nettlesere. Ikke bare pc'er koples til Internett: Mobiltelefon og PDA: Liten skjerm, problemer med grafikk, langsom nett-tilkopling Talende Internett f.eks. i bilen: Grafikk må leses via alternativ tekst. Alternative innstillinger: Mange brukere foretrekker egne innstillinger for farger og skrifter.

Universell tilgjengelighet (iii) Hvorfor - Hvorfor design for tilgjengelighet? Det er politiske, markedsmessige og tekniske grunner for at det er lurt å satse på tilgjengelige design. Politikk Det er to aktuelle politiske satsninger i Norge som er speiselt relevante: Kvalitetskriterier for offentlige webtjenester som Statskonsult lanserte i februar 2001. Et av kvalitetskriteriene er teknisk tilgjengelighet tilsvarende den vi snakker om her. eNorge-planen som ble lansert første gang i juni 2000 har spesifisert følgende målsetting: "Skal vi nå målet om et informasjons- og kunnskapssamfunn for alle må tre grunnleggende forutsetninger ivaretas: Tilgang - kompetanse - tillit. Derfor vil Regjeringen bidra slik at alle får tilgang til den nye teknologien." Marked Ta eksemplet eldre: Dette er en voksende gruppe "surfere" som kan ha ulike problemer på nettet, f.eks. litt dårligere syn. De er også en kjøpesterk gruppe, som utgjør et stort potensial for din e-handelsbedrift, bare du sørger for at teksten kan forstørres og at navigasjonen er god. Blant annet. Teknisk På den tekniske siden henger spørsmålet om tilgjengelighet sammen med spørsmålet om hva WWW er? Les mer under Tekniske begrunnelser.

Universell tilgjengelighet (iv) Nærmere fra W3C om universell tilgjengelighet http://www.w3.org/TR/WAI-WEBCONTENT/full-checklist.html

Universell tilgjengelighet (v) Priority 1 checkpoints In General (Priority 1) 1.1 Provide a text equivalent for every non-text element (e.g., via "alt", "longdesc", or in element content). This includes: images, graphical representations of text (including symbols), image map regions, animations (e.g., animated GIFs), applets and programmatic objects, ascii art, frames, scripts, images used as list bullets, spacers, graphical buttons, sounds (played with or without user interaction), stand-alone audio files, audio tracks of video, and video.       2.1 Ensure that all information conveyed with color is also available without color, for example from context or markup.       4.1 Clearly identify changes in the natural language of a document's text and any text equivalents (e.g., captions).

Egne erfaringer/refleksjoner Finner ikke flytider Ikke fullførte banktransaksjoner etter redesign Avbestilling i bokklubb Websteder som leder deg dit designeren vil – ikke mot de behov du selv har Om saksbehandlingssystemer og installering av ny motor i gamle systemer

Oppgave Frist 1 uke Lever ca 1 s som inneholder følgende: Definisjon av brukergrensesnitt (1/3 s) Finn 3-5 web-referanser til brukergrensesnitt (1/3 s) Dine egne refleksjoner om brukergrensesnitt (1/3 s) Sendes fao@mod.dep.no med kopi til fre-arn@online.no

Oppgaver for egne søk/refleksjoner Egne refleksjoner om brukergrensesnitt på mobil, VCR, radioer, klokker, TV, vaskemaskin, bil etc Sjekk noen kjente aviser – si noe om tilgang Sjekk SAS/Braathens og forsøk å finne flytider Følg noen av linkene i denne forelesningen Forsøk å formulere en 10-punktsliste om egne erfaringer med søking på nett. Hva er dine viktigste krav? Hva er nå din oppfatning av begrepet brukergrensesnitt?