Brukergrensesnittdesign

Presentasjon om: "Brukergrensesnittdesign"— Utskrift av presentasjonen:

1

2 Brukergrensesnittdesign
En appetittvekker, Ingerid Rødseth, OUT Internett-konsulenter / Institutt for Informasjons- og Mediavitenskap

3 Mål for dagen: Å pirre interessen!
Inspirere: Kanskje tenne designer-ilden! Sette fingeren på noen ting vi er opptatt av innen brukergrensesnittdesign Snakke om forutsetningene våre for å kunne kommunisere med en maskin Ikke gå inn i metoder og teknikker!

4 Prototyping

5 Prototype på online dyrebutikk i Flash

6 SPRÅK

7 ? Tilbake

8 Tilbake Subject: Spørsmål Date sent: Fri, 12 Mar 2004 09:38:02 +0100
From: To: Hei! Hva er riktig å si når man ønsker å bestille 2 pølser, og pølsene skal ligge i hver sin lompe? Jeg bestilte 2 "pølse-med-lompe". Så ble jeg opptatt med noe annet, men da jeg åpnet posen oppdaget jeg det: Jeg hadde riktignok fått 2 pølser, men de lå i samme lompe! Hva burde jeg ha sagt? Jeg skal holde en forelesning klokken i dag, og tenkte å bruke "pølse-med-lompe"-paradokset som isbryter(!). Hadde det vært mulig å fått en uformell uttalselse innen den tid? Det hadde vært helt konge! Hilsen Ingerid Rødseth ______________________________ EDB Telecom Svar: Det er neppe mulig å slå fast at rent språklig er det riktig å si xxx. Spørsmålet har absolutt sine praktiske og pragmatiske sider, f.eks. hva som er vanlig å si i den situasjonen, hva slags kombinasjoner som er mest solgt, hvor godt personene kjenner hverandre osv. I en samtale skal en gjerne være så presis som nødvendig, men heller ikke mer. Når én person bestiller noe, regner kanskje ekspeditøren med at bestillingen gjelder én person, og at det er nok med én lompe. Jeg er ikke helt sikker på om du sa "to ganger pølse med lompe" f.eks.? Det burde holde. Ellers skulle også "to pølser i hver sin lompe" være nokså sikkert!! Med vennlig hilsen Marit Hovdenak rådgiver Norsk språkråd ( Postboks 8107 Dep, OSLO Besøk: C.J. Hambros pl. 5 Telefon: (s.bord), (dir.) Faks: Tilbake

9 BRUKER- GRENSESNITT- SPRÅK

10 OK

11 Modal versus modeless Buttons Behaviour

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

13 HCI

14 HCI-definisjoner Human Computer Interaction (Menneske-maskin-kommunikasjon) Studiet av interaksjonen mellom mennnesket og computeren, inkludert fysiske, psykologiske og teoretiske aspekter rundt denne prosessen. ”En disiplin som er opptatt av -utforming -evaluering og -realisering av interaktive datamaskinsystem som mennesker skal bruke, samt studier av viktige fenomen som omgir dem”. Et menneske som bruker en datamaskin for å få utrettet noe Tilbake

15 Historikk osv. Hvordan bruke disse teoriene i design av brukergrensesnitt? Siden tidlig på 80-tallet Røtter i ergonomi, World War II, MMI Multidisiplinær fagfelt, en ideell designer burde kunne: Kognitiv psykologi Ergonomi Sosiologi Computer science / engineering Det aktuelle forretningsområde Grafisk design Teknisk skrift Filosofi Etc. Ingen generell og enhetlig teori i HCI Et ekteskap mellom kunst og vitenskap: Arkitektur-analogien ”A system should be useful, usable and used” Kognitiv psykologi Computer science Tilbake

16 HCI som disiplin Må baseres på design og evaluering
Må ha som en forutsetning at nøkkelen til brukergrense- snittdesign er å forstå målet og konteksten til systemet. Må ha en kjerne som inkluderer metoder både for analyse og implementasjon Må ha et sett av metoder, teknikker, sett av fakta, teorier osv. Tilbake

17 Hvorfor er HCI viktig? Det er ikke enkelt å lage gode brukergrensesnitt Brukerne skal støttes av systemet i sin problemløsning, ikke plages Systemet skal være -USEFUL (Brukbart, dvs. at man skal kunne utføre de funksjoner som systemet tilbyr) -USABLE (Ha gode bruksegenskaper) og -USED (Gøy å bruke) Systemet skal gi feedback om status Systemet skal utvikles i henhold til regler om ergonomi, standarder osv. Java Look and feel, Windows Interface guidelines. Tilbake

18 MENNESKET -Tar i mot informasjon -Lagrer informasjon
-Tolker informasjon -Utfører automatiske og kontrollerte prosesser Tilbake

19 Mottak av informasjon Nervesystemet = hjernen + ulike sensoriske systemer (Syn, hørsel, lukt, smak, berøring, telepati, annet?) som samler informasjon fra deler i kroppen Neuron: Celle som akkumulerer og overfører elektrisitet Responderer på spesifikke stimuli Kognisjon: Mønster av neural aktivitet Ikke binære verdier som i en computer (0 og 1), men grader av elektrisitet Hjernen koder informasjon uavbrutt, gjenskaper mønstre Tilbake

20 Lagring av informasjon
Ikonisk minne (syn) Ecchoisk minne (hørsel) Sensorisk hukommelse Korttidshukommelse Langtidshukommelse Haptisk minne (berøring) OPPMERKSOMHET ØVING Episodisk minne (sekvensielt) Semantisk minne (strukturert) Tilbake

21 Automatiserte prosesser
Jo mer du øver på en prosess, jo mindre oppmerksomhet krever den Eksempler på automatiske prosesser (som krever lite eller ingen oppmerksomhet) Eksempler på kontrollerte prosesses (krever oppmerksomhet) Tilbake

22 The Stroop Effect, Dunbar & MacCleod (1984):
RØD GRØNN GUL BLÅ GRØNN SORT HVIT RØD BLÅ GUL ROSA BLÅ LILLA GRØNN RØD BLÅ TURKIS RØD BRUN BLÅ GUL Tilbake

23 E K 4 7 Problemløsning Behavioristene: Responser på prøving og feiling
Bokstav på den ene siden, tall på den andre. Hvis et kort har en vokal på den ene siden, har det et partall på den andre siden. Hvilke kort må snus for å verifisere påstanden? E K 4 7 Finne en løsning på et ukjent problem Behavioristene: Responser på prøving og feiling Gestalt: Gjenbruk av kunnskap og innsikt Newall and Simon: ”The problem space”. Mennesket har en begrenset informasjonsprosesseringskapasitet. Means-ends analyse. Finne de riktige operatorer for å nå målet. Analogisk problemløsning Ferdigheter (skill): Automatisk prosess, konseptuell forståelse, bedre gruppering. Tilbake

24 LOOK & FEEL

25 LOOK & FEEL, Windows

26 LOOK & FEEL, java (Hot Metal)

27 LOOK & FEEL, Motif

28 VR/AR

29 Virtual-, Mixed- & Augmented reality.
- Desktop VR. - Fullt omsluttet VR. - Augmented Reality. - Simulatorer.

30 Augmented reality AC.mov MagicBook.mov
VR modeller og konsepter ’legges over’ virkeligheten.

31 The e n d

32 VR teknologier. MULTIMODAL SANSESTIMULANS i IO operasjoner.
Syn. (Å se og å bli sett)... VR teknologier. MULTIMODAL SANSESTIMULANS i IO operasjoner. Hørsel. (Å høre og å snakke)... Følelighet. (Å berøre og å bli berørt)... Bevegelse. (Å posisjonere og å bli posisjonert)... Lukt og smak?

33 Hva er UbiComp? Før... En datamaskin. En bruker. Ett program. Nå...
Hetrogene nett. Portable data. Protokoller. Den nære fremtid Utvidet virkelighet. Allstedsnærværende data. Utvidet interaksjon. Ut av ’glassboksen’...

34 Hva er UbiComp? Å bryte med det tradisjonelle desktop paradigmet, å bringe datakraft til brukeren i miljøet som omgir ham eller henne. - Å gi datagrensesnittet ansvar for å oppdrive og tjene brukeren. - ”Usynlig, allstedsnærværende data som ikke lever på personlige apparat, men som eksisterer i treverket allesteder” (Mark Weiser, 1994)

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

36 I dag: Universal design? Right! HCI -HCI-definisjoner -Historikk osv.
-HCI som disiplin -Hvorfor er HCI viktig i brukergrensesnittdesign? Forutsetningene -Mennesket -Maskinen -Interaksjonen, vindusobjekter -Paradigmene, noen eksempler Design-prosessen -Basis interaksjon -HCI i softwareprosessen -Designregler -Evalueringsteknikker Andre relaterte tema Universal design? Right!

37 Hva er et grafisk brukergrensesnitt?
”A program interface that takes advantage of the computer’s graphics capabilities to make the program easier to use”. ”grafisk brukergrensesnitt: grensesnitt der skjermbildet inneholder vinduer og grafiske symboler. Brukeren kan, i tillegg til å skrive instruksjoner via tastaturet, også gi instruksjoner via en mus som styrer en markør på skjermen. Med markøren kan brukeren flytte eller markere objektene på skjermen, klikke på ikoner, starte opp programmer, osv.” -Dataleksikon “Those aspects of the system that a user comes in contact with“ – Moran 1981

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

39 Interaksjonsstiler – WIMP-grensesnittet, forts.
Tilbake

40 Interaksjonsstiler – 3D-grensesnitt
Tilbake

41 Interaksjonsstiler – 3D-grensesnitt
Tilbake

42 Paradigmene Time sharing Hypertekst
Video display units Muliti-modalitet Programmeringsverktøy Computer-supported Cooperative Work PC’er World Wide Web Vindus-systemer Allstedsnærværende computere (ubiquitous computing) Metaforen Sensor-basert og kontekst-avhengig Direkte manipulering interaksjon Språk versus aksjon Tilbake

43 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) Tilbake

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

