I dag handler det om :

1. I dag handler det om : • Websidene som skal leveres • Hva jeg legger vekt på • Organisering av web-sider • Andre nyttige tips for web-sidene

2. Delprøven • Husk i øvingstimene en uke fra nå: individuell prøve. Møt opp i øvingstimene.

3. Tre ulike medier: • Skriftlig rapport • Webside • Muntlig presentasjon

4. Hvordan er web-format forskjellig fra papirformat? • Ulik fasong • Web-sider er bredere enn de er lange • Papirsider er lengre enn de er brede • Papir kan skrives ut med høy-oppløsnings-teknologi - skjermen har lavere oppløsning • I skrevet tekst er det ikke nødvendig med egen støtte for navigasjon • Side følger side • Forsiden med identifikasjon er alltid lett tilgjengelig • mens hver web-side selv må sørge for identifikasjons- og navigasjonshjelp( ulike linker, overskrifter, logo osv)

5. Skjerm og web-side • Aspect ratio vanligvis 4/3 • Display-størrelse er vanligvis 800 pixler i bredden og 600 pixler i høyden • Nettleserens border med titler og navigasjon tar plass – • Så selve web-siden disponerer ikke mer enn 760/420 pixler, for de fleste lesere

6. Spesielle virkemidler for web-formatet • Animasjon • Forandring i bildet, blinking • Lyder, musikk osv. • Videoklipp • Muligheter for interaktivitet

7. Identifikasjon og brukervennlighet • Enhver web-side må ha en identitet, uttrykt ved et navn • Det må alltid være mulig for bruker/leser å finne ut hvem sin web-side hun er på • Og /eller hva siden heter • Hvor hun er innenfor nettsiden • Hva som er tilgjengelig fra denne siden • Hvor hun kan gå for å komme videre • Hvordan hun skal finne det hun eventuelt ser etter

8. Krav til navn på siden • Tydelig navn (Et firma vil vanligvis plassere logoen sin svært synlig) • Bruk en kombinasjon av plassering, størrelse, fonter og farger for å vise hva siden heter • Navnet på siden må være dekkende og korrekt • Hvor brukeren er, kan markeres i en oversikt ved at • Navnet er opplyst eller blinker • Ved en peker • Ved å forandre tekstfarge eller farge på knappen i forhold til omkringliggende knapper • Ved å gi de andre knappene farge

9. Eksempel • Sports • Business • Entertainment • Politics

10. Bruk også ”brødsmuler” eller ”cascading titles” • Forteller hvordan du kom dit du er • ABC-Mobile Corp.Home>Products>Sports Cars>ABC Super Coupe>Specifications • Kan stå øverst på siden, og hvert av leddene kan være klikkbare

11. Ulike navigasjonsmuligheter • Vise menyen hele tiden,slik at bruker kan klikke seg dit hun vil • Ha en knapp for ”tilbake til menyen” eller ”tilbake til hovedsiden” • Bruke knapper med ”previous” og ”next” (spesielt hvis sidene bør leses i sekvens) • Bruke linker til andre deler av siden eller til andre sider • Opprette en søkefunksjon • Scrolling kan brukes, men bare i spesielle tilfeller. Blir ofte ikke lest.

12. Internett-brukeren har det travelt • Forskjell på de som surfer og de som leter etter noe spesielt • Griper det første – ikke nødvendigvis det beste • Tenker ikke etter hvordan siden fungerer- de gjetter seg fram • Venter ofte ikke på nedlasting av bilder • Orker ofte ikke å gå inn i scrolling • Vil gjerne at en web-side skal se ut ”som vanlig”, med logoen øverst til venstre, f. eks. • Setter pris på at noe kan gjenkjennes

13. Litt annerledes enn slik vi tenker oss

14. Folk leser ikke web-sider - • De skanner dem • De bruker tidligere erfaringer til å forstå en side så raskt som mulig • De vil klikke på noe • ”Dont make me think”

15. Tekst på en web-side • Det er mindre behagelig å lese en web-side enn en papirside • Må være mindre tekst enn på papir! • ”Get rid of half of the words on each page, then get rid of half of what´s left”

