Praktische tips voor navigatie op mobiel internet
De manier waarop mensen toegang hebben tot online informatie evolueert. Google meldt dat tegen volgend jaar (2013) meer dan de helft van de websitebezoeken afkomstig zal zijn van mobiele apparaten in plaats van van desktops of laptops.
Het medium voor toegang tot internet verandert niet alleen, maar de behoeften van de meeste mobiele gebruikers die online gaan met hun smartphone of draagbaar apparaat veranderen ook; meer gericht en taakgericht worden.
De smartphonegebruikers van vandaag gebruiken hun telefoons om specifieke taken uit te voeren, zoals het controleren van locaties van bestemmingen, schema's voor openbaar vervoer en banksaldi. Terwijl internet browsen op draagbare apparaten voorkomt (met name wanneer u in echt lange rijen staat of op een bus wacht), surfen veel mensen liever vanuit het comfort van hun huis of kantoor op het internet.
De schermruimte is beperkt op handheld-apparaten en mobiele gebruikers zijn druk bezig, vaak multitasken terwijl ze online informatie zoeken met één duim of vinger.
Om deze redenen is navigatie op mobiele sites nog belangrijker dan navigatie op een traditionele website. Het begrijpen van de vragen en behoeften van de typische bezoeker van de site, de beperkingen van hun apparaat en wat hen zal frustreren, is cruciaal voor een effectief navigatieontwerp op een mobiele site.
Wat vragen mobiele gebruikers als ze online gaan?
Compuware De studie van 2011 Wat gebruikers wilden van Mobile ontdekte dat 95% van de gebruikers op zoek was naar lokale informatie met hun smartphones of handheld-apparaten. Het is daarom een goede gewoonte voor bakstenen en mortelbedrijven om navigatie op hun locatie, openingstijden en contactinformatie prominent op mobiele sites weer te geven.
Plaats jezelf in de schoenen van de typische sitegebruiker. Bekijk de analyses voor mobiel verkeer. Kies de top drie of vier categorieën die gebruikers zoeken en selecteer categorienamen die de meest voorkomende zoekopdrachten weerspiegelen.
Als dit een mobiele site is voor een bakstenen en mortelbedrijf, geeft u een knop voor locatie en contactgegevens prominent weer.
U kunt altijd een link toevoegen om "onze website te bezoeken" en geïnteresseerden kunnen met hun laptop naar een meer uitgebreide versie van de mobiele site in het comfort van hun kantoor of thuis kijken.
7 For All Mankind kennen hun gebruikers.
Ontwerpen voor een andere omgeving
Naast de parameters en afleidingen van de externe omgeving, moeten webontwerpers de apparaten zelf ook evalueren bij het ontwerpen van navigatie-elementen.
Een architect pleit niet voor exact hetzelfde ontwerp van het gebouw voor het midden van de stad, woestijn of bos, een goede webdesigner beschouwt de kansen en beperkingen van de mobiele omgeving om de meest bruikbare navigatie voor mobiliteit te creëren.
Het probleem is natuurlijk dat de ontwerper niet weet welk apparaat de eindgebruiker vasthoudt wanneer hij de site bezoekt, een situatie die kan worden aangepakt met behulp van responsieve ontwerptools zoals CSS-mediaqueries om problemen met locatie, grootte en aanpasbare inhoud. Of het nu gaat om het ontwerpen van een gloednieuwe mobiele site met responsief ontwerp of het aanpassen van een bestaande site voor mobiel, er zijn nog steeds bepaalde praktische tips die gelden voor navigatie.
Navigatiemenu's voor het kleine scherm
Webontwerpers weten dat mobiele gebruikers zich anders gedragen wanneer ze op hun smartphones en handheld-apparaten internetten dan op hun desktop- of laptopcomputers. Het vinden van ruimte voor navigatie op een klein scherm kan lastig zijn, maar met een beetje zorgvuldige planning is mobiel navigatieontwerp haalbaar.
Met slechts vier navigatieknoppen en het gratis nummer dat op de voorgrond staat, wordt de mobiele website van Loews Hotels gebruiksvriendelijk en gemakkelijk te navigeren.
Beste praktijk 1: verminder het aantal menuknoppen
Dit kan lastig zijn bij het ontwerpen van een mobielvriendelijke versie van een bestaande website, met name die met veel links in het bureaubladontwerp. Beperk uw belangrijkste navigatieknoppen tot vijf of minder, voeg geneste menu's toe indien nodig.
Beste praktijk 2: verminder het aantal tikken
Houd het aantal acties dat moet worden uitgevoerd op een mobiel apparaat tot een minimum beperkt. Hoe minder tikken en klikken om te vinden waarnaar de gebruiker op zoek is, hoe beter. Het is te gemakkelijk om een fout te maken. Vermeld altijd een eenvoudig terug te vinden knop: u wilt de gebruiker niet verder frustreren.
Beste praktijk 3: scrollen navigatie
Houd de meest cruciale navigatie-elementen bovenaan. Mobiele apparaten hebben verschillende schermformaten, dus denk goed na over het belang van elke categorie, want degenen die verderop in de lijst staan, moeten mogelijk scrollen op smartphones met minder schermruimte.
Beste praktijk 4: stapelbare knoppen
Mobiele gebruikers zien uw site in portrait in plaats van landscape zoals op een desktop. Pas uw navigatie voor het mobiele web aan door deze verticaal weer te geven. Neer lezen in plaats van over. Dit werkt het beste voor sites met niet meer dan vijf categorieën in het menu en als het onwaarschijnlijk is dat er meer categorieën worden toegevoegd.
Beste werkwijze 5: genest menu
Dit wordt soms ook wel samenvouwbare navigatie genoemd. Dit is een goede optie voor sites die inhoud op het scherm nodig hebben, evenals een menu en degenen die verwachten categorieën en menu-items toe te voegen.
Optimalisatie van mobiliteitsnavigatie voor touchscreen en kleine knoppen
Touchscreens en kleine knoppen betekenen nieuwe overwegingen voor webontwerpers. Mobiele gebruikers hebben niet de luxe van een aanklikbare muis om een kleine menuknop of link te lokaliseren. Ze zijn overgeleverd aan hun vingers en duimen, wat betekent dat ze met veel minder precisie naar gebieden op het scherm wijzen dan wanneer ze een muis gebruiken, en gemakkelijk gefrustreerd raken als hun tikken geen onmiddellijk resultaat oplevert.
Webontwerpers kunnen navigatie voor mobiele gebruikers eenvoudiger maken door meer ruimte toe te voegen aan menulinks, of door de links te vervangen door knoppen voor menucategorieën.
Door het groter te maken, wordt het gemakkelijker om snel een gebied te vinden en erop te klikken met een kleine telefoonknop, of er met een vinger of duim op te tikken. Omdat de gemiddelde vinger een klikbaar gebied van minimaal 44px x 44px nodig heeft, kan dit ertoe leiden dat de knoppen en navigatiegebieden de rest van de inhoud op het scherm overschaduwen. Dit kan echter passen bij het doel van de website en gebruiker, vooral als de inhoud van de startpagina secundair is aan de belangrijkste menu-items.
Idealiter zou het ontwerp het de gebruiker van het touchscreen mogelijk moeten maken om de navigatieknop indien nodig groter te maken.
Tips voor optimalisatie
- Stel het menu aan de boven- of onderkant van het scherm in, afhankelijk van het hoofddoel van sitegebruikers. Als ze op zoek zijn naar inhoud en waarschijnlijk gaan scrollen, geven ze door het menu onderaan weer op uw site te plaatsen in plaats van de site te verlaten voor een zoekmachine of een concurrerende site.
- Verberg het menu gedeeltelijk om andere content op het scherm weer te geven, zodat het volledige menu wordt weergegeven wanneer gebruikers erop tikken. Hierdoor blijft het menu centraal en zonder nuttige inhoud te vernietigen.
- Plaats een menulink boven aan het scherm en voeg een navigatieknop toe aan de onderkant.
- Lang en dun kan geweldig zijn voor supermodellen, maar in mobiele webnavigatie is kort en breed mooi. Brede korte navigatie helpt ook als je langere categorietitels hebt - tekst past beter.
- Verklein de hoogte van de koptekstafbeeldingen of vervang ze allemaal door een kleiner logo om de ruimte voor navigatie te vergroten.
- Houd merk- en ontwerpproblemen consistent door aandacht te schenken aan typografie, kleur en de stijl van navigatieknoppen in plaats van waardevolle ruimte te gebruiken met grote afbeeldingen en afbeeldingen.
- Verkort de tekst, vooral op menuknoppen en categorietitels. In sommige gevallen is dit buitengewoon moeilijk, en een stapelbaar menu met ruimte voor meer tekst op elke regel is een alternatief dat de voorkeur verdient.
- Vereenvoudig zoveel mogelijk. Verwijder zo veel mogelijk van de startpagina om u te concentreren op het bieden van de beste paar items die de meeste gebruikers willen.
No-nos voor mobiele navigatie
Mobiele gebruikers zijn druk, afgeleid en onderweg. Ze willen geen variatie in de keuze van welke knoppen ze kiezen en je wilt niet dat ze gefrustreerd raken en de site verlaten vanwege analyse-verlamming.
Geef ze niet veel keus.
Vermijd horizontaal scrollen en geen zweefbeweging! Schuifmenu's kunnen ook frustrerend zijn voor mobiele gebruikers. Vergeet niet dat je saai moet zijn in je zoektocht om de navigatie te vereenvoudigen en te stroomlijnen. Creatieve navigatie is geen slechte zaak, maar het moet wel intuïtief zijn. De gebruiker moet gemakkelijk kunnen zien waar hij naartoe moet gaan om snel de gewenste informatie te vinden.
Conclusie
De relatieve nieuwheid van mobiele apparaten als een methode om toegang tot het internet te krijgen, betekent dat mobiele navigatie voortdurend in ontwikkeling is, omdat verschillende ontwerpen worden geprobeerd, aangepast of helemaal worden weggegooid.
Wat voor één set gebruikers op één site werkt, kan een ramp zijn met een andere site, omdat de informatie waarnaar de gebruiker zoekt, compleet anders is. Daarnaast benadert dezelfde gebruiker verschillende sites met verschillende doeleinden: een mobiele gebruiker die naar een nieuwswebsite op haar telefoon kijkt, wil waarschijnlijk koppen en geen contactgegevens; dat is precies wat ze wil wanneer ze de mobiele site bezoekt voor haar tandarts of haarstylist.
Hoewel de navigatie-elementen voor een mobiele website kunnen verschillen van een traditionele website, is het doel hetzelfde: webbezoekers hebben een vraag wanneer ze online gaan. Waar is de winkel? Wat gebeurt er in de wereld? Wat is het saldo van mijn bankrekening? Geweldige navigatie leidt gebruikers snel en eenvoudig naar de antwoorden.
Voldoen aan hun onmiddellijke behoeften en ze zullen terugkeren, het verkeer naar de website vergroten, uw klanten blij maken en leiden tot verwijzingen en meer mobiel webontwerp voor u.
Welke benaderingen van mobiele navigatie geeft u de voorkeur als ontwerper? Hoe zit het met als gebruiker? Laat het ons weten in de comments.
Uitgelichte afbeelding / thumbnail, mobiel internet afbeelding via Shutterstock.