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

f#ck mobile 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 Deze onderdelen zijnwel 1 op door.... 1 wel te zien.

1

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 Auteur Jos Bezemer Naam www.josbezemer.nl Website [email protected] E-mail 0819265 Studentnummer Scriptie f#ck mobile Titel Design content first and device second. Ondertitel 18.670 Aantal woorden Opleiding Hogeschool Rotterdam Naam CMI Instituut Communication & Multimedia Design Opleiding Interface & User Experience Design Minor 17 februari t/m 27 augustus 2014 Afstudeerperiode Jasper Schelling Afstudeervoorzitter [email protected] e-mail Raul Martinez Orozco Afstudeerdocent [email protected] e-mail Bedrijf Fabrique [merken, design & interactie] Naam Dynamohal Adres Professor Snijdersstraat 5 2628 RA Delft 015-2195600 Telefoonnummer www.fabrique.nl Website Wouter Middendorf Begeleider e-mail [email protected]

3

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. Vier jaar zijn om gevlogen, waarvan het laatste jaar het snelst ging. In een succesvolle en bovenal 4

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. 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.

7

Inhoudsopgave Inleiding H1 Welke afwegingen worden er gemaakt door bureau en opdrachtgever bij het ontwerpen en ontwikkelen van een mobiele web experience?

16

Stakeholders

18

Responsive of mobiele website

20

Conclusie

23

H2 Welke gevolgen heeft een content first benadering voor het ontwerpproces (van Fabrique)? 8

10

Stap 0: Content first

24 26

Signal-to-Noise ratio

28

Content relaties

31

Adaptive content

35

Stap 1: device

38

Situaties

38

Ontwerpen

39

Progressive enhancement

41

Piramid of Mobile

43

Toepassing in het ontwerpproces De opdrachtgever Conclusie

H3 Wat zijn verwachtingen van gebruikers bij mobiele websites?

46 49 53

56

Waarom mobiele websites

58

Hoge verwachtingen, lage resultaten

60

Conclusie

62

H4 Ontwerpmodel

64

Criteria en Principes

68

H5 Interactief product

70

Motivatie

72

Passepartout

73

Voor wie

74

Passepartout

75

Persona’s & Scenario’s

79

Prototype

82

H6 Conclusie & Aanbeveling

86

Conclusie

87

Aanbevelingen

90

92

H7 Bibliografie 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. 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.

11

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. 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). 12

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.


Intenties

Deelvraag 1

Inzichten

Implementatie Passepartout

Deelvraag 2 & deelvraag 3


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. 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

15

01

16

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


Intenties Deelvraag 1

Inzichten

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. Zodra de opdrachtgever ‘binnen’ is wordt er gekeken naar wat hij wil. Er wordt meegedacht met 18

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.’

Keuzes van het ontwerpbureau om het de gebruiker makkelijker te maken.

Inzichten van de opdrachtgever over de gebruikers.

De gebruikers

Opdrachtgever

Ontwerpbureau

Afwegingen tussen de opdrachtgever en de klant. Bijvoorbeeld het soort project, tijd, mensen en stijl.

De ideale balans tussen alle 3 de verschillende inzichten.

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.

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.

19

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? 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 20

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. 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.

21

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. 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.

23

02

Welke gevolgen heeft een content first benadering voor het ontwerpproces (van Fabrique)? 24




Inzichten

Implementatie


Passepartout


“

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. 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 26

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 27

Content Media

Teksten

(Streaming) audio/video

Bodytekst

Afbeeldingen

Quotes

Titels

Downloads 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. 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 28

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). 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 30

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

31

• de schoen bestellen • levertijd zien • bezorgkosten zien • garantie zien 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

33

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

Figuur 2.6: iOS fragmentation (Apple, 2014)

afbeeldingen van 1MB downloaden. Dit is een techniek in responsive design waar rekening mee kan worden gehouden voor een betere (snellere) ervaring op mobiel. 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.

35

Het is echter niet zo dat je een andere content moet gebruiken op mobiel omdat er zogenaamd een ‘mobiele gebruiker’ is. 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).

Situaties De hedendaagse gebruikers van smartphones zijn in vier verschillende types van interactie onder te brengen (Wroblewski, 2011): 38

• 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

Figuur 2.10: Mobiele website indekeukenvanfloris.nl

Patrick Sanwikarja deel 1, 00:03:50). 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. 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 40

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. Primaire interacties 44

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.

Verbeteren Secundaire interacties

Performance Primaire interacties Toegang Figuur 2.17: Jos Bezemer: Piramid of Mobile (Bezemer, 2014)

Progressive enhancement

45

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. 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, 46

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.

Test

48

Testen, klant gaat akkoord & live.

Scrum

Test

Discover

Sprint #1 Test

Develop

Design

Discover

Sprint #2 Test

Develop

Figuur 2.19: Waterfall en scrum

Design

Discover

Sprint #3

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). 49

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. 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.

51



52


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. 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

53

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. 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 54

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.


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




Inzichten

Implementatie


Passepartout


“

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%). 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 60 60

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

Gemiddeld cijfer: 6,35

30%

25%

20%

15%

10%

5%

0

6

7

8

4

5

3

1

9

10

Cijfer

Figuur 3.3: Data onderzoek enquête.

