Waar bedrijven veel tijd en geld investeren in een reguliere website, wordt er over het algemeen nauwelijks aandacht besteed aan een mobiele variant hierop. In de afgelopen jaren is het aantal gebruikers dat een PDA of mobiele telefoon gebruikt voor internet explosief gestegen. Het kleine scherm en gebrek aan ondersteuning van JavaScript zorgen ervoor dat de meeste websites niet goed werken op een mobiele telefoon of PDA. Men doet er goed aan een aparte website te ontwikkelen voor mobiel internet om de user experience ook voor deze doelgroep te optimaliseren. In dit artikel wordt een aantal tips behandeld die je kunnen helpen bij het ontwerpen van een mobiele website.
Soorten gebruikers
Mobiel internet biedt toegang tot informatie op ‘vreemde’ plaatsen en in nieuwe situaties. Dit zorgt voor een hele nieuwe manier van internetgebruik en een nieuw soort gebruiker. Grote rol bij het maken van keuzes voor mobile webdesign speelt de status van de gemiddelde gebruiker:
- Wat zijn ze aan het doen?
- Waarom bezoeken ze de website?
- Waarin zijn ze in geïnteresseerd?
- Waarnaar zijn ze op zoek?
- Waarom bezoeken ze de website juist nu?
Houd er rekening mee dat de gebruikers van het mobiele internet vaak met een ander doel naar de website komen dan gebruikers die achter hun bureau zitten.
Google heeft veel tijd en energie gestoken in het achterhalen van de verschillende gebruikersgroepen van mobiel internet. De web developers van Google hebben zich uiteindelijk gericht op drie soorten gebruikers en hun webapplicaties afgestemd op de wensen en eisen van deze drie groepen. Laten we deze groepen eens beter bekijken …
De “gewone” gebruiker
Deze gebruikers verschillen niet veel van de gemiddelde bezoeker van een reguliere website. Ze zijn niet speciaal op zoek naar specifieke informatie, maar hebben even tijd over om op het internet te surfen. Om ervoor te zorgen dat deze gebruikers vaker terugkomen op je site moeten ze geprikkeld worden door de informatie die ze tegenkomen. Laat met het oog op de beperkte schermruimte en beperkte tijd die deze gebruiker heeft, geen grote stukken informatie zien. Deel het op in hapklare brokken die bij de bezoeker genoeg interesse opwekken om nog eens terug te komen naar de site.
De terugkerende gebruiker
Deze gebruikers komen regelmatig terug naar je website voor specifieke informatie of data. Als je een site hebt met bijvoorbeeld file-informatie, weerberichten of sportuitslagen, dan heb je waarschijnlijk veel van dit soort gebruikers. Analyseer welke informatie veel opgevraagd wordt en maak deze makkelijk bereikbaar: toon het als eerste op de pagina. Ook voor het mobiele web geldt, dat informatie verstopt achter drie of vier klikken niet wordt bekeken.
Aanbieden van gepersonaliseerde content via een mobile website is niet eenvoudig, maar ook niet onmogelijk. Op een reguliere website kun je via een inlog bij voor jou relevante informatie komen. Op een mobiele website is inloggen niet echt eenvoudig. Een alternatief hiervoor kan zijn om terugkerende gebruikers via het reguliere web hun startpagina te laten personaliseren. De gebruiker kan via een desktop pc een persoonlijke versie van de mobiele site samenstellen. Er wordt een speciale URL gegenereerd die alle voorkeuren van de gebruiker bevat. Als de gebruiker op zijn PDA of mobile telefoon via deze URL de site bezoekt, krijgt hij de door hem zelf samengestelde content te zien.
De bezoeker die dringend informatie nodig heeft
Afhankelijk van het soort website kan de betekenis van ‘dringend’ nogal variëren. Voor een klant van een webwinkel kan dringend zijn: “Mijn bestelling is nog niet binnen, waar is die nu?” Een dringendere vraag zou kunnen zijn: “Mijn trein heeft 10 minuten vertraging, haal ik mijn aansluiting nog?”
Voor sommige bezoekers is alles dringend. Als je de belangrijkste informatiebehoefte van je doelgroep kent en je ervoor zorgt dat deze informatie binnen 1 of 2 klikken beschikbaar is, verhoog je de usability van je website enorm (dit geldt uiteraard ook voor reguliere websites).
Fig. 1:Routeplannen via mobile.9292ov.nl
Minder opties = effectievere interface
Gebrek aan schermruimte en internetverbindingen die vaak langzamer zijn dan die op een pc dwingen je tot het maken van keuzes in de aangeboden opties en informatie. Minder opties zorgen voor een simpelere en effectievere interface, zolang de aangeboden functionaliteit de gebruiker maar laat doen wat hij wil.
Aan de webdesigner de schone taak vast te stellen wat essentieel is en wat weggelaten kan worden.
Dit lijkt misschien simpel, maar een website die vol staat met afbeeldingen, video’s en inhoud terugbrengen tot het hoogstnoodzakelijke kan een uitdaging zijn.
Dat het moeilijk is om afbeeldingen helemaal weg te laten blijkt wel uit verschillende nieuwssites. De banners worden wel weggelaten, maar afbeeldingen mogen kennelijk niet ontbreken in de mobiele variant.
Wikipedia heeft een goede mobiele website. Het invoervak centraal, geen toeters en bellen. De resultaten worden ook heel basic weergegeven. Jammer is alleen dat je er niet automatisch op terecht komt als je via je mobiel de url van de reguliere site invoert.
Fig. 2 :Wikipedia back to the basic
Fig. 3 : De reguliere website van de NOS …
Fig. 4: … en de mobiele variant hierop
Strenge selectie van content
Vanwege de eenvoud van de pagina’s en het terugbrengen van het aantal opties is de content die weergegeven wordt zorgvuldig geselecteerd. Wat hierbij opvalt is dat de inhoud zorgvuldig geselecteerd is voor de gebruiker, de optimale user experience! In de ideale webwereld zouden alle websites op die manier ontworpen en ingericht zijn, maar omdat de meeste websites commercieel zijn, ontkom je vaak niet aan elementen die niet belangrijk zijn voor de gebruiker, zoals banners. Terwijl adverteren op reguliere websites algemeen geaccepteerd is, zijn de meeste mobiele websites vrij van advertenties.
Minder opties = effectievere interface
Witruimte
Als je websites gaat bekijken die voor het mobile web ontworpen zijn, zul je zien dat deze websites veel witruimte bevatten. Zeker degene die makkelijk zijn in gebruik. Witruimte is belangrijk in ieder ontwerp en is meestal een uitdaging in webdesign omdat er veel informatie in beperkte ruimte aangeboden moet worden. Witruimte is nog belangrijker in mobile webdesign omdat het scherm nog kleiner is. Een volgepropte website zou erg gebruiksonvriendelijk en moeilijk te gebruiken zijn via het mobiele web.
Gebruik van afbeeldingen
Doordat de afgelopen jaren internetverbindingen steeds sneller zijn geworden, hebben de designers meer vrijheid gekregen in het gebruik van afbeeldingen en video’s. De gemiddelde bezoeker van een website via een desktop of laptop wil graag een rijk geïllustreerde, visueel aantrekkelijke website zien. Voor ontwerp van een mobiele website geldt dat afbeeldingen vaak meer fout dan goed doen.
Er is een grote variatie in verbindingssnelheid en kosten van mobile internet. Bezoekers maken zich drukker om hun verbindingssnelheid bij internet via hun mobiel. Daarnaast maakt de schermgrootte het moeilijk om afbeeldingen goed te zien en tekst moeilijker te lezen. Met toename van het aantal internetters met smartphones, die grotere schermen en hogere verbindingssnelheid hebben, is er meer mogelijk voor gebruik van afbeeldingen. Er is echter een grote groep gebruikers die nog geen smartphone heeft. Voor mobile versies van websites is het daarom gebruikelijk weinig afbeeldingen te gebruiken.
Verschillende schermformaten
Waar je bij het ontwerpen van een website al rekening moet houden met de verschillende resoluties van beeldschermen, is het bij mobile telefoons en PDA’s een nog grotere uitdaging. Doordat de techniek zich blijft ontwikkelen, veranderen de schermafmetingen ook. Moderne smartphones en PDA’s hebben grotere schermen en hogere resoluties dan die van een paar jaar geleden, maar de oudere zijn ook nog steeds in gebruik.
Niet alleen moet je rekening houden met verschillende resoluties, maar ook met verschillende vormen. In figuur 5 is een aantal van deze formaten te zien.
Fig. 5 : Veelvoorkomende schermformaten
Subdomein versus .mobi of ander apart domein
Terwijl sommige websites .mobi voor hun mobile versie gebruiken, is het gebruikelijker om een subdomein te gebruiken of een aparte folder op het primaire domein. Een van de grootste voordelen hiervan is dat alles in één domein blijft staan.
Een andere uitdaging in webdesign voor het mobiele web zijn de vele verschillende typen telefoons en PDA’s die gebruikt worden
Testen
Voor het reguliere web zijn genoeg betrouwbare manieren om je website te testen. Voor het mobiele web ligt dit iets anders. De kans is aanzienlijk dat de bezoekers van je website in een situatie zijn die je niet hebt kunnen testen. Een andere uitdaging in webdesign voor het mobiele web zijn de vele verschillende typen telefoons en PDA’s die gebruikt worden.
Met een goed ontwerp en goed geplande tests is het mogelijk om er vrij zeker van te zijn dat de website goed weergegeven wordt en nog belangrijker, bruikbaar is op de meeste PDA’s en mobiele telefoons. De eenvoud van je website maakt het testen al een stuk eenvoudiger, simpelweg omdat er minder is dat mis kan gaan. Er is een aantal online en offline emulators beschikbaar waarmee je de meeste problemen al uit je website zult kunnen halen. De Google Wireless transcoder - zie http://www.google.com/gwt/n - geeft een goed beeld van hoe je website eruit zal komen te zien, al is deze niet zo streng en geeft-ie je website al snel redelijk weer.
Ook Microsoft - zie http://www.microsoft.com/downloads/details.aspx?FamilyId=1A7A6B52-F89E-4354-84CE-5D19C204498A&displaylang=en - heeft een emulator die als Visual Studio plugin of stand alone te gebruiken is.
De beste optie is waarschijnlijk een groep mensen met verschillende soorten mobile telefoons bij elkaar te zoeken voor een goede usability test.
Standaarden
Er is een aantal organisaties dat zich bezig houdt met het ontwikkelen van standaarden om websites geschikt te maken voor het mobiel internet. Het W3C heeft sinds 2005 een “Mobile Section Workgroup”. Deze werkgroep heeft in december 2008 een concept versie van best practices gepubliceerd. Hierop zijn 60 best practices te vinden die de user experience van mobiel internet moeten verbeteren. Zij ontvangen graag feedback op deze best practices (zie http://www.w3.org/2005/MWI/BPWG/).
Resources en artikelen
Als je na deze het lezen van dit artikel nieuwsgierig bent geworden naar de mogelijkheden voor webdesign voor het mobiele internet kun je op onderstaande URL’s meer informatie over mobile webdesign en voorbeelden van mobiele websites vinden.