Een aantal onderdelen van mijn scriptie zijn geschrapt of gecensureerd in verband met geheimhouding. Ik heb je wel door...

f#ck mobile 1 Design content first and device second. Afstudeerscriptie Jos Bezemer Tweede editie Een aantal onderdelen van mijn scriptie zijn geschrapt of gecensureerd in verband met geheimhouding. Ik heb je wel door... Deze onderdelen zijn 1 op 1 wel te zien.

2 2014 Jos Bezemer. Alle rechten voorbehouden. Niets uit deze uitgave mag worden verveelvoudigd, opgeslagen in een geautomatiseerd gegevensbestand en/of openbaar gemaakt in enige vorm of op enige wijze zonder voorafgaande schriftelijke toestemming van de schrijver.

Colofon Naam Website E-mail Studentnummer Auteur Jos Bezemer www.josbezemer.nl jos@josbezemer.nl 0819265 Titel Ondertitel Aantal woorden Naam Instituut Opleiding Minor Afstudeerperiode Scriptie f#ck mobile Design content first and device second. 18.670 Opleiding Hogeschool Rotterdam CMI Communication & Multimedia Design Interface & User Experience Design 17 februari t/m 27 augustus 2014 3 Afstudeervoorzitter e-mail Afstudeerdocent e-mail Jasper Schelling j.a.schelling@hr.nl Raul Martinez Orozco r.d.martinez.orozco@hr.nl Naam Adres Telefoonnummer Website Bedrijf Fabrique [merken, design & interactie] Dynamohal Professor Snijdersstraat 5 2628 RA Delft 015-2195600 www.fabrique.nl Begeleider e-mail Wouter Middendorf WouterM@fabrique.nl

Voorwoord De eerste drie kwartalen interaction design in het eerste jaar waren vreselijk. De literatuur was moeilijk en ik had geen idee wat ik aan het vak had. Daarom moest ik twee van de drie vakken herkansen, het tweede vak (Navigation & Structure) zelfs in het tweede jaar nog een keer over moeten doen. Dat Luke Wroblewski steeds maar als guru werd aangehaald kwam mij de neus uit. Ik had in die tijd nooit gedacht dat ik juist op Wroblewski s mobile first aanpak een groot deel van mijn afstuderen zou baseren. Gelukkig ben ik bij gedraaid na mijn eerste ervaring met interaction design. 4 Vier jaar zijn om gevlogen, waarvan het laatste jaar het snelst ging. In een succesvolle en bovenal leuke minor voor Coolblue en daarna afstuderen bij Fabrique, het jaar kon niet sneller gaan! Eigenlijk is het jammer dat dit het was. Er is nog zoveel te vertellen over content first ontwerpen. Misschien begin ik wel een blog. Zo ver was ik nooit gekomen als ik niet bij Fabrique stage kon komen lopen. Daar wil ik mijn begeleider Wouter voor bedanken. Ik weet zeker dat bij een ander bureau ik een totaal ander product had gemaakt, dat niet zo goed zou zijn als wat ik hier heb neer kunnen zetten. Verder wil ik Patrick, Twan, Remco, Martijn, Pieter en Louise bedanken voor de interviews. En natuurlijk alle Fabriquers in Delft voor de geweldige sfeer, interesse en ontvangst. Vanuit school wil ik Raul en Jasper bedanken. Begeleiders die mij steeds scherp hielden en er voor zorgden dat mijn afstuderen niet een wereldverbeterend project is geworden. Dan bedank ik nog mijn ouders en broer Lex. Voor het nalezen maar vooral om het rustig blijven (als ik in de buurt was) tijdens het drukke afstuderen. Als laatste nog de mede-afstudeerders in de skypegroep: bedankt voor de 43872 gedeelde berichten!

5 This is your last chance. After this, there is no turning back. You take the blue pill, the story ends, you wake up in your bed and believe whatever you want to believe. You take the red pill, you stay in Wonderland and I show you how deep the rabbit-hole goes. -Morpheus (The Matrix, 1999)

Samenvatting Fabrique kwam met het probleem dat mobile first ontwerpen vaak niet goed werd toegepast. Na onderzoek kwam ik er achter dat niet mobile first maar content first het probleem was. De hoofdvraag is daarom geworden: Welke rol kan content first design spelen bij het ontwerpen van mobiele multimediale websites? Content first is een ontwikkeling die, mits goed toegepast, het ontwerpproces van een project totaal anders kan inrichten. Door te ontwerpen vanuit de content dwing je jezelf te focussen op het doel van de pagina, en deze beter over te brengen op de gebruiker. Er is onderzocht door middel van een enquete, literatuuronderzoek en desk research. Ook zijn er diepte-interviews en een etnografisch interview afgelegd met stakeholders van content first design bij Fabrique. 6 Uit onderzoek is gebleken dat men vooral de smartphone gebruikt als alternatief voor de desktop. Deze mensen zijn over het algemeen niet tevreden over de mobiele ervaring maar gebruiken toch massaal het device om te kunnen browsen. Ontwerp bureaus spelen hierop in door responsive of mobiele websites te maken. Het blijkt dat content first design het beste aansluit bij informatieve websites. Websites in de ecommerce of interactieve sites zijn veel sterker gericht op interactie ontwerp. Hier kan content first ook worden toegepast maar heeft niet de zelfde impact als bij een informatieve website. Als content first wel toegepast kan worden zorgt het voor een website die duidelijk zijn informatie over brengt naar de bezoeker. De gebruiker staat volledig centraal, ongeacht welk device hij of zij gebruikt om de website te bekijken of welke techniek er wordt gebruikt. Zelfs de browser in de koelkast vertelt de content. Passepartout De strategen en project managers bij Fabrique kiezen voor de aanpak van een project. Passepartout stelt juist die personen in staat om een keuze te maken voor (of tegen) content first. Passepartout zorgt voor een duidelijke afweging tussen wel of geen content first. Er wordt ondersteuning gegeven om een content first project op te zetten en er zijn resources om dit zo goed mogelijk te doen. Passepartout is de assistent die de voorzet geeft, je hoeft hem zelf alleen nog maar in te koppen. F#ck mobile, focus op de content en de gebruiker. Niet het device.

Summary Fabrique posed the problem that mobile first design is usually not implemented correctly. In my research I found out that not mobile first, but content first was the issue. The main question is therefore: What can the role of content first be when designing mobile multimedia websites? Content first is a development that, if implemented correctly, can completely alter the design process. Starting to design from content out forces you to focus on the page s goals and how to communicate them to the user. Research has involved an investigation (poll), desk research and a literature review. Interviews (in-dept and ethnographic) have been taken with content first stakeholders at Fabrique. Research has shown that the users mainly uses their smartphones as an alternative for their desktop to browse the internet. These people are, over all, not satisfied with their mobile experience yet use it a lot of the time. To give them a better user experience design agencies try proving people with responsive or separate mobile websites. 7 It has shown that content first design works best on informative websites. ecommerce or interactive websites need a much higher level of interaction, therefore content first does not have the same inpact as with an informative website. If content first does get implemented it will result in a website that makes it s goals and content perfectly clear for the user. The user is the always the focus of the content, no matter what device he is using or what technique he uses. Even the refrigerators browser will be able to show the content. Passepartout The strategists and project managers at Fabrique have to choose the projects approach. Passepartout gives those people the choice to choose for content first, or to better not. Passepartout gives them a clear consideration for content first. To support them there is extra information and resources to download. Passepartout is the assistant who gives the assist, you just have to make the goal. So f#ck mobile, focus on the content and the user. Not the device.

Inhoudsopgave Inleiding 10 H1 Welke afwegingen worden er gemaakt door bureau en opdrachtgever bij het ontwerpen en ontwikkelen van een mobiele web experience? Stakeholders Responsive of mobiele website Conclusie 16 18 20 23 8 H2 Welke gevolgen heeft een content first benadering voor het ontwerpproces (van Fabrique)? Stap 0: Content first Signal-to-Noise ratio Content relaties Adaptive content 24 26 28 31 35 Stap 1: device Situaties Ontwerpen Progressive enhancement Piramid of Mobile 38 38 39 41 43 Toepassing in het ontwerpproces De opdrachtgever 46 49 Conclusie 53 H3 Wat zijn verwachtingen van gebruikers bij mobiele websites? Waarom mobiele websites Hoge verwachtingen, lage resultaten Conclusie 56 58 60 62 H4 Ontwerpmodel Criteria en Principes 64 68 H5 Interactief product Motivatie Passepartout Voor wie Passepartout Persona s & Scenario s Prototype 70 72 73 74 75 79 82

H6 Conclusie & Aanbeveling Conclusie Aanbevelingen 86 87 90 H7 Bibliografie 92 Verklarende woordenlijst 97 9

Inleiding Achtergrondinformatie Gebruikerservaringen op mobiele websites zijn tegenwoordig over het algemeen redelijk te noemen. Mobile first en responsive websites zijn al jaren geen nieuwe termen meer binnen de ontwerpwereld. Echter ontwerpen wij niet voor devices maar ontwerpen we voor de mensen die deze devices gebruiken. Deze mensen gebruiken devices waar wij niet alle beperkingen en mogelijkheden van weten. Wat we wel weten is waar ze voor komen. Ze komen voor de content van je website. Door de content first te ontwerpen is de content het belangrijkst op je website. Daar omheen ontwerp je de ervaring die door middel van progressive enhancement op elk device de beste ervaring biedt. 10 De titel f#ck mobile slaat op het niet moeten kiezen voor het device als uitgangspunt voor het ontwerp maar er moet worden gekozen voor de content. Dit heet content first ontwerpen. Als de content ontworpen is heb ik er voor gekozen om mij verder te kiezen op mobile first design omdat de content een medium moet hebben om bij de bezoeker te komen. Mobile first is door de populariteit van de smartphone een ideale oplossing. Een andere manier van de content presenteren via een medium kan via een tablet first methode of gewoon via een desktop ontwerp. Fabrique [Merken, Design & Interactie] Fabrique werd in 1992 door drie man opgericht met als doel gebruiksvriendelijke producten te ontwerpen en creëren. In 2007 opent Fabrique naast een kantoor in Delft een kantoor in Amsterdam, waarna in 2012 er ook een kantoor in Rotterdam bij komt. In 2012 bestaat Fabrique 20 jaar en heeft het ondertussen ruim 100 werknemers met klanten zoals Albert Heijn, de Staatsloterij en 9292OV. Probleemstelling Content first is een relatief nieuwe manier van projecten aangaan waardoor hier nog niet veel over bekend is. Omdat er nog niet zoveel bekend is zijn er veel vragen over content first. Hoe is het toe te passen, wie heb je er voor nodig? Maar omdat die vragen het beste te beantwoorden zijn door het te testen in de praktijk is het nu van belang om te weten in welke projecten content first toe te passen is. Kennisgebieden Tijdens de minor Interface & User Experience Design had ik de rol van interactie ontwerper, een rol die ik tijdens mijn afstuderen ook aanneem. Als interactie ontwerper houd ik rekening met de gebruikerservaring van de bezoekers waarmee ik probeer te zorgen voor logische en prettige interacties. Daarnaast ga ik voor een deel op een strategisch niveau hier naar kijken omdat content first niet alleen van Fabrique afhankelijk is maar ook van de opdrachtgever. De strateeg kijkt met de opdrachtgever wat de beste aanpak voor het project is en wat de opdrachtgever daarvoor moet doen, hij begeleidt daarin de opdrachtgever in het project.