Figuur 3.4: Google Out Mobile Planet: Location of Usage (ever used), Netherlands, Smartphones.

61

Conclusie Wat zijn de verwachtingen van gebruikers van mobiele websites? De onderzochte smartphonegebruiker heeft vrij hoge verwachtingen van zijn mobiele browse ervaring. Helaas wordt er aan die verwachting meestal niet voldaan, vandaar dat men mobiel internetten gemiddeld een rapportcijfer geeft van 6,35. Waarom mobiele websites? De enorme groei de afgelopen jaren in mobiele devices met internet zorgde ervoor dat mobiele websites niet weg te denken zijn. Een responsive ontwerp is hier in de meeste situaties de beste oplossing. Onderzoek Websites moeten snel worden geladen en de ervaring op de smartphone moet gelijk zijn aan die van de desktop. Er wordt verwacht dat er op de smartphone hetzelfde kan als op de desktop. De smartphone is in de meeste gevallen het alternatief voor de desktop, en de smartphone is het apparaat wat het vaakst en in de meest diverse situaties wordt gebruikt. 62 62

Het is van belang om een site te maken die op desktop, smartphone en tablet dezelfde content en ervaring biedt. Het antwoord op Wat zijn de verwachtingen van gebruikers van mobiele websites? is dat de gebruiker verwacht de site te kunnen gebruiken zonder dat hij beperkt wordt in wat voor manier dan ook. Deelconclusie Deze data is de bevestiging dat men de smartphone als primair alternatief gebruikt voor de PC om te browsen en daarom dus zeer serieus genomen moet worden. De intentie is er vanuit de gebruikers maar de ondersteuning van de websites is nog niet op het zelfde niveau. Er wordt meer verwacht dan dat er aanwezig is, een gat waar wij in moeten springen.

85%

55%

Vindt dat een website op

Gebruikt zijn of haar telefoon als

smartphone of tablet even snel of

alternatief voor de desktop. 38%

sneller (!) moet worden geladen

gebruikt daar een tablet voor.

als op een desktop.

63

36%

31%

Bezoekt websites op zijn of haar

Van de ondervraagden gebruikt

mobiel of tablet om snel even wat

een iPad. De iPhone en android

op te zoeken. 25% gebruikt de

telefoon completeren de top 3.

smartphone of tablet vooral omdat het makkelijker is dan de desktop op te moeten starten.

Figuur 3.5: Data onderzoek enquête.

04 Ontwerpmodel

64

65

Content first design Hypothese

Huidige situatie

Ik verwacht dat het alleen mogelijk is om content first te ontwerpen wanneer alle randvoorwaarden van een project bekend zijn.

Ontwerpen worden “verkeerd om” gemaakt. De focus ligt op het device en de (onbekende) context.

Tool

Ontwerpen met als eerste het device waarop het wordt bekeken in het hoofd.

Passepartout is een toolkit voor strategen en projectleiders van Fabrique waarmee ze kunnen uitvinden of ze content first moeten (kunnen) toepassen in hun project.

Er wordt mobile first ontworpen maar het is niet bekend waar en wanneer gebruikers hun mobiel gebruiken. Content voor mobiel is nu nog anders dan die voor tablet en desktop. Omdat mensen “mobiel zijn”.

Intenties

Wat voor mobiele website?

66

Stakeholders Belangen van de stakeholders Invloed van de gebruiker

Van links naar rechts gaat het model van de huidige situatie naar de gewenste (toekomstige) situatie. Om daar te komen wordt het prototype gebruikt. Het prototype is een tool die op drie niveau’s (Intenties, Inzichten en Implementatie) de strategen van Fabrique aanspreekt. Elk niveau bestaat uit verschillende onderwerpen. Deze onderwerpen zijn de vraagstukken waaruit de tool en de flowchart zijn gemaakt. Hypothese Ik verwacht dat het alleen mogelijk is om content first te ontwerpen wanneer alle randvoorwaarden van een project bekend zijn. Er zullen situaties zijn waarin de klant of het bureau niet de mogelijkheden heeft om content first te kunnen ontwerpen. Intenties Wat er van tevoren voor een project wordt afgesproken. Dit is in de tool ondergebracht in argumenten wanneer er wel of niet bepaalde keuzes gemaakt moeten worden. Bijvoorbeeld een responsive, mobiele of geen mobiele website (hoofdstuk 1).

in een ontwerpbureau Er zullen situaties zijn waarin de klant of het bureau niet de mogelijkheden heeft om content first te kunnen ontwerpen.

Gewenste situatie Doel en inhoud van de pagina’s is van te voren bekend waardoor er doelgericht kan worden ontworpen. Voordat er voor het device wordt ontworpen (mobile first) wordt eerst de content en het doel ontworpen. Om daarna dit op elk device toe te passen. Content is op elk device exact hetzelfde waardoor er overal de zelfde ervaring wordt geboden. Elke pagina heeft een duidelijk doel en communiceerd dit via de content.

Inzichten

Implementatie

Ontwerpproces bureau

Waarom content first

Plaats van de content

Gebruikers van Passepartout

Signal-to-noise ratio Relaties

Invloed op ontwerpproces

Scrum/waterfall Waarom mobiel? Verwachtingen van mobiel