45 ”Achieving goals within constraints” -Dix
Basis i interaksjonen Hva er design? Den gyldne designregelen: Forstå mennesker og forstå computere! Design-prosessen, fra krav til implementasjon Brukerfokus Scenarier Navigasjonsdesign Skjermbildedesign/layout Iterasjoner og prototyping Hva? For hvem? Hvorfor? ”Achieving goals within constraints” -Dix Tid osv. Teknologi Penger Tilbake

46 Design-prosessen PROTOTYPING KRAV Evaluering Interview Observasjon
Dokumentasjon Etnografi Hva har vi contra Hva ønsker vi ANALYSE Strukturere krav Gruppere krav Scenarier Task Analysis (oppgave- analyse) DESIGN Dokumenter design Regler Guide lines Designprinsipper Notasjoner (use case, dialog- modeller, hierarki- modeller osv) IMPLEMENTASJON Skrive kode Dokumentere Tilbake

47 Navigasjonsdesign Velge de riktige vindusobjekter Designe skjermbilder
Hierarkimodeller Dialogmodeller Hovedvindu Fjern bruker Bekreft Legg til bruker PC Web Fysisk utstyr Widgets (vindauge-dingsar) Forms, tags, linker, applets, Flash Knapper, lys, display’er osv Skjermbilder (paneler) Sider (rammer) Fysisk layout Andre applikasjoner og operativ system Browseren, linker, web’en Virkeligheten Tilbake

