Presentasjon lastes. Vennligst vent

Presentasjon lastes. Vennligst vent

INFO161 Brukergrensesnittdesign Interaksjonen og paradigmene, 30.08.2004 Ingerid Rødseth, Institutt for Informasjons- og Mediavitenskap.

Liknende presentasjoner


Presentasjon om: "INFO161 Brukergrensesnittdesign Interaksjonen og paradigmene, 30.08.2004 Ingerid Rødseth, Institutt for Informasjons- og Mediavitenskap."— Utskrift av presentasjonen:

1 INFO161 Brukergrensesnittdesign Interaksjonen og paradigmene, Ingerid Rødseth, Institutt for Informasjons- og Mediavitenskap

2 I dag: Interaksjon: -Interaksjonsmodeller -Ergonomi -Interaksjonstyper -Interakssjonsstiler -WIMP-grensesnittet Paradigmer: -Time sharing -Video display units -Programmeringsverktøy -PC -Metaforer -Direkte manipulering -Hypertekst -Computer-supported cooperative work -WWW -Ubiquitous computing -Sensor-basert og kontekst-sensitiv interaksjon

3 Interaksjonsmodeller: BatchDirekte manipulering • Domene (forretningsområde) • Tasks (oppgaver) • Mål • Oppgave-analyse (task analysis), • System • Bruker

4 4. Executing the action The execution-evaluation cycle Interaksjonsmodell av Donald Norman 1. Establishing a goal 2. Forming the intention 5. Perceiving the systems state 6. Interpreting the systems state 7. Evaluating the systems state with respect to the goal and intention 3. Specifying the action sequence

5 Feil: Glipper: Har spesifisert det riktige målet, men gjør feil (har bestemt seg for den riktige knappen) Kan rettes med endringer i brukergrensesnittet Feil: Har spesifisert det feile målet (for eksempel. Tror at forstørrelsesglass-ikonet betyr finn) Trenger mer opplæring/forståelse (eller systemet er lite intuitivt?)

6 The interaction framework Donald Normans interaksjonsmodell + Systemet O I output input SU core task articulation performance presentation observation

7 ACM SIGCHI Curriculum Development Group Bruker rammeverket til å plassere emner som relaterer seg til HCI. O I output input SU core task articulation performance presentation observation Dialog Skjermbilde- design Ergonomi

8 Ergonomi Fysiske karakteristika i forbindelse med interaksjonen: -Design av vindusobjekter -Layout av skjermbilder -Fysiske omgivelser Eget fagfelt – nær HCI Primærfokus er brukerens ytelse

9 Ergonomi - skjermbildelayout Logisk gruppering av vinduselementer: -Funksjonelt -Sekvensielt -Frekvens Alle nødvendige vindus- kontroller skal være tilgjengelige. Kritisk informasjon bør være lett synlig.

10 Ergonomi – fysiske omgivelser Design for brukere av alle størrelser!! Sittende, stående, bevegelig? Må designes bra, har betydning for hvordan systemet blir akseptert. Hvor stor innflytelse har man som designer egentlig her?

11 Ergonomi – helsemessig Fysisk posisjon Temperatur Belysning Støy Tid

12 Ergonomi – fargebruk Rødt betyr fare, brukes til kritisk informasjon Farger brukes kun som informasjonskilde, ikke bare for gøy Farger skal ikke brukes som eneste informasjonskilde Bruk de vanlige fargekonvensjonene (men dette er ofte kulturbetinget) Bruk så distinkte farger som mulig, men samme styrke

13 Interaksjonsstiler – Kommandolinje Gir instruksjoner direkte til maskinen (kraftige) Ofte fleksible: -ulike parametre -kan brukes på flere objekter samtidig Kryptiske, må kunne kommandoene

14 Interaksjonsstiler – Menyer Alle opsjoner er synlige (belaster menneskets primærminne mindre) Menyvalg må grupperes logisk Velger ofte ved nummer Begrenset WIMP, kan ofte bruke mus

15 Interaksjonsstiler – Naturlig språk Fordeler: -Kjent for brukeren Ulemper: -Språket er tvetydig (ord, setningsoppbygging) -"Jenten slo gutten med krykkene" -Vanskelig å få bra til Løsning: -Forstå et subset -Bruke nøkkelord -Men kan det da kalles naturlig språk?

