Xboxworld Xboxworld – Redesign
Lars Hoekstra
V4 Redesign Lars Hoekstra
NHL Leeuwarden – CMD Vakdocent : Wouter Buning 1 Mentor: Hendrik Tillema
Xboxworld – Redesign
Xboxworld
Lars Hoekstra
V4 Redesign Lars Hoekstra
2
Xboxworld – Redesign
Lars Hoekstra
Samenvatting Een gemiddelde gamingwebsite bevat de volgende content: Video’s De mogelijkheid om te zoeken Nieuws Reviews Games (alle platformen) Socialmedia (het delen van) Log-in/Register Het forum Bij deze content zijn er vaak enkele factoren die de website uniek maakt, dit zijn factoren zoals unieke video-content. Daarnaast maken gamingwebsites gebruik van de sociale kanalen doormiddel van het gebruiken van deze als RSS-feed. De gebruiker kijkt zeer actief op Xboxworld, daarbij kijkt de gebruiker in de meeste gevallen meerdere keren per dag op Xboxworld. Wel is duidelijk dat op het gebied van het bekijken van activiteiten er grote verschillen zijn tussen de gebruikers. Er is hierbij een grote splitsing tussen de frontpage1 en het forum. Daarbij komt kijken dat een kleine groep alle activiteiten op de website doet. Gebruikers vinden het cijfer systeem wel prima, echter zouden ze een cijfer duidelijker vinden. Van de gebruikers kan ongeveer de helft het forum niet goed vinden vanaf de frontpage. Gebruikers willen graag nieuwe content op Xboxworld waarbij het voornamelijk gaat om video content. Daarnaast vinden gebruikers het huidige uiterlijk van Xboxworld erg oud. Xboxworld levert momenteel zijn content erg laat aan, dit zou sneller kunnen door middel van de nieuwe manier waarop spellen verspreid worden. Daarbij komt dat de Xbox meer de casual kant uit gaat waar ook winst valt te halen, door recensies te schrijven over spellen die voor die doelgroep zijn. Op basis van het onderzoek is het volgende concept bedacht: “Een nieuw design waarin het metro2 toegepast wordt en waarbij de doelgroep betrokken moet worden.“ Metro is de nieuwe design filosofie van Microsoft waarbij de vormgeving vormgegeven wordt door middel van typografie en content. Het doel hiervan is het samenvoegen van de frontpage met het forum, zodat het een groot geheel wordt in plaats van twee losstaande onderdelen. Nadat het concept was vastgesteld, is er een visie gemaakt voor het design: De visie is het ontwikkelen van een website die zowel Metro is als Xboxworld. De kern elementen die Xboxworld maakt wat het is, vertalen naar Metro. Daarbij een eigen invulling geven op wat Metro is op het internet. Een gebruiksvriendelijke website, die duidelijk is voor de gebruiker. 1 2
Frontpage: Voorpagina, startpagina van de website Metro: nieuwe designtaal van Microsoft, meer informatie over Metro in hoofdstuk 11.3.2
3
Xboxworld – Redesign
Lars Hoekstra
Inhoud Samenvatting........................................................................................................................................... 3 1. Inleiding ............................................................................................................................................... 7 2. Probleemstellingen.............................................................................................................................. 8 2.1 Hoofdvraag ................................................................................................................................ 8 2.2 Deelvragen................................................................................................................................. 8 2.3 Doelstelling ................................................................................................................................ 8 2.3.1 Deeldoelstelling ...................................................................................................................... 8
Onderzoek ............................................................................................................................................. 9 3. Inleiding ............................................................................................................................................. 10 4. Werkwijze .......................................................................................................................................... 11 4.1 Concurrentie analyse ............................................................................................................... 11 4.1.1 Onderzoek lijst ...................................................................................................................... 11 4.2 Gebruikers analyse .................................................................................................................. 12 4.3 SWOT analyse .......................................................................................................................... 12 5. Resultaten.......................................................................................................................................... 13 5.1 Concurrentie analyse ............................................................................................................... 13 5.2 Gebruikers analyse .................................................................................................................. 14 5.2.1 Activiteiten ........................................................................................................................... 14 5.2.2 Stellingen .............................................................................................................................. 15 5.2.3 Eigenschappen...................................................................................................................... 16 5.3 SWOT analyse .......................................................................................................................... 17 6. Conclusies .......................................................................................................................................... 18 6.1 Conclusie hoofdvraag .............................................................................................................. 18 6.2 Conclusie deelvragen............................................................................................................... 19
Concepting........................................................................................................................................... 21 7. Inleiding ............................................................................................................................................. 22 7.1 Ontwikkeling ............................................................................................................................ 23 7.2 Inhoud ..................................................................................................................................... 25 7.2 Functioneel .............................................................................................................................. 25 7.3 Grafisch.................................................................................................................................... 26 7.4 Hoe, wat en waarom ............................................................................................................... 27 4
Xboxworld – Redesign
Lars Hoekstra
7.5 Het concept ............................................................................................................................. 27
Design ................................................................................................................................................... 28 8. Inleiding ............................................................................................................................................. 29 8.1 Inspiratie .................................................................................................................................. 31 8.1.1 Metro .................................................................................................................................... 32 8.1.1.1 Visie ................................................................................................................................... 32 8.1.2 Usabilty ................................................................................................................................. 33 8.1.2.1 Inspiratie ............................................................................................................................ 33 8.1.3 Responsive Design ................................................................................................................ 34 9.1.3.1 Inspiratie ............................................................................................................................ 34 8.1.4 Xbox ...................................................................................................................................... 35 8.1.4.1 Inspiratie ............................................................................................................................ 35 8.2 Results ..................................................................................................................................... 36 8.5.1 Functioneel ........................................................................................................................... 38 8.5.2 Grafisch................................................................................................................................. 39 8.5.3 Typografie ............................................................................................................................. 39 8.5.4 Responsive ............................................................................................................................ 40 8.6 Logo ......................................................................................................................................... 41 8.7 Thema’s ................................................................................................................................... 42
Afronding ............................................................................................................................................. 43 9.1 Visie ......................................................................................................................................... 44
Aanvullend .......................................................................................................................................... 45 10.1 Termen .................................................................................................................................. 46 10.2 Bibliografie............................................................................................................................. 47 11.3 Bijlagen .................................................................................................................................. 49 11.3.1 Enquete .............................................................................................................................. 50 11.3.1.1 Vragenlijst ........................................................................................................................ 50 11.3.2 SWOT analyse ..................................................................................................................... 53 11.3.2.1 Organisatie schets ........................................................................................................... 54 11.3.2.2 Sterke eigenschappen ..................................................................................................... 54 11.3.23 Zwakke eigenschappen .................................................................................................... 55 11.3.2.4 Kansen ............................................................................................................................. 56 11.3.2.5 Risico’s ............................................................................................................................. 57 11.3.2.6 Confrontatie matrix ......................................................................................................... 58 5
Xboxworld – Redesign
Lars Hoekstra
11.3.2.6.1 Groeiveld ...................................................................................................................... 60 11.3.2.6.2 Verdedigveld: ............................................................................................................... 60 11.3.2.6.3 Verbeterveld:................................................................................................................ 61 11.3.2.6.4 Probleemveld: .............................................................................................................. 61 11.3.2 Metro .................................................................................................................................. 62 11.3.3.1 Gebaseerd waarop? ........................................................................................................ 62 11.3.3.2 Wat moet het zijn ............................................................................................................ 62 11.3.4 Rapid Prototyping ............................................................................................................... 64 11.3.4.1 Assess needs .................................................................................................................... 64 11.3.4.2 Werkwijze ........................................................................................................................ 65 11.3.5 Testomgeving ..................................................................................................................... 67
6
Xboxworld – Redesign
Lars Hoekstra
1. Inleiding De afgelopen 5 maanden is er druk gewerkt aan een re-design van Xboxworld.nl. Alle bevindingen, concepten en de uiteindelijke ontwerpen staan in dit document. Xboxworld bestaat al enige tijd en de website is in die jaren nooit veranderd. Een groot deel van de concurrentie is ermee gestopt of heeft een grote update gekregen. Om relevant te blijven, heeft Xboxworld een re-design nodig wat de site terug op de kaart moet zetten. Er is onderzoek gedaan naar de concurrentie en naar de gebruikers van Xboxworld. Op basis hiervan is een beeld gecreëerd van wat een gamingsite moet bevatten om succesvol te zijn. Vanuit het onderzoek is een concept ontwikkeld. Het design van de website is getest doormiddel van de rapid-prototyping onderzoeksmethode. Waarbij mensen schermontwerpen getest hebben van het functioneel-ontwerp3 van de website. De structuur van dit verslag is ingedeeld in vijf verschillende secties. In de eerste sectie van het verslag bevindt zich het vooronderzoek. Hierin worden alle deelvragen behandeld, waarna er een voorlopige conclusie wordt gegeven op de hoofdvraag. Het onderzoek bestaat uit een selecte steekproef bij de doelgroep van Xboxworld, dat is in dit geval de gemiddelde gebruiker die Xboxworld bezoekt. Hiervoor is een enquête gehouden waarbij 180 resultaten zijn gemeten. De resultaten zullen worden verwerkt in statistieken waardoor er grafieken ontstaan, die de gegevens visueel kunnen weergeven. Voor de concurrentie analyse is er gekeken naar hetgeen de concurrentie biedt en hoe de content door de concurrent wordt aangeboden. Op basis hiervan is een beeld gecreëerd van hetgeen de basis elementen zijn voor een gaming website. De tweede sectie bevat de concepten die ontwikkeld zijn naar het vooronderzoek. Hierin wordt beschreven hoe de concepten zijn ontstaan en op basis waarvan deze zijn ontstaan. Sectie drie bevat het design gedeelte, hierin wordt alles wat betrekking heeft op het design behandeld. In sectie vier wordt de afronding behandeld. De laatste sectie bevat alle aanvullende informatie, zoals: de termenlijst, bijlagen en bibliografie. Naast deze secties zijn er nog vier documenten toegevoegd, die in deze scriptie worden gebruikt. Deze documenten bevatten de concurrentie analyse, gebruikers analyse, grafisch ontwerp en het functioneel ontwerp. In verband met de omvang van deze documenten zijn deze niet toegevoegd in de bijlagen. Wel hebben deze documenten een direct verband met het rapport.
3
Functioneel ontwerp: een document waarin alle functies vermeld staan van een website
7
Xboxworld – Redesign
Lars Hoekstra
2. Probleemstellingen In dit hoofdstuk worden de hoofd- en deelvragen geformuleerd. Zij vormen de basis voor het onderzoek. Met de antwoorden op deze vragen wordt een concept gemaakt. Er wordt een voorlopig antwoord gegeven op de hoofdvraag, die later definitief zal worden beantwoord.
2.1 Hoofdvraag Wat zijn de kritische succes factoren4 voor Xboxworld?
2.2 Deelvragen Wat zijn de criteria voor een goed lopende 5gaming website? Hoe worden games tegenwoordig het meest gerecenseerd? Wat kan de sociale media betekenen voor Xboxworld? Welke suggesties kunnen worden gegeven om de kwaliteit van Xboxworld te optimaliseren? Hoe ervaart de doelgroep Xboxworld? Wat voor content mist de doelgroep op Xboxworld? Wat zijn de activiteiten van de gebruikers? Hoe kijkt de doelgroep tegen recensies aan?
2.3 Doelstelling Binnen 5 maanden een re-design maken voor de website xboxworld.nl.
2.3.1 Deeldoelstelling
Op basis van het onderzoek een nieuwe feature ontwikkelen voor xboxworld.nl Een nieuw ‘’uniek’’ concept toepassen op xboxworld.nl Beter gebruik maken van social media6 voor xboxworld.nl
4
Factoren die essentieel zijn voor het voortbestaan van Xboxworld Een gamingwebsite die dagelijks update en actief is in zijn bestaan 6 Sociale media: een verzamelbegrip voor online platformen waar de gebruikers, zonder of met minimale tussenkomst van een professionele redactie, de inhoud verzorgen. 5
8
Xboxworld – Redesign
Lars Hoekstra
Onderzoek
9
Xboxworld – Redesign
Lars Hoekstra
3. Inleiding In het onderzoek staan verschillende onderzoeken. Het onderzoek bevat een concurrentie analyse, gebruikers analyse en een SWOT analyse. In hoofdstuk 5 wordt beschreven op welke wijze ieder onderdeel is onderzocht. Hoofdstuk 6 bevat de resultaten die naar voren zijn gekomen uit het onderzoek, dit is verwerkt in tekst gecombineerd met grafieken. De conclusies worden vermeld in hoofdstuk 7.
10
Xboxworld – Redesign
Lars Hoekstra
4. Werkwijze De volgende onderzoeken zijn gehouden:
Concurrentie analyse7 Gebruikers analyse8 SWOT analyse9
4.1 Concurrentie analyse Voor de concurrentie analyse is er naar verschillende concurrenten van Xboxworld gekeken. Er is gekeken naar Nederlandse gamingsites10, maar ook naar internationale gamingsites. Er is onderzoek gedaan naar de volgende onderdelen: Features11 Welke mogelijkheden zijn er op de frontpage van de concurrentie, wat biedt die de gebruiker? Recensies12 Hoe plaats de concurrent recensies en hoe wordt een spel beoordeeld? Het belangrijkste is de conclusie en wat voor informatie die bevat. Met welk cijfersysteem wordt er gewerkt en zijn er nog meer bijzonderheden in de conclusie? Dit onderdeel bevat alleen schriftelijke recensies, voor videorecensies is een aparte werkwijze. Gamedatabase Bijna elke gamingsite heeft een database met hun spellen erin. Wat voor informatie geeft deze database en wat kan de gebruiker allemaal vinden? Sociale interactie Op welke manier maakt de concurrent gebruik van de sociale kanalen. Er wordt gekeken naar de wijze waarop de concurrent gebruikt maakt van Twitter en Facebook. Al deze onderdelen zijn verwerkt in statistieken. Aan de hand van de statistieken zijn er tabellen gemaakt, die de meest voorkomen features weergeven. Naast de meest voorkomende features, worden de unieke features en mogelijkheden ook vermeld. Aan de hand van al deze gegevens, ontstaat een duidelijk beeld van wat een goedlopende gamingwebsite moet inhouden. Voor deze analyse is er gebruik gemaakt van inhoudsvaliditeit door zich op meer dan één onderdeel te richten.
4.1.1 Onderzoek lijst Er is eerst onderzoek gedaan naar een uitgebreide lijst met concurrenten. Deze lijst bestaat uit websites van Nederlandse bodem, maar ook een grote groep internationale sites. Al deze sites zijn uniek van elkaar en hebben hun eigen manier van recensies schrijven.
7
Complete concurrentie analyse staat in een los document Complete gebruikers analyse staat in een los document 9 Complete analyse, bijlage: 11.3.2 10 Gamingwebsite: website die zich richt op games 11 Feature: eigenschap, 12 Recensie: een (kritische) bespreking van een videospel.. 8
11
Xboxworld – Redesign
Lars Hoekstra
Blisterdthumbs Computer & videogames Eurogamer Gamer.nl Gamespot Gamesradar Gamingunion Giantbomb IGN Insidegamer.nl Joystiq Teamxbox Videogamer Xboxonly.nl
4.2 Gebruikers analyse Voor de gebruikers analyse zijn er ruim 180 resultaten afgenomen. Hierbij zijn de resultaten op de volgende manier verdeeld en verwerkt: Activiteiten: Alle activiteiten die de gebruiker doet op de website. Dit zijn de beginvragen waarin ook gevraagd wordt naar hoelang de gebruiker al op Xboxworld.nl komt. Het resultaat zal in verschillende lijndiagrammen worden weergegeven, die een beeld geven van hetgeen de gebruikers allemaal doen en hoe actief de gebruikers die activiteit doen. De activiteiten worden in procenten uitgedrukt. Stellingen: Alle opgestelde stellingen worden hierin behandeld, deze stellingen worden in staafdiagrammen vertoond. Daarnaast is er ook een tabel aanwezig met de exacte procenten van hoeveel mensen het eens zijn met welk antwoord. De activiteiten zullen in procenten worden uitgedrukt. Open vragen: De open vragen worden gefilterd en samengevat in een staafdiagram, de statistieken worden daarbij in een tabel weergegeven. Er wordt geturfd of er antwoorden overeenkomen. Unieke antwoorden die niet door meerdere mensen gemeld worden, staan aangegeven onder de staafdiagram en worden in de tabel genoteerd als een tagcloud13. De resultaten worden in nummers uitgedrukt. Voor de enquête is er gebruik gemaakt van de steekproefcalculator14 waarbij gebruik gemaakt is van een foutmarge van 7% en een betrouwbaarheidsniveau van 95%.
4.3 SWOT analyse Voor de SWOT analyse is er gekeken naar wat Xboxworld allemaal biedt en op welk gebied de website zich kan verbeteren. Daarbij is er gekeken naar de huidige situatie van Xboxworld en is de SWOT analyse gecombineerd met een organisatie schets.
13
14
Tagcloud: een visuele weergave van inhoudstags die op een website, meestal een weblog, worden gebruikt. http://www.corpos.nl/producten/Steekproef/streekproefcalculator.html
12
Xboxworld – Redesign
Lars Hoekstra
5. Resultaten 5.1 Concurrentie analyse Een gemiddelde gamingwebsite bevat standaard de volgende content:
Videos De mogelijkheid om te zoeken Nieuws Reviews Games (alle platformen) Socialmedia (het delen van) Log-in/Register Het forum
Naast deze content zijn er nog de features die de site haar eigen identiteit geeft. Dit zijn voornamelijk onderdelen die gemaakt zijn door de site zelf. Het kan video-content zijn of een column die wekelijks terugkeert. In sommige gevallen kan de gebruiker ook betalen voor de website, hetgeen bepaalde voordelen voor de gebruiker met zich meebrengt. De betaalde gebruiker heeft de beschikking over meer content of eerder recht op content, dan de niet betalende gebruiker. Recensies worden voornamelijk beoordeeld op een 1 op 10 schaal. Om extra duidelijkheid te geven, is er in meerdere gevallen voor gekozen om positieve en slechte eigenschappen van het spel te noteren. Een gemiddelde gamingwebsite zijn database bevat de volgende content:
Cijfer Box (cover van het spel) Ontwikkelaar/Publisher Genre Verschijningsdatum Gerelateerde artikelen Video’s Afbeeldingen Spel informatie
Naast deze content verschilt het per site wat ze nog meer te bieden hebben, dit heeft veelal met de grote van de site te maken. Hoe groter de site, hoe meer informatie de database biedt. Het gebruik van social media is nog beperkt bij de meeste gamingwebsites. Social media wordt voornamelijk gebruikt als veredelde RSS-feed die hun nieuws verspreidt. Er zijn enkele gevallen bekend waar gebruik gemaakt wordt van twitpics15 of voor wedstrijddoeleinden.
15
Twitpic: een afbeelding die gemaakt is door de eigenaar van een twitter account en die dan geplaatst is in een tweet.
13
Xboxworld – Redesign
Lars Hoekstra
5.2 Gebruikers analyse De gebruikers analyse bestaat uit 3 verschillende resultaten van de enquête16:
Activiteiten Stellingen Openvragen
5.2.1 Activiteiten De gemiddelde gebruiker maakt 6 jaar gebruik van Xboxworld.nl. Er zijn ook nieuwe gebruikers, maar er zijn ook nog oudere gebruikers die inmiddels al meer dan 10 jaar op Xboxworld.nl zitten. Van deze gebruikers komt meer dan de helft dagelijks op Xboxworld.nl waarbij ze vaker dan 1 keer per dag de site bezoeken. Slechts twee tiende van de gebruikers kijkt minder dan een keer per dag op Xboxworld.nl. 45% 40% 35% 30% 25% 20% 15% 10% 5% 0% 1
2
3
4
5
Nieuws lezen
Reageren op nieuws
Reviews lezen
Reageren op reviews
Previews Lezen
Reageren op Previews
Forum Lezen
Reageren op forum
Prijsvragen
Grafiek 5.1 Activieiten grafiek, 1 = hoog 5 = laag
De activiteiten van de gebruikers verschillen heel erg. Als een gebruiker iets doet, dan doet hij of zij dat ook erg actief. Er is een kleine groep die alles passief doet, al komt het bijna altijd op de twee uitersten uit. Zo leest een grote groep het nieuws actief, echter een iets minder grote groep leest het nieuws helemaal niet. Hetzelfde geldt voor de geschreven artikelen waarbij volgens de statistieken procentueel meer op gereageerd wordt. Het forum wordt ook actief bezocht door een grote groep bezoekers. Hier is ook weer een grote groep aanwezig, die helemaal niks op het forum doet.
16
11.3.1 Enquête
14
Xboxworld – Redesign
Lars Hoekstra
Aan prijsvragen doen wel veel mensen mee, zowel actief als passief. Opvallend aan de cijfers is dat bijna alles twee uitersten heeft. Er een grote groep die actief een bepaalde activiteit doet, maar er is dan ook weer een grote groep die helemaal niets doet. Er blijft dan nog een kleine piek over in het passieve gedeelte. Hetgeen betekent dat veel gebruikers zich voornamelijk richten op een specifiek onderdeel waar ze dan actief op Xboxworld.nl gebruik van maken.
5.2.2 Stellingen De gebruikers ervaren onze nieuwsberichten als volledig, daarbij vinden ze onze website de beste in Nederland voor informatie m.b.t de Xbox. Daarbij zou meer dan 75% van onze gebruikers ons aanraden aan vrienden voor informatie. Onze artikelen zijn van een goede kwaliteit en bevatten genoeg woorden, maar ook weer niet teveel. Daar staat tegenover dat 25% van de gebruikers vinden, dat wij niet alle belangrijke spellen recenseren. Onze beoordelingswijze wordt gewaardeerd door de helft van de gebruikers al vindt de andere helft het niet een goed systeem. Meer dan de helft is het er over eens dat een cijfer een duidelijker beeld zou geven. Al is niet iedereen het daar mee eens, een compromis zou hier gesloten moeten worden of juist een combinatie. Zelf wil de gebruiker ook graag een cijfer of een waardering geven aan de games. De gebruiker vindt de redactie wel makkelijk te bereiken, al vindt een 10% dit juist niet. Op de frontpage weet de gemiddelde gebruiker alles te vinden wat hij of zij zoekt. Er blijft nog wel een kwart van de gebruikers over, die niet kan vinden wat hij of zij zoekt. Daarnaast vindt de helft van de gebruikers de frontpage mooi ogend, al is 40 procent het daar niet mee eens. Meer dan de helft van de gebruikers vindt dat Xboxworld genoeg artikelen/content aanbieden. Een kwart van de gebruikers mist toch nog wat artikelen. Ook meer dan de helft vindt dat Xboxworld goed up-to-date, echter is hier ruim meer dan een kwart het niet mee eens. Xboxworld zou meer interviews kunnen leveren. Rond de helft van de ondervraagden heeft hier geen belangstelling voor, maar ruim een kwart heeft hier juist wel interesse in. Er is meer animo voor video content, een ruime meerderheid van de gebruikers zou graag video content zien. Iets minder dan een kwart voelt hier niks voor. We zouden ook andere Microsoft platformen kunnen recenseren al vindt 75% van de gebruikers dit geen goed idee. Van alle gebruikers vindt een ruime meerderheid ons professioneel in ons doen en laten. Er is wel een kwart die het hier niet mee eens is, en vindt dat het wel een professioneler kan. De connectie tussen de frontpage en het forum wordt door de helft zowel goed als slecht ervaren. Dit is niet acceptabel aangezien slechts 50% het goed vindt, terwijl de andere helft het forum niet goed kan vinden of zelfs helemaal niet weet te vinden. De gemiddelde gebruiker is erg tevreden over Xboxworld. Bij recensies zijn de meningen erg verdeeld al is er wel een meerderheid die een cijfer duidelijker vindt, maar dit betekent niet dat ze dit ook beter vinden. Niet alle belangrijke games worden gespeeld en dit valt een groep van onze gebruikers ook op. Bij nieuwe content is er voornamelijk vraag naar video. Ook wel enigszins bij andere platformen en interviews al is daar de animo minder groot voor.
15
Xboxworld – Redesign
Lars Hoekstra
5.2.3 Eigenschappen De gebruikers ervaren het forum als het grootste pluspunt van Xboxworld.nl de community is er goed. Het valt echter valt veel gebruikers op dat er niet een goede verbinding is tussen de frontpage en het forum. Ook worden onze reviews als erg goed ervaren, maar zijn wij vaak laat met onze reviews en dit valt meer mensen op. De gebruiker weet onze eerlijkheid wel te waarderen in onze reviews, die soms verschillen met die van de concurrenten. Daarnaast hecht de gebruiker veel waarde aan ons nieuws, alleen valt het de gebruiker ook op dat wij het nieuws soms te laat plaatsen en dit kan de gebruiker dan weer niet waarderen. Het niet up-to-date zijn, is ook iets waar de gebruiker zich aan ergert en dit heeft ook te maken met de verouderde lay-out van de website. De gebruiker zou graag iets nieuws en fris willen zien, met meer interactie mogelijkheden. Op dit moment is voor deze gebruikers Xboxworld.nl nog iets te inconsistent en willen ze graag een vast iets. Positief Forum Reviews Community Duidelijk Nieuws Eerlijk
Negatief Lay-out Late reviews Oud nieuws Niet up-to-date Frontpage connectie Inconsistent
Missen Video content Diverse content Userrating Updates Nieuw design Interactie
Videocontent is wel een must voor de gebruiker en die wil dit ook graag. Naast video’s is er ook vraag naar unieke leuke artikelen, meer verschillende soorten content. De gebruiker wil ook meer interactie o.a. door het geven van een waardering over een spel. Een nieuw design kwam hier ook bij naar voren. Zelf ziet de gebruiker ook graag dat de interactie tussen het forum en de frontpage beter wordt. Dit zou door middel van samenvoegen kunnen gebeuren of meer frontpage content op het forum. (of deze mogelijkheid makkelijker maken)
16
Xboxworld – Redesign
Lars Hoekstra
5.3 SWOT analyse Sterktes (Strengths) Sterke community Eigen reviews Xbox only Feitelijk nieuws Grote database Unieke items
Zwaktes (Weaknesses) Late reviews Verouderd Weinig social media Frontpage / Forum splitsing Inconsistent Onoverzichtelijke zoekresultaten
Kansen (Opportunities) Nieuwe console (Xbox) Social media ontwikkelingen Nieuw design (metro) Meerdere platformen (Xbox live) Nieuwe vorm van spellen distributie
Risico’s (Threats) Xbox wordt casual Meer concurrentie Commercieel wording van de industrie Social media ontwikkelingen
Xboxworld moet het hebben van zijn grote community en zijn eigenheid. De gemaakte recensies zijn goed maar vaak aan de late kant. De redactie plaatst alleen maar nieuws en artikelen met betrekking tot de Xbox wat een belangrijk sellingpoint17 is. Inmiddels is de website al verouderd en hierdoor ziet de site er niet meer aantrekkelijk uit. Al het geplaatste nieuws wat gedaan wordt, bestaat alleen maar uit feiten. De geplaatste content is niet erg consistent waardoor er op vreemde momenten veel content geplaatst wordt. Er worden wel unieke artikelen geplaatst al worden die op willekeurige momenten online gezet. Er is een duidelijke splitsing van de frontpage en het forum, dit komt mede doordat bij beide pagina’s apart ingelogd moet worden. Onze zoekmachine geeft weinig uitgebreide opties voor artikelen enzovoort, echter Xboxworld heeft wel een grote database van spellen waarin de gebruiker wel uitgebreide zoekmogelijkheden heeft. Er bestaat een kans dat er dit jaar een nieuwe console aangekondigd wordt door Microsoft. Wat voor extra bezoekers kan zorgen, mits dit goed gerapporteerd wordt. Daarnaast komt met deze ontwikkeling de nieuwe designtaal van Microsoft beter naar voren. De social media kanalen zijn de afgelopen jaren gigantisch gegroeid, hierdoor worden er veel nieuws(links) geplaatst op deze kanalen. Indien hier goed gebruik van gemaakt wordt, kan dit extra bezoekers gaan opleveren. Met de aankondiging van de Kinect is de Xbox de afgelopen jaren zich meer gaan richten op casual gaming, dit is niet de doelgroep van Xboxworld. Naast de Kinect zijn er verschillende nieuwe platformen waar spellen op verschijnen, die betrekking hebben op de Xbox. Daarnaast worden spellen tegenwoordig op verschillende manieren verspreid. Zo wordt een groot gedeelte digitaal verspreid. Er worden tegenwoordig ook veel meer spellen gemaakt, dit komt doordat de industrie veel groter is geworden. Hierdoor wordt het ook veel moeilijker om alle spellen te kunnen recenseren.
17
Sellingpoint: een eigenschap wat de site weet te verkopen aan de gebruiker
17
Xboxworld – Redesign
Lars Hoekstra
6. Conclusies 6.1 Conclusie hoofdvraag Wat zijn de kritische succes factoren voor Xboxworld. Het design zal aangepast moeten worden naar een meer actueel uiterlijk, de nieuwe metro stijl van Microsoft/Xbox is de richting die Xboxworld nodig heeft. Op gebied van content moet Xboxworld zich meer richten op nieuwe (unieke) content, die op bepaalde tijdsstippen terugkeert. Dit alles moet gecombineerd worden in de nieuwe huisstijl van Xboxworld. Voor recensies is het advies om juist de conclusie bovenaan het artikel te vermelden met het beoordelingscijfer, zodat de lezer zelf kan beslissen of hij/zij door wil lezen. De doelgroep wil ook graag video-content en dit kan in verschillende vormen. Het upgraden van de podcast naar video-podcasts, zodat de doelgroep het doel kan zien van een podcast. Daarnaast is het een mogelijk om video-recensies te maken, dit door middel van een voice-over, die gecombineerd wordt met gameplay18-beelden. Het belangrijkste bij dit alles, is dat het consistent is en dat er een zekere regelmaat is. Daarnaast moet er ook meer gebruik worden gemaakt van de sociale media. Hierbij gaat het voornamelijk om Facebook. In de opzet kan dit al passief gebeuren, wanneer Facebook gebruikt wordt als RSS feed. Hieraan zouden prijsvragen gekoppeld kunnen worden.
18
Gameplay: Hoe een gebruiker een computerspel ervaart of de elementen van het spel zelf. Hierbij kan worden gedacht aan de besturing maar ook de controle over het weergegeven visuele standpunt.
18
Xboxworld – Redesign
Lars Hoekstra
6.2 Conclusie deelvragen Wat zijn de criteria voor een goedlopende gaming website? Er bestaat een duidelijk richtlijn wat een goedlopende gamesite moet bevatten. Deze richtlijn bestaat uit de content die een gamesite moet bevatten om een goede basis te krijgen. De volgende content behoort in deze richtlijnen te worden opgenomen:
Video’s De mogelijkheid om te zoeken Nieuws Reviews Games (alle platformen) Social media (het delen van) Log-in/Register Het forum
Naast deze elementen moet de website ook zijn eigen unieke sellingpoint hebben. Dit kan zijn dat de website zich alleen op een platform richt, maar de nadruk ligt hierbij vaak op eigen unieke (video) content. Hoe worden games tegenwoordig het meest gerecenseerd? Tegenwoordig worden spellen op twee verschillende manieren gerecenseerd. Doormiddel van video, maar ook tekstueel. Beide zijn in essentie hetzelfde alleen kan aan de hand van een video recensie meer duidelijk gemaakt worden. Een recensie moet een duidelijk oordeel geven, dat duidelijk is voor de lezer/kijker. Het oordeel verschilt per site, een grote meerderheid geeft de voorkeur aan het geven van een cijfer met daarbij de goede en slechte eigenschappen van het spel. Daarnaast worden op enkele sites de conclusies bovenaan de pagina gezet, zodat de lezer direct kan zien wat de website van het spel vindt. Een combinatie van een cijfer en tekst zou het beste zijn voor Xboxworld. Het huidige systeem is niet echt duidelijk. Door het huidige systeem te combineren met een cijfer zal het oordeel over een spel ook duidelijker zijn voor de doelgroep. Daarnaast is het handig om het cijfer/oordeel van het spel zo te plaatsen dat de gebruiker het direct kan zien, wanneer hij dat artikel gaat lezen. Voor video-content is er al een goede basis door gameplay beelden te laten zien, die gecombineerd worden met een voice-over. Dit zou voor Xboxworld een goede en goedkope opzet kunnen zijn voor het maken van video-recensies. Wat kunnen de sociale media betekenen voor Xboxworld? Een goede basis is van Twitter en Facebook een RSS feed te maken. Hierdoor wordt de content op verschillende media gepresenteerd. Er bestaan uitbreidingsmogelijkheden van unieke content op die mediums. Dit kunnen prijsvragen zijn of foto’s van wat er op de redactie gebeurt.
Welke suggesties kunnen gedaan worden om de kwaliteit van Xboxworld te optimaliseren? Op drie verschillende gebieden kunnen suggesties gedaan worden om de kwaliteit van Xboxworld te optimaliseren.
Het presenteren van content op verschillende kanalen: 19
Xboxworld – Redesign
Lars Hoekstra
Door alle nieuwsberichten te plaatsen op de sociale media kanalen bereikt Xboxworld meer mensen en kan het op deze manier ook nieuwe gebruikers genereren.
Zich richten op alles wat Xbox is: Xbox is meer dan alleen de Xbox spellen, het wordt meer casual. Door het schrijven van recensies over die type spellen wordt er een nieuwe doelgroep benaderd.
Meer up-to-date: Doordat enkele spellen tegenwoordig digitaal verspreid worden, kunnen spellen sneller gerecenseerd worden. Daarnaast is een nieuwe design nodig voor een nieuwe uitstraling waardoor de website er ook actueler uitziet. Microsoft zijn nieuwe design taal (metro) zou een goede richting zijn.
Hoe ervaart de doelgroep Xboxworld? De doelgroep ervaart Xboxworld erg positief, vooral het forum en de community zijn erg goed. Wel valt het de doelgroep op dat de website inmiddels al verouderd is. De gebruikers zouden graag een nieuwe website willen. Daarnaast zouden ze graag zien dat recensies een stuk sneller online staan en dat het nieuws meer up-to-date is. Wat voor content mist de doelgroep op Xboxworld? De doelgroep mist nieuwe ‘’unieke’’ content, waarbij de nadruk ligt op video-content. Daarnaast is het belangrijk dat er een bepaald ritme in deze content zit, consistentie. Bijvoorbeeld: elke vrijdag een podcast of een vaste column. Wat zijn de activiteiten van de gebruikers? Van alle activiteiten die de gebruikers uitvoeren, zijn ze of erg actief of ze doen helemaal niets. Er is nagenoeg geen middenweg. Een manier om dit te verbeteren zou kunnen zijn, door de scheiding van de frontpage en het forum op te heffen. Door deze scheiding weg te halen, kunnen forum gebruikers makkelijker reageren op frontpage content en kunnen frontpage members makkelijker op het forum komen. Daarnaast moet dit op het forum duidelijker aangegeven worden, aangezien een grote groep van de leden deze connectie niet goed vindt. Deze connectie kan ook verbeterd worden door forum links aan nieuwsberichten, recensies en artikelen toe te voegen. Hoe kijkt de doelgroep tegen recensies aan? De gebruiker vindt de huidige manier redelijk duidelijk. Wel is voor hen niet helemaal duidelijk hoe precies ons puntensysteem in z’n werk gaat. De recensies zijn niet te kort en op het gebied van content zijn ze goed. Het probleem ligt hem voornamelijk in de manier waarop een spel beoordeeld wordt. Hiervoor zou een alternatief systeem moeten komen of er zou op een duidelijke manier uitgelegd moeten worden hoe onze rating werkt. Een mogelijkheid zou kunnen zijn het combineren van cijfers met tekst, zodat er naast een cijfer ook tekst gekoppeld wordt aan het cijfer. Hierdoor kan de gebruiker in een oogopslag zien wat voor cijfer het spel krijgt en daarnaast wordt uitgelegd waarom het spel goed of slecht is. Een advies zou ook gegeven kunnen worden, zodat de gebruiker ook weet voor wie het spel bedoeld is. Aangezien sommige spellen goed kunnen zijn, maar alleen maar voor een specifieke doelgroep bedoeld zijn, waardoor mensen die buiten deze doelgroep vallen niet zullen begrijpen waarom dat spel juist zo goed is.
20
Xboxworld – Redesign
Lars Hoekstra
Concepting
21
Xboxworld – Redesign
Lars Hoekstra
7. Inleiding Op basis van het antwoord op de hoofdvraag moet een concept worden gemaakt. Hierbij wordt gelet op de volgende eisen:
Interactie met de gebruikers De gebruikers willen meer interactie op de website, het kunnen reageren op artikelen of door spellen een cijfer te geven.
Videocontent Uit het onderzoek blijkt dat er vanuit de gebruiker veel vraag naar video content is. Wat voor content is voor de gebruiker niet belangrijk, zolang het maar eigen video content is.
Forum en frontpage integratie Het forum en de frontpage moeten een groot geheel worden, zodat de gebruiker op een site komt en niet op twee verschillende sites.
Metro design Het geheel moet worden vormgegeven in de metro design taal.
22
Xboxworld – Redesign
Lars Hoekstra
7.1 Ontwikkeling Het ontwikkelen van het concept is in verschillende fases gebeurd. De eerste fase was de fase waarin gekeken is naar wat Xboxworld momenteel te bieden heeft en wat de gebruikers willen. Op basis aarvan zijn enkele ideeën ontstaan. Deze ideeën zijn samengevat in de volgende punten:
Video-content Nieuwe (unieke) content Usercontent19 Interactie Podcasts20 Recensies
Met deze punten is er brainstormsessie gehouden met de opdrachtgever en een medewerker van de website. Tijdens deze sessie zijn alle punten besproken en in de meeste gevallen is er ook al erg specifiek op de content van de ideeën ingegaan. Wat de inhoud zal moeten zijn en op welke manier het zichtbaar gemaakt moet worden. Naar aanleiding van dit gesprek zijn de concepten uitgewerkt in wat het uiteindelijke resultaat moet worden.
Videopodcast Een introductie in het podcast genre door de huidige podcasts te versterken met beeldmateriaal waarover gesproken wordt. Naast de introductie in het podcast genre wordt hierin ook interactie aangeboden tussen de gebruikers en de redactie. Door middel van topics op het forum zouden gebruikers kunnen reageren op stellingen, die daarna behandeld zouden worden in de podcast. Opmerkelijke of goede opmerkingen en suggesties van gebruikers zouden dan tijdens deze podcast uitgelicht kunnen worden. Daarnaast wordt hierin gebruik gemaakt van de social media om die topics extra aandacht te schenken.
Videocontent Eigen unieke video content voor de website. Reviews, previews, quicklooks21 en live streams zijn mogelijkheden. De uitvoering kan zowel simplistisch als zeer uitgebreid gedaan worden, waardoor de mogelijkheid voor doorgroeien vergroot wordt.
Artikelen Nieuwe vaste content voor Xboxworld, die op een reguliere basis terugkeert. Daarnaast kunnen deze artikelen gecombineerd worden met de podcast en andere video content.
Het grootste probleem met de dragers is, dat er weinig samenhang is. Er is wel de mogelijkheid om de vormgeving hetzelfde te doen waardoor het grafisch gezien één geheel wordt. Er ontbreekt echter een overkoepelend iets waardoor het één geheel zou worden.
19
Usercontent: Content gemaakt door de gebruiker http://nl.wikipedia.org/wiki/Podcast 21 Quicklooks: een video van gameplay beelden van een spel met audio commentaar eronder 20
23
Xboxworld – Redesign
Lars Hoekstra
Naar aanleiding van een consult zijn de dragers verwerkt in drie onderdelen. De reden hiervoor is dat de content dan makkelijk te vergelijken is met elkaar waardoor er samenhang kan ontstaan of ontdekt kan worden binnen de onderdelen. De drie onderdelen zijn hierna verdeeld in de volgende onderdelen:
Video (content) Artikelen Interactie
Deze drie onderdelen worden in een driehoek met elkaar vergeleken. Welke onderdelen komen met elkaar overeen of overlappen elkaar? Aan de hand van deze overlappingen ontstaat er een visie, wat de visie weergeeft van dat specifieke onderdeel van het concept. Er worden in totaal drie driehoeken gemaakt, die ingevuld worden met de volgende onderwerpen:
Inhoud Wat bevat het onderdeel.
Functie Wat is de functie van het onderdeel.
Grafisch Hoe gaat het onderdeel eruit zien.
24
Xboxworld – Redesign
Lars Hoekstra
7.2 Inhoud Video •Podcasts •(P)reviews •Live-streams
Artikelen •Top 10 •Release lijst •Previews
Interactie •Poll •Forum highlights •Forum intergratie
Figuur 7.1 inhoud concept driehoek
Visie: Nieuwe content leveren waarbij de doelgroep betrokken raakt.
7.2 Functioneel Video •Entertainen •Informeren
Artikelen •Entertainen •Informeren
Interactie •Interactie
Figuur 7.2 functie concept driehoek
Visie: Het entertainen van de doelgroep, maar de doelgroep daarbij ook te informeren. Daarnaast tijdens dit proces interactie te krijgen met de doelgroep. 25
Xboxworld – Redesign
Lars Hoekstra
7.3 Grafisch Video •Metro
Artikel •Metro
Interactie •Metro
Figuur 7.3 grafisch concept driehoek
Visie: Een nieuw design vormgegeven geïnspireerd door het metro design van Microsoft.
26
Xboxworld – Redesign
Lars Hoekstra
7.4 Hoe, wat en waarom Elk onderdeel heeft nu zijn eigen visie, op basis daarvan worden alle visies gecombineerd in een grote visie waarbij de hoe, wat en waarom vragen gesteld worden. Het antwoord dat daarop gegeven wordt, is de visie van dit deel van het concept.
Wat? Nieuwe content en een nieuw design maken voor Xboxworld waar de doelgroep bij betrokken moet worden.
Hoe? Door één groot geheel te creëren, dat bij elkaar aansluit.
Waarom? Om de leden meer te betrekken bij de site en van de site één groot geheel te maken.
7.5 Het concept Een nieuw design waarin het metro toegepast wordt, waarbij de doelgroep betrokken moet worden. Doel: Het samenbrengen van de frontpage en het forum, waardoor de leden van beide pagina’s samen komen voor interactie. Waardoor leden met een grote groep hun mening kunnen delen en hun mening ook door een grotere groep gehoord wordt. Uitvoering: Het forum in de frontpage verwerken waardoor het niet meer twee losstaande pagina’s zijn. Waardoor de community weer een wordt en er hierdoor meer interactie komt.
27
Xboxworld – Redesign
Lars Hoekstra
Design
28
Xboxworld – Redesign
Lars Hoekstra
8. Inleiding Voor Xboxworld moest een nieuw design komen. Hierbij moest de identiteit van Xboxworld behouden blijven, maar ook met zijn tijd meegaan. De website heeft in totaal 6 jaar stil gestaan en in de loop van de jaren zijn enkele pogingen gedaan om de website te vernieuwen.
Figuur 8.1 Xboxworld huidige versie
Visie: De visie is het ontwikkelen van een website die zowel Metro is als Xboxworld. De kern elementen die Xboxworld maken wat het is, vertalen naar Metro. Daarbij moet een eigen invulling gegeven worden aan het Metro op het internet is. Een gebruiksvriendelijke website, die duidelijk is voor de gebruiker. Vanuit het onderzoek zijn er factoren naar voren gekomen waarmee rekening gehouden moet worden. Dit zijn factoren van waaruit het design is ontstaan. Deze factoren bestaan uit oude onderdelen die de identiteit van Xboxworld gemaakt hebben, daarnaast zijn het ook nieuwe onderdelen, die Xboxworld nodig heeft om een stap vooruit te maken. Oude onderdelen:
Nieuws centraal De gebruiker kijkt meerdere keren per dag op de website. Hierbij staat het nieuws en het forum centraal. Hier moet ook de focus op komen te liggen in het ontwerp.
Releaselijst Uit het onderzoek blijkt dat de gebruikers de releaselijst van Xboxworld prettig vinden. Opvallende kritiek is echter wel dat de lijst wel up-to-date moet zijn.
Consistentie De gebruikers willen graag vaste content van Xboxworld, dit wordt geleverd door o.a. elke week een podcast. Dit moet op een specifieke plaats terugkomen in het ontwerp. Dit geldt ook voor onderdelen als game informatie of zoekfuncties. 29
Xboxworld – Redesign
Lars Hoekstra
Nieuwe onderdelen:
Forum integratie Xboxworld is momenteel in twee kampen gesplitst, de frontpage en het forum. Door deze twee te combineren zal de community groter worden en zullen meer mensen op het forum komen en de forum gebruikers meer gebruik kunnen gaan maken van de frontpage.
Metro Microsoft is druk bezig met al hun producten de metro look te geven. Xbox is hierbij geen uitzondering en heeft recent een update gekregen waarbij de Xbox ook het metro design kent. Dit moet tot op zekere hoogte ook toegepast worden in de website. Er zijn richtlijnen voor het metro design, dit zijn echter wel de Windows Phone richtlijnen.
Gebruikers interactie De gebruiker willen graag cijfers kunnen geven op spellen. Dit moet dan terug komen in het ontwerp. (bij de game-pagina’s)
Toekomst gericht Het ontwerp moet jaren meekunnen. Hiermee wordt ook bedoeld dat het ontwerp op andere platformen goed bekeken kan worden zoals: mobiele telefoons en tablets.
Het uiteindelijk ontwerp zal een combinatie zijn van al deze factoren. Dit zal ervoor zorgen dat Xboxworld een ontwerp krijgt, dat zijn eigen identiteit heeft, maar ook weer mee gaat in de ontwikkeling van de Xbox zelf. Het complete grafisch en functionele ontwerp staan beide in een los document. In deze documenten staat alle informatie omtrent de functionaliteiten van het ontwerp en hoe het grafisch uitgewerkt zou moeten worden.
30
Xboxworld – Redesign
Lars Hoekstra
8.1 Inspiratie
Figuur 8.2 moodboard Xboxworld
Voor het design ligt de voornaamste bron van inspiratie bij het Metro design van Microsoft. Hierbij is gekeken naar wat nu precies Metro is en de gedachte die erachter zit. Zodat niet alleen het grafische gedeelte van het Metro design wordt toegepast maar ook de gedachte erachter. Naast Metro is er ook gekeken naar de wijze waarop gebruikers op pagina’s kijken en wat van de gemiddelde gebruiker zijn of haar beweegredenen zijn om te kijken.
31
Xboxworld – Redesign
Lars Hoekstra
8.1.1 Metro Voor de Xbox is de metro look een nieuwe startpunt. Voor Microsoft is dit een onderdeel van het stroomlijnen van al zijn producten. Zodat voor de consument op verschillende platformen alles hetzelfde is. Om Xboxworld actueel te houden en toekomst gericht moet het design van Xboxworld hierbij aansluiten. Om deze reden is er voor gekozen inspiratie op te doen uit de Metro look. Niet alle Metro kenmerken worden echter toegepast, omdat Metro zich momenteel erg richt op telefoons. In de toekomst zal het zich ook richten op Windows 8, zodra die wordt uitgebracht. Dit betekent dat er geen specifieke regels zijn voor het ontwerpen van websites met Metro. Een website die puur uit tiles22 bestaat zou hierdoor al een Metro design krijgen. Al is Metro veel meer dan alleen wat tile’s op een webpagina. Voor Xboxworld is er een eigen interpretatie gemaakt van het Metro design. Deze interpretatie bestaat uit de volgende elementen:
Duidelijk / eenvoud De manier waarop de content gepresenteerd wordt, moet eenvoudig zijn maar ook duidelijk. Hierbij is het belangrijk dat de content zich zo eenvoudig mogelijk presenteert en niet meer moet dan wat het is.
Tile’s Het Metro design staat bekend om zijn tiles, die de content duidelijk presenteert van wat het bevat. Hierbij gaat het erom dat het direct duidelijk is wat de tile biedt.
Lucht / Whitespace Er moet ruimte zijn voor lucht, de hoeveelheid content moet duidelijk verdeeld zijn in gedeeltes en hierbij moet de content wel kunnen ademhalen, zodat alles fijn bij elkaar aansluit maar wel ruimte heeft.
Content = leven De content is het gene wat gepresenteerd wordt en dit gebeurt door middel van de tiles, daarnaast zorgt de content voor het uiterlijk van de website.
Typografie Typografie is een belangrijk onderdeel van Metro, dit heeft te maken met uitlijnen en de groten van het font. Hoe groter het font hoe belangrijk het element. Doormiddel van typografie worden specifieke hiërarchieën gepresenteerd.
Hier ontbreekt het onderdeel van bewegingen, omdat dit niet op dezelfde manier terug kan komen in een website als op een telefoon. Daarnaast is er meer beweegvrijheid binnen een website, dan de Metro regels voor de telefoon.
8.1.1.1 Visie Metro is een duidelijke design taal. Het doel is om de content dat het moet vormgeven zo duidelijk mogelijk weer te geven. Helaas zijn er weinig richtlijnen voor metro op het gebied van webdesign. Hierdoor wordt het metro gedeelte van het ontwerp een interpretatie van het metro ontwerp.
22
Tile: een vierkant met content
32
Xboxworld – Redesign
Lars Hoekstra
8.1.2 Usabilty Metro brengt al een groot gedeelte usabilty met zich mee in de manier waarop het content presenteert. Voor informatie op het gebied van usabilty is er gekeken naar het boek: “Don’t make me think” van Steve Krug. Een boek waarin de gedachte van de gebruiker wordt behandeld en ook manieren waarop content wordt gepresenteerd. “We lezen pagina’s niet, we scannen ze”.
23
Centraal stond het scannen van pagina’s, hoe gebruikers pagina’s bekijken en op wat voor manier een gebruiker dit doet. Een gebruiker let hierbij eerst op elementen die hem eerst opvallen (tekst / afbeeldingen) en gaat daarna pas specifiek bezig met de gedeelten waar de gebruiker interesse in heeft. Uitzonderingen op deze regel zijn specifieke stukken informatie zoals nieuwsberichten. Het ontwerpen van een pagina zou hierbij het ontwerpen van een billboard zijn. Waarbij de pagina zich zo presenteert voor de gebruiker, dat de content makkelijk te scannen is waardoor de gebruiker sneller krijgt wat hij of zij wil. Hierbij staat centraal, geef de gebruiker wat hij wil. Daarna komen de minder interessante onderdelen, die de gebruiker wel bekijkt of leest indien hij of zij dat wil.
8.1.2.1 Inspiratie Voor Xboxworld moet de content zo gepresenteerd worden, dat de gebruiker krijgt waar hij of zij op zoek naar is. Hiervoor worden er bij de recensies nu ook de conclusie en het cijfer voor het spel aangeboden. De gebruiker kan op deze manier eerst deze informatie lezen, voordat hij of zij doorgaat naar het lezen van het hele artikel.
23
Steve Krug – Don’t Make me Think
33
Xboxworld – Redesign
Lars Hoekstra
8.1.3 Responsive Design Een responsive design is een design dat compatible is met telefoons en tablets. Het idee hier achter is om de website die ontworpen zal worden zo te maken, dat die ook goed functioneert op de verschillende platformen. Het is meer dan alleen dat de website op de andere platforms staat, maar hij moet dus ook goed werken. A website that responds to the device that accesses it and delivers the appropriate output for it uses responsive design. Rather than designing multiple sites for different-sized devices, this approach designs one site but specifies how it should appear on varied devices.
24
Responsive design zorgt ervoor dat de website op elk platform goed werkt en hierbij zijn eigen indeling heeft. Het legt de nadruk op het indelen van de content op de verschillende platforms, dat ervoor zorgt dat de website ontworpen moet worden van een specifiek grid. Het grid zorgt er vervolgens voor dat de content onderverdeeld kan worden. Een responsive design is belangrijk omdat het internet de afgelopen jaren erg gegroeid is. Met name de manier waarop het zich kan presenteren. Mensen internetten niet alleen maar vanaf de pc of laptop, maar ook via tablets en smartphones. Sterker nog, mensen gebruiken internet meer op de smartphone en tablets dan op de pc. Websites moeten hier rekening mee houden, omdat er een grote kans bestaat dat de doelgroep ook gebruik maakt van die platforms.25 Een grid zorgt ervoor dat het gemaakte design op een specifieke manier uitgelijnd is. Alle koloms / blokken die hiermee gemaakt zijn, zijn hierdoor makkelijk te verkleinen en te verplaatsen. Een bekend grid om mee te werken is het 960 grid26. Het grid is 960 breed en zorgt er ook direct voor dat de website op gebied van breedte goed compatible is met tablets. Er moet echter rekening gehouden worden met de knoppen, omdat een vinger groter is dan een muiscursor.27 De resoluties verschillen per platform waar op gewerkt wordt. Voor de telefoon kan een resolutie van 320 px gerekend worden en x aantal pixels hoog. Telefoongebruikers vinden het ook niet erg om te scrollen, omdat dat erg makkelijk op een telefoon gaat. De content is hierbij het belangrijkst.
9.1.3.1 Inspiratie Het Metro design sluit perfect aan bij de denkrichting van een responsive design. De tiles waarmee gewerkt wordt, kent een goede vertaling naar een lagere resolutie zonder daarbij zijn boodschap te verliezen. Het werken met een 960 grid zorgt ervoor zorgt, dat het voor de programmeur veel makkelijker wordt om de site te programmeren.
24
http://itservices.stanford.edu/service/web/mobile/about/terminology http://www.waxle.com/archives/911 26 http://960.gs/ 27 http://www.waxle.com/wp-content/uploads/2012/05/responsive_reader_download.pdf 25
34
Xboxworld – Redesign
Lars Hoekstra
8.1.4 Xbox Momenteel bestaan er nog weinig echte volwaardige Metro websites. Xbox.com28 is het beste voorbeeld van een website die gemaakt is met de Metro filosofie. De website gebruikt kenmerken van het Metro design en combineert dit met het web. Daarnaast biedt de website ook enige interactie met de Xbox console.
Figuur 8.3 Xbox 360 dashboard
Naast de website is er de Xbox zelf die zijn eigen vorm van het Metro design kent. Het dashboard heeft zijn eigen vorm van Metro. Hierbij presenteert het spellen op een specifieke manier.
8.1.4.1 Inspiratie Voor inspiratie is hierbij vooral gekeken naar het kleurgebruik en wat de Xbox anders doet met het Metro design. Xbox doet niks vernieuwends met het Metro design, maar giet zijn eigen content in het design. Waardoor extra duidelijk wordt hoe belangrijk de content is bij het design. De content zorgt voor het design.
28
www.xbox.com
35
Xboxworld – Redesign
Lars Hoekstra
8.2 Results
Figuur 8.4 Xboxworld nieuw design
Het uiteindelijke ontwerp is een adaptatie van het metro design. Het is echter wel echt een adaptatie en niet een traditioneel metro, omdat momenteel metro zich voornamelijk focust op de smartphones en de tablets. Het moeilijkste gedeelte is met name het weglaten van content/grafische elementen zonder dat het gemist wordt. Uiteindelijk is het ontwerp zo minimalistisch grafisch mogelijk ontworpen. Er zijn geen grafische effecten toegevoegd aan het ontwerp met uitzondering van de achtergrond, die een lichte noise & gradiant bevat. De website is uiteindelijk een ontwerp geworden waarvan de content de website vult en ook vorm geeft. De content wordt strak gepresenteerd en is eenvoudig en het design bevat weinig ruis.
36
Xboxworld – Redesign
Lars Hoekstra
8.5 Ontwikkeling De ontwikkeling van het nieuwe ontwerp is begonnen met het maken van verschillende functionele schetsen. Hierbij moest er een balans zijn tussen content en het zo simpel mogelijk houden. Tijdens dit proces zijn er verschillende schetsen gemaakt waarin de frontpage en de andere pagina’s getekend worden.
Figuur 8.5 concept tekeningen van functioneel / grafisch ontwerp
Tijdens dit proces is er voornamelijk vanuit de metro gedachte gewerkt. Hierbij lag de focus op duidelijkheid voor de gebruiker en de content zo helder mogelijk aanbieden. Daarnaast wordt hierbij zowel functioneel als grafisch gedacht vanuit de bekende tiles waar het metro design o.a. bekend van is. Door het denken vanuit blokken en tiles wordt het functionele gedeelte ook direct al gedeeltelijk grafisch. Het grafisch gedeelte wordt echter voornamelijk ingevuld aan de hand van de content die de website geeft. Op basis van de schetsen is een grafische schets van het ontwerp gemaakt, om alvast een beeld te creëren hoe de website er mogelijk uit zou kunnen komen te zien. Deze schetsen zijn enkel en alleen gemaakt om een visuele indruk te krijgen en ook om alvast de plaatsing van de content te testen.
37
Xboxworld – Redesign
Lars Hoekstra
8.5.1 Functioneel Naar aanleiding van het uitwerken van het grafisch ontwerp is het functioneel ontwerp gemaakt. Dit is uitgewerkt met behulp van Axure29, een tool waarmee een functionele ontwerp gemaakt en getest kan worden. De ontwerpen zijn gebaseerd op de grafisch gemaakte schets en de andere ontwerpen die geschetst zijn. Hierbij zijn de schetsen niet een op een uitgewerkt, maar meer als richtlijnen gebruikt. Elk scherm is hierbij uitgewerkt. De bedoeling hiervan is om de frontpage een plek te laten zijn waar alles samen kan komen. Een gebied waarin alle belangrijke content kan komen te staan. Dit is uiteindelijk de highlightbox geworden waarin de laatste reviews / previews en andere content in staan in combinatie met advertenties.
Figuur 8.6 functioneel ontwerp van highlights gebied
Een ander belangrijk element van de website is dat het consistent en duidelijk moet zijn. Xboxworld kende al een koppeling van nieuwsberichten met games, hiervoor stond bij het nieuwsbericht de gerelateerde game. Hiervoor is er een game informatie sectie ontwikkeld, die bestaat uit tiles met informatie over het spel. Deze tiles vormen samen de gamepagina’s. De gebruiker ziet echter alleen de belangrijkste tiles bij het nieuwsbericht. Toen het functioneel ontwerp uitgewerkt was, zijn er testen gemaakt van het ontwerp m.b.v. de rapid prototyping30 methode. Naar aanleiding van deze testen zijn er enkele wijzigingen in het uiteindelijk ontwerp gemaakt. Waarna nog een test volgde, die echter geen bijzondere resultaten heeft opgeleverd. Op basis van deze resultaten is het ontwerp aangepast.
Figuur 8.7 gameinformatie gedeelte functioneel
29 30
http://www.axure.com/ Bijlage: 11.3.2 Rapid Prototyping
38
Xboxworld – Redesign
Lars Hoekstra
8.5.2 Grafisch Het eerste officiële grafisch ontwerp van de website was goed, het ontwerp bevatte de Metro vormgeving. Doordat het Metro gedeelte van het ontwerp erg goed uitgewerkt was, was er een solide basis waar het ontwerp zich verder op kon ontwikkelen. In de loop van het ontwikkelen van het ontwerp zijn er voornamelijk kleine aanpassingen gemaakt, omdat de uitstraling van de website te zakelijk was. De Metro stijl bleef echter overeind staan en is dat in de verdere loop van het traject in de grote lijnen ook gebleven. Tijdens dit traject is er veel feedback gekomen van medewerkers van Xboxworld en enkele leden. Deze mensen konden via een subforum feedback geven op de ontwerpen31.
8.5.3 Typografie Het standaard font voor Metro is het font Segoe UI. Dit font is echter niet gebruikt voor het ontwerp. Voor het font zelf was een solide duidelijk font nodig, dat zich kon aansluiten met de content. Het moest elkaar niet in de weg staan, maar juist aanvullen. Op grond hier is er gekozen voor het font:
Freeroad Het font freeroad sluit aan bij de eisen en staat de content niet in de weg. Het zorgt er juist voor dat de content aansluit bij de typografie.
31
Figuur 8.8 frontpage grafisch ontwerp
11.3.3 Testomgeving
39
Xboxworld – Redesign
Lars Hoekstra
8.5.4 Responsive Voor het responsive design ontwerp is er vanuit gegaan, dat er gewerkt wordt met een iPhone. Hierbij wordt gerekend met een breedte van 320 pixels. In het ontwerp worden specifieke blokken verplaatst en in sommige gevallen verkleind. Door het verplaatsten en verkleinen van de blokken ziet de site er op de mobiel anders uit.
Figuur 8.9 grafisch ontwerp van iPhone (responsive) verise van Xboxworld
40
Xboxworld – Redesign
Lars Hoekstra
8.6 Logo
Figuur 8.10 schetsen van nieuwe logo Xboxworld
Het nieuwe logo van Xboxworld moest verfrissend zijn, maar ook binnen de stijl van de nieuwe website passen. Het is belangrijk dat het metro design terug komt in het ontwerp van het logo. Het nieuwe ontwerp combineert de X van Xbox en Xboxworld met een ‘’wereldbol’’ met niks er om heen. Dit heeft te maken met het feit dat Metro logo strak en eenvoudig moet zijn. Het uiteindelijk ontwerp lijkt verdacht veel op het huidige Xbox logo, maar dan in Metro stijl. Wat precies hetgeen is waar naar gezocht werd. Een strak metro logo, dat geassocieerd wordt met de Xbox.
Figuur 8.11 nieuwe Xboxworld logo (rechts gepresenteerd)
41
Xboxworld – Redesign
Lars Hoekstra
8.7 Thema’s Tijdens het ontwikkelen van het nieuwe design is ook nagedacht over het plaatsen van advertenties. In de schetsen is het plaatsen van advertenties ook naar voren gekomen. Er is nagedacht over de invloed die advertenties hebben op het uiterlijk van de website. Xboxworld staat er om bekend dat in sommige gevallen het thema veranderende op basis van de geplaatste advertenties. Advertenties moeten op een creatieve niet irriteerde manier terugkomen. Aan de hand van het gekozen kleurenschema is hier over nagedacht. Het idee hierachter is dat de achtergrond en de kleur de sfeer van de website bepalen. Zonder veel aanpassingen wordt de sfeer van de website veranderd aan de hand van deze twee elementen.
Figuur 8.12 verschillende frontpage thema’s
42
Xboxworld – Redesign
Lars Hoekstra
Afronding
43
Xboxworld – Redesign
Lars Hoekstra
9.1 Visie Het uiteindelijke resultaat is een afgerond ontwerp van de nieuwe website van Xboxworld. Iets waar ik zelf heel tevreden over ben. De Metro filosofie komt terug in het ontwerp, maar niet exact op de manier zoals Microsoft dat doet. Daarnaast is het ontwerp strak uitgelijnd en werkt het prima met een responsive design. Het grootste probleem met het ontwerp was voornamelijk de uitlijning en de goede Metro guidelines vinden, die ik achteraf zelf heb moeten opstellen.
44
Xboxworld – Redesign
Lars Hoekstra
Aanvullend
45
Xboxworld – Redesign
Lars Hoekstra
10.1 Termen Sociale media: een verzamelbegrip voor online platformen waar de gebruikers, zonder of met minimale tussenkomst van een professionele redactie, de inhoud verzorgen. Frontpage: Voorpagina, startpagina van de website. Gamingwebsite: website die zich richt op games. Feature: eigenschap. Recensie: een (kritische) bespreking van een videospel. Tagcloud: een visuele weergave van inhoudstags die op een website, meestal een weblog, worden gebruikt. Tile: een vierkant met content. Twitpic: een afbeelding die gemaakt is door de eigenaar van een twitter account en die dan geplaatst is in een tweet. Usercontent: Content gemaakt door de gebruiker. Gameplay: Hoe een gebruiker een computerspel ervaart of de elementen van het spel zelf. Hierbij kan worden gedacht aan de besturing maar ook de controle over het weergegeven visuele standpunt.
46
Xboxworld – Redesign
Lars Hoekstra
10.2 Bibliografie Axure. (sd). Axure. Opgehaald van Axure: www.axure.com Corpos. (sd). streekproefcalculator. Opgehaald van Corpos: http://www.corpos.nl/producten/Steekproef/streekproefcalculator.html Esrb. (sd). How Much Do You Know About Video Games? Opgehaald van Esrb: http://www.esrb.org/about/video-game-industry-statistics.jsp Fogel, S. (sd). Xbox 360 sees biggest sales week in its 7-year history. Opgehaald van Venturebeat: http://venturebeat.com/2011/11/29/xbox-360-sees-biggest-sales-week-in-its-7-year-history/ Greene, J. (sd). Why Metro now rules at Microsoft. Opgehaald van Cnet: http://news.cnet.com/830110805_3-57370910-75/why-metro-now-rules-at-microsoft/ Itproportal, S. W. (sd). Microsoft Xbox Design Head Moves Over as Metro UI Takes Hold. Opgehaald van ITProPortal: http://www.itproportal.com/2011/12/15/microsoft-xbox-design-headmoves-over-metro-ui-takes-hold/ Jan-Wessel. (sd). Reader responsive design. Opgehaald van Waxle: http://www.waxle.com/archives/911 Jan-Wessel. (sd). Responsive design, read-out. Opgehaald van Waxle: http://www.waxle.com/wpcontent/uploads/2012/05/responsive_reader_download.pdf Kruzeniski, M. (sd). From Transportation to Pixels. Opgehaald van Windowsteamblog: http://windowsteamblog.com/windows_phone/b/wpdev/archive/2011/02/16/fromtransportation-to-pixels.aspx Massey, S. (sd). Metro Ui Design Principles. Opgehaald van Stephanemassey: http://www.stephanemassey.com/metro-design-principles/ Microsoft. (sd). Metro Design Language of Windows Phone 7. Opgehaald van Microsoft: http://www.microsoft.com/design/toolbox/tutorials/windows-phone-7/metro/ Mindtools. (sd). The McKinsey 7S Framework. Opgehaald van Mindtools: http://www.mindtools.com/pages/article/newSTR_91.htm Panfili, D. (sd). Introduction To Designing For Windows Phone 7 And Metro. Opgehaald van Smashingmagazine: http://uxdesign.smashingmagazine.com/2011/12/20/introductiondesigning-windows-phone-7-metro/ Searchenginejournal. (sd). The Growth of Social Media: An Infographic. Opgehaald van Searchenginejournal: http://www.searchenginejournal.com/the-growth-of-social-media-aninfographic/32788/ Sekander, Y. (sd). What is metro design & what are its principles. Opgehaald van Elevatelocal: http://www.elevatelocal.co.uk/blog/what-is-metro-design-what-are-its-principles-07036316
47
Xboxworld – Redesign
Lars Hoekstra
Smith, N. (sd). 960 Grids. Opgehaald van 960gs: http://960.gs/ Terror, D. (sd). Lessons From Swiss Style Graphic Design. Opgehaald van Smashingmagazine: http://www.smashingmagazine.com/2009/07/17/lessons-from-swiss-style-graphic-design/ Think, S. K. (sd). Don’t Make me. Wikipedia. (sd). Metro. Opgehaald van Wikipedia: http://en.wikipedia.org/wiki/Metro_(design_language) Wikipedia. (sd). Podcast. Opgehaald van Wikipedia: http://nl.wikipedia.org/wiki/Podcast Xbox, Microsoft. (sd). Xbox Gamepagina. Opgehaald van Xbox: http://marketplace.xbox.com/nlNL/Games/Xbox360Games Xbox, Microsoft. (sd). Xbox home. Opgehaald van Xbox: www.xbox.com Xbox, Microsoft. (sd). Xbox Mobile. Opgehaald van Xbox: http://www.xbox.com/enUS/Live/Mobile/Home Xboxworld. (sd). Xboxworld forum mainpage. Opgehaald van Xboxworld forum: http://forum.xboxworld.nl/index.php Zheng, Q., & Nicholas , H. (sd). Design case study: Website to Metro style app. Opgehaald van Microsoft: http://msdn.microsoft.com/en-us/library/windows/apps/hh868264.aspx
48
Xboxworld – Redesign
Lars Hoekstra
11.3 Bijlagen Externe bijlagen zijn: Concurrentie analyse Gebruikers analyse Grafisch ontwerp Functioneel ontwerp
49
Xboxworld – Redesign
Lars Hoekstra
11.3.1 Enquete Inleidende tekst: Beste bezoeker van Xboxworld.nl, Door deel te nemen aan deze enquête draag je bij aan de doorontwikkeling van Xboxworld.nl. Om meer inzicht te krijgen in welke wijzigingen en vernieuwingen bijdragen aan de website, doen wij nu een onderzoek naar de wensen en de meningen van onze bezoeker. De enquête neemt ongeveer 5 minuten van je tijd in beslag. Wij hopen dat je de enquête invult en ons zo helpt bij het maken van een betere Xboxworld.nl! Afsluiteinde tekst: Bedankt voor het invullen van de enquête! Nog één laatste mededeling: wij zijn op zoek naar vijf personen, die ons willen helpen in het ontwikkelproces van de website. Wij zijn op zoek naar personen die de website vaak bezoeken en willen meewerken aan diepte-interviews en usability testing. Heb je interesse? Neem contact met ons op via het volgende email adres:
[email protected]
11.3.1.1 Vragenlijst Hoeveel jaar bezoek je Xboxworld.nl? … Om een duidelijk beeld te krijgen hoeveel jaar bezoekers op Xboxworld.nl komen hebben we deze vraag gesteld. Daarnaast kunnen we hiermee ook peilen of er enkele jonge leden bij zijn gekomen. Hoe vaak bezoek je Xboxworld.nl?
Meerdere keren per dag Eens per dag Enkele keren per week Minder dan wekelijks
Om te kijken hoe vaak een gemiddelde gebruiker de site bezoek hebben we deze vraag gesteld. Komen ze vaker per dag of slechts wekelijks.
Ik kom op Xboxworld.nl vooral voor de volgende items of activiteiten: Geef een cijfer van 1 tot en met 5, waarbij de 1 het meest belangrijke item is en 5 het minst belangrijke item is.
Nieuwsberichten lezen Reageren op nieuwsberichten Reviews lezen Reageren op reviews Previews/artikelen lezen Reageren op previews/artikelen Het forum lezen Reageren op het forum Prijsvragen
50
Xboxworld – Redesign
Lars Hoekstra
Aan de hand van deze activiteiten willen we zien wat een gebruiker allemaal doet op de site. Daarnaast kunnen we de resultaten naast elkaar liggen en kijken wat de gebruiker het meest doet. De functie ‘chatten’ op de voorpagina wordt niet meer veel gebruikt door de leden. Vind jij dat Xboxworld.nl deze functie nieuw leven moet inblazen?
Ja Nee
We hebben al jaren de functie chatten, deze wordt helaas niet veel meer gebruikt. We willen weten of het de moeite waard is om hier nog wat mee te doen, of dat we de functie beter kunnen verwijderen.
Nu volgen een aantal stellingen. Geef aan in welke mate je het eens bent met de betreffende stelling. (helemaal mee eens, mee eens, mee oneens, helemaal mee oneens, geen mening)
De nieuwsberichten zijn volledig. Xboxworld.nl is de beste plek voor Nederlandstalige fans van Xbox. Reviews en previews zijn vaak van goede kwaliteit. Alle belangrijke spellen worden gerecenseerd. Reviews en previews zijn te kort. Waarderingen uitgedrukt in een woord vind ik beter dan een cijfer. Ik vind een waardering met een cijfer duidelijker dan een waardering uitgedrukt in een woord. Bij reviews moeten lezers ook een waardering kunnen geven. Er zijn genoeg artikelen te lezen. Xboxworld.nl wordt genoeg ge-update. Er zouden meer interviews moeten komen. Xboxworld.nl is professioneel. Xboxworld.nl zou ook videoverslagen moeten hebben. Er is een goede verbinding tussen het forum en de voorpagina. De redactie van Xboxworld.nl is bereikbaar voor commentaar. Ik zou Xboxworld.nl aanraden aan anderen. Xboxworld.nl moet over meer onderwerpen schrijven (bijv: Games for Windows, Windows Phone Games). De voorpagina van Xboxworld.nl ziet er mooi uit. Ik kan altijd vinden wat ik zoek op de voorpagina van Xboxworld.nl.
Aan de hand van de stellingen willen we weten wat de gebruiker globaal van ons vindt. Dit ook omdat het makkelijk meetbare resultaten zijn ten opzichte van open vragen. We willen weten wat ze van onze items vinden en of enkele functies na behoren werken. Daarnaast bestaat er ook de geen mening optie omdat niet elke gebruiker gebruik maakt van al onze features.
Open vragen: We hebben voor open vragen gekozen met uitgebreide uitleg omdat we vertrouwen in onze doelgroep hebben dat die veel informatie wil leveren. Veel leden schreeuwen al tijden om een nieuw forum en andere verbeteringen. Vaak luisteren we hierna en wordt er werk van gemaakt. Nu hopen we dat de gebruiker ook uitgebreide feedback zal geven doormiddel van de openvragen. Wat zijn volgens jou goede eigenschappen van Xboxworld.nl? Als we een nieuw design maken moeten de goede eigenschappen van Xboxworld.nl niet verdwijnen, doormiddel van deze vraag hopen we een duidelijke omschrijving te krijgen of steekwoorden van wat goed is aan Xboxworld.nl. 51
Xboxworld – Redesign
Lars Hoekstra
Wat zijn volgens jou slechte eigenschappen van Xboxworld.nl? Om informatie te krijgen over waar wij de plank finaal misslaan stellen we deze vraag. Wat doen wij verkeerd en waarom doen we dat verkeerd? Op deze manier krijgen we een lijst met slechte eigenschappen waar we aan kunnen werken. Welke aspecten mis jij op Xboxworld.nl? Naast goede en slechte eigenschappen missen we waarschijnlijk ook wat op de site. Op deze manier kan de gebruiker aangeven wat hij of zij mist op de site. Vind jij dat er meer interactie en/of overlap zou moeten zijn tussen de voorpagina en het forum? Het forum wordt dagelijks druk bezocht, echter niet iedereen is bekend met het forum. Op het moment moet de gebruikers bij de frontpage en het forum apart inloggen. We willen graag dat de frontpage community en het forum community samenkomen. Zelf hebben we wel ideeën, maar we zijn ook benieuwd naar wat de gebruiker hiermee zou willen doen. Vind jij dat er meer interactie en/of overlap zou moeten zijn tussen de voorpagina en de X-bazar? De X-bazaar is een onderdeel van het forum dat druk bezocht wordt door een bepaalde groep mensen. Ken de gebruikers het forum niet, dan ken de gebruiker zeker ook de X-bazaar niet. We willen gebruikers er graag op attenderen dat dit een geweldig onderdeel van het forum is waar de gebruikers games kunt verkopen/kopen of ruilen. We vragen daarom graag naar de mening van de gebruikers. Welke andere sites bezoek jij om te lezen over Xbox? Om te kijken naar waar de gebruikers nog meer informatie vandaan halen, is deze vraag gesteld. Ook is deze vraag handig voor de concurrentie analyse.
52
Xboxworld – Redesign
Lars Hoekstra
11.3.2 SWOT analyse Sterktes (Strengths) Sterke community Eigen reviews Xbox only Feitelijk nieuws Grote database Unieke items
Zwaktes (Weaknesses) Late reviews Verouderd Weinig social media Frontpage / Forum splitsing Inconsistent Onoverzichtelijke zoekresultaten
Kansen (Opportunities) Nieuwe console (Xbox) Socialmedia ontwikkelingen Nieuw design (metro) Meerdere platformen (Xbox live) Nieuwe vorm van spellen distributie
Risico’s (Threats) Xbox wordt casual Meer concurrentie Commercieel wording van de industrie Socialmedia ontwikkelingen
Xboxworld moet het hebben van zijn grote community en zijn eigenheid. De gemaakte recensies zijn goed maar vaak aan de late kant. De site plaatst alleen maar nieuws en artikelen met betrekking tot de Xbox wat een belangrijk sellingpoint32 is. Inmiddels is de website al verouderd en hierdoor ziet de site er niet meer aantrekkelijk uit. Al het geplaatste nieuws wat gedaan wordt, bestaat alleen maar uit feiten. De geplaatste content is niet erg consistent waardoor er op vreemde momenten veel content geplaatst wordt. Er worden wel unieke artikelen geplaatst al worden die op willekeurige momenten online gezet. Er is een duidelijke splitsing van de frontpage en het forum, dit komt mede doordat bij beide pagina’s apart ingelogd moet worden. Onze zoekmachine geeft weinig uitgebreide opties voor artikelen enzovoort, echter Xboxworld heeft wel een grote database van spellen waarin de gebruiker wel uitgebreide zoekmogelijkheden heeft. Er bestaat een kans dat er dit jaar een nieuwe console aangekondigd wordt door Microsoft. Wat voor extra bezoekers kan zorgen, mits dit goed gerapporteerd wordt. Daarnaast komt met deze ontwikkeling de nieuwe designtaal van Microsoft beter naar voren. De social media kanalen zijn de afgelopen jaren gigantisch gegroeid, hierdoor worden er veel nieuws(links) geplaatst op deze kanalen. Indien hier goed gebruik van gemaakt wordt, kan dit extra bezoekers gaan opleveren. Met de aankondiging van de Kinect is de Xbox de afgelopen jaren zich meer gaan richten op casual gaming, dit is niet de doelgroep van Xboxworld. Naast de Kinect zijn er verschillende nieuwe platformen waar spellen op verschijnen, die betrekking hebben op de Xbox. Daarnaast worden spellen tegenwoordig op verschillende manieren verspreid. Zo wordt een groot gedeelte digitaal verspreid. Er worden tegenwoordig ook veel meer spellen gemaakt, dit komt doordat de industrie veel groter is geworden. Hierdoor wordt het ook veel moeilijker om alle spellen te kunnen recenseren.
32
Sellingpoint: een eigenschap wat de site weet te verkopen aan de gebruiker
53
Xboxworld – Redesign
Lars Hoekstra
11.3.2.1 Organisatie schets
Strategie: Xboxworld richt zich puur op het brengen van nieuws omtrent de Xbox. Daarbij is het nieuws voornamelijk feitelijk. Structuur: Er is weinig echte structuur Xboxworld. Iedereen heeft zijn eigen functie, Mirik is zelf de eindredactie. Echter worden er alleen maar aanpassingen gemaakt indien er fouten op de website staan of iets visueel niet correct is. Systeem: Nieuws wordt gepost door twee personen. Daarbij worden artikelen eerst door de redactie gecontroleerd voordat het artikel online wordt gezet. Leiderschap: Mirik Smit de eigenaar van de website. Maar hij toont geen echte leiderschap. Iedereen doet zijn taak en hij heeft hier verder geen invloed / commentaar op. Stijl: Zo goed als geen leiderschap waarbij iedereen zijn taak doet. Staff: Er zijn 13 moderators, 5 admins en 10 redactie leden. Skills: Iedereen heeft zijn eigen eigenschappen die hij of zij goed benut.
11.3.2.2 Sterke eigenschappen Sterke community Xboxworld kent een grote community waarin een harde kern bestaat. Deze mensen plaatsen actief berichten en doen dit met veel plezier. Daarnaast zijn er ook fanatieke leden die weleens content maken voor de website. Als we niet zo’n trouwe community hadden, had de site op dit moment geen bestaansrecht meer.33 Eigen reviews Xboxworld heeft zijn eigen redactie met een eigen unieke opinie. De spellen worden grondig getest en het oordeel wordt ook door de redacteur gemaakt. Het uiteindelijk cijfer is dan ook gebaseerd op zijn opinie en heeft niks met sponsoren te maken. Xbox only Xboxworld richt zich alleen maar op de Xbox ende ontwikkelingen die hiermee te maken hebben. We plaatsen geen nieuws dat met andere consoles of wat dan ook te maken heeft. Feitelijk nieuws Xboxworld plaats alleen maar feiten. Al het nieuws wat de gebruiker op de website vindt is op waarheid berust. Er zullen geen vage berichten geplaats worden met geruchten. Al het nieuws wat de gebruiker op de website vindt is waar. Grote database Xboxworld kent een grote database van spellen. Vanaf het moment dat de Xbox uitkwam, zijn er constant nieuwe spellen aan toegevoegd. Unieke items Xboxworld kent zijn eigen unieke content. Dit bestaat voornamelijk uit artikelen die een top 10 zijn van beste spellen van een bepaald jaar, of waar de redactie naar uit kijkt.34
33
http://forum.xboxworld.nl/index.php
54
Xboxworld – Redesign
Lars Hoekstra
11.3.23 Zwakke eigenschappen Late reviews Xboxworld krijgt soms de spellen laat binnen en worden daardoor later naar de recensent gestuurd. Vaak is dit al nadat het spel uitgekomen is in de winkel. Sommige spellen duren langer om te recenseren dan andere spellen. Daardoor verschijnen recensies in sommige gevallen ruim na de releasedate. Verouderd Het design van Xboxworld is inmiddels al erg verouderd. Dit zorgt ervoor dat de website erg oud aanvoelt met actuele content. Weinig social media Er bestaat een Twitter feed van Xboxworld, maar er is nog geen Facebookpagina of Youtube kanaal. Daarnaast is de Twitter feed alleen voor het plaatsen van nieuws. Frontpage / Forum splitsing De frontpage en forum hebben beide verschillende log-in formulieren en heeft geen duidelijke connectie. Hierdoor is er een duidelijke splitsing van deze onderdelen op de website. Inconsistent De site wordt op een willekeurig moment ge-up-date. Daarnaast zijn er geen vaste artikelen die elke week terug komen. Onoverzichtelijke zoekresultaten Indien de gebruiker wat wilt zoeken op Xboxworld krijg de gebruiker een onduidelijke lijst met zoekresultaten. Daarnaast zijn de zoekmogelijkheden beperkt. Er zijn echter wel uitgebreide zoekmogelijkheden voor spellen.
55
Xboxworld – Redesign
Lars Hoekstra
11.3.2.4 Kansen Nieuwe concolse (Xbox) De huidige Xbox heeft al een levenscyclus van 7 jaar. Vaak na 5/6 jaar wordt een nieuwe console aangekondigd. Er gaan geruchten dat er dit jaar een nieuwe console zal worden aangekondigd. Socialmedia ontwikkelingen In de laatste jaren zijn de sociale media sterk gegroeid. Dit heeft ook grote invloed op de spellen zelf gehad en ook op de manier waarop sites hun nieuws presenteren. Nieuw design (metro) Microsoft heeft een nieuw designtaal ontwikkeld, de metro look. De Xbox zelf heeft dit ook op zich genomen en zal zich in de loop van de jaren deze taal zich meer en meer eigen gaan maken. 35 Meerdere platformen (Xbox live) Naast de console Xbox heeft Microsoft zijn spellen ook op verschillende platforms uitgegeven. Nu is er Games for Windows Live en Xbox Live op de telefoon. 36 Nieuwe vorm van spellen distributie Spellen worden tegenwoordig niet alleen op een dvd gezet maar ook online. Hierdoor kunnen redactieleden veel sneller spellen downloaden en zijn er geen dvd’s meer nodig. Dit kan ervoor 37 zorgen dat redactieleden de spellen veel eerder binnen hebben.
35
http://www.itproportal.com/2011/12/15/microsoft-xbox-design-head-moves-over-metro-ui-takes-hold/ http://www.xbox.com/en-US/Live/Mobile/Home 37 http://marketplace.xbox.com/nl-NL/Games/Xbox360Games 36
56
Xboxworld – Redesign
Lars Hoekstra
11.3.2.5 Risico’s Xbox wordt casual Met de aankondiging van de Kinect was duidelijk dat Microsoft de richting van Nintendo uit wil gaan. Het laatste jaar was het beste jaar van Microsoft ooit, dit met dank aan de Kinect. De huidige doelgroep van Xboxworld heeft echter weinig met de Kinect. Maar dat zal in de toekomst wel gaan groeien. 38 Meer concurrentie In de afgelopen jaren zijn er meer en meer gamesites ontstaan. Deze sites hebben hun eigen unieke content en zijn modern op opzet. Xboxworld heeft de afgelopen jaren stil gestaan. Commercieel wording van de industrie Doordat de industrie de afgelopen jaren veel groter is geworden, komen er ook steeds meer spellen uit. Al deze spellen moeten gespeeld worden en moeten gerecenseerd worden. 39 Social media ontwikkelingen Doordat de afgelopen jaren de sociale media gegroeid is, zijn er nog maar weinig redenen om op een site te komen als alle informatie op die kanalen staat. 40
38
http://venturebeat.com/2011/11/29/xbox-360-sees-biggest-sales-week-in-its-7-year-history/ http://www.esrb.org/about/video-game-industry-statistics.jsp 40 http://www.searchenginejournal.com/the-growth-of-social-media-an-infographic/32788/ 39
57
Xboxworld – Redesign
Lars Hoekstra
11.3.2.6 Confrontatie matrix Sterktes Groeiveld Verdedigveld
Kansen Risico’s
Zwaktes Verbeterveld Probleemveld
In de confrontatie matrix worden alle eigenschappen behandeld, die in de SWOT analyse aan worden gekaart. Na het naast elkaar leggen van deze eigenschappen staat er in het kort een plan m.b.t. die eigenschappen en wat we hier mee zouden kunnen gaan doen.
Eigen reviews
Xbox only
Feitelijk nieuws
Grote database
Unieke items
Onoverzichtelijke zoekresultaten
Late reviews
Verouderd
Weinig social media
Frontpage / Forum splitsing
Inconsistent
Nieuwe console (Xbox) Socialmedia ontwikkelingen Nieuw design (metro) Meerdere platformen (Xbox live) Nieuwe vorm van spellen distributie x Xbox wordt casual Meer concurrentie Commercieel wording van de industrie Socialmedia ontwikkelingen x x x
Zwaktes
Sterke community
Risico’s
Kansen
Sterkten
3 3 2 3 1
2 4 2 2 4
4 4 2 4 1
4 4 2 2 2
2 1 2 2 1
3 3 3 3 2
1 1 4 1 1
1 3 2 2 4
4 3 5 4 1
2 5 2 1 1
2 2 3 1 1
4 3 4 3 2
3 4 1 4
4 4 3 3
4 5 3 3
2 3 3 3
3 3 1 2
3 4 3 3
1 3 1 1
2 4 4 4
2 5 4 4
2 3 3 5
1 3 1 2
2 4 3 3
Figuur 11.1 confrontatie matrix
Sterkten:
Unieke items Grote database Feitelijk nieuws Xbox only Eigen reviews Sterke community 0
5
10
15
20
25
30
35
Figuur 11.2 sterkten
58
Xboxworld – Redesign
Lars Hoekstra
Zwaktes:
Inconsistent Frontpage / Forum splitsing Weinig social media Verouderd Late reviews Onoverzichtelijke zoekresultaten 0
5
10
15
20
25
30
35
Figuur 11.2 zwakten
Kansen:
Nieuwe vorm van spellen distributie Meerdere platformen (Xbox live) Nieuw design (metro) Socialmedia ontwikkelingen Nieuwe console (Xbox) 0
5
10
15
20
25
30
35
40
Figuur 11.3 kansen
Risico’s:
Socialmedia ontwikkelingen Commercieel wording van de industrie Meer concurrentie Xbox wordt casual 0
5
10
15
20
25
30
35
40
45
50
Figuur 11.4 risico’s
59
Xboxworld – Redesign
Lars Hoekstra
11.3.2 . 6.1 Groeiveld
Sterktes: Sterke community Eigen reviews Xbox only Feitelijk nieuws Grote database Unieke items
Kansen: Nieuwe console (Xbox) Socialmedia ontwikkelingen Nieuw design (metro) Meerdere platformen (Xbox live) Nieuwe vorm van spellen distributie
Xboxworld kent een sterke community, deze community bevindt zich ook op de sociale kanalen. Hier kan Xboxworld gebruik van maken om zo meer naamsbekendheid te krijgen. Daarnaast kan Xboxworld al zijn content presenteren via deze kanalen. (doorverwijzen naar de site) Door ook te kijken naar de andere Xbox Live platformen zou Xboxworld ook kunnen groeien in zijn eigen reviews en toch Xbox only content leveren.
11.3.2 . 6.2 Verdedigveld:
Sterktes: Sterke community Eigen reviews Xbox only Feitelijk nieuws Grote database Unieke items
Risico’s: Xbox wordt casual Meer concurrentie Commercieel wording van de industrie Socialmedia ontwikkelingen
Doordat de concurrentie de afgelopen jaren steeds meer gegroeid is, moet Xboxworld zich richten op wat het juist uniek maakt, dit is voornamelijk dat het Xbox only is en een sterkte community kent. De Xbox wordt ook steeds meer casual, hier kunnen mensen op gezet worden die er juist voor zorgen dat dit behandeld wordt. Hierdoor krijgt de website een breder scala aan content.
60
Xboxworld – Redesign
Lars Hoekstra
11.3.2 . 6.3 Verbeterveld:
Zwaktes: Late reviews Verouderd Weinig social media Frontpage / Forum splitsing Inconsistent
Onoverzichtelijke zoekresultaten
Kansen: Nieuwe console (Xbox) Socialmedia ontwikkelingen Nieuw design (metro) Meerdere platforms (Xbox live)
Nieuwe vorm van spellen distributie
Door de nieuwe vorm van spellen distributie is het mogelijk spellen eerder en sneller te recenseren. Doordat de spellen niet meer opgestuurd hoeven worden, scheelt dit veel tijd en moeite. Xboxworld is verouderd, er bestaat een kans dat er een nieuwe console aankomt van Microsoft en daarnaast heeft Microsoft zijn eigen design-taal gemaakt. Dit is de metro-taal die een bepaalde uitstraling heeft. Naar aanleiding van deze design-taal zou de nieuwe site vormgegven kunnen worden, die upto-date is en daarnaast ook nog eens aansluit bij het nieuwe uiterlijk van de Xbox. De social media ontwikkeld zich in een rap tempo en Xboxworld maakt hier weinig gebruik van. Door hier gebruik van te maken op wat voor manier dan ook, krijgt Xboxworld meer naamsbekendheid.
11.3.2 . 6.4 Probleemveld:
Zwaktes: Late reviews Verouderd Weinig social media Frontpage / Forum splitsing Inconsistent
Onoverzichtelijke zoekresultaten
Risico’s: Xbox wordt casual Meer concurrentie Commercieel wording van de industrie
Socialmedia ontwikkelingen
De website is inmiddels verouderd en ondervindt steeds meer concurrentie van nieuwere en moderner websites. Dit is een probleem en dit is op te lossen door de website te vernieuwen. (voornamelijk op gebied van lay-out en uiterlijk)
61
Xboxworld – Redesign
Lars Hoekstra
11.3.2 Metro Wat is metro? Metro is een design taal gemaakt door Microsoft, deze taal richt zich voornamelijk op typografie. Deze taal werd voor het eerst toegepast op de Windows Phone 7, maar is al enkele jaren in ontwikkeling. De ontwikkeling van deze taal begon al in 1995 waar het toegepast werd in Microsoft Encarta 95 en ook in MSN 2.0. Later werd het toegepast in Windows Media Center en in Zune (de tegenhanger van de Apple Ipod). Tegenwoordig is de metro look terug te vinden in bijna elk product van Microsoft. De Xbox dashboard heeft een redesign gekregen met de metro interface. Daarnaast zet Microsoft al zijn geld in op Windows 8 waarbij het startmenu helemaal vervangen is door een metro interface.
11.3.3.1 Gebaseerd waarop? Metro kent 2 bronnen van inspiratie, het vormen van het uiterlijk door middel van de typografie komt van de Swiss vormgeving. Hierin wordt de nadruk gelegd op hoe typografie iets kan laten zien, witruimte is hierbij heel belangrijk. “Less is more” is een veel gebruikte zin. Navigatie staat dan ook mee in het teken van de tekst. Het staat daarnaast ook in het teken van het weglaten van alles wat onnodig is. “Perfection is achieved, not when there is nothing left to add, but 41 when there is nothing left to remove.”
Naast de Swiss vormgeving heeft Microsoft ook inspiratie opgedaan bij, de naam zegt het al, de metro. De vormgeving van deze borden waren helder, daarnaast ook duidelijk te lezen. De tiles die gebruikt worden in de metro komen ook terug in het metro ontwerp.
11.3.3.2 Wat moet het zijn
Figuur 11.5 metro informatie bord
Metro legt de nadruk op duidelijkheid en om de boodschap zo eenvoudig mogelijk over te brengen. Het is een consistente design taal waarbij de typografie overal het zelfde is; de Segoe familie (al is dit font niet per definitie hét font wat gebruikt moet worden voor een Metro ontwerp). Door de nadruk te leggen op de typografie wordt de vormgeving meer gedaan door de content i.p.v. door uitgebreide grafische elementen. Doormiddel van verschillende groten toe te passen van een font wordt er een hiërarchie gecreëerd. Hoe groter de font hoe belangrijker het onderdeel, hierdoor is Figuur 11.6 metro design filosofie
41
duidelijk waar je bent als gebruiker. Whitespace is ook belangrijk bij metro.
Antoine de Saint-Exupéry
62
Xboxworld – Redesign
Lars Hoekstra
Animatie is ook een belangrijk onderdeel van het metro design. Naast de hiërarchie, die vormgegeven wordt door de typografie gebeurd dit ook met animaties. Dit verschilt van subtiele animaties tot duidelijk overgang animaties. “Clean, Light, Open and Fast We took an approach that we call “Fierce Reduction” to remove any elements in the UI that we felt were unnecessary; both visual elements and feature bloat. It allows us to shine a focus on the primary tasks of the UI, and makes the UI feel smart, open, fast, and responsive. Alive in Motion The transitions between screens in a UI are as important the design of the screens themselves. Motion gives character to a UI, but also communicates the navigation system, which helps to improve usability. Celebrate Typography Our design inspiration is very typographic, and it felt like it was time for User Interfaces to be uncompromising about type as well. Type is information, type is beautiful. Content, Not Chrome It’s the content on the phone that people want, not the buttons. Reducing the visuals on the phone that aren’t content will help you create a more open UI, and it also promotes direct interaction with the content. Authentically Digital Finally, we believe in honesty in design. A user interface is created of pixels, so in Metro we try to avoid using the skeumorphic shading and glossiness used in some UI’s that try to mimic real world materials and objects.“
Windowssteamblog.com
63
Xboxworld – Redesign
Lars Hoekstra
11.3.4 Rapid Prototyping Rapid prototyping is een vorm van onderzoek. Hierbij worden bepaalde functionaliteiten getest bij een groep gebruikers, daarna worden de resultaten verwerkt. Op basis van deze resultaten wordt het huidige ontwerp aangepast en verbeterd.
Design
Aanpassen
Test
Terugkoppeling
Resultaat
Figuur 11.7 rapid prototyping ontwikkel proces
Dit model zal worden toegepast op het functioneel ontwerp van de website. Hiervoor is één ontwerp gemaakt die getest gaat worden door drie personen per sectie.
11.3.4.1 Assess needs De “needs” zijn eisen die uit het vooronderzoek naar voren zijn gekomen. Hierbij is gekeken naar wat de gebruiker wil, wat de concurrentie doet en wat de sterkten/zwakten zijn van Xboxworld. Op basis hiervan is een lijst gemaakt met wat de eisen zijn:
Forum integratie Xboxworld is momenteel in twee kampen gesplitst, de frontpage en het forum. Door deze twee te combineren zal de community groter worden en zullen meer mensen op het forum komen en de forum gebruikers meer gebruik kunnen gaan maken van de frontpage.
Metro Microsoft is druk bezig met al hun producten de metro look te geven. Xbox is hierbij geen uitzondering en heeft recent een update gekregen waarbij de Xbox ook het metro design kent. Dit moet tot op zekere hoogte ook toegepast worden in de website. Er zijn richtlijnen voor het metro design, dit zijn echter wel de Windows Phone richtlijnen.
Gebruikers interactie De gebruiker willen graag cijfers kunnen geven op spellen. Dit moet dan terug komen in het ontwerp. (bij de game-pagina’s) 64
Xboxworld – Redesign
Lars Hoekstra
Nieuws centraal De gebruiker kijkt meerdere keren per dag op de website. Hierbij staat het nieuws centraal en het forum. Hier moet ook de focus op komen te liggen in het ontwerp.
Releaselijst Uit het onderzoek blijkt dat de gebruikers de releaselijst erg prettig vinden van Xboxworld. Opvallende kritiek is echter dat de lijst wel up-to-date moet zijn.
Consistentie De gebruikers willen graag vaste content van Xboxworld. Dit wordt geleverd door o.a. elke week een podcast. Dit moet op een specifieke plaats terugkomen in het ontwerp.
De volgende onderdelen moeten terug komen in het ontwerp van de website:
De mogelijkheid om te zoeken Nieuws Reviews (artikelen) Games Socialmedia Log-in/Register Het forum
11.3.4.2 Werkwijze Het ontwerp wordt getest op drie personen. Dit zijn personen die Xboxworld bezoeken, maar ook personen die niet op de website komen. Met drie personen zullen de grotere problemen aangekaart worden en zal daarna de volgende test volgen. De gegevens die uit de test gehaald worden, zullen verwerkt worden in het volgende ontwerp. Wat wordt er getest? Het functioneel ontwerp van Xboxworld.nl. Hoe eerder de test uitgevoerd worden hoe beter. Het risico hierbij is dat de testpersoon het doel van een functioneel ontwerp niet in de gaten heeft, dit zal echter uitgebreid aan de testpersoon worden uitgelegd. Het functioneel ontwerp is gemaakt in Axure en daarmee is een werkend prototype gemaakt waar de testpersoon doorheen kan klikken. In het ontwerp staat de complete website op de xbazaar en het forum na. Indien een link niet werkt, zal de persoon die de testpersoon observeert doorsturen naar de pagina waar die link naar toe leidt. Hoe wordt er getest? De proefpersoon dient hardop te denken tijdens de test, hierdoor wordt duidelijk waarom de persoon iets doet. Er wordt op twee verschillende manieren een test afgenomen:
In een ruimte: De testpersoon bekijkt de site op een pc, daarbij wordt hij/zij geobserveerd en worden er notities gemaakt. Er is hierbij direct contact met de testpersoon.
Online via Skype:
65
Xboxworld – Redesign
Lars Hoekstra
Omdat enkele testpersonen erg ver weg wonen, is dit de alternatieve test mogelijkheid. Hierbij gaan de testpersoon en de persoon die de testpersoon observeert samen in gesprek. Via Skype is er de mogelijkheid om het beeldscherm te zien van de testpersoon.
Waar wordt opgelet? Er worden op verschillende factoren gelet:
Wat valt de gebruiker als eerst op: Waar let de gebruiker op en waarom let hij hier op. Hierbij wordt gelet op wat de beweegreden zijn van de gebruiker. Waarom is dat logisch voor de gebruiker en wat is de reden waarom de gebruiker specifieke onderdelen met iets associeert. De waarom vraag is hierbij het belangrijkst.
Hoe navigeer de gebruiker door het ontwerp: Waarom navigeert de gebruiker zo door het ontwerp en wat is zijn gedachte daarbij. Wat valt op tijdens het navigeren van de gebruiker, gebruikt hij of zij de navigatie zoals het bedoeld is of doet de gebruiker iets anders. Hierbij ligt de nadruk op hoe de gebruiker van punt a naar punt b gaat. Het gaat er niet om of de gebruiker er komt, maar de manier waarop is hierbij het belangrijkst.
Wat mis de gebruiker Wat zijn de struikelblokken van het ontwerp en wat mist de gebruiker hierbij. Tijdens het waarnemen van de gebruiker zal de gebruiker misschien vastlopen. Dit wordt hierbij genoteerd met de nadruk waarom de gebruiker vastloopt. Waar de gebruiker vastloop is belangrijk, maar waarom de gebruiker vastloopt is nog belangrijker.
Hoe gaat de test in zijn werk? Voordat de test begint wordt de naam van de testpersoon met enige achtergrond informatie genoteerd. Nadat die informatie genoteerd is, wordt aan de testpersoon uitgelegd wat exact de bedoeling is van de test en het doel ervan. Hierbij wordt verteld dat de testpersoon geen fouten kan maken tijdens het testen van de website. Hierdoor wordt de druk bij de testpersoon weggenomen. Als de test begint wordt er naar een impressie gevraagd van de testpersoon over de homepagina. Wat valt de testpersoon op en wat vindt hij of zij er van? Hierbij wordt aangeraden de testpersoon hardop te laten denken. Daarna volgen opdrachten en mag de testpersoon zelf door het prototype heen klikken. Deze opdrachten zijn opdrachten die voornamelijk bestaan uit het navigeren naar een specifieke pagina of content. Tijdens de test wordt alle informatie die de testpersoon verteld genoteerd. Daarbij wordt dan op de punten gelet die hierboven staan. Er wordt een duidelijk verschil gemaakt tussen onduidelijkheden en factoren die de testpersoon niet mooi vindt. De notities worden per pagina genoteerd. Na drie testen worden de resultaten gecombineerd en worden daarna verwerkt. Dan wordt het functioneel ontwerp aangepast en komen er aantekeningen en aanpassingen in het functioneel ontwerp. Hierdoor is er een duidelijke ontwikkeling tijdens de testen.
66
Xboxworld – Redesign
Lars Hoekstra
Dit proces vindt in totaal twee keer plaats, er zijn dus in totaal twee testrondes. Na de tweede testronde wordt het functioneel ontwerp volledig aangepast en dat is het uiteindelijke functionele ontwerp. Wie zijn de testpersonen? De testpersonen lopen erg uiteen, dit zijn gebruikers van Xboxworld maar ook willekeurige mensen die actief gebruik maken van het internet. De testen worden niet allemaal op de eindgebruiker gedaan, omdat de website ook logisch moet zijn voor mensen die nooit een site zoals Xboxworld bezoeken.
11.3.5 Testomgeving Naast de rapid-prototyping testmethode is er ook gebruik gemaakt van een testomgeving binnen de community. Binnen deze testomgeving konden voorgeselecteerde members en medewerkers van Xboxworld hun opinie posten over ontwerpen.
Figuur 11.8 risico’s
In deze testomgeving zijn verschillende onderdelen van de website besproken, daarnaast zijn er ook ideeën uitgewisseld. Het belangrijkste doel is het informeren over de stand van zaken met betrekking het ontwerpen van de nieuwe website. Aan de hand van de eerste schetsen is er veel feedback gekomen op het uiterlijk van de schetsen, maar voornamelijk op dat wat er op papier is gebeurd. Deze feedback is vervolgens verwerkt in het eindontwerp.
67