1 / 30

Brukergrensesnitt

Brukergrensesnitt. HiO 22.9.05 faø. Oppstart (i). Hva er brukergrensesnitt? Nevn noen brukergrensesnitt Hva forbinder du med gode/dårlige brukergrensesnitt? Diskusjon. Eksempler:. Godt/dårlig:. Oppstart (ii). Mål med forelesningen. Forstå begrepet ”brukergrensesnitt” – user interface

dena
Download Presentation

Brukergrensesnitt

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Brukergrensesnitt HiO 22.9.05 faø

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

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

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

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

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

  7. Typer Kjennetegn Hva vet dere om brukergrensesnitt for datamaskiner?

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

  9. Historikk – datamaskiner og brukergrensesnitt (ii) • Kommandostyring • Menystyring

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

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

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

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

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

  15. Hvilke krav stiller du til et godt web-grensesnitt?

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

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

  18. ”Usability” (i) • Hva er ”usability”? • ”Learnability” • 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

  19. ”Usability” (ii) • Hvorfor ”usability”? • 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

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

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

  22. Hva tenker dere om gode grensesnitt for funksjonshemmede?

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

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

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

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

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

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

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

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

More Related