onsdag den 28. november 2012

Usability tests

GANGSTERTESTEN:

USABILITY: Forsøgsperson: Lukas, 20 år

Spørgsmål:
Point:
Websitets identifikation: Hvilket website befinder du dig på? (Se efter logo eller anden identifikation)
3 point
Sektioner: Hvilke overordnede sektioner findes på websitet? (Se efter designets måde at anvise, hvad der er på websitet)
2 point
Underside: Hvilken underside befinder du dig på? (Se efter titel eller beskrivelse)
2 point
Lokal navigation: Hvilke muligheder har du på dette niveau/hvilke undersider findes på samme niveau?
1 point
Placerings-indikator: Hvor er du i den samlede struktur/Hvordan er du kommet hertil?
3 point
Søgefunktion: Kan du søge, og hvor kan du det?
0 point
RESULTAT AF TEST (POINT SCORE):
11 point


Dokumentation af test:
  1. Lukas var hurtig til at identificere ud fra, hvor han befandt sig på siden. Vi har placeret vores logo øverst i venstre side af billedet. Vi har valgt at logoet skal overlabe andre elementer på siden og giver derfor et levende look, der får brugeren til at rettet blik derimod - herunder står kampagnenavnet, så brugeren hurtigt ved, hvor han er. 
  2. Lukas havde nemt ved at udpege de tre hovedemner på siden(Konkurrence, cykellov og videokampagne) Dette kan skyldes at vi både har valgt at lave en tydelig menubar i siden, men at vi også har valgt at lave disse som en billedemenu midt på siden. Vores undermenuer er dog ikke tydelige i menuen til venstre - derfor 2 point.
  3. Lukas havde ret nemt ved at finde ud af, hvor han var når han bevægede sig rundt på undersiderne, hvor han hurtigt fandt overskrifterne.
  4. Her havde Lukas lidt svære ved at forklare, hvor han var og, hvilke muligheder han havde.
  5. Vi gav Lukas en den opgave at finde fra fra bødelisten på siden til forsiden og tilbage til bødelisten igen og det gik nemt.
  6. Som set oppe over fik vi 0 point i spørgsmålene til en søgefunktion. Vi har med vilje valgt at udelade søgefunktionen på siden, da vi mener den er beregnet til en mere omfattende side med flere muligheder. Da det er en kampagneside vi har udviklet fandt vi det bedre at vi med et overskueligt layout kunne guide brugeren til de informationer vi ønskede han/hun skulle se på siden(Med andre ord ikke en side man fare vild på)




KORTSORTERINGSTESTEN:

Denne test gik ud på at vi lavede en en masse kort med Hovedmenuernes punkter og undersidemenuernes punkter. Vi lagde herefter de 3 hovedmenuer ud foran forsøgspersonerne, der så skulle placere de tilhørende undersider ud for den rigtige hovedmenu:

Testpersonerne Lukas, Monique, Valentina og Gro havde alle nemt ved at placere kortene som de var ment til at være, imens Cathrine havde mere besvær med dette. Hun synes at vi skulle ændre Underoverskriften 'Tilmelding' til 'Tilmelding til Konkurrencen'. Det kunne vi faktisk godt se idéen i og ændrede derfor overskriften så, den var mere sigende i forhold til den formål. 






GanttProjekt


Til vores projekt har vi valgt at bruge Ganttprojekt som en del af vores projektstyring. Det valgte vi at gøre fordi vi mener at programmet giver et godt overblik over forløbet og de opgaver man skal nå gennem ugerne. Det er et hav af små opgaver, der skal udføres gennem et længere projekt som dette, så uden Ganttprojekt havde vi nok stået med et noget større stressniveau og mulighed for glemte opgaver.
Vi kunne have valgt at bruge Asana, der giver bedre mulighed for at flere medlemmer kan rette til i planlægningen og udviklingen, men vi følte at Gantt som program virkede mere overskueligt end Asana så det blev vægtet højere i vores valg af program.

Som man kan se i overstående screenshot gjorde vi det at vi skrev alle opgaver igennem forløbet op o programmet og efterfølgende gav de forskellige opgaver en tidsperiode, hvor de skulle løses inden for. De forskellige uger fik herefter, hver deres farver for overblikkets skyld.

tirsdag den 27. november 2012

Validering af hjemmesiden