Inzichten De inzichten die opgedaan worden tijdens de oriëntatie leiden tot vragen. Bijvoorbeeld of er wel content first ontworpen moet worden en wat de gevolgen daar dan van zijn. Wat is er nodig van de klant en wat verwacht de gebruiker van zijn product (hoofdstuk 2 en 3)? Implementatie Hoe de daadwerkelijke toepassing is in de site. Van ontwerp tot code. Waar moet je op letten? Wat moet je niet vergeten? Wie heeft dat nog meer gedaan (hoofdstuk 5)?

67

Criteria & Principes Assistent De tool moet strategen en project managers van Fabrique ondersteunen in het content first ontwerpen. Daarom worden er geen directe antwoorden gegeven maar worden er vragen gesteld en tips gegeven die zelf geïnterpreteerd kunnen worden. Hierdoor is er ruimte om eigen invulling te geven binnen het project. Er wordt een voorzet gegeven die nog ingekopt moet worden. Actueel Omdat er geen directe oplossing maar een voorzet tot een oplossing wordt gegeven is de tool veel langer actueel en hoeft daarom minder onderhouden te worden. Kennis delen Doordat er kennis kan worden toegevoegd aan de tool wordt de aanwezige kennis niet bij een individu gehouden maar wordt het gedeeld met iedereen. En dat op een duidelijk platform met een focus op kennis delen en toepassen. Het zou kunnen om de tool niet alleen intern te gebruiken maar open te maken voor de rest van de wereld.

68

Moeiteloos Het moet snel en makkelijk zijn om informatie op te zoeken. Hiervoor zijn overzichtelijke en directe pagina’s nodig die zorgeloos hun informatie door kunnen spelen. Multidiciplinair Ondanks dat de tool bedoelt is voor strategen en interactie ontwerpers moet de tool ook te gebruiken zijn in andere disciplines.

Noodzaak Door Passepartout te gebruiken weten de strategen en projectleiders meteen of een project content first aangepakt kan worden, of dat ze dat beter niet kunnen doen. Bovendien bied het een overzicht voor de ontwerpers waardoor de focus op de content van de website (het doel) altijd in zicht blijft. Hierdoor blijft het hele team gefocust op de content waardoor de toepassing van content first, en de pluspunten daarvan gewaarborgd blijven.

69

05 Interactief product



Intenties

70

Deelvraag 1

Inzichten

Implementatie


Passepartout


“

We shape our tools and thereafter our tools shape us. -Marshall Mcluhan

71

Motivatie De keuze voor een tool voor Fabrique was een makkelijke keuze al was het niet de eerste insteek van het afstuderen. In het begin zou dit een mobile first aanpak voor staatsloterij.nl gaan worden maar na mijn eerste onderzoeken kwam ik er achter dat dat niet genoeg zou zijn voor mij en Fabrique. Mobile first is al breed geaccepteerd en redelijk uitontwikkeld. Bovendien kwam tijdens het interview met Patrick en de gesprekken met Wouter ter sprake dat content first een veel interessantere aanpak is. Het is het een tool voor Fabrique geworden omdat er dan nog iets mee gedaan kan worden nadat het onderzoek afgerond is. Een tool die Fabrique helpt met content first ontwerpen en ook mij om content first ontwerpen te begrijpen. Het is daarnaast zeer relevant en actueel voor het beroepsveld. In het eerste oriënterende gesprek met Wouter was de opdracht: wat is het beste medium voor de staatsloterij om met de opdrachtgever te communiceren via hun smartphone? Daar begonnen we met een mobile only gedachte en lieten we de desktop achterwege. Het concept van ‘website’ werd losgelaten. Na dit zweverige concept werd bewust een keuze gemaakt voor een mobile first aanpak en later dus een content first aanpak omdat dat zegt dat er onafhankelijk van het medium overal een identieke boodschap moet worden overgebracht. 72

Passepartout Passepartout is een tool voor strategen (en projectleiders) van Fabrique waarmee ze kunnen uitvinden of ze content first moeten (kunnen) toepassen in hun project. Passepartout betekend; • een lijst om het ingelijste werk beter tot zijn recht te laten komen, • Frans voor een hoofdsleutel, sleutel-voor-alles of loper en • een character in Jules Verne’s Around the World in Eighty Days waarin hij de assistent is van avonturier Phileas Fogg. Maar het betekend bovendien een toegangskaart voor alle evenementen op bijvoorbeeld een festival of congres. Een passepartout geeft toegang tot alle informatie bij een evenement. Net zo geeft de Passepartout de strategen en project managers van Fabrique toegang tot alle informatie geeft over content first ontwerpen. Oviergens wordt het character ‘Passepartout’ in de film Around the World in 80 Days (2004) gespeeld door Jackie Chan.

73

Figuur 5.1: Passepartout en Phileas Fogg (Jackie Chan en Steve Coogan). Around the World in 80 Days (2004).

