Gruppeprosjektet

Publisert 22. mai 2007 av Thomas
Kategorier: HUIN105, Obligatoriske oppgaver

Nettsiden finner her: Høyden Universitetskart

Nettsiden skal hjelpe kommende og allerede eksisterende studenter (og ansatte) med å få nyttig informasjon om universitetsbyggene på Nygårdshøyden.

Slik ser layout og strukturen ut på en av nettsidene. Klikk for større bilde:
nettsiden

Usability analyse

Publisert 26. april 2007 av Thomas
Kategorier: HUIN105, Obligatoriske oppgaver

Jeg vil påpeke mangler på nettsiden http://expert.no og forklare hvordan jeg ville ha forbedret disse. Det er en forholdsvis god nettside som fungerer for sitt formål, men den har en del irriterende mangler. Jeg tar utgangspunkt i Steve Krugs bok ”Don’t make med think”.

Forsiden
Expert.no har ingen imponerende forside. Forsiden er fylt av seks små bokser og en stor boks. Den store boksen er en reklame for Expert; ”overraskende lave priser”. Det er for så vidt en måte å presentere at du ikke trenger å forlate nettsiden, men de få produktene som er vist på forsiden har ingen pris!

Krugs fact of life #1 sier at vi leser ikke, men skanner nettsider. I følge denne retningslinjen er forsiden bra; mange bilder og lite tekst. Men de fleste bildene er uinteressante, forstyrrende og kan kategoriseres som ”happy talk”. Bildene jeg snakker om er ”overraskende lave priser”, ”Experthjelp til selvhjelp” og ”påmelding til generalforsamlingen”.

Krug har listet opp en del punkter som en forside bør inneholde. Forsiden bør fortelle hva Expert er (eng: site identify) og formålet for nettsiden (eng: mission). Ingen av disse blir nevnt eksplisitt. Ut ifra boksene på forsiden kan man forstå at Expert selger hvitevarer/brunvarer. Krug forteller videre at forsiden må inneholde gode tilbud (eng: teases). Expert forteller med den største boksen at det finnes lave priser og viser eksempler på noen produkter, men som sagt det er ikke tilknyttet noen pris til produktene. Dermed vet man ikke om de er gode tilbud. Forsiden bør også gi troverdighet til besøkende. Hvis Expert mener å ha så overraskende lave priser, hvorfor ikke vise noen av disse lave prisene på forsiden?

Hvis en besøkende har forvillet seg på nettsiden, sies det at forsiden skal være en ”fresh start” og at forsiden enkelt skal vise hvor man skal ta steg nr to på nettsiden. Av det som kan være nyttig å få ut av forsiden er eksempler på produkter som Expert selger. Forsiden viser ikke hvordan man skal begynne å navigere seg rundt på nettsiden. Man vil forstå hvor man blir ført til hvis man klikker på et produkt. Men å klikke på et bilde av et barn fra u-land eller med teksten ”påmelding til generalforsamlingen” er destinasjonen mer vag. Helt øverst finnes det en horisontal meny, hvor de fleste besøkende ville ha brukt for å navigere seg videre fra forsiden.

Forsiden og navigasjon
Bildet viser forsiden og navigasjonsmenyen for Produkter. Man ser at menyen består av tre nivåer. Klikk for større bilde.

Navigasjon og orientering
Jeg begynner med en task testing, hvor jeg skal finne informasjon og pris om mobiltelefoner. Boksene på forsiden forteller meg ingenting, så jeg vil velge mellom ”nettbutikk” og ”produkter” i menyen. Her vil jeg bruke mye tid på å finne ut hva som egentlig er forskjellen på disse to. Vi kommer da inn på Krugs fact of life #2: ”We dont make optimal choices. We satisfice”. Hadde jeg trykket på nettbutikk, ville jeg overrasket kommet til www.bestbuy.no. Trykker jeg heller på produkter, finner jeg at ingen produkter her har en prislapp knyttet til seg. Kun en link til bestbuy.no.

Det mest irriterende designet på expert.no er navigasjonen for produktmenyen. Her er det veldig vanskelig å navigere seg, hvor man må være stø på hånden hvis man skal bla seg langt nedover i den hierarkiske menystrukturen. Produktmenyen har maksimalt tre nivåer. Når man har valgt et produkt, blir ikke dette valget uthevet i menyen (eng: you are here). Skal man velge på nytt, må man begynne fra starten av. Nettsiden viser heller ikke de ulike nivåene du har valgt i produktmenyen (eng: breadcrumbs). Når man viser oversikten over alle produkter innenfor en bestemt kategori, vises sidenavnet (eng: page name). Sidenavnet er produktkategorien du har valgt. Men hvis man velger et bestemt produkt, forsvinner dette sidenavnet. Helt øverst til venstre finner man Experts banner (eng: site ID), som fører til forsiden. På enkelte sider kommer tagline til Expert fram; ”innrøm at du liker det”, men expert.no har ingen velkommen tekst (eng: welcome blurb).