Herunder kan man se udviklingen af vores validering af både forsiderne og undersiderne. Formålet med dette er at se, hvor vi lavede fejl i vores kodning for så at kunne gå ind og rette, så valideringen blev uden fejl.















mandag den 26. november 2012

Ændringer af Layout - Endeligt Layout





Fase 1:
Vi besluttet at finpudse og udvikle yderligere på designet. Blandt andet har vi valgt at gøre ”vinduet” bredere så der er mere plads til indhold og at der ses mindre af baggrundsbilledet i siderne. Dette har vi gjort, da vi synes at det visuelt bliver mere roligt og enkelt. Vi har også valgt, at ændre baggrundsbilledet, fra et naturbillede til et bybillede – da vores målgruppe er bosat i byen.

Fase 2:
Vi har udnyttet pladsen til indholdet bedre. Dvs. at vi har valgt at placere eksterne links til vores samarbejdspartnere nedenfor boksene med interne links. I disse links har vi også prøvet, at kombinere vores farvepalet ind (i samarbejdspartnernes logoer) da vi efter Stines  vejledning sagtens kunne se idéen om, at inkludere farverne så meget som muligt.

Fase 3:
Vi har til gengæld ikke ændret så meget i vores interne links – her har vi bibeholdt farverne og vi har valgt, at beholde typografien fra tidligere da vi mente, at det passede bedst ind i vores emne ”Satire” idet vi selv synes den er en kombination af letlæselig og satire.

Fase 4:
Her vises det, at vi har udviklet på vores logo – her har vi valgt, at kassere ”ringen” rundt om figuren og i stedet for holdt det mere enkelt – også ved holde os til farvepaletten i stedet for både at kombinere farvepaletten med yderligere farver.

Fase 5:
Vi har også lavet vigtige ændringer, hvad angår navigation og menu boks – derfor har vi valgt, at lave en menu hvor boksene med samarbejdspartner links var før. Dette har vi gjort for, at have noget yderligere Usability til sitet og her har vi igen brugt farvepaletten for, at påpege sammenligningen mellem links i vores kolonne og billederne (derfor har vi lavet samme farver på de linksnes tilhørende billeder)

Ændringer af Logo - Endeligt logo

Man udvikler sig igennem en proces som denne og det samme har vores logo. Her kan man få en idé om logoets udvikling igennem ugerne:

Vi startede med et par skitser som kan ses oppe over. Vi ville som tidligere gerne skabe en lidt sjov figur, der og skulle have noget relevans for emnet


Efter skitserne skabte vi så paragrafen på cyklen, der var omringet af kampagnenavnet og vores navn
Senere tilføjede vi så farverne fra den farvepallet vi bruger på hjemmesiden. Det kom til at forgå sådan at farverne skulle stå som en regnbue bag det logo vi havde besluttet os for at bruge.
Sen kunne vi så godt se at det logo vi havde valgt med regnbuen og den enorme mængde tekst kunne blive en smule rodet at se og at det måske ikke ville være så dumt, hvis vi istedet satte større fokus på den figur vi havde skabt, som faktisk var ret fed. Vi fjernede derfor teksten og regnbuen og istedet inkluderede vi vores farvepallet på vores figur så farverne stadig går igen i logoet og giver en god sammenhæng med resten af siden. 

Designtegninger

Her er et udkast af de designtegninger som har været brugt i processen mod det endelige produkt. Selvom billederne ikke alle ligner det endelige produkt, så har de alle været en del af en udvælgelsesproces, hvor vi har vurderet, hvad der fungerede bedst ud fra vores analyse og interviews.

Billedet her har det element fra det endelige design med de tre billeder , der lægger i centrum på hjemmesiden. Vi har den forestilling at interessante billeder vil fange vores målgruppe(18-21) bedre en en masse tekst og løftede pegefingre - så vi havde en god følelse om idéen om de tre billeder på siden.



Her ses en masse små skitser, der blev brugt i starten af forløbet under designudviklingen. Øverst kan man se en idé med nogle faner, der skulle forestille billedmenuen, der skulle komme ned over skærmen når man kørte musen hen over. Man kan også se en masse forskellige forslag til, hvor vi kunne forestille os en evt menu opstillet.

En tidlig idé under designudviklingen er at skabe to billeder på forsiden, der skiller sig ud fra det normalt firkantet look. Her ses en idé til at splitte billedet skråt ned igennem. Vi synes dog ikke at dette har den effekt vi sigtet efter med satiren  og undersøger om vi kan finde en løsning, der giver et mere komisk indtryk. 