16 Interaksjonsstiler – Spørsmål/svar og query dialog Spørsmål/svar: -Brukeren ledet gjennom en sekvens av spørsmål. -Wizards, spørreskjema -Enkelt, men lite fleksibelt Query language -SQL, databasespråk: -Krever forståelse av databasens struktur -Syntaks select "column1" [,"column2",etc] from "tablename" [where "condition"]; [] = optional

17 Interaksjonsstiler – Skjemautfylling/regneark Skjema: -Brukeren fyller ut felt Regneark: -Brukeren fyller ut celler i kolonner og rader -Kan legge inn formler.

18 Interaksjonsstiler – WIMP-grensesnittet Windows Icons Menus Pointers Windows Interface Manipulation Program Vanligste interaksjons-stilen i dag WIMP (fra Webopedia) Short for Windows, Icons, Menus and Pointing device, the type of user interface made famous by the Macintosh computer and later imitated by the Windows operating systems. Most people now use the term GUI (graphical user interface) to refer to this type of interface, but it's important to note that when the first GUIs were invented in the 1970s, WIMP was just one possible variation. In those days, it was called a WIMP GUI. user interfaceMacintosh computerWindowsGUI (graphical user interface)

19 Interaksjonsstiler – WIMP-grensesnittet, forts.

20 Interaksjonsstiler – pek-og-klikk Muse-basert el. touchpad Web, hypertekst, multimedia Lite skriving, mest klikking…. På html-sider kan man Legge forms, flash- Filmer, java-script, java-applets osv. for å bedre bruksegenskapene….

21 Interaksjonsstiler – 3D-grensesnitt -Virtuell virkelighet -Vanlige grensesnitt (knapper, vinduer): Gir bedre plass!!

22 Interaksjonsstiler – 3D-grensesnitt

23

24 Elementer i WIMP-grensesnittet - VINDUER Hvert vindu er nærmest en terminal mot en applikasjon. Vinduer inneholder ulike vindusobjekter, og kan lukkes, flyttes og endre størrelse. Brukeren kan ha oppmerksomheten på ulike vinduer. Attributter: Vindus-tittel, knapper for forstørrelse, forminskelse og lukking, scrollbar (rullefelt).

25 Elementer i WIMP-grensesnittet - IKONER Ikoner representerer ofte lukkede vinduer. Representerer også funksjoner. Mange stilarter: Hot Metal (java), MS, Mac Analogier (det finnes tilsvarende i virkeligheten, for eksempel kalkulator), idiomer (uttrykk som ikke skal tas bokstavelig, for eksempel rullefelt (scrollbar)) og metaforer (konsepter som er gjort 2-dimensjonale, f.eks. desktop-metaforen, neste, forrige, post) Standard-størrelser 16*16, 32*32, 48*48

26 Elementer i WIMP-grensesnittet - PEKERE Peke med forskjellig utstyr; mus, touchpad osv. Pekerne kan ha forskjellig modus, for eksempel ventemodus, tegnemodus osv. Hot-spot’en til pekeren må være intuitiv. Icon for drag, copy and drop Icon for drag, move and drop Icon for drag, link and drop Icon for drag to invalid target

27 Elementer i WIMP-grensesnittet - MENYER Viser menyvalgene, slik at en slipper å belaste korttidshukommelsen. Løser plassproblemet med at menyene kan åpnes og lukkes. Menybar alltid synlig Popup-meny synlig ved høye museklikk, shift+F10 eller meny-tast. Pulldown (klikk på) contra fall-down (mouse-over). Kaskade-menyer. Vanskelig å gruppere menyvalg. Hurtigtaster på menyvalg, 2 typer: -aktiv når meny åpen (mnemonics) -aktiv når meny lukket (shortcuts)

28 Elementer i WIMP-grensesnittet - KNAPPER Trykk-knapper (initiere en funksjon) Toggle buttons (2 verdier, vise status) Radio-knapper (gjensidig utelukkende alternativer, kun 1 kan velges) Check-boxes (ja er sjekket, nei er ikke sjekket) Teksten må være positiv.