48 HCI i software-prosessen
Software-engineering/livssyklusen Distinkte aktiviteter og konsekvensene for design av interaktive system Usability engineering Lage egne krav som representerer bruksegenskaper Iterativ design og prototyping Simulering/animering av begrenset funksjonalitet Design rationale Dokumentere design-beslutninger Process vs. struktur Tilbake

49 The life cycle for interactive systems
Man kan ikke forutsette en lineær sekvens av aktiviteter som i fossefallsmetoden. Feedback hele veien! Krav-spesifikasjon Arkitektur design Detaljert design Koding og enhets-testing Integrasjon og testing Drift og vedlikehold Tilbake

50 Design-regler Autoritet / Generalitet
Må reglene følges? Kan reglene gjøres gjeldende i flere situasjoner? Prinsipper (Teknologiuavhengige) Lærbarhet, fleksibilitet, robusthet Generalitet ++, Autoritet -- Standarder (Domenespesifikke (Teknologibaserte)) ISO, W3C, IEEE, BSI, ... Generalitet --, Autoritet ++ Retningslinjer (Teknologibaserte) Style guides, Datavisning, sekvens-kontroll, brukerveiledning, dataoverføring, datasikkerhet, dataregistrering Generalitet ++, Autoritet -- Tilbake

51 Evalueringsteknikker
Hva er evaluering? ► Vurdere systemets funksjonalitet ► Vurdere systemets bruksegenskaper ► Identifisere spesielle problemer Mange typer, men viktigst: ► Heuristisk evaluering Nielsens 10 heuristikker: Systemets status må være synlig, må overstemme med den virkelige verden, brukeren må ha kontroll, valgfrihet og tydelige utganger, systemet må være konsistent og standardisert, feil må forhindres osv. ► Cognitive walk-through (kognitiv gjennomgang) For hver aksjon må evaluatoren svare på følgende: 1. Samsvarer effekten av aksjonen med brukerens mål? 2. Ser brukeren at aksjonen er tilgjengelig? 3. Skjønner de at det er den riktige funksjonen? 4. Etter at de har utført funksjonen, forstår brukeren feedback’en? Tilbake