En lidt anderledes forestilling til, hvordan man kunne sætte menuen op. Dette blev aldrig aktuelt for hjemmesiden, men viser lidt om, hvordan vi kom omkring i vores idéudvikling.

 Vi har stadig de to faner fra toppen dog placeret lidt anderledes. Vi synes det virker irreterende rent designmæssigt at der ikke er luft imellem fanerne og toppen af billedet.

En idé med mange billeder på forsiden - 'Fangende billeder' står der. Igen fordi vi ud fra vores interviews har dannet os en forestilling om at vores målgruppe er i en alder, hvor de bliver mere draget af interessante billeder end interessant tekst. 

Vi begynder her at arbejde med tre billeder som skal pryde forsiden, men selve opstillingen af de tre billeder er vi stadig i tvivl om. Når billederne står som de gør her virker det en smule kedeligt og ikke særlig interessant at kigge på - heller ikke ud fra et satirisk udgangspunkt.


Her ses en idé, der skitsere tre billeder, hvor ét er større end de to andre. Det giver et bedre overblik at billederne på siden ikke har samme størrelse. Billederne bliver altså sat i et størrelseshierki ud fra deres vigtighed og det giver en anden ro på siden.

En løs skitse, hvor fokus er på, hvor på siden kampagnenavnet skal stå. På denne skitse er den placeret under logoet.

En skitse, med fokus på, hvor på siden linksne til vores samarbejdspartnere skal placeres. På denne skitse er idéen at de skal være i bunden.

En skitse fra starten af skitseprocessen.

Skitse, der igen viser en idé til hierkiopdelte billeder.


torsdag den 22. november 2012

Debat om konkurrenceopbygningen

En af de ting vi har haft meget forskellige meninger omkring er den måde vores konkurrence skal udforme sig, så vi vil modtage det bedste resultat fra målgruppen.

Længe gik vi med forstillingen om at konkurrencen skulle foregå ved at man skulle pitch sin idé på hjemmesiden for så at Drengene fra Angora i samarbejde med trafikstyrelsen skulle udvælge den, der var bedst/sjovest og samtidig stemte bedst overmed de kriterier, der var blevet stillet omkring den nye cykellovs involvering.

Det gik dog op for os at vi gerne ville have at de, der besøger hjemmesiden skulle have en grund til at komme tilbage på hjemmesiden efter de skulle have pitchet deres idé - så måske det ikke var lokkende nok  at de skulle pitch en idé set i det lys at folk skulle have en bredere og mere vedvarende grund til at besøge siden.

Som diskussionen skred hen bliv vi enige om en bedre idé, der kunne gøre målgruppens interesse for hjemmesiden mere konstant. Dette skulle foregå ved at de istedet for bare at skulle pitch en idé til os skulle optage deres idé på film - om det var optaget på et kamera eller en Smartphone skal ikke have nogen betydning, men de skal så opload, deres idé som video på siden. Det vil derfor være en mulighed for folk at se sin egen og konkurrenternes videoer på siden og komme tilbage og følge med i, hvilke idéer, der bliver oploadet. Konkurrencen forløber sig over seks uger.

Konkurrencen er bygget op over fire faser for at finder den endelige vinder. Fase 1: Efter fire uger bliver de 10 bedste videoer udvalgt af Drengene fra Angora i samarbejde med Trafikstyrelsen. Her går konkurrencen ind i fase 2: Nu skal man besøge siden for at stemme på sin favorit istedet for at oploade videoer. Fase 3: En uger senere står tre videoer tilbage med flest stemmer. Face 4: Når den sidste uge er omme har Drengene fra Angora og Trafikstyrelsen udvalgt den af de tre topvideoer, der lever bedst op til de stillet krav for kampagnefilmen. Grunden til at den med flest stemmer ikke automatisk vinder konkurrencen skyldes at kampagnen har nogle krav til indhold og derfor skal leve op til disse for at kunne vinde.

Hele formålet med at ændre konkurrencens opbygning til dette er at brugerne skal have en grund til at besøge hjemmesiden over en længere periode og ikke bare lige tage ind og kigge på den en enkelt gang - denne opbygning holder altså interessen for hjemmesiden i live.