Hoofdvraag Welke rol kan content first design spelen bij het ontwerpen van mobiele multimediale websites? Deelvragen 1. Welke afwegingen worden er gemaakt door bureau en opdrachtgever bij het ontwerpen en ontwikkelen van een mobiele experience? 2. Welke gevolgen heeft een content first benadering voor het ontwerpproces (van Fabrique)? 3. Wat zijn verwachtingen van gebruikers bij mobiele sites? Doelstelling Het concept van website of app loslaten en afvragen hoe je op de beste manier de boodschap van de opdrachtgever kan vertegenwoordigen op een device. Een goede stap om te beginnen is het ontwerpen van de content. Mijn doel is om er achter te komen hoe je ontwerpt voor de inhoud van een digitale ervaring, zoals een website. Deze manier van de content (inhoud, letterlijk) ontwerpen is content first. Het is een stroming die steeds belangrijker wordt omdat je niet weet op welk device je bezoeker jouw site gaat bezoeken. Het is mogelijk om te kijken welk device hij heeft en daar de goede opmaak aan te koppelen. Maar met de snelheid waarmee nieuwe devices worden ontwikkeld is dit niet bij te houden. Daarom moet er als eerste voor de content worden ontworpen. 11 Relevantie Mijn onderzoek is relevant voor ontwerpers en strategen die met hun opdrachtgever vanuit de content willen gaan ontwerpen. De devices waarmee de bezoekers onze ontwerpen bekijken varieert zoveel dat we dat (nog) niet bij kunnen houden. Daarom moeten we ontwerpen voor de content, en niet voor de devices. We moeten doorgroeien na mobile first en eerst aan de content denken, daarna pas aan het device. In onze groeiende toekomstgerichte industrie kan je eigenlijk niet anders. Onderzoeksmethode Met hulp van de boeken Universele Ontwerpmethodes (Martin & Hanington, 2012) en 101 Design Methods (Kumar, 2013) ben ik tot een aantal onderzoeksmethodes gekomen die ik ga gebruiken. Bij alle deelvragen maak ik gebruik van publications research, Google (NL+EN), Google Scholar en de ACM database. Mijn deelvragen zijn opgebouwd aan de hand van het model Intenties, Inzichten en Implementatie. Deelvraag 1 zijn de intenties. Hierin onderzoek ik wat de gebruikers willen en verwachten van mobiele websites om hier later op in te spelen, dit is het doelgroep onderzoek. Deelvragen 2 en 3 zijn inzichten. Bij deze deelvragen stel ik de wat -vraag en bepaal ik wat er gedaan moet worden om aan de inzichten te voldoen. De laatste deelvraag is implementatie. Dit is de toepassing van het onderzoek in de praktijk en hoe dat zich verhoud tot het merk.

Welke afwegingen worden er gemaakt door bureau en opdrachtgever bij het ontwerpen en ontwikkelen van een mobiele experience? In deze deelvraag zijn directe meningen belangrijk. Daarom ga ik expert interviews afnemen met verschillende medewerkers van Fabrique die verantwoordelijk zijn en kennis hebben van hoe beslissingen worden gemaakt bij de start van een project. 12 Deze interviews kunnen met bijvoorbeeld een projectleider zijn. Van de stakeholders maak ik persona s om mijn oplossingen aan te toetsen. De resultaten kunnen visueel worden weergegeven op een solution roadmap of solution database. Ook hier komt de publications research terug, zo gebruik ik bijvoorbeeld Agile Experience Design (McNeill, 2011). De uitkomsten hieruit zijn inzichten in hoe er wordt besloten om te kiezen voor een bepaalde aanpak van een mobiele website. Is dat responsive, een aparte mobiele site of misschien wel geen van alle? Wat voor impact heeft content first op de mobiele experience? Wat komt er voor de opdrachtgever bij kijken als er content first ontworpen wordt? Welke gevolgen heeft de content first benadering voor het ontwerpproces (van Fabrique)? Voor deelvraag twee heb ik interviews afgelegd met Fabriquers Patrick Sanwikarja (senior interactieontwerper), Remco Hoff (font-end developer) en Twan Minten (art director) om achter hun mening en inzicht in het werkproces te komen. Door uit elke expertise in het ontwerpproces iemand te interviewen kan ik er achter komen wat voor de verschillende disciplines belangrijk is en hoe die zich met elkaar verhouden. Middels een Convergence Map kan ik hier aantonen hoe de relatie tussen deze disciplines is. Daarnaast heb ik een expert interview afgenomen met strategen Martijn van der Heijden, Pieter Jongerius en Louise Rose. De interviews heb ik afgenomen om achter hun inzichten betreffende content first te komen. Voor deze deelvraag duik ik de literatuur in om te kijken wat de experts hiervan vinden. Bijvoorbeeld door de presentaties van Luke Wroblewski (auteur van het boek Mobile First) en Stephen Hay (auteur van Responsive Design Workflow) te bekijken maar ook door de boeken Content Strategy for Mobile (McGrane, 2012) en The Mobile Frontier (Hinman, 2012) te lezen. In mijn publications research heb ik naast boeken vooral naar blogs en presentaties van experts gezocht om insights op te doen omdat deze recenter zijn en meer experimentele input geven. Zo heb ik de blogs van Brad Frost, Luke Wroblewski en Cloud Four geraadpleegd.

Een mogelijke uitkomst van deze deelvraag is dat Fabrique heel wat zal moeten veranderen. Ik verwacht (hypothese) echter dat Fabrique al een beetje op deze manier werkt waardoor de verandering niet zo heel groot zou zijn. Als er veranderingen moeten komen dan zou dit alleen maar positief voor Fabrique worden maar wel lastiger voor de klant. Het zal ook sterk van de opdrachtgever af hangen of deze aanpak mogelijk is of niet. De uitkomsten hier zijn indicaties wat er bij Fabrique zou moeten veranderen om content first te kunnen gaan ontwerpen. 13 Keuzes en argumenten waarom wel of niet een content first project. Keuzes en argumenten waarom wel of niet een content first project. Intenties Deelvraag 1 Inzichten Deelvraag 2 & deelvraag 3 Implementatie Passepartout Keuzes en argumenten waarom wel of niet een content first project. De combinatie van de deelvragen. De hoofdvraag.

Wat zijn verwachtingen van gebruikers bij mobiele sites? Voor de derde deelvraag heb ik gekozen om de doelgroep te onderzoeken door te beginnen met een popular media scan en een enquête. De data hieruit heb ik in een User Journey Map verwerkt. In de popular media scan ga ik op Twitter op zoek naar mensen die zich positief of negatief uitlaten over hun ervaring met mobiele websites. Ik verwacht dat mensen vooral veel klagen als iets niet werkt en dat je in mindere mate zal zien dat er complimenten worden uitgedeeld. Die complimenten zullen, verwacht ik, meer worden uitgedeeld door de design community dan door de dagelijkse gebruikers. 14 Dat denk ik omdat gebruikers er zich niet altijd even bewust van zijn dat een site werkt zoals die doet. En klagen is altijd makkelijker dan complimenteren. Daarom is het interessant om te weten of het de gebruikers wel iets uit maakt of iets responsive of mobiel is, of is dat alleen voor ons? Om inzicht te krijgen in wat een klant bezighoudt heb ik een interview afgenomen met Gwen de Jager, site owner van Staatsloterij.nl en daarmee de persoon die alles van het online gedeelte van de Staatsloterij weet. Vanuit de Analytics van Staatsloterij heb ik harde data gekregen over wat de gebruikers doen op de site. De uitkomsten uit deze deelvraag zijn mijn doelgroeponderzoek naar in hoeverre mensen al bekend zijn met mobiele websites. Beschrijving beroepsproduct In plaats van mijn focus te leggen op een klant leg ik de focus in mijn afstuderen op Fabrique. De learnings uit het onderzoek worden verwerkt in een tool voor de strategen en projectmanagers van Fabrique die ze kunnen gebruiken in hun ontwerpproces. De tool moet ze ondersteunen in het content first ontwerpen. Tool De tool (genaamd Passepartout) moet inspelen op het ondersteunen van content first ontwerpen voor de interactie ontwerpers van Fabrique. Dat doe ik door Passepartout te richten op de strategen en projectmanagers. Die begeleiden de interactie ontwerpers en de klanten waardoor ze de perfecte brug vormen voor het klant intensieve content first ontwerpen.

Passepartout doet dienst als een handvat voor de strategen en projectmanagers om te onderzoeken of het project wat ze aangaan content first kan (of moet) worden ontworpen. Door een serie vragen te beantwoorden geeft Passepartout het advies om wel of niet content first te ontwerpen. Als Passepartout doorlopen is wordt er een samenvatting uitgeprint die in de project ruimte wordt gehangen, deze dient ter inspiratie en herinnering aan het team om aan te tonen waar het project (en de content) voor staat. Als Fabrique dit publiekelijk wil gebruiken kan dit onder een subdomein van fabrique.nl komen te vallen, bijvoorbeeld passepartout.fabrique.nl of fabrique.nl/passepartout. Voor intern gebruik zal het waarschijnlijk achter een wachtwoord op een subdomein komen zodat Passepartout overal te gebruiken is (maar niet openbaar). Bovendien is die dan ook van buiten het Fabrique netwerk te bereiken, wat niet kan als Passepartout op het intranet zou staan. Dat is handig als er bijvoorbeeld bij Q42 of een klant op locatie gewerkt wordt. 15 Wat niet wordt behandelt Door de scope van mijn onderzoek heb ik de volgende onderdelen buiten mijn scriptie gelaten: Multi-screening of device ecosystems Native apps Mirroring Hypothesis of Conway s law Toepassingen op andere devices dan smartphones

