5 ontwerpkeuzes voor ANWB Reiz& Magazine iPad pilot

May 29th, 2010

We zijn op dit moment druk bezig met ons "proof of concept" voor een tijdschrift op de iPad. We ontwikkelen dit proof of concept in samenwerking met de ANWB voor haar maandblad Reiz& Magazine. In dit artikel doen we verslag van 5 uitdagingen die we tegenkwamen en laten we zien hoe we die willen oplossen.

Deze ontwerp uitdagingen komen voort uit ons eigen onderzoek naar de essentie van een print tijdschrift en de wijze waarop deze te vatten is op het (kleine) iPad scherm, daarbij gebruikmakend van de iPad interface. We hebben uiteraard ook goed gekeken naar de eerste iPad tijdschriften zoals Time Magazine and Popular Science. Goede ideeën hebben we meegenomen en we hebben ook geleerd van wat we minder vonden. Bovendien hebben we veel gehad aan Jacob Nielsens 90+ pagina's rapport over de bruikbaarheid van iPad applicaties.

To our English readers:  over the past Months Touchwonders has evolved from an initiative into a specialized company for concept and development of digital touch media as our prime focus. In order to better serve the Dutch market we will transition the site over to Dutch in the coming time.

Uitdaging 1: waar ben ik?

Nielsens onderzoek bevestigde onze eigen bevindingen dat het erg eenvoudig is om de weg kwijt te raken in een digitaal tijdschrift op de iPad. De meeste iPad magazines die nu verkrijgbaar zijn willen teveel doen alsof ze eigenlijk gedrukt zijn. Als gevolg hiervan hebben ontwikkelaars ervoor gekozen navigatielementen zoveel mogelijk te verbergen. Alhoewel de gedachte erachter begrijpelijk is (alle aandacht voor schitterend opgemaakte content) komt dit de bruikbaarheid niet ten goede. Op een digitaal apparaat verwachten lezers te kunnen beschikken over duidelijk zichtbare navigatie. Dat is men gewend van websites en het is voor gebruikers niet logisch dat dat op een iPad - ook al betreft het een magazine - anders zou zijn.

Bovendien heeft een lezer in een gedrukt tijdschrift - onbewust - ook beschikking over navigatie. Door de fysieke vorm (een stapel papier) van een tijdschrift "voelt" de lezer of hij zich voor- of achteraan in het tijdschrift bevind, waar de inhoudsopgave te vinden is en hoe hij snel een ander artikel kan vinden. Op de iPad werkt dit uiteraard anders en ontbreekt het fysieke controlemiddel van de pagina's.

Oplossing A: zichtbare navigatie

De oplossing is simpel en ligt voor de hand maar wordt desondanks nog weinig toegepast: voorzie de gebruiker van permanent zichtbare navigatie. Wij hebben hiervoor een eenvoudige navigatiebalk toegevoegd aan de bovenkant van het scherm. Via deze balk heeft de lezer rechtstreeks toegang tot de inhoudsopgave. In toekomstige versies overwegen we hier nog meer navigatie aan toe te voegen zoals een forward en back button.

Deze balk doet nauwelijks af aan het "full screen" effect van magazine afbeeldingen en tekst. Een alternatief wat wellicht goed werkt is de oplossing die Wired heeft gekozen: een keer het scherm willekeurig aanraken toont de navigatiemiddelen. Ons streven is echter om gedrag van aanrakingen zo consistent mogelijk te maken. In het geval van Wired leidt een aanraking soms tot het menu en soms tot een actie op het scherm. Nader onderzoek zal moeten uitwijzen of dit voor gebruikers duidelijk is.

We tonen in ons concept de navigatiebalk niet op de cover (uiteraard) en in de fotomodus (meer informatie over de fotomodus hieronder).

Oplossing B: eenvoudige boomstam-tak structuur

Permanent zichtbare navigatie is niet het hele antwoord op de navigatieverwarring die kan ontstaan bij het "bladeren" door een iPad magazine. De onderliggende structuur is minstens zo belangrijk. Bij andere iPad magazines (vooral Popular Science) moet je soms naar beneden scrollen vanaf het openingsartikel maar soms moet je eerst een pagina verder bladeren voordat je pas naar beneden het artikel in kunt. Ook bij andere applicaties krijgt de lezer vaak een "waar ben ik" gevoel als hij links - rechts - boven - onder door het magazine schuift. De structuur is niet consistent en dit roept verwarring op.

Wij hebben gekozen voor een structuur die we boomstam - tak structuur noemen. De essentie van deze structuur is dat gebruikers altijd terugkeren bij het hoofdartikel - hoeveel gerelateerde content er ook vanuit dat artikel wordt aangeboden. Hierdoor herkennen gebruikers altijd waar ze zijn en kunnen ze bepalen hoe ze verder moeten zonder in verwarring te raken. Dit werkt als volgt:

Het magazine bestaat uit een serie artikelen. Een artikel noemen we de boomstam. Ieder artikel bestaat uit een hoofdartikel en bijbehorende content in kaders: video; tekst; afbeeldingen; web content etcetera. Die laatste zijn de takken van de boom.

Lezers bladeren van artikel naar artikel (stam naar stam). Als ze een artikel lezen gaan ze langs de stam omhoog en komen ze kaders (takken) tegen. Besluiten ze een kader te bekijken dan opent deze zich over het hoofdartikel heen. Wanneer ze klaar met het kader sluiten ze deze en zijn ze terug bij het artikel om verder te lezen in het hoofdartikel. Eerste reacties van onder andere de ANWB zijn erg positief over deze structuur.

Uitdaging 2: een ontspannen beleving

Een van  de unieke kenmerken van de iPad is dat het apparaat het mogelijk maakt om digitale content diepgaand en in ontspannen setting te consumeren. Een tijdschrift zoals Reiz& Magazine lees je ook op je gemak. In bed, op de bank, in de hangmat of in bad (met de iPad in bad is wellicht een minder goed idee). De vorm en presentatie van het tijdschrift moet daarom aansluiten bij deze ontspannen houding en mindset. Dit geldt zeker voor de uitvoerige artikelen van Reiz& waar je als lezer echt voor gaat zitten. Dit aspect is daarom van groot belang geweest voor de uitwerking van ons concept.

Op het relatief kleine scherm van de iPad is het echter een uitdaging om de grote hoeveelheid inhoud van een tijdschrift op een rustige manier te presenteren. Die inhoud bestaat op zijn minst uit:

  • hoofdartikel
  • hoofdfoto's
  • kaderfoto's
  • kaderinformatie
  • pull quotes

Oplossing

Om die inhoud kwijt te kunnen is gekozen voor een relatief eenvoudige layout. In die layout staan het hoofdartikel en de hoofdfoto's centraal en wordt overige informatie - kaders, foto's, video's - gedurende het lezen gepresenteerd. Hierdoor houdt het geheel een aangename rust en bestaat toch de mogelijkheid om alle inhoud (en tevens content die in gedrukte vorm niet mogelijk is) kwijt te kunnen.

Uitdaging 3: tekst en foto's zijn in een gedrukt tijdschrift onlosmakelijk verbonden

In ieder goed tijdschrift zijn fotografie en teksten nauw verbonden en vormen samen de beleving. Foto's trekken je in de tekst. Tekst wordt geïllustreerd met fotografie. Al lezende krijg je tegelijkertijd zowel visuele als tekstuele informatie. Om een echte tijdschrift ervaring te realiseren stond het voor ons dan ook vast dat deze combinatie van fotografie en tekst onderdeel van het concept moest zijn. We wilden niet - zoals bijvoorbeeld Time dat doet eerste fotografie tonen en daarna volledige tekstpagina's. Daarnaast vonden we het cruciaal om paginavullende fotografie zonder tekst mogelijk te maken.

Oplossing

Ons concept biedt de volgende mogelijkheden voor fotografie:

a. Tijdens het lezen van een artikel zijn de hoofdfoto's te allen tijde zichtbaar op de achtergrond.

b. Om de hoofdfoto's goed te kunnen bekijken is er een fotomodus waarmee deze foto's op volledige grootte wordt getoond zonder tekst. In deze modus kan de lezer door alle foto's heen bladeren. Na een willekeurige aanraking van het scherm wordt teruggekeerd naar exact dat punt in de tekst waar men gebleven was (ook al was men bij de hoofdfoto van een ander deel van het artikel).

c. Tussen de tekst van het artikel tonen we kleinere kaderfoto's die de tekst illustreren. Deze kunnen ook als gallerij getoond worden (meerder foto's op een positie).

d. Foto's kunnen ook worden ook getoond via kaders. Hiermee verschijnen ze in een vergrootte versie in een zogenaamde popover (scherm over het hoofdartikel heen).

Uitdaging 4: kaders en pull quotes in context

Een van de universele kenmerken van tijdschriften is het gebruik van pullquotes en informatie in kaders. Leest men een artikel over bijvoorbeeld Buenos Aires dan staat er ergens op de pagina een kader "Leuke hotels in Buenos Aires." Deze kaderinformatie wordt in context getoond: het kader met hotels staat daar waar het hoofdartikel ook over BA gaat en niet twee pagina's verder. Hetzelfde geldt voor pull quotes. De functie van pull quotes is om lezers de tekst in te trekken. Een interessante quote staat dus bij de tekst waar deze uit voort komt en niet op een andere positie.

