Photoshop assignment

Her er linken til photoshop plakaten:

Plakaten

Skrive oppgave – Oblig 2

HUIN 105

Hurtigruten

Skrevet av: Erik Ye

 

Innledning

I denne oppgaven skal vi se på nettsiden hurtigruten. Adressen for hurtigruten er http://www.hurtigruten.com. Vi skal se på layouten, funksjonaliteten nettsiden og teste siden ut med tre forskjellige scenarioer. Finner brukerene frem til de informasjonene de er ute etter? Kan man klikke på bilder? Tekster? Er det intuitivt? Hvor lett er det å bestille en reise? Nettsiden vil bli testet i Safari 3.1 (MAC version).

Analysen

Layouten

Det første vi får frem når vi klikker inn på nettsiden, er en side på engelsk, med generell informasjon om hurtigruten. Første inntrykket vi får er at det finnes “Hurtigruten” i flere land, som f.eks i England, Frankerike, Tyskand, Sverige, Danmark og USA, som vi kan klikke inn på i venstre meny. Vi kan også komme inn på siden med endelsen .no, noe som er vanlig for norske brukere. Her ligger den første feilen, taster vi http://www.hurtigruten.no får vi frem den samme siden som om vi taster inn .com endelsen. Her burde det vært at hvis brukeren taster inn .no endelsen vil brukeren automatisk få opp nettsiden som innholdet det norske innholdet, istedet for å gå inn på hovedsiden også trykke på “Norway” en gang til.

Når vi klikker oss videre, får vi plutselig mye mer informasjon. Her har de brukt standard venstre og top meny (Web navigations conventions, s60). Flere menyer, reklamer, og bilder. Siden gir oss en “profesjonell feel”, layouten og designen er friskt og rent, ikke for mye farger eller for lite, men akkurat passe. Grå og svart tekst for å skille mellom overskrift og innhold. Ganske raskt mister brukeren oversikten på siden. Skal brukeren klikke på planet hurtigruten? Annonsen i midten? Lete på topmenyen eller venstre menyen? Eller kanskje lese midten på siden? Med andre ord har startsiden for mye “noise” (Keep the noise down to a dull roar, s38). Som f.eks webkamera bilder av forksjellige stedene er kjekt å ha, men kanskje ikke på forsiden. Dette tiltrekker for mye oppmerksomhet, og brukere må bruke flere minutter før brukeren oppdager at han/hun skulle egentlig bestille billeter til for en rundreise til Kirknes. 

Layouten for bannere, annonse, og menyer er også forvirrende for en vanlig bruker. Menyen ligger ved venstre siden av banneren, noe som er forvirrende for brukerene. Brukerene kan lett tro at hele biten er en banner.

Dette er egentlig tre forskjellige annonser. Den til venstre er der hvor brukerene kan bestille billetter, midten er kampanjesalg, og den helt til høyere er en flash basert side med informasjon om hurtigruten. Ved første øyekast kan den i midten virke som to forksjellige annonser, legg merke til den grå baren under annonser, den er delt i to. Den blå og hvite fargen skiller også annonsen fra hverandre, slik at det ser ut som to annonser, men i virkeligheten peker begge to til den samme siden. 

Som vi kan se, burde de som har laget siden, dele opp dette skikkelig, også benytte ting som er best kjent for brukerene, som f.eks Venstre meny, banner, topmeny osv. (Internet best practices). Ikke bruk alt for store bilder, dette bare irriterer brukerene. Ha heller annonsene mer skjult, slik at brukeren kan konsentrere seg på hva faktisk brukeren er ute etter. F.eks finne ut når båten går.

 

Funksjonaliteten