16. Leselighet • Svart tekst på hvit bakgrunn er enklest å lese • Beste linjelengde er 10 til 12 ord pr. linje • Skill overskrifter og tekst tydelig • Bare to fonter og to størrelser på en og samme side • Forsiktig med ”store bokstaver”. De er tungt leselige • Linjemellomrom som avsnittsskille (NB! Gjelder ikke hvis man designer sider som også skal passe for synshemmede) • Fakta som skal sammenlignes, bør stå under hverandre for best effekt

17. Farger • Farger bør ha en funksjon • Blir det for mange farger, forsvinner muligheten for signalfunksjon • Animasjoner og blinking er ofte irriterende

18. En farge kan uttrykkes i HSL-systemet • Hue (farge) • Saturation (metning) • Luminance (lysstyrke) • Hver av komponentene uttrykkes ved et tall fra 0 til 255

19. Fargenyanse • Hue: Farge/:nyanse .Fra 0 - 255 : • rødt • orange • gult • grønt • blågrønt • blått • fiolett

21. Saturation: metning • Avhenger av mengden grått • Metning fra 0-255 :først grå, og så en grået versjon av nyansen fram til ”ren”, mettet farge • Samme tall for metning i ulike nyanser gir avstemthet i fargeuttrykket

22. Luminance: lysstyrke • Har å gjøre med mengden svart/hvitt • Luminance fra 0-255: først svart, så en mørk farge, og gradvis lysere farge inntil hvitt • Variasjoner i lysstyrke gir tydeligere kontraster enn variasjoner i metning eller nyanse

24. Fargehjulet • består av hovedfargene (nyansene ) i spekteret, men organisert i en sirkel: • rødt møtes med fiolett • Farger rett overfor hverandre i fargehjulet bør ikke ha felles grenser • Farger med jevn avstand i fargehjulet virker avbalansert

27. Rammer/frames . Ofte tre faste: • En for navnet • En for menyen • En for innholdet • Fordeler: • Menyen er alltid tilgjengelig for bruker • Menyvalgene står alltid på samme plass • Tittelen er alltid der, man vet hvor man er • Rammen endrer seg ikke eller blaffer opp hver gang man skal ha ny

28. Men • De er vanskelige for synshemmede • De er vanskelige å hente inn med f. eks. telefonmodem • De gjør nettlesernes oppgave vanskeligere

29. Menyer • Kan gå horisontalt eller vertikalt • Kan plasseres hvor som helst, men bør være samme sted på alle sidene på et web-sted • Fanekort(tabs) er et alternativ • Menysystemet bør være identisk fra side til side på hele nettstedet –den bør derfor ikke ta opp for stor plass • Vær nøye med navnene på menyvalgene • Hva er best : • Jobber • Muligheter for engasjement • Jobb-O-Rama

30. Fanekort – men for mange nivåer?

31. Tagline • En kort frase som karakteriserer hele siden – • Spesielt bra i markedsføring • ”The single best source for facts on the net” • ”The online music network” • ”Books you thought you´ll never find” • ”Paradishus- din vei til paradis”

32. ”Brukervennlighet”. Brukeren må aldri være i tvil om Hvor en knapp fører Hvorfor knappen har det navnet Om den er klikkbar eller ikke Hvor man skal begynne Hva som er viktigst på en side ”Don t make me think”

33. Dette bør være på alle hjemmesider: • Side-identitet (navn) Står gjerne høyt oppe • Seksjoner og underseksjoner som kan nåes (står også høyt oppe) • En måte å søke på • Best om brukerne kan bruke alle slags ord her – ikke velge mellom ulike nøkkelord

34. Å definere brukere • Hvem er brukerne? • Hvorfor er de på denne siden? • Hvordan kom de dit? • Alder? Kjønn? Økonomi? • Har de vært på denne siden før? • Hva slags skjermoppløsning har de? • Hvilke programmer har de? • Ofte også : hvilken web-leser brukes?

35. Hva er viktig på web-siden?(vi ser nå bort fra innhold) • God identifikasjon.Hva slags side?Hvem sin? • Oversiktlighet • Tydelig merking (overskrifter, menyer) • Enkel navigasjon (Meny,”forrige”,”neste”) • God intern linking • Brukervennlighet • Behagelig layout, avbalanserte sider,fornuftig fargebruk • Dekkende navn på kapitler/linker • Lettleste tekster