Hyperlenker
Krug skriver ”make it obvious what’s clickable”. Det er det ikke på expert.no. Linker som består av tekst skiller seg ikke ut fra vanlig tekst, kun når muspekeren er over linken. Det fører til mye tekning om hva som er klikkbart. Ikke alle knapper viser en muspeker som sier at dette er en link. Dette gir ukonsistent design.

Når man holder muspekeren over en bestemt kategori i produktmenyen, vil det komme opp en ny undermeny. Kan man klikke på kategorien på nivå en? Nei, man kan kun klikke på kategorien på det siste nivået. Men slik er det ikke for kundeservice menyen. Her kan man klikke på tekst i nivå en selv om det finnes nivå to. Dette gir igjen ukonsistent design.

Som en kompensasjon for ”breadcrumbs” har expert.no en tilbake-knapp på sidene for et bestemt produkt. Dette er en JavaScript funksjon, som tilsvarer tilbake knappen i nettleseren. Sett at man søker på et produkt på http://www.google.no og kommer direkte til en produktsiden. Da vil tilbake knappen føre til www.google.no, og ikke opp et hakk i hierarkiet til expert.no, som nok var intensjonen for Expert. Dette er et eksempel på dårlig ”convention” av tilbake knappen.

Søkefunksjonen
Søkefeltet er lett tilgjengelig på alle nettsider, men søkemotoren er dårlig. Man må bruke mye tid på å tenke hvordan denne søkemotoren fungerer, for så tenke ut gode søkeord for å finne det man vil. Et eksempel er å søke etter Expert butikker i Bergen. Jeg taster inn ”bergen” og forventer å få opp alle butikkene i Bergen. Jeg får ett resultat som viser butikken i Bergen sentrum, og ikke dem som er i Åsane. Etter en del tekning viser det seg at den kun søker etter tekst i navnet eller adressen. Søker man etter produkter, vil noen av beskrivelsene for resultatene være så kryptisk, at de ikke har noen nytte.

FORBEDRINGER
Forsiden
All ”happy talk” kan tas bort, unntatt reklamen ”overraskende lave priser” som kun bør gjøres mindre. Tilbudene som vises bør ha en pris knyttet til seg, for å faktisk vise at det er lave priser. Andre elementer som kan vises på forsiden er ikoner og linker til de ulike produkttypene som Expert har.

Navigasjon og orientering
Linken til nettbutikken bør fjernes, og heller inkluderes i den allerede eksisterende nettsiden for Expert. På den måten sparer det besøkende flere steg for å finne informasjon og pris om et produkt. Selve produktmenyen må også endres. Når man klikker på produkt kan det vise nivå en slik det gjør i dag. Når man klikker på en av disse produkttypene, vil det vises en vertikal meny til venstre med nivå en for alle produktene, samt nivå to/tre for det valgte produkt. På denne måten blir det lettere å navigere seg, samt at man får vite hvor man er i den hierarkiske strukturen.

Rett nedenfor den horisontale menyen bør man vise veien man har tatt i meny strukturen (eng: breadcrumbs). Nedenfor ”breadcrumbs” bør sidenavnet komme opp. Til høyre for banner (eng: site ID) bør tagline vises.

Hyperlenker
Alle hyperlenkene bør skille seg klart ut fra vanlig tekst, samt at muspekeren skifter når den holdes over en link. Hvis man bruker ”breadcrumbs” kan man fjerne tilbake-knappen, men hvis den skal beholdes må den føre til et hakk høyere opp i hierarkiet.

Søke funksjonen
Søkemotoren bør være kraftigere, og løse problemet som beskrevet ovenfor. Resultatlisten må være mer beskrivende og ikke kun inneholde produktnummeret. Den bør også vise hvilken kategori det gjelder og navnet på produktet.

Kilder:
• Krug, S. (2006): Don’t make med think – A common sense approach to web usability. New Riders Publishing
• Expert: http://expert.no

Public Domain Poem – Versjon 2

Publisert 29. mars 2007 av Thomas
Kategorier: Øvinger, HUIN105

Som det står i den obligatoriske oppgaveteksten for Public Domain Poem, skulle man etterhvert lage diktet med CSS. Slik ble versjon 2.