Når det gjelder funksjonaliteten har Hurtigruten ikke spart noe krutt. De har lagt til de nødvendige funksjonene som bestilling av reise og hvor skipene ligger (real time). De har også lagt til mange unødvendige, men kjekt å ha funksjoner som webcam bilder av stedene, interaktiv flash side for informasjon av forskjellige reiser, og kampanjetilbuder i flash. Helt klart at ting ser mye finere ut i flash, men folk med eldre pcer sliter med å få vist flash, pga det krever for mye systemkraft, og hva med de som bruker eldre versjoner av browsere som ikke støtter flash? 

Hurtigruten har flere forskjellige bestillingssystemer. En for hurtigruten, hurtigbåt, ferge og buss. Vi skal kun fokusere på hurtigruten. For å komme inn på denne bestillingssystemet klikker brukeren inn på “Online booking”. Skjemaet er klart og tydelig, vi får også se et kart på høyere side. Bestillingen skjer stegvis, hvis brukeren gjør feil, eller ønsker å gå tilbake, får brukeren en irriterrende popup beskjed, pga. PHP post ($_POST) metoden. Brukeren får heller ingen feilmelding før brukeren er helt ferdig med registreringen. Disse feilene burde de få fikset på. Fjern PHP meldingen, og fiks slik at feilmeldingen  popper opp i “realtime”. 

Navigerings menyen til venstre er også ganske misvisende. Alle valg har en pil foran seg, man skulle trodd at det var undermenyer på alle seksjonene, men det er ikke det. (Web Navigation 101, s 54). Her burde de fjernet pilene på seksjonene som ikke har undermenyer. 

Scenarioer

Vi har sett på layouten og funksjonalitetene, men hvordan fungerer dette i praksis? Under skal vi teste ut systemet ved å gå gjennom tre forskjellige scenarioer. 

 

Scenario 1 (Testet 17.april):

Brukeren ønsker en reise fra Bergen til X, og reise hjem dagen etter. 

 

Vi går inn på billetbestillings systemet, velger en reise fra Bergen til Kirknes. Vi velger å reise fra den 24. april, men så får vi en feilmelding på at det er ingen ledig kabin. Vi prøver igjen, og velger å reise på den 30. april og da gikk det.

 

Scenario 2 (Testet 17. april):

På vegne av en utenlandsk venn vil brukeren vite datoen for første tur til våren der Hurtigruten går innom Geiranger. 

 

Igjen står det ingen bestemt tidsliste, brukeren må gå gjennom billettsystmet for å finne ut. Det ser ikke ut som det er mulig å finne ut om båten går gjennom diverse steder, derfor velger vi distansereise fra Bergen til Geiranger. Her kan vi se at den første tilgjengelige turen fra Bergen til Geiranger er 19.april.

 

Scenario 3 (Testet 17. april)

Brukeren vil vite når båten ankommer Tromsø.

 

For å sjekke ankomsten er kanskje det beste på hurtigruten. Nok en gang tilbake til billetsystemet. Vi velger distansereise fra Bergen til Tromsø, og velger ønsket dato for avgang. La oss velge 19.april, og vips kommer ankomstiden under reisedetaljer: 

 

Ankomst Tromsø: 23.04.2008 14:30.

 

 

Oppsummering

Nettsiden hurtigruten har utseende til en profesjonell side, men som de aller fleste reisesidene mangler siden informasjon, eller ikke gode nok tilbakemeldinger, og store reklamer som forvirrer brukerene. Bestillingsprossesen er grei, men mangler løsninger for “what if” problemer som f.eks ingen skip kan frakte biler, ingen ledige lugarer osv. Dette fører til at brukeren bare rett og slett ringer i fremtiden. Siden har også unødvendige funksjoner som flash visning/reklame av hurtigrutenes reiser, dette er bare bortkastet på siden, i og med at kunden må klikke på linken for å se visningen.  Sjekke hvor båten er i en hver tid og webcam bilder er kjekt å ha, men implementer viktigere ting som f.eks hvilket destinasjoner båtene går gjennom, fjern pdf filer på nettsiden, og lag konsistent layout. 

 

 