16 01 Welke afwegingen worden er gemaakt door bureau en opdrachtgever bij het ontwerpen en ontwikkelen van een mobiele experience? Afwegingen en argumenten om een content first project te doen Afwegingen en argumenten om een content first project te doen Intenties Deelvraag 1 Inzichten Deelvraag 2 & deelvraag 3 Implementatie Passepartout De hoofdvraag. Afwegingen en argumenten om een content first project te doen

Most importantly, responsive web design isn t intended to serve as a replacement for mobile web sites. -Ethan Marcotte 17 Om te weten welke afwegingen er worden gemaakt door zowel bureau als opdrachtgever is het goed eerst in kaart te brengen wie het bureau en opdrachtgever zijn. Wat doen ze? Waar staan ze voor? Dan wordt het team samengesteld bij het bureau en de opdrachtgever. Gaan we een scrum doen of is dat niet nodig. Kies de juiste mensen voor het project en stel het perfecte team samen. Waar moet je op letten? Dan de techniek. Wordt het een website? App? Huisstijl? Of een campagne. Omdat de case over mobiele websites gaat kan ik alvast verklappen dat we alleen naar de afweging tussen responsive en mobiele website gaan kijken.

Stakeholders Net als een normaal project begint een content first project bij de stakeholders. Hier volgt een kleine introductie over die welke rol vervult en welke keuzes ze maken. Opdrachtgever Bij Fabrique begint een project bij de opdrachtgever. Die komt met een een vraag of wilt gewoon even praten. Hier komt een probleem uit voort dat Fabrique kan oplossen. Eerst wordt er gekeken of bedrijf en bureau wel bij elkaar passen. Is er een klik dan kan er gewerkt gaan worden aan een vraag en een oplossing. Het kan ook zijn dat er gevraagd wordt om mee te doen met een pitch om een opdrachtgever binnen te halen. 18 Zodra de opdrachtgever binnen is wordt er gekeken naar wat hij wil. Er wordt meegedacht met het probleem en de beoogde oplossing. Misschien is de oplossing die de opdrachtgever wilt wel helemaal niet de oplossing die de gebruikers nodig hebben. Zo kwam 9292OV binnen met de opdracht Een nieuwe website, graag. Inzichten van de opdrachtgever over de gebruikers. Keuzes van het ontwerpbureau om het de gebruiker makkelijker te maken. De gebruikers Opdrachtgever Ontwerpbureau De ideale balans tussen alle 3 de verschillende Afwegingen tussen de inzichten. opdrachtgever en de klant. Bijvoorbeeld het soort project, tijd, mensen en stijl. Figuur 1.1: Relaties tussen de opdrachtgever (klant), de gebruikers (doelgroep) en het ontwerp bureau.

Fabrique heeft 9292OV overtuigd dat er eerst een merkbeleving neer moet worden gezet. Dit meedenken zorgt ervoor dat de opdrachtgever expert is maar wel altijd kritisch naar het product wordt gekeken. In content first is er een grote input van de opdrachtgever nodig om samen aan de content te werken. Meer hierover in hoofdstuk 2: de opdrachtgever. Gebruikers Als opdrachtgever koning is dan zijn de gebruikers minister-president. Uiteindelijk staat de gebruiker altijd centraal en zorgt er voor dat het bureau (en als het goed is ook de klant) keuzes maken in hun concept en ontwerp. De gebruikers zijn altijd onderdeel van het ontwerpproces van het bureau. In kleine testjes van een concept en ontwerp of een hele usability test van een vrijwel voltooide website. De gebruiker zal een site niet snel herkennen als content first ontworpen maar doordat de site content first ontworpen is zal de gebruiker als het goed is wel een hele duidelijke en doelgerichte site vinden. De gebruikerservaring is daardoor veel beter. 19 Figuur 1.2: Een concept testen op het station. Bureau De rol van het bureau is veruit het grootst in dit ontwerpproces. Hoewel ze graag de opdrachtgever en de gebruikers bij het proces betrekken behouden ze altijd de leiding en zijn altijd de expert. Fabrique, als een expert in scrum, werkt het liefst in sprints zo nauw mogelijk samen met de klant. Fabrique werkt met teams variërend van vier tot en met acht medewerkers met verschillende disciplines aan projecten. Er zijn naast visuele en interactie ontwerpers altijd een strateeg, art director en projectleiding aanwezig. Het bureau moet het meest aanpassen om content first te kunnen ontwerpen. Er moet een totaal andere manier van projecten aanpakken worden toegepast.

Het volgende hoofdstuk Nu het bekend is wie er mee werken aan het project is het tijd om te kiezen voor de mobiele ervaring. Wat is er mogelijk voor de mobiele gebruiker en hoe gaan we dat toepassen? Responsive of mobiele website Als je moet kiezen voor content first in een responsive of aparte mobiele website, waar zou je dan voor moeten kiezen? 20 Aparte mobiele website Volgens strategen Martijn van der Heijden (persoonlijke correspondentie) en Pieter Jongerius (Bijlage 2. Interview Pieter Jongerius, 00:24:30) is de losse mobiele website een goede aanpak om voor een ecommerce website, voor content gedreven (informatieve) websites is responsive een betere keuze. Als er voor een nieuwe ecommerce site een losse mobiele website wordt gekozen, dan is die keus vaak omdat een responsive site niet de specifieke mobiele conversies kan halen. Bij een ecommerce website van belang dat er omzet gegenereerd wordt. Als door een responsive aanpak hier een compromis in gesloten moet worden door de vormgeving van de desktop website kost dat omzet. De customer journey van een mobiele gebruiker is totaal anders dan die van de desktop gebruiker waardoor een responsive website (over het algemeen) niet wenselijk is. Volgens Pieter Jongerius (Bijlage: 2. Interview Pieter Jongerius, 00:27:50) geldt dit vooral voor de grote ecommerce websites. Kleinere webshops zijn wellicht beter af met een responsive site omdat een extra losse website meer geld en onderhoud kost. Het is veelal aan de opdrachtgever (en bureau) om de balans op te maken of het rendabel is om een mobiele website te nemen of een responsive. Daarom is zelfs een mobile first ontwerpmethode voor een responsive website nog steeds niet wenselijk, mobile- en desktop ecommerce zijn niet responsive aan elkaar te verbinden. Moet er een mobiele ervaring ontworpen worden voor een bestaande website, dan kan je of een losse mobiele site maken of een nieuwe volledig responsive website. Hiermee is er direct resultaat: de mobiele website is aanwezig en kan gebruikt worden. Met content first moet er bij een aparte mobiele site worden uitgekeken dat er geen mis-match ontstaat tussen de desktop en de mobiele site. Dit is door een CMS wat beide mediums synchroon houdt makkelijk op te lossen. Responsive Maar hiermee ben je niet voorbereid op het device wat morgen uit komt met een resolutie die het ontwerp niet ondersteunt. Een responsive website past zichzelf aan (aan de breedte) van de browser en kan daardoor met één website meerdere devices, van smartphone tot tablet, bedienen van content. Content is overal hetzelfde waardoor er geen mismatch kan ontstaan. Daarnaast als er links worden gedeeld vanaf mobiel dan zijn dat links die linken naar mobiele websites.

