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

Relaterede dokumenter
Grundlæggende semiotik

Analyse af aktiviteter. Uge 8

how to save excel as pdf

Help / Hjælp

Janni Nielsen Department of Informatics HCI Research Group

3D NASAL VISTA 2.0

SPECIALTRYKKERIETS KUNDE WEBPORTAL KOM GODT I GANG

3D NASAL VISTA TEMPORAL

The purpose of our Homepage is to allow external access to pictures and videos taken/made by the Gunnarsson family.

Workshop G4 MicroStation V8 XM edtion nye værktøjer 2

DK - Quick Text Translation. HEYYER Net Promoter System Magento extension

Titel: Barry s Bespoke Bakery

Sådan laver du en animationsfilm

KUNDE-WEBPORTAL KOM GODT I GANG

Udbud på engelsk i UCL. Skabelon til beskrivelse

ProjectWise Tips & Tricks

Tema: Pets Fag: Engelsk Målgruppe: 4. klasse Titel: Me and my pet Vejledning Lærer

Mediator 9. Materiale til elever. Version: August 2012

Freefly B-Række Regler

Portal Registration. Check Junk Mail for activation . 1 Click the hyperlink to take you back to the portal to confirm your registration

Online kursus: Content Mangement System - Wordpress

Shooting tethered med Canon EOS-D i Capture One Pro. Shooting tethered i Capture One Pro 6.4 & 7.0 på MAC OS-X & 10.8

Billeder og PowerPoint

IPTV Box (MAG250/254) Bruger Manual

Adobe Digital Editions

Grafisk Tekniker Digitalprint. Print af klistermærker med skærelinjer

Installation af et tilføjelsesprogram

Vejledning til at tjekke om du har sat manuel IP på din computer.

Webside score templatedownload.org

Brug sømbrættet til at lave sjove figurer. Lav fx: Få de andre til at gætte, hvad du har lavet. Use the nail board to make funny shapes.

Navigationsrude Tryk på Ctrl+F for at få vist navigationsruden. Du kan omorganisere et dokument ved at trække dokumentets overskrift i denne rude.

Grafisk Tekniker. Opsætning og print af storformat i flere dele

Sådan opretter du en elektronisk aflevering

15. Animation. (path & frame)

Aftenskole i programmering sæson Registrering af tid. Sæson 2 - Lektion 5

BACK-END OG DATA: ADMINISTRATION HVAD ER DE NYE MULIGHEDER MED VERSION 7.1? STEFFEN BILLE RANNES, 4. FEBRUAR 2015

MICROSOFT ONLINE KURSER

Splunk Cookbook Lab Workshop

Formålet med denne Pixibog er at gøre admin-delen på Kertemindesejlerne.dk

Karen Kristiane, Mette Mørk Christensen, Stina Frandsen og Mathias Nielsen

PARALLELIZATION OF ATTILA SIMULATOR WITH OPENMP MIGUEL ÁNGEL MARTÍNEZ DEL AMOR MINIPROJECT OF TDT24 NTNU

2a. Conceptual Modeling Methods

StarWars-videointro. Start din video på den nørdede måde! Version: August 2012

Analyse af værket What We Will

PC - installation af Maple 18 med GYM-pakken

ibooks Author Introduktion

Video obligatorisk øvelse

Quick guide til e-learn.sdu.dk (Blackboard) for studerende

IsenTekst Indhold til Internettet. Manual til Wordpress.

Martin Lohse. Passing. Three mobile for accordion. Composed

Typo3 vejledning BMI af 1 Typo3 vejledning for redaktører og skribenter i BMI

Sitecore Glossary. Sitecore Training. Sitecore glossary in Danish and English. Sitecore Training Sitecore Glossary Rev:

Mobilitet har fået nyt navn: CrossPad. Comwell Kolding den 9. april 2013

Genveje til Excel på MAC

Table of Contents Page 2

Tastevejledning til Photo Story 3 for Windows

Hvor er mine runde hjørner?

I denne manual kan du finde en hurtig introduktion til hvordan du:

Opstart. I gang med Dreamweaver. Læs mere om... Generelle bemærkninger. Hvilken skærmopløsning? OBS

Sådan bruger du BK- 9 Performance List. Formatering af USB- Memory. "Performance List" er en liste over dine registreringer.

3) Først og fremmest kan du vælge hvilket tema din side skal have.

