Kursusgang 5Designaktivitet 2 og 3

Oversigt:Sidste kursusgangOpgaverAktivitet 2: Generer designAktivitet 3: Byg interaktiv versionVisuelt design af vinduer

Sidste kursusgangIdentificering af behovHvad er "behov"InterviewFormulering af kravGrundbegrebScenarierBrugsmnstreInteraktionsrumBaseret p en artikelEksempelIndividuelle interaktionsrum

OpgaverTag udgangspunkt i et brugsmnster for jeres projekt. Det er en god ide at starte med et, der er rimeligt sekventielt og overskueligt (som eksemplet med kontanthvning). Hvis I ikke har et, s lav et ud fra det I ved p nuvrende tidspunkt (det er ikke s vigtigt for opgaven, om brugsmnsteret er helt korrekt). Udfr de trin, der er beskrevet p slide 4.30 for dette brugsmnster.Gentag opgave 1 for et andet brugsmster i jeres projekt. Gerne et, som har en sammenhng med det frste (samme type opgave eller en relateret opgave).

Kursusgang 3Oversigt:Aktivitet 2: Generer designRelation til kravFremgangsmdeInteraktionselementerMuligheder for checkAktivitet 3: Byg interaktiv versionVisuelt design af vinduer

Aktivitet 2: Generer designDesignet af brugergrnsefladen:Er et vigtigt krav til systemet (blandt andre)De overordnede beslutninger indgr i analysedokumentetDet detaljerede design indgr i designdokumentet

Hvordan (i jeres projekt):Fastlg en begrebsmssig model for hele systemetIdentificer interaktionsrum (individuelle og samlet model)Definer interaktionselementerFastlg interaktionsform for hvert interaktionselementUdarbejd detaildesign for hvert interaktionslementCheck dette mod den begrebsmssige model

Samlet model af interaktionsrumUd fra de individuelle modeller af interaktionsrum laves en samlet modelFrste udkast fs ved at stte de individuelle modeller sammenDerefter gennemgs interaktionsrum og opgaver systematisk for at finde flere forekomster af den samme klasseEt interaktionsrum kan vre relateret til flere opgaver og en opgave kan vre relateret til flere interaktionsrumEksempel for feltarbejderen p kraftvrket

InteraktionselementerPrsentationsmodellen beskriver brugergrnsefladens elementer, de dele, som indgr i hvert element, samt mulighederne for at navigere mellem elementernePrsentationsmodellen beskrives ved et klassediagram

NotationElementerne i prsentationsmodellen er interaktionsrummeneUdgangspunkt: den samlede model af interaktionsrumHvert interaktionsrum beskrives som en klasseKlassen detaljeres med:attributter (input og output)funktioner (action)Knyt funktioner til de enkelte interaktionsrumsklasserBeskriv ogs input- og output-elementer

Prsentations-modelSt alle klasserne op p en stor tavleIdentificer interaktionsrum, som er indeholdt i et andet interaktionsrum (aggregering)Identificer overgange mellem interaktionsrumud fra det reviderede brugsmnster (det med hierarkiske tilstande)diagrammet skal gre det muligt at gennemspille alle brugsmnstreNotation:: navigering mellem komponenter er muligt: interaktionsrummet forneden indgr i det foroven: interaktionsrummets input-elementer: interaktionsrummets output-elementer: mulige handlinger (funktioner)

Muligheder for check af indholdDesignet af brugergrnsefladen kan holdes op mod de modeller, I har lavet med OOA&D-metodenKlassediagram med attributter:beskriver den information, der indgr i brugernes aktiviteterdenne information skal svare til input- og output-data i prsentationsmodellenstrukturerne i klassediagrammet skal svare til strukturerne i prsentationsmodellen hvorfor?dette kan checkes systematiskBrugsmnstre:kan man udfre brugsmnstrene ved at bevge sig rundt i prsentationsmodellenanvender brugsmnstrene de muligheder for at bevge sig rundt, der er beskrevet i prsentationsmodellenFunktionsliste:beskriver de services, brugerne aktiverer i anvendelsen af systemetfunktionerne (eller delfunktioner) skal svare til actions i prsentationsmodellendette kan checkes systematiskUdfr disse check, fr I begynder p detaildesign af interaktionselementerne

Kursusgang 5Oversigt:Aktivitet 2: Generer designAktivitet 3: Byg interaktiv versionTo tilgange: vandfaldsmodel og prototypingValg af tilgangLow fidelity prototyperVisuelt design af vinduer

VandfaldsmodellenKaldes ogs en life-cycle modelHvad er ideen?Udviklingsprocessen gennemlber et antal faserHver fase har et klart defineret produktProduktet af en fase valideres i forhold til bestemte kriterierProduktet af en fase er udgangspunktet for den nste fase