52 Andre relaterte tema D A Gruppevare
forståelse D Gruppevare ► Software som er spesielt designet for å støtte grupper i å jobbe sammen (CSCW) Universell design (tilgjengelighet) ► For mennesker uten en funksjonshemming er teknologien noe som kan gjøre ting enklere. For mennesker med en funksjonshemming er teknologien noe som kan gjøre ting mulig. Ubiquitous computing ► Vår naturlige interaksjon med de fysiske omgivelsene gir tilstrekkelig input til de omliggende tjenestene. -”Kjøleskapet mitt forstår meg ikke lengre!” Augmented reality ► MULTIMODAL SANSESTIMULANS i IO operasjoner. Syn. (Å se og å bli sett)... Hørsel. (Å høre og å snakke)... Følelighet. (Å berøre og å bli berørt)... Bevegelse. (Å posisjonere og å bli posisjonert)... direkte kommunikasjon deixis kontroll og feedback feedthrough A Tilbake

53 Maskinen Fra 1982 Tiden flyr! Teknologi må en holde seg oppdatert i fra dag til dag ”En dag vil du, komfortabelt i ditt hjem, kunne handle og bruke banktjenester elektronisk, du vil kunne lese de siste oppdaterte nyhetene, analysere utviklingen av de aksjene du er interessert i, sende elektronisk post rundt i landet, for deretter å spille bridge med tre fremmede i LA, Chicago og Dallas”. Tilbake

54 Virtual-, Mixed- & Augmented reality.
- Desktop VR. - Fullt omsluttet VR. - Augmented Reality. - Simulatorer.

55

56 Du har vunnet i Lotto. Klikk her for å cashe inn!

57 MENNESKET "Sir, What is the secret of your success?" "Two words"
"And, Sir, what are they?" "Right decisions." "And how do you make right decisions?" "One word." "And, What is that?" "Experience." "And how do you get Experience?" "Wrong decisions."

58 MENNESKET

59 OK

60 Modal versus modeless Buttons Behaviour

61 Hva er et brukergrensesnitt?
Noe som skal brukes til noe av noen? Brukergrensesnitt impliserer en form for interaksjon? Informasjons overføring, fra mennesket til maskinen, og omvendt Det utstyret/formatet som gjør mennesket i stand til å kommunisere med en maskin

62 DESIGN-PROSESSEN

63 DESIGN-PROSESSEN