Grænseflader. Visuel gestalt Tegntyper Opbygning af grænseflader Aktiviteter

Transkript

1 Grænseflader Visuel gestalt Tegntyper Opbygning af grænseflader Aktiviteter

2 Visuel gestalt Lighed Nærhed Sluttethed Rækkefølge

3 Eksempel 1 Virker sammen Virker modsat

4 Informationsstruktur Kendt Nyt Abstrakt Perifert Centralt Perifert Konkret

5 Quicktime player Abstrakt Perifert Centralt Perifert Kendt Nyt Konkret

6 Rækkefølge Rækkefølge er betydningsbærende

7 Tegntyper Har de permanente egenskaber? Har de foranderlige egenskaber? Kan de påvirkes ( håndteres ) Kan de påvirke andre ( udføre handling ) +action -action +handling -handling +permanent -permanent +transient -transient Interactive Actor Object Button Controller Layout Ghost

8 Eksempler Interaktive tegn Instrumenter Agenter

9 Eksempler Aktører Agenter Kontrollører Locationer

10 Slideren Handling: the user can move it. Permanent: it retains its black triangular shape. Transient: it changes location. Action: it writes a number in the box. on mousedown Handling feature repeat until the mouse is up get the mouseloc put item 2 of it into sliderheight if sliderheight<maxtop then put maxtop into sliderheight if sliderheight>maxbottom then put maxbottom into sliderheight set the loc of me to centerline,sliderheight Transient feature put 241-sliderHeight into cd fld Output Action feature end repeat end mousedown

11 Billeder, film og computere Medium Features Pictures Permanent features: what we experience when we can only use our eyes Film Transient features: what we can experience when we can move head and body (panning, tilting, travelling camera) Computers Handling and action features: what we can experience when we can manipulate our environment by means of our hands

12 Opbygning af grænseflader Syntagmer og paradigmer Et syntagme består af elementer der forekommer i samme kæde Et paradigme består af elementer der udelukker hinanden i samme kæde Samtidige og sekventielle kæder Samtidige kæder: elementer der forekommer i samme rum på samme tid Sekventielle kæder: elementer der forekommer i samme rum men efter eller før hinanden.

13 Syntagmer og paradigmer i sproget Subjekt Verbum Objekt Adv Peter så En pølse igår Hunden spiste katten forleden Katten frygtede hunden I onsdags Konen slog

14 Samtidige og sekventielle syntagmer i musik Melody and rhythm = sequential syntagm Harmony = concurrent syntagm

15 Samtidige og sekventielle paradigmer i musik Samtidige paradigmer: alle toner der kunne træde i stedet for en given tone på samme sted Tonal musik: alle toner indenfor samme toneart Sekventielle paradigmer: alle toner der kan følge efter en given tone 12 takter Blues: C + C + C + C7 + F + F + C + C + G7 + G7 + C + C Efter C: C eller C7 eller G7 Efter C7 : F Efter G7: C

16 Film Samtidige Syntagmer: scenografi Paradigmer: scenografiske valg Sekventielle Syntagmer: handlingen Paradigmer: valg af næste handling, f.eks. mulige slutninger

17 Scenografi i spil Blackout

18 Scenografi på computere skal muliggøre handlinger Hvordan navigerer man fra én ende af byen til en anden? Tilføj tog.

19 Menuer Den grafiske side: et samtidigt syntagme, alle ikoner ses samtidigt Den funktionelle side: et sekventielt paradigmer: hvad kan jeg gøre i næste øjeblik?

20 To typer af skærmbilleder 1 Det sekventielle paradigme dominerer Deskktoppen De fleste værktøjsprogrammer Mange valgmuligheder nu, få restriktioner på hvad der kan følge efter

21 Word xx

22 Relationer B er underordnet A: A + B, A, men ikke B alene A og B forudsætter gensidigt hinanden A og B er uafhængige A B A B A B

23 Word eksemplet i MAC Det er er arbejdsmæssigt underordnet skal være syntaktisk underordnet. Ikke overholdt ved den gamle MAC. Her kunne værktøjslinjer hænge og dingle uden tekstvindue Hver rude definerer et samtidigt paradigme af views rude Normal Outline layout Page layout Outline Toolbar Vindue rude Normal Outline layout Page layout Outline

24 To typer af skærmbilleder 2 Det sekventielle syntagme dominerer Begrænsede valgmuligheder nu Kraftige restriktioner på hvad der kan følge efter

25 Studenterprojekt 1 Selektion af film

26 Studenterprojekt 2 Download begynder. Fejl! Cancel-knap mangler

27 Studenterprojekt 3 Accepter download

