Evangelische Omroep gaat Responsive onderzoek naar een efficiente werkmethode die resulteert in een optimale gebruikersbeleving van websitebezoekers
colofon Hilversum, 8 mei 2013 Conceptversie 1.1 Jonathan Marchal Studentnummer: 1576968 Bachelor Communicatie & media design jonathan.marchal@student.hu.nl www.jonathanmarchal.nl Hogeschool Utrecht Afstudeerdocent: Laurens Vreekamp Tweede afstudeerdocent: Marjolein Kassenaar laurens.vreekamp@hu.nl www.hu.nl Evangelische Omroep Afstudeerbegeleider: Geert- jan van Mastrigt www.eo.nl geert- jan.van.mastrigt@eo.nl 2
inhoudsopgave Voorwoord Samenvatting 1 Inleiding Opdrachtgever Aanleiding Probleemstelling & relevantie Beknopte literatuurstudie Doel project Onderzoeksvraag & deelvragen Leeswijzer 2 Begrippenkader Responsive design Workflow Designpatterns De gebruiker Afdeling Internet 3 Onderzoek Workflows Eindgebruikersinformatie Tussentijdse conclusie Designpatterns & principles Conclusie onderzoek 4 Concept Workflow Designpatterns Designprinciples 5 Proof of concept Workflow analyse Designpatterns analyse Designprinciples analyse 6 Conclusie Deelvraag 1 Deelvraag 2 Hoofdvraag Overige conclusies 7 Aanbevelingen 8 Nawoord 9 Planning 10 Bijlagen 3
Voorwoord 4
samenvatting 5
Opdrachtgever De EO is een onderdeel van de Nederlandse Publieke Omroep. De verantwoordelijkheden van het publieke bestel om te zorgen voor een brede programmering in de samenleving, is dus ook voor de EO- missie van belang. De medewerkers hebben het verlangen om vanuit een persoonlijke relatie met Jezus Christus het Goede Nieuws van Gods Koninkrijk vorm te geven en door te geven. Vanuit dit verlangen wil de EO zoveel mogelijk mensen bereiken en bouwen aan de samenleving. 1 De EO is een omroep die zeer diverse media inzet om zoveel mogelijk mensen te bereiken. 1 van deze media is internet. Dit medium wordt volop ingezet, vaak ter ondersteuning van de programma's die worden uitgezonden. De afdeling Internet is een kleiner onderdeel van het bedrijf maar volgt goed de ontwikkelingen van de online wereld en maakt frisse websites en applicaties die dagelijks geoptimaliseerd worden. De EO start in 1965 als iets kleins maar heeft ondertussen een grote achterban verspreidt over heel Nederland en daarbuiten. Deze achterban heeft een enorme diversiteit omdat de EO zich richt op een groot aantal doelgroepen binnen Nederland. Toch zien we dat de beoogde doelgroep niet direct de werkelijke doelgroep is. 2 1 http://www.eo.nl/algemeen/overdeeo/artikel- detail/artikel/missie- evangelische- omroep/ 2 http://bron.eo.nl 6
Aanleiding In deze tijd waarin bijna iedereen een smartphone en/of tablet heeft wordt het erg interessant om te kijken naar de mogelijkheden die er ontstaan op het gebied van mobile design. Er gebeurt al veel op dit gebied, steeds meer bedrijven zoeken naar een manier om hun producten of diensten aan te bieden op mobile devices. Het gebruik van mobiel internet stijgt elk jaar weer. Het gebruik van mobiel internet is vooral onder jongeren van 12 t/m 25 jaar sterk toegenomen. In 2012 gaat 86 procent van deze leeftijdsgroep regelmatig mobiel online, tegen 21 procent in 2007. Ook in andere leeftijdsgroepen is het mobiele internetgebruik in de afgelopen jaren fors toegenomen. 3 De verwachting is dat deze lijn word doorgezet en dat binnen enkele jaren het aantal mensen dat middels een mobile device online gaat is groter dan het aantal mensen dat met behulp van een desktop online gaat. 4 Het is daarom van groot belang dat bedrijven inspelen op deze ontwikkeling. Een mobiele website of app is vaak het eerste, en belangrijkste, contactmoment tussen klant en bedrijf. 5 Wanneer een website een ongebruikersvriendelijke ervaring geeft heeft dat serieuze consequenties voor het bedrijv. Het sitebezoek daalt: circa een kwart zegt de website niet meer te bezoeken. Het slecht functioneren van een website veroorzaakt soms zelfs negatieve beeldvorming over het betreffende bedrijf. Een goede gebruikservaring met de website is daarom van essentieel belang. 6 De EO ziet dat er een behoefte is gecreëerd door de technologische ontwikkelingen. De eindgebruiker wil informatie op een gebruiksvriendelijke manier ontvangen onafhankelijk van welk device de eindgebruiker gebruikt en onafhankelijk binnen welke context de eindgebruiker zich bevindt. 3 http://www.marketingonline.nl/nieuws/bericht/onderzoek- 86- jongeren- gaat- mobiel- online/ 4 http://www.webgenerator.nl/digest/in- 2014- meer- mobiel- internet- dan- via- desktop.html 5 http://www.imarcon.nl/mobiele- website- is- eerste- contactmoment- met- klant/ 6 http://www.marketingfacts.nl/berichten/slechte- mobiele- performance- schaadt- bedrijven 7
Probleemstelling & Relevantie 24,6% van alle bezoekers bekijkt een website van de EO middels een mobiel device terwijl de website daarvoor niet geoptimaliseerd is. Daarmee moet dus bijna 1/4 van alle bezoekers omgaan met een omgeving die niet geoptimaliseerd is voor het device waarmee ze de website bezoeken. 7 De Evangelische Omroep(EO) voorziet nog niet in de behoefte naar een gebruikersvriendelijke omgeving onafhankelijk van device maar ziet zeker het belang en het toekomstperspectief van deze ontwikkeling. De EO heeft een grote hoeveelheid aan websites waarop zij verschillende content aanbieden. Door de content te optimaliseren voor alle devices kan op grote schaal voorzien worden in de behoeftes van de mobiele gebruikers. Hierdoor wordt het bereik groter en zijn websites overal op een geoptimaliseerde wijze toegankelijk. In een eerder stadium is besloten om responsive design toe te passen om in te spelen op deze behoefte. Responsive design is voor de EO een erg waardevolle methode om zich mobiel te presenteren, want de website kan vanuit 1 systeem(cms) beheerd blijven worden. Dat komt de gebruiksvriendelijkheid, actualiteit en beheersbaarheid van de aanwezige content ten goede. De redacteuren houden de websites elke dag up- to- date Door responsive design toe te passen wordt er voorkomen dat redacteuren dubbel werk moeten doen. De content die ze toevoegen hoeft maar 1x ingevoerd te worden in tegenstelling met een mobiele website die apart onderhouden moet worden. Daarnaast is responsive design een investering in de toekomst want steeds meer verschillende apparaten verschijnen op de markt en de website respondeert doormiddel van responsive design op elke beeldschermresolutie. De vraag die binnen de afdeling Internet ligt is: Op welke wijze kunnen we dit realiseren en wat betekend dit voor het werkproces? 7 EO Google Analytics bijlage 1 cijfers: 05-2013 8
Beknopte Literatuurstudie Wat hebben anderen in de literatuur over deze (of aanverwante) vraagstelling(en) gezegd? Langzaam ontwikkelen er verschillende workflows voor het ontwikkelen van responsive websites. Veel user- experience- en responsive designexpers praten over 2 begrippen: Mobile- first en content first. Deze 2 begrippen fungeren als leidraad voor de ontwikkeling van responsive websites. Mobile First Mobile- first is een term geintroduceerd door Luke Wroblewski in 2009. Hij schrijft het volgende hierover: More often than not, the mobile experience for a Web application or site is designed and built after the PC version is complete. Here's three reasons why Web applications should be designed for mobile first instead. 1. Mobile is exploding 2. Mobile forces you to focus 3. Mobile extends your capabilities 8 Door content te gaan invullen voor het kleinste scherm, creëer een team een optimale website voor de mobiele gebruiker. Het concept gaat over het feit dat het altijd gemakkelijker is om een kleine website uit te breiden naar een grotere variant in plaats van een grote website omzetten naar een kleinere variant. Content- first "It puts content ahead of all other considerations. It doesn t mean your site can t be beautiful, but it does mean that more importantly it needs to be functional." 9 Shelly Wilson tijdens Content Strategy Forum 2011 over responsive design: 1. Het is vooral een gesprek tussen designers en developers. Redacteuren vallen er nu buiten. 2. Content word door designers als een element behandeld en niet als een element dat een boodschap/relatie moet overdragen 3. De contentcreator denkt nu na over de meest ideale setting, hoe kunnen we onze content inzetten. Terwijl de designer en de developers daarna bepalen wat er met die content gebeurd: het word verkleind, gereorganiseerd en de lay- out veranderd. Daardoor verliest de redactie de controle die ze hebben over de content en hoe dat eruit ziet op een smartphone. 10 Dus de redacteuren moeten meedenken in dit proces en betrokken worden, want anders werkt het technisch allemaal perfect en ziet het er goed uit, maar is de kans groot dat men de wensen van de eindgebruiker uit het oog verliest. Er moet een workflow gecreëerd worden specifiek voor responsive design. Binnen deze workflow moet de redacteuren direct betrokken worden en betrokken blijven gedurende het proces zodat de designers en developers geïnformeerd kunnen worden over wat prettig is voor de gebruiker. 8 http://www.lukew.com/ff/entry.asp?933 9 http://badfunproductions.com/mobile- first- means- content- first- thank- god/ 10 vimeo.com/28642885 9
Om deze 2 principes zijn al verschillende workflows ontwikkeld die door bedrijven worden gebruikt wanneer zij een responsive website ontwikkelen. De verouderde en veel gebruikte waterval- methode van Winston W. Royce is enorm tijdrovend wanneer er een responsive webdesign wordt ontwikkeld. 11 Bij het ontwikkelen van responsive websites maken veel bedrijven gebruik van designpatterns. Een designpattern is een gestandaardiseerde oplossing voor veel voorkomende ontwerpproblemen. Deze patterns versnellen het ontwerpproces en zorgen bij de gebruiker voor een natuurlijke herkenning. Namelijk de herkenning van hoe een stuk techniek werkt, zonder daar bij na te moeten denken. Gedachten als: hoe werkt dit? wat moet ik doen? hoe kom ik op die pagina? moeten ten allen tijden bij de eindgebruiker worden voorkomen. Don t make me think - Steve Krug Wat waren hun conclusies? Wanneer men een website wil optimaliseren, onafhankelijk van de context en het device van de eindgebruiker dan moet het team de volgende dingen voor ogen houden: * Werk vanuit het kleinste scherm naar een steeds groter scherm. * Zorg dat de content de belangrijkste rol speelt in de beslissingen voor het optimaliseren voor de gebruiker. * Betrek contentcreators gedurende het gehele proces. * Gebruik een andere workflow om het ontwerpproces te optimaliseren. Bij het ontwikkelen van een workflow voor een responsive website concluderen de kenners dat de watervalmethode waarmee fixed websites worden gebouwd niet meer werkt. Er moet nagedacht worden over een nieuwe workflow speciaal voor het bouwen van responsive websites. Content first en mobile first zijn veel gebruikte principes die een leidraad zijn bij het ontwikkelen van een workflow. In hoeverre is hun vraag onbeantwoord nog? Op welke wijze kunnen deze principes het beste in de praktijk toegepast worden, specifiek voor de afdeling Internet van de Evangelische Omroep. Welke designpatterns en workflow kan de afdeling Internet toepassen om op efficiënte wijze een gebruikersvriendelijke website te produceren voor verschillende devices en verschillende contexten. 11 http://www.selectbs.com/analysis- and- design/what- is- the- waterfall- model 10
doel Project Responsive design zorgt er voor dat een website toegankelijk is onafhankelijk van welk device er gebruikt wordt. Het doel van dit onderzoek is dat de afdeling Internet een workflow heeft waarmee ze de websites responsive kunnen maken. Aan de hand van designpatterns werkt men op een efficiënte wijze aan een gebruikersvriendelijk resultaat zodat de eindgebruiker bereikt kan worden met de content van de EO en daarmee met de missie van de EO. Daarom verzorgt dit onderzoek een workflow die de afdeling kan toepassen wanneer zij een website gaan omzetten naar een responsive website. Het is daarbij van belang dat de content op een gebruikersvriendelijke manier gepresenteerd wordt zodat het team daarmee de missie van de EO kan overbrengen bij de gebruiker. Onderzoeksvraag & deelvragen Onderzoeksvraag: Aan de hand van welke workflow en desginpatterns kan de afdeling Internet op een efficiënte werkwijze de eindgebruiker optimaal bedienen. Deelvragen: 1. Welke factoren hebben een negatieve invloed op gebruikerservaring van de eindgebruikers? 2. Welke workflow is efficiënt en resulteert in een gebruikersvriendelijke omgeving? 3. Welke designpatterns kun je toepassen om de inhoud en vormgeving te optimaliseren voor mobiel gebruik? 11
leeswijzer 12
Begrippenkader Responsive design Responsive design is een term die in 2009 door Ethan Marcotte werd geintroduceerd, en staat vooral de afgelopen maanden erg in de belangstelling binnen de designcommunity en de Evangelische Omroep. Dit onderzoek is ontstaan uit het idee dat de EO zijn websites responsive wilt maken. Daarmee spelen ze in op de ontwikkelingen op de mobiele internetmarkt die momenteel vol op gaande zijn. Bij responsive design gaat het erom dat de gebruikers onafhankelijk van welk apparaat ze gebruiken een gebruikersvriendelijke website voor ogen krijgen. Een website die gemakkelijk te bedienen is binnen verschillende contexten. Websites worden voor desktops al jaren ontworpen op een redelijk vaste breedte. De EO ontwikkeld websites aan de hand van statistieken die uitwijzen welke beeldschermresolutie het meest word gebruikt. Hiermee speelt de EO in op de beeldschermgroottes die mensen thuis hebben staan. In de laatste paar jaren worden de resoluties van desktopschermen groter, de EO speelde daar goed op in, maar ondertussen is er een ontwikkeling gaande waar zij minder gemakkelijk op in kunnen spelen. Door het vele gebruik van smartphones, ereaders, gameconsoles, tablets, smarttvs etc is er geen standaard meer waar bedrijven zich aan vast kunnen houden. Er is een enorme verscheidenheid van schermen ontstaan. Er zijn SmartTV's met een schermgrootte van maar liefst 3840 bij 2160 pixels tot kleine smartphones met een schermresolutie van 300 bij 400 pixels. Responsive design maakt het mogelijk om een website in 1 enkele versie te optimaliseren voor verschillende schermresoluties. Middels voornamelijk CSS en Javascript respondeert de lay- out en functionaliteit op het device waarmee de website word bekeken. Bij responsive websites is dus geen vaste breedte ingesteld. De site past zichzelf aan en schaalt elementen bij of verplaatst ze afhankelijk van de schermresolutie. 12 Ethan Marcotte zegt een jaar later na de introductie van zijn term er het volgende over: Responsive design is not about designing for mobile. But it s not about designing for the desktop, either. Rather, it s about adopting a more flexible, device- agnostic approach to designing for the web. 13 We zullen echter zien dat het verder gaat dan alleen de website technisch werkend te optimaliseren. Workflow Responsive design is nog volop in ontwikkeling, veel designers, studios en bedrijven zijn nog steeds aan het experimenteren met responsive design, daarom zijn er nog maar weinig best practices & workflows ontwikkeld. Het is daarom erg nuttig in ieder geval een goede workflow te ontwikkelen, zodat de afdeling Internet van de EO een leidraad heeft waarmee ze te werk kunnen gaan. De workflow omschrijft de wijze waarop de afdeling Internet samenwerkt. Deze workflow word specifiek voor het ontwikkelen van responsive websites. De workflow is een stap voor stap omschreven document die de afdeling Internet hanteert om op een effectieve manier een gebruikersvriendelijk resultaat neer te zetten. Duidelijk is dat de huidige workflow niet meer werkt en dat deze moet worden aangepast voor het bouwen van responsive websites. 12 http://www.emerce.nl/achtergrond/responsive- webdesign- optimale- gebruikservaring- webcontent 13 Ethan Marcotte, de godfather van responsive design, mei 2010 13
Designpatterns Daarnaast helpen designpatterns bij een effectief werkproces. Een designpattern is een gestandaardiseerde oplossing voor een veel voorkomend ontwerpprobleem. De designpatterns die dit onderzoek omschrijft resulteren in een omgeving die gebruikersvriendelijk is en voor gebruikers gemakkelijk te bedienen. Er is een verschil tussen een succesvolle ervaring op de desktop en op mobiele devices. Beide zijn gebouwd op andere psychologische functies van de gebruiker. Mobiele designpatterns zijn gebaseerd op NUI s(natural user interface) in plaats van op GUI s. (Graphical user interface) 14 Natural User Interfaces die vaak worden ingezet op moderne mobiele devices zijn gebouwd op de psychologische functie van intuitie in plaats van herkenning. Gebruikers moeten in staat zijn om aan de hand van de presentatie van een interface de mogelijkheden te herkennen. Bij het ontwikkelen van een responsive website moet de afdeling Internet een andere wijze van ontwerpen hanteren en de designpatterns realiseren dit doordat deze specifiek ontwikkeld zijn voor NUI ervaringen. 15 De designpatterns kunnen de website optimaliseren aan de wensen van de gebruiker, dit in overleg met de redacteur die op de hoogte is van de wensen van de bezoeker. Er word dus met de redacteur overlegd over wat verstandig is om te gebruiken en wat niet. De gebruiker De eindgebruiker kan zeer divers zijn en is pas te definiëren wanneer bepaald wordt welke website wordt omgezet naar een responsive website. Afhankelijk van welke website er wordt geoptimaliseerd weten we welke eisen en wensen de eindgebruiker heeft. De EO heeft erg veel diverse eindgebruikers omdat de missie van de EO is om zoveel mogelijk mensen te bereiken met de missie. Het belangrijkste om in oog te houden voor de afdeling Internet is dat de eindgebruiker een omgeving treft die gebruikersvriendelijk is en gemakkelijk te bedienen. De afdeling Internet realiseert de geoptimaliseerde websites en is daarmee naast de eindgebruikers van de website een doelgroep waarop dit onderzoek toegespitst is. De workflow en designpatterns die ik ontwikkel vormen een werkmethode die de afdeling Internet in de toekomst gaat toepassen. Afdeling Internet Het team bestaat uit 4 webdevelopers, 2 webdesigners en tientallen medewerkers van de internetredactie. Het team van webdesigners en webdevelopers werkt in iteraties aan de hand van SCRUM. De websites die deze afdeling onderhoud worden regelmatig vernieuwd door de webdesigners en webdevelopers en dagelijks up- to- date gehouden door de internetredactie. 14 P123 The Mobile Frontier: A guide for designing mobile principles Rachel Hinman 15 P124 The Mobile Frontier: A guide for designing mobile principles Rachel Hinman 14
deskresearch Er wordt deskresearch uitgevoerd naar het gebruik van mobiele websites in het algemeen. Dit onderzoek wordt online gedaan. Onderzocht wordt hoe smartphone/tablet gebruikers omgaan met content op websites en op welke manier ze gebruik maken van informatie op een smartphone en tablet. Deskresearch is van groot belang voor het verkrijgen van achtergrondinformatie en het helpt de juiste richting op te gaan tijdens het onderzoek. Het geeft ook informatie over wat er speelt binnen het betreffende onderwerp en waar de focus op moet liggen. Daarnaast wordt middels deskresearch gekeken naar bestaande workflows voor responsive websites om te onderzoeken hoe deze in elkaar zitten. Deze informatie schetst een beeld van wat er al bestaat aan responsive websites en hoe de websites van de EO daarin gaan passen. Ook wordt gekeken naar bestaande mobile designpatterns om te zien welke mogelijkheden er zijn op dit gebied en welke functionaliteiten misschien oplossingen kunnen bieden voor de responsive websites. De responsive website wordt een website die veelal bekeken gaat op andere plekken dan achter het bureau de plek waar de eindgebruiker zich bevind speelt zeker rol als het gaat om het verkrijgen van informatie. Naast de website zelf is het natuurlijk belangrijk om te weten wie de gebruiker is. Aan de hand van interne onderzoeken wordt achterhaald wie de eindgebruiker van de website is. Bestaande onderzoeken naar doelgroepen wijzen uit wat de algemene behoeftes en meningen van de eindgebruikers zijn. Het proof of concept wordt uiteindelijk gedaan door mijzelf in de functie van webdesigner in samenwerking met de betrokken partijen om te zien of de verschillende keuzes daadwerkelijk de juiste zijn geweest. Het concept en de feedback die terugkomt uit de test resulteren in de aanbevelingen. 15
Het onderzoek is onderverdeeld in 5 onderdelen 1 Workflows 1.1 Inleiding 1.2 Huidige workflow 1.3 Responsive Workflows 1.3.1 Responsive watervalmethode 1.3.2 Mobile First 1.3.3 Content First 1.4 Ondersteunende werkmethodes 1.4.1 Design in de browser 1.4.2 Schetsen 1.4.3 Moodboards en Style Tiles 1.4.4 Adobe Reflow 2 Eindgebruikersinformatie 2.1 Inleiding 2.2 Interne analytische gegevens mediagebruik 2.3 Gebruikersgegevens 2.3.1. Context gebruiker 2.3.2. Tijdstip van gebruik 2.3.3. Website laadtijd 2.3.4 Problemen en gevolgen 2.4 Gebruikersprofielen 2.5 Device gebruik 2.5.1 Smartphone 2.5.2 Tablet 2.5.3 Pixelrules 2.5.4 Browsersupport 3. Designpatterns & principles 3.1 Inleiding 3.2 Designpatterns 3.3 Design principles 4. Conclusie onderzoek 16
1. Workflows 1.1 Inleiding In dit deelonderzoek wordt onderzoek gedaan naar een antwoord op de volgende deelvraag: Welke workflow is efficiënt en resulteert in een gebruikersvriendelijke omgeving. 1.2 Huidige situatie Bij het opzetten van een nieuwe website bij de Evangelisch Omroep zijn er een aantal fases die doorlopen worden. De afdeling Webdesign & Webdevelopment werkt in samenwerking met de product owner aan de hand van SCRUM. Een project wordt opgedeeld in periodes van 3 weken, ook wel sprints genoemd. Het voordeel van de scrummethode is dat er als één team intensief gewerkt wordt. Alle problemen, maar ook alle successen, zijn bekend. 16 In een overleg met alle programmamakers wordt een beoogde doelgroep vastgesteld en uitgebreid omschreven. Dit gebeurd aan de hand van persona profielen die de NPO heeft opgezet als representatie van de Nederlandse bevolking. Dit document legt de eisen, wensen en het verwachte gedrag van de gebruiker vast. Daarnaast staat in dit document de doelen van website vast en word in grote lijnen de inhoud van de website bepaald. Dit overleg resulteert in een overleg met alle betrokken partijen. Samen gaan zij dit document doorspreken en een concept ontwikkelen voor de vormgeving van de website, deze bijeenkomst kan gezien worden als een brainstormsessie waarin alle betrokken partijen ideeën kunnen opwerpen over de vormgeving en inhoud van de website. De webdesigner gaat met deze resultaten uit de brainstormsessie aan de slag met een ontwerp voor de website, dit gebeurd in onderling overleg met de product owner of redacteur van de website. Dit overleg is vaak aan het einde van het ontwerpproces. Het ontwerp wordt na goedkeuring van alle partijen omgezet in CSS/HTML. Wanneer nodig worden er extra functionaliteiten ontwikkeld door de webdevelopers. Vanaf deze fase wordt er gewerkt aan de hand van SCRUM omdat er vaak meerdere designers werken aan het omzetten van het design en omdat de webdevelopers vaak betrokken zijn bij deze fase doordat zij functionaliteiten maken. De ontwikkelde functionaliteiten worden getest door een andere webdeveloper dan de ontwikkelaar en het design wordt aan de hand van SCRUM- taken gecontroleerd door de product owner. Dan wordt de website opgeleverd en vullen de redacteuren de website met content, waarna de website online wordt gezet. 16 http://www.frankwatching.com/archive/2012/04/04/responsive- design- tips- voor- het- ontwerpproces/ 17
De huidige workflow voor het ontwikkelen van een website is puntsgewijs als volgt: 1. Overleg programmamakers 2. Overleg programmamakers, designers & hoofd redactie & redactiemedewerker over de inhoud en vormgeving 3. Design (onderling overleg met redactie of product owner) 4 Website wordt gebouwd in CSS/HTML (Eventueel worden er extra functionaliteiten ontwikkeld door developers) 5. Functionaliteiten worden getest 6. Content word toegevoegd 7. Website wordt online gezet 1.3 Responsive workflows Deze werkwijze is echter niet toepasbaar wanneer de afdeling Internet een website gaat omzetten tot een responsive website. Uit het onderzoek dat volgt blijkt dat een andere werkwijze hierbij vereist is wanneer de afdeling op een meer efficiënte en doelgerichtere manier te werk wil gaan. 17 De huidige werkwijze is namelijk ontwikkeld voor het bouwen van fixed- websites. Websites die gebaseerd zijn op 1 specifieke breedte. Het team gaat echter websites ontwikkelen die flexibel zijn en dus verschillende weergaves heeft. Daarnaast moet het team nu gaan vormgeven voor totaal verschillende contexten waarin de eindgebruiker de website bezoekt. Doordat de eindgebruiker de website nu ook bekijkt op kleinere schermen moet het team ook daar rekening mee houden. Onderstaande workflows pretenderen een oplossing te bieden. 1.3.1 Responsive watervalmethode Een veel gebruikte methode voor het ontwikkelen van fixed- websites is de watervalmethode. In de workflow van de EO zien we ook verschillende elementen van deze methode terugkomen in het proces. Specialisten hebben een methode ontwikkeld om deze watervalmethode toepasbaar te kunnen maken voor het ontwikkelen van responsive websites. De planes worden benaderd als fasen, als stappen in een plan van aanpak. De hoofdlijnen worden als volgt benaderd: Strategie In deze fase worden de behoeften van de doelgroep, gebruiker, stakeholders en de trends in de omgeving van de organisatie én de doelgroep (het ecosysteem) onderzocht. De bevindingen worden vastgelegd in een online strategie. Een onderdeel van de online strategie, maar soms ook een afzonderlijke deliverable, is een contentstrategie: met welke content beantwoord de redacteur wanneer aan welke behoefte van de doelgroep op welk platform? Hier komen persona s, customer journeys en user stories om de hoek kijken. Scope In de scopefase word de reikwijdte van het eindresultaat bepaald (dus niet van het project). Het team legt dus de functionele eisen en wensen vast, en stemt ook de contentvereisten af met opdrachtgever en doelgroep. Zo bepalen zij niet alleen wat er functioneel en technisch moet komen, maar ook welke inhoud tekst, beeld, video daarbij hoort. Structuur Vervolgens wordt een concretere vorm aan de website gegeven. In deze fase werkt een designer de informatiearchitectuur uit(navigatiestructuur) en hij bepaalt nu welke content 17 http://www.frankwatching.com/archive/2012/10/22/responsive- design- development- en- content- in- een- flexibele- aanpak/ 18
moet waar komen, wat is de boodschap, in hoeveel woorden/beelden, enzovoort. Daarna maakt hij een compositieontwerp. Hierin geven we aan welke content en functies waar moeten komen. Bepaal daarbij meteen hoe die blokken zich tot elkaar moeten verhouden op kleinere en grotere schermen. Tot slot gaat de designer aan de slag om de grafische stijl te bepalen. Belangrijk in dit proces is dat dit op hoofdlijnen gedaan wordt, wat in de praktijk betekent dat hij op basis van de huisstijl schetsen maakt van een homepagina en enkele subpagina s. Idealiter gebeurd dit voor enkele schermformaten. Skelet Vervolgens dient de skeletfase als voorbereiding op de eerste sprint (en is daarmee eigenlijk sprint 0 uit de bekende scrumaanpak). Maak een database- /informatieontwerp, een gedetailleerd interactieontwerp en gedetailleerd design van de verschillende componenten die in sprint 1 wilt ontwikkeld worden. In deze fase wordt ook de content voor diezelfde sprint 1 Ontwikkeld. Dat betekent tekstschrijven, fotografie en/of fotoredactie, zo nodig scriptschrijven, filmen en monteren, enzovoort. Waarom vóór de sprint? Als de content productie namelijk werkelijk tegelijk met interactieontwerp, design en front- end development gedaan wordt, zitten ergens een keer mensen op elkaar te wachten. Dit word toegepast in het kader van de content- first approach. En daarna testen, problemen ontdekken en dit proces herhalen in de volgende sprints. Deze aanpak heeft verschillende voordelen ten opzichte van de traditionele watervalmethode waarbij het team alleen een desktopvariant van een site realiseert. De belangrijkste daarvan is natuurlijk dat er een responsive resultaat gemaakt is dat onafhankelijk is van device en schermgrootte. Een ander groter voordeel is dat het compositieontwerp en de art direction in een kortere periode gerealiseert kan worden. Het proces verloopt ook sneller doordat het interactieproces tegelijk met het proces van contentcreatie verloopt. Deze versie kan online om daarna meer content toe te voegen en 18 19 het ontwerp en de interactie elementen te optimaliseren. 1.3.2 Mobile First Afgelopen jaren hebben alle webdesigners de desktop als uitgangspunt gebruikt voor het maken van een design, daarbij kwamen de mobiele apparaten op de 2e plek. Eerst een desktopvariant en daarna ontwikkelt men een mobiele variant van de website. Luke Wroblewski omschrijft in zijn boek Mobile First een nieuwe manier van ontwikkelen met allereerst primair de mobiele gebruiker in gedachten. Wanneer er namelijk wordt uitgegaan van een mobiele gebruiker die (meestal) een klein scherm heeft, (soms) een minder optimale internet verbinding heeft en (vaker) haast heeft, dan dwingt dit de designer op een andere manier naar zijn website te kijken. Plots is de ruimte boven de fold nog maar een paar duizend vierkante pixels. Hierdoor wordt het extra belangrijk om te bedenken wat er 18 http://readwrite.com/2012/05/10/bye- bye- waterfall- 5- steps- to- implement- responsive- web- design 19 http://viljamis.com/blog/2012/responsive- workflow/ 19
nu in deze ruimte weergeven word. Door te beginnen met ontwikkelen voor het kleinste scherm bepaald het team wat er werkelijk belangrijk is voor de gebruiker. De designer gaat in overleg met de content ontwikkelaar bepalen welke onderdelen prioriteit hebben en aan de hand daarvan delen zij de lay- out in. Hiernaast analyseren zij welke onderdelen er überhaupt op een pagina moeten staan. Het team ontwikkeld namelijk voor een gebruiker die een kleiner scherm heeft met mogelijk een minder optimale internetverbinding en een context waarin hij veel meer wordt afgeleid. Wanneer men vanuit deze positie een website ontwikkelt voor andere apparaten kunnen er elementen toegevoegd worden die de ervaring en informatiebronnen verruimen voor de gebruiker. Zo begint het team altijd met een sterke basis die men op kan bouwen naar een grotere variant in plaats van dat men een sterke desktopvariant heeft die afgebouwd moet 20 21 22 worden om een mobiele variant te ontwikkelen. 1.3.3 Content First Bij mobile first werkt het team vanuit het kleinste apparaat naar het grootste apparaat. Bij content- first kijk men naar welke content men heeft en op welke manier deze content het beste aan de eindgebruikers gepresenteerd kan worden. Het is van belang dat de content makers(redacteuren) vanaf het begin bij het proces betrokken worden. Op deze wijze kan het team werkelijk bepalen welke informatie het belangrijkst voor de gebruiker is en daarmee kan het team de lay- out van de website aanpassen aan de wensen van de gebruikers, zo voorziet de website in de informatie die ze willen hebben. Bij content first heeft de eindgebruiker altijd een seamless experience. Dat betekent dat de ervaring over alle kanalen zo aantrekkelijk mogelijk moet zijn en in elkaars verlengde moeten liggen. De toon en het gevoel moet hetzelfde zijn. Daarom spreekt men niet meer over een mobiele visie, maar over een online visie. Het is namelijk één website, gezien op verschillende devices. En er komen alleen maar devices bij. Daarom is het beter om niet voor devices te ontwerpen maar het team moet zich op de content focussen: content first. Alle content die de EO aanbiedt, moet via alle kanalen toegankelijk zijn. Natuurlijk wel op verschillende wijzen, andere volgorde, andere prioriteit, gelaagd. Er moet geoptimaliseerd worden voor de verschillende gebruikersmomenten per device. De volgende stappen worden gevolgd bij het toepassen van Content- first in combinatie met responsive design: 1. Content is het uitgangspunt, alle content is via elk device toegankelijk. Een gebruiker grijpt naar het device dat voorhanden ligt. 2. Prioriteren van content/ functie naar devices op basis van gebruikerstaken. Onderzoek welk device op welk moment de gebruiker zo goed mogelijk van dienst kan zijn. 3. Optimaliseer voor de verschillende gebruikersmomenten per device. Ieder device heeft unieke presentatie- en interactievormen waar men gebruik van kan en moet maken. Karen McGrane zegt het volgende nog over content: Don t cut features or content. Wanneer sommige content mogelijk van mindere waarde is voor mobiele gebruikers, dan is 20 http://www.tweepixels.nl/blog/20- webdesignen/84- responsive- webdesign- en- mobile- first- een- gouden- combinatie#.ut7lwnfvwhs 21 http://designshack.net/articles/css/mobilefirst/ 22 http://www.abookapart.com/products/mobile- first 20