Voor wie De tool is bedoeld voor de strategen en (project managers) van Fabrique. De keuze voor de strategen was voor mij een lastige keuze. De eerste doelgroep, de interactie ontwerpers, zijn veel bekender voor mij dan de strategen. Echter zijn het de strategen en project managers die het eerste contact met de opdrachtgever maakt en die begeleid. Omdat content first een ontwerpmethode is die nog in ontwikkeling is zal daar veel over moeten worden nagedacht worden en op worden gereflecteerd. Dit is wat de strategen beter kunnen invullen dan interactie ontwerpers. Als content first ontwerpen naast het Cone Model (figuur 5.2) (van Erp, 2011) wordt gelegd is het duidelijk dat content first in de lagen van conceptualist en strategist zit: beiden een laag boven de designer. In deze lagen wordt er in de beginfase van het project veel nagedacht over hoe het project ingevuld gaat worden. Juist in deze fase wordt de beslissing voor content first gemaakt.

74

Dreams

Strategist

2

Direction

Conceptualist

3

4

Denken

Entrepreneur

1

Interaction

Designer Design Dicipline

Design

Figuur 5.2: The Cone Model (van Erp, 2011)

Doen

Passepartout Passepartout versie 0.1 en 0.2 hielpen de interactie ontwerpers van Fabrique met het content first ontwerpen (bijlage 4: Passepartout v0.1). Na de groenlicht presentatie bleek het dat ik mij beter kon richten op de laag daarboven, de strategen (en projectmanagers) (figuur 5.2). Tijdens de interviews met strategen Martijn, Pieter en Louise heb ik gevraagd wat hun standpunt daarin is. Ze gaven aan dat dit inderdaad het juiste niveau is en dat ze geloven dat de strategen juist de goede mensen zijn om Passepartout (hoofdzakelijk) te laten gebruiken. Na aanleiding van deze gesprekken kwam versie 0.3 van Passepartout. Passepartout is nu een ‘handleiding‘ voor de strategen en projectmanagers om uit te zoeken of ze überhaupt content first moeten (kunnen) uitvoeren in hun project. Het voordeel van deze (simpelere) aanpak is dat het totaal content first gefocust is. Martijn van der Heijden (strateeg bij Fabrique) kwam met de suggestie om een flowchart op te zetten van keuzes die gemaakt moeten worden om content first te gaan ontwerpen. Deze flowchart (figuur 5.3, bijlage 11) heb ik toegepast als een leidraad waar “bovenop” Passepartout ligt. Hierin staan de vragen en het pad wat de gebruiker bewandeld om aan zijn antwoord te komen. Deze manier van werken (ook content first) zorgde voor een duidelijk doel per pagina en voor een overzicht waar het ontwerp naar toe ging. Deze laatste versie is de uiteindelijke versie van Passepartout, versie 1.0. Uiteindelijk zorgt Passepartout voor een samenvatting van de ingevulde gegevens. Deze samenvatting wordt aanbevolen te printen in A3 formaat en op te hangen in de scrumruimte. Door deze ‘samenvatting’ van het project op te hangen worden de ontwerpers er constant aan herinnerd wat de doelen en uitgangspunten van het project zijn. Zoals gestelt in Make Space: How to Set the Stage for Creative Collaboration door Scott Doorley en Scott Witthoft (2012) is het belangrijk om losse ideeën tastbaar te maken en om je tools zichtbaar te laten in de ontwerpruimte. De ruimte is de scrumroom en de tools en ideeën zijn de samenvatting van Passepartout. Passepartout zorgt er voor dat de ideeën tastbaar worden gemaakt en omgezet naar tools voor de designers. Hierdoor blijven ze zichtbaar en blijft het doel van de content (en website) altijd zichtbaar gedurende het proces. Passepartout vereist een login die gekoppeld is aan de Fabrique gebruikersnaam en wachtwoord. Hierdoor kan een persoon meerdere projecten invullen of project later afmaken en bijwerken.In mijn ontwerpen heb ik niet meegenomen dat Passepartout ook een CMS heeft. In dit CMS zijn vragen toe te voegen en aan te passen om het systeem up-to-date te houden.

75

Een betere versie is te vinden in bijlage 11

Geheim.


Ik heb je w

76

Ik heb je we

Figuur 5.3: Flowchart Passepartout

Draai je hoofd even. Dat leest makkelijker.


wel door....

77

el door....


Geheim.

Ik heb je wel door.... 78

Persona’s & Scenario’s Persona 1 Naam: Stefan van Boven Leeftijd:

38

Woonplaats: Rotterdam Beroep:

Strateeg - Fabrique Delft

Hobby’s:

Voetbalt in een vriendenteam en maakt graag foto’s van wolken.

“

Kill your darlings. -Stefan van Boven

Doelen:

Vooruit gaan. Stilstand is achteruitgang. Stefan vind het totaal niet erg meer of langer te werken voor een beter eindresultaat maar wil wel weten waar hij voor werkt. Hij is graag betrokken bij het project en wil zoveel mogelijk mee krijgen. Zijn motto is “Kill your darlings“. Staar je niet dood op een oplossing waarvan jij denkt dat het de beste is maar durf breder te kijken.

79

Pijnpunten: Is een doener en geen denker. Hierdoor sprint Stefan nog wel eens te snel een project in zonder na te denken over wat hij gaat doen. Dat doet die wel tegelijkertijd. Persona 2 Naam: Anouk de Lange Leeftijd: 35 Woont: Amsterdam Beroep: Siteowner ecp.nl Hobby’s: Amateurschrijfster en hockeyfan. Doelen: Wil de website verbeteren en daarmee mensen beter informeren. Ze vindt het

