Het Mobilisme en een 5-stappenplan voor de ultieme multi-platform ervaring

Eindelijk! De 90% troep kan minder worden! Dankzij smartphones zijn we gedwongen te focussen. De immens populaire apps zijn een eerste succesvolle stap, maar de tijd is nu rijp om de lijn door te trekken, want het mobiele web wordt volwassen en meer en meer devices zijn connected. De tijd van Het Mobilisme is aangebroken! Het tijdperk zal de geschiedenis ingaan met als startdatum 12-05-11: dan wordt in Amsterdam afgetrapt met het gelijknamige event Mobilism. Topsprekers met grotendeels vernieuwende inzichten zorgen qua inspiratie voor een TED-niveau én voor vele tevreden gezichten bij het internationale publiek. In dit artikel geen samenvatting van het event, maar een vrije vertaling naar een nieuw stappenplan om tot goede multi-platform ervaringen te komen, die voldoen aan de standaarden van het nieuwe tijdperk.

Stap 1: contentgradaties

Schermgroottes en manieren van interactie worden steeds diverser, maar content wordt vaak slechts voor desktop afgestemd. Het weglaten van delen van de content voor mobiel is vervolgens een logische gedachte – maar niet een goede! De context weet je immers nooit exact. Een mobiel apparaat wordt allang niet alleen maar onderweg gebruikt. Zo gebruikt 62% hun mobiel thuis tijdens televisiekijken. Daarbij lopen veel ervaringen in elkaar over: 34% bezoekt een site op een pc en bezoekt daarna dezelfde site op een smartphone. Hierbij nog wat voorbeelden uit recent onderzoek (pdf):
Slide komt uit presentatie op Mobilism van Stephanie Rieger

Kortom, laat niets weg! Het verbergen van content achter een klik/touch is echter wel mogelijk. Denk dus na over je gradaties van content: wat moet er zichtbaar zijn op de startpagina op elk formaat? Wat mag erbij op een gemiddeld scherm? En welke eventuele extra’s kunnen op een groot scherm interessant zijn? Denk hierbij uiteraard “Mobile first“, wat zeker niet gelijk is aan “iPhone first”, steeds meer merken komen met goede smartphones en internet wordt op die toestellen ook steeds meer gebruikt. Wees verder uiteraard niet bang om alle content intern te houden. Maar let wel op dat elk extern kanaal dat je gebruikt ook werkt op alle beoogde devices.

Stap 2: technieken afhankelijk van doelgroep

Alle voorspellingen en statistieken wijzen erop dat het mobiele web vele malen groter wordt dan het desktop internet. In veel landen is er zelfs een aanzienlijk deel dat alleen toegang heeft tot internet via een mobiel device!
Slide komt uit presentatie op Mobilism van Stephanie Rieger

De diversiteit van de mobiele producten zal ook gigantisch worden. Een gedegen doelgroeponderzoek in de tijd van Het Mobilisme gaat niet over hun gebruik op het web, maar over welke connected devices ze wanneer en hoe lang gebruiken. Pas dan kan bepaald worden voor welke devices en met welke technieken je aan de gang moet. Als de kosten van een dergelijk onderzoek te hoog zijn, dan is er ook geen geld voor native apps en kan dan simpelweg gekozen worden tussen:

1. Het verleden: een aparte mobiele site, die ook werkt op oudere en minder geavanceerde telefoons, dus wel een brede doelgroep heeft.
2. Het heden: een mobiele site die via PhoneGap ook native kan worden verspreid over de diverse appstores. Met de huidige populariteit van native apps geen slechte gedachte.
3. De nabije toekomst: Flexibele Layout met Mediaqueries, HTML5 en CSS3. Uiteraard ook op te slaan als webapp. Een mooie techniek die klaar is voor het nieuwe tijdperk van het Mobilisme, maar nu nog een beperkte doelgroep heeft. Een combinatie tussen optie 2 en 3 is uiteraard ook goed mogelijk.

Wie wel geld heeft voor apps moet beseffen dat het app-internet niet betekent dat het mobiele web verdwijnt. Recent onderzoek van Forrester wijst uit dat de groei van het gebruik van het mobiele web gelijk opgaat met die van de native apps. Met het aanbieden van enkel een native app wordt het bereik aanzienlijk verkleind.