Diktet uten CSS finnes her.

Photoshop – Film plakat

Publisert 23. mars 2007 av Thomas
Kategorier: Øvinger, HUIN105

Her er min film plakat (Klikk for større bildet):

Postman Blues

Web Narrative

Publisert 23. februar 2007 av Thomas
Kategorier: HUIN105, Obligatoriske oppgaver

Første utkast av nettsiden for fortellingen er her.

EDIT:
Den obligatoriske oppgaven er nå ferdig. Se link ovenfor

“Web 2.0 … The Machine is Us/ing Us”

Publisert 19. februar 2007 av Thomas
Kategorier: Diverse

Fant en video på YouTube som kan sees relevant til dette faget.

Videoen er lagt ut på YouTube av mwesch under creative commons.

Public Domain Poem

Publisert 8. februar 2007 av Thomas
Kategorier: HUIN105, Obligatoriske oppgaver

Du kan finne min obligatoriske oppgave nr 2 (øving 4) ved å klikke
her

Semiotisk analyse av KrF sin nettside

Publisert 2. februar 2007 av Thomas
Kategorier: HUIN105, Obligatoriske oppgaver

Jeg har valgt å analysere nettsiden for det politiske partiet Kristelig Folkeparti (KrF).

KrF’s logo og banner

KrFLogoBanner1

Det første som møter besøkende på nettsiden er KrF sin logo og banner. Selve logoen til KrF er et hjerte hvor ”KrF” bokstavene er plassert midt i hjertet. Opprinnelig er fargen på både hjertet og bokstavene røde. Dette er denotasjonen av logoen. Ved bruk av begrepet konnotasjon kan rød fargen og hjertet symbolisere varmen som kommer fra KrF. Logoen kan være en metafor hvor KrFs saker kommer fra hjertet. Som nevnt flere steder på deres nettsider, har KrF mange hjertesaker.

Banner består av både et bilde og et budskap. Det er barnet som har hovedfokuset på bildet, hvor resten av bildet er helt eller delvis uklart. Barnet blir holdt av en voksen person. Opphavet (eng: provenance) til hvorfor et barn og en voksen person er med på bildet er fra kristendommen hvor livet begynner som å være et barn og sluttes som en eldre person. Bildets konnotasjon er at det er et godt samhold mellom den eldre personen og barnet, og omsorgen og nestekjærligheten er godt synlig. Siden besøkende får øyekontakt med barnet, kan det bety at barnet føler seg trygg på KrF sine nettsider. Man bør da velge KrF siden (i hvert fall) barna føler seg trygge. Dette er et eksempel på en metafor.
Nettsiden for blant Bergen KrF har en banner som viser to barn som holder rundt hverandre, smiler og ler. Konnotasjonen min er at barna har det gøy og har et bra liv. Dette kan stamme fra at dette partiet har fordelt sine ressurser på en bra måte.

Banner2

Jeg skal nå nevne det konnotative synspunktet på budskapet ”Bruk hjertet. Og hodet. Og stemmen”. Dette budskapet er godt sammenbundet med bildet av barnet og den eldre personen. ”Bruk hjertet” kan bety omsorg som er uttrykt på bildet. Man ser også at barnet er plassert nært hjertet til den eldre personen. Som nevnt står KrF sentralt i hjertet. Bruker du hjertet, vil du da også bruke (stemme på) partiet. Videre i budskapet står det ”Og hodet”. Du kan være smart og stemme på dette partiet eller det kan tenkes at ordet ”hodet” refererer til barnets hode som er hovedfokuset på bildet, og at dermed KrF tenker mye på barna. ”Og stemmen” kan igjen kobles til barnet på bildet. Barnet holder hendene sine foran munnen, men det ser ut som munnen er åpen og at barnet ønsker å bruke stemmen sin til å stemme på partiet.

Farger og design
Et spørsmål som blir nevnt i KrF sin ideologi er ”hvordan skape et varmere samfunn?”. KrF har allerede tatt det første steget ved å bruke lyse farger på hele nettsiden, spesielt inkludert logo og banner, hvor lyse farger kan symbolisere varme. I tillegg har logo og banner runde kanter, istedenfor firkantete, som kan igjen uttrykke varme. Fargene har sin opprinnelse (eng: provenance) fra kristendommens liturgiske farger som er hvit, rød, grønt og lilla (www.karmoykirken.no). Oransje fargen som er mye brukt kan sees som en nær fargegruppe av rødt. I tillegg brukes svart, som er ideelt å ha til hvit bakgrunn når tekst skal leses. Et annet eksempel på bindeledd mellom fargene og kristendommen er fargen rød og oransje som symboliserer Ånds-symbolet flammer (www.karmoykirken.no).