PrototypingBrug af prototyper er et andet alternativ til vandfaldsmodellenEn prototype realiserer bestemte egenskaber ved et systemBrugerne kan arbejde og eksperimentere med den for at illustrere deres kravDer findes forskellige former for prototyperDe bruges p forskellige tidspunkter i udviklingsprocessenQuick and dirty Early implementation without prior analysis and design. Revised until the users are satisfied. Revisions become complicated and maintenance is very expensive.Throw-away Development in order to enquire into and express requirements. Is often described as a running requirements specification.Design-driven An implementation of a design which is as close to the final systems as possible. Often used for technical experiments, e.g. with the technical platform.Mock-up A cardboard or similar non-executable model of the system.Evolutionary A modifiable, running model of part of a system. Is gradyally developed into the final version which becomes the system.

Valg af tilgangVi str nu med to mulige arbejdsformer:VandfaldsmodellenPrototypingHvordan vlger vi?Se p de to tilganges egenskaber og sammenlign dem med den designsituation, vi str iEgenskaber:Vandfaldsmodellen: analytisk og baseret p specifikationer af systemet (beskrivelser)Prototyping: eksperimentel og baseret p modeller af systemet (prototyper)

Kompleksitet og usikkerhedRelevansen af specifikationsbaserede metoder og prototyping kan afgres ud fra kontingensfaktorer:KompleksitetUsikkerhedKan defineres ud fra den tilgngelige information:

Udviklernes viden om kontekstenUdviklerne har brug for at forst:Anvendelsesomrdet for at designe systemets brug Eksempel: brugsmnstreProblemomrdet Eksempel: klassediagram og skrmbillederVi skal alts have "overfrt" (kommunikeret) viden fra brugere og andre eksperter p AO/PO til udviklerne

Kommunikation af viden (Nonaka)Et nglebegreb i knowledge managementSprgsml: hvordan kan man overfre viden til andre?Skelner mellem explicit knowledge og tacit knowledge

Valg af tilgangBaseres p to fundamentale sprgsml:I hvilken grad er jeres udviklingssituation kendetegnet ved kompleksitet eller usikkerhedI hvilken grad er jeres anvendelsesomrde og problemomrde kendetegnet ved tacit eller eksplicit videnMuligheder:Vandfaldsmodellen: analytisk og baseret p specifikationer af systemet (beskrivelser) Hj kompleksitet og eksplicit videnPrototyping: eksperimentel og baseret p modeller af systemet (prototyper) Hj usikkerhed og tacit viden

Low fidelity prototyperEn prototype behver ikke at kunne kreMan kan komme langt med simple prototyper, som illustrerer dele af et designEksempler:papirprototypermock-up

Eksempel: Mock-upUTOPIA projectTools for graphical workers for page make-up and image processing.Oppose the deskilling that occurred when computers were introduced.Started describing requirements to a tool, but that was too abstract for the graphical workers.Made mock-ups to simulate how the computerized system would work.The mock-ups were made of cardboard boxes, overhead projectors and projector screens.Simulation involved people performing the operations of the computer.A prototype was developed from the experiences with the mock-ups.

Kursusgang 5Oversigt:Aktivitet 2: Generer designAktivitet 3: Byg interaktiv versionVisuelt design af vinduerMarcus' principperEksempel: IPJ-systemet

Marcus: Principper for visuelt design Vanskeligt at lave metode for alternativ: designprincipper (eksempel i PRS, side 226-230 + 567-573) (1. udgave: 266-267)

Marcus har tre overordnede principperOrganisrkonomisrKommunikrFor hvert princip er der konkrete anvisninger for designAnvisningerne kan bruges til at designe detaljerne i det enkelte vindueEn del af principperne udspringer af psykologiske arbejder med kognitionsteori (blandt andet gestaltlovene)

Princip 1: OrganisrBegreber om dette principKonsistens: elementer har samme reprsentation og adfrd overaltSkrmlayout: strukturering af elementer forstet som deres placering p flade eller i rumRelationer: visuel sammenhng eller afstand mellem elementerNavigering: lokalt i vindue mellem elementer; hvilken sekvensResultat: kaotisk eller velordnet skrm

KonsistensIntern konsistens: overhold samme regler og konventioner for alle elementer i et systems brugergrnseflade

Ekstern konsistens:overhold samme regler og konventioner som andre systemer inden for samme platform (f.eks. Mac) eller kultur (f.eks. grafikere)

Virkelighedskonsistens: byg p det som glder i virkeligheden enten generelt eller i systemets virkelighed (f.eks. multimedie)

Ikke-konsistens: overvej hvornr der ikke skal vre konsistens

