Lessen van mobiel webontwerp
Mobiele ontwikkeling is een ware rage en de interactieve industrie verkeert in een enorme staat van verwarring omdat talloze tablets en smartphones op de markt komen.
Mobiele app-ontwikkeling krijgt de meeste aandacht, terwijl het mobiele web enigszins stilletjes kruipt. Maar het mobiele internet maakt elke dag meer vooruitgang omdat steeds meer ontwikkelaars voor mobiel geoptimaliseerde interfaces lanceren.
Het mooie van het mobiele internet is dat het fundamenteel is gebouwd met alle dezelfde tools die worden gebruikt in traditioneel webontwerp en -ontwikkeling.
Dit maakt het veel toegankelijker dan app-ontwikkeling. Veel gebruikers willen ook onderweg de website van een bedrijf bezoeken, zonder dat ze een volledige app nodig hebben.
Het bouwen van websites die zijn geoptimaliseerd voor mobiel is zo vergelijkbaar en toch zo anders dan ontwerpen voor de desktop. Bepaalde factoren spelen een veel belangrijkere rol. Variaties in schermgrootte, de aandacht van gebruikers en bruikbaarheid zijn bijvoorbeeld belangrijker dan ooit.
Deze problemen zijn altijd aanwezig op de desktop, maar zijn soms gemakkelijker over het hoofd te zien. Hier zullen we enkele lessen bekijken om te leren van de optimalisatie die op het mobiele web gebeurt. De lessen kunnen direct aangeven hoe we ontwerpen en hoe we denken over traditioneel webontwerp en website-architectuur.
Vereenvoudigde navigatie op mobiele websites
Een van de eerste dingen die duidelijk wordt bij het onderzoeken van mobiele websites, is de extreme vereenvoudiging van de navigatie. Navigatie wordt niet alleen zeer prominent en centraal op een mobiele website, maar wordt ook behoorlijk vaak beperkt tot slechts de meest kritieke elementen.
Ik vind het verbazingwekkend hoe navigatie op het hoogste niveau op de meeste mobiele websites kan worden opgedeeld in twee tot vier items. Natuurlijk erken ik dat de inhoud op een mobiele website vrij vaak is geoptimaliseerd voor het beoogde publiek. Bijvoorbeeld, Waarheid Tabernakelkerk heeft zes opties in de hoofdnavigatie, waarvan er slechts één de navigatie voor de mobiele versie ; en degene die het heeft gemaakt ("Contact") is de focus van de hele startpagina.
De inhoud die niet in de mobiele versie is opgenomen, is natuurlijk nog steeds volledig relevant. De mobiele interface is bedoeld om mensen te vangen die proberen de kerk te vinden of om de servicetijden te bekijken of om eenvoudig contact met hen op te nemen. Dit zijn de meest waarschijnlijke doelstellingen van de mobiele surfer. Degenen die de volledige website op een desktopcomputer raken, willen net zo graag die dingen als ze willen om de kerk te onderzoeken om te zien of dit het soort plaats is dat ze zouden willen bezoeken.
Dus, wat is de les om te leren? Zijn deze twee interfaces niet op geheel andere doelgroepen gericht en hebben ze totaal andere doeleinden? Misschien, maar we kunnen veel leren van de extreme focus van de mobiele interface. Merk op hoe alles gaat over de acties die je kunt ondernemen? De kerk heeft alle navigatie-elementen verwijderd die aanvoelen als vakjes om af te vinken.
Een interessant element is de navigatie-optie "Over" op de volledige website. De mobiele website kan worden geoptimaliseerd voor mensen die onderweg zijn, maar er is geen reden om aan te nemen dat ze niet geïnteresseerd zouden zijn in het lezen over de kerk en haar overtuigingen. Misschien heeft iemand de kerk in het voorbijgaan naar u genoemd, zodat u hem op uw telefoon kunt opzoeken.
Dus de navigatie-optie voor dit element moet worden gewijzigd. Wat als het in plaats daarvan iets communiceerde als: "Wat u over ons zou moeten weten"? Hoewel een beetje lang, weerspiegelt het een meer behulpzame houding. Een algemene 'Over'-bucket lijkt een plaats om alle informatie te bevatten die niemand leest. "Een bezoekersgids voor onze kerk" voelt veel nuttiger en doelgerichter.
De eenvoud en focus van de mobiele interface laten zien dat alles een doel moet hebben om een slot op de website te verdienen. Als hetzelfde zou gelden voor de volledige website, zouden we minder geneigd zijn om het te vullen met schijnbaar belangrijke inhoud en meer geneigd zijn om ervoor te zorgen dat alles een duidelijke functie heeft.
Dit weerspiegelt een zeer taakgerichte mentaliteit. Elke optie daagt de gebruiker uit om een actieve stap te zetten. Het is alsof elke passieve optie is verwijderd en gereduceerd tot bruikbare items op de mobiele website. Dit leidt ons naar de volgende les: wees uiterst taakgericht.
Mobiele websites zijn taakgericht
Met een taakgerichte manier van denken, laten we de volledige website opnieuw bekijken. Hoewel de startpagina prachtig is ontworpen, is de oproep tot actie veel minder evident. De inhoud staat vol met informatie die op u wacht om te besluiten geïnteresseerd te zijn.
Bijvoorbeeld, de grote banner die een komende gebeurtenis markeert, faalt om me naar een soort van actie te bellen; erg passief. Met een taakgerichte mentaliteit kunnen we de call-to-action "Meer lezen" enorm verbeteren. Dit zou net zo eenvoudig kunnen zijn als de call-to-action veel prominenter maken; bijvoorbeeld een grote knop in een contrasterend oranje. Bovendien kan de oproep worden gewijzigd in 'Meer informatie en aanmelden'.
Een ander voorbeeld is de welkomstboodschap. Ik waardeer de intentie en de boodschap die hier wordt gecommuniceerd. Het bericht laat zien dat echte mensen zich achter de website bevinden en probeert de pagina persoonlijk te maken. Maar nogmaals, laten we dit ontleden met een taakgerichte mentaliteit. Een goede follow-up van een dergelijke introductie zou een duidelijke oproep tot actie zijn om bezoekers aan te moedigen een volgende stap te zetten. De enige mensen die dit zullen lezen, zijn immers nieuwkomers. De huidige leden zullen hier meteen voorbijgaan aan zaken als de evenementenkalender. Bied dus een conversiepunt aan voor gebruikers, zoals 'Stel een harde vraag' of 'Wat te verwachten bij een bezoek'.
De box "Speciale gast" daarentegen is fantastisch. Het gaat in op belangrijke problemen en drijft mensen aan om dieper te graven. Ik vraag me alleen af of het een meer prominent element van de pagina zou kunnen zijn. Nogmaals, leden komen waar ze heen moeten; dus focussen op degenen die nieuw zijn op de website en de kerk zou een lange weg gaan naar het maximaliseren van de kans.
Ik weet dat ik deze website echt verslaat, maar het is niet omdat ik het niet leuk vind of denk dat het zijn functie niet dient. Mijn doel is alleen om ons denken en onze vooroordelen over hoe een website eruit moet zien en doen, uit te dagen. Ik beveel deze kerk echt aan voor het hebben van een mooie en functionele website, met een mobiele extensie om op te starten!
Mobiele websites krimpen hun inhoud dramatisch
Een andere voor de hand liggende les met betrekking tot het verkleinen van de navigatie is dat mobiele websites altijd hun inhoud inkrimpen. Niet alleen het aantal opties is teruggebracht tot de kernfunctionaliteit en het doel van de website, maar de kopie is ook enorm verminderd.
In sommige gevallen is veel van de kopie volledig verwijderd! Dit roept de vraag op, is deze inhoud noodzakelijk op de volledige website als de mobiele versie goed functioneert zonder deze? Divi Aruba is daar een goed voorbeeld van. De verleidelijke marketingboodschap die boven op de foto wordt gelegd, lijkt misschien een must-have-element voor de startpagina, maar deze is genaaid micro mobiele website .
Op de mobiele versie wordt het logo bovenop dezelfde afbeelding geplaatst en toch geeft het exact dezelfde boodschap weer: als u ergens naartoe wilt gaan, lees dan verder. Waarom deze prominente plek niet gebruiken om mensen naar de gewenste actie te drijven? De ontwerpers weten immers wat het meest cruciale element is voor het converteren van bezoekers naar klanten. Zet deze informatie aan het werk, en drijf mensen daar met een prominente oproep tot actie in plaats van fluffy marketing te spreken.
Alle goede dingen, zonder pluis
Dit leidt ons naar de volgende les: verliest de pluisjes. Het volgende voorbeeld is een positieve demonstratie hiervan. Reizen Tex is een website met reisinformatie voor de staat Texas. Het heeft een duidelijk doel en doel voor ogen. Gelukkig hebben de ontwerpers de donzige mindset volledig omarmd.
Niet alleen de mini mobiele website focus volledig op het onderwerp en de belangrijkste actiegerichte items, maar dat geldt ook voor de volledige website! Wat een opluchting om bijna geen pluisjes te zien. Inclusief iets somber als een geschiedenis van Texas zou al te verleidelijk zijn. Als mensen een geschiedenisles wilden, zouden ze deze website niet komen. U zult moeilijk worden ingedrukt om inhoud te vinden die niet relevant is voor het unieke doel van deze website.
Maak er een gewoonte van om alles in vraag te stellen. Dit is de enige manier om een website echt te kelderen tot zijn kritieke elementen, wat precies is wat er gebeurt op een goede mobiele website. Er worden moeilijke keuzes gemaakt en er wordt anders waardevolle inhoud gekapt om de website te stroomlijnen. Roep pluis voor wat het is en vernietig het!
Branding is koning op het mobiele internet
Ik ben helemaal voor creativiteit op het web. In feite zijn veel van de grootste veranderingen in de industrie tot stand gekomen als gevolg van een weigering om vast te houden aan de status-quo. Maar er is een tijd en plaats voor alles. Zoveel ontwerpers gebruiken hun opdrachten als een excuus om hun creatieve sappen vrij te geven, voor geen ander doel dan om iets creatiefs te doen. Dit maakt de website tot een ontwerp voor de ontwerper, niet voor de klant en hun behoeften. Dit is een ding waar het mobiele web nogal moedig voor waarschuwt.
Branding is ongelooflijk consistent op het mobiele web en een van de meest consistente onderdelen is de plaatsing van het logo. Op mobiele websites vindt u geen gekke logo's onderaan met vaste voetteksten. Functionaliteit is koning en logo's verschijnen altijd bovenaan. Kun je je voorstellen dat je een mobiele website raakt en niet meteen het logo ziet? Toch is dit gebruikelijk op veel volledige websites.
Hier zijn een paar websites die, hoewel minimaal en zonder een verbluffende stijl, rijk zijn aan branding die niet mag worden gemist.
De les hier kan een diepgaande invloed hebben op hoe u uw werk benadert en op de fundamentele waarde die u aan uw klanten biedt. Voor elke ontwerper die erachter komt dat de behoeften van de klant hun volledige doel dienen voor het project, is er een andere die de wereld wil laten zien hoe creatief en origineel ze zijn.
Net als iedereen die betrokken is bij de productie van een website, moet de webontwerper doelbewust zijn in het dienen van de klant, het helpen van zijn bedrijf en het verbeteren van de bedrijfsresultaten. Met elk element dat u op een mobiele website plaatst, wordt rekening gehouden met de rol en het voordeel dat dit met zich meebrengt. Pas deze mentaliteit toe op alles wat je doet, en je zult snel een sterke bondgenoot vinden in je klant.
Hoe meer we de behoeften van de klant omarmen en alles doen wat we kunnen om waarde te creëren voor hun website, hoe meer we een fundamentele verschuiving in ons werk zullen zien. We gaan van het bouwen van "coole dingen" naar alles bekijken vanuit het perspectief van de klant. Staat deze functie klaar om hun winst te vergroten? Hoe kan het ontwerp worden gewijzigd om hun bedrijf te verbeteren? Als een bijproduct van uw werk meer geld voor de klant is, zult u overal kansen vinden.
Websites zonder de trucs
Een van de grootste prestaties van het mobiele web is het totale gebrek aan gimmicks. Om eerlijk te zijn, er is een tijd en plaats voor gimmicks op het internet. In feite draag ik hele delen van mijn boeken aan hen op. Maar het gebrek aan gimmicks op mobiele websites toont aan dat deze ogenschijnlijk geweldige ideeën geen echt doel dienen.
Alles wat op een mobiele website wordt weergegeven, moet verschillende filters bevatten. Is de inhoud relevant en uiterst nuttig? Is de inhoud kritisch en dient deze voor het belangrijkste doel van de website? Is de website gemakkelijk te gebruiken en te begrijpen? Is de navigatie onconventioneel? Zo ja, is dit van cruciaal belang voor de functie van de website? Het antwoord is misschien wel ja, maar vaker wel dan niet, het zal een beslissend nee zijn.
Sommige gimmicks die opvallend ontbreken in de mobiele ontwikkeling zijn splashscreens, ongebruikelijke navigatie, zinloze animaties en interactiviteit, inline scrolling-gebieden, oneven lay-outs en lay-outs met een vaste breedte. De efficiëntie van het mobiele web is geweldig.
Conclusie
Zoals je kunt zien, hebben we een aantal lessen te leren van het mobiele internet; vooral het vermogen om onnodige elementen van een website te onthullen. Zoals met veel dingen in het leven, opent een kleine verandering in perspectief vaak onze ogen voor de echte waarde van dingen die we al lang als vanzelfsprekend beschouwen.
Ik suggereer niet dat we het doel van het web uit het oog hebben verloren. Integendeel, ik stel voor dat we een veel meer strategische mentaliteit aannemen.
Patrick McNeil is een freelance schrijver, ontwikkelaar en ontwerper. Hij houdt vooral van schrijven over webdesign, mensen trainen in webontwikkeling en websites bouwen. Patrick's nieuwste boekproject is Het handboek van de ontwerper ; het bevat veel onderwerpen in de trant van dit artikel. U kunt er meer over te weten komen TheWebDesignersIdeaBook.com . Volg Patrick op Twitter @designmeltdown .
Dit bericht werd je aangeboden door DudaMobile, een mobiele website creatiebedrijf.
Welke aspecten van mobiel ontwerp probeer je te vertalen naar de desktop? Zie jij zelf eenvoud en snelheid in het mobiele web?