Stap 3: breakpoint-grafieken en versimpelde wireframes

Na het bepalen van de content en techniek, moet er een goede presentatievorm komen. Stephen Hay (tevens een van de organisatoren) betoogt sterk dat de pixelperfecte interactie en grafische designs van nu vaak veel te veel tijd kosten, terwijl in veel gevallen de content toch niet in deze exacte vorm gelezen wordt. Dit komt doordat de site vaak bekeken wordt op andere devices of door aggregatie van content op andere sites of in apps als Flipboard. Het ontwerpen van systemen is daarom veel nuttiger dan het ontwerpen van pagina’s. Op pagina-niveau zijn simpele wireframes als referentie voldoende. Deze kunnen vervolgens eenvoudig gecombineerd worden met breakpoint-grafieken. In een toegevoegde legenda kunnen de contentgradaties per blok worden weergegeven.

Slides komen uit presentatie op Mobilism van Stephen Hay

Stap 4: grafische vrijheid voor de gebruiker

Logisch gevolg is dat de grafisch designer ook enkel stijlelementen ontwerpt, of zelfs stijlopties, waarmee een gebruiker kan kiezen wat hem het meest aanspreekt. Wel met mate natuurlijk: we zitten niet op Hyves-pimp my page te wachten op elke webpagina. Bibliotype past dit erg goed toe. Het is van belang dat nagedacht wordt over de manieren van interactie. Met meer en meer gebruik van touch, wordt het nog belangrijker dat knoppen duidelijk zijn te herkennen, groot genoeg zijn en niet te dicht bij elkaar staan. Ook het groeiende gebruik van touchdevices door ouderen dwingt hiertoe. Voor 70-jarigen moeten letters voor goede leebaarheid bijvoorbeeld 2x zo groot zijn als voor 20-jarigen.

Stap 5: bouw geoptimaliseerd & test ook mobiel

Het klinkt zo logisch, maar het wordt zo weinig gedaan: geoptimaliseerd bouwen. Steve Souders van Google heeft dit onderwerp echter weer in de spotlights gezet. Voor mobiel is optimalisatie natuurlijk extreem van belang, want ondanks mooie verhalen over LTE (opvolger 3G), zijn er zelfs binnen Nederland nog vele plaatsen waar het 3G-bereik niet goed is. 374 kb aan JavaScript downloaden is dan best veel:

Afbeelding van Mobile.httparchive.org van Steve Souders

Dit is echter het risico van het klakkeloos overnemen van volledige Javascript-bibliotheken van systemen als JQuery. Het zijn handige tools, maar gebruik alleen de delen die nodig zijn. Tot slot is het voor velen nog altijd onbekend hoe goed getest kan worden op mobiel. Gelukkig komen ook daarvoor steeds meer goede oplossingen, voor developers zijn tools als Weinre erg goed toepasbaar. Over gebruikerstesten ging het op het meer technisch georiënteerde Mobilism niet echt, maar op de gelijktijdige conferentie in Lissabon gelukkig wel.

Resultaat: optimale ervaring

In 5 stappen kan je er dus voor zorgen dat jouw creatie bij de 10% hoort die wel een goede ervaring biedt. Of zelfs zorgen dat dit percentage verhoogt, zodat de 90% met troep afneemt. Om het dan ook goed te houden, begint uiteraard het deel van het onderhoud: socials gebruiken, teksten updaten.
Voor wie denkt dan voor de komende 5 jaar dan klaar te zijn – die heeft het mis. Want met het verbeteren van de standaard stellen we onze verwachtingen bij!

Slide van het Kano-model uit de presentatie op Mobilism van Jared Spool

Iets wat eerst bijzonder is en snel tevredenheid oplevert (blauwe pijl), kan na verloop van tijd een basisverwachting worden (rode pijl). En dat kan snel gaan, zo lichtte Jared Spool als laatste spreker toe. Denk bijvoorbeeld aan gratis Wifi op conferenties. Gelukkig was bij Mobilism niet alleen het Wifi goed, maar ook de sprekers, de website, de catering en zelfs de badges. De verwachtingen voor volgend jaar zijn dus bijzonder hoog!