SkrmlayoutStrukturering af elementer forstet som deres placering p flade eller i rumTre strukturer:Grupperet struktur Elementerne er grupperede inden for vinduet efter relationer eller navigeringStandardstruktur Alle vinduer har samme strukturGitterstruktur (grid) To dimensioner, med hjst 7+/-2 elementer i hver dimension

RelationerI forbindelse med organisering har vi behov for at forst to ting:Elementerne og deres egenskaberRelationer mellem elementerne

Her kan teorier fra psykologien hjlpe os

Gestalt-loveneGestalt-lovene for organisering af synsindtryk som meningsfulde helheder (gruppering):Nrhed: samling af enkelte objekter efter deres indbyrdes afstande.Ensartethed: samling af enkelte objekter efter ensartet form.Lukkethed: tilfjelse af manglende dele i en helhed.Kontinuitet: organisering i en fortsat helhed.Symmetri: strukturering af symmetriske grnser som en sammenhngende helhed.Ikke empirisk underbyggede men gode til design og vurderingFrom Preece (1994)

Eksempel: Tre problemer forklaring?Tre brugbarheds-problemer Problem 088: Trykker p Rapport-knappen for at stte fanebladeneProblem 089: Tror at Skriv-knappens betydning hnger sammen med det menupunkt, der er valgt i menuen ovenforProblem 096: Tror at Rapport-knappen giver adgang til patientens journal

NavigeringLokalt mellem elementer i et vindue: hvilken sekvensEksempel: Opgave 2, sprgsml a Forklarer, hvordan hun vil lse opgaven. Hun gr over i F8-billedet (Statusbilledet) og trykker p knappen Rapport. Stter tiden til det tidspunkt, hvor hun har taget mlingerne. Dette felt er nederst i vinduet, s hun bevger sig ned og op i vinduet. Opdaterer hurtigt vrdierne.Teknikker:Basis: normal lseretningHav et frste fokuspunkt for brugerens opmrksomhedDiriger opmrksomhed til vigtige sekundre eller perifere emnerAssister i navigering igennem vinduet

Princip 2: konomisrBegreber om dette princip:EnkelhedKlarhedForskellighedFremhvelseEnkelhed:s f elementer som muligtkun dem, der er ndvendige for effektiv kommunikationKomplekst kontra enkeltKlarhed:Ingen tvetydig betydning af elementer Tvetydige Klare

konomisr (2)Forskellighed: egenskaber som kan adskille relevante elementer fra de irrelevanteFor lille og for stor forskel

Fremhvelse: gr de vsentlige elementer lette at opfatte og gemmer ikke vsentlig informationFor strk og en forbedret fremhvelse

Princip 3: KommunikrBegreber om dette princip:Tydelighed (legibility)Lselighed (readability)TypografiSymbolismeFlere perspektiverFarve/teksturTydelighed: de enkelte tegn, symboler og grafikelementer skal vre lette at se og adskilleLselighed: Indholdet er til at forst, herunder at det er let at identificere og fortolke

Typografi: f og forskellige

Kommunikr (2)Symbolisme: Forstelige symbolerFlere perspektiver: personer forstr ofte ting forskelligt For eksempel et primrt element samt noget yderligere information eller forskellige relationer, som et element indgr i

Farve og tekstur: meget komplekst nogen retningslinier i artiklen

Opsummering:Principper for visuelt design Organisr:Konsistens:Intern konsistensEkstern konsistensVirkelighedskonsistensIkke-konsistensSkrmlayout:Gitterstruktur (grid)StandardstrukturGrupperet strukturRelationer: gestaltlovene giver forstelseNavigering: lokalt mellem elementer i et vinduekonomisr:EnkelhedKlarhedForskellighedFremhvelseKommunikr:Tydelighed (legibility)Lselighed (readability)TypografiSymbolismeFlere perspektiverFarve/tekstur

Husk de 4 designprincipperAffordanceherunder ogs Visibility og ConstraintsConsistencyMappingFeedbackDisse fire principper kan hjlpe os med at stte ord p ting, vi oplever som godt eller drligt design

Opsummering og nste gangIdag:Frdige med aktivitet 2 (generer design) og aktivitet 3 (byg interaktiv version)Set p valg af tilgangDer er prsenteret generelle principper for fysisk design: placering af elementer i vinduerne

Nste gang:Systemer til understttelse af samarbejde (selvstudium)

Opgave 7: Design vinduetVindue til at sge og bestille flybilletFelt til angivelse af:Date: afrejsedatoenDrop-down menuer til valg afFrom: byen, der rejses fraTo: byen, der rejses tilValg af klasse:First classBusinessCoachOutput i form af en liste med mulige flightsFunktioner:Search: sger mulige flightsPurchase: kber en bestemt flight og forlader vinduetExit: forlader vinduet

Mulig lsning