(Zo linkt http://m.fcupdate.nl/voetbalnieuws/255601/fc-groningen-europa-in-na-ruime-zege-opaz/ ook op de desktop naar de mobiele website). Een responsive site is daarnaast veel beter te optimaliseren en uit te breiden in de toekomst dan een mobiele website. Ook dit is omdat er maar één site is die aangepast moet worden en niet verschillende sites voor verschillende devices. Echter is het met een aparte mobiele website makkelijker om het aan te passen aan de gebruiker. Zo kan er worden gekeken naar internetsnelheid en sensoren (zoals de camera, NFC en Bluetooth) om de gebruikservaring te verbeteren. In een responsive website is het ook mogelijk om deze functies te gebruiken maar omdat de site voor elk device beschikbaar is, dus ook de devices waar deze functies niet van toepassing zijn, worden voor veel sites onnodige functies ingeladen. Al deze extra code en calls zijn niet bevorderlijk voor de performance van de website. De enige manier om dit tegen te gaan is goede code die afhankelijk van het device en de specificaties andere calls doet. Omdat dit een uitgebreider traject is dan een aparte mobiele website of een simpelere responsive website wordt hier vaak niet voor gekozen. 21 Content first voor een reponsive website betekend dat de teksten mee moeten kunnen schalen van mobiel naar desktop. De teksten kunnen zich net zo verhouden als op een aparte mobiele site (bijvoorbeeld kortere teksten op mobiel) maar hier hoeft niet met een speciaal synchroon CMS gewerkt te worden, er is maar één website om te onderhouden. Responsive maken Om van een bestaande site naar een responsive site over te stappen kan je de Awkward Tree van Brad Frost gebruiken. Deze techniek is onder andere bij de BBC ingezet om de nieuwe responsive site live te zetten (BBC, 2014). Echter is de awkward tree een methode die veel geld kost waardoor het alleen bij projecten ingezet kan worden waar geld geen (of een minder grote) rol speelt. De awkward tree is wel ideaal voor bedrijven als BBC of Coolblue waar de site in eigen beheer is waardoor er genoeg tijd en geld is om het project een langere tijd door te laten lopen. Stap 1 Het idee is dat de oude site blijft bestaan maar dat de nieuwe mobiele site die uiteindelijk over gaat nemen. De mobiele website is toegankelijk als losse mobiele website maar is responsive opgebouwd. Deze nieuwe site is gebouwd als mobiele website maar is eigenlijk al responsive. De responsive site groeit in functies, performance en ondersteunde resoluties. Stap 2 Ondertussen wordt de responsive mobiele website zo ver uitgewerkt dat die ook een desktop ervaring kan bieden. Langzamerhand neemt de responsive site de oude website over door steeds nieuwe gebruikers toegang te geven. Op deze manier is de overgang van oude site naar nieuwe site geleidelijk en voor weinigen een verrassing. Bovendien is de nieuwe site responsive en progressief opgebouwd met nieuwe technieken die wel klaar zijn voor de toekomst.

22 Figuur 1.4: Stap 1 van de Awkward Tree (Frost, 2012). Figuur 1.5: Stap 2 van de Awkward Tree (Frost, 2012).

Conclusie Welke afwegingen worden er gemaakt door bureau en opdrachtgever bij het ontwerpen en ontwikkelen van een mobiele experience? Zowel opdrachtgever als bureau maken keuzes om een aanpak te kiezen voor het ontwerpen en ontwikkelen van een mobiele experience. Echter is het het bureau wat als expert zijn (sterke) aanbeveling zal doen in het voordeel van een bepaalde mobiele aanpak. Het bureau doet deze aanbeveling op grond van twee onderdelen. Aan de ene kant zijn er de gebruikers redenen en aan de andere kant de economische redenen. Veelal is het een gevecht tussen deze twee redenen waar het bureau een middenweg in moet zien te vinden waar de opdrachtgever het mee eens is. Content Opvallend is dat het voor de content niet uit maakt of je een responsive of een aparte mobiele website heb, er van uit gaande dat je de zelfde content op de mobiele en desktop site wilt hebben. Als men andere content op de mobiele site wil dan de desktop of tablet site dan moet er in content first een nieuwe project worden gestart voor de mobiele site. Waardoor de kosten van het project weer hoger liggen. Als de content overal het zelfde is, wat aan te bevelen is, dan is het platform waarop de content bekenen wordt (responsive of aparte mobiele site) niet van belang. Echter is responsive aan te bevelen om een beter verloop in het project te hebben. Dan kan de content ontworpen worden en daarna gevuld worden in een device, om die vervolgens van mobile of tablet naar desktop om te zetten. 23 ecommerce Over het algemeen is het altijd een goed idee om voor een responsive website te kiezen in plaats van een mobiele website. Behalve in de ecommerce. Uit ervaring is gebleken dat aparte mobiele websites beter zijn voor de unieke customer journey van de mobiele gebruiker dan responsive ecommerce websites. Voor de overgang van oude site naar nieuwe responsive website kan er gekozen worden voor de aanpak van de awkward tree van Brad Frost. Deelconclusie Bureau en opdrachtgever moeten een gebalanceerde afweging maken tussen economische motieven en gebruiksvriendelijke motieven. Een betere gebruikerservaring (usability tests, ondersteunde devices, e.d.) kost geld en het is aan de opdrachtgever om die beslissing te maken. Voor content first maakt de beslissing tussen responsive en aparte mobiele website niet uit waardoor de beslissing volledig op budget (opdrachtgever) en gebruik (gebruiker) komt te liggen. Het bureau heeft hier een adviserende (doch dwingende) rol in.

02 Welke gevolgen heeft een content first benadering voor het ontwerpproces (van Fabrique)? 24 Afwegingen en argumenten om een content first project te doen Afwegingen en argumenten om een content first project te doen Intenties Deelvraag 1 Inzichten Deelvraag 2 & deelvraag 3 Implementatie Passepartout De hoofdvraag. Afwegingen en argumenten om een content first project te doen

Design in the absence of content is not design, it s decoration. -Jeffrey Zeldman 25 Om te beginnen met content first ontwerpen moet je eerst weten wat content is en wat de plek er van is in het ontwerpproces en wat content is. Er moet structuur en orde aan worden gebracht als je content ontwerpt, de content moet als het ware in balans zijn.

Stap 0: Content first Niet de advertenties, niet de mooie parallax scroll en ook niet het fantastische flat design. De bezoekers van je site komen voor het verhaal dat je wilt vertellen. Daarom zou je dat verhaal voorop moeten zetten in het ontwerp en daaromheen moet het verhaal ondersteunen. Vraag van alle onderdelen van de website af of het het verhaal ondersteunt. Zo niet, is het dan wel nodig? We zouden moeten beginnen met het ontwerpen van de content. Stel als eerste vast wat de content gaat worden en bouw daaromheen een ondersteunende interface en user experience. Om daarmee te beginnen moet je eerst weten wat de content gaat worden en wat de relatie (prioriteiten) is tussen de content. Wat is er belangrijk en wat is er minder belangrijk. 26 De content is niet alleen de tekst, afbeeldingen en andere inhoud van de pagina. Onder content versta ik het doel van de pagina (Figuur 2.1), waar de bezoeker voor komt. Hieronder valt ook de tone-of-voice. Het is belangrijk om onderscheid te maken tussen waar de gebruiker voor komt, en de content daarvan. Wat de gebruiker wil doen kan op verschillende manieren worden ingevuld door de ontwerper door middel van de content. Zo kan het zelfde probleem worden opgelost met andere content. Deze content vertelt het zelfde verhaal als de andere content maar is bijvoorbeeld een kortere titel of een andere afbeelding. Deze content moet allemaal wel gemaakt en ingevuld worden. In 2013 had volgens het CBS 45% van de internettende huishoudens een tablet (CBS, 2014). Het CBS meldt ook dat in 2013 er naast PC/Desktop, Laptop en Mobiele telefoon 61% andere apparatuur (CBS, 2014) toegang heeft tot internet. Er van uit gaande dat 45% tablet is houden we 16% over met andere apparaten die toegang hebben tot internet. Deze apparaten kunnen op je website komen maar dat zal er waarschijnlijk niet geweldig uit zien. Daarom gaan we bij content first niet uit van het device maar van de content. En laten we die overal hetzelfde zien. Hoe deze lagen opgebouwd worden lees je in Piramid of Mobile. Het volgende hoofdstuk De context waarin een site wordt gebruikt weten we niet. We weten niet wat situatie is van een bezoeker en we kunnen dat onmogelijk weten door aannames te doen aan de hand van het device. Daarom moet je elke bezoeker altijd alle informatie kunnen geven die hij of zij wil hebben van je website. Dat is het doel waar ze voor komen en dat is content first ontwerpen. Merlin Mann bedacht de Noise-to-Noise ratio (Mann, 2009) om te laten zien wat de verhouding was van de content tot de Noise er omheen. Omdat ik deze naamgeving niet echt heel handig vind (hij noemt de content ook noise) kies ik er voor om Brad Frost te volgen met deze quote uit zijn talk Death to Bullshit (2013): Do we want to be 90% of noise, or do we want to be the 10% of signal? -Brad Frost

Waarom moet ik op deze pagina zijn? = Doel van de pagina Wat de gebruiker wil doen Content 27 Media (Streaming) audio/video Afbeeldingen Downloads Teksten Bodytekst Titels Quotes Informeren Uiteenzetten Beschouwen Overtuigen Activeren Amuseren Figuur 2.1: Doel van de pagina.

Signal-to-Noise Ratio De Signal-to-Noise Ratio (SNR) is een bestaande maat voor de kwaliteit van een signaal waarin een verstorende ruis aanwezig is. Ook wij hebben te maken met een signaal en ruis. Het signaal is het doel wat wij willen overbrengen met een pagina naar de gebruiker. Bijvoorbeeld op een site als telegraaf.nl is dit het nieuwsbericht. De ruis is alles wat niet het signaal is of het signaal ondersteundt. Afbeeldingen en video s ondersteunen het signaal in verschillende mate. Het kan heel krachtig een verhaal ondersteunen met beelden en diepgang in de video met voorbeelden en interviews. 28 Het is echter niet zo zwart-wit als het lijkt, letterlijk. Het signaal is de boodschap maar de ruis doet meer dan alleen het signaal storen. De elementen in de ruis bestaan uit gebruikers gerichte en zakelijke of economische redenen. De zakelijke of economische elementen zijn bijvoorbeeld advertenties, de like/share-knoppen, cookie meldingen en berichten van partners. Het zijn elementen waar de gebruiker niet voor gekomen is en die (indirect) omzet genereren voor de website. Dat kan door externe partijen zijn of door langer aanwezig zijn op de website. De andere elementen zijn gericht op de gebruikers. Dit zijn bijvoorbeeld navigatie, gerelateerde nieuwsberichten, email-knop, like/share-knoppen (delen van kennis), inloggen, header, tags, volgende/vorige bericht, metadata en footer. Dit zijn elementen die de gebruiker helpen of ondersteunen in het gebruik. Het figuur 2.2 is een screenshot van telegraaf.nl waar in grijstinten aangegeven wat Signal (wit) en Noise (zwart/grijs) is. Wit is de content. De scheiding tussen noise en signal is grijs, dit zijn de elementen die gebruikers doelen en zakelijke of economische doelen dienen. De sociale deelknoppen zijn bijvoorbeeld fijn voor sommige gebruikers, maar ze breken wel het signaal van de foto naar de tekst. Zwart op het screenshot is noise. Dit is niet het signaal en dus niet waar mensen voor komen. Hieronder vallen bijvoorbeeld de advertenties maar niet de sitemap. De sitemap valt nog in het grijze gebied omdat het de navigatie ondersteunt. Een site als telegraaf.nl (figuur 2.2) is duidelijk niet in evenwicht. Om een betere ervaring te creëren moet de content meer in verhouding zijn met de andere elementen. Hier is het duidelijk dat er ongeveer vier keer zoveel noise als signal is. Om hier evenwicht in aan te brengen zijn er een aantal oplossingen te verzinnen. Zo kan de noise verminderd worden door elementen weg te laten, echter zal het vaak zo zijn dat de zakelijke of economische redenen niet zomaar weg gelaten kunnen worden omdat anders de omzet niet gehaald wordt. Bij telegraaf.nl is het daarom beter om het grijze gebied te verkleinen of in ieder geval minder opvallend te maken. Uit de analytics data kan blijken wat er wel en niet gebruikt wordt, wordt een element nooit gebruikt (zoals bijvoorbeeld de sitemap) dan kan deze weggelaten worden. Andere elementen kunnen worden verkleint of minder opvallend worden gemaakt. Zo zijn er gerelateerde artikelen, lees ook, meest gedeeld en een hele sidebar vol artikelen en onderwerpen. Een nieuwsbericht op nos.nl (figuur 2.3) heeft daardoor een veel betere Signal-to-noise ratio. Door de content en de ruis beter op elkaar af te stellen kan het balans tussen van de SNR gevonden worden.

29 Figuur 2.2 Signal en Noise op telegraaf.nl Figuur 2.3 Signal en Noise op nos.nl

De SNR is een theorie afhankelijk van zoveel variabelen dat dit ver buiten de scope van mijn afstudeeronderzoek valt. Om dit te onderzoeken en bewijzen zou ik van verschillende soorten websites screenshots moeten maken, waarna ik de screenshots indeel signal en noise. Signal en noise zijn dan weer primair, secundair en tertiair onder te verdelen. Deze relatieve verhoudingen zet ik in een small multiple. Daarna tel ik de absolute elementen op een pagina en deel die in onder zakelijke doelen, gebruikersdoelen en doelen die voor beide gelden (zoals Figuur 2.5). Dit breng ik daarna samen in verhouding tussen doel van de site en verhoudingen van de elementen op de pagina. Waarschijnlijk zal het zo zijn dat de verhouding tussen doel en inhoud van de pagina s dan bij slechte pagina s niet in evenwicht is (J. A. Schelling, persoonlijke communicatie, 29 april 2014). 30 Dan nog de vraag: wat is het evenwicht? Een site kan expres uit evenwicht zijn voor de gebruiker, om de zakelijke doelen beter te dienen. Hoe rekenen sites als medium.com of NOS.nl dat uit, aangezien die geen advertenties gebruiken maar hun geld op een andere manier krijgen. Omdat dit vragen zijn die ver buiten mijn onderzoek vallen heb ik besloten om hier niet verder op in te gaan dan dit. Het volgende hoofdstuk Al deze elementen die signal of noise veroorzaken hebben ten opzichte van elkaar allemaal een relatie. Bepaalde elementen horen bij elkaar en blijven bij elkaar horen. Terwijl andere elementen wellicht meer een relatie tot een positie hebben (zoals de zoekbalk of social media knoppen). In het volgende hoofdstuk wordt uitgelegd wat elementen zijn, hoe er relaties tussen elementen kunnen worden gemaakt en hoe ze kunnen worden toegepast.

Content relaties Voordat we de content aan elkaar laten relateren moeten we eerst weten wat de content gaat worden. Als voorbeeld neem ik even de productpagina van de mobiele website van Omoda (Figuur 2.4). Content elementen Stel dat we deze pagina moeten ontwerpen, dan beginnen we content first. Wat is de content die op deze pagina moet komen? Dit moeten de elementen op de pagina zijn waar mensen voor naar de pagina komen. Daarna de elementen waar men niet voor komt. Een bezoeker wil op deze pagina kunnen (primair): de schoen zien, waarschijnlijk uit verschillende kleuren en standpunten de prijs zien zien in elke maten de schoen beschikbaar is de schoen bestellen levertijd zien bezorgkosten zien garantie zien 31 Wat bezoekers ook nog zouden kunnen willen (secundair): schoen toevoegen aan favorieten delen op social media reviews schrijven/lezen klantenservice aanspreken verdere informatie over de schoen Ik heb expres aangegeven wat de gebruiker wil doen, niet wat hij daarvoor nodig heeft. Eerst bepaal je wat je gebruiker wil doen, daarna maak je een lijst met onderdelen die hij daarvoor nodig heeft. Bijvoorbeeld titels, prijs, Call To Actions (CTA), share buttons en een telefoonnummer (het liefst klikbaar). Content boven navigatie Misschien viel het op dat de navigatie ontbreekt in de lijst met elementen. Maar de navigatie is niet waar de bezoeker voor komt. De bezoeker wil wel navigeren maar dat is niet zijn hoofddoel van een website. Content over navigation is een term uit Luke Wroblewski zijn boek Mobile First (Wroblowski, 2010) waarmee hij aangeeft dat op mobile de content altijd belangrijker is dan de navigatie. Figuur 2.4: mobiele website Omoda: productpagina

Omoda doet dit goed door de navigatie maar een klein deel van het scherm te laten gebruiken, maar toch de hele navigatie laat zien. Een duidelijk voorbeeld van dit is de vergelijking tussen de sites van Vodafone en T-Mobile (Figuur 2.5). Vodafone begint haar mobiele site met een lijstweergave van het menu met daaronder pas de aanbieding van een nieuwe telefoon. T-Mobile begint direct met de aanbieding en verwerkt de navigatie in het hamburgermenu. Hierdoor is bij T-Mobile direct de aanbieding zichtbaar en bij Vodafone niet. Boven de fold moet er content beschikbaar zijn volgens Wroblewski, niet een navigatie. 32 Figuur 2.5: mobiele websites Vodafone en T-Mobile, het eerste wat je ziet op de pagina. Relaties Mark Boulton (Boulton, 2012) beschrijft in zijn blogpost A New Canon een set design principes die kunnen helpen met het ontwerpen van content. Als eerste is het nodig om relaties te leggen tussen je content en aan de hand van deze relaties prioriteiten en grids op te stellen. Boulton heeft het over de relaties tussen de onderdelen van de content, bijvoorbeeld een videoplayer, tekst, afbeeldingen en een advertentie. Deze elementen geef je een prioriteit en bind je aan andere elementen (relatie maken). Zo zijn bij Omoda de schoenmaten en prijs aan de afbeelding van de schoen gekoppeld. Door deze structuur op te zetten heb je een goed overzicht van wat er op de pagina moet komen.

Om aan deze content te komen kan je bijvoorbeeld met de opdrachtgever een content scrum doen (wordt in het hoofdstuk De Opdrachtgever behandeld). Doordat er relaties tussen content zijn bedacht is het nu mogelijk een grid te maken met daarin alle verschillende elementen. Hierin breng je een hiërarchie aan waardoor je de pagina kan indelen. Verschillende delen content horen bij elkaar en blijven bij elkaar op mobiel, tablet en desktop. Zie het voorbeeld in Figuur 2.7. De website van The Boston Globe heeft een duidelijke hiërarchie in haar content die op elk device hetzelfde blijft. Ook is er geen content die zomaar verdwijnt op een device, waardoor er overal dezelfde content getoond wordt (content parity). Implementatie Boulton legt de relatie tussen de verschillende onderdelen van de content maar legt geen relatie tussen de content en het device. Als er iemand met een 3G (of 4G)-verbinding werkt, wil die liever geen afbeeldingen van 1MB downloaden. Dit is een techniek in responsive design waar rekening mee kan worden gehouden voor een betere (snellere) ervaring op mobiel. Figuur 2.6: ios fragmentation (Apple, 2014) 33 We kunnen er echter vanuit gaan dat we niet weten welk device er gebruikt gaat worden. Het is wel uit te lezen maar de devices bijhouden is te moeilijk. Het is daarom veel makkelijker bij te houden wat voor resolutie of afmeting de browser heeft. In het rapport uit juli 2013 van Open Signal blijkt dat ze in het afgelopen jaar 11868 verschillende Android devices hebben gezien met daarop 8 versies van het besturingssysteem. Momenteel is Jelly Bean het grootste besturingssysteem op Android (versie 4.1-4.3) met 61,1%. Het meest recente besturingssysteem (versie 4.4) blijft achter met maar 5,3% (Google, 2014). Het huidige laatste OS (ios7) van Apple daarentegen staat op 87% (Apple, 2014). Met zoveel keus in (mobiele) devices weet je dus nooit op welke apparaat je bezoeker jouw content wilt zien. Het volgende hoofdstuk Nu alle content in elementen is opgedeeld is het tijd om deze elementen te verspreiden over verschillende devices en situaties. De content blijft het zelfde maar wordt per situatie anders toegepast. Daarvoor zijn de elementen nodig.

34 Figuur 2.7: bostonglobe.com van mobiel naar tablet naar desktop. (28/04/2014)

Maar wat als je de content zou zien als device? Als je er van uit gaat dat op elk device je content beschikbaar moet zijn zorg je altijd voor toegang naar je content. Hoe beter het device en internetverbinding is, hoe beter je de ervaring maakt die bezoekers beleven met jouw content. Deze stap van progressive enhancement wordt verder behandeld in het hoofdstuk Piramid of Mobile. Adaptive content Het aanpassen van de content op het device heet adaptive content. Je zorgt ervoor dat de content overal hetzelfde is maar zich aanpast in opmaak. Door bijvoorbeeld met de COPE-methode te werken (Create Once Publish Anywhere) zorg je er voor dat je overal dezelfde content heb en niet (per ongeluk) een mismatch krijgt. Stel dat je een mobiele versie van je website hebt en een desktop versie dan zorg je met adaptive content er voor dat de content overal gelijk is (content parity). Zie de website van de Boston Globe (Figuur 2.7) waarin elke titel, foto, tekst en link op de mobiele website hetzelfde is ten opzichte van de tablet en desktop versie. Het is echter niet zo dat je een andere content moet gebruiken op mobiel omdat er zogenaamd een mobiele gebruiker is. 35 Zoals benoemd in het subhoofdstuk Content relaties moet de content overal 100% hetzelfde zijn. Josh Clark beschrijft in zijn presentatie Seven Deadly Mobile Myths (Clark, 2012). Mobiele content is hetzelfde als desktop content want je weet nooit of iemand in de trein, op de fiets, of relaxed op de bank zit naar jouw site kijkt. Gebruik adaptive content om je content overal hetzelfde te houden. Dit is het argument van Karen McGrane (McGrane, 2012) uit haar boek Content Strategy for Mobile. Adaptive content is het schrijven van content in stukken in plaats van in één lap tekst. Door de titel, inleiding, tags, afbeeldingen, video s en misschien wel hoofdstukken als losse modules op te zetten kan er per device de juiste informatie worden ingeladen en kunnen worden hergebruikt. Zo kan als er geen WiFi-verbinding is maar een 3G-verbinding een video van lagere kwaliteit worden ingeladen (met optie tot volledige kwaliteit), Mogelijk zijn de tags minder opvallend onderaan het artikel gezet in plaats van er boven. Zo past (adapt) je content zich aan aan je device. Mobile is not lite, mobile is not less. -Josh Clark

Afbeeldingen Responsive images zijn afbeeldingen die zich aanpassen aan het device of schermformaat (wat ze dan eigenlijk adaptive maakt). Het voorbeeld in Figuur 2.8 laat zien hoe de foto van de hond (Sunny) van President Obama voor het Witte Huis zich aanpast aan het device door de foto te croppen. Zo blijft de boodschap van de foto intact blijft. Dit croppen en positioneren wordt art directing genoemd (responsiveimages.org, 2013). 36 Figuur 2.8: Afbeelding via: http://responsiveimages.org/ Modulariteit Het principe van herbruikbare modules maken is geen nieuw idee. Brad Frost noemt het Atomic Design Patterns (Frost, 2013) maar Christopher Alexander beschreef het idee van modulariteit al in 1977 in A Pattern Language. Nathan Curtis beschrijft in Modular Web Design 15 punten van modulair ontwerpen. De eerste zes punten zijn principes en technieken om het design op te delen in modules: 1. Define. Bepaal wat de modules zijn en wat ze doen. 2. Divide. Verdeel je pagina in bij elkaar passende blokken 3. Vary. Beschrijf hoe een module verandert in bepaalde omstandigheden. 4. Combine. Combineer modules om pagina s te maken. 5. Reuse. Hergebruik je modules in het verdere ontwerp. 6. Document. Definieer de manier waarop modules (her)gebruikt moeten worden.

Het grootste voordeel van modulaire websites is dat doordat er elementen kunnen worden hergebruikt een site een meer uniforme uitstraling krijgt en beter bij elkaar lijkt te horen. Bovendien hoeven niet alle elementen opnieuw te ontworpen worden waardoor er tijd (en dus geld) kan worden bespaard in zowel het development als design team. Een website rijk aan pagina s zal vaak verschillende onderdelen hergebruiken op verschillende pagina s. Het zou zonde zijn om deze iedere keer opnieuw te moeten bouwen en ontwerpen. Figuur 2.9 laat zien dat er met de zelfde modules er verschillende templates kunnen worden gemaakt voor één website. 37 Figuur 2.9: Afbeelding via: http://www.newfangled.com/the_way_you_design_web_content_is_about_to_change Het volgende hoofdstuk De content is vast gesteld, in balans (of juist niet) en ingedeeld in elementen en modules. Nu we content first hebben gezet moeten we door naar de manier waarop mensen de content gaan consumeren. Om verder te gaan met een content first project kan bijvoorbeeld mobile first worden gekozen.

Stap 1: device Als voorbeeld van het device wordt er gekozen voor Mobile first. Mobile first is de ontwerpfilosofie bedacht door Luke Wroblewski die zich richt op het beginnen van ontwerpen op het smartphone formaat in plaats van de desktop. Al in 2009 kwam Wroblewski met het idee voor mobile first en zette dit in 2011 uiteen in een boek. Mobile first gaat uit van het beginnen van ontwerpen voor je smartphone om dit later uit te breiden naar tablet of desktop ontwerpen. De beste reden om de telefoon serieus te nemen is de enorme groei van mobiel internetgebruik. In 2009 had nog geen 30 procent van de 12- tot 75-jarigen in Nederland mobiel internet, dit was in 2013 gestegen naar ruim 70 procent (CBS, 2014). 38 Situaties De hedendaagse gebruikers van smartphones zijn in vier verschillende types van interactie onder te brengen (Wroblewski, 2011): Lookup/Find (urgent info, local). Ik wil nu iets weten, vaak gebaseerd op mijn locatie. Explore/Play (bored, local). Ik heb tijd over en heb afleiding nodig. Check In/Status (repeat/micro-tasking). Er is iets wat constant verandert en mijn aandacht nodig heeft. Edit/Create (urgent change/micro-tasking). Ik moet iets afmaken wat niet uitgesteld kan worden. Wroblewski bundelt deze kenmerken uit de drie mobiele gedragskenmerken uit Josh Clark zijn boek Tapworthy (2010), micro-tasking, I m local en I m bored. En uit de kenmerken van Google over mobiele gebruikers, urgent now, repetitive now en bored now. Deze verschillende interacties maken duidelijk wat gebruikers in verschillende situaties met hun smartphone doen. Echter is dit niet een guideline om 100% je ontwerp op te baseren. Je kunt namelijk nooit weten in welke situatie je gebruiker zich bevindt als hij op jouw site komt. Door deze valse aannames te doen vindt er een slechte gebruikerservaring plaats op een mobiele site. Voorbeeld: mobiele website Op de website van indekeukenvanfloris.nl (Figuur 2.13) gaan ze er op de mobiele website van uit dat je wilt reserveren (micro-tasking) en wat over het unieke concept wilt weten (urgent info, bored). Ze vermelden echter niet de locatie en routebeschrijving naar het restaurant (local), een telefoonnummer of contactformulier voor vragen (urgent now) en openingstijden (urgent info, local). Bovendien heeft de desktop website een hoop informatie die mobiel niet te zien is zoals de leveranciers, Floris zelf, het volledige menu en het aangesloten Hotel en de wijnkelder.

Door de valse aanname dat men op de mobiele site alleen wil reserveren loopt Floris mogelijk klanten mis. Zo kan je in de trein, als je aan het oriënteren bent naar een restaurant, amper zien wat Floris zo uniek maakt, laat staan even bellen om vragen te stellen. Ontwerpen De ontwerpmethode van mobile first is een logische manier van ontwerpen die begint met ontwerpen voor de smartphone. Wroblewski stelt dat het ontwerp moet beginnen bij de smartphone met de belangrijkste reden omdat het je dwingt om te focussen op de content. Grote lappen tekst werken vaak niet op mobiel waardoor je to the point moet komen in je content. 39 Of zoals Patrick (senior interaction designer Fabrique) het tijdens het interview zei: Ontwerpen voor het formaat van een smartphone, en dat leidend laten zijn voor het ontwerp van de desktop. Het zou eigenlijk smartphone first moeten zijn. De viewport is een smalle kolom (Bijlage 2: interview Patrick Sanwikarja deel 1, 00:03:50). Figuur 2.10: Mobiele website indekeukenvanfloris.nl De verzamelde content, content strategie en content relaties worden toegepast op de enkele koloms view van de smartphone. Hiermee is de hiërarchie en het eerste grid voor mobile bedacht en kan er nu responsive worden ontworpen naar een tablet/desktop applicatie. Dit alles moet je doen in wireframes of simpele onopgemaakte structuur om ons niet af te laten leiden door de vormgeving. De teksten zijn de echte teksten die met de opdrachtgever bedacht of aangeleverd zijn. Omdat afbeeldingen bij te snijden zijn hoeven dit niet de echte afbeeldingen te zijn die later ook gebruikt gaan worden. When a team designs mobile first, the end result is an experience focused on the key tasks users want to accomplish without the extraneous detours and general interface debris that litter today s desktop-accessed Web sites. That s good user experience and good for business. -Luke Wroblewski (Wroblewski, 2011)

Tegenover de beperking van het schermformaat staan de mogelijkheden van de functies van een smartphone. Zo kan je de GPS en camera gebruiken om de gebruikerservaring te verbeteren. Mobile first ontwerpen is ontwerpen volgens progressive enhancement. De mobiele ontwerpen worden doorgezet naar tablet en desktop formaat waar er progressief om wordt gegaan met de content en interacties. 40 Responsive Om mobile first ontwerpen toe te passen in de praktijk is er een website nodig die zich aanpast aan het device. Deze responsive websites passen zich aan aan de breedte van het device waarop ze benaderd worden. Een echte responsive website zoals Ethan Marcotte dat beschrijft in zijn boek Responsive Web Design (2011) bestaat uit fluid layouts, flexible images en media queries. Dit houdt in dat Responsive Web Design zoals Marcotte dat beschrijft slechts een tool is om ergens toe te dienen. Responsive design is een ideale tool om een site aan te laten passen aan de breedte van een device, of beter, breedte van je browser. We gaan van klein naar groot, mobile first. Figuur 2.11: Graceful Degradation vs. Progressive Enhancement. Via http://bradfrostweb.com/blog/web/mobile-first-responsive-web-design/.

Progressive enhancement Progressive enhancement (Champeon, 2003) gaat om het bieden van de basis van je website en daar op verder te bouwen als je device dat toe laat. Figuur 2.12 laat dit zien met een M&M met een pinda kern. De pinda zelf is al een lekkere pinda. Maar met chocolade er bij is die nog lekkerder. Leg je daar ook nog eens een M&M korst overheen is de pinda de volledige ervaring. Zo werkt dat hetzelfde op het internet. Bij graceful degradation gebeurt het vaak dat de pinda, de chocolade en de korst samen één laag zijn. Als je allergisch bent voor chocolade mag je de hele M&M niet terwijl je wel zin had in een pinda. 41 Figuur 2.12: De lagen van Progressive Enhancement (A List Apart: Gustafson, 2012) Een goed voorbeeld is navigatie op mobiele websites zoals die van Mashable in Figuur 2.13. Vaak wordt er voor gekozen om een uitklapbare navigatie te gebruiken op de site om ruimte te sparen. Als de navigatie door middel van Javascript of jquery verborgen wordt, kan het zijn dat als Javascript niet inlaadt en je de totale navigatie kwijt bent. Figuur 2.13: Links navigatie zonder Javascript, het menu klapt hier niet uit. Rechts de uitgeklapte navigatie met Javascript aan. (Mashable.com, 2014)

Dit had voorkomen kunnen worden door de site zonder Javascript terug te laten vallen op een oplossing in CSS of zelfs in tekst. Zo laat de mobiele site van de NOS een volledig uitgeklapt menu zien en past NU.nl de site aan als er geen Javascript geladen kan worden (Figuur 2.14). 42 Figuur 2.14: Links navigatie zonder Javascript maar de site is nog te navigeren. Rechts als de site laadt met Javascript. (NU.nl, 2014) Er worden technieken als Javascript gebruikt die de gebruikerservaring van de gebruiker verbeteren. Als deze technieken niet gebruikt kunnen worden doet de site nog precies hetzelfde, alleen is de ervaring wellicht iets minder. De roltrap is daarom een goed voorbeeld van progressive enhancement. De roltrap is geheel afhankelijk van elektriciteit, maar ook zonder elektriciteit kan men de trap op komen. Adaptive Design Adaptive design komt van Aarson Gustafson die daar in 2011 het boek Adaptive Web Design: Crafting Rich Experiences with Progressive Enhancement over heeft geschreven. Gustafson stelt zelf dat adaptive design een synoniem is voor progressive enhancement, wat uit gaat van de best mogelijke site tonen voor je bezoeker. Adaptive design is daarom: het omarmen van de gebruiker zijn mogelijkheden en beperkingen, en daar je site op aanpassen. Als voorbeeld nemen we de smartphone, een van die beperkingen die wij omarmen is het schermformaat van de browser. Een responsive of mobiele site past zich aan (adapt) aan het device en geeft de beste oplossing. Mogelijkheden die we omarmen zijn functies als GPS, Bluetooth, WiFi, de camera en meer van dit soort functies die de gebruikerservaring kunnen verbeteren. An escalator can never break: it can only become stairs. You should never see an Escalator Temporarily Out Of Order sign, just Escalator Temporarily Stairs. Sorry for the convenience. -Mitch Hedberg

Piramid of Mobile De Piramid of Mobile van Brad Frost is een versimpelde versie van de piramide van Kristofer Layon (Figuur 2.15 en 2.16). Frost en Layon gebruiken hun piramide om aan te tonen in welke volgorde de prioriteiten van een mobiele site zouden moeten liggen. Zo kan je niet van niveau één naar niveau drie of vier zonder aan niveau twee te voldoen. Beide piramides zijn gebaseerd op de piramide van Maslow. 43 Figuur 2.15: Kristofer Layon: Piramid of Mobile (Layon, 2012) Figuur 2.16: Brad Frost: Piramid of Mobile (Frost, 2012) Frost gaat uit van vier niveaus; Acces, Interact, Perform en Enhance. In Acces gaat het vooral over het kunnen bereiken van de (mobiele) website. Interact gaat over alle interacties die de bezoekers op de pagina kunnen doen, van navigeren en scrollen tot tappen en swipen. Bijna zo belangrijk als Access is Perform, omdat het gaat om de snelheid van je website. Als laatste komt Enhance waarin er door middel van progressive enhancement een betere ervaring wordt gecreëerd. Ik ben het echter niet helemaal eens met Frost en Layon. Performance is denk ik veel belangrijker dan interacties en zou niet de laatste stap voor Enhance moeten zijn. In mijn Piramid of Mobile, gerangschikt op basis van importantie, heb ik Interact opgesplitst in Primaire- en Secundaire interacties en daar tussen Performance geplaatst (Figuur 2.17).

Toegang Het belangrijkste voor je website: hij moet bereikbaar zijn. Voor mobiel het liefst als responsive of aparte mobiele website zodat je gebruikers de beste ervaring kunnen krijgen. Het is al jaren belangrijk om website mobiel bereikbaar te maken omdat de mobiele markt nog steeds groeit. Zo had in 2013 91% van de Amerikanen een mobiele telefoon en gebruikte tweederde daarvan mobiel internet (pewinternet, 2013). In 2013 had ruim 70% van de 12- tot 75-jarigen in Nederland mobiel internet (CBS, 2014). Onder Toegang valt ook de tekstuele content van een website waarin de tekst en afbeeldingen onopgemaakt getoond worden (HTML zonder CSS). Op die manier kan zelfs het meest simpel mogelijke toestel je content pagina s bekijken en heeft dus toegang. 44 Primaire interacties Op een stilstaande pagina kan je erg weinig. Daarom heb je een aantal primaire interacties nodig om een site door te komen. Interacties als een basisnavigatie en scrollen vallen hier onder en ook de basic actions press en tap (Villamor, Willis & Wroblewski, 2010) moeten aanwezig zijn. Dit zorgt ervoor dat touch enabled devices een website kunnen navigeren. Maar het moet ook mogelijk zijn om met een trackball of keyboard door de site heen te komen. Performance Snelheid van de website is de eerste ervaring die de bezoeker van een website heeft, wat betekent dat voor een goede gebruikerservaring een website redelijk snel moet laden. Het is zelfs zo dat als een mobiele website niet binnen vijf seconde laadt 74% de website zal verlaten. 71% van de gebruikers verwacht dat een mobiele site net zo snel of sneller laadt dan op hun desktop (Compuware APM, 2011). Dit komt overeen met de voor deze scriptie uitgevoerde enquete (bijlage 1) waarin 77% van de ondervraagden aangaf dat een website op smartphone of tablet even snel als de desktop versie moet zijn. 8% vond dat de site sneller moest zijn dan de desktop versie. Toegang, Primaire Interacties en Performance zijn de drie minimale vereisten voor een (mobiele) website. Als één van deze onderdelen ontbreekt lijdt de gebruikers ervaring hieronder. Secundaire interacties Onder de secundaire interacties vallen niet zo zeer fysieke interacties zoals scrollen maar de uitgebreidere jquery powered events zoals slideshows, interface animaties en hamburgermenu s. Deze interacties verrijken de gebruikerservaring maar hebben daarvoor een device nodig wat de interacties ondersteunt. Het mag niet zo zijn dat als het device de interactie niet aan kan dat de website kapot gaat. Er moet terug gevallen kunnen worden op primaire interacties.

Verbeteren Layon noemt dit HTML5, Frost noemt het Enhance. In principe gaat verbeteren over het beter maken van de gebruikerservaring door middel van progressive enhancement. Door in te spelen op de kansen die high-end smartphones je geven kan je een betere ervaring creëren voor de gebruiker. GPS, NFC, een snellere processor en de camera kunnen gebruikt worden om het de gebruiker makkelijker te maken. Belangrijk is dat zonder deze functies de ervaring nog steeds goed is. De ervaring wordt alleen maar beter. 45 Verbeteren Secundaire interacties Performance Progressive enhancement Primaire interacties Toegang Figuur 2.17: Jos Bezemer: Piramid of Mobile (Bezemer, 2014)

Het volgende hoofdstuk Nu het bekend is hoe er voor de content en het device moet ontworpen worden, rest de vraag hoe dit in het ontwerpproces past. Als dit niet goed wordt toegepast in het proces kan het project alsnog verkeerd lopen. Toepassing in het ontwerpproces Fabrique werkt met de projectmethode scrum. Scrum komt voort uit de Agile-projectaanpak en is het tegenovergestelde van de traditionele manier van werken: waterfall. Beide projectaanpakken zijn te combineren met content first design maar scrum heeft duidelijk de voorkeur. 46 Waterfall Een Waterfall project wordt nog wel gedaan maar is de uitzondering. Sommige projecten zijn door hun scope niet geschikt voor scrum of de opdrachtgever wil het niet. Waterfall rust op een goede, strikte planning die het hele project moet worden aangehouden. Van tevoren wordt vastgesteld wat de live-datum gaat worden en wat er dan opgeleverd wordt. In detail wordt het product beschreven in vorm en functie. Opdrachtgevers vinden deze duidelijkheid vaak fijn met een strakke planning als deze zijn budgetten beter in te schatten. Dit is ook het nadeel van waterfall. Waterfall is zeer strak en mag niet buiten de planning lopen. Het grootste nadeel van waterfall is dat er geen stap terug gedaan kan worden. Aangezien het testen pas heel laat in het proces gebeurt is er geen tijd meer om terug te gaan naar het ontwerp en aanpassingen te doen. Waterfall gaat van discipline naar discipline. Tijdens dit proces ontdek je allemaal zaken die je niet had verwacht toen je de planning maakte. Hier loopt waterfall vast. Het is mogelijk om in waterfall content first te ontwerpen als alle content van te voren, aan het begin van de waterfall, beschikbaar is of beschikbaar gemaakt kan worden. Is de content al helemaal beschikbaar dan kan daar verder mee ontworpen worden. Moet deze nog gemaakt worden dan kan er in het project tijdens de analyse/definitie fase (discover fase, figuur 2.19) vast worden gesteld wat de redactie formats en sitemaps gaan worden aan de hand van de content (Bijlage 2: interview Pieter Jongerius 00:14:00). Daarna wordt toch, parallel aan het ontwerp, de rest van de content bedacht. Scrum In scrum is dat juist het tegenovergestelde. Er worden kleine sprints gedaan van twee tot vier weken waarin er een module of onderdeel van de website totaal wordt aangepakt. Van discover tot testen.

Er wordt gewerkt met een vaste tijdsperiode en een vast team aan een oplossing die steeds duidelijker wordt. In scrum maak je onderweg beslissingen. Fabrique en Pieter Jongerius geven (als scrum-experts) 3 voordelen voor opdrachtgevers: 1. Korte time to market. Doorlooptijden van de helft van waterfall. 2. Kwaliteit. Scrum zorgt voor meer overleg tussen stakeholders en personen onderling. 3. Leverzekerheid. Door scrumboards en backlogs is de voortgang en planning van een project goed bewaakt. In scrum is er genoeg tijd om terug te grijpen naar de ontwerpen als er uit gebruikerstests komt dat iets niet werkt. Bovendien is het vaak zo dat de opdrachtgever (minimaal één dag per week) mee doet in de scrum en aanwezig is voor feedback. Deze korte lijn met de opdrachtgever zorgt ervoor dat er later geen onverwachte aanpassingen moeten komen, want hij is er het hele proces bij geweest. 47 Er wordt in scrum veel meer verwacht van de opdrachtgever dan een waterfall project. Deze frequente input kan (of wil) niet elke opdrachtgever geven. Pay the price to control the dice. Door deze input en betrokkenheid is content first een ideale combinatie met scrum. De opdrachtgever heeft de content scrums mee gemaakt waarin er samen wordt gewerkt om content te creeëren en weet daarom hoe het is om met het bureau te werken. De scrums die bij het bureau worden gedaan waarin er samen met de klant aan (content en) ontwerpen wordt gewerkt zijn daarom al wat bekender. De opdrachtgever is als directe vertegenwoordiger van het nieuwe product de aangewezen persoon om content langs te laten gaan. Figuur 2.18: Voorbeeld van een Scrum weekplanning (McNeill, 2011)

Waterfall Discover Verkennen van de klant en de opdracht. Opzetten van project. Design Van wireframes tot final designs. Develop Coding & testing. 48 Test Testen, klant gaat akkoord & live. Scrum Test Discover Sprint #1 Test Discover Develop Design Sprint #2 Test Discover Develop Design Sprint #3 Figuur 2.19: Waterfall en scrum Develop Design

De opdrachtgever Bij Fabrique is de opdrachtgever altijd intensief betrokken bij het ontwerpproces. Nog meer dan bij scrum is de opdrachtgever essentieel bij content first ontwerpen. Het is belangrijk om de opdrachtgever net zo betrokken te laten zijn bij het project als in scrum om de band met het project te behouden. Om content de creëren is het in een content first project van belang om deze samen met de klant te maken (Bijlage 2: interview Martijn van der Heijden, 00:05:25) (Bijlage 2: interview Louise Roose, 00:11:06). Als er content wordt hergebruikt is de opdrachtgever minder intensief nodig dan als er nog geen content beschikbaar is. Sommige klanten zullen het eng vinden om hun content uit handen te geven aan het bureau, andere klanten zullen het juist fijn vinden dat ze hierin worden ondersteund. Maar alle klanten zullen het vervelend vinden dat er weer iets is waar ze geld aan moeten uitgeven (Bijlage 2: interview Pieter Jongerius, 00:15:50). Door deze intieme samenwerking met de klant maak je samen in korte tijd een globaal overzicht van de content van de nieuwe website. Deze samenwerking heet een content scrum. 49 Content scrum Geheim. Ik heb je wel door... If it shouldn t be on the mobile site, it shouldn t be on the desktop site either! -Karen McGrane

50 Ik heb je wel door... Geheim.

Ik heb je wel door... 51

Ik heb je wel door... 52 Ik heb je wel door...

Conclusie Welke gevolgen heeft een content first benadering voor het ontwerpproces (van Fabrique)? Content Content first is beginnen met het ontwerpen van de content van je site. De content is niet alleen tekst en afbeeldingen, maar content is de tone-of-voice het doel van de pagina waar de bezoeker voor komt. De content bestaat uit teksten en media en is de invulling van de ontwerper. Zo n pagina bestaat meestal niet alleen uit content. Er zijn veel randzaken waar de gebruiker de pagina niet voor bezoekt. Waar de content het signaal is zijn de randzaken de ruis. De verhouding hiertussen is de Singal-to-Noise ratio (SNR). De ruis (noise) bestaat niet alleen uit randzaken, de ruis bestaat uit ruis die voor de gebruiker werkt (b.v. navigatie) en ruis wat voor de economische of zakelijke redenen werkt (b.v. advertenties). De stelling is dat als een site uit balans is de gebruikerservaring minder goed is dan als de site wel in balans zou zijn. Daarnaast moet je je afvragen waarom een site niet in balans zou zijn, hoort dat bij de stijl, overleeft de site anders niet of is de site gewoon slecht ontworpen? Omdat SNR een enorm groot, interessant en uitgebreid onderwerp is kon ik door de scope van mijn onderzoek hier helaas niet verder op in gaan. 53 Zodra de content bedacht is en in balans is kan de content worden opgedeeld in elementen en modules. Deze worden op elke variant van de site gebruikt om een consistente ervaring te bieden aan de gebruiker. Naast visuele consistentie zorgt dit ook voor een website die in elke context dezelfde content aanbiedt. Het is ook mogelijk om niet de exacte content identiek op elk device te tonen, maar de boodschap wel (figuur 2.1). Hierdoor moeten er voor verschillende situaties (websites) variaties van content worden gemaakt. Bijvoorbeeld een lange titel, middellange en korte titel om bijvoorbeeld op de kleinste responsive versie alsnog een goede titel te tonen. User: Whilst I m waiting for my train I ll look at that engagement ring I saw on Tiffany and Co, last night. Website: Ah, you re on a mobile phone, you must want a map and directions to our nearest store. -Jim Ramsden

Zo kunnen de onderdelen uit figuur 2.24 op verschillende manieren worden getoond. Maar het zelfde probleem oplossen. De content blijft het zelfde probleem oplossen maar de uitvoering is anders. Mobile Ter illustratie over hoe een content first kan worden toegepast, laat ik content first over gaan in mobile first. Wroblewski praat over verschillende situaties van mobiele gebruikers; Lookup/Find, Explore/Play, Check In/Status en Edit/Create. Deze situaties helpen je te ontwerpen naar hoe de gebruiker bezig is met jouw ontwerp. 54 Houd er wel rekening mee dat gebruikers hun smartphone overal zullen gebruiken zoals ze zelf willen. Deze situaties dienen alleen als hulp om je ontwerp naast te leggen. Omdat ontwerpers geen grip hebben op wat gebruikers doen en waar ze zijn, is het beter daar niet voor te ontwerpen maar om gewoon de hele ervaring te bieden. De Piramid of Mobile is gebaseerd op de Piramide van Maslow. Van onder naar boven staat de piramide voor Toegang, Primaire interacties, Performance, Secundaire interacties en Verbeteren. Door middel van progressive enhanchement klim je op de piramide om een steeds betere ervaring te bieden. Door van beneden naar boven te ontwerpen zorg je voor een ontwerp met fallbacks als een device het niet aan kan. Op deze manier krijgen de bezoekers met het beste device de meest uitgebreide ervaring die past bij het uitgebreide device. De mensen met een simpeler device krijgen een simpelere (maar desalniettemin goede) ervaring. Het ontwerpproces Geheim. Ik heb je wel door...

Deelconclusie Het ontwerpproces voor content first is wel degelijk anders doordan die van een normaal project. Het vereist nog meer interactie met de klant en vooral in het begin van een project zullen er al keuzes gemaakt moeten worden over de doel van de site en pagina s en specifiek welke content daar moet komen zodat er naar ontworpen kan worden. Omdat scrum perfect aansluit bij content first zal het geen drastische stap zijn om content first te proberen als de opdrachtgever al bekend is met scrum. Er moet echter rekening mee gehouden worden dat content first voor de klant nieuw is en voor hun weer geld kost. Als de opdrachtgever de waarde hiervan niet inziet kost het hem vooral extra geld, iets dat de concurrent niet doet. 55 Figuur 2.24: Hou altijd rekening met wat de gebruiker wilt. (via https://xkcd.com/773/)

03 Wat zijn de verwachtingen van gebruikers van mobiele websites? 56 56 Afwegingen en argumenten om een content first project te doen Afwegingen en argumenten om een content first project te doen Intenties Deelvraag 1 Inzichten Deelvraag 2 & deelvraag 3 Implementatie Passepartout De hoofdvraag. Afwegingen en argumenten om een content first project te doen

Mobile users want to see our menu, hours, and delivery number. Desktop users definitely want this 1mb png of someone smiling at a salad. -Mat Marquis Om er achter te komen wat gebruikers verwachten van mobiele websites is er een enquête uitgezet en daar een analyse van gemaakt. Het blijk dat dat men mobiel internet een krappe voldoende geeft maar toch gebruikt meer dan de helft zijn of haar smartphone als alternatief voor de computer. Daarom stel ik eerst de vraag: waarom mobiele websites? 57

Waarom mobiele websites Het aantal personen met mobiel internet (internet op een tablet of smartphone) is de afgelopen jaren enorm gegroeid. In 2009 had minder dan 30% van de huishoudens in Nederland een internet op hun smartphone. In 2013 was dit bijna 70%. Bovendien schoot het internetgebruik op tablet in 2013 omhoog naar 45%. Het is opvallend dat in de tussentijd het aantal computers minder dan 15% af nam en het aantal laptops zelfs groter werd (figuur 3.1). 58 58 Figuur 3.1: Gebruik laptop, smartphone, tablet en desktop in Nederlandse huishoudens met internet (CBS, 2013). De smartphones zijn zo ingeburgerd in Nederland dat het woord sinds 2012 in de Dikke Van Dale staat. Luke Wroblewski geeft in zijn boek Mobile First (Wroblewski, 2011) en tijdens zijn presentaties over Mobile talloze redenen om aan te tonen dat mobile belangrijk is, populair is, een speciale aanpak behoeft en niet zomaar weer zal verdwijnen. Om niet Luke zijn argumenten te herhalen waarom mobile belangrijk is, zal er alleen worden herhaald waarom Mobile First ontwerpen belangrijk is. Het forceert je namelijk om te focussen op de content. Waarom responsive Responsive design zijn drie front-end layout technieken samengevoegd door Ethan Marcotte onder één naam. Dit zijn: 1. Een flexibel, grid-based layout, 2. Flexibele afbeeldingen en media 3. Media queries.

Het zorgt er voor dat de website zich aanpast aan de viewport (of canvas) van de browser. De belangrijkste reden hiervoor is omdat er zoveel verschillende devices zijn die op het internet kunnen dat het onmogelijk is om voor elke afmeting een aparte site te maken. Daarom maken we sites die zich aanpassen aan het device, in plaats van andersom. In hoofdstuk twee is uitgelegd wanneer een aparte mobiele en wanneer er voor een responsive website kan worden gekozen. Onthoud wel dat het de gebruiker niets uit maakt waarom je site niet werkt zoals hij wil. Hij gebruikt de site waar hij wilt en wanneer hij wilt. Of dat nou op zijn smartphone, tablet of desktop is. Op een responsive of aparte mobiele website. Dat maakt de gebruiker niets uit. Zolang hij maar kan doen wat hij wil. 59 Figuur 3.2: Responsive ontwerp van staatsloterij.nl

Hoge verwachtingen Lage resultaten De enquête (bijlage 1) is door 61 mensen ingevuld die op mijn tweets en facebook-post hebben gereageerd. Een deel hiervan zijn daardoor medestudenten. Van degenen die hem in hebben gevuld is 64% man en 36% vrouw. De grootste leeftijdsgroep is 18-28 jaar (80%), 38-48 jaar is met 10% de tweede groep. Uit het onderzoek is gebleken dat de meeste mensen op hun telefoon snel even wat willen opzoeken (36%) of doorgestuurd worden vanuit een andere app (25%). 60 60 De locatie waar iemand hun smartphone of tablet gebruikt, is op de bank (26%), in het openbaar vervoer (23%) of in bed (22%). Over het algemeen zijn mensen dus in een rustige omgeving waar ze alle tijd hebben om goed op te letten wat er op het scherm gebeurd. Dit bewijst (zoals al bewezen is in Google s Mobile Planet onderzoek, Figuur 2.4) dat er geen mobiele context bestaat waarin gebruikers geen tijd hebben voor je. Waarom men de desktop gebruikt is meestal omdat dit sneller werkt en beter is om dingen tegelijk te doen. Ook grote acties zoals solliciteren, tekstverwerken en belastingaangifte worden liever op de vertrouwde desktop gedaan (enquête). Over het algemeen geven de respondentent gemiddeld het browsen op de mobiele telefoon een 6,35 (zie figuur 3.3). Dingen die ik regelmatig bezoek heb ik een app van. Het zijn juist de websites die ik niet vaak bezoek maar even snel op wil zoeken die ik op mn mobile devices bezoek via de browser. -Onbekend (Enquête) Dat mensen snel wat opzoeken via een zoekmachine komt overeen met een onderzoek van Google (Mobile Planet). Dit onderzoek houdt per jaar statistieken bij over smartphonegebruik. Hieruit blijkt dat in 2013 41% van de smartphone gebruikers een zoekmachine gebruikt. En toch gebruikt 91% dagelijks mobiel internet. Volgens Google (in 2013) is de locatie van gebruik van mobiel internet vooral thuis (96.8%). Op de tweede plaats staat onderweg (85%) en als derde tijdens werk (80.3%).

% ondervraagde 30% Gemiddeld cijfer: 6,35 25% 20% 15% 10% 5% 0 6 7 8 4 5 3 1 9 Figuur 3.3: Data onderzoek enquête. 10 Cijfer 61 Figuur 3.4: Google Out Mobile Planet: Location of Usage (ever used), Netherlands, Smartphones.