Hjælp, mine deltagere aflytter og øver sig til YouTube men i forkert toneart.

Kapitel 6 Events i C#

Boligsøgning / Search for accommodation!

Opstart. I gang med Dreamweaver. Læs mere om...

Classic Tween. Navigationsseddel. Fase Forklaring Navigation. Åbn en ny Flash File. Åbn Flash, vælg symbolet ud for ActionScript 3.0.

Prepress Serigrafi Grafisk Tekniker Grundforløb. Opgave: Klistermærker i flere farver

WIKI & Lady Avenue New B2B shop

Fagligt indhold. Oplæg fra underviser Ar)kel Film Del af fagbog. Rammesætning. Indhold Form Evt. midler Distribu)on Deadline(s) Produk)on

Opera Ins. Model: MI5722 Product Name: Pure Sine Wave Inverter 1000W 12VDC/230 30A Solar Regulator

FORCE Inspect Online Manual v FORCE Inspect Online Manual. 1 af 18

Jysk Online Medie ApS - Vestergade 32, 8600 Silkeborg - Tlf.:

Sådan opretter du en blog i e-learn.sdu.dk I denne vejledning vises først, hvor i e-learn.sdu.dk, du kan oprette blogs. Derefter vises hvordan du gør.

BRUGERVEJLEDNING TIL GOOGLE DRIVE

1. Stak og kort. 1. Vælg New Stack i File menu - - Vælg: Save. 2. Vælg No for at ændre størrelsen på kortet.

Weebly- vejledning. Lav din egen hjemmeside let og smertefrit

Du skal lære. o o o o o. Om filmen. Filmen er en animationsfilm. Animation betyder at gøre noget levende.

Hvordan starter man ActivBoard op og tilslutter PC mv... 3 Hvordan tilslutter jeg min bærbare PC til ActivBoard?... 4

nyt håndmalet univers

WordPress manual..hjerteforeningen.dk/pco-login. Brugernavn: Password:

Billedvideo med Photo Story

Bridgit på VUC Storstrøm... 3 SMART Bridgit - download og brug Global Classroom

Generalized Probit Model in Design of Dose Finding Experiments. Yuehui Wu Valerii V. Fedorov RSU, GlaxoSmithKline, US

Den digitale Underviser. Videoredigering. Windows Live Movie Maker

Advanced Word Template Brugermanual

Quick Guide til Visit Gæstesystem i Backend.

ActiveBuilder Brugermanual

Before you begin...2. Part 1: Document Setup...3. Part 2: Master Pages Part 3: Page Numbering...5. Part 4: Texts and Frames...

Vejledning til Sundhedsprocenten og Sundhedstjek

Brugermanual 3D Webcam

Hyper-V på Windows 8 64 Bit. Indhold. Vejledning i brug af Hyper-V på en Windows 8 maskine

Manual til WordPress CMS

IBM Network Station Manager. esuite 1.5 / NSM Integration. IBM Network Computer Division. tdc - 02/08/99 lotusnsm.prz Page 1

Varenr.: højre venstre º højre med coating º venstre med coating

LEJERBO.DK INDSÆT BILLEDER, GALLERI OG VIDEO

LESSON NOTES Extensive Reading in Danish for Intermediate Learners #8 How to Interview

Byg web sider. Introduktion:

Kom i gang med Course Tool 1.2

Vejledning til CD-ORD 10

Studerendes video- optagelser til prøver

Transkript:

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

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

Eksempel 1 Virker sammen Virker modsat

Informationsstruktur Kendt Nyt Abstrakt Perifert Centralt Perifert Konkret

Quicktime player Abstrakt Perifert Centralt Perifert Kendt Nyt Konkret

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

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

Eksempler Interaktive tegn Instrumenter Agenter

Eksempler Aktører Agenter Kontrollører Locationer

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

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

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.

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

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

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

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

Scenografi i spil Blackout

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

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?

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

Word xx

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

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

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

Studenterprojekt 1 Selektion af film

Studenterprojekt 2 Download begynder. Fejl! Cancel-knap mangler

Studenterprojekt 3 Accepter download

Studenterprojekt 4 Download gennemført

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

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

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

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

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

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

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

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

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

Computer baseret scene

Computer baseret sekvens

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

NBC s hjemmeside 1

NBCs hjemmeside 2

NBCs hjemmeside 3 Mangel på continuity

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

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.

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

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)

Mail Modtager Instrument Objekt Agent