Kaderinformatie en pull quotes vormen een essentieel onderdeel van de tijdschrift beleving en zijn een verrijking voor de inhoud. Toch hebben de eerste iPad tijdschriften hier nog nauwelijks een oplossing voor.

Oplossing

In  ons concept wordt onderscheid gemaakt tussen het hoofdartikel in de hoofdkolom aan de rechterkant en informatie in kaders en pull quotes aan de linkerkant. Deze kaders faden in op het moment dat de lezer op het relevante punt in het artikel is aanbeland en faden uit wanneer de lezer er voorbij is. Niet het volledige kader fade in maar alleen een grafisch/tekstueel element wat duidelijk maakt dat er een kader is. De lezer kan besluiten het kader te negeren en verder gaan met het hoofdartikel of het selecteren waarna het zich opent in een scherm over het hoofdartikel heen. Op deze manier kunnen we veel informatie kwijt zonder de lezer te overladen met teveel informatie tegelijkertijd. Bovendien tonen we de informatie alleen wanneer deze relevant is bij het hoofdartikel.

Uitdaging 5: hoe houden we bediening eenvoudig?

De iPad is in staat om complexe aanraakgebaren te registreren - wel 11 aanrakingen tegelijkertijd. Een bekend voorbeeld van een aanraakgebaar ("touch gesture") is "pinch to zoom" waarmee door middel van duim en wijsvinger ingezoomd kan worden op een object. Sommige ontwikkelaars gebruiken die mogelijkheden om complexere gebaren toe te passen in hun applicaties. Een voorbeeld is het met twee vingers omhoogschuiven om in het menu te komen van Popular Science. Uit Nielsens onderzoek blijkt echter dat lezers deze gebaren snel vergeten als ze de applicatie eenmaak in gebruik nemen (ook als er vooraf uitleg is gegeven).

Voor games en andere toepassingen kunnen ingewikkeldere aanraakgebaren zeer zinvol zijn en zijn de gebruikers bereid deze te leren. Voor een tijdschrift geldt echter vooral "don't make me think."

Oplossing

We maken het ontwerp dusdanig dat de lezer eigenlijk niet hoeft na te denken over bediening van het tijdschrift. Om dat te realiseren sluiten we zoveel mogelijk aan bij vroege conventies van het iPad platform en bij bestaande web conventies. Ons concept kent in zijn huidige vorm slechts twee aanraakgebaren die ook veel terug te vinden zijn in andere iPad applicaties.

  1. Sleep van rechts naar links (en vice versa) om naar het volgende artikel te gaan.

  2. Sleep van onder naar boven (en vice versa) om het artikel verder te bekijken/te lezen.

Deze basisstructuur is eenvoudig en wordt snel begrepen (merken wij op basis van eerste gebruikerservaringen). Bovendien is de beweging van onder naar boven hetzelfde als het scrollen op een webpagina en dus een bestaande conventie.

Gedrag van de applicatie

Een ander belangrijk onderdeel van ons ontwerp is het verschil in gedrag afhankelijk van de interactie. Als de lezer naar het volgende artikel bladert (van rechts naar links en v.v.) dan ververst de hele pagina. Bladert de gebruiker echter binnen een artikel (van onder naar boven en v.v.) dan verschuift alleen de tekst op de voorgrond.

Hiermee vertellen we de lezer impliciet het verschil tussen beide interacties: links-rechts brengt je naar iets geheel nieuws, boven-onder brengt je verder in waar je al was. Dit subtiele verschil heeft een groot effect op het creëren van een rustige beleving. De lezer hoeft niet na te denken en bladert moeiteloos door het magazine. Onze indruk is dat juist het ontbreken van deze samenhang tussen interactie en applicatiegedrag bij bijvoorbeeld Wired zorgt voor veel vraagtekens tijdens het 'bladeren'.

Geplande aanvullingen

In de toekomst overwegen we pinch to zoom toe te voegen voor het vergroten van afbeeldingen (op video's werkt dit al) omdat dit een beweging is die iPad gebruikers erg snel blijken te snappen. Zelfs als ze de iPad maar een keer gebruikt hebben zien we ze die beweging al toepassen. Het is verstandig zoveel mogelijk aan te sluiten bij  intuïtief gebruikersgedrag.

Toekomstige uitdagingen

Wanneer men een proof of concept uitvoert heeft men doorgaans aan het einde van het project een lange lijst met wensen voor een vervolg. Dat is in ons geval niet anders. Binnenkort doen we een gebruikerstest en met de informatie die daaruit voorkomt zullen we een lijst met verbeteringen opstellen voor toekomstige versies. Tegelijkertijd gaan we werken aan een systeem om de content zo eenvoudige mogelijk in de applicatie te krijgen. Volg @touchwonders op twittter om op de hoogte te blijven van de ontwikkelingen.