“

Het enige wat onze doelgroep nodig heeft is een duwtje in de juiste richting. We moeten focussen op wat er belangrijk is! -Anouk de Lange

belangrijk om mensen up-to-date te houden en te helpen om online te zijn. In de volgende scenario’s zal aan de hand van de persona’s laten zien wat mijn product toevoegt aan het ontwerpproces van Fabrique.

Scenario 1 - Strateeg Fabrique

Geheim.


80

Scenario 2 - Opdrachtgever

Geheim.


81

Prototype Het interactieve prototype is te vinden in bijlage 13. Aan de hand van de schermen zal ik hier de functies van Passepartout laten zien. Ik bespreek hier alleen de schermen met speciale functies binnen Passepartout, voor alle schermen zie mijn interactieve prototype. 00 - Login Om als Fabriquer gebruik te maken van Passepartout moet er worden ingelogd met het persoonlijke Fabrique gebruikersnaam en wachtwoord (1). De gebruikersnaam is het Fabrique e-mail adres zonder @fabrique.nl (bijvoorbeeld: [email protected] wordt josb). Omdat het wachtwoord het Fabrique wachtwoord is zal deze niet snel vergeten worden. Zo wel dan moet het wachtwoord verandert worden bij de systeembeheerders.

00 - Projectoverzicht 82

Na het inloggen komt men op de overzichtspagina. Hier staan de (door deze persoon) gemaakte projecten (4). Rechtsboven in Passepartout staat altijd met wiens naam je bent ingelogd en is het ook mogelijk om weer uit te loggen. Als de gebruiker op zijn naam (1) klikt komt hij weer op deze pagina terecht. De projectoverzicht bestaat uit een projectnaam, status van het project in Passepartout, project poster printen en een optie om het project te verwijderen. Wordt er op projectnaam of de betreffende status geklikt dan komt de gebruiker op de laasts ingevulde pagina. Als een project voltooid is komt de gebruiker op de laatste pagina van Passepartout (15 - Einde). Een nieuw project word aangemaakt met de CTA (3) nieuw project, hiermee komt men op de volgende pagina 01 - Projectnaam. Verder is er nog te wisselen tussen list view en square view.(2)

1

83 Figuur 5.5: 00 - login Passepartout

1 2 3 4

Figuur 5.6: 00 - Projectoverzicht

01 - Projectnaam De eerste pagina van Passepartout vraagt alleen om de naam van het project. Voor het scenario gaan we een aantal opties invullen voor Het Museum, die een nieuwe website willen. Door op het hamburger icoon linksboven (1) te klikken gaat men altijd weer terug naar de projectoverzicht pagina (00 - projectoverzicht). Het icoon rechtsboven (2) brengt de gebruiker altijd naar de flowchart van Passepartout. Het invoerveld (3) is voor de naam van de website. De naam wordt later weer gebruikt in de samenvatting en in de header. Helemaal rechts staat de verticale navigatie van Passepartout die laat zien op welke stap je bent. Is de stap voltooit dan krijgt de stap een vinkje.

84

02 - Doel website De header (1) herhaalt zich gedurende het proces. De header bevat de titel die op de vorige pagina is ingevuld. De titel geeft aan dat je in het proces zit van deze website. De eerste twee vragen (2) zijn eigenlijk gewetensvragen, er wordt gevraagd of het doel en de doelgroep bekend zijn. Deze moeten sowieso bekend zijn in een ontwerpproces maar in content first is het onmogelijk om zonder duidelijke doelgroep en doel te beginnen met schrijven. Het is niet mogelijk om content te creëren die aansluit bij de de doelgroep als de doelgroep niet bekend is. De vragen zijn voorzien van placeholder tekst die een aangeven in welke richting het antwoord zou moeten worden gegeven (3).

Volledige uitwerking is... Geheim.

1

2 3 4

85 Figuur 5.7: 01 - Projectnaam

1 2 3

Figuur 5.7: 02 - Doel van het project

06

Conclusie & Aanbevelingen



Intenties Deelvraag 1 86

Inzichten

Implementatie


Passepartout


Conclusie Welke rol kan content first design spelen bij het ontwerpen van mobiele multimediale websites? Door voor een content first ontwerp aanpak te kiezen dwing je jezelf om te ontwerpen met alle gebruikersdoelen van de pagina in gedachte. De content is niet alleen de tekst, afbeeldingen en andere inhoud van de pagina. Onder content versta ik het doel van de pagina, waar de bezoeker voor komt. Hoe dit wordt weergegeven met teksten en afbeeldingen is de invulling van de ontwerper. Hieronder valt ook de tone-of-voice. Het belang van content first is altijd toegang hebben, zoals te zien in de piramide of mobile. Een website heeft een doel van communiceren (signal) en heeft elementen die dat doel niet hebben (noise). Dit kunnen elementen zijn die een gebruikersdoel dienen, een doel voor het bedrijf of een doel voor beide. Door de ontwerpers dient er een balans te worden gevonden tussen het signal en de noise. Zoals te zien in figuur 6.1 is content first niet een aanpak die bij elk project mogelijk is. Het is expres stap 0 en niet stap 1. Het hangt heel erg af van de opdrachtgever en het project of het mogelijk is om content first te ontwerpen. Projecten hebben verschillende doelen en niet elk project is geschikt als content first project, zo is bijvoorbeeld in de eCommerce is de interactie belangrijker (zie Passepartout). Als er content gecreëerd of herschreven moet worden wordt dat samen met de klant gedaan. Daarom past een content first aanpak beter bij scrum dan een waterfall project.

Stap 0

Stap 1

Stap 2

Content creëren

Medium bepalen

Start ontwerp

Content first 1. Strategie 2. Interactie ontwerp

The Cone Model Niveau 2 Niveau 4

Mobile / Tablet first 1. Interactie ontwerp 2. Strategie 3. Visueel ontwerp

The Cone Model Niveau 3

Figuur 6.1: Content first in het ontwerpproces.

Design disciplines 1. Interactie ontwerp 2. Visueel ontwerp 3. Strategie 4. Development The Cone Model Niveau 4

87

De klant doet dit samen met het ontwerp bureau in een aantal content scrums, dit zijn (minimaal twee) dagen waarin content, doel en tone-of-voice bepaald worden. Als content first kan worden ingezet in een project is de rol heel groot, omdat het stelt dat alles vanuit de content moet worden ontworpen. Eenmaal verzameld wordt de content opgedeeld in elementen die samen modules vormen. Deze elementen en modules worden over de gehele site hergebruikt (ook mobiele sites) waardoor er in elke context een visuele en inhoudelijke consistentie bereikt wordt. Maar willen gebruikers wel een mobiele ervaring? De mobiele internet gebruiker verwacht veel van zijn telefoon en de websites waar die op komt maar krijgt (te) weinig. De smartphone is het primaire alternatief voor de desktop als het aan komt op browsen op het internet. Blijkbaar is de wil er wel, maar wordt deze niet altijd even goed ondersteund. De gebruikers browsen graag met hun smartphone. Het liefst op een speciaal gemaakte mobiele website. Het ontwerp bureau dat deze mobiele ervaring creëert kan er voor kiezen om voor een aparte mobiele site te gaan of een responsive aanpak. In het geval van een (grotere) webshop kan er beter voor een mobiele site gekozen worden. Dit komt doordat webshops op mobiel een totaal andere flow hebben dan op de desktop. Een responsive webshop is vooral voor de kleinere shops waarbij de omzet niet genoeg is om een aparte mobiele site van te betalen. Sites met andere 88

doeleinden dan de eCommerce, zoals van informatie voorzien, zijn altijd geschikt voor responsive. Naast economische redenen speelt ook de gebruiksvriendelijkheid een grote rol in het keuzeproces. Het is aan het bureau om de klant te begeleiden in dit proces en de gulden middenweg te vinden tussen deze twee krachten. Waarom content first Een content first ontwerp aanpak stelt je in staat om een balans in je signaal en noise te maken die anders niet herkend wordt. Door deze balans op te zoeken is de aanname dat de gebruikerservaring beter is dan als deze balans er niet zou zijn. Content first zorgt voor een focus op de content van de pagina, dit is de reden waarom de bezoeker op jouw pagina komt en zou daarom ook de prioriteit moeten hebben in het ontwerp. Niet hoe de bezoeker er komt maar waarom. Content first bevind zich in de Piramid of Mobile in de laag toegang. Deze laag bevat de essentie van de site waar de bezoeker zijn doel kan bereiken. Wanneer content first Mijn hypothese was: Ik verwacht dat het alleen mogelijk is om content first te ontwerpen wanneer alle randvoorwaarden van een project bekend zijn. Er zullen situaties zijn waarin de klant of het bureau niet de mogelijkheden heeft om content first te kunnen ontwerpen.

Het blijkt dat niet alle randvoorwaarden bekend hoeven zijn, maar wel een aantal. Zo moet het duidelijk zijn wat het doel en doelgroep is, wat de tone-of-voice is, wat de kwaliteit van de content, wat voor soort site het is en wat het gedrag van de gebruiker is. Maar het maakt voor content first niet uit of een website responsive of niet is. Om het ontwerp bureau in staat te stellen te kiezen voor content first moeten de juiste mensen die randvoorwaarde kennen om te kunnen kiezen voor content first. Uit onderzoek is gebleken dat deze mensen de strategen zijn. De juiste informatie verkrijgen ze via mijn product: Passepartout. Passepartout Passepartout stelt de strategen en projectmanagers in staat om aan de hand van een stel vragen en aanvullende informatie te kiezen voor (of tegen) een content first project. Het is de assistent waar je een vraag aan kan stellen maar je moet alsnog zelf het antwoord geven. Passepartout is voor de strategen en projectmanagers van Fabrique maar is ook door andere disciplines te gebruiken. Als Passepartout doorlopen is wordt de uitkomst samengevat in een print vriendelijke A3 poster die opgehangen dient te worden in de projectruimte of scrumroom. Door de strategen te laten ontdekken of een project content first kan worden ontworpen of niet (en wat daar dan de voordelen en nadelen van zijn) helpt hun met de strategie en ondersteuning van het project en de communicatie naar de klant daarin. Dat is de laag die het project moet verkopen en begeleiden en daarmee informatie doorspelen naar zowel de klant als de ontwerpers. De ontwerpers kunnen zelf hun toepassing kiezen of Passepartout gebruiken om meer inzicht op te doen. Al met al ondersteunt Passepartout op een algemene manier het project en laat expres veel ruimte voor eigen inbreng. F#ck mobile, focus op de content en de gebruiker. Niet het device.

89

Aanbeveling Door de beperkte tijd en de enorme hoeveelheid informatie die er beschikbaar is over dit onderwerp heb ik maar een gedeelte hiervan kunnen verwerken in mijn verslag. Een onderdeel als de Signalto-noise Ratio is enorm interessant om verder uit te zoeken. Ik heb de ‘waarom-vraag’ beantwoord, wat rest is (onder andere) de ‘hoe-vraag’. Om Passepartout echt te kunnen gebruiken zal die moeten worden gebouwd met een CMS zodat er vragen en content makkelijk kunnen worden ingevoerd in het systeem. Doordat er ervaring wordt opgedaan met content first projecten wordt Passepartout gevuld en krijgt het echt body. Ook zou er een project-specifiek gedeelte van Passepartout kunnen worden ontworpen wat herkent in welk gedeelte van het proces je zit en aan de hand daarvan tips geeft. Dit gedeelte zou achter een login kunnen zitten zodat Passepartout normaal gewoon nog te gebruiken is. Mocht Passepartout een publiek systeem worden zou dit een functie voor iedereen zijn/haar project kunnen zijn. Passepartout zou dan op een eigen site of een subdomijn van fabrique kunnen draaien. Passepartout kan pas echt van nut worden als het wordt gebruikt en getest. Het moet ingezet worden in projecten wil het bewezen worden dat dit de juiste aanpak is. Er moeten risico’s worden genomen om aan te tonen dat stellingen wel of niet werken (zoals eCommerce, misschien werkt het in de praktijk wel?). Wil content first ontwerpen van de grond komen dan heeft het een vertegenwoordiger nodig. 90

Iemand die, zoals Louise het zei, er verliefd op is. Iemand die het pusht en er over schrijft voor de community (Bijlage 2: interview Louise Roose, 00:07:13). Pas als er een aantal content first projecten gedaan worden krijgen de ontwerpers er ervaring in en merken de strategen in welke projecten dit het beste kan toegepast worden.

91

07 Bibliografie

“ 92

Immature poets imitate; mature poets steal. -T.S. Elliot

Welke afwegingen worden er gemaakt door bureau en opdrachtgever bij het ontwerpen en ontwikkelen van een mobiele experience? Alexander, C., Ishikawa, S., Silverstein, M., Jacobson, M., Fiksdahl-King, I., Angel, S. (1977) A Pattern Language. Baldwin, C., MacCormack, A,. & Rusnak, J. (2011) Exploring the Duality between Product and Organizational Architectures: A Test of the “Mirroring” Hypothesis Baldwin, C. 2010. The Mirroring Hypothesis: Theory, Evidence and Exceptions. Conway, M. E. (1968). How Do Committees Invent? via http://www.melconway.com/research/ committees.html Curtis, N. (2010) Modular Web Design. Frost, B. (2013, 10 juni). Atomic Design Via: http://bradfrostweb.com/blog/post/atomic-webdesign/ geraadpleegd op: 14-05-14 Frost, B. (2012, 02 maart). Planting the Seed for a Responsive Future geraadpleegd op: 14-05-14 Vijayaratnam, N. (2014, 04 maart) BBC News website: responsive design in beta Via: http://www. bbc.co.uk/blogs/internet/posts/News-responsive-design-in-beta geraadpleegd op: 14-05-14

Welke gevolgen heeft een content first benadering voor het ontwerpproces (van Fabrique)? Boulton, M. (2012, 9 december) A New Canon. Via http://www.markboulton.co.uk/journal/ anewcanon geraadpleegd op: 28-04-14 CBS. (2014, 7 januari). Aanhoudende omzetdaling telecomsector. Via: http://www.cbs.nl/nl-NL/ menu/themas/financiele-zakelijke-diensten/publicaties/artikelen/archief/2014/2014-3934-wm. htm geraadpleegd op: 10-04-14 Clark, J. (2010). Tapworthy.

93

Compuware APM (2011, 15 juli) “What Users Want from Mobile - A study of consumers’ mobile web and application experiences and expectations conducted by Equation Research on behalf of Compuware”. Via http://www.slideshare.net/Gomez_Inc/2011-mobile-survey-what-users-wantfrom-mobile geraadpleegd op: 14-04-14 Champeon, S. (2003, 21 maart) “Progressive Enhancement and the Future of Web Design”. Via http://www.hesketh.com/thought-leadership/our-publications/progressive-enhancement-andfuture-web-design geraadpleegd op: 16-04-14 developer.apple.com (2014) App Store Distribution. Via https://developer.apple.com/support/ appstore/ geraadpleegd op: 28-04-14 developer.android.com (2014) Dashboards. Via https://developer.android.com/about/dashboards/ index.html geraadpleegd op: 28-04-14 Duggan, M. & Smith, A. (2013, 16 september) Cell Internet Use 2013. Via http://www. pewinternet.org/2013/09/16/cell-internet-use-2013/ geraadpleegd op: 14-04-14

94

Frost, B. (2011, 19 juni) Mobile-First Responsive Web Design. Via http://bradfrostweb.com/blog/ web/mobile-first-responsive-web-design/ geraadpleegd op: 16-04-14 Frost, B. (2012). Responsive Design Vs Separate Mobile Sites: Presidential Smackdown Edition. Via http://www.slideshare.net/bradfrostweb/responsive-design-vs-separate-mobile-sitespresidential-smackdown-edition geraadpleegd op: 10-04-14 Frost, B. (2013, 20 april). Death to Bullshit. Via http://www.slideshare.net/bradfrostweb/death-tobullshit geraadpleegd op: 28-04-14 Gustafson, A. (2008, 7 oktober) Understanding Progressive Enhancement. Via http://alistapart. com/article/understandingprogressiveenhancement geraadpleegd op: 16-04-14 Jongerius, P. (2014). Scrum verovert interactieve media. Via: http://www.fabrique.nl/scrum/ geraadpleegd op: 18-05-14 Jongerius, P., Offermans, A. Vanhoucke, A., Sanwikarja, P., van Geel, J., (2011). Get Agile! Scrum for ux, design & development.

Layon, K. (2012) Theory of Human (Mobile) Motivation: SXSW 2012 slides. http://kristoferlayon. files.wordpress.com/2012/03/klayonsxsw2012.pdf geraadpleegd op: 14-04-14 Mann,

M.(2009)

Noise-to-Noise

ratio.

Via

https://www.flickr.com/photos/merlin/

sets/72157622077100537/ geraadpleegd op: 28-04-14 Marcotte, E. (2011) Responsive Web Design. McGrane, K. 2012. Content Strategy for Mobile. opensignal.com (2013, juli) Android Fragmentation Visualized. Via http://opensignal.com/reports/ fragmentation-2013/ geraadpleegd op: 28-04-14 Reinertsen, D. (1999). Taking the Fuzziness Out of the Fuzzy Front End Responsiveimages.org (2013, 5 november). Use Cases and Requirements for Standardizing Responsive Images. Via http://usecases.responsiveimages.org/#art-direction geraadpleegd op: 29-04-14 Statline CBS. (2014, 13 mei). ICT gebruik van huishoudens naar huishoudkenmerken. Via: http://statline.cbs.nl/StatWeb/publication/?VW=T&DM=SLNL&PA=71102NED&D1=a&D2=05&D3=a&HD=130115-1638&HDR=G1&STB=T,G2geraadpleegd op: 13-05-14 Villamor, C, Willis, D. & Wroblewski, L. (2010, 15 april) Touch gesture guide. Via http://static. lukew.com/TouchGestureGuide.pdf geraadpleegd op: 14-04-14 Wroblewski, L. (2011). Mobile First.

Wikipedia (2013, 16 november). Signaal-ruisverhouding. Via https://nl.wikipedia.org/wiki/Signaalruisverhouding geraadpleegd op: 29-04-14

95

Wat zijn de verwachtingen van gebruikers van mobiele websites? CBS. (2013, 28 november). Steeds vaker laptop, smartphone en tablet in huis. Via: http://http:// www.cbs.nl/nl-NL/menu/themas/vrije-tijd-cultuur/publicaties/artikelen/archief/2013/2013-3926wm.htm geraadpleegd op: 13-05-14 Google. (2012, februari) Our Mobile Planet: Global Smartphone Users. Google. (2014) Our Mobile Planet. http://think.withgoogle.com/mobileplanet/nl/ geraadpleegd op: 15-05-2014

Interactief product Coolblue brandmanual (2011). Blauwdruk. De stijl van Coolblue. Doorley, S., Witthoft, S. (2012) Make Space: How to Set the Stage for Creative Collaboration. Storey, G. (2014, 24 april). And They All Look Just the Same. Via http://cognition.happycog.com/article/and-they-all-look-just-the-same geraadpleegd op: 29-04-14 96

Van Erp, J. (2011) Designing the Total Experience. A Model for the Changing Role of the Designer.

Verklarende woordenlijst Android Besturingssysteem ontwikkeld door Google wat draait op devices van telefoon en tablet tot smartwatch en auto.

Clickdummy Een snel in elkaar gezette demo van het product om door te klikken.

Device Engels woord voor apparaat. Device betekend het product of apparaat in kwestie.

Featurephone Telefoon met een browser die geen HTML5 kan weergeven, deze telefoons kunnen een nieuwe website niet representabel tonen.

Gestures De aanraak gestuurde bewegingen waarmee touchscreen interfaces bestuurd worden.

Hamburger menu Het menu verborgen onder de drie streepjes bij een (meestal) mobiele website.

iOS Besturingssysteem ontwikkeld door Apple voor de iPhone en iPad.

Mobile Acties op een mobiele telefoon (meestal een Smartphone).

Pitch Een korte presentatie waarin het bureau de opdrachtgever overtuigt om aan hem de opdracht te geven.

Q42 Vaste partner van Fabrique voor uitgebreide development.

Smartphone Telefoons die (tot op zekere hoogte) een website weer kunnen geven. Deze telefoons hebben een browser die HTML5 aan kan. Bijvoorbeeld Windows of Android telefoons en iPhones.

Site Afkorting van het woord website.

97

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

Recommend Documents