Obligatory Assignment #2 – Web Narrative

http://huin.uib.no/~eye025/huin105/oblig2/

Siden er validert (XHTML og CSS). Har bare ikke lagt til validert ikonene.

Skrive oppgave 1

HUIN 105 Oblig. Skriveoppgave 1

Semiotisk analyse av et norsk politisk webside.

I denne oppgaven har jeg valgt å analysere det norske Arbeiderpartiet (AP). Websiden deres er http://www.dna.no (Den Norske Arbeider Partiet).

Farger, bilder, videoer…

Hvis vi starter med fargene på siden, kan vi se at AP har stort sett brukt fargen rød. Rød fargen assosieres med “Venstre” og Arbeiderpartiet kan ses på som et venstre parti. Rødfargen er en veldig sterk farge, som tiltrekker mye oppmerksomhet. Oppmerksomhet er kanskje også et av punktene som AP er ute etter.

Sitat (discourse side 27):

Colour also offers a spesific sensory apeal, via sight and its physiology, and via both the phsyiogial/expreriental meanings of colour – the meanings deriving from specific cultural provenances and physiological/experiental/ emotional effects.

Bilder har AP brukt aktivt. Hver artikkel har gjerne et bilde som representerer hva artikkelen handler om. F.eks på artikkel “Hvordan dele fødselspermisjonen?” (15.02.2008) der har de brukt et bilde av et par som holder en baby. Ikke alle artikler har bilde, de mindre viktige artiklene har ikke bilder. F.eks “Lettere å skaffe arbeid” (13.02.2008). Dette gir inntrykk at AP er et parti som virkelig bryr seg om mennesker i dagliglivet.

 

Konnotasjoner

Det er et bilde av to personer som holder en baby. Gir babyen omsorg og kjærlighet. Bakgrunnen er den grønne naturen, gress, blomster, og elv. Menneskene foran er kledd i svart, og med svart fargen fremheves personene mer på bildet.

 

Dennotasjoner 

Ap prøver å formidle at de er et omsorgsfull parti som bryr seg om menneskene. Den naturlige bakgrunnen gir en følelse av renhet og naturlighet.

 

På høyre side kan vi se en link til AP’s WebTV. Her har vi et bilde av Jens Stoltenberg som holder tale.

 

Konnotasjoner

Her har vi et bildet av AP’s webtv med Jens Stoltenberg. I bildet holder han en tale. Bakgrunnen er den sterke rødfargen og logoen til AP. Til siden og øverst er det en layout av hvordan webtven ser ut. Vi ser at dette ligner veldig mye på youtube sin layout.

Dennotasjoner

Med Jens Stoltenberg på bildet, representeres det styrke og alvor, og igjen sammen med rødfargen blir dette ekstra fremhevet. Banneren, menyene til sidenen viser at dette er en Webtv. Det gir en beskjed til brukerene at når man klikker seg inn på linken, finner man videoer av saker gjort av AP.

Siden har ingen lydavspilling.

Layout

Vi har en banner øverst på siden ,med små menyer over banneren igjen. Menyer som RSS, sidekart, og informasjon på engelsk. Til venstre side finner vi hovedmenyen som innholder alle hoved kategoriene. Der finner vi også en søke bar hvor vi kan søke etter artikler. Over hovedmenyen har vi en menybar hvor vi kan velge fylke. Velger vi en fylke, får vi all artikler som omhandler det fylket vi har valgt. Under søkebaren kan vi finne mindre aktuelle menyer som “Websikon” som er en leksikon for politiske temaer, “Rosebutikk” som er en liten webshop hvor folk kan kjøpe AP produkter online, og til slutt har vi AP sin webtv “ARK” som viser opptak av AP taler og viktige hendelser. Helt på bunden av venstre meny har vi linker til andre steder som innholder AP stoff, linker som YouTube, Facebook, flickr, VG og BLOGG.