28 Studenterprojekt 4 Download gennemført

29 Guideline Man skal altid kunne hoppe af et sekventielt syntagme (cancel-knappen) Selektion + (download begynder + acceptere download + (download slutter)) Selection of Film Beginning Download Accepting Download Ending Download

30 Sekventielle syntagmer og paradigmer Paste forudsætter enten copy eller cut

31 Det sekventielle paradigme skal markeres i interfacen Knapper der ikke kan bruges skal disables Ingen text selekteret: Med text selekteret:

32 Kongruens Sammenhørende elementer har lignende egenskaber (form, font, farve, etc) Når en egenskab ændres i et skærmelement ændres det også i de andre som hører sammen med det Effekt: Elementerne opfattes som hørende sammen

33 Dreamweaver Kongruens mellem to views: når noget markeres i eet view, markeres det tilsvarende afsnit i det andet view Viser at de to dele hører sammen

34 Model og view Model View View Views kongruerer for at vise at de viser samme model men på forskellig måde

35 Eksempel Gammelt (mørkt) Nyt (lyst) Typografisk kongruens

36 Eksempel 2 Ny Info: samme farve og typografi Venstre side konstant (rammer) Links højt oppe så de ikke skjules

37 Film En indstilling er den mindste enhed, der bruges til beskrivelse af en films forløb. Den defineres som det stykke tilm, der ligger mellem to splejsninger (sammenklæbninger af filmstrimlen). En indstilling er derfor et stykke film fra en op-tagelse, hvorunder kameraet ikke stoppes og startes på ny... Et skærmbillede En scene defineres som en serie af indstillinger, der af tilskueren opleves som samhørende i tid og sted. Handlingen må altså ikke indenfor samme scene pludselig springe fra et sted til et andet, og scenens varighed skal svare til varigheden af den handling, der foregår. Et eller flere skærmbilleder der understøtter sammen aktivitet ved at tilbyde de relevante arbejdsgenstande og værktøjer En række indstillinger, der af tilskueren opleves som hørende sammen, men som alligevel indeholder et brud med hensyn til tid eller sted kaldes en sekvens. Et eller flere sekventielt ordnede skærmbilleder der viser forskellige arbejdsgenstande og værktøjer som anvendes i samme aktivitet

38 Computer baseret scene

39 Computer baseret sekvens

40 Continuity Kongruens af grafik: den ændres ikke væsentligt fra indstilling til indstilling. Ændr kun grafik hvor forskellen er betydningsbærende Personer er symmetrisk opstillet. Kongruens af lys: det er nogenlunde konstant. Ændr ikke lyssætningen umotiveret Handlingen foregår i midten af billedet. Det centrale skal placeres midt i skærmbilledet Kongruens af rum: de enkelte indstillinger skydes fra samme side af handlingens centerlinje for at sikre at alle indstillinger bringer overlappende billeder af et fælles rum, så seeren kan identificere sin plads i rummet. Giv brugeren mulighed for at se hvor i hyperteksten han er

41 NBC s hjemmeside 1

42 NBCs hjemmeside 2

43 NBCs hjemmeside 3 Mangel på continuity

44 Aktiviteter Virksomhed Roller Motiv og delmål Rettet mod et materielt eller ideelt objekt Medieret af artefakter Socialt konstitueret i en kultur Subject, Mediator, Object Agent, Instrument, Theme, Time, Location, Source, Destination, Beneficiary Deltagere Lim De personer eller artefakter der udfylder rollerne Hvorvidt deltagerne er forpligtet på, ønsker at, eller er i stand til at udfylde deres rolle

45 Olsen-banden design Vi skal bruge 20 balloner, et bøjet søm, en ølflaske og en gammel avis Design skærmbilleder således at de indeholder repræsentationer af deltagere der kan udfylde aktivitetens roller.

46 Maritime aktiviteter og deres deltagere Subject Activity Object Mediator Interpret ation Create Track VMS Officer Subject Activity Object Mediator Interpret ation Follow Vessel s track Stick to line/ sail in corr i- dor Autopilot Subject Activity Object Mediator Interpret ation Maintain or Vessel s e.g. suppor t- change course ing rudder Servo machine Main engine GPS 2 GPS 1 Gyro 1 Gyro 2 Subject Activity Object Mediator Interpret ation Set Rudder angle Rudder machine

47 Mail Jeg (Ag) skriver et brev (Obj) til Jensen (Modt) med First Class (Instrument) Jeg (Ag) sender et brev (Obj) til Jensen (Modt) med First Class (Instrument)

48 Mail Modtager Instrument Objekt Agent