Struktureret Web-design

Slides:



Advertisements
Lignende præsentationer
En lille vejledning til ændring af skærmens udseende.
Advertisements

Sådan laver Du et POWER POINT program.
Trehøje-Pigerne Side 1 Vejledning til brug af hjemmesiden Det er slet ikke så vanskeligt – så brug hjemmesiden flittigt… Det er.
Værktøjer/tips og tricks - til implementering af ændringer i egen organisation Hvorfor benchmarking/evaluering Er der nogen, der ved, hvorfor vi laver.
Videregående pc-vejledning
Grundlæggende PowerPoint
Forsiden 1.Denne knap bruges når du vil taste dagens resultater ind. 2.Denne knap skal kun bruges hvis du allerede har gemt data og du finder ud af at.
Flere bekendte, lige så mange venner, men mere tid alene… - Nogle få perspektiver på ungdoms- og foreningsliv i en ”synes godt om”-kultur København 3.decemberr.
Grafik Web-udvikling med FrontPage 2003 RHS - Informationsteknologi.
SEO (Search Engine Optimization) - Hvordan bliver du mere synlig på nettet?
Torbenfeldvej Vallensbæk strand Tlf.: – – dagligt brug af vores hjemmeside •AGEN LYS har en stor og omfattende.
Arbejdspladsudvikling
De sidste undervisningstimer
Sidetyper Web-udvikling med FrontPage 2003 RHS - Informationsteknologi.
Klik på Aktivér redigering i meddelelseslinjen, Hvis videoerne i kurset ikke afspilles, skal du måske hente QuickTime eller blot skifte til PowerPoint.
Vejledning i blog-værktøjet WordPress Opdateret august 2009.
Links Web-udvikling med FrontPage 2003 RHS - Informationsteknologi.
Systemudvikling metode
Hvad er en brugergrænseflade
Sprog/billeder på Internettet
Computerens anatomi.
”Design og fremstil – med udgangspunkt i vores case – et eller flere medieprodukter, der vil kunne indgå som del af kampagnen, der skal skabe opmærksomhed.
Vejledning i blog-værktøjet WordPress Opdateret februar 2009.
Formularer (Access, del 3)
Digitalisering i Praktiken Workshops den 9. februar 2007
Kvantitative metoder
Computerens anatomi! Hvad skal du vide før du køber din egen?
Poster præsentation I modsætning til Power Point præsentationer er en poster et enkelt Billede, der skal fange med det samme. (Ligesom en annonce VS en.
Kommunikation / it.
Mindre grimt, tak.
Trivselsundersøgelse og ledelsesevaluering
Hvordan bruger jeg First Class konferencerne ?
Side-egenskaber Web-udvikling med FrontPage 2003 RHS - Informationsteknologi.
Usability på Her fungerer det godt 1.Sitet imødekommer ifølge vores testpersoner et informationsbehov hos målgruppen. 2.Sprogbrug.
Design effektive PowerPoint præsentationer Enkelt Konsekvent Tydeligt Stort Progressivt Afslut.
SEO PÅ AU.
©Jenny Bohr – Til underviserne Voksne med ADHD har ofte mange negative erfaringer med sig. Mange har fået megen skæld ud som børn, og de.
Velkommen til Hvordan vises skolens værdier bedst muligt i SkolePorten? SkolePortens fleksibilitet kan medvirke til at understøtte skolens værdier. Oplægget.
Kursus om borger.dk og brugen af digital signatur
Introduktion til Access (Access, del 1)
Validering af data (Access, del 7)
Opslagsfelter (Access, del 6). RHS – Informationsteknologi 2 Udgangspunkt Vi er ofte i den situation, at valg af en type for et felt ikke begrænser vores.
Oprettelse af tabeller (Access, del 2)
Rapporter (Access, del 5)
Navigation Web-udvikling med FrontPage 2003 RHS - Informationsteknologi.
Præsentation af Portfolio site Kim Jensens.
Spørgsmål: 1 Hvad er en knallertansvarsforsikring? Svarmuligheder: Ja
PowerPoint Kursus It-biblioteket, april 2007 Underviser: Marie.
Vejlederens kommunikation
”Et virtuelt spring over bæltet” ITMF projekt november 2003 Ella Myhring Skolebibliotekar, projektleder Højby Biblioteksbutik.
Case-opgave på HG2 uge 41,  I skal lave en slags avis til nettet – ikke nødvendigvis en avis som BT eller Politiken … det kan godt være en slags.
Trivselsundersøgelse og ledelsesevaluering Anæstesiologisk Afdeling Flere ledere
Et mærkeligt skib.
Indsæt foto: Klik på det lille fotoikon og vælg det ønskede foto i dialogboksen. Skift eksisterende foto: Klik på foto og brug derefter slettetasten til.
Fundamentale principper for brugervenlige web-sites WEB 1 IT-C 24. Feb
Rapporter (Access, del 5). RHS – Informationsteknologi – Udgangspunkt Vi har oprettet en database Vi har defineret en eller flere tabeller, og.
Introduktion til databaser (databaser, del 1)
Opslagsfelter (Access, del 6). RHS – Informationsteknologi – Udgangspunkt Vi er ofte i den situation, at valg af en type for et felt ikke begrænser.
Introduktion til Access (Access, del 1). RHS – Informationsteknologi – Fra design til udvikling Vi ved nu, hvordan vi finder et design for en database,
Interaktionsformer En begrebsmæssig model kan understøttes med forskellige interaktionsformer Interaktionsformen fastlægger centrale egenskaber: Hvordan.
Reklameanalyse Walkthrough.
Oprettelse af tabeller (Access, del 2)
Lektion 3. Tekstens byggeklodser Helene Brøndholt Nielsen, Tekstformidling på Internet, Forår 2004 Tekstens byggeklodser.
Tekstens byggeklodser
DWDK – øvelsestime 3 CSS – let the fun begin!!. Tilgængelige slides Disse slides ligger på mit public drev
Interaktive knapper Web-udvikling med FrontPage 2003 RHS - Informationsteknologi.
Kommunikation Hvad er det og hvordan udvikler vi bedst muligt sproget sammen med vores børn? Hej jeg hedder Mette og er dagtilbuddets sprogvejleder, jeg.
Formularer (Access, del 3). RHS – Informationsteknologi – Udgangspunkt Vi har oprettet en database Vi har defineret en eller flere tabeller Vi.
FORTÆL I POWERPOINT - FANTASTISKE FABLER. FORTÆL I POWERPOINT Går du med tanker om, hvordan du kan få dine elever til at lave fortællinger med tekst,
Skabelon mailopsætning
Præsentationens transcript:

Struktureret Web-design

RHS – Informationsteknologi – 2008 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

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

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

RHS – Informationsteknologi – 2008 Klassisk fejl #1 Please wait while our very fancy website loads… RHS – Informationsteknologi – 2008

RHS – Informationsteknologi – 2008 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

RHS – Informationsteknologi – 2008 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

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 Salg Kommunikation Præsentation Informa- tion RHS – Informationsteknologi – 2008

RHS – Informationsteknologi – 2008 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

RHS – Informationsteknologi – 2008 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

RHS – Informationsteknologi – 2008 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

RHS – Informationsteknologi – 2008 Klassisk fejl #2 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! Total nize!! That’s how we roll in 4000 RHS – Informationsteknologi – 2008

RHS – Informationsteknologi – 2008 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

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

RHS – Informationsteknologi – 2008 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

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

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

RHS – Informationsteknologi – 2008 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

RHS – Informationsteknologi – 2008 Dette er nemt at læse Dette er svært at læse RHS – Informationsteknologi – 2008

RHS – Informationsteknologi – 2008 Opfattelse af farver Alle har vel forskellige opfattelser af farver, men der er generelle trends: Fare Stands Pas På Temperament Forsigtig Varsom Mulig fare Rolig Tryg Natur Alt i orden Dyster Cool Maskulin Ren Uskyldig Feminin Neutral Kølig Himmel og Hav RHS – Informationsteknologi – 2008

RHS – Informationsteknologi – 2008 Opfattelse af farver ...men farveopfattelse er også kulturelt betinget Kina: Glæde Kina: Maskulin Kina: Venlig Kina: Feminin Kina: Elegance Indien: Sorg Kina: Feminin RHS – Informationsteknologi – 2008

RHS – Informationsteknologi – 2008 Opfattelse af farver Vi kan let forvirre en bruger ved at anvende ”forkerte” farver ADVARSEL: vil du virkelig slette din harddisk? NEJ JA RHS – Informationsteknologi – 2008

RHS – Informationsteknologi – 2008 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

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

RHS – Informationsteknologi – 2008 Skrift (typografi)‏ Det var meget nemmere i gamle dage... RHS – Informationsteknologi – 2008

RHS – Informationsteknologi – 2008 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

RHS – Informationsteknologi – 2008 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

RHS – Informationsteknologi – 2008 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

RHS – Informationsteknologi – 2008 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

RHS – Informationsteknologi – 2008 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? Fortryd Fortsæt RHS – Informationsteknologi – 2008

RHS – Informationsteknologi – 2008 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

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) Min lille hjemmeside Om mig Min familie Min hund CV Side 2.1 Side 2.2 Side 1 Side 2.3 Side 2.4 RHS – Informationsteknologi – 2008

Hierarkisk navigation (dyb) Fri struktur, men lang afstand til ”bunden” af websiten (træ-struktur) Og så videre… Side 3.1 Side 4.1 Side 2.1 Side 3.2 Side 4.2 Side 2.2 Side 4.3 Side 1 Side 2.3 Side 3.3 Side 2.4 Side 3.4 RHS – Informationsteknologi – 2008

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

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 RHS – Informationsteknologi – 2008

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

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

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

RHS – Informationsteknologi – 2008 Navigation via menuer Hvor skal menuen være…? Naturligt for læseretning Bruges i programmer ? RHS – Informationsteknologi – 2008

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

RHS – Informationsteknologi – 2008 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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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 + - ? ! @ RHS – Informationsteknologi – 2008

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

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

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 B C 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

RHS – Informationsteknologi – 2008 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

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

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 RHS – Informationsteknologi – 2008