På høyre side har vi ARK WEBTV igjen, men denne gang er det et screeshot av Jens stoltenberg som holder tale. Vi har også meldlemslogin, aktuelle kmmentarer, nyhetsbrev og nyheter fra regjeringen.

Midten av siden har vi artikler, sortert etter nyeste til eldste, den nyeste artikkelen som ligger øverst har gjerne større tekst og bilde. Dette er å fremheve nyheten, og vise at det er slike saker som AP er fokusert på.

Navigeringen er lett og intuitivt. Menyen skiller godt mellom hovedkategorier og underkategorier med farger. Hvit for underkategorier og lyse bers for hovedkategoriene. Det tar gjerne ikke mer enn et par klikk til å finne frem informasjonene man er ute etter.

Banneren

Konnotasjoner

Vi kan se at banneren består av to deler. Fra venstre side kan vi se logoen som består av rød bakgrunn og en hvit blomst i midten. Neste seksjonen, den til høyere er laget i flash, her er det et bilde av AP’s nestleder Helga Pedersen med mange små tv vinduer i bakgrunnen. De små videoene bak Helga, tyder på at innholdet her er noe med video å gjøre. Helt til høyere en seksjon (denne tilhører del 2 av banneren) hvor prøver å få folk til å delta i AP’s programdebatt. (Får ikke frem bilde av den siste delen, men dette kan du se på dna.no). Når vi trykker på banneren kommer vi frem til en videosnutt hvor Helga snakker om selve AP.

 

Dennotasjoner 

Igjen har Ap brukt mye av den sterke rødfargen som gir inntrykk av styrke, besluttsomhet, seriøsiteten, noe som Ap representerer. Midten av banneren ser vi Helga med en håndgjestur, hvor det ser ut som hun prøver å invitere deg, med andre ord gir dette et inntrykk at “Vi vil ha deg med, bli med AP, støtt oss!”. De små vinduene gir et tegn på at det har noe med video/informasjon å gjøre når vi trykker oss inn.

 

Discourse: colors (side 25-27).

Rødt er fargen av blod og ild, og assosieres gjerne med energi, krig, fare, styrke, besluttsomhet, begjær og kjærlighet. Hvit er fargen av lys, godhet, uskyld, og renhet, og assosieres med trygghet og renhet. Med disse fargene i logoen til AP, kan det hende at de prøver å utrykke seg som sterke, og kjemper for de fattige.

Logoen

Provenance (http://www.dna.no/index.gan?id=71443&subid=0).

Det norske Arbeiderparti´s symbol er rosemerket. Symbolet på solidaritet og på frihet. De fikk merket sitt på 70-tallet, gjennom arbeiderbevegelsen. Ideen fikk de fra Frankerike, og spredte seg raskt til det ene sosialdemokratisk parti etter det andre i Vest-Europa.

Konklusjon

Nett siden til arbeiderpartiet er godt gjennomførst, logiske menyer, betydningsfulle bannere og bilder. De har brukt “best practises” når det det gjelder design dvs. bannere øverst, venstre meny for hoved kategorier, høyere meny for mindre viktige funksjoner, og midten for selve hoved innholdet, nemlig nyheter/artikler. Arbeiderpartiet har stort sett satset på rød og hvitt, og med dette prøver AP å gi et inntrykk at de er solidarisk, sterke, kjemper for frihet, og fattigdom, kjemper for fremtiden.

Kilder

http://www.color-wheel-pro.com/color-meaning.html

http://www.dna.no

http://www.dna.no/index.gan?id=71443&subid=0

Oblig 3

Her er Oblig 3

Samme dikt, denne gangen er siden koblet til et CSS dokument.

Oblig 2

Her er Oblig 2. Link

Det ser ut som huin serveren har charset: iso-8859-1 som standard, derfor brukte jeg rasmus serveren som har UTF-8 som standard. Og dette ble validert på w3 sin XHTML validator.