Struktureret Web-design
description
Transcript of Struktureret Web-design
Struktureret Web-design
RHS – Informationsteknologi – 2008 2
Hvad er web-design…?
• ”…det er vel bare at lave nogle hjemmesider i FrontPage…?”
• NEJ! Man bør skelne tydeligt mellem det at kunne designe f.eks et website, og at kunne implementere (kode) et website
• Man behøver ikke stor teknisk viden for at kunne lave web-design
• Ligesom for databaser; med et godt design, er implementation (næsten) trivielt
RHS – Informationsteknologi – 2008 3
Hvad er struktureret web-design…?
• Web-design som følger en veldefineret proces• Processen tager mange elementer i betragtning,
både overordnede og detaljerede:– Formål og målgruppe– Indhold, stil og temaer– Opbygning, navigation, kontrol-elementer– Detaljeret indhold, præsentations-elementer
• Komposition• Farvevalg, skrifttyper, symboler, billeder• Lyd, video, animation, m.v.
RHS – Informationsteknologi – 2008 4
At tabe alt på 3 sekunder…
• Vi – bruger af websites – danner os meget hurtigt et første indtryk af et website
• Hvor meget er ”meget hurtigt”…?• I nogle tilfælde måske blot nogle
få sekunder!• Det første indtryk af en website
er ekstemt vigtigt
RHS – Informationsteknologi – 2008 5
Klassisk fejl #1
Please wait while our very fancy website loads…
RHS – Informationsteknologi – 2008 6
Opgave 1
• Lad os selv prøve at danne os et første indtryk af nogle websites:– www.rejseplanen.dk
– www.selvet.dk
– www.tivoli.dk
– www.bedemand.dk
– www.ibicph.com
• Vær gerne subjektiv – men ikke forudindtaget
RHS – Informationsteknologi – 2008 7
Formål og målgruppe
• Definition af formålet kan lyde som en lille opgave…men kan have voldsomme konsekvenser
• Typiske overordnede formål– Information– Præsentation– Kommunikation– Salg
RHS – Informationsteknologi – 2008 8
Formål og kompleksitet
• Jo bredere formål, jo større kompleksitet
• Kompleksitet = penge• Grundighed med
definition af formål vil tjene sig mangefold ind på sigt
Informa-tion
Præsentation
Kommunikation
Salg
RHS – Informationsteknologi – 2008 9
Formål og mål
• Formål kan være specifikke…men svære at gøre objektive og målbare:– ”Websiten skal give brugeren god information om
trafiksituationen i København”– ”Vores site skal øge salget af vores produkter
betydeligt”– ”Vores site skal være med til at fastholde vores
målgruppe i at benytte vores produkter”
• Hvordan afgør vi, om vores web-site rent faktisk opfylder sit formål?
RHS – Informationsteknologi – 2008 10
Formål og mål
• Formålet bør suppleres med konkrete mål• Et mål er i denne forbindelse et mere objektivt
kriterie, vi objektivt kan afgøre om er nået.– ”Mindst 5.000 unikke besøgende om ugen”– ”Forøgelse af salg på mindst 20 % i 2009”– ”Mindst 40 % af omsætning i 2009 via vores site”– ”En score på mindst 4,2 i vores undersøgelse af
brugernes tilfredshed”
• Ikke altid let at definere relevante mål…
RHS – Informationsteknologi – 2008 11
Målgruppe
• Formål og målgruppe vil oftest gå hånd i hånd
• Ideelt; alle kan lide vores website• Reelt; kun en specifik gruppe vil
identificere sig med vores– Produkt– Budskab– Udtryksform– Etc
RHS – Informationsteknologi – 2008 12
Klassisk fejl #2
Total nize!!
OMFG…It’s baaack!!
Så er den her f… igen! Den toplirede Rollator XPS-1130. Check it out:
> Ekstra brede dæk> Polyfonisk horn> Titanium-belagte bremser
Få den før de andre homies på Hjemmet!
That’s how we roll in 4000
RHS – Informationsteknologi – 2008 13
Målgruppe
• Målgruppen vil ofte kunne udledes fra websitens formål– ”Websiten skal styrke relationen til vores
eksisterende målgruppe”– ”Websiten skal være med til at introducere
vores produkter til ældre borgere”– ”Vi vil gerne gøre svært tilgængelige emner
mere tilgængelige for almenheden”
RHS – Informationsteknologi – 2008 14
Målgruppe – detaljer og konsekvenser
• Når målgruppen er fastlagt, vil det have konsekvenser for mange design-elementer, måske også nogle man ikke lige overvejer…
• ”Børn 6-10 år”: Visuelt, lyd, bruges uden at kunne læse, forældrevejledning
• ”Ældre 60+”: Afdæmpet design, stor skrift, sikkerhed, stor vægt på hjælpefunktioner
• ”Voksne med lavt uddannelsesniveau”: Lavt LIX-tal, grafik, lave krav til hardware/forbindelse
RHS – Informationsteknologi – 2008 15
Opgave 2
• Se på disse websites:– www.borsen.dk– www.dr.dk/oline– www.sand.dk– www.noanoa.dk– www.nielsgamborg.dk
• Overvej hvem målgruppen er, og hvor klart det fremgår af websiten
• Bemærk: Husk lyd, og tillad pop-ups.
RHS – Informationsteknologi – 2008 16
Elementer i Web-design
• Når vi har styr på formål, målgruppe med videre, kan vi gå mere i detaljer med design
• Overordnede ”temaer” i design er oftest tæt forbundet med formål og målgruppen
• Seriøst, informativt, cool, legende, ungdommeligt, festligt, pålideligt....
• Hvordan kobles sådanne temaer sammen med konkrete design-elementer...?
RHS – Informationsteknologi – 2008 17
Konkrete design-elementer• I det konkrete design indgår
elementer som– Farvevalg– Skrift (typografi)– Ordvalg– Billeder– Lyd– Navigation (struktur og
kontrol-elementer)– Komposition
RHS – Informationsteknologi – 2008 18
Farvevalg
• Synssansen er vores ”kraftigste” sans, derfor er farvevalg et meget vigtig element i design
• Ikke alene valg af enkelte farver, men også kontraster mellem farver
• Lav kontrast kan nemt gøre det svært at skelne tekst m.v. på en website.
RHS – Informationsteknologi – 2008 19
Dette er nemt at læse
Dette er svært at læse
RHS – Informationsteknologi – 2008 20
Opfattelse af farver
• Alle har vel forskellige opfattelser af farver, men der er generelle trends:
Fare Stands Pas På Temperament
ForsigtigVarsomMulig fare
RoligTrygNaturAlt i orden
DysterCoolMaskulin
RenUskyldigFeminin
NeutralKøligHimmel og Hav
RHS – Informationsteknologi – 2008 21
Opfattelse af farver
• ...men farveopfattelse er også kulturelt betinget
Kina: GlædeKina: Maskulin
Kina: VenligKina: Feminin
Kina: Elegance Indien: Sorg Kina: Feminin
RHS – Informationsteknologi – 2008 22
Opfattelse af farver
• Vi kan let forvirre en bruger ved at anvende ”forkerte” farver
• ADVARSEL: vil du virkelig slette din harddisk?
JANEJ
RHS – Informationsteknologi – 2008 23
Opfattelse af farver
• Farver spiller en betydelig rolle i vores opfattelse af en website
• Vælg farver med omhu – både de enkelte farver, samt samspillet mellem dem (kontrast)
• Vær opmærksom på forskelle i farve-opfattelse mellem f.eks kulturer
• Brug farver konsistent!• Vil altid være subjektivt i nogen grad – men
brugeren har altid ret :-)
RHS – Informationsteknologi – 2008
Opgave 3
• Se på disse websites:– www.flugger.dk– www.dad.dk– www.gucci.com– www.auri.dk– www.bonbonland.dk
• Overvej, hvem målgruppen er, og bedøm hvor godt dette understreges af farvevalg på sitet
RHS – Informationsteknologi – 2008 25
Skrift (typografi)
• Det var meget nemmere i gamle dage...
RHS – Informationsteknologi – 2008 26
Skrift (typografi)
• I dag kan vi vise stort set hvilken som helst skrifttype på hvilken som helst skærm
• To hovedgrupper af skrifttyper:– Antikva: Skrifttyper med ”fødder” (seriffer)– Grotesk: Skrifttyper uden ”fødder” (seriffer)
• Times Roman er en Antikva skrifttype• Arial er en Grotesk skrifttype
RHS – Informationsteknologi – 2008 27
Skrift (typografi)
• De kloge siger...• ”Antikva (med fødder) er godt på papir,
ikke så godt på skærmen...”• ”Grotesk (uden fødder) er godt på
skærmen, ikke så godt på papir...”• Muligvis ikke så vigtigt længere,
med nutidens kvalitet af skærme• Begræns brugen af forskellige fonte
RHS – Informationsteknologi – 2008 28
Skrift (typografi)
• Vi kan også fremhæve skrift på flere forskellige måder:– Fed skrift (godt til overskrifter, eller til at
fremhæve noget vigtigt)– Kursiv (kan være svært at læse)– Understregning (bør undgås, er standard for at
fremhæve et link)
– Ændre størrelse eller font (yrkkk!)
• Igen er konsistent – og moderat – brug vigtigt!
RHS – Informationsteknologi – 2008 29
Ordvalg
• Emnet for websiten vil – selvfølgelig – præge ordvalget, men vi bør have formål og målgruppen i tankerne
• Er websiten– Introducerende eller indforstået– Rettet mod ”specielle” grupper
(børn, ældre, lavt uddannede, etniske grupper, osv)
– I berøring med følsomme emner
Uhhh...What?
RHS – Informationsteknologi – 2008 30
Ordvalg
• Men almindelig ”god skik og brug” gælder jo også på websites...– Undgå indviklede sætninger– Undgå overdreven indforståethed– Undgå tvetydighed– Giv brugeren mulighed for at få hjælp
Er du sikker på, at du vil fortryde ikke at slette din harddisk?Er du sikker på, at du vil fortryde ikke at slette din harddisk?
Fortryd Fortsæt
RHS – Informationsteknologi – 2008 31
Opgave 4• Se på disse websites:
– www.udeoghjemme.dk– www.tweak.dk– www.um.dk– www.dr.dk/boogie– www.borger.dk
• Overvej, hvem målgruppen er, og bedøm hvor godt dette understreges af ordvalg og typografi på sitet
RHS – Informationsteknologi – 2008
Opbygning og navigation
• Langt de fleste websites består af mange sider
• Hvordan kommer vi rundt mellem siderne?
• Grundlæggende typer af opbygning:– Lineær– Hierarkisk (flad)– Hierarkisk (dyb)
RHS – Informationsteknologi – 2008
Lineær navigation
• Brugeren ”tvinges” til at følge én bestemt vej gennem siderne på web-sitet
Side 1 Side 2 Side 3 Side 4
• Velegnet til– Brugsanvisninger og instruktioner (uddannelse)– Undersøgelser (spørgeskemaer…)– Betaling/tilmelding
RHS – Informationsteknologi – 2008
Hierarkisk navigation (flad)
• Mere fri struktur, men kort afstand til ”bunden” af websiten (sider hvorfra man ikke kan komme til nye sider)
Side 1
Side 2.1
Side 2.2
Side 2.3
Side 2.4
Min lille hjemmeside
Om mig
Min familie
Min hund
CV
RHS – Informationsteknologi – 2008
Hierarkisk navigation (dyb)
• Fri struktur, men lang afstand til ”bunden” af websiten (træ-struktur)
Side 1
Side 2.1
Side 2.2
Side 2.3
Side 2.4
Side 3.1
Side 3.2
Side 3.3
Side 3.4
Side 4.1
Side 4.2
Side 4.3
Og så
videre…
RHS – Informationsteknologi – 2008
…og kombinationer
• Man kan selvfølgelig sagtens kombinere disse grundformer på samme web-site
• Web-site med salg: Præsen-tation typisk hierarkisk, salgsforløb typisk lineært
• Cykliske strukturer: navigation ”baglæns” i strukturen, f.eks tilbage til forsiden
• Søgning!
RHS – Informationsteknologi – 2008
Hvad er så bedst…?
• Afhænger meget af typen af website• MEN – generelt godt hvis sitens vigtigste
information kan findes med få klik• Hvad er ”få”…? Maksimalt 3…• Valg vil altid være et kompromis
Fladt hierarki Dybt hierarki
Max klik Få Mange
Links pr. side Mange Få
RHS – Informationsteknologi – 2008
Indgang til web-siten
• Vi kan ikke forvente, at en bruger altid kommer frem til web-siten via forsiden
• Brugeren kan måske komme til siten via en søgning (Google), og lande på en underside
• Brugeren har måske bookmarket en underside• Altid en god ide, hvis man nemt kan navigere
tilbage til forsiden, fra alle undersider• Typisk link til forside: Logo, som også er et link
RHS – Informationsteknologi – 2008
Design af navigation• Al navigation på web-sites er via links• Logisk set er et link altid ”bare” en reference til
en anden side• Et link kan præsenteres på mange måder
– Klassisk, eksplicit link (f.eks: gå til www.dr.dk)– Link som tekst (f.eks: gå til mere information)– Link som element i menu– Link som grafik
• Sidste er eksempel på brug af metaforer i navigation mellem sider
RHS – Informationsteknologi – 2008
Navigation via metaforer
• Hvad er en metafor…?Metafor (af græsk: metafora, meta = hen til, phorein = at
bevæge) er et sprogligt billede, hvor karakteristika ved et objekt overføres på et andet objekt, der som oftest er urelateret. Typisk bliver et objekt beskrevet som lig med et andet objekt
• I denne sammenhæng; en ”indpakning” af et link i grafik eller lignende
• Skulle gerne gøre navigationen på sitet mere intuitiv for brugeren
RHS – Informationsteknologi – 2008
Navigation via metaforer
• Simpel metafor på et lineært site:
• Vi bruger metaforen, fordi vi forventer brugeren kender tilsvarende symboler fra en anden sammenhæng (f.eks en CD-afspiller)
• Vi skal være opmærksomme på, om metaforen giver mening for en bruger i målgruppen
RHS – Informationsteknologi – 2008
Navigation via metaforer
• Fordele ved metaforer:– Gør (forhåbentlig) navigation
mere intuitiv– Kan gøre design mere konsistent– Kan udvide målgruppen, f.eks
brugere som ikke kan/vil læse
• Ulemper ved metaforer– Vi gør antagelser om, hvordan
brugeren foretager associationer– Kan gøre det sværere at finde ud
af, hvordan man navigerer
RHS – Informationsteknologi – 2008
Navigation via metaforer
• Hvis vi benytter metaforer, bør vi hjælpe brugeren på vej– Konsistent stil i brug af metaforer– Grafisk indikation af link (skift af muse-cursor, lyd,
grafisk reaktion)– Hjælpetekst i tooltip
• …og naturligvis bør vi teste vores web-site, ved at lade brugere i målgruppen prøve den!
RHS – Informationsteknologi – 2008
Navigation via menuer
• Ofte vil det være mere naturligt at benytte en ”gammeldags” menu til navigation
• Metaforer er ikke automatisk bedre end menuer til navigation
• Mange er vant til at bruge menuer fra andre programmer
• Menuer er ret eksplicitte – svære at misforstå
RHS – Informationsteknologi – 2008
Navigation via menuer
• Hvor skal menuen være…?
?
Naturligt for læseretning
Bruges i programmer
RHS – Informationsteknologi – 2008
Navigation via menuer
• Vi kan også kombinere elementer fra metaforer med menuer (grafisk indikation m.v)
• Kan bruge menuer til overordnet navigation, kombineret med metaforer for detaljeret navigation
• For eksempel en web-site med produkt-præsentation og salg– Overordnet navigation via menuer– Detaljer om produkter; klik på billede af produkt
RHS – Informationsteknologi – 2008 47
Opgave 5• Se på disse websites:
– www.dsb.dk (find køreplan for H-linie fra Frederikssund)– www.dmi.dk (find den lokale vejrudsigt for Roskilde)– www.rhs.dk (hvornår havde 3.hh sidste skoledag i 2008?)– www.borger.dk (hvad kan jeg få i SU?)– www.krak.dk (beregn korteste rute fra dit hjem til RHS)
• Er de opbygget hensigtsmæsigt, i forhold til at finde den information, der er angivet som eksempel?
• Hvordan navigerer man på disse web-sites, og er navigationen effektiv?
RHS – Informationsteknologi – 2008
Komposition
• Vi skulle nu have rimeligt styr på, hvilke elemen-ter vi medtager på siderne på vores web-site
• Hvordan sættes det hele sammen…?• Komposition omhandler, hvordan elementerne
placeres og sammensættes på en side.• Hvad vil vi opnå?
– Brugervenlighed– Ensartethed, konsistens, genkendelighed– Positiv helhedsoplevelse
RHS – Informationsteknologi – 2008
Gestaltlove
• Hvad betyder ”gestalt”?• Ikke noget godt dansk ord…
noget a la ”Hvad vi oplever som helhed, ud fra et antal enkeltdele”
• I denne sammenhæng; hvordan enkeltdele bør organiseres, for at give den rette helhedsoplevelse
RHS – Informationsteknologi – 2008
Gestaltlove
• Loven om Figur og Baggrund• Loven om Nærhed• Loven om Lighed• Loven om Lukkethed• Loven om Forbundethed
RHS – Informationsteknologi – 2008
Loven om Figur og Baggrund
• "Den mindste, afgrænsede figur på arealet vil først blive opfattet som figuren."
• Hvad betyder det? Hvis forgrund og baggrund ikke er klart adskilt, kan brugeren blive forvirret
RHS – Informationsteknologi – 2008
Loven om Figur og Baggrund
• Hvilke virkemidler kan bruges for at sikre en tydelig afgrænsning af en figur?
• Typisk bruges kontrast, mere specifikt– Farve-kontrast– Figur-kontrast
RHS – Informationsteknologi – 2008
Farve-kontrast
• Der findes flere typer af farve-kontrast– Komplementær kontrast – Varme-kulde kontrast – Styrke kontrast – Mæthedskontrast – Sort/hvid-farvekontrast
RHS – Informationsteknologi – 2008
Komplementær kontrast
• Den ”klassiske” type kontrast, hvor man anvender farver der indbyrdes har høj kontrast
• Man kan bruge en farvecirkel som guide – farver bør ligge langt fra hinanden for at skabe kontrast
• MEN alt med måde! Grøn tekst på rød baggrund er måske ikke så smart…
RHS – Informationsteknologi – 2008
Varme/kulde kontrast
• Visse farver opfattes som varme, andre farver opfattes som kolde
• Traditionelt opfattes røde farver som varme, og blå farver som kølige
• Igen skal man huske, at denne type kontrast er mere egnet til grafik end for tekst
Ikke sandt…?
RHS – Informationsteknologi – 2008
Styrke-kontrast
• Styrke-kontrast bruges ofte i forbindelse med tekst og typografi– Vigtigt– Almindeligt– Knap så vigtigt
• Maksimal kontrast – f.eks helt sort på helt hvidt – kan være anstrengende at læse
• Bedre at anvende f.eks mørkegrå på hvid, eller sort på lysegrå
RHS – Informationsteknologi – 2008
Styrke-kontrast
• …og at læse hvid skrift på sort baggrund kan se meget sjovt ud, men i længden bliver det ret anstrengende at læse… Så lad være med at skrive en hel roman på denne måde…
RHS – Informationsteknologi – 2008
Mætheds-kontrast
• Farvemætning beskriver, hvor kraftig en farve op-fattes at være
• Samme farve kan være ”mættet” i varierende grad, hvilket kan anven-des til at give kontrast
• Forskellige grader af farvemætning giver et forskelligt indtryk
RHS – Informationsteknologi – 2008
Sort/hvid-farve kontrast
• På en side holdt i sort og hvid, vil et element i farver blive meget tydeligt
• Kan bruges til at fremhæve noget vigtigt, både grafisk og i tekst
• Men skal ikke overdrives i tekst…• Når alt andet er i sort og hvidt,
behøves ikke en meget stærk farve for at fange blikket
RHS – Informationsteknologi – 2008
Figur-kontrast
• Der er ligeledes flere forskellige typer form-kontrast– Størrelseskontrast– Formkontrast– Placeringskontrast
• Disse typer kontrast kan bruges i forhold til både tekst og grafik
RHS – Informationsteknologi – 2008
Størrelseskontrast
• Kender vi alle i forbindelse med tekst
–Vigtigt– Almindeligt– Ikke så vigtigt
• Vigtigste elementer på en web-site kan fremhæves med en tilsvarende stor figur, f.eks en tegning, logo med videre
RHS – Informationsteknologi – 2008
Formkontrast
• Mennesker er meget hurtige til at opdage en form, som skiller sig ud
• Gælder – igen – også for tekst– Seriøs skrifttype…?– Gammeldags skrifttype…?– Festlig skrifttype…?
• Formkontrast kan fremhæve elementer med særlig funktion eller vigtighed
RHS – Informationsteknologi – 2008
Placeringskontrast
• Elementer placeret på en ”atypisk” måde kan også give kontrast
• Elementer med relaterede funktioner kan samles i visse områder på skærmen
• Også i tekst, f.eks centrering, venstre/højre-justering
• P.S: Hvorfor ser man mørke pletter ved E’s hjørner…?
A B C
D E F
G H I
Z
RHS – Informationsteknologi – 2008
Opgave 6
• Se på disse websites:– www.politiken.dk– www.bedemand.dk– www.nielsgamborg.dk– www.toyota.dk– www.puma.dk
• Vurdér, hvordan disse sites benytter sig af forskellige former for kontrast
RHS – Informationsteknologi – 2008
Loven om Nærhed
• "Symboler, der er anbragt nær hinanden, opfattes som hørende sammen."
• Hvad betyder det? Nærhed er relativt, så vi har også brug for luft på en side
• Fylder vi en side op med information, bliver alt tæt på alt…
RHS – Informationsteknologi – 2008
Loven om Nærhed
• Også i forhold til tekst er det godt at sørge for luft mellem forskellige grupper af tekst
• Lange, ubrudte passager af tekst kræver meget af brugeren
• Brug af ekstra linieskift, tabulering og listeform kan medvirke til at give mere luft i en tekst
RHS – Informationsteknologi – 2008
Loven om Lighed
• "Symboler, der ligner hinanden, opfattes som hørende sammen."
• Elementer med samme type funktion bør have samme udseende – og man bør vælge et andet udseende til andre typer funktionalitet
A
B
C
D
+-
?
!
@
A
B
C
D
- +
?
!
@
RHS – Informationsteknologi – 2008
Loven om Lighed
• I tekst anvendes loven om lighed også i meget stor udstrækning– Kapitel– Underkapitel– Fodnote
– Fremhævning
• Det vil nemt forvirre læseren, hvis vi f.eks skifter mellem forskellige skrifttyper i identiske situa-tioner, f.eks en kapitel-overskrift
RHS – Informationsteknologi – 2008
Loven om Lukkethed
• "Symboler, der står i samme ramme, opfattes som hørende sammen."
• Rammer er et effektivt redskab til at understrege gruppering – kan gøre det muligt at komme mere information ind på en side.
RHS – Informationsteknologi – 2008
Loven om Forbundethed
• "Symboler, der er forbundet, opfattes som hørende sammen."
• Man kan forbinde elementer med linier, farver eller overlapninger
A1
A
BC
A2
A3 B1
C1 C2
A1
A
BC
A2
A3 B1
C1 C2
RHS – Informationsteknologi – 2008
…og kombinationer (igen)
• Vi vil ofte bruge flere af lovene på samme tid, til at gruppere forskellige typer elementer
• Pas på ikke at fokusere for meget på én lov frem for alle de andre – brug mere lovene som en checkliste for dit design
• I sidste ende er målet stadig at optimere brugervenligheden og brugeroplevelsen.
RHS – Informationsteknologi – 2008 72
Opgave 7• Se på disse websites:
– www.flugger.dk– www.nike.com– www.tihiiplanet.dk– www.codan.dk– www.udeoghjemme.dk
• Vurdér, hvilke gestaltlove disse sites benytter – og hvilke de eventuelt overtræder.
RHS – Informationsteknologi – 2008
Resumé
• Web-design og web-programmering er to forskellige discipliner
• Web-design er en kreativ disciplin, som ikke involverer stor teknologisk viden
• Web-design handler om formidling af information til en slutbruger
• Målet er at give brugeren den ønskede informa-tion med mindst mulig anstrengelse
• Mange overvejelser at gøre sig, inden selve udviklingen påbegyndes.
RHS – Informationsteknologi – 2008
Opgave 8
• Website om brug af DVD-optager• En ældre person i din familie (Søren) har købt en DVD-optager med
harddisk, mest for at kunne optage serier m.v., som bliver sendt sent om aftenen. Søren er dog ikke så god til det med teknik, og orker ikke at læse den lange manual igennem, som i øvrigt er på dårligt engelsk…. Søren kunne godt tænke sig en web-site, der på enkel vis kunne informere om de vigtigste funktioner i sådan en maskine, på en måde som gjorde det let at forstå for ældre mennesker, som ikke har så meget forstand på teknik
• Du har fået til opgave at designe en prototype af sådan en website, altså ikke lave hele websiten. Overvej elementer som målgruppe, design, indhold, struktur, navigation, m.v., og lav skitser til et par af siderne, gerne på papir, i et tegneprogram eller måske PowerPoint