I menyen til høyre finner jeg en rund oransje boks for medlemmer. Fargen er helt identisk til fargen i logo og banner. Min konnotative perspektiv er at boksen vil få mye fokus ettersom boksen er den eneste delen på nettsiden som har lik bakgrunnsfarge til banner. Det som får fokus er det som er viktig. Er det da viktig å være medlem? En tredje del som tar mye fokus på nettsiden er to levende bilder (eng: motion graphics) på forsiden. De tar fokus på grunn av størrelsen og de sterke fargene, spesielt med tanke på at oransje fargen blir brukt igjen. Alle disse tre delene (logo & banner, levende bilder og boksen til høyre) er atskilt med mye ”luft” mellom seg. Samtidig henger de sammen ved hjelp av størrelsen på delene, like fargene og at de tar mye fokus til besøkende. Dette er et eksempel på begrepet framing fra Gunther Kress’ Multimodal Discourse. Det som er viktig for KrF å formidle på nettsidene er dermed budskapet i banner og å få besøkende til å bli medlemmer.

Bilder og tekst
Bilder blir mye brukt på nettsiden. De fleste bildene som blir brukt er portrett bilder, primært av politikerne i KrF. Det ser man spesielt i bildegalleriet, hvor det kun er bilder av politikerne. På forsiden har hvert innlegg et bilde og i tillegg finnes det to levende bilder inne mellom innleggene. Det første reklamerer for det nye medlemsbladet. Siden det er et levende bilde og er stort tar det mye fokus. På den måten prøver KrF å ”lokke” besøkende til å bli medlemmer for å kunne få dette bladet. Det andre levende bildet reklamerer for en bok som alle kan kjøpe.

Det er viktig at informasjonen på nettsiden blir presentert på en god og klar måte, og det har KrF tatt hensyn til ved å bruke svart tekst på hvit bakgrunn som er den ideelle kontrasten. Det brukes ulike fonter for å skille overskrift, ingress, resten av teksten og metadata. Jeg har ikke funnet bruk av intertextuality blant teksten på nettsiden.

Andre ”modes”
Man navigerer seg på nettsiden ved hjelp av en horisontal og vertikal meny. Den horisontale menyen inneholder kun de viktigste lenkene, blant annet lenken ”Bli medlem”. Den vertikale menyen er hovedmenyen og inneholder alle lenker. Det øverste meny elementet er ”logg inn” som er kun for medlemmer. Igjen har KrF fokuset først og fremst på medlemmer og det å verve nye. Lenkene på nettsiden utgjør en navstruktur, begrep som er hentet fra Fagerjord’s Web-medier. Men den vertikale menyen har også en hierarkisk struktur.

Nettsiden bruker flere sosiale nettverk (eng: (online) social network). Eksempler på det er debattforumet og bli et medlem. KrF har også et internweb for blant annet medlemmer. Her inne kan det være enda flere eksempler på sosiale nettverk.

Verken video eller lyd er ikke blitt brukt på nettsiden.

KrF sin ideologi
Ideologien bygger på de kristne grunnverdiene; menneskeverdet, nestekjærlighet og forvalteransvaret. Det er primært banner som presenterer denne ideologien. Bildet av både et barn og en voksen person symboliserer menneskeverdet, hvor alle har samme verdi. Som forklart ovenfor ser man at det er mye omsorg mellom barnet og personen, som symboliserer nestekjærlighet. I begge bannerne kan man se at barna er glade og fornøyde. Dette kan bety at partiet har gjort en god og rettferdig forvaltning av ressurser. Bildene på nettsiden er både av mennesker i alle aldre; alle er like viktige, alle har samme verdi. Kristendommen har satt sine spor på hele nettsiden, blant annet ved kun bruk av kirkens farger.

Kilder

  • Fagerjord, A. (2006): Web-medier – Introduksjon til sjangre og uttrykksformer på nettet. Universitetsforlaget
  • Karmøy kirkelig fellesråd: Symboler i kirken. http://www.karmoykirken.no/symboler.htm
  • Kress, G., Van Leeuwen, T. (2001): Multimodal Discourse – The modes and media of contemporary communication. Arnold
  • Kristelig Folkeparti: http://www.krf.no

Min første post

Publisert 19. januar 2007 av Thomas
Kategorier: Diverse

Velkommen til min blogg!
Denne bloggen ble opprettet i forbindelse med faget HUIN105: Webdesign og webestetikk.
 


Follow

Get every new post delivered to your Inbox.