29 Elementer i WIMP-grensesnittet – VERKTØYLINJE (toolbar) Knapperad, hurtig aksess til felles funksjonalitet Kan ofte skreddersys: -Hvilke toolbars skal være synlig -Hvilke valg skal ligge på hver toolbar Har ofte boblehjelp

30 Interaktivitet Look and Feel (utseende og oppførsel). Ulike, avhengig av leverandør. Riktige sekvenser av aksjoner Semantikk, for eksempel evaluering av input (bokstav/siffer, antall karakterer osv. Hvem har initiativet? Modale vinduer: Brukeren må lukke vinduet før andre aksjoner kan utføres. Bruken av disse bør begrenses til kritisk informasjon.

31 Konteksten til interaktiviteten Sosiale og organisatoriske faktorer som kan ha innflytelse over brukerens interaksjon med systemet -Sitte i landskap -Konkurranse -Motivasjon -Ambisjon -Lojalitet Safekode-eksempelet. Sørg for at systemet matcher brukerens oppgaver. Gi feedback underveis.

32 Opplevelse, engasjement og moro Jobber bedre når man liker det en gjør. Brukergrensesnittet blir en større og større konkurransefaktor. ”Komme i flyt”, konsentrasjonsrus, riktig balansegang mellom nervøsitet og kjedsomhet. The zone of proximal development – læring, i området der en trenger litt veiledning (Vygotsky). Virtuelle smellbonbon’er. Hvilken fordel får brukeren av å bruke systemet? Affordance

33 PARADIGMER

34 Hvorfor studere paradigmene? Vi er opptatt av: -Hvordan kan interaktive system utvikles for å sikre gode bruksegenskaper? -Hvordan kan bruksegenskaper til interaktive systemer demonstreres og måles? Gjennom historien har det kommet fram paradigmer for brukbar design. Kan spørsmålene besvares ved å vise eksempler på systemer med suksess? Vi forutsetter at vi lager mer brukbare systemer nå enn tidligere, og vil lage enda mer brukbare systemer i fremtiden. Ikke alle fremskritt skyldes teknologiske nyvinninger.

35 Time sharing tallet forbedret teknologi Ca 1960: Forskning på hvordan denne nye teknologien skulle brukes (J.C.R. Licklider på U.S. Department of Defense’s ARPA (Advanced Research Projects Agency) ) Det viktigste som kom ut av denne forskningen var timeshare- paradigmet, dvs. at en maskin kunne ha flere brukere samtidig. Dette avløste batch-prosessering vha. for eksempel hullkort.

36 Video display units Bedre output utstyr enn papir!! 1962: Sutherlands sketchpad (en persons bidrag endret hele computer- historien) Visualisere og manipulere forskjellige representasjoner av den samme informasjonen. Kunne lagre representasjoner av det en så på skjermen i datamaskinen. Likedan hente frem og prensentere på skjerm det som lå i datamaskinen. Regnes som det første grafiske brukergrensesnittet

37 Programmeringsverktøy (toolkits) Douglas Engelbert (ca 1950) at Stanford Research Institute: Computerne ikke bare tilgjengelig for de intellektuelle, kan brukes i opplæring. 1963: Augment Mans Intellect (artikkel): Øke menneskets evne til å tilnærme seg komplekse problemstillinger. 1968: Live demo av hans oNLine system (NLS/Augment) Lagde vertøykasse med komponenter som var nødvendig for å bygge komplekse systemer (bootstrapping). Fant opp musen!

38 Personlige computere LOGO enkelt programmeringspråk for barn (grafisk) Seymour Papert (1970-tallet). Kraftigere hvis enkelt å bruke. Alan Kay: Jobbet med å utvikle et kraftig og enkelt visuelt basert programmeringsmiljø (Smalltalk) som passer i små, kraftige personlige computere. (Xerox PARC)

39 Vindus-systemer, WIMP-grensesnittet. Mennesket kan holde på med mer enn 1 ting av gangen. Vinduer brukes til å dele dialoger i logiske deler, endre tema. 1981: Xerox, den første kommersielle maskinen med WIMP interface.

40 Metaforen Kontorpult-metaforen, filmanipulering. Gjør computer-oppgaver lettere å forstå. Word-skrivemaskinmetaforen. Ikke helt lik, space er for eksempel en karakter. Metaforer kan stå i veien for å forstå computeren, for eksempel floppy disker finnes ikke i det virkelige liv. Internasjonalisering – kulturforskjeller VR-brukeren er inne i metaforen!

41 Direkte manipulering Ben Schneidermann (1982): -Alle objekter av interesse synlig -Inkrementell aksjon i brukergrensesnittet med rask feedback på alle aksjoner -Mulig å reversere alle aksjoner -Syntaktiske riktige brukerinitierte aksjoner -Komplekse kommandoer erstattet med direkte manipulering Første kommersielle suksessen Macintosh Personal Computer, Apple 1984 Widgets: Interaksjonsobjekter Dokument-ikonet kan fungere både som input og output. WYSIWYG What you see is what you get

42 Språk versus aksjon Aksjoner snakker ikke alltid høyere enn språk, noen ganger er det nødvendig å bruke språk. Ved bruk av språk må brukeren i mange tilfeller forstå de underliggende strukturer. Kan lage generiske prosedyrer, og prosedyrer som repeterer seg.

43 Hypertekst 1945 – Vannevar Bush memex (Memory Expander) Lagre og hente frem informasjon som var linket sammen etter assosiasjon (bilder). Alle typer media, musikk, bøker, bilder. Ikke-linerær tekst, kan gå videre med det som interesserer der og da tallet: Ted Nelson beskriver hypertekst som en ikke-lineær browse- struktur. Hypermedia (multimedia) brukes for lagring av alle typer ikke-lineære data. Memex (Memory Expander) "A memex is a device in which an individual stores all his books records and communications, and which is mechanised so that it may be consulted with exceeding speed and flexibility. It is an enlarged intimate supplement to his memory".

44 Multi-modalitet Bruke flere kommunikasjonskanaler (input/output-utstyr) samtidig. Bruker syn, hørsel og berøring samtidig når vi bruker computere. I virkeligheten bruker vi flere kanaler, for eksempel snakker og peker. Kroppsspråk.

45 Computer-supported cooperative work Interaksjon mellom mennesker via computeren Typisk mail, nettmøte, chat, deling av dokument-ressurser, askynkron og synkron Gruppevare: CSCW-systemerlaget for å støtte brukere som jobber i grupper.

46 World Wide Web -Brukergrensesnittet til Internett. -Lett å bruke, gir tilgang til informasjon og applikasjoner som ligger på maskiner som er koblet sammen over hele verden. -Skjuler den underliggende kompleksiteten. Felles: -Bruker overføringsprotokollen TCP/IP, og nettverksprotokollen HTTP. -Adresseringssystemet. 1991: Første tekstbaserte browser 1993: Første grafiske browser (Mosaic)

47 Allstedsnærværende computere (ubiquitous computing) Flytte menneske-maskin-kommunikasjon vekk fra pulten, og inn i hverdagslivet vårt. Gjøre datamaskinen usynlig! I bilen, på kjøkkenet, i kroppen Klokker, mobiltelefoner, PDA’er (håndholdte computere)

48 Sensor-basert og kontekst-avhengig interaksjon Ofte er ikke personen klar over at interaksjonen finner sted. Bevegelses-sensorer, videokameraer, press-matter (danse-matter), logging av aksjoner (for eksempel hvilke web-sider en har besøkt, hvilke bøker en har kjøpt osv) Konsekvenser: Lys slår seg på, alarmer går, dører åpnes, kontekstbasert reklame osv. Vanskelig å lykkes, må generalisere for eksempel skiller ikke en døråpner-sensor mellom folk som går forbi og folk som skal inn. Bevegelses-sensorer skiller ikke mellom innbrukkstyver og eieren som har glemt koden til alarmen.


Laste ned ppt "INFO161 Brukergrensesnittdesign Interaksjonen og paradigmene, 30.08.2004 Ingerid Rødseth, Institutt for Informasjons- og Mediavitenskap."

Liknende presentasjoner


Annonser fra Google