Scriptie. Cross-Device UX Design. door Linda Stuurman

Scriptie Cross-Device UX Design

door Linda Stuurman

Linda Stuurman | Cross-Device Design

II

Colofon

AUTEUR Naam

Linda Stuurman

Studentnummer

0542074

E-mailadres

[email protected]

Website

www.symplin.com

Major

Communicatie & Multimedia Design

Minor

User Experience Design

Datum afstuderen

29 Augustus 2011

AFSTUDEERBEGELEIDERS Naam

Hans Kemp

Organisatie

Hogeschool Rotterdam | CMI

Naam

Joost Verweij

Organisatie

Evident Interactive B.V.

© 2011 Linda Stuurman Niets uit deze uitgave mag worden vermenigvuldigd en/of openbaar gemaakt door middel van druk, fotokopie, microfilm, of op welke andere wijze dan ook, zonder voorafgaande schriftelijke toestemming van de opsteller.


III


IV

Samenvatting In dit afstudeerverslag zijn resultaten te vinden van een zoektocht naar het antwoord op de vraag: Hoe kan je als ontwerper een cross-device oplossing bieden aan gebruikers zodat zij optimaal gebruik kunnen maken van de aangeboden content, afgestemd op de context waarin zij de content oproepen? Er is eerst literatuuronderzoek gedaan naar het gebruik van drie van de meest gebruikte devices: de smartphone, desktop computer en een opkomend device: de tablet. Naast literatuuronderzoek is er een usability user test uitgevoerd om te zien hoe gebruikers een tablet vasthouden en welke voorkeuren zij hebben wat de positie van navigatie betreft. Onderdeel van het onderzoek is hoe het proces van cross-device design eruit zou kunnen zien en welke rol “Responsive Webdesign” zou kunnen spelen. Het proces wordt van begin (doelgroeponderzoek) tot eind (visual design) besproken. Na het onderzoek wordt een case, de Baak, besproken en wordt een voorstel gemaakt voor het herontwerp van hun website volgens het cross-device design principe. De conclusie die getrokken kan worden na het uitwerken van de case is dat er, door cross-device design toe te passen, nog beter gekeken wordt hoe de gebruiker “op z’n wenken” bediend kan worden afhankelijk van welk device gebruikt wordt.


V


VI

Voorwoord In 2008 begonnen aan deze deeltijdstudie met als doel een carrièreswitch te maken van de Architectuur/Bouw naar de wereld van het wereldwijde web. Dat doel is inmiddels behaald en het afronden van de studie Communicatie & Multimedia design voelt echt als een kers op de taart. Het doen van deze afstudeeropdracht is een ware rollercoaster geweest, waar ik enorm veel van geleerd heb. Het doen van onderzoek voorafgaand aan het uitwerken van een case in de praktijkomgeving levert erg veel inzichten in het vak en zeker ook jezelf.

Een voorwoord is niet compleet zonder dankwoord, dus hier gaan we: Ik wil ten eerste Evident en al mijn collega’s heel erg bedanken voor het warme welkom toen ik eind 2010 bij jullie mocht gaan werken. Echt hartverwarmend. In het bijzonder wil ik Joost Verweij bedanken voor de begeleiding bij mijn afstudeerproject. Het afstuderen zou niet mogelijk geweest zijn zonder de inspanningen van Janneke Jung en Hans Kemp, die naast het begeleiden van het afstuderen me in de afgelopen jaren ook veel geleerd heeft op het gebied van Interaction- en User Experience Design. De lessen waren echt geweldig en inspirerend. Dat brengt me bij de volgende slachtoffers, mijn klasgenoten. Thamar Kiemel, Jessica Brul, Mark van Etten, Chiel van de Ruit en Rutger van Dillen, jullie zijn top! Als laatste, maar zeker niet de minsten, wil ik John, Adri, Monique en Skip Stuurman bedanken voor de steun die ik altijd bij jullie kon vinden tijdens en buiten de studie om.


VII

INHOUDSOPGAVE

1.

2.

Inleiding ............................................................................................................................... 2 1.1

Bedrijf ...................................................................................................................................... 3

1.2

Aanleiding ................................................................................................................................ 3

1.3

Onderzoeksvraag ..................................................................................................................... 4

1.4

Doelstelling .............................................................................................................................. 4

1.5

Omschrijving klant en doelgroep ............................................................................................ 5

1.6

Begrippenlijst........................................................................................................................... 6

Cross-Device User Experience Design ..................................................................................... 8 2.1

Uitgebreide Probleemstelling.................................................................................................. 9

2.2

Hoe verhouden context, content, gebruiker en device zich tot elkaar? ............................... 10

2.2.1 2.3

Aanpak ........................................................................................................................... 19

2.3.2

Content op de 3 typen devices ...................................................................................... 25

2.3.3

technische randvoorwaarden cross-device design ....................................................... 29

5.

Conclusie ............................................................................................................................... 32

Technische mogelijkheden met CSS3 en MediaQueries ........................................................ 34 3.1

4.

Algemeen Designproces Cross-device UX design .................................................................. 16

2.3.1

2.4 3.

Devices en context ........................................................................................................ 11

Voordelen, Nadelen en Conclusie ......................................................................................... 39

Onderwijsinstellingen op het Web ....................................................................................... 40 4.1

Doelgroepen .......................................................................................................................... 42

4.2

Cross-device oplossingen bij andere onderwijsinstellingen.................................................. 42

4.3

Conclusie ............................................................................................................................... 46

Inventarisatie Bestaande Website: deBaak ......................................................................... 48 5.1

Doelstellingen huidige site .................................................................................................... 49


VIII

5.2

Website Desktop ................................................................................................................... 49

5.3

Website MobieL .................................................................................................................... 54

5.4

Conclusies .............................................................................................................................. 56

6. Concept en realisatie: de vernieuwde deBaak.......................................................................... 58 6.1

Concept & Visuals .................................................................................................................. 59

6.1.1

Smartphone ................................................................................................................... 66

6.1.2

Tablet ............................................................................................................................. 75

6.1.3

Desktop.......................................................................................................................... 87

6.2

Realisatie ............................................................................................................................... 92

7.

Eindconclusie ...................................................................................................................... 96

8.

Aanbevelingen ...................................................................................................................100

9.

Bronnen ............................................................................................................................102


IX


1

1. INLEIDING


2

1.1

BEDRIJF

Het afstudeerproject heb ik uitgevoerd bij en voor Evident Interactive B.V. te Utrecht. Evident heeft ervaring met het creëren van bedrijfskritische eBusiness toepassingen in de zakelijke markt tot creatieve portals en actiesites in de consumentenmarkt. Ze zijn Certified Microsoft Partner en werken o.a. voor klanten als: ING, Hogeschool Utrecht, gemeente utrecht, TenneT, de Baak, Staatsbosbeheer en Rabobank. Er werken zo’n 50 experts op het gebied van online en interactieve media, waarbij ik een plekje inneem op de Frontend afdeling. Als deeltijdstudent doe ik het afstuderen naast mijn reguliere werk bij Evident.

1.2

AANLEIDING

Afgelopen jaren is het voor mensen steeds makkelijker het wereld wijde web te bezoeken op steeds meer verschillende manieren. Eerst gebruikten we alleen de desktop computer, en binnenkort zal er meer gebruik gemaakt worden van het internet via de telefoon dan de desktop computer. Afgelopen jaar is daar ook nog de tablet bijgekomen1.

Afbeelding: cmswire.com

1

CMSwire.com & KPCB | Februari 11, 2011


3

Al deze devices dienen een bepaald doel en het is voor ontwerpers zaak om gebruikers van de verschillende devices de juiste website/content aan te bieden. Op dit moment wordt nog te vaak een oplossing voor de mobiele telefoon gegeven die te veel lijkt op een uitgeklede versie van de website voor de desktop computergebruikers. Nu de tablet computer daar nog eens is bijgekomen, wil ik graag onderzoek doen naar hoe je met deze verschuiving als ontwerper om moet gaan. De website moet ten slotte niet alleen goed op het device getoond worden, maar ook nog eens datgene doen dat de gebruiker op dat moment zou willen.

1.3

ONDERZOEKSVRAAG

Hoe kun je als ontwerper een cross-device oplossing bieden aan gebruikers zodat zij optimaal gebruik kunnen maken van de aangeboden content, afgestemd op de context waarin zij de content oproepen?

Subvragen - Binnen welke context zullen de devices (desktop computer, tablet en mobiele telefoon) gebruikt gaan worden? - Welk doel heeft de gebruiker voor ogen als een bepaald device gebruikt wordt? - Wat moet je als ontwerper vooral niet of juist wel doen bij het aanbieden van content via verschillende devices?

1.4

DOELSTELLING

Ik wil als ontwerper weten hoe ik de gebruikers zo optimaal mogelijk content kan aanbieden wanneer zij verschillende devices gebruiken. Om hier een goed antwoord op te vinden zal ik onderzoek moeten doen naar de gebruikers en de context waarin de verschillende devices gebruikt worden. Aan de hand daarvan wil ik een conclusie trekken en aanbeveling doen. Daarnaast wil ik aan de hand van een case een voorbeeld geven van hoe mijn onderzoeksresultaten omgezet kunnen worden in een concept.


4

1.5

OMSCHRIJVING KLANT EN DOELGROEP

De klant bestaat uit Evident Interactive B.V. (zij willen graag meer weten over cross-device oplossingen ontwerpen) en DeBaak. DeBaak, een onderwijsinstelling voor ondernemers, heeft op dit moment een website voor de desktop computer met daarnaast een losstaande site speciaal voor de mobiele telefoon. DeBaak DeBaak biedt geen onderwijs zoals de meeste mensen gewend zijn. “DeBaak is dé plek voor leiders, ondernemers en professionals die op zoek zijn naar inspiratie, motivatie, kennis en inzicht. DeBaak is een plek vol paradoxen. Wij bieden de rust om stil te staan bij jezelf en je omgeving, maar tegelijkertijd is DeBaak een springlevende omgeving, waar altijd wat gebeurt. DeBaak leert je te leren, een vermogen dat een leven lang meegaat. We doen een beroep op je nieuwsgierigheid, reflectie en drang om te groeien! Bij ons kan dat in korte en lange trajecten, in grote en kleine groepen en individueel. Natuurlijk verzorgen wij ook trajecten op maat.” Bron: DeBaak.nl

Doelgroep De doelgroep bestaat eigenlijk ook uit 2 delen: Ik zou graag een houvast willen bieden voor strategen, concepters en Interaction Designers binnen Evident Interactive B.V. Maar de hoofddoelgroep is uiteraard de gebruiker die uiteindelijk het product moet gaan gebruiken.


5

1.6

BEGRIPPENLIJST

Gestures Door de komst van touchscreen is het nodig dat er bepaalde acties uitgevoerd worden op het scherm met meestal de vingers. Er zijn verschillende bewegingen mogelijk om verschillende acties uit te voeren. Deze bewegingen noemen we gestures. Smartphone Een mobiele telefoon die uitgebreidere computermogelijkheden biedt. Een smartphone kan ook beschouwd worden als een handcomputer of PDA die tegelijk ook een telefoon is. Tablet Computer die geen toetsenbord of muis heeft, maar enkel werkt met een touchscreen. Om te typen is een extern toetsenbord, of een schermtoetsenbord nodig. Responsive Webdesign / Adaptive Lay-outs De term refereert naar een techniek die er voor zorgt dat websites intelligent hun layout aanpassen op basis van de schermgrootte van de bezoeker. User Experience Design (UX Design / UXD) User experience design is het ontwerpgebied gericht op de positieve totaalbeleving van gebruikers van interactieve applicaties. Microbreaks Hieronder kunnen korte momenten worden verstaan die gebruikt worden voor activiteiten als email lezen, een snelle zoekopdracht, nieuws lezen etc. met een mobile device. Navigational trauma Door navigatie tussen verschillende pagina’s, schermen etc kan de gebruiker gedesoriënteerd en gefrustreerd raken. Design Patterns Gestandaardiseerde oplossing voor veel voorkomende ontwerpproblemen.


6


7

2. CROSS-DEVICE USER EXPERIENCE DESIGN


8

2.1

UITGEBREIDE PROBLEEMSTELLING

Het internet, en alle mogelijkheden er omheen, heeft een heel belangrijke plaats ingenomen in het dagelijks leven van mensen over de hele wereld. Bedrijven springen in op de behoefte van mensen door verschillende devices aan te bieden die voor verschillende gebruiksmomenten het meest geschikt zijn om van het internet gebruik te maken. Voor ontwerpers wordt het daarom ook steeds lastiger om tot een juiste oplossing te komen, omdat er rekening gehouden moet worden dat de gebruiker een ander device zou kunnen gebruiken of zich in een andere context zou kunnen bevinden dan achter het bureau, waar tot een paar jaar terug eigenlijk altijd vanuit kon worden gaan. Het draait in dit onderzoek allemaal om de gebruikers, de content die ze op willen vragen en de context waarin zij verschillende devices gebruiken. Om een goed antwoord te krijgen op de vraag hoe je het beste je content kunt presenteren aan je gebruiker, moeten de verschillende devices en de context waarin zij gebruikt worden nader bekeken worden. In dit onderzoek wordt gezocht naar de ideale manier om voor de 3 meest gebruikte devices, desktop, tablet en smartphone een juiste oplossing te bieden. Deze oplossing is altijd een website voor één opdrachtgever, maar hoe zorgen we ervoor dat de gebruiker altijd optimaal gebruik kan maken van de website ongeacht welk device gebruikt wordt? Aan het eind van dit onderzoek wordt een antwoord geven op hoe er voor de 3 devices ontworpen moet worden en niet voor welke device een oplossing geboden moet worden. Naast de verschillende contexten is het ook een uitdaging om de content op de juiste manier voor de verschillende devices te presenteren. Zo verschillen schermresoluties en inputmogelijkheden, waardoor vaak verschillende interaction- en designpatterns gebruikt worden om dezelfde content op de verschillende devices aan te bieden2.

2

Josh Campbell van Magic + Might, Inc, Multiple Design Strategies, slide 64, 10 Juni 2011


9

2.2

HOE VERHOUDEN CONTEXT, CONTENT, GEBRUIKER EN DEVICE ZICH TOT ELKAAR?

De gebruiker, doelgroep, gebruikt een site binnen een bepaalde context. In die context is een bepaald device optimaal om te gebruiken. Doordat de gebruiker dat bepaalde device gebruikt, zou de geoptimaliseerde content getoond moeten worden aan de gebruiker. In onderstaand model wordt de verhouding tussen context, content, device en gebruiker weergegeven. Context, content en device zijn direct aan elkaar gelinkt, de gebruiker beweegt zich steeds tussen de verschillende contexten.

Model door Linda Stuurman, afgeleid van een model van Androidhub

Eén website of device-specifieke websites aanbieden? In bijlage 1 is een essay te vinden die voorafgaand aan dit onderzoek is opgesteld. Uit het essay is gebleken dat Responsive Webdesign kan helpen bij het oplossen van een cross-device probleem, maar het is zeker niet dé oplossing. In hoofdstuk 3 (pag. 31) wordt dieper ingegaan op dit onderwerp

Gebruikers en content Mensen die zowel via de desktop en mobile websites bezoeken, blijken vaak dezelfde sites op de verschillende devices te bezoeken3. Op de desktop computer worden meerdere pagina’s bezocht dan als er met de mobile gebrowsed wordt. Opvallend is het dat er maar enkele websites zijn die alleen via de desktop of alleen via de smartphone worden bezocht.

3

Shaun K. Kane, Amy K. Karlson 2, Brian R. Meyers, Paul Johns, Andy Jacobs and Greg Smith. Exploring Cross-Device Web Use on PCs and Mobile Devices


10

2.2.1 DEVICES EN CONTEXT Om het onderzoek een duidelijk kader te geven, zullen de te behandelen devices onderverdeeld worden in 3 typen: 1. Smartphone 2. Tablet computer 3. Desktop computer Elk type device bedient een bepaalde doelgroep en hebben elk een eigen optimale context waarbinnen zij gebruikt worden:

Smartphone De smartphone komt het best tot zijn recht wanneer deze onderweg of buitenshuis gebruikt wordt om snel informatie te vinden over zaken die op dat moment spelen of waar de gebruiker naartoe op weg is. Maar ook email en social media zijn erg belangrijk voor de gebruiker om te kunnen raadplegen. De smartphone is klein, licht en is snel opgestart wat bevordert dat de gebruiker snel nodige informatie op kan zoeken. De gebruiker heeft vaak weinig tijd en kan erg snel afgeleid worden door omstandigheden in de directe omgeving.

Bron afbeelding: Sanoma, Rapport Mobile Advertising, Juli 2010, pp 64


11

Bron afbeelding: Sanoma, Rapport Mobile Advertising, Juli 2010, pp 66

Gebruikers en hun smartphone4 Er zijn 3 meest voorkomende reden5 waarom gebruikers hun smartphone raadplegen. Dit zijn de momenten: - “Urgent Now” (Ik wil iets nu weten) - “Bored Now” (Ik moet nog 2 minuten wachten op de trein. Ik zoek iets waarmee ik me kan vermaken”) - “Repetitive Now“ In Designing Interfaces heeft Jennifer Tidwell het over gebruikers die hun smartphone gebruiken voor het vullen van Microbreaks6. Deze momenten/breaks worden vaak gebruikt voor activiteiten als email lezen, een snelle zoekopdracht, nieuws lezen etc worden verstaan. Dat is niet het enige moment waarop gebruikers hun telefoon willen raadplegen. Uit bovenstaande statistieken blijkt dat gebruikers ook de tijd nemen om via hun smartphone het internet op te gaan als zij bijvoorbeeld thuis zijn. Hieronder enkele quotes die van een smartphone gebruiker verwacht mogen worden: - “Ik wil ‘dit’ nu weten” - “Als ik iets moet weten wil ik daar op geattendeerd worden” - “Ik wil graag aan anderen laten weten waar ik ben of wat ik aan het doen ben en wil dat ook van mijn vrienden weten” - “Dit is mijn telefoon, waar niemand anders gebruik van maakt”

4

Designing Interfaces – 2 Edition, Jennifer Tidwell . December 2010, pp. 444

5

Information Week – Google Lays out its Mobile User Experience Strategy - April 11, 2007

6

nd

nd

Designing Interfaces = 2 Edition, Jennifer Tidwell. December 2010, pp. 16


12

Nadelen Smartphone De smartphone is een uitermate handig device om onderweg of “even snel” iets op te zoeken. Het is een klein device dat handig mee te nemen is. Dat brengt ook de nodige nadelen7 met zich mee, zoals: - Klein scherm / beperkt aantal pixels - Er moet rekening gehouden worden met een trage verbinding waardoor dat snel opzoeken niet zo snel gaat als gewenst. - De gebruiker moet vaak meer moeite doen om iets in te voeren dan op de grotere devices. Uit het onderzoek van Jakob Nielsen uit 2009 bleek dat websites die speciaal voor de mobiele telefoon zijn ontworpen een stuk beter presteren (of beoordeeld worden door gebruikers) in vergelijking met sites die wel goed op een mobiele telefoon getoond worden, maar daar niet speciaal voor ontworpen zijn. Tegenwoordig wordt er steeds meer rekening gehouden met de smartphone gebruiker, maar al te vaak is er niet genoeg rekening gehouden met de beperkte inputmogelijkheden die de gebruiker tot de beschikking heeft.

Tablet De tablet wordt het meest binnenshuis gebruikt, op de bank8.

7 8

Jakob Nielsen – Mobile Usability – July 20, 2009 Sanoma Onderzoek, De Nederlandse iPadgebruiker, Oktober 2010


13

Bron afbeeldingen: Sanoma Onderzoek, De Nederlandse iPadgebruiker, Oktober 2010

De gebruiker heeft vaak meer tijd tot de beschikking dan de smartphone gebruiker. Tablets bevorderen het multitasken niet, waardoor de gebruiker met meer focus met die ene website of applicatie bezig kan zijn. Gebruikers en hun tablet-computer. Net als bij de smartphone is de tablet geschikt voor het vullen van Microbreaks. Echter, de gebruiker neemt over het algemeen meer tijd door met de tablet, waardoor andere activiteiten nog beter geschikt zijn, zoals het lezen van een e-book, emails beantwoorden en dieper ingaan op nieuwsfeeds. - “De ouderwetse krant heb ik niet meer, ik lees het nieuws op de iPad” - “Even relaxen op de bank met een leuke interactieve game” - “E-mailen was nog nooit zo makkelijk en een korte email terugsturen is zo gebeurd” - “Een treinrit van 30 minuten, tijd genoeg om een e-book open te slaan of e-mails/nieuws te lezen” - “Filmpjes kijken is erg leuk op een tablet” - “Social Media is erg toegankelijk en ik kan snel overzicht krijgen van waar mijn vrienden zijn, waar ze van houden en dieper ingaan op de informatie die ze met mij delen.”


14

Desktop computer De desktop computer staat vrijwel altijd op een bureau of tafel en zal nooit verplaatst worden tijdens het gebruik. De gebruiker gebruikt een desktop computer vaak als er tijd beschikbaar is om gedetailleerde of heel specifieke informatie te zoeken. Gebruikers en hun desktop-computer - “Ik wil graag diepgaande informatie over een bepaalde gebeurtenis” - “Zo’n toetsenbord is zo gek nog niet wanneer ik een lange email of brief moet schrijven” - “Als ik achter m’n computer zit kan ik echt in zo’n flow terechtkomen en uren achtereen werken of over het web surfen”


15

2.3

ALGEMEEN DESIGNPROCES CROSS-DEVICE UX DESIGN

De context waarin het device gebruikt wordt is één van de zaken die heel belangrijk is om rekening mee te houden wanneer je een ontwerp maakt. Net zo belangrijk is de content die aangeboden gaat worden, omdat deze moet passen bij de context (en dus in moet spelen op de wensen en eisen van de gebruiker). Zo moet bijvoorbeeld voorkomen worden dat er grote lappen tekst aangeboden worden op de smartphone. De gebruiker wil in dat geval vaak snel iets opzoeken en bevindt zich vaak binnen een context waar hij of zij snel afgeleid zal zijn. Bij het aanbieden van tekst voor de desktop computer is dit minder bezwaarlijk en vaak zelfs wenselijk om gedetailleerde informatie te krijgen. Jesse James Garrett heeft een model9 ontwikkeld die het proces van User Experience Design goed in kaart brengt. Ondanks dat het model al 11 jaar geleden is ontwikkeld, kan het in deze tijd nog altijd toegepast worden.

In de hierna volgende pagina’s wordt duidelijk waarom bovenstaand model bij cross-device UX design uitstekend toegepast kan worden. Er is echter een nieuw model gecreëerd door het team van Smashing Magazine dat nog beter het ontwerpproces voor mobile devices weergeeft:

9

Jesse James Garrett - The Elements of User Experience – Maart 30, 2000 en "Meet the Elements"


16

Afbeelding: gemaakt door strategist.net, gepubliceerd door Smashing Magazine, 2 Mei 2011

In bovenstaand model lijkt het dat de gebruiker pas aan het van het proces werkelijk wordt ingezet bij het testen van een product dat de cyclus volledig heeft doorlopen. Als het ontwerpproces echt user-centered moet verlopen, zou bij elke fase de gebruikers/doelgroep moeten worden raadplegen; over wat zij van de huidige site vinden, voor het doelgroeponderzoek zijn ze onmisbaar, bij het stellen van prioriteiten zijn ze onmisbaar en bij het daadwerkelijk ontwerpen van de site zul je rekening moeten houden met de gebruiksvriendelijkheid. Een site kan als ongebruiksvriendelijk worden beschouwd door mensen die buiten de doelgroep vallen, maar tegelijkertijd als gebruiksvriendelijk beschouwd door de doelgroep. De modellen van Garrett en Smashing Magazine zijn uitstekend naast elkaar te gebruiken. Het model van Garret houdt minder rekening met de mobile devices en het model van Smashing Magazines is juist voor die devices ontwikkeld; ze vullen elkaar perfect aan.


17

Om ALTIJD in het achterhoofd te houden In 2004 heeft Peter Morville10 een model ontwikkeld die alle 7 facetten van User Experience Design weergeeft, de Honeycomb.

Bron afbeelding: Peter Morville, User Experience Design, 21 juni 2004

In bovenstaand model geeft Peter Morville aan, welke aspecten van een website altijd aanwezig moeten zijn en die altijd in het achterhoofd gehouden moet worden bij welke User Experience Design project ook. Ookal zou een website na het doorlopen van de stappen zoals omschreven door Jesse James Garrett en Smashing Magazine moeten voldoen aan alle aspecten die Peter Morville stelt, het is goed om ze toch nog nadrukkelijk te benoemen.

10

Peter Morville, User Experience Design, 21 juni 2004


18

2.3.1 AANPAK Hieronder volgt een stappenplan van welke stappen ondernomen moeten worden als voor de 3 typen device een website ontworpen gaat worden. Het is echter niet zo dat de stappen na elkaar opgevolgd moeten worden, het is eerder een volgorde van aanpak.

Bron Afbeelding: Jesse James Garrett, Elements of User Experience Design 2nd Edition, pp 24

Het model van Garrett wordt als basis aangehouden en het model van Smashing Magazine ter uitbreiding toegevoegd worden, zodat er optimaler voor de mobile devices ontworpen kan worden. Stap 1: Strategie en needs & wants doelgroep In deze beginfase wordt de basis gelegd voor alle andere fases. Er zijn een aantal vragen die beantwoord moeten kunnen worden om een goede basis te leggen voor het concept: A: Wat wil de klant met de site bereiken; wat zijn de doelstellingen? B: Wie is de doelgroep en wat willen en verwachten ze van de klant/website? C: Welke context scenario’s11 passen bij de antwoorden op bovenstaande vragen? Om de doelgroep concreter te maken en een naam en gezicht te geven, is het verstandig om enkele persona’s te maken. De antwoorden op vraag A en B leveren doelstellingen op van de klant en needs & wants van de gebruiker op. Deze kunnen in tegenover elkaar gezet worden en aan de hand van de persona’s die de doelgroep representeren kunnen de context scenario’s (vraag C) opgesteld worden. Het is goed om in de gaten te houden dat er meerdere doelgroepen kunnen zijn, zoals gebruikers die nog nooit eerder op de website zijn geweest en zij die al bekend of, als die mogelijkheid er is, zelfs wel een profielpagina hebben aangemaakt. In dat geval is het goed om te kijken binnen welke context de verschillende doelgroep het meest gebruik zal maken van de website. Zo zou het kunnen zijn dat nieuwe gebruikers zich het liefst via de desktop site willen oriënteren en op die manier meer gedetailleerde infomatie kunnen krijgen, terwijl de terugkerende gebruiker snel iets wil opzoeken of informatie wil verkrijgen via de mobiele telefoon. Aan de hand van het doelgroeponderzoek kan gekeken worden waar de focus op gelegd moet worden per device. Ook als er maar één doelgroep is, dan moet in de volgende stappen goed gekeken worden wat de needs en wants per device zijn.

11

Alan Cooper, About Face: The Essentials of Interaction Design, 2007, pp. 119


19

Als de laatste vraag beantwoord is, kan worden vastgesteld voor welke devices er een oplossingen geboden moet worden. Als blijkt dat er voor meerdere devices een oplossing geboden moet worden, zullen de hierna volgende stappen parallel aan elkaar doorlopen; elk type device krijgt een eigen concept. Als er voorkeur wordt gegeven om eerst voor de smartphone een oplossing te bieden en daarna pas voor bijvoorbeeld de tablet of desktop site, dan kan dat uitstekend. Echter, er moet er altijd (of voor alle devices tegelijk of na elkaar wordt ontworpen) goed opgelet worden of de verschillende devices elkaar op bepaalde punten, kunnen aanvullen of samenwerken.

Stap 2: Scope en maak prioriteiten Hier worden de antwoorden op de vragen in de vorige stap samengebracht en kan bepaald worden wat de inhoud en scope van de site(s) moet worden. A: Welke content moet aangeboden worden aan de gebruiker? B: Wat moet de gebruiker precies met de site kunnen doen12? C: Waar gaan de grenzen neergelegd worden; hoe uitgebreid moet de site gaan worden? Bovenstaande vragen zullen per device/context gesteld en beantwoord moeten worden. Voor de mobiele devices, en met name de smartphone, komt Luke Wroblewski’s “Mobile First” concept13 goed van pas, waarbij je als ontwerper uitgedaagd wordt om de focus te leggen op de content die minimaal nodig is en al het andere buiten beschouwing te laten. Dit betekent prioriteiten stellen. Voor de desktop site moeten er ook prioriteiten gesteld worden, alleen wordt de content met de minder hoge prioriteit niet weggelaten maar dieper in de site weggestopt.

12 13

nd

Jennifer Tidwell, Designing Interfaces 2 Edition, December 2010, pp 1, 2 en 3 Luke Wrobleski - Mobile First (November 3, 2009)


20

Stap 3: Structureer Tijd om de gewenste content te gaan structureren. In deze fase moet bekend worden wat de homepage de gebruiker moet gaan bieden. Van daaruit zal de gebruiker naar andere pagina’s (als deze er zijn) kunnen navigeren. “Hierarchical structure” Deze hiërarchische structuur is voor alle devices erg geschikt. Hoe verder de diepte in gegaan moet worden, hoe minder fijn het gebruik voor de smartphone en in mindere mate de tablet gaat worden. “Organic structure” In deze opzet is het makkelijk om de gebruiker het overzicht kwijt te laten raken, dus dit pattern toepassen kan grote negatieve gevolgen hebben. Het is niet erg wanneer de bedoeling is dat de gebruiker op onderzoek uit moet gaan in bv. een educatieve website of game. Voor websites voor de smartphone zal dit patterns zelden gebruikt worden (tenzij het een game bevat), de tablet en desktop zijn geschikt medium om de gebruiker te laten ontdekken. Echter, voor de “gewone” website zal dit pattern zelden een juist effect opleveren. Bron afbeeldingen en titel: Jesse James Garrett, Elements of User Experience Design 2nd Edition, December 2010, pp 93 en 94

Nu is de structuur van de content bekend en kan gekeken worden hoe (ontwerp van de navigatie) de gebruiker deze informatie kan bereiken. Dat wordt in de volgende stap gedaan.

Stap 4: Het skelet opzetten In deze stap wordt gekeken naar de volgende elementen van de website: A: Navigation Design B: Interface Design en C: Information Design A: Navigation Design Navigatie moet zo veel mogelijk beperkt worden en zo veel mogelijk aansluiten op met welke doel de gebruiker de site gebruikt14. Het doel is niet om van de ene naar de andere pagina te gaan, maar om bepaalde content te vinden of een bepaalde actie uit te kunnen voeren (zoals een product bestellen). Daar waar de navigatie voorkomt, moet de relatie tussen de elementen duidelijkheid geven naar de gebruiker. Het moet voor de gebruiker duidelijk zijn waar hij of zij zich op dat moment bevindt op de

14

Alan Cooper, About Face:The Essentials of Interaction Design 3, 2007, pp 232


21

site en welke acties de gebruiker moet ondernemen om zijn of haar doel te bereiken. “Als ik hier op klik verwacht ik hier terecht te komen” – voldoe aan die verwachting. Voor de smartphone zal de navigatiestructuur moet de navigatie zo plat mogelijk blijven en zal het ontwerpen van de navigatie wel een uitdaging zijn, maar geen brede uitwerking nodig hebben. Voor deze navigatiestructuur zijn er enkele patterns die vaak ingezet worden, zoals: “Hub and Spoke” Dit pattern wordt vooral veel toegepast voor smartphone devices. De gebruiker staat op een hoofdpagina en kan van daaruit naar enkele subpagina’s. Op elke subpagina is er de mogelijkheid om terug te gaan naar de hoofdpagina om van daaruit weer naar een andere subpagina te kunnen gaan. “Fully Connected” Hierbij kan de gebruiker van elke pagina naar iedere andere pagina binnen de site. In de afbeelding zijn maar 5 pagina’s gesuggereerd, maar er kunnen vele pagina’s zijn en de site een erg complex geheel maken. Dit pattern is minder geschikt voor de smartphone en in iets mindere mate de tablet computer.

“Multi-level” Dit pattern is eigenlijk alleen geschikt voor website gemaakt voor de desktop. Tot op zekere hoogte zou deze structuur ook voor de tablet en smartphone geschikt zijn, mits de structuur niet te veel de diepte in gaat.

“Pyramid” Dit pattern lijkt heel erg op de hub and spoke, alleen i.p.v dat de gebruiker vanuit elke subpagina terug moet naar de hoofdpagina, kan via deze structuur ook tussen de pagina’s zelf genavigeerd worden. Deze structuur is geschikt voor de smartphone en Tablet. Voor desktop versies zal deze patterns minder vaak voorkomen. Bron afbeeldingen en titel patterns: Jennifer Tidwell, Designing interfaces 2nd Edition, December 2010, pp 80 en 81


22

Maar ook:

Bron afbeelding en titel pattern: Jesse James Garrett, Elements of User Experience Design, 2011, pp 120

“Global Navigation” Deze vorm van navigatie komt op vrijwel iedere website voor. Het hebben van deze Global Navigation zorgt ervoor dat de gebruiker een idee krijgt van de structuur van de website en weet waar hij of zij naartoe kan navigeren.

Global Navigation wordt vaak bovenin of aan de zijkanten van de pagina geplaatst. Voor de smartphone is het vaak handig voor de gebruiker om de Global Navigation onderin de pagina, de zogenaamde Bottom Navigation15, te hebben (meer hierover in hoofdstuk 2.2.1). Voorbeelden van andere vormen van navigatie die toegepast kunnen worden zijn: Local Navigation, Contextual Navigation, Courtesy Navigation en Supplementary Navigation16. Naast al deze vormen van navigeren zijn er ook elementen binnen een website te plaatsen die aangeven waar de gebruiker is. Deze patterns, zoals Breadcrumbs, zijn zelden geschikt voor smartphone devices. Dit gaat uiteraard alleen op als de website specifiek voor de mobiel is ontworpen en er rekening mee is gehouden dat het voor de smartphone gebruiker niet wenselijk diep in een sitestructuur verstrikt te raken. In deze fase kan het helpen om een scenario te schrijven over hoe de gebruiker door de site zou kunnen navigeren. Het scenario geeft aan waar de gebruiker start en wat het uiteindelijke doel is. Het Navigation Design is het ontwerp van het pad dat de gebruiker moet doorlopen. B: Interface Design In dit gedeelte gaat het erom dat de juiste elementen en tools gekozen worden waarmee de gebruiker een bepaalde actie mee kan uitvoeren. Hier vallen dropdown menu’s, radiobuttons, checkboxen, tekstvelden en (call-to-action) buttons enz. onder. Van al deze elementen heeft de gebruiker een bepaalde verwachting van hoe ze zich gedragen, eruit zien en wat er gebeurd nadat ze gebruikt zijn. Het is dan ook echt noodzakelijk dat deze elementen gebruikt worden zoals de conventie voorschrijft. De volgende stap gaat hier verder op in. Door de elementen de juiste vormgeving te geven, kun je nog beter aan het verwachtingspatroon van de gebruiker voldoen.

C: Information Design Dit onderdeel overlapt met de vorige 2 onderdelen. In dit gedeelte moet de vraag beantwoordt worden over hoe de data gepresenteerd moet gaan worden. Visueel, d.m.v. een grafiek, of d.m.v. lijstjes? Ook het toepassen van bijvoorbeeld icoontjes valt onder Information Design. Hierbij moet gedacht 15 16

nd

Jennifer Tidwell, Designing Interfaces 2 Edition, December 2010, pp. 456-458 James Garrett, Elements of User Experience Design, 2011, pp 121-123


23

worden aan het vergrootglas dat vaak gebruikt wordt als button voor het uitvoeren van een zoekopdracht, of het gebruiken van de diskette als data opgeslagen moet worden. Uiteindelijk zal al bovenstaande informatie en bevindingen vorm moeten krijgen; dit wordt gedaan in een wireframe. Waar komen de foto’s, knoppen, tekstvlakken etc.? Bij het maken van de wireframes moet bekend zijn hoe de content gestructureerd is, welke navigatiepratronen gebruikt gaan worden en welke andere patterns in de site opgenomen gaan worden. Voor de smartphone en tablet devices moet er ook nog rekening gehouden worden met Activity Zones en de oriëntatie van deze devices (meer hierover in hoofdstuk 2.2.1)

Stap 5: Visueel ontwerp In deze laatste stap komen de sites voor de verschillende devices elkaar weer tegen. In deze fase kan een herkenbaarheid gecreëerd worden voor de gebruiker door bepaalde visuele elementen of kleuren in de verschillende sites terug te laten komen. Voor de smartphone devices zal het aantal afbeeldingen en “visuele uitspattingen” beperkt moeten worden om een betere performance te creëren. In deze fase wordt een keuze gemaakt in typografie, kleurgebruik, afbeeldingen etc. Erg belangrijk in deze fase is dat alle interactie-elementen zo ontworpen zijn, dat ze als dusdanig opvallen. Een button moet eruit alsof er op geklikt kan worden, een checkbox is vierkanter dan een radiobutton. Allemaal zaken die de gebruiker helpen de site sneller en met meer plezier te gebruiken.


24

2.3.2 CONTENT OP DE 3 TYPEN DEVICES Als dezelfde content getoond op de verschillende devices betekent dat niet automatisch dat dezelfde oplossing voor elk device hetzelfde kan zijn. Zo kan het voor één bepaald contenttype nodig zijn dat op de verschillende devices andere designpatterns gebruikt worden. Hieronder een lijst met enkele typen content zoals deze aangeboden zou moeten worden op de verschillende devices: Tekst (hiermee wordt bedoeld, tekst over meerdere alinea’s) Smartphone: Tekst moet zoveel mogelijk beperkt worden, omdat de mobiele telefoon vaak gebruikt wordt om snel iets op te zoeken en niet op grote stukken tekst te lezen. Het is belangrijk kort en bondig te blijven zodat de gebruiker zo min mogelijk hoeft te scrollen. Een mogelijkheid om wel alle tekst aan te bieden, zal voor gebruikers die meer willen lezen wenselijk zijn. Omdat gebruikers minder van de content zien, is het lastig om goed te begrijpen welke informatie ze getoond wordt. Er moet kritisch gekozen worden welke content de kostbare pixels waard zijn17. Pattern: Als er langere teksten getoond worden, kan de gebruiker hier vaak verticaal doorheen scrollen. Tablet: tekst voor de tablet is fijne content voor de gebruiker. Omdat de tablet vasthoudt als een boek en het scherm geschikt is voor het tonen van veel tekst en dit niet vervelend voor de ogen van de gebruiker is, is veel tekst geen probleem voor de tablet computer. Omdat de schermresolutie beperkt is, is het beter om niet alle tekst in één keer te tonen, zodat er nog ruimte overblijft voor het tonen van andere content. Pattern: Op de tablet is het gebruikelijker om content als pagina’s te tonen, waardoor de gebruiker vaak van pagina naar pagina swiped (horizontaal); pagination. Desktop: Tekst voor de desktop computer wordt vaak als niet prettig ervaren omdat o.a. het beeldscherm zich redelijk ver van de gebruiker afstaat. Omdat je bij de desktop computer de meeste screen real estate hebt en gebruikers over het algemeen de meest uitgebreide content willen zien, is het belangrijk wel alle content te tonen. Door alle tekst in één keer te tonen krijgt de gebruiker meteen gevoel bij de totale hoeveelheid content. Ook belangrijk is dat de tekst zich niet te breed uitspreid over het scherm, dit wordt als zeer onprettig lezen ervaren. Het is dan ook lastiger om tekst te “scannen”. Pattern: scrollen, maar pagination komt ook geregeld voor al zijn deze eigenlijk voor listingpagina’s bedoeld.

17

Jakob Nielsen, Mobile Content Is Twice as Difficult. 28 Februari 2011.


25

Video Smartphone: Een videofilmpje zal bij de smartphone het volledige scherm in beslag nemen. Dit is niet erg, maar het moet dan wel duidelijk voor de gebruiker zijn wat er gebeurd en waar hij/zij zich bevindt. Als de video is afgelopen moet de gebruiker terugkeren naar waar deze vandaan kwam. Korte videoclips zijn zeker geen bezwaar. De smartphone gebruiker zal de telefoon vaak gebruiken als zich een verveelmomentje voordoet en het aanbieden van video is een goede manier om te voldoen aan de behoefte van de smartphone gebruiker, maar er moet opgepast worden voor een overdaad aan video’s. Tablet: De tablet is uitermate geschikt voor videocontent. Doordat de tablet een groter scherm heeft dan de smartphone zou de gebruiker de keuze moeten krijgen tussen het bekijken van de video in kleiner of in full-screen mode. Vrijwel alle videoplayers bieden deze optie. De tabletgebruiker wil vaak geëntertaind worden (media consumeren) en video’s kunnen dan ook in grote getalen aangeboden worden. Desktop: Voor de desktop geldt hetzelfde als voor de tabletcomputer. Omdat je bij de desktop nog meer ruimte hebt als bij de Tablet, zal het uitvergroten naar volledige schermgrootte minder vereist zijn.

Audio Smartphone: Het gebruik van audio is voor smartphones niet wenselijk. Vaak bevinden gebruikers zich binnen een context waarin geluid niet ongestoord afgespeeld kan worden. Onverwacht (ongevraagd) geluid afspelen moet voorkomen worden. De gebruiker zou in deze situaties een headset moeten gebruiken. Naast deze context restricties vraagt audio vaak ook veel van de bandbreedte, en door de vaak langzamere verbinding ook geduld, van de gebruiker. Tablet: De tablet computer wordt het meest in de thuissituatie gebruikt en geluid afspelen is in dat opzicht minder onwenselijk dan bij de mobiel. Echter, Tablets kunnen verbonden zijn met langzamere 3g-netwerken en daarom moet er extra goed gekeken worden wat de meerwaarde is van de audio. Desktop: De desktop computer maakt vaak gebruik van een razendsnelle verbinding en doordat er makkelijk gemultitaskt kan worden (in tegenstelling tot de smartphone en tablet), kan het geluid eenvoudig en snel gereduceerd of uitgezet worden.

Animatie Smartphone: Animaties op websites voor smartphones moeten zoveel mogelijk vermeden worden (voor games en enkele apps geldt een uitzondering, omdat deze juist afhankelijk kunnen zijn van animaties). Bewegende beelden kosten meer bandbreedte dan stilstaand beeld en leidt een gebruiker meestal niet sneller naar de gewenste informatie. Tablet: De tablet is uitstekend geschikt voor het tonen van animaties. Wel moet er rekening Linda Stuurman | Cross-Device Design

26

gehouden worden dat bv de iPad geen Flash ondersteunt. Ondanks dat de tablet op een lagere bandbreedte aangesloten kan zijn, hoeft dit niet nadelig te zijn, aangezien de gebruiker maar met 1 activiteit tegelijk bezig kan zijn. Desktop: Voor desktop computer zijn animaties geen enkel probleem. Ondanks dat is het wenselijk de bestanden niet te groot te maken (lange downloadtijd), zodat de gebruiker niet uit zijn of haar workflow raakt, of uit ongeduld de website weer verlaat voordat deze is ingeladen.

Navigatie Smartphone: Door de zeer beperkte screen real estate en het feit dat de gebruiker de knoppen met de vinger moet aanraken (en dus groter moeten zijn dan bv voor de desktop), is het aantal navigatieknoppen beperkt. Als de gebruiker gebruikt maakt van een pen zullen kleinere navigatieelementen volstaan. De hoofdnavigatie kan boven- of onderaan het scherm geplaatst worden; als de navigatie onderaan geplaatst worden is deze makkelijker te bedienen voor de gebruiker en kan dat binnen bepaalde contexten (als de gebruiker de smartphone met maar één hand kan bedienen) grote voordelen opleveren. Tablet: Voor de tablet is over algemeen voldoende ruimte voor navigatie-elementen. De knoppen e.d. moeten wel van dergelijk formaat zijn dat deze goed bedienbaar zijn met de vinger. Vooral als Breadcrumbs toegepast gaan worden, moeten deze meer ruimte krijgen dan dat ze normaal op desktop sites krijgen (“fat finger” principe). Voor de tablet geldt, net als bij de smartphone, dat er rekening gehouden moet worden met het feit dat de gebruiker een touchscreen tot z’n beschikking heeft. Dit touchsceen wordt op een bepaalde manier vastgehouden en bedient en de plaatsing van de navigatie is daarom niet automatisch hetzelfde als bij websites voor de desktop. Desktop: Door het gebruik van de muis kan de gebruiker veel preciezer elementen op het scherm selecteren, waardoor de knoppen kleiner kunnen worden weergegeven en er nog meer ruimte is voor of meer navigatie-elementen of meer content.

Documenten Smartphone: Documenten zullen via de smartphone zo af en toe eens bekeken worden. Gezien de context waarin het device het meest gebruikt wordt is het niet wenselijk om .pdf, .doc enz. documenten aan te bieden. Tablet: De tablet kan goed omgaan met documenten die aangeboden worden op een website. Downloaden zou langzamer kunnen gaan als er op een 3g netwerk wordt gewerkt, en het aanpassen van documenten zal niet altijd even eenvoudig zijn. De tablet is echter zeer geschikt voor het lezen van gedownloade documenten. Desktop: Ook de desktop computer zal weinig problemen hebben met documenten zoals .pdf, .xls, .doc bestanden. Downloaden, opslaan, aanpassen ed. zijn allemaal goed uit te voeren acties op de desktop computer. Linda Stuurman | Cross-Device Design

27

Afbeeldingen Smartphone: Om de bandbreedte zoveel mogelijk te beperken is het wenselijk zo min mogelijk afbeeldingen te gebruiken voor mobile website. Door o.a. de komst van css3 kan er met veel minder in te laden bestanden toch een website voorzien worden van visuele elementen. De afmeting en bestandsgrootte van afbeeldingen die wel gebruikt worden, moet zo veel mogelijk beperkt worden. De gebruiker bezoekt een website vaak via de mobiel om snel informatie te vinden, (grote) afbeeldingen zorgen alleen maar voor afleiding. Als een fotogalerij een erg belangrijk onderdeel is van de site en ook mobiel beschikbaar moet zijn, zijn daar de nodige design patterns voor omdat ook voor mobiel goed te realiseren. Zo is er bv. de coverflow (ook wel een carrousel18 genoemd). Tablet: De tablet kan goed omgaan met afbeeldingen. Om het snelheid van het inladen van een site te verhogen zijn middelgrote tot kleine afbeeldingen het beste om te gebruiken. Een mogelijkheid geven om afbeeldingen op groter formaat te bekijken (evt. schermvullend), kan uitstekend op de tablet. Het laden kan even duren als de foto’s erg groot zijn, maar de gebruiker heeft daar weinig moeite mee gezien de context waarin het device over het algemeen gebruikt wordt. Uiteraard moet de inlaadtijd zoveel mogelijk beperkt worden. Desktop: Voor de desktop computer is de ontwerper zeer vrij om afbeeldingen te gebruiken. Slideshows, lightboxen e.d. zijn tools om binnen een website afbeeldingen aan gebruikers te tonen. De gebruiker bevindt zich binnen een context waarbij meer tijd beschikbaar is en waarbij de gebruiker meer tijd op een website doorbrengt. In dat geval speelt het visueel design een grote rol, omdat de bezoekers langer op de site kan vasthouden of inspireren.

18

UI Patterns, http://ui-patterns.com/patterns/Carousel


28

2.3.3 TECHNISCHE RANDVOORWAARDEN CROSS-DEVICE DESIGN Touchscreen vs. Traditionele controls (muis, toetsenbord, pen etc) De 2 typen input zorgen ervoor dat er wezenlijk anders nagedacht moet worden over het ontwerp, omdat elk type zo z’n eigen (on)mogelijkheden heeft. Zo moet er bij een touchscreen rekening mee houden dat er niet met een muis over het scherm bewogen kan worden en dat bijvoorbeeld hoverstates zinloos zijn. Ook moeten de klikbare elementen groot genoeg en ver genoeg uit elkaar staan zodat de gebruiker makkelijk het gewenste element aan kan raken met de vinger. Wanneer de gebruiker gebruik maakt van een pen, dan mogen de klikelementen kleiner vormgegeven worden, maar aangezien het aantal devices met deze soort input snel achteruit loopt, is het verstandig rekening te houden met de vinger als input.

Touchscreen smartphone en tablet De smartphone en tablet worden in de meeste gevallen door de gebruiker in de hand(en) vastgehouden en ze beschikken beiden over een touchscreen. Het device kan gedraaid worden door de gebruiker om daarmee een andere ervaring creëren, of gewoon omdat dat de persoonlijke voorkeur heeft. Dit heeft de nodige consequenties voor hoe het ontwerp voor websites voor deze devices eruit zal komen te zien. Pek Pongaet sprak hierover op WindyCityGo, een conferentie in Chicago. Hij gaf aan dat als in het ontwerp rekening is gehouden met hoe de gebruiker het device vasthoudt, dat je daarmee “fatique” voorkomt en de gebruiker, meestal onbewust, de website als prettiger ervaart19.

Bron afbeeldingen: Pek Pongaet , Designing for iPad, 19 april 2011, 17:20min / slide 86, 87 en 88

Ook Dan Saffer heeft een artikel20 geschreven over de zones die voor de gebruiker makkelijk bereikbaar zijn en dat het erg belangrijk is daar rekening mee te houden bij het ontwerpen voor touchscreens.

19 20

Pek Pongaet , Designing for iPad, 19 april 2011, 17:20min / slide 86, 87 en 88 Dan saffer, Activity Zones for Touchscreen Tablets and Phones, 14 Januari 2011


29

Bron afbeeldingen: Pek Dan saffer, Activity Zones for Touchscreen Tablets and Phones, 14 Januari 2011

De gebruiker houdt het device op 1 van de volgende 3 manieren vast: 1: niet; zonder ondersteuning van de handen (op een standaard of op schoot of tafel) 2: met één hand 3: met twee handen Bij manier 1 heeft de gebruiker twee handen tot de beschikking om tot interactie over te gaan met de iPad. Bij manier 2 heeft de gebruiker één hand en één duim tot de beschikking. Bij manier 3 heeft de gebruiker twee duimen tot de beschikking. Om bovenstaande informatie met eigen ogen te zien en kracht bij te zetten is er een usability test uitgevoerd (Bijlage 2 bevat de resultaten).

Daarnaast is het erg belangrijk bij het ontwerpen van interactie-elementen voor touchscreens dat er rekening gehouden moet worden dat de gebruiker het device bedient met de handen en daardoor alleen relatief dikke vingers21 voor zal gebruiken. Knoppen en andere interactie-elementen moeten groot genoeg zijn en ver genoeg uit elkaar staan om goed bedienbaar te zijn.

21

Pek Pongaet , Designing for iPad, 19 april 2011, 16:30min


30

Zeit.de heeft een website laten ontwikkelen door Information Architects (Tokyo, Japan) die geoptimaliseerd is voor de iPad22.

Afbeelding: Zeit.de geoptimaliseerd voor de iPad

De knoppen bovenin het scherm zijn groot en als gebruiker zul je niet per ongeluk de verkeerde knop aanraken. Ook zijn de knoppen aan de zijkanten geplaatst (al dan niet bewust) waardoor je deze nog steeds kunt bereiken met de duimen. Daardoor wordt je als gebruiker niet verplicht het device met één hand los te laten.

22

Editorsweblog.org, Die Zeit launches iPad-optimised version of its website, November 18, 2010


31

Zeit.de heeft ook een website geoptimaliseerd voor smartphone gebruikers. Daar waar bij de site voor de iPad versie de navigatie goed en intuïtief te bedienen is, is daar bij de smartphone versie geen sprake van. De navigatie bevindt zich bovenin het scherm en is lastig te bereiken wanneer het device met maar één hand bediend kan worden. Tevens zijn de knoppen/links lastig aan te klikken op een touchscreen.

afbeelding: m.zeit.de “geoptimaliseerd” voor de mobiele telefoon

2.4

CONCLUSIE

Het cross-device design proces is een complexe aaneenschakeling van keuzes die gemaakt moeten worden ten aanzien van de wensen van de gebruiker en het device, de context en content. De websites voor de desktop en iPad kunnen in veel gevallen dezelfde content bevatten. De manier waarop deze content aangeboden wordt zal echter wel anders zijn. Voor een groot deel wordt dat bepaald doordat de gebruiker ander inputmogelijkheden heeft. Daarnaast spelen technische randvoorwaarden en de context waarin de devices gebruikt worden een belangrijke rol. Met de komst van HTML5 en CSS3 (en daarmee ook responsive webdesign) kan een site zich anders gedragen afhankelijk van het device. Cross-device design en responsive web design kunnen om die reden goed hand in hand samengaan.


32


33

3. TECHNISCHE MOGELIJKHEDEN MET CSS3 EN MEDIAQUERIES


34

De meeste huidige websites worden opgebouwd in (x)html en css2.1. In de html komt de inhoud van de website te staan en d.m.v. de css kan de webpagina de styling aannemen zoals de ontwerper dat heeft bedoeld. Dat is, gezien de nieuwe ontwikkelingen, een statische oplossing omdat, als je de website met verschillende devices bezoekt, je altijd dezelfde website te zien krijgt. Er kan beperkt rekening gehouden worden met de resolutie van het scherm en helemaal geen rekening gehouden worden met het type device. Met de nieuwe technische mogelijkheden die HTML5 en CSS3 in combinatie met mediaqueries biedt, kan de html en css aangepast worden aan de hand van welk (type) device gebruikt wordt. Dit wordt ook wel Adaptive Layouts of Responsive Webdesign genoemd. De html verandert niet, maar doordat je aan kunt geven dat bij een bepaalde schermresolutie een ander stylesheet, oftewel layout, gebruikt moet worden, kan de website een heel ander uiterlijk krijgen. Dit kan zo ver doorgevoerd worden dat de website voor bijvoorbeeld de smartphone de juiste content op de juiste plaats toont. Niet alleen schermresolutie kan rekening mee gehouden worden, maar ook de oriëntatie, portrait of landscape. Voor grotere projecten, zal responsive webdesign beperkt toepasbaar zijn. De content die getoond moet worden is afhankelijk van de context waarin de gebruiker zich bevindt en het device waarmee de content opgevraagd moet worden. Daarom zal één website die zich aan de schermresolutie alleen aanpast niet kunnen volstaan. Er zal voor elk device gekeken moeten worden binnen welke context het meest gebruik zal worden gemaakt en welke content daar bij hoort23. Daarna kun je responsive webdesign wel toepassen, zodat de website voor dat specifieke device optimaal op het scherm getoond wordt.

23

Alan Cooper, AboutFace: The Essentials of Interaction Design 3, 2007, pp. 182


35

Enkele voorbeelden24:

http://www.alsacreations.fr/

http://jonikorpi.com/

24

http://line25.com/articles/showcase-of-outstanding-responsive-web-designs


36

http://calebacuity.us/

http://3200tigres.wwf.fr/


37

Hoe werkt het? HTML / CSS2.1 In de standard html css oplossing worden dezelfde stylesheets gebruikt, ongeacht het device of schermresolutie dat gebruikt wordt: Bron afbeelding: http://www.webcoursesbangkok.com/blog/web-design-blog/google-fonts/

HTML5 / CSS3 Met CSS3 kan aangegeven worden welk stylesheet gebruikt moet worden, afhankelijk van de schermresolutie. Hier een voorbeeld van hoe de stylsheets aangeroepen moeten worden:

Bron afbeelding: http://ckeeley.tumblr.com/

Hier is te zien dat er verschillende stylesheets beschikbaar zijn. Dit stylesheet zal gebruikt worden bij alle schermen groter dan 1024 breed.

Dit stylesheet zal gebruikt worden bij schermen minder breed dan 1024px. Dit stylesheet zal gebruikt worden bij handeheld devices die een schermresolutie hebben die minder breed zijn dan 768px.


38

3.1

VOORDELEN, NADELEN EN CONCLUSIE

Voordelen Het grootste voordeel van deze nieuwe techniek is dat met één website voor verschillende devices ondersteuning geboden kan worden. Dit zorgt ervoor dat een klant die voor deze oplossing kiest, kosten kan besparen omdat er maar één website gemaakt hoeft te worden. De kosten zijn echter niet gelijk aan het laten maken van een traditionele site voor de desktop, aangezien er in het ontwerpproces en op frontend-gebied meer werk verzet moet worden om deze functionaliteit toe te voegen. Het meest kostenbesparend is de flexibiliteit die CSS3 biedt (aanpasbaarheid is minder tijdrovend dan voorheen). Ook als er alleen een website voor bijvoorbeeld de smartphoneof tablet is gemaakt, kunnen mediaqueries nog steeds uitkomst bieden. Gebruikers hebben hun smartphones op verschillende manieren vast (portrait of landscape) en mediaqueries kunnen er voor zorgen dat de site een andere layout krijgt afhankelijk van de oriëntatie.

Nadelen Een nadeel is dat de website, ongeacht welk device, volledig geladen moet worden. Voor de smartphone is de hoeveelheid content die getoond moet worden vaak een stuk kleiner. Met CSS3 kan de content die niet getoond moet worden, uitgezet worden. Dit betekent niet dat deze content niet wordt geladen. Websites die gebruik maken van CSS3 zullen niet in alle browsers optimaal functioneren. Daar staat tegenover dat browsers op de handheld devices nieuwer zijn en voor een overgroot deel deze functionaliteit wel ondersteunt. Er zijn niet voldoende mogelijkheden om rekening te houden met de context waarin het device gebruikt wordt25. Wel toegepast kan het worden voor voornamelijk de kleinere websites zijn, die ook qua budget voor deze oplossing kunnen kiezen om zo hun website betaalbaar cross-device geschikt te maken.

Conclusie Deze techniek heeft als groot voordeel dat het een website flexibel kan maken en het cross-device design proces kan ondersteunen. Aangezien in het onderzoek in de hoofdstukken hiervoor naar voren is gekomen dat het ontwerpen voor de desktop en iPad op bepaalde vlakken dicht bij elkaar liggen, is dat voor de smartphone een ander verhaal. In het geval van Respsonsive Webdesign is dat niet anders. Voor de smartphonegebruiker zou het beter zijn als de website losstaat van de website voor andere devices. Op die manier kan de site met zo min mogelijk data, snel ler en effectiever functionerend gebouwd worden. Als de content en presentatie voor de desktop en iPad te veel van elkaar verschillen, zal ook in dat geval een aparte website opgezet moeten worden.

25

Jeff Croft, On “Responsive Web Design” and the mobile context, 8 Juni 2010


39

4. ONDERWIJSINSTELLINGEN OP HET WEB


40

Om een beeld te krijgen van hoe onderwijsinstellingen gebruik maken van cross-device oplossingen voor hun website, zal naar een aantal onderwijsintellingen gekeken worden hoe zij dit doen. Gekeken wordt o.a. naar Schouten en Nelissen, NCOI, Lectric en iets diepgaander ook naar NTI en Hogeschool Utrecht. Er zijn velen instituten die onderwijs of cursussen aanbieden voor mensen die dat naast hun werk willen doen. Uiteraard zijn er de MBO-, HBO- en Universitaire deeltijdopleidingen aan hogescholen, maar er zijn ook instituten als de NTI, NCOI, LOI, Schouten & Nelissen, Open Universiteit, Lectric en ISBW. Op het internet richten zij zich voornamelijk op de toekomstige student, waarbij het aanbieden van hun opleidingen- en cursuspakketten het belangrijkst is. Bijna allemaal bieden ze persoonlijk advies of begeleiding aan en enkele instituten bieden nieuwe studenten een cadeau als dank voor inschrijven. Opvallend is dat social media maar matigjes wordt ingezet. Een nieuwsbrief is vaak de enige manier om automatisch op de hoogte te blijven van de laatste ontwikkelingen. Lectric heeft op een onopvallende manier een link op hun site staan naar een LinkedIn-groep. Daarnaast hebben ze een Facebook en Twitter account, die regelmatig bijgehouden wordt. Contact kunnen opnemen met de instelling wordt op elke site erg duidelijk aangegeven en er worden meerdere opties gegeven; zelf bellen, teruggebeld worden of per e-mail.


41

4.1

DOELGROEPEN

Bij onderwijsinstellingen zijn 4 zeer verschillende hoofddoelgroepen te definiëren. Deze zijn: 1. Studenten 2. Potentiële studenten 3. Werknemers van de instelling 4. Oud-studenten Bij aankomende studenten moet de site zich vooral richten op conversie. Bij de doelgroepen 2 en 3 gaat het om gebruikers die vaak gebruik zullen maken van de website (retentie). Zij zijn vaker op zoek naar zeer specifieke of persoonlijk informatie, terwijl aankomende studenten zich vaak willen oriënteren in wat de instelling te bieden heeft. Daarnaast zijn er nog doelgroepen met andere belangen zoals oud-studenten

4.2

CROSS-DEVICE OPLOSSINGEN BIJ ANDERE ONDERWIJSINSTELLINGEN

Het eerste dat opvalt als gekeken wordt naar de weboplossingen van vergelijkbare instellingen is dat zij geen mobiele site hebben. NCOI, LOI, Schouten & Nelissen, Lectric, Open Universiteit en ISBW zijn gerenommeerde bedrijven die geen gepaste oplossing bieden voor de iPad en smartphonegebruikers.


42

Hogeschool Utrecht

Afbeelding: Screenshot desktop site Hogeschool Utrecht

In 2009 heeft de Hogeschool Utrecht als eerste hogeschool een site speciaal voor de mobiele telefoon laten ontwikkelen.


43

Screenshots mobiele site Hogeschool Utrecht

Het eerste dat opvalt aan deze mobiele site is dat het bijna geen content bevat. De gebruiker kan enkel informatie krijgen over de HU zelf, adressen en contactgegevens. Daarnaast zijn er 2 menuitems die de gebruiker dieper in de site brengt en waar informatie gevonden kan worden over open dagen en welke opleidingen er gevolgd kunnen worden. De mobiele site had een stuk gebruiksvriendelijker kunnen zijn als bijvoorbeeld de iconen/knoppen die nu op een vervolgpagina staan, al op de hoofdpagina hadden gestaan. Er is dan meteen een overzicht voor de gebruiker wat de scope van de site is. Op de desktop versie van de site wordt de nadruk gelegd op de subsites die bezocht kunnen worden (zoals master.hu.nl en cursussen.hu.nl), laatste nieuws en evenementen. Daarnaast kan de gebruiker, een toekomstige student, een wizard doorlopen om de juiste opleiding te vinden. Grote nadruk wordt gelegd op de aankomende Open Dag.


44

NTI

Afbeelding: Screenshot desktop site NTI

Op deze website wordt in één oogopslag duidelijk wat NTI te bieden heeft. In de hoofdnavigatie staan items als University, HBO, MBo etc. die de gebruiker meteen verteld voor wat voor opleidingen ze er terecht kunnen. NTI probeert extra studenten en cursisten te werven door een gratis digitale camera weg te geven bij inschrijving. Verder is duidelijk aangegeven dat je contact op kunt nemen, in kunt schrijven voor de nieuwsbrief of meer informatie in de vorm van een studiegids kunt aanvragen. De nieuwsbrief is eigenlijk de enige manier om automatisch informatie te krijgen van NTI. Social media in de vorm van Twitter is er wel, maar is zo ver weggestopt in de site en wordt op dusdanige manier gebruikt dat dit niet interessant is om te volgen.


45

De mobiele site van de NTI toont na een korte introductie de hoofdnavigatie in een verticale lijst. Dit zorgt ervoor dat de gebruiker een idee gegeven wordt waar de gewenste informatie te vinden is. De belangrijkste items die op de desktop staan, komen ook hier weer terug, zoals contactgegevens, aanvragen van informatie en de aanbieding van een gratis digitale camera. Wat het ontwerp betreft is er goed rekening gehouden met de mobiele telefoon, alleen is de website verouderd en werkt deze site niet optimaal op de smartphones (met touchscreens). De knoppen zijn veel te klein en staan dicht op elkaar. Ook is ere en vaste breedte gegeven aan de site waardoor de beschikbare ruimte onvoldoende benut wordt.

Afbeelding: Screenshot mobiele site NTI

4.3

CONCLUSIE

Het doel dat alle opleidingsinstituten met hun website hebben is het werven van nieuwe studenten en cursisten. Daar worden de volgende zaken voor ingezet: - nieuwsbrieven - makkelijk contact opnemen (terugbelservices) - gratis brochures en studiegidsen aanvragen - cadeau als dank voor inschrijving - gratis workshop of proeflessen Er wordt door deze instituten over het algemeen geen andere website voor de smartphone of tablet aangeboden. De enigen die dat doen, staan hierboven genoemd, de Hogeschool Utrecht en de NTI. De kwaliteit van de mobiele sites voldoen niet aan de huidige wensen die gebruikers stellen aan dergelijke sites. Daarnaast valt op dat de sites zich zowel voor desktop als mobiel richten op de aankomende studenten. Op zich is dat niet erg, maar er is nergens een link te vinden voor huidige studenten om informatie te vinden die voor hen van belang is.


46


47

5. INVENTARISATIE BESTAANDE WEBSITE: DEBAAK


48

5.1

DOELSTELLINGEN HUIDIGE SITE

DeBaak heeft een 4 websites; drie speciaal voor de desktop computers (debaak.nl, blog.debaak.nl en debaak.tv ) en één voor de smartphone gebruiker (m.debaak.nl). Uit de huidige websites kan worden opgemaakt dat hun hoofddoelstelling met deze websites het aanbod van cursussen tonen is en de gebruiker de mogelijkheid geven zich hiervoor in te schrijven. Een tweede doelstelling is het inspireren van de doelgroep d.m.v. video’s, artikelen en geluidsfragmenten. De Baak heeft een eigen Youtube-kanaal en een aparte site voor deze video’s opgezet. Ondanks dat de hoofdnavigatie van debaak.tv hetzelfde is als bij de .nl site, kan je via de .nl site geen enkele link vinden naar de .tv site. Eenmaal van de .tv site weggenavigeerd te zijn, kun je daar niet meer terugkomen, tenzij je de url in de adresbalk intikt. Zowel de desktop sites als de mobiele site halen hun informatie uit dezelfde database en werken dus goed samen. De content hoeft maar één keer gewijzigd te worden en het wordt op alle sites aangepast. De websites draaien op het systeem van Sitecore.

5.2

WEBSITE DESKTOP

Homepage www.debaak.nl - April 2011


49

USER EXPERIENCE DESIGN, VISUAL DESIGN & PERFORMANCE Als er gekeken wordt naar het User Experience Design van de website en daar de doelstellingen naast gelegd worden, wordt één van deze doelstellingen duidelijk behaald; het tonen van informatie voor eventueel nieuwe cursisten en het aansporen tot aanmelden. Het gedeelte van de site dat de (nieuwe) cursisten moet inspireren krijgt erg weinig ruimte op de site of is niet duidelijk genoeg aanwezig. De flash-video biedt inspiratie, maar gebruikers zullen van te voren niet weten wat er gaat gebeuren of wat voor content zij kunnen verwachten als er op één van de links geklikt wordt. Op de mobiele versie is het inspiratiegedeelte volledig afwezig. Algemeen

De website is vrij smal opgezet (900px) en is opgedeeld in 3 kolommen. De linker- en rechterkolom zijn smal en de middelste kolom, waar zich de meeste content bevindt, is breed genoeg om teksten goed en fijn leesbaar te kunnen tonen. In de rechterkolom staat het navigatiemenu, wat voor de meeste gebruikers niet de plaats zal zijn waar zij dit verwachten.


50

Het Visual Design van de site ligt geheel in de lijn met de andere producten die de Baak heeft ter promotie heeft, zoals informatiefolders etc. Echter, voor print mag het misschien een geschikt ontwerp zijn, voor het web is het wat ongelukkig gekozen. Alle getekende elementen bieden weinig ruimte voor uitbreiding of het gemakkelijk aanpassen van de content. De Flash animatie die gebruikt wordt op de homepage en in de header, is ook erg ongelukkig gekozen. Ten eerste is het een animatie waarvan niet meteen duidelijk is wat deze de gebruiker voor nuttige informatie biedt. Bijkomend; Na de lancering van de site is Apple gekomen met de iPad waarin Flash niet ondersteund wordt en de site. Als laatste en niet onbelangrijk; de animatie is 5Mb groot en het laden van de video duurt met een snelle verbinding meerdere seconden! Homepage De homepage is anders dan alle andere pagina’s op de site. De pagina bevat een logo, navigatiemenu, roterend flashfilmpje en een footer-gedeelte met links. Binnen de flashfilm kunnen links* aangeklikt worden, waarna een pop-up getoond wordt met verwante informatie. * De links zijn voorzien van een icoontje die aangeeft welk type content zich in de pop-up bevindt: tekst, video of audio.

Header De header bevat het logo en een doorkijkluikje naar hetzelfde flashfilmpje dat op de homepage is gebruikt. Er is een knop aanwezig die het volledige flashfilmpje zal tonen. Binnen dit filmpje kan de gebruiker informatie in de vorm van pop-ups tot zich nemen. Naast het logo zijn nog 2 knoppen te vinden die de gebruiker de mogelijkheid geeft te switchen tussen de Engelstalige en Nederlandstalige versie van de site. Navigatie Het navigatiemenu dat op de homepage gebruikt is, wordt op alle pagina’s consistent op dezelfde plaats getoond. Het menu, verticaal, staat in de rechterkolom van de site. In de navigatie hebben de menu-items een hover- en active state. Echter, bij “coaching” en “Mybaak” is deze kleur identiek aan die van de default kleur. Het zal de gebruiker niet duidelijk zijn waar hij/zij zich binnen de site bevindt als er binnen deze menu-items genavigeerd wordt. Een breadcrumb is gebruikt, maar niet consequent doorgezet. Als de gebruiker zich bijvoorbeeld op een opleidingspagina bevindt dan is het breadcrumb niet meer aanwezig. Content De content is opgedeeld in 3 gedeelten. Dit zijn het “bannergedeelte”, de “linkerkolom”en “content”. De invulling van deze 3 blokken is op dusdanige manier gedaan dat de site vrij rommeling en onoverzichtelijk overkomt, waardoor het onduidelijk is wat de Baak met de content wil zeggen. De linkerkolom bevat blokken als gerelateerde pagina’s, inspiratie, zoekfunctie (d.m.v. filters) of een opleidingenvergelijker. De linkerkolom is echter zo smal dat de content daar niet uit het oog springt en zo weinig aandacht krijgt, dat de gebruiker minder gebruik maakt van de content daar dan als er meer de nadruk op zou zijn gelegd.


51

Het contentblok bevat teksten, afbeelding en call-to-action knoppen. De manier waarop het blok ingevuld is, maakt het een rommelig geheel; teksten hebben verschillende grootte en verschillende ruimten tussen de teksten. Op een enkele pagina wordt een “quote” geplaatst. Deze is niet als dusdanig vormgegeven en het doel van deze quote valt in het niet omdat niet duidelijk is waar het op slaat.

Social Media deBaak houdt profileert zich alleen op Twitter (@deBaak) met op 1 mei 2011 2263 volgers. Er wordt regelmatig iets geplaatst en er wordt door deBaak goed gereageerd op tweets van volgers. Op Facebook is een bedrijfspagina voor deBaak, maar hier wordt geen gebruik van gemaakt. Footer De footer is vrij hoog en bevat links naar belangrijke pagina’s of pagina waar de Baak extra aandacht op wil vestigen.

(CONTENT)INVENTARIESATIE EN SITESTRUCTUUR Om tot een goed herontwerp te komen, is een inventarisatie gemaakt van de bestaande content, maar misschien nog wel belangrijker, de structuur van de site. Na het bekijken van de structuur kan geconcludeerd worden dat de informatie erg gefragmenteerd aangeboden wordt. hierdoor zal de gebruiker snel de weg kwijt zijn binnen de site en niet weten waar hij of zij zich bevindt. Met het herstructureren van de content valt er nog de meeste winst te behalen bij een re-design van deze site.


52

CONSLUSIE / VERBETERPUNTEN De hoofdpagina zou meer informatie moeten bevatten over wat de Baak wil vertellen en vooral voor wie zij er zijn en wat ze doen (bv een subtitel als “Opleidings- en kennisinstituut voor leider- en ondernemerschap.”). De Flashvideo bevat na het inladen te weinig informatie om gebruiker duidelijk te maken wat de site precies inhoudt. Om daar achter te komen is minstens één klik nodig (de icoontjes in de links zijn onduidelijk en het werd pas na vele bezoeken duidelijk dat de icoontjes verschillend waren). Hierdoor zullen veel gebruikers de site verlaten voordat ze deze echt bezocht hebben. In de Flashvideo is het niet duidelijk waar de gebruiker terecht zal komen of welke content getoond zal gaan worden. Er wordt geen verwachtingspatroon gecreëerd. Om in de woorden van Alan Cooper te spreken, de gebruiker kan last krijgen van “navigational trauma”26. Door de gekozen lay-out en visueel ontwerp ziet de site er rommelig uit en bereikt de Baak niet de doelstelling van het inspireren van gebruikers. De aparte site (deBaak.tv) hoeft niet nodig te zijn als je de .nl website goed ontwerpt en de video’s integreert. Het zoveel mogelijk bundelen van informatie helpt de gebruiker te vinden wat hij of zij zoekt of meer relevante informatie te vinden dan waar in eerste instantie de site voor werd bezocht. Door het menuverticaal te plaatsen neemt het meer ruimte in beslag dan nodig en dat heeft vooral met zo’n smalle layout een grote impact. Het zou beter zijn het menu horizontaal te plaatsen, zodat er meer ruimte is voor content. Het weglaten van de flashvideo en het plaatsen van de hoofdnavigatie in de header zal een veel logischere oplossing zijn en het navigeren voor de gebruiker vereenvoudigen. Er zal dan ook meer ruimte vrijkomen voor content. Over het algemeen moet er goed gekeken worden hoe deBaak.nl informatietechnisch in elkaar zit. De content lijkt erg versnipperd te zijn en het zou goed zijn een contentanalyse te maken en een herstructurering door te voeren. Echter, na een kijkje te hebben genomen in de back-end, lijkt de content wel gestructureerd in de database aanwezig te zijn, maar wordt deze erg versnipperd op de site aangeboden. De twee navigatie-elementen (flashvideo en het rechtermenu) zouden teruggebracht moeten worden naar éé navigatie-element. Op het gebied van social media en de gebruiker de mogelijkheid tot interactie te geven, zou veel meer aandacht mogen krijgen. Er is een Twitter-account en Youtube-kanaal; deze mogen een stuk dominanter aanwezig zijn en het is ook aan te raden om een site als LinkedIn te betrekken. In tegenstelling tot vele andere opleidingsinstituten zijn op de site van deBaak weinig call-to-action elementen te vinden. Knoppen als “bel me terug”, “Schrijf je in” mogen best duidelijker aanwezig zijn. Ook het aanbieden van gratis workshops, open dagen of zoiets als terugkomdagen voor oudcursisten, zorgen dat de afstand tussen deBaak en de gebruiker van de site verkleind wordt.

26

Alan Cooper, About Face: The essentials of Interaction Design 3, 2007, pp 233


53

5.3

WEBSITE MOBIEL

Homepage m.debaak.nl - April 2011

Deatilpagina m.debaak.nl - April 2011 ->

USER EXPERIENCE DESIGN, VISUAL DESIGN & PERFORMANCE De gebruiker kan browsen door de opleidingen die deBaak te bieden heeft. De informatie over elke opleiding is kort en bondig en de gebruiker kan de informatie doorsturen naar een e-mailadres. Via de mobiele site kan men zich niet inschrijven voor een cursus. De pagina’s onder de menu-items Maatwerk en deBaak.tv bevat weinig informatie. De evenementenpagina geeft een lijst weer met aankomende evenementen. Voor elk evenement is een detailpagina waar de gebruiker enkele mogelijkheden heeft. Er kan een email doorgestuurd worden, of contact opgenomen worden met de contactpersoon (telefoon & e-mailadres). Daarnaast staat er een link “voor meer informatie en inschrijving”, waarna de gebruiker de melding krijgt dat de pagina voor de mobiel niet beschikbaar is. De gebruiker moet dan op de link klikken die ze naar de reguliere website brengt. Positief is dat er rekening is gehouden met het feit dat het voor smartphone-gebruikers vaak lastig is om tekst in te voeren. Zo wordt er geen inschrijfformulier aangeboden, daarvoor zal de gebruiker naar de reguliere site moeten. Voor de mobiele site is dezelfde huisstijl aangehouden als voor de offline media en website voor de desktop. Op zich is dat natuurlijk een goed uitgangspunt (herkenbaarheid).


54

Er is rekening gehouden met de grootte van de knoppen, al zijn de lijsten met opleidingen iets aan de kleine kant, de kans bestaat dat de gebruiker de verkeerde opleiding aanraakt.

CONSLUSIE / VERBETERPUNTEN De mobiele site is nu het meest interessant voor gebruikers die een cursus zouden willen volgen. Er wordt geen content aangeboden voor huidige of oud-cursisten. Dit is een groot gemis, omdat de binding met de gebruikers niet vastgehouden wordt; ze hebben geen reden om terug te komen naar de website. Meer inspiratie en meer content die de gebruiker uitdaagt tot interactie zou de mobiele site goed doen. De mobiele site is qua structuur erg overzichtelijk. Als je content aanbiedt op een mobiele site, moet ook alle content daarbinnen te vinden zijn, of heel duidelijk gesteld worden dat de gebruiker de mobiele site gaat verlaten en naar de reguliere site wordt gestuurd. Dit gebeurd niet en de mobiele site kan in dat opzicht ook nog sterk verbeterd worden. Het visueel ontwerp zou beter geoptimaliseerd kunnen worden voor de smartphone. Er zijn enkele telefoonnummers op de site geplaatst; deze zouden best een knop kunnen zijn waardoor de gebruiker met één klik dat nummer kan bellen. Wat social media betreft staan op enkele pagina’s een tweet. Er is echter geen interactiemogelijkheid voor de gebruiker van de site. De social media zou nog meer en beter ingezet kunnen worden.


55

5.4

CONCLUSIES

De mobiele site is een stuk beter dan de reguliere site en er is duidelijk rekening gehouden met de context waarbinnen deze gebruikt wordt. Toch komt de mobiele site niet zo goed uit de verf als gewenst. Eén van de doelen van deBaak is mensen inspireren. Dat wordt met deze mobiele site niet bereikt en met de reguliere site maar beperkt. Doordat de huisstijl niet geheel geschikt is voor online media komt de site niet goed uit de verf. Vanwege de getekende elementen moeten er veel afbeeldingen gebruikt worden, wat nadelig is voor de performance. De afbeeldingen schalen ook niet goed mee met de verschillende schermresoluties, waardoor de site op enkele devices niet optimaal kan presteren. Het logo-ontwerp kan best behouden worden, maar voor de rest van de site zou het niet misstaan een herontwerp te maken en een inspiratiegedeelte (om de eerder genoemde ‘Microbreaks’ mee te vullen) toe te voegen, waardoor dit product optimaal kan gaan presteren en de gebruiker beter kan gaan bedienen op de devices waar het voor bedoeld is. Op de reguliere site is het vinden en vergelijken van opleidingen is erg omslachtig en enkele opleidingen zijn niet bij een bepaald thema ondergebracht. Een herstructurering van deze content is noodzakelijk om alle opleidingen makkelijk vindbaar te maken. En als deBaak vergeleken wordt met andere opleidingsinstituten dan is het opvallend dat deBaak de toekomstige cursisten niet wil “binnenlokken” met cadeaus of gratis workshops of lessen. Het is aan te raden dit soort wel te gaan doen, omdat je daarmee de drempel voor de gebruiker om echt in te schrijven drastisch verlaagd wordt. deBaak heeft nog niets voor de iPad ontwikkeld en als ze hier iets voor wil gaan doen zou het verstandig zijn om meteen rekening te houden met de context waarin het device gebruikt wordt en welke technische beperkingen (zoals Flash en het touchscreen) het heeft.

De Baak wil veel met de website en het is positief en goed merkbaar dat zij continue bezig zijn om hun online uitstraling te verbeteren en hoe zij de gebruiker beter van dienst kunnen zijn d.m.v. hun website(s).


56


57

6. CONCEPT EN REALISATIE: DE VERNIEUWDE DEBAAK


58

6.1

CONCEPT & VISUALS

Stap 1: Strategie en needs & wants doelgroep A: Wat wil de klant met de site bereiken; wat zijn de doelstellingen? Uit een samenvatting die deBaak zelf heeft opgesteld eind 2010 laten ze duidelijk blijken wat ze met de website(s) willen bereiken:

“Ambitie Community building als uitgangspunt, de gebruiker (intern en extern) wil deel uitmaken van de Baak, wil bij de Baak horen. Informatief en inspirationeel zijn. “We share knowledge. Maak zichtbaar wat er gebeurt in de community rondom de Baak. Ga geen community creeren, die is er al. Haak er op in. Wees de verbinder van mensen rondom leren. Instappen op kennis. Faciliteer om verschillende bronnen bij elkaar te brengen, Verbind op inhoud. Dat hoeft niet alleen via je eigen site. Dat kan ook via twitter, linkedin. Zorg voor inspirerende topics.” Doel website De site heeft tot doel het opbouwen van relaties. We willen mensen laten terugkomen. We willen inspireren. Nu is er te weinig te zien op dat gebied. Geen workshops, geen presentaties, geen interactie. Het inspiratiestuk kan je echt op je doelgroep targetten. We willen nadruk leggen op conversie om mensen zo goed mogelijk te helpen. Mensen hebben een leervraag en willen daar hulp bij. Bied die hulp zo goed mogelijk door aan te sturen op een persoonlijk gesprek, telefonisch of face-to-face. Mobiele toepassing 80% van de sites die via mobiel geraadpleegd worden, gaan over nieuws en het verdrijven van de verveling. Hou het simpel wat je wilt via mobiel. Is het je routebeschrijving, de tijden waarop het programma begint? En/of is het inspiratie/kennis wat je bv dagelijks vernieuwt. Speel met nieuwe media.” Uit bovenstaand verhaal kan worden geconcludeerd dat de 3 hoofddoelen die deBaak gesteld heeft gesteld zijn het inspireren van hun (oud-)cursisten, het aanbieden van cursussen (conversie) en het faciliteren van een bestaand netwerk (retentie).


59

B: Wie is de doelgroep en wat willen en verwachten ze van de klant/website? De doelgroep bestaat uit hoger opgeleiden met een (toekomstig) leidinggevende functie. (deBaak omschrijft de doelgroep als: leidinggevenden, afdelingshoofden, managers, professionals, stafmedewerkers, directieleden, hoger management, ondernemers, ambitieuze starters, projectleiders en bestuurders). De leeftijd varieert behoorlijk, van de vroege twintigers tot mensen die tegen het eind van hun carrière aanzitten. Het aantal mannen ligt hoger dan het aantal vrouwen. Naast opleiding en functie is de doelgroep in nog 2 groepen onder te verdelen: een potentieel nieuwe klant en een bestaande klant. Een potentieel nieuwe klant wil voornamelijk informatie over wat de Baak hen te bieden heeft op het gebied van opleidingen, trainingen, cursussen ed. Deze doelgroep kan d.m.v. een inspiratiegedeelte op de site aangespoord worden om zich in te schrijven bij deBaak. Een bestaande klant die bezig is met een opleiding zal op dat moment minder bezig zijn met het zoeken naar opleidingdetails, maar meer geinteresseerd zijn in datgene dat direct voor hem of haar van belang is (zoals “zijn er voldoende aanmeldingen om de opleiding door te laten gaat?” of “ik heb haast en weet niet meer op welke locatie ik moet zijn”). Voor deze doelgroep zal persoonlijke informatie en een inspiratiegedeelte de gebruiker terug doen laten komen. Deze doelgroep zal meer gebruiksmomenten kennen dan een potentieel nieuwe klant. Leidend in het vervolg van het ontwerpproces zijn de persona’s die de 2 doelgroepen representeren.


60

Persona – bestaande klant Naam: Rob van Vleuten Leeftijd: 42 jaar Burgelijke Staat: gehuwd met Emily , geen kinderen Woonplaats: Diemen Opleiding: HBO Bedrijfskunde Beroep: Projectmanager sportevenementen

“ik wil graag snel de laatste stand van zaken weten over de opleiding waar ik me voor ingeschreven heb” Werk Rob is vaak onderweg voor zijn werk, zijn agenda staat meestal behoorlijk volgepland. Hij geeft leiding over een team van zo’n 9 mensen die elk hun eigen taken binnen een project moeten uitvoeren. Deze mensen hebben, net als Rob, veel met werkdruk te maken. Rob moet, als hij onderweg is, regelmatig opzoeken hoe laat hij waar moet zijn voor de volgende afspraak. Naast z’n werk Naast z’n werk gaat Rob elke week met één of meerderen vrienden tennissen. Als hij langer dan een paar dagen vrij heeft reis hij graag met zijn vrouw naar het Middellandse Zeegebied. Hij probeert één keer per jaar een verre reis te maken. Social Media Rob gebruikt veel Social Media, vooral Twitter. De updates van anderen zijn kort en fijn om door te lezen en zelf vindt hij het fijn dat de berichten zo kort moeten zijn; die zijn snel geplaatst. deBaak Rob heeft recentelijk een teamcoach op locatie over de vloer gehad om zijn team op scherp te zetten, zodat iedereen de schouders eronder gaat zetten om het grote evenement op tijd georganiseerd te krijgen. Deze teamcoaching heeft Rob en het team erg veel goed gedaan en Rob heeft zich daarom ingeschreven voor een vervolgcursus waarbij hij zich vooral als individu verder wil ontwikkelen. Hij is erg tevreden over de diensten die de Baak levert en zal ze dan ook aanraden bij andere mensen.


61

Persona – potentieel nieuwe klant Naam: Janneke Leeftijd: 44 jaar Burgelijke Staat: gescheiden, 1 kind. Samenwonend met Dirk (heeft 2 kinderen) Opleiding: HBO Economie Beroep: Marketing manager bij grote bank

“ik wil een cursus of opleiding vinden die past bij mijn wensen en behoefte om mij persoonlijk verder te ontwikkelen” Werk Janneke is leidinggevende van de marketing en communicatieafdeling van een grote bank en heeft een team van 20 werknemers onder zich. Zij doet dit al enkele jaren en wil zich graag verder ontwikkelen. Naast haar werk Naast het werk heeft Janneke het druk met de kinderen, maar gaat geregeld sporten. Social Media en devices Janneke gebruiker LinkedIn voor haar zakelijke relaties en Hyves om online in contact te blijven met vrienden en familie. Janneke zit vaak achter haar desktop computer en gebruikt haar smartphone voornamelijk voor het bellen en zo af en toe om informatie op het internet op te zoeken. Liever gebruikt ze daar de desktop voor. Haar vriend heeft een iPad en die gebruikt ze thuis wel eens, als deze nite in gebruik is door Dirk of de kinderen. deBaak Janneke heeft via haar professionele netwerk iets gehoord over wat de Baak doet. Ze wil graag via de website van de Baak uitzoeken of zij haar iets te bieden waardoor zij haar carrière nieuw leven in kan blazen.


62

C: Welke contextscenario’s passen bij de antwoorden op van wat de klant wil bereiken (vraag A, pag. 45) en wat de gebruiker wil en verwacht van de klant (vraag B, pag 46)? Bovenstaande vragen leveren doelstellingen op van de klant en de needs & wants van de gebruiker. Deze resultaten kunnen tegenover elkaar gezet worden en er kan meteen iets verteld worden over waar de nadruk op gelegd moet worden per device. De meeste gebruikers bezoeken vaak dezelfde website via verschillende devices. Bij de Baak, en in het geval van Rob, is dat zeker ook het geval. Rob zal geregeld op zoek zijn naar heel specifieke informatie over bv de opleiding waar hij zich voor heeft ingeschreven. Janneke zal op zoek zijn naar ander soort informatie en zal zeer waarschijnlijk ook een ander device daarvoor gebruiken. Daar waar Rob vooral zijn smartphone gebruikt, zal Janneke meer de desktop computer gebruiken. Beiden zullen ze gebruik maken van de tablet.

Contextscenario’s De contexten waarin Janneke gebruik zou kunnen maken van de site van de Baak zijn: via de desktop computer als zij op haar werk is en als aankomend klant van de Baak op zoek is naar een geschikte opleiding. Het bezoeken van de site d.m.v. de desktop computer zou zich het meest moeten richten op de aankomende klanten door de meeste aandacht te besteden een opleidingen, cursussen, evenementen e.d. die de Baak tebieden heeft. Het inscrijfproces zal het makkelijkst via de desktopte doorlopen zijn (op touchscreens is veel tekst invoeren minder gewenst). Rob zal daarentegen regelmatig naar zijn smartphone grijpen om snel de details te vinden van de opleiding waar hij zich voor heeft ingeschreven. Als hij met iemand staat bij te praten en wil laten zien welke opleiding hij gaat doen, zou het fijn zijn als hij niet in het gehele assortiment van de Baak hoeft te gaan zoeken. Om Rob zo snel mogelijk te bedienen zou hij toegang moeten hebben tot een eigen profiel, die de details voor hem verzameld en in één keer presenteerd. Daarnaast zou Rob voor de momenten dat hij ergens even moet wachten of zich verveeld, toegang willen hebben tot presentaties of interessante artikelen. Als Rob thuis op de bank de website van de Baak bezoekt met zijn tablet, wil hij, naast het kunnen raadplegen van zijn profiel, graag inspiratie opdoen d.m.v. presentatie, workshops, personality tests, artikelen etc. Janneke zal via de tablet op zoek zijn naar details over interessante opleidingen en kan geinspireerd worden door gerelateerde content zoals video’s, presentaties etc. Door klanten een persoonlijk profiel aan te bieden zal de website nog meer gebruik kunnen maken van de mogelijkheden die cross-device oplossingen te bieden hebben. Het inloggen op de smartphone mag dan een eenmalige drempel zijn, maar omdat het eenmalig is en de meerwaarde erna zeer groot is, is dit toch acceptabel.


63

De devices Het persoonlijk profiel moet makkelijk en snel te vinden zijn voor Rob. De bestaande klant zal het meest gebruik maken van de website voor de smartphone. Voor Janneke zal de smartphone een beeld moeten geven over wat de Baak is en voor haar kan betekenen. Persoonlijke informatie over de te volgen cursus

Routeinformatie

Hoofdnavigatie

eerste schets mogelijke profielpagina


64

Het inspiratiegedeelte en informatie over opleidingen vormen de belangrijkste content op zowel de tablet als de desktop. Zowel de aankomende als bestaanden klanten van De Baak hebben behoefte aan materiaal dat een beeld geeft over de cultuur bij de Baak. Het persoonlijk profiel en het zoeken naar opleiding is echter nog steeds aanwezig. Het verschil tussen de twee devices zal zitten in de presentatie van de content. Hoofdnavigatie

Inspiratie Opleidingen/coaching/maatwerk

eerste schets mogelijke homepagina tablet en desktop


65

6.1.1 SMARTPHONE Om een quote uit de doelstelling voor de mobiele site van deBaak te halen: Is het je routebeschrijving, de tijden waarop het programma begint? Hou het simpel. Deze doelstelling kan gelegd worden naast de wensen van Rob: Onderweg informatie vinden over hoe laat hij waar moet zijn.Het aanbieden van een persoonlijk profiel past hier goed bij, zodat Rob niet hoeft te zoeken naar de juiste opleiding en bijbehorende starttijd. Hij kan meteen overzicht krijgen van de informatie die voor hem van belang is. Om aan de needs en wants van Rob te voldoen zal er flink geschrapt moeten worden in de hoeveel content die aangeboden gaat worden op de site voor de smartphone. De smartphone is het meest persoonlijke device (vergeleken met de tablet en desktop), waarin het ontwerp op kan inspelen. Het combineren van de doelstellingen van de klant en de needs en wants van Rob, kan Rob het best bediend worden door informatie getoond te krijgen die specifiek voor hem bedoeld is. Door gebruik te maken van een eenmalige inlog, zal Rob bij ieder volgend bezoek van de Baak met zijn smartphone hem informatie kunnen geven over waar hij zich voor heeft ingeschreven en hoe laat en waar hij dan moet zijn. Daarnaast zal er ook algemene informatie over de Baak beschikbaar zijn, zoals opleidingen, inspiratie en events. Om Janneke te helpen zal de Baak op de hoofdpagina een indruk moeten achterlaten die Janneke aanspoort om rond te kijken wat de Baak te bieden heeft.

STAP 2: SCOPE EN MAAK PRIORITEITEN A: Welke content moet aangeboden worden aan de gebruiker? B: Wat moet de gebruiker precies met de site kunnen doen? C: Waar gaan de grenzen neergelegd worden; hoe uitgebreid moet de site gaan worden? A: Welke content moet aangeboden worden aan de gebruiker? Om aan te geven hoe onze gebruikers de mobiele site zouden kunnen gaan gebruiken, kan een scenario uitkomst bieden. Van hieruit kan ook de scope van de website bepaald worden. Scenario Rob Rob zit in de trein onderweg naar een bespreking. Daarna heeft hij een afspraak bij deBaak voor de eerste meeting van de nieuwe cursus. Rob wil graag snel kunnen zien hoe laat hij waar moet zijn. Rob heeft de site eerder bezocht en heeft al een keer ingelogd. De inloggegevens zijn bewaard gebleven waardoor Rob niet opnieuw hoeft in te loggen. Rob kan via het menu direct naar zijn profielpagina en krijgt een overzicht van de cursussen en evenementen waar hij zich voor heeft ingeschreven. Vanuit zijn profielpagina kan hij meer details bekijken per inschrijving of direct een routebeschrijving krijgen.


66

Schets scenario Rob

Scenario Janneke Janneke heeft tijdens een gesprek met een naaste collega opgevangen dat de Baak misschien wel het instituut is dat goed bij haar past qua cultuur en opleidingsmogelijkheden. Janneke is te vroeg bij haar volgende afspraak en heeft wat tijd te doden. Ze gaat naar de website van de Baak en ziet dat de Baak opleidingen aanbiedt, mensen wil inspireren en evenementen verzorgt. Janneke gaat op zoek naar een geschikte opleiding. Via het menu kan ze naar een overzichtspagina met opleidingen, vanwaar ze uit verschillende thema’s kan kiezen. Elke thema heeft een aantal opleidingen en ze kiest er één uit. Omdat het niet niks is om zomaar een opleiding of cursus uit te kiezen, wil ze de gevonden informatie later nog eens, met meer details terug kunnen kijken. Ze gebruikt daarvoor de e-mailfundtie die op de opleidingsdetailpagina aanwezig is. De volgende keer dat ze achter haar computer zit of de tablet gebruikt, kan ze meer tijd nemen om tot een beslissing te komen.

Schets scenario Janneke

Voor de gebruiker die toch alle details op de smartphone wil bekijken zal via een link naar de uitgebreiede site kunnen. Linda Stuurman | Cross-Device Design

67

B: Wat moet de gebruiker precies met de site kunnen doen? Bij de mobiele site zal de focus voornamelijk liggen op retentie, de terugkomende gebruiker. Dit betekent dat de content regelmatig tot vaak zal moeten veranderen om gebruikers te “belonen” voor het komst naar de site. De Baak wil zich graag presenteren als een netwerk/community. Door gebruikers een newsfeed aan te bieden krijgt zij van alle categoriën een beeld. Zo’n feed zal een potentieel nieuwe klant een beeld geven van wie of wat de Baak is en zal ze triggeren om onderdeel te worden van de community. Voor de bestaande klant betekent een newsfeed dat deze gebruiker , naast een persoonlijk profiel een reden heeft om terug te keren naar de site. De potentieel nieuwe klant kan via de smartphone niet dezelfde gedetailleerde informatie krijgen als op de desktop computer of tablet. Het is dan ook belangrijk om een optie aan te bieden waardoor de gebruiker zichzelf een herinnering kan sturen en op een later moment de uitgebreide informatie tot zich te nemen.

Knoppen onderaan een detailpagina van een opleiding of evenement.

Belangrijkste is dat de gebruiker op alle 3 de typen momenten,“Bored Now”, “Urgent Now” en in iets mindere mate“Repetitive Now” de site kan raadplegen en daar dan ook voldoening uit zal halen (pag. 10). Voor het “Bored Now” moment kan de newsfeed uitkomst bieden, aangezien de gebruiker direct opties krijgt om zichzelf bezig te houden. Voor het “Urgent Now” moment is het belangrijk dat de Baak makkelijk en snel telefonisch te bereiken is, maar ook dat een bestaande klant snel kan zien wat de status of starttijd van de opleiding is waarvoor is ingeschreven. Het “Repetitive Now” zit ook verwerkt in de newsfeed. De hoofdpagina zou regelmatig (dagelijks) van nieuwe content voorzien moeten worden, zodat de gebruiker vaker naar de site terug komt.

C: Waar gaan de grenzen neergelegd worden; hoe uitgebreid moet de site gaan worden? De belangrijkste onderdelen voor deBaak zijn het aantrekken van nieuwe klanten en bestaande klanten vasthouden. Dit aantrekken kan gedaan worden door de opleidingsmogelijkheden (in minder uitgebreide vorm dan bij de tablet en desktop) beschikbaar te maken op de mobiel, net als inspirerende content om klanten te overtuigen van de kwaliteit die de Baak te bieden heeft.


68

Content op een rijtje: - persoonlijk profiel - opleidingen* - evenementen - routes - inspiratie -contactgegevens * beperken tot de opleidingen zelf; informatie over coaching en inCompany zal achterwege gelaten worden op de site voor de telefoon.

STAP 3: STRUCTUREER Hoofdstructuur: “Global Navigation”

De site zal voorzien worden van global navigation d.m.v. een menuknop, waarin genavigeerd kan worden naar de hoofdpagina’s “opleidingen”, “evenementen”, “contact”, “inspiratie” en “profiel”. Vanaf deze pijlerpagina’s kan één niveau dieper de site ingegaan worden d.m.v. “One Window Drilldown27”, met uitzondering van het inspiratiegedeelte, waar het “pyramid” model beter van toepassing is.

Vanaf de inspiratiepagina krijgt de gebruiker een lijst met items te zien. Als de gebruiker zich vervolgens op een detailpagina bevindt, hoeft deze niet terug naar de inspiratiepagina om een volgend item te kiezen, maar kan dat direct op de detailpagina doen.

27

Jeniffer Tidwell, Designing Interfaces 2nd Edition, December 2010


69

STAP 4: HET SKELET OPZETTEN Voor zowel Janneke en Rob is de hoofdpagina het eerste dat zij te zien krijgen wanneer zij de Baak mobiel bezoeken. De hoofdpagina laat een newsfeed zien met de laatste toevoegingen aan de site. Daarnaast zal er een menuknop aanwezig zijn voor de global navigation. Onderaan de paginazullen zich enkele quick links bevinden, zoals “bel ons”, “route” en “profiel”. Een smartphone gebruiker komt vaak naar een websit eom snel contact op te kunnen nemen of specifieke informatie te vinden. Door deze knoppen op de homepagina aan te bieden, kan de gebruiker zeer snel deze acties uitvoeren. Als de gebruiker van de homepage wegnavigeert, wordt aangegeven dat hij of zij deze quick links niet zo dringend nodig had en op de vervolgpagina’s zullen deze links dan ook in de global navigation te vinden zijn. Dit scheelt ruimte op het kleine scherm. Uit de usertest is gebleken dat deze oplossing zeer gewaardeerd werd en het werd volgens de respondenten niet verwarrend als de quicklinks “ineens” in het menu terecht kwamen.


70

Eén van de belangrijkste pagina’s voor Rob is het persoonlijk profiel: Wanneer hij de smartphone gebruikt, kan hij op deze manier toegang krijgen tot de informatie die hij snel nodig kan hebben, zoals een routebeschrijving of de datum van een evenement waar hij zich voor ingeschreven heeft.


71

STAP 5: VISUEEL ONTWERP Voor het visueel ontwerp is er voor gekozen om zoveel mogelijk de bestaande huisstijl van de Baak te gebruiken. Deze stijl is uniek en past goed bij wat de Baak uit wil stralen. Hoofdpagina


72

Opleidingen Om de opleidingen die de Baak aanbiedt in kaart te brengen op de smartphone is gekozen voor het design pattern “One Window Drilldown28”.

1

3

2

De 3 stappen om van het menu-item “opleiding” tot een detailpagina van een opleiding te komen 1. Alle opleidingen per thema 2. Thempagina met de opleidingen die daarbinnen vallen 3. detailpagina

28

Jeniffer Tidwell, Designing Interfaces 2nd Edition, December 2010


73

Inspiratie Zoals in stap 3 aangegeven zou deze content het beste gepresenteerd kunnen worden volgens het pyramide model. Op deze manier kan de gebruiker makkelijk van inspiratie-item, naar item springen zonder steeds terug te hoeven naar de lijst met alle items.

1

2

1. Alle inspiratie-items in een lijst 2. Detailpagina met onderaan de pagina de mogelijkheid om direct naar het volgende item te gaan.


74

6.1.2 TABLET Voor de tablet en desktop site kan de inhoud (grotendeels) hetzelfde zijn. Het grootste verschil in de manier waarop de content gepresenteerd zal gaan worden, vanwege de verschillende inputmogelijkheden (touchscreen vs Beeldscherm/toetsenbord/muis). Rob wil via de iPad vooral media consumeren en de site voor de tablet zou daarom nadruk moeten leggen op het inspiratiegedeelte. Deze inspiratie kan bestaan uit artikelen, presentaties, workshops, quotes en kennisdeling. Janneke gebruikt de iPad om te zoeken naar een geschikte opleiding. Daarnaast wil zij een sfeerbeeld krijgen van de cultuur die bij de baak heerst.

STAP 2: SCOPE A: Welke content moet aangeboden worden aan de gebruiker? B: Wat moet de gebruiker precies met de site kunnen doen? C: Waar gaan de grenzen neergelegd worden; hoe uitgebreid moet de site gaan worden?

A: Welke content moet aangeboden worden aan de gebruiker? Om aan te geven en een beeld te krijgen van waarvoor onze gebruiker, Rob, de tablet gaat gebruiken is een scenario nodig. Van hieruit kan ook de scope van de website bepaald worden. Scenario Rob Rob zit op de bank op de vooravond dat hij een volgende bijeenkomst heeft bij de Baak. Hij pakt zijn tablet en wil alvast iets van de sfeer en inspirerende omgeving van de Baak meekrijgen en gaat op zoek naar content die daar op aansluit. Op de hoofdpagina krijgt Rob een lijst met artikelen, presentaties, tests etc aangeboden, waarbij hij voor een videopresentatie kiest. Rob komt op de detailpagina van deze presentatie en kan de video bekijken. Daarnaast krijgt hij ook relevante andere content aangeboden, zoals opleidingen die erop aansluiten en andere gerelateerde inspirerende content.

Scenario Janneke Rob zit op de bank op de vooravond dat hij een volgende bijeenkomst heeft bij de Baak. Hij pakt zijn tablet en wil alvast iets van de sfeer en inspirerende omgeving van de Baak meekrijgen en gaat op zoek naar content die daar op aansluit. Op de hoofdpagina krijgt Rob een lijst met artikelen, presentaties, tests etc aangeboden, waarbij hij voor een videopresentatie kiest. Rob komt op de detailpagina van deze presentatie en kan de video bekijken. Daarnaast krijgt hij ook relevante andere content aangeboden, zoals opleidingen die erop aansluiten en andere gerelateerde inspirerende content.


75

B: Wat moet de gebruiker precies met de site kunnen doen? Op de tablet is gebleken dat gebruikers voornamelijk media consumeren, dit is iets waar de Baak zich ook goed op kan richten. Het aanbieden van inspirerende content een belangrijk onderdeel. Daarnaast zou het voor Rob fijn zijn als hij vanuit dat vertrekpunt kan zien wat de Baak hem kan bieden in de vorm van workshops, gerelateerde cursussen etc. Als de Baak de site voor de tablet op deze manier inricht, is ten eerste de kans erg groot dat Rob terug blijft komen op de site en kan het linken van de inspiratie met opleidingen de conversie verhogen. Rob moet op de tablet ook zijn profiel kunnen raadplegen, maar dit heeft een minder hoge prioriteit dan bij de smartphone. Om die reden is het persoonlijk profiel voor de smartphone wel uitgewerkt en voor de tablet en desktop niet. Ondanks dat het het inspiratiegedeelte erg belangrijk is, moet ook Janneke met plezier de tablet kunnen gebruiken en voor haare relevante informatie kunnen bieden. Zo als via de tablet nog steeds door alle opleidingen gezocht kunnen worden en kan daar zeer gedetailleerde informatie over gevonden worden.


76

C: Waar gaan de grenzen neergelegd worden; hoe uitgebreid moet de site gaan worden? De site voor de tablet zal meer content en vooral meer detailinformatie bevatten dan de site voor de smartphone. Content op een rijtje: - inspiratie - opleidingen - coaching - in company - maatwerk - evenementen - nieuws - contactgegevens - persoonlijk profiel - over de Baak - vacatures

STAP 3: STRUCTUREER Hoofdstructuur: “Global Navigation”

Homepagina met global navigation (zowel bovenin als onderin de footer) met daarin links naar de pijlerpagina’s over “opleidingen”, “evenementen”, “nieuws” en “inspiratie”. Net als bij de smartphone zal bij de tablet binnen de inspiratiepagina een navigatiemodel als “pyramid” gebuikt worden .


77

STAP 4: HET SKELET OPZETTEN Hoofdpagina – portrait


78

Hoofdpagina – landscape


79

Opleidingen – portrait Om een overzicht van alle opleidingen op de tablet te tonen is gekozen voor een accordion29. Als het gaat om schermresolutie wijkt de tablet niet zo veel af van de desktop, ware het niet dat we te maken hebben met een touchscreen. Daar waar bij de desktop een lijst met links goed toe te passen is, is dat af te raden voor de tablet. Met een vinger de juiste link aanraken is een stuk lastiger dan met de muis (pag. 27).

29

Ookwel Closable Panels genoemd, Jennifer Tidwell, Designing Interfaces, pag. 111


80

Opleidingen detailpagina – landscape Op de detailpagina van een opleiding kan de gebruiker alle informatie vinden over een opleiding (er is gebruikt gemaakt van tabs30 om de content in stukken te kunnen verdelen) en daarnaast zich ook gerelateerde content vinden in de rechter kolom.

30

Ookwel Card Stack genoemd, Jennifer Tidewell, Designing Interfaces, pag. 109


81

STAP 5: VISUEEL ONTWERP Net als bij de smartphone is voor het visual design gekozen om zoveel mogelijk de huidige huisstijl te gebruiken. Door dit consequent door te zetten over de verschillende devices zullen de gebruikers snel vertrouwd raken met sites. Hoofdpagina – portrait


82

Hoofdpagina – landscape


83

Opleidingen – landscape


84

Opleidingen – portrait


85

Opleidingdetail - landscape


86

6.1.3 DESKTOP De site desktop voor de desktop richt zich het meest op de potentieel nieuwe klant, door de nadruk te leggen op de opleidingen die de Baak te bieden heeft.

STAP 2: SCOPE EN MAAK PRIORITEITEN A: Welke content moet aangeboden worden aan de gebruiker? B: Wat moet de gebruiker precies met de site kunnen doen? C: Waar gaan de grenzen neergelegd worden; hoe uitgebreid moet de site gaan worden? De site zal net zo uitgebreid worden als de site voor de tablet. De content zal hetzelfde zijn, alleen de manier waarop het gepresenteerd wordt zal anders zijn.

STAP 3: STRUCTUREER De structuur en content is hetzelfde als op de tablet.


87

STAP 4: HET SKELET OPZETTEN Hoofdpagina Het wireframe wijkt op enkele punten vergeleken met het wireframe voor de tablet. Zo zal de top 10 populairste opleidingen anders gepresenteerd worden. Op de desktop in de vorm van een lijst, op de tablet in de vorm van een carousel. Daarnaast zit het grootste verschil voornamelijk in de afmetingen van de buttons en hoeveelheid links in de footer.


88

Opleidingen


89

STAP 5: VISUEEL ONTWERP Hoofdpagina


90

Opleidingen

Alle visuals zijn gemaakt na de usertest en kunnen daarom afwijken van de wireframes die de basis zijn geweest voordat de user test gedaan werden. Er is een document met wireframes opgenomen in de bijlagen.


91

6.2

REALISATIE

Al eerder is de term Responsive Webdesign gevallen. Aangezien in het concept de website geschikt moet zijn voor 3 verschillende devices zou het het mooist zijn als zoveel mogelijk met media queries opgelost kan worden. Om te bepalen in hoeverre deze techniek toepasbaar is, zal eerst gekeken worden welke verschijningsvormen vereist zijn. Technisch gezien zijn dat er 5: - desktop - tablet, landscape - tablet, portrait - smartphone, landscape - smartphone, portrait Elk van de bovengenoemde verschijningsvorm zal een eigen stylesheet krijgen, zodat de lay-out zich aanpast op het device en schermresolutie. Bij het maken van de verschillende stylesheets moet er ook rekening gehouden worden met het feit dat niet alle smartphones eenzelfde schermresoltie hebben, evenals de tablets en desktops. Voor de realisatie van de Baak wordt uitgegaan van de huidige meest gangbare resoluties: breedte van minimaal 1024px voor de desktop, 320x480px voor de smartphone en 1024x768px voor de tablet. Content Het meest ideaal zou zijn als voor elke site dezelfde html gebruikt zou kunnen worden. Echter, uit het onderzoek en de conceptfase is gebleken dat als de content op smartphone zoveel afwijkt van de content op de desktop en tablet, dat het goed is om de html in 2-en te splitsen. Er zal dan ook één website komen voor de desktop en tablet en een aparte site voor de smartphone. Dit heeft als voordeel dat de website voor de smartphone niet onnodig veel data binnehaald en dat op de smartphone toch nog de volledige site bekeken kan worden. Onderhoud Door gebruik te maken van een CMS system waar alle content uitgehaald kan worden, betekent het dat de content die via dat systeem op de site wordt geplaatst, direct op alle sites doorgevoerd wordt. Het is niet zo dat voor elke site apart content ingevoerd moet worden.


92


93


94


95

7. EINDCONCLUSIE


96

Waar in de vroege jaren van het internet genoegen werd genomen door de gebruiker dat een website uberhaupt op een device werd getoond, is dat tegenwoordig niet meer voldoende. De website moet niet alleen goed getoond worden, maar ook nog eens voldoen aan de eisen en wensen van de gebruiker én de mogelijkheden van het device.

Hoe kun je als ontwerper een cross-device oplossing bieden aan gebruikers zodat zij optimaal gebruik kunnen maken van de aangeboden content, afgestemd op de context waarin zij de content oproepen?

Het begint met het onderzoeken welke doelgroepen de website aanspreekt. Daarna is het zaak om te bepalen in welke context en op welke momenten (en dus met welke devices) deze doelgroepen/gebruikers de website zullen raadplegen. Eenmaal bekend van welke devices de gebruiker raadpleegt, kan bepaald worden welke content oproepbaar moet zijn per device. Als de devices bekend zijn waarvoor een website ontwikkeld gaat worden, moet er in het ontwerpproces goed rekening gehouden worden met de technische mogelijkheden en eigenschappen van de verschillende devices, waaronder inputmogelijkheden en schermresolutie. Kortom: Door in kaart te brengen wie de doelgroep is en wat zij willen en in welke gebruikscontext zij de website gebruiken, kan de conclusie getrokken worden over voor welke devices een oplossing geboden moet worden. De devices en wederom gebruikscontext vormen de basis voor het bepalen welke content aangeboden moet worden.

Aangezien mensen steeds vaker meerdere devices gebruiken liggen er kansen voor internetbureau’s en hun opdrachtgevers om hierop in te springen. Dit kan door niet slechts één website te maken, maar door een oplossing te bieden die er voor zorgt dat de opdrachtgever hun klanten over meerdere kanalen kan bereiken. In de uitwerking van deze oplossing voor de Baak is ingespeeld op de twee grootste doelgroepen die gebruik maken van hun website: de klanten die al diensten van de Baak afnemen en zij die dat nog niet doen. Deze doelgroepen gebruiken meerdere devices en uit het onderzoek is gebleken dat de smartphone het meest persoonlijke device is en dat gebruikers daar vaker een website raadplegen dan op de andere devices. Dit heeft in het concept voor de Baak ervoor gezorgd dat de content op de smartphone het meest gericht is op de terugkerende, en vaak al bestaande, klanten.


97

Als gebruikers de website via de tablet en desktop raadplegen, blijken zij daar meer tijd met meer aandacht te besteden. Bestaande klanten zijn in dat geval op zoek naar inspiratie, kennisdeling en evenementen, terwijl de toekomstige klanten op zoek gaat naar gedetailleerde informatie over opleidingen en mogelijkheden tot het krijgen van advies. Dit heeft er in het concept voor gezorgd dat voor zowel de desktop als de tablet dezelfde content zal worden aangeboden, maar de manier waarop het gepresenteerd wordt verschilt. Het verschil tussen touchscreen en het ter beschikking hebben van een muis en toetsenbord is dermate groot, dat het voor ontwerpers belangrijk is daar rekening mee te houden. Ondanks dat de tablet en smartphone beiden een touchscreen hebben, ligt de tablet dichter bij de desktop computer dan de smartphone. Dit komt vooral omdat de gebruiker meer tijd besteedt wanneer de tablet gebruikt wordt en omdat de schermresolutie dermate groot is dat er veel meer content beschikbaar gesteld kan worden. Door in het ontwerp rekening te houden met de (on)mogelijkheden van de verschillende devices kun je verschillende experiences aanbieden. Uit de usertest met de protoypes is gebleken dat de respondenten erg tevreden waren over de manier waarop de content op de verschillende devices gepresenteerd wordt. Een aandachtspunt dat uit de usertest kwam was voornamelijk de lay-out op de tablet. Bij het realiseren van de website(s) voor de verschillende devices, kan responsive webdesign een grote rol spelen. Bij responsive webdesign wordt gebruik gemaakt van de mogelijkheden die css3 en mediaqueries bieden. Mediaqueries zorgen er voor dat een website zich anders kan gedragen afhankelijk van het device en/of schermresolutie. Mediaqueries hebben echter maar beperkt invloed op welke content getoond moet worden. Dit betekent in het geval van de Baak dat de content die beschikbaar is op de smartphone dusdanig anders is ten opzichte van de tablet en desktop computer, dat het beter is om 2 websites te maken. Eén voor de smartphone en één voor de desktop en tablet.

Het grootste leerproces voor mij heeft gezeten in hoe te ontwerpen voor een tablet en hoe om te gaan met responsive webdesign/adaptive layouts. Ook heb ik veel geleerd over het afstemmen van je content voor de doelgroep wanneer meerdere devices in het spel zijn. Na het onderzoek en uitwerken van de case is het me duidelijk geworden waar de tablet staat ten opzichte van de andere devices. De tablet zorgt voor een wezenlijk andere beleving dan de smartphone en desktop en dat komt in het ontwerpproces terug. Daarnaast heb ik veel opgestoken over hoe belangrijk vlakverdeling is op de verschillende devices wanneer er met responsive webdesign wordt gewerkt.


98


99

8. AANBEVELINGEN


100

Aanbeveling richting de Baak - In het nieuwe concept voor de Baak is social media nog niet volledig geintergreerd. Social Media vertaald zich erg goed naar de verschillende devices. Het is raadzaam voor de Baak om te kijken op welke social media zij zich willen richten en dit dan ook consequent over alle devices door te voeren. Zo zou op de smartphone op de detailpagina’s een tweet-button kunnen komen, zodat de gebruiker het item kan delen mijn zijn of haar volgers.

Om cross-device design binnen een bedrijf als Evident Interactive beter toe te kunnen passen, volgen hier enkele aanbevelingen: - Zoals aangehaald in de conclusie denk ik dat er kansen liggen voor Evident om hun opdrachtgevers een cross-device oplossing te bieden die er voor zorgt dat ze hun klanten via meerdere kunnen bereiken. - Cross-device design komt al aan de orde bij het eerste contact met de klant. Om die reden zouden de medewerkers op de sales en strategie-afdeling voldoende aan (technische) competentieontwikkeling moeten doen om de klant van de juiste informatie te voorzien. Als de klant geïnteresseerd is in een cross-device oplossing zou het voor de sales en strategieafdeling goed zijn om te weten welke technische mogelijkheden en beperking er zijn, zodat de klant goed ingelicht kan worden. - Ook zou het goed zijn om medewerkers op het gebied van met name Interaction Design en Frontend vroeg bij het conceptproces te betrekken zodat vroeg in het proces de mogelijkheden en onmogelijkheden duidelijker in kaart gebracht kunnen worden. De Interaction Designer kan goed inschatten of bepaalde content geschikt is om op de verschillende devices te gebruiken. De Frontend Developer kan goed inschatten hoe complex of eenvoudig de keuzes in de conceptfase technisch realiseerbaar zijn. - De opdrachtgevers van Evident zijn erg belangrijk en om nog betere producten af te kunnen leveren zou het goed zijn om per project meer te weten te komen over de doelgroep/eindegebruiker waar het product gemaakt wordt. Dit kan gedaan worden door bijvoorbeeld meer usabilty testen uit te voeren. De tests die ik tijdens het project hebben gedaan, hebben veel nieuwe inzichten gegeven en na het delen van deze kennis met collega’s bleken ook zij op te kijken van de resultaten die behaald werden. - Bij Evident zijn nog weinig producten opgeleverd voor de smartphone zijn en nog minder voor de iPad. Omdat de vraag naar dit soort producten steeds groter wordt, zou het ideaal zijn als de interaction designer competenties hebben op het gebied van touch input en cross-device interactie.


101

9. BRONNEN


102

Bronnenlijst INTERNET Artikelen CMSwire.com & KPCB |Google Ramps Up Mobile Advertising Efforts, Launches Mobile Now! Initiative | Februari 11, 2011 Sanoma | Rapport Mobile Advertising |Juli 2010 | pp. 64, 66 Jeff Croft | On “Responsive Web Design” and the mobile context | 8 Juni 2010 Shaun K. Kane, Amy K. Karlson 2, Brian R. Meyers, Paul Johns, Andy Jacobs and Greg Smith. | Exploring Cross-Device Web Use on PCs and Mobile Devices Information Week | Google Lays out its Mobile User Experience Strategy | April 11, 2007 Jakob Nielsen | Mobile Usability |July 20, 2009 Sanoma Onderzoek | De Nederlandse iPadgebruiker |Oktober 2010 Peter Morville | User Experience Design | juni 21, 2004 Jesse James Garrett | The Elements of User Experience | Maart 30, 2000 en "Meet the Elements" Luke Wrobleski | Mobile First | November 3, 2009 Smashing Magazine |A User-Centered Approach To Web Design For Mobile Devices | 2 Mei 2011 Androidhub | Context Aware Web-Introduction Jakob Nielsen | Mobile Content Is Twice as Difficult | Februari 28, 2011 UI Patterns | Carousel Dan saffer | Activity Zones for Touchscreen Tablets and Phones | Januari 14, 2011 How to put a Custom Font on your Website Christopher Keeley DES511| October 28, 2010 Line 25.com | Showcase of outstanding responsive web designs Noupe.com | Mobile Development Kit

Presentaties Magic + Might, Inc | Multiscreen Design Strategies | Juni 10, 2011 | Slide 64 Pek Pongaet | Designing for iPad | april 19, 2011 | min 17:20 / slide 86, 87 en 88 Susan Weinsschenk| Human Facotrs International | Pursuasion, Emotion & Trust in User Experience Design | Juli 20, 2011


103

Websites NTI | m.nti.nl / http://www.nti.nl Hogeschool Utrecht | m.hu.nl / http://www.hu.nl De Baak | m.debaak.nl / www.debaak.tv /www.debaak.nl / blog.debaak.nl NCOI | http://www.ncoi.nl

LITERATUUR Alan Cooper | About Face: The Essentials of Interaction Design 3 | 2007 | pp. 119, 182, 232 Jennifer Tidwell | Designing Interfaces – 2nd Edition | December 2010| pp. 1-3, 16, 80-81, 93-94, 444, 456-458 Jennifer Tidwell | Designing Interfaces |November 2005 | pp. 109 & 111 Jesse James Garrett | Elements of User Experience Design, 2nd Edition | pp. 24


104

As the great Andrew Martin used to say: “One is glad to be of service”


105

Scriptie. Cross-Device UX Design. door Linda Stuurman

Recommend Documents