Presentasjon lastes. Vennligst vent

Presentasjon lastes. Vennligst vent

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

Liknende presentasjoner


Presentasjon om: "Brukergrensesnittdesign En appetittvekker, 25.11.2004 Ingerid Rødseth, OUT Internett-konsulenter / Institutt for Informasjons- og Mediavitenskap."— 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 Subject: Spørsmål Date sent: Fri, 12 Mar :38: 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 ______________________________ 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 (http://www.sprakrad.no)http://www.sprakrad.no Postboks 8107 Dep, 0032 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!! wwws.sun.com/software/looking_glass/details.html

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. •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” Hvordan bruke disse teoriene i design av brukergrensesnitt? 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 Tilbake -Tar i mot informasjon -Lagrer informasjon -Tolker informasjon -Utfører automatiske og kontrollerte prosesser

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 Sensorisk hukommelse Korttidshukommelse Langtidshukommelse Lagring av informasjon Ikonisk minne (syn) Ecchoisk minne (hørsel) Haptisk minne (berøring) Episodisk minne (sekvensielt) Semantisk minne (strukturert) Tilbake OPPMERKSOMHET ØVING

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ØDBLÅGUL ROSA BLÅLILLA GRØNNRØDBLÅ TURKISRØDBRUN BLÅGUL Tilbake

23 Problemløsning EK47 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? • 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. -Fullt omsluttet VR. -Desktop VR. -Simulatorer. -Augmented Reality.

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)... Lukt og smak? Hørsel. (Å høre og å snakke)... Følelighet. (Å berøre og å bli berørt)... Bevegelse. (Å posisjonere og å bli posisjonert)...

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

36 I dag: 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. user interfaceMacintosh computerWindowsGUI (graphical user interface) Tilbake

39 Interaksjonsstiler – WIMP-grensesnittet, forts. Tilbake

40 Interaksjonsstiler – 3D-grensesnitt Tilbake

41 Interaksjonsstiler – 3D-grensesnitt Tilbake

42 Paradigmene Time sharingHypertekst Video display unitsMuliti-modalitet ProgrammeringsverktøyComputer-supported Cooperative Work PC’erWorld Wide Web Vindus-systemer Allstedsnærværende computere (ubiquitous computing) Metaforen Sensor-basert og kontekst-avhengig Direkte manipuleringinteraksjon 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 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 Tilbake Hva? For hvem? Hvorfor? Penger Teknologi Tid osv. ”Achieving goals within constraints” -Dix

46 Design-prosessen KRAV 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 PROTOTYPING Evaluering Tilbake

47 Navigasjonsdesign Velge de riktige vindusobjekter Designe skjermbilder Hierarkimodeller Dialogmodeller Tilbake HovedvinduFjern brukerBekreft Legg til bruker PCWebFysisk 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

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

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 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)... Tilbake kontroll og feedback DD A kommunikasjon forståelse direkte deixis feedthrough

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. -Fullt omsluttet VR. -Desktop VR. -Simulatorer. -Augmented Reality.

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?" "Two words" "And, Sir, what are they?" "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


Laste ned ppt "Brukergrensesnittdesign En appetittvekker, 25.11.2004 Ingerid Rødseth, OUT Internett-konsulenter / Institutt for Informasjons- og Mediavitenskap."

Liknende presentasjoner


Annonser fra Google