i dag handler det om :

I dag handler det om :

Websidene som skal leveres

– Hva jeg legger vekt på – Organisering av web-sider– Andre nyttige tips for web-sidene

Delprøven Husk i øvingstimene en uke fra nå:

individuell prøve. Møt opp i øvingstimene.

Tre ulike medier:

Skriftlig rapport Webside Muntlig presentasjon

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)

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

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

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

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

Eksempel

Sports Business Entertainment Politics

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

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.

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

Litt annerledes enn slik vi tenker oss

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”

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”

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

Farger

Farger bør ha en funksjon Blir det for mange farger, forsvinner

muligheten for signalfunksjon Animasjoner og blinking er ofte

irriterende

En farge kan uttrykkes i HSL-systemet

Hue (farge)Saturation (metning)Luminance (lysstyrke)Hver av komponentene uttrykkes ved et tall fra

0 til 255

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

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

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

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

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

Men

De er vanskelige for synshemmede De er vanskelige å hente inn med f.

eks. telefonmodem De gjør nettlesernes oppgave

vanskeligere

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

Fanekort – men for mange nivåer?

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”

”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”

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

Å 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?

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