Infostrada Sports Group First Report, Then Create, Then Enjoy!
Inhoudsopgave Pagina 1.0 Inleiding 2 2.0 Info Strada Sports Group 3 3.0 Bussiness website 4 4.0 Design Report 5 4.1 Branding Checklist 5 1.0 Kernwaarden 5 2.0 Cohesie offline/online 5 3.0 Social Media 6 4.0 Patterns 6 5.0 Icons 6 4.2 Design Checklist 7 1.0 Web Design 7 2.0 Gestalt Principles in Web Design 8/9 3.0 Strategie 10 4.0 Browser test 10 5.0 Applicatie test 11 6.0 User Experience Design 12/13/14 4.3 Design Report Advies 15 1.0 Rebranding 15 2.0 Responsive Web Design 16/17/18 5.0 Conclusie 19 6.0 Referentie 20
1.0 Inleiding Design Report Het Design Report Advies is opgemaakt na grondig onderzoek te doen in zowel de branding als web design van Infostrada Sports Group. Het geheel is namelijk meer als de som der delen. Het visuele advies helpt u bij het verbeteren van uw branding gekoppeld aan de online user experience. Passen de huidige kernwaarden op dit moment nog bij het imago van uw bedrijf? Om uw klanten zo optimaal mogelijk van dienst te kunnen zijn is het belangrijk de nieuwe technische ontwikkelingen van uw offline- en online presentatie goed te laten onderzoeken. Is uw website nog niet geoptimaliseerd voor mobiel en tablet dan zal een responsive design een uitkomst bieden. Verder geeft het report inzicht in het optimaliseren van de user experience. Hierbij wordt uitgegaan van de theorie Gestalt Principes in web design. Deze theorie gaat er van uit dat er een geheel zit in vorm, kleur, afstand en beweging van elementen. Wat we zien is gebaseerd op bepaalde verwachtingen en eerdere ervaringen. De Gestalt zegt dat mensen dingen waarnemen en groeperen volgens een aantal wetten die opgenomen zijn in de Design Checklist. Branding Checklist Design Checklist Design Report Advies Wij wensen u veel succes met het optimaliseren van uw branding en webdesign voor zowel mobiel, tablet als pc! Naast het Design Report waarin wij u adviseren, zijn wij u ook graag van dienst bij de realisatie van de uitkomsten. Wij werken nauw samen met gespecialiseerde ondernemingen om uw website tot in de puntjes te optimaliseren. 2
2.0 Infostrada Sports Group Infostrada Sports Group (ISG) is Nederlands eerste crossmediale sportproductie en distributiebedrijf. In 2011 is het bedrijf gefuseerd met Eyeworks Sports, Unicum en Sport2Media. Infostrada en Eyeworks Sport richtten zich op het maken van concepten en het verzamelen van data. Dit terwijl Unicum en Sport2Media de focus legde op het (goedkoop) aanbieden van content. Sport2Media produceerde achtergrond items, Unicem de live verslagen en samenvattingen. Deze fusie heeft er toe geleid dat Infostrada Sports Group zijn horizon heeft verbreed en meer business kan aanbieden. De gegarandeerde hoge kwaliteit services die sinds de fusie worden ingezet voor ISG business zijn: Infostrada Statitics Infostrada Cross Media Infostrada Production Infostrada Branded Content and Concepts Deze business lijnen werken samen en versterken elkaar om zo klanten de beste mogelijkheden te bieden, door de meest effectieve en efficiënte methodes in te zetten. De werknemers zijn innovatief in de sport en media industrie en hebben sport als gemeenschappelijke passie in wat ISG en zijn klanten verbindt: SPORT! Contact informatie Infostrada Sports Group Binnenwal 2 3432 GH Nieuwegein Nederland Telefoon: +31 (0)30 600 71 71 Website: www.infostradasports.com E-mail: info@infostradasports.com Kantoren en vertegenwoordigers: Nederland Engeland Oostenrijk China Duitsland Denemarken Noorwegen Zweden Zwitserland 3
3.0 Business website ISG biedt door middel van de website een zakelijke dienst aan. Op de huidige website is er nog geen onderscheid tussen informatie voor bezoeker en klanten. Bezoekers zijn geïnteresseerd in sportstatistieken en achtergronden van sporters. Klanten willen informatie over de producten en diensten die ISG aanbiedt. Er zou een betere strategie kunnen worden opgemaakt gericht op de gebruiker, die het product voor eigen doeleinden wil inzetten. Wat verder opvalt is dat de content op de website in het Engels is en niet meertalig. Een meertalige website voor een groot internationaal bedrijf zou de dienstverlening en het gebruikersgemak bevorderen. Door op de website ook content in het Nederlands aan te bieden kan een grotere doelgroep bereikt worden. Onder het menu Jobs zijn daarentegen de vacatures wel in het Nederlands geschreven wat onduidelijkheid schept. Door meer uit de online business te halen kan de dienstverlening van Infostrada Sports Group worden geoptimaliseerd. Bij het maken van het Design Report worden vrijblijvend de verbeterpunten aangekaart die de business website professioneler en gebruiksvriendelijker maken. Het helpt ISG bij het verbeteren van de branding gekoppeld aan de online user experience. Gericht op de devices mobiel, tablet, pc en laptop. Uit onderzoek is naar voren gekomen dat ISG een commerciële onderneming is die de focus legd op het aanbieden van diensten voor Business to Consumer. 4
4.0 Design Report 4.1 Branding Checklist 1.0 Kernwaarden Komen de huidige kernwaarden overeen met de huidige strategie? Het merkbeeld is na de fusie met Eye Works Sports, Unicum en Sport2Media niet aangepast. Infostrada Sports is overgegaan naar Infostrada Sports Group. ISG biedt sindsdien naast Sportstatitics ook de diensten Cross Media, Production en Branded Content and Concepts aan. De kernwaarden zijn daardoor wel degelijk veranderd. Voor de website wordt aangepast is het daarom gewenst de merkstrategie waar nodig aan te passen of te vernieuwen. Door de nieuwe diensten en uitbreiding van het bedrijf zal er met een nieuwe visie een grotere markt kunnen worden bereikt. Deze nieuwe visie zal in eerste instantie worden overgedragen aan het management team, de medewerkers, in het merkbeeld en concept uitingen. De filosofie moet voor alle medewerkers te begrijpen zijn zodat deze gemakkelijk uitgedragen kan worden. 2.0 Cohesie offline/online Komt de offline branding overeen met de online branding? In het pand en offline materiaal (als advertising) wordt naast het logo, dat bestaat uit zwart/wit en grijstinten, gebruik gemaakt van een kleur om een dienst aan te geven. In de brochure wordt iedere dienst met een frisse kleur aangegeven wat tevens hierarchie schept. Rights is rood, Production paars, Content groen, Distribution blauw, Publication geel en Concepts oranje (zie afbeelding 1). De diensten die worden aangeboden komen niet overeen met die van de website. Duidelijk is dat het advertentie materiaal is gericht op klanten. In de website zijn daarin geen overeenkomsten te zien. Op de website wordt alleen gebruik gemaakt van zwart/wit en grijstinten uit het logo. Door deze frisse kleuren ook in de website door te voeren geeft dit een veel sportievere look & feel en een veel duidelijkere indeling. De vierkante blokjes op de achtergrond zorgen in de offline branding voor het gevoel van beweging in sport. Ook dit zou niet misstaan in het design van de website. Afbeelding 1: Offline advertising 5
4.0 Design Report 4.1Branding Checklist 3.0 Social Media Hoe wordt branding ingezet in Social Media uitingen? Voor Facebook wordt gebruik gemaakt van de nieuwe Timline Business page. De directe link van de website naar Facebook gaat niet naar de algemene Facebook pagina. Op de landing page zijn drie afbeeldingen te zien (zie afbeelding 2). De drie kleuren zijn niet terug te vinden in de offline en online strategie. Ook wordt er de vraag gesteld waar jouw interesse naar uit gaat in de vorm van grote Call to Action buttons. De slogan op de pagina is: Worldwide provider of sports information and services. Ook dit komt niet terug in de offline en online uitingen. Via de pagina Social Media van de website wordt naar drie Facebook pagina s gelinkt. De algemene pagina heeft ook een lage resolutie foto van het logo en van het pand op de achtergrond. Een sport gerelateerde foto zou beter laten zien waar ISG voor staat. Voor het Twitter account wordt er per land een algemene pagina gebruikt. Het logo van het Nederlandse Twitter account is aangepast aan de vierkante vorm en Nederland en Denemarken zijn voorzien van een vlag. Het Noorse account heeft alleen de Noorse vlag in het logo met een voetbal op de voorgrond. Het is daardoor niet duidelijk dat het om een officiële ISG account gaat. Het algemene ISG account heeft een onscherp logo en is blauw (zie afbeelding 3). Dit kan veel professioneler door een goed logo te gebruiken met een hogere resolutie en in de huisstijl kleuren in te zetten. Afbeelding 2: Facebook uiting past niet bij de huisstijl 4.0 Patterns Wordt er gebruik gemaakt van patterns in de offline en online branding? Alleen in de advertentie folder worden vierkante zwevende blokjes gebruikt als pattern. Dit zou in de gehele huisstijl kunnen worden doorgevoerd. 5.0 Icons Worden er icons gebruikt in de offline en online branding? Er worden geen icons gebruikt. Naast de kleuren zou er per dienst een een Icon kunnen worden ingezet. Ook de nieuwsitems op de homepage kunnen per gerelateerd onderwerp worden voorzien van een icon. Naast content geven Icons een extra dimensie als universele taal. Op de Wall of Fame website worden wel sport icons professioneel ingezet. Afbeelding 3: Twitter Logo s 6
4.0 Design Report 4.2 Design Checklist 1.0 Web Design Wordt er gebruik gemaakt van flash? Op de homepage wordt gebruik gemaakt van een flash image slider. Het logo valt helaas ook onder de flash image slider (zie afbeelding 4) waardoor deze niet kan worden opgeslagen. Bovendien is het logo en de image slider niet te bekijken op mobiel en tablet omdat deze geen flash ondersteunen. Bezoekers met een verouderde Flash moeten bovendien eerst een update doen om de afbeeldingen en het logo te zien. Tip: Maak gebruik van een jquery image slider wat wel door alle devices ondersteund wordt. De afbeeldingen kunnen bovendien worden voorzien van tags om hoger in de Google pageranking te komen. Dit bevordert de vindbaarheid. Past het webdesign bij deze tijd en is deze innovatief? Dat de website al acht jaar actief is en er nog geen aanpassingen zijn gedaan is terug te zien in het design van de website. Het design is niet modern. De randen en arcering zijn simpel en wit. De achtergrond is donkergrijs. De menubalk bestaat uit een dunne lijn die doorloopt vanuit het logo. Het menu heeft hele kleine letters wat niet genoeg opvalt. In de banner op de homepage staan witte letters met een kartelrandje. Dit heeft iets weg van kerstversiering. Dit kan worden verbeterd door de foto s op de juiste manier uit te snijden voor het web. Daarnaast zullen de kleuren voor de nieuwe huisstijl de website frisser maken. Wat ik verder mis in het webdesign is een duidelijke footer met contact informatie en adres gegevens. De pagina wordt zo wel heel direct afgesloten. De logo s van de klanten of sponsors zijn erg klein en bevatten bovendien geen link. Geef duidelijk aan wat de connectie is met de bedrijven als BBC, KNVB, NU SPORT, en FIFA (zie afbeelding 5). De link naar de Wall of Fame op het plaatje werkt niet in de browser Safari en en de onderstaande link zou beter tot zijn recht komen als er gebruik wordt gemaakt van een button. Afbeelding 4: Flash Image Slider inclusief ISG logo Afbeelding 5: Zeer kleine logo s zonder heading De nieuwsitems mogen duidelijker van elkaar worden gescheiden volgens de Gestalt Principles in web design. Dit principe komt in het volgende hoofdstuk uitgebreid aan bod. Een slogan van Infostrada Group zou tevens een betere uitstraling geven aan de website en het online merkbeeld versterken. 7
4.0 Design Report 4.2 Design Checklist 2.0 Gestalt Principles in Web Design We zien de wereld, maar nemen die niet op zoals die werkelijk is. We interpreteren de dingen die we zien, proberen er orde aan te geven en patronen in te ontdekken. Dit onderdeel van de checklist geeft inzicht welke punten van de website voor verbetering vatbaar zijn. Dit door de gebruiker aan te spreken op zijn onbewuste gedrag, om zo de gebruiksvriendelijkheid van de website te verbeteren. De wet van nabijheid Dingen die zich dicht bij elkaar bevinden, worden als groepen gezien. Dingen die zich ver van elkaar bevinden worden als onafhankelijk waargenomen. In het ontwerp is duidelijk rekening gehouden met de wet van nabijheid. De kopteksten van de nieuwsitems bevatten zijn underlined en bold waardoor het onderscheid goed te zien is. De plaatjes links uitgelijnd met daarboven de datum. Verder laat de tussenliggende witruimte in het volgende item duidelijk een scheiding zien. Een lichte achtergrondkleur zou de items nog beter onderscheiden. Het eerste item heeft dan wel een background kleur, het tweede item niet en het derde item wel enz. De headings mogen een slag groter waardoor het sneller de interesse wekt van de gebruiker. De plaatjes mogen allemaal dezelfde grote hebben om continuïteit te genereren met eventueel een lichte border omlijning. Ditzelfde geld ook op de pagina Corporate news waar tevens een plaatje mag worden toegevoegd aan de nieuwsitems. Afbeelding 6: Wet van nabijheid De wet van overeenkomstigheid Dingen die op elkaar lijken worden gegroepeerd. Dingen die veel van elkaar verschillen worden als aparte elementen waargenomen. De submenu buttons (zie afbeelding 7) trekken meer de aandacht als het hoofdmenu. Dit komt vooral door de grote van de letters. Het hoofdmenu heeft als overeenkomstigheid een zwarte background waardoor het duidelijk één geheel is. De submenu items hebben als overeenkomst een witte background, stippellijn afscheiding en grijze letters. De read more link is overbodig omdat het gaat om buttons. Het submenu mag meer opvallen om de Call to Action bij de gebruiker op te roepen. Ook zouden de kleuren uit de folder kunnen worden gebruikt om per onderwerp de overkomsten naar voren te laten komen in de gehele website. De gebruiker begrijpt dan dat de kleur een geheel vormt en kan zo de menu items en het onderwerp makkelijk onderscheiden. Op deze wijze vallen de buttons beter op. Afbeelding 7: Wet van overeenkomstigheid 8
4.0 Design Report 4.2 Design Checklist 2.0 Gestalt Principles in Web Design De wet van geslotenheid Dingen die omrand worden door een lijn worden als geheel gezien. Dingen die doorkruist worden door een lijn worden als aparte elementen waargenomen. Er is in de website een duidelijke afscheiding te zien. Onderwerpen worden doormiddel van de donkergrijze rand afgesloten (zie afbeelding 8). In de afbeelding is te zien dat Wall of Fame in een rechthoekig blok staat dat gesloten is op zowel de boven als onderkant. De lijnen lopen echter wel door naar het volgende vierkante blok waardoor het niet duidelijk is dat het om een ander onderwerp gaat. Op de pagina Management is een goed voorbeeld te zien van deze wet, de bedrijfsgegevens zijn omlijnd door een grijze rand (zie afbeelding 9). Tip: Door de omlijnde blokken af te sluiten en witruimte tussen de blokken te laten zullen de onderwerpen nog beter afgesloten zijn. De wet van goede continuïteit Afbeelding 8: Wet van geslotenheid Dingen die in een doorgaande lijn of kromming zijn geplaatst worden door onze waarneming gegroepeerd. Het uitlijnen van elementen is in het webdesign niet toegepast om onderdelen van elkaar te onderscheiden. Er is op de website geen Sitemap te vinden wat wel gebruiksvriendelijk is voor de bezoeker en tevens zorgt voor een betere Search Engine Optimization. De website zal namelijk betere gecrawld worden door de zoekmachines. In een Sitemap is ook de wet van goede continuïteit toe te passen. Submenuu items kunnen dan horizontaal aan elkaar worden uitgelijnd om deze subjectief te onderscheiden van het Hoofdmenu. De wet van eenvoud Dingen worden waargenomen in de meest eenvoudige vorm. Complexiteit in webdesign moet dan ook zoveel mogelijk worden vermeden. Op de website is daar goed gebruik van gemaakt. Er zijn geen overbodige lijnen en vormen te zien. Eenvoud wordt niet bereikt door zoveel mogelijk weg te halen, maar door de juiste dingen over te houden. Afbeelding 9: Wet van geslotenheid 9
4.0 Design Report 4.2 Design Checklist 3.0 Strategie Bij binnenkomst op de homepage is duidelijk dat in de communicatie het belangrijkste doel is om de bezoeker te voorzien van het laatste nieuws. Voor nieuuwe bezoekers is het nog niet direct duidelijk wat ISG doet. Een korte omschrijving van ISG op de homepage zou daarom een goede oplossing zijn. Doormiddel van een read more link kan de gebruiker mocht deze hiernaar op zoek zijn dan meer informatie vinden op de pagina About us. Wat ook opvalt is dat het submenu groter is als het hoofdmenu. Omdat het hoofdmenu al vrij klein is valt deze hierdoor een beetje weg. Door het hoofdmenu groter te maken zal de bezoeker sneller de gewenste informatie vinden over ISG. Op de pagina Who are we is te zien dat het submenu zich heeft verplaatst van de rechterkant naar de linkerkant. Het heeft plaatsgemaakt voor het submenu met de items die zich onder About us bevinden (zie afbeelding 10). Op de pagina s worden naast de informatieve content geen sprekende plaatjes gebruikt die de content aanvullen en versterken. Als bezoeker word je niet geleid een afspraak te maken. Duidelijke Call to Action buttons spreken de bezoeker aan om actie te ondernemen. Alleen een link naar de Contact pagina nodigt minder uit. Zorg voor een uitgebalanceerde concept en branding strategie die de kernwaarden van ISG vertaald naar de website. Dit maakt ISG uniek en onderscheidend van concurrentie. Tip: Leidt de bezoeker naar de gewenste informatie doormiddel van Call to Action buttons. Zorg dat de gebruiker die graag informatie wilt over een product/dienst ook direct actie kan ondernemen. Haal meer uit uw business e-commerce website en genereer nieuwe klanten! Afbeelding 10: Geen sprekende plaatjes en eentonig kleurgebruik 4.0 Browser test De ISG website is getest op de browsers Internet Explorer, Safari, Google Chrome, Firefox en Opera. De website is goed uit de test gekomen en bleek geoptimaliseerd te zijn voor alle browsers. In de test is niet onderzocht of de HTML code van de website semantisch is opgebouwd en foutloos is. Voordeel van een semantisch opgebouwde website is dat deze een snellere laadtijd heeft en beter gelezen wordt in de zoekmachines. Er is puur gekeken naar het web design en de interactie op de website. 10
4.0 Design Report 4.2 Design Checklist 5.0 Applicatie test Mobile emulator De website geeft geen afbeeldingen en logo weer op het mobiel apparaat door het gebruik van Flash in de website. Bovendien is de website niet geoptimalieerd voor mobiele apparaten. De website is niet responsive. De informatie wordt op de zelfde manier als op een PC en Laptop weergegeven (zie afbeelding 10). Om de inhoud goed te kunnen lezen moet er worden ingezoomd op de pagina. Dit betekent dat er zowel horizontaal als verticaal moet worden gescrolld. Dit komt de gebruiksvriendelijkheid niet ten goede. Tegenwoordig worden websites vaak op mobiele apparaten bekeken. Bij het nieuwe ontwerp is het daarom raadzaam de website responsive te maken. Het voordeel van een responsive design is dat alle content zich aanpast aan het apparaat waarmee de website wordt bekeken. Wanneer de website wordt voorzien van een Content Management Systeem kan de inhoud aangepast worden op alle apparaten. Het is daarom niet raadzaam een mobiele website te ontwikkelen waar alle aanpassingen los moeten worden aangepast binnen de mobiele versie. Tablet emulator Net als op een Mobile device ondersteund een Tablet geen Flash. Ook hier valt het logo en de afbeeldingen van de image slider weg (zie afbeelding 11). De content is op een tablet daarentegen wel goed te lezen en. Er hoeft niet ingezoomd te worden en gescrolld om alles te kunnen lezen en bekijken. Omdat geen gebruik wordt gemaakt van buttons zijn de links niet makkelijk te bedienen. Omdat er gebruik wordt gemaakt van een touchscreen is dit daarom wel aan te raden. De gebruiker heeft hierdoor een groter vlak om te bedienen. Ga hierbij uit van de gemiddelde grote van de wijsvinger van de gebruiker. Afbeelding 10: ISG website op een mobiel Tip: Maak gebruik van buttons op de website wat de bediening op een touchscreen apparaat vereenvoudigd. Afbeelding 11: ISG website op een Tablet 11
4.0 Design Report 4.2 Design Checklist 6.0 User Experience Design Strategy Er komen twee type bezoekers op de website van ISG. Bezoekers die op zoek zijn naar nieuwsfeiten en mogelijke klanten. Er mag op de homepage duidelijker worden aangegeven welke services ISG aanbiedt. Na de fusie heeft ISG een breder aanbod aan services. Door deze verandering is het aan te raden een kwantitatief onderzoek te doen naar doelgroep. De uitkomst van dit onderzoek zal uitwijzen of de toine of voice van de website moeten worden aangepast. Scope (bereik van de doelgroep) Ga na welke functies er nodig zijn om de doelgroep te bereiken. De website zou meertalig kunnen worden opgemaakt om zo de doelgroep directer aan te kunnen spreken. Wanneer de bezoeker ISG als Nederlandstalige website bezoekt is de site direct laagdrempelig en zal de bezoeker sneller overtuigd zijn. Vereiste functies die de interactie met de doelgroep vereenvoudigen kunnen ook in deze fase worden samengesteld. Ga na of een gebruiker zich snel en makkelijk kan aanmelden voor de diensten. Op de huidige website verloopt alle interactie doormiddel van het contactformulier. Specificeer deze per dienst en ga na welke benodigde informatie noodzakelijk is bij de invulformulieren. Omschrijf welke stappen de bezoeker moet nemen om dit proces vlekkeloos te laten verlopen. Structure Door wireframes te maken kunnen de functies en content op hiërarchische wijze worden opgemaakt. Het hoofdmenu bestaat nu uit de drie onderwerpen About us, Contact en Jobs. Onder About us staat een submenu van 10 onderwerpen die de bezoeker als snel over het hoofd zal zien. Het menu met de diensten Statitics, Productions, Cross Media en Concepts worden als los submenu weergeven op de gehele website. Dit wekt verwarring omdat er geen logische structuur is wanneer er op de website twee losstaande menu s worden gebruikt. Ga daarnaast na wat de basiselementen van de content zijn van ISG voor de website: Afbeelding 11: Elements of webdesign Jesse James Garret Content Management Systeem Logo (met link naar de homepage) HTML website page titels Indeling Images FTP folders Sponsors en partners Google Analytics (zoekwoorden, content, doelgroep en plaats) 12
4.0 Design Report 4.2 Design Checklist 6.0 User Experience Design Skeleton Bepaal hoe de navigatie structuur er visueel uit komt te zien door middel van een website layout. Er wordt op de website geen gebruik gemaakt van buttons. Buttons hebben als voordeel dat deze makkelijker aan te klikken zijn als tekstlinks. Bovendien hebben buttons een groter oppervlak om op te klikken. Vooral op kleinere schermen en touchscreens bevordert dit de gebruiksvriendelijkheid voor interactie en conversie. Positioneer alle onderdelen van de website en wijk niet teveel af van de gebruikelijke standaard in het webdesign. Begin bovenaan de website met een header met het logo links uitgelijnd aan de content en het menu. Rechtsboven de Social Media buttons en eventueel het slogan. Onder het logo aan de linkerkant uitgelijnd het hoofdmenu, met als eerste menu item de link naar de homepage. Op de huidige website staat het menu aan de rechterkant en staat home aan de rechterkant. Bezoekers lezen een website van links naar rechts dus houdt daar rekening mee. In het middelste gedeelte van de website bevinden zich de content en de modules. Begin met een inleiding over ISG met eventueel een lees verder button. Plaats daaronder de nieuwsitems over sportstatistieken en andere nieuwsfeiten met betrekking tot ISG. Voorbeelden van modules die ingezet kunnen worden zijn een Agenda met datums van belangrijke sportevenementen, Wall of Fame van de sporters, Enquete, ISG Facebook Friends, Tweats op Twitter, Sponsors & Partners en een Submenu. In de footer die nu nog ontbreekt op de ISG website kan de contact informatie, sitemap, aanmelden nieuwsbrief, algemene voorwaarden, social media en de creative commons worden geplaatst. Afbeelding 12: Elements of webdesign Jesse James Garret Tip: Ontwikkel een Responsive Design layout. Maak ook een layout voor het design op een mobiel en tablet! 13
4.0 Design Report 4.2 Design Checklist 6.0 User Experience Design Surface De surface van de website is het visual design wat de gebruiker uiteindelijk ziet. Alle lagen worden in het design verwerkt. Het is belangrijk om hierin de branding in terug te laten komen en daarbij de functionaliteiten en de layout niet uit het oog te verliezen. Zorg dat doormiddel van het design de gebruiker gebruiksvriendelijk kan navigeren. Is het noodzakelijk om twee verschillende websites te hebben? Er staat op de homepage namelijk een banner naar de InfostradaLive website. Onderzoek of deze website niet binnen de ISG website kan worden verwerkt. Op de InfostradaLive website is ook een pagina Mobiel toegevoegd. Deze pagina bevat geen vormgeving, menu en webdesign. Zorg er ieder geval altijd voor dat het webdesign overeenkomt met de website voor PC, laptop en tablet en mobiel. De huidige website bevat weinig kleur en mag een sportievere uitstraling krijgen die aansluit bij de doelgroep. Dit kan worden gerealiseerd doormiddel van foto s, background, buttons en patterns toe te voegen. De branding kan zo visueel worden doorgevoerd in de online communicatie. Een pattern laat verschillende producten binnen de huisstijl overeenkomen, waardoor makkelijk een verband kan worden herkent door de gebruiker. Tip: Ontwikkel een Responsive Design layout. Maak ook een layout voor het design op een mobiel en tablet! Afbeelding 13: Elements of webdesign Jesse James Garret 14
4.0 Design Report Advies 4.3 Design Report Advies 1.0 Rebranding Visueel Maak gebruik van de vijf kleuren in de huisstijl om duidelijk de onderwerpen te onderscheiden. Zorg dat het logo voor zowel online als de offline media uitingen herkenbaar is en aansluit bij de communicatie uitingen (zie afbeelding 14). Gebruik de gekleurde blokjes om aan te geven om welke dienst het gaat en verwerk dit patroon in de webpagina. Als voorbeeld heb ik een design opgemaakt voor de service production (zie afbeelding 15). Door het pattern van de blokjes toe te passen in het design wordt de gebruiker ook visueel naar de service production geleidt en wordt het verband met het pattern herkent. Content Houdt bij het opmaken van de content rekening met de kernwaarden. Zorg voor een helder communicatieplan zodat alle medewerkers weten welke strategie toegepast kan worden om de doelgroep te bereiken. Dit kan door de te gebruiken Fonts, Lettergrootte, Kleurgebruik, Links en Metatags vooraf vast te stellen. Gerbruik een vast slogan die in alle media uitingen kan worden gebruikt. Om dit in goede banen te laten leiden is het verstandig een brandmanager aan te stellen die de branding coördineert. Afbeelding 14: Ontwerp advies voor de nieuwe huisstijl Tip: Ontwikkel een herkenbare huisstijl voor de online als offline media uitingen doormiddel van patterns! Afbeelding 15: Production met paarse blokjes als pattern 15
4.0 Design Report Advies 4.3 Design Report Advies 2.0 Responsive Design De nieuwe huisstijl die het merkbeeld gaat versterken wordt toegepast in het responsive webdesign van de website. De nieuwe branding strategy zorgt ervoor dat de website ook voor mobiel en tablet eenzelfde gebruikerservaring oplevert als voor pc en laptop. In het nieuwe layout van de website wordt gebruik gemaakt van een jquery image slider die op ieder device werkt. Er kan voor mobiel en tablet zelfs een multitouch-navigatie functie worden gebruikt om de afbeeldingen te bekijken. Verder is de indeling verbetert met het hoofdmenu als gebruikelijk aan de linkerkant. Er zijn meer menu-items toegevoegd en het submenu services is voorzien van de geblokte kleuren die samen een group vormen. De website heeft hierdoor meer kleur gekregen. Door de blokjes in de foto s en in de background van de website te gebruiken is het patroon van de huisstijl te herkennen. Er is daardoor een duidelijke overeenkomst tussen de online en offline uitingen. De uitkomsten van de gestalt principles in webdesign zijn doorgevoerd in de content items en de buttons. De headers van de content items hebben allen een grijs blok als background met daarin het onderwerp. Door een lijn wordt ieder blok afgesloten. De nieuwsfeiten hebben per onderdeel een grijze background met een plaatje om zo duidelijk de overeenkomst te laten zien en de nieuwsfeiten van elkaar te onderscheiden. De tekstlinks zijn vervangen door duidelijke buttons die op alle devices makkelijk te bedienen zijn. Op de volgende pagina s zijn de voorstellen van het ontwerp van de responsive website te bekijken. 16
4.0 Design Report Design Report Advies 2.0 Responsive Web Design Afbeelding 16: Responsive Web Design advies voor PC en Laptop 17
4.0 Design Report Advies Design Report Advies 2.0 Responsive Web Design Afbeelding 17: Mobile Responsive Design advies Afbeelding 18: Tablet Responsive Design advies 18
5.0 Conclusie Probleemstelling Onderzoeksvraag Hoe zorg ik ervoor dat responsive web design ecommerce bedrijven gericht op business to consumer (B2C) een betere branding en meer omzet oplevert? Na zorgvuldig de Design Report Checklist te hebben doorlopen zijn er belangrijke verbeterpunten voor ISG aan het licht gekomen. Door het toenemende gebruik van tablet en mobiel voor ecommerce websites is een geoptimaliseerde branding strategie voor verschillende schermresoluties de oplossing om meer omzet te genereren (zie afbeelding 19). Door bij het ontwerp van de website de gebruiker centraal te stellen, en de devices pc, laptop, tablet en mobiel als uitgangspunt te nemen, wordt het stappenplan om tot aankoop over te gaan vereenvoudigd. Bovendien is het overzichtelijker op ieder gewenst apparaat. De website is zodoende gebruiksvriendelijk dat de gebruiker eenvoudig tot Call To Action zal overgaan. Dit resulteert in meer klanten en omzet. Het responsive webdesign leidt de gebruiker naar de gewenste dienst doordat de kernwaarden helder zijn geformuleerd en binnen de functies van de website zijn verwerkt. Het online merkbeeld komt hierdoor vertrouwelijk over en is in de online branding strategie verwerkt. De gebruiker wordt onbewust getriggerd en overtuigd. Dit vertrouwen betaald zich uit doordat dit de doelgroep het gevoel geeft dat ISG zijn beloftes ook daadwerkelijk nakomt, op ieder gewenst apparaat! Afbeelding 19: ISG haalt meer omzet uit haar ecommerce bussines door een nieuwe branding strategie en responsive webdesign Met de ontwikkeling van het Design Report heb ik een basis neergezet die voor alle ecommerce bedrijven van toepassing is. Aan de hand van de checklist komen de verbeterpunten naar voren die in het Design Report Advies worden aangegeven. Het is aan de klant zelf om het advies daadwerkelijk door te laten voeren. 19