8 manieren om uw site voor mobiel te optimaliseren
Toen de wereld verschoof van desktopcomputers naar mobiele apparaten, werden ontwerpers nog meer gefocust op UX. Hoewel de gebruikersinterface een belangrijke rol speelt bij het maken van mobielvriendelijke ontwerpen, is de gebruikerservaring nu net zo belangrijk geworden, vooral omdat we nu meer apparaten hebben om op te focussen en de gebruikerservaring verschilt met het type apparaat.
UX is iets dat zich uitstrekt voorbij de grenzen van grafische afbeeldingen en esthetiek. Net als Rahul Varshney, de mede-maker van foster.fm , zegt:
Een UI zonder UX is als een schilder die verf op canvas doeken zonder gedachte.
Rahul had gelijk met deze analogie. Je hebt misschien wel de meest aantrekkelijke, gebruiksvriendelijke, unieke en functionele desktopversie van je website, maar als je de mobiele ervaring niet in overweging neemt, schilder je gewoon zonder nadenken.
Dus wat scheidt een goede mobiele ervaring van een slechte mobiele ervaring? Het is niet zo moeilijk om de belangrijkste componenten te onderscheiden die een zeer effectief, geoptimaliseerd en gebruikersgericht ontwerp vormen. Maar hier zijn enkele praktische tips die u onderweg moeten begeleiden:
1) Verwerp mobiel niet eerst
Als uw website is gericht op mobiele UX, wilt u misschien de traditie doorbreken door de "mobile first" -strategie te volgen. Het is niet schadelijk om deze techniek te omarmen als u er zeker van bent dat de meeste van uw gebruikers via een mobiel apparaat toegang hebben tot uw website. Net als codemyviews suggereert dat mobiel webdesign geen niche is, er zijn in feite "1,2 miljard mobiele internetgebruikers wereldwijd" en het aantal lijkt niet snel te dalen (het zal in de nabije toekomst waarschijnlijk toenemen). Dit kan in eerste instantie een beetje uitdagend zijn; maar als je bereid bent om je gebruiker op de eerste plaats te zetten, is het een kans waard.
Alleen omdat u hebt geprobeerd een eenvoudige, schone of op mobiele apparaten gerichte website te ontwerpen, betekent dat nog niet dat dit niet geavanceerd hoeft te zijn. Karimrashid.com is een perfect voorbeeld van hoe eenvoud en verfijning kunnen worden gecombineerd in het creëren van een schoon en responsief, maar toch stijlvol ontwerp.
2) Maak vloeiende lay-outs
Er zijn gewoon veel te veel mogelijke schermformaten om uit te kiezen en te kiezen voor welke u wilt ontwerpen. U moet een lay-out maken die zo naadloos mogelijk aansluit op alle lay-outs. Gelukkig zijn er vloeiende lay-outs om de dag te redden!
Op basis van percentages in plaats van definitieve metingen zoals pixels, zijn vloeiende lay-outs de standaard geworden bij webprofessionals. Ze kunnen lastig zijn, maar ervoor zorgen dat zoveel mogelijk mensen uw site daadwerkelijk kunnen gebruiken, is de moeite meer dan waard.
3) Streef naar functionaliteit
Wat is functionaliteit? Het is wat u uw bezoekers aanbiedt om zaken voor elkaar te krijgen en snel te doen. Op basis van het doel van uw website, moeten alle tools zoals dichtstbijzijnde winkellocaties, productzoekopdracht, productrecensies of valutaconversie gebruikers helpen om bedoelde 'functies' uit te voeren en doelen veel sneller te bereiken.
Purina , een leverancier van huisdierenvoedsel, is een perfect voorbeeld van hoe u "functies" op een webpagina gemakkelijker kunt maken. De startpagina heeft een zoekvak waarin u kunt zoeken wat u zoekt. Hieronder staan twee afzonderlijke kolommen voor het soort dierlijk voedsel waarin ze zijn gespecialiseerd. De hele website is eenvoudig te navigeren met kolom, knoppen, gereedschappen en ontwerpelementen die het beste soort voedsel voor huisdieren maken - en vervolgens kopen - een briesje.
4) Identificeer uw gebruikers
Probeer niet een alleskunner te worden, want het kan een typische gebruiker kosten, en niemand wil dat. Zoek eerst uit wie uw gebruikers zijn. Zoek vervolgens hun gebruikelijke surfgedrag op. Als dat eenmaal opzij is gezet, ontdek dan wat hen ertoe aanzet. Moderne gebruikers zijn van twee hoofdtypen: zij die browsen zonder een doel in gedachten, en degenen die een taak willen uitvoeren. Elk van deze groepen zou verschillende "functies" nodig hebben op basis van hun behoeften.
Het is niet moeilijk om de demografische gegevens van de gebruikers van de The Body Shop-website te raden, omdat er hints over de hele pagina verschijnen. Aangezien The Body Shop zeer gefocust is op "natuurlijke ingrediënten" en sociaal activisme, zijn de monochrome groene variaties, een schuifregelaar van natuurlijke ingrediënten, "groene" afbeeldingenkeuze, evenals verslagen over eerlijke transacties, beloften en andere sociale evenementen begrijpelijkerwijs goed ontwikkeld ontwerpconcept.
5) Zoek altijd de bibliotheken en richtlijnen van de ontwikkelaar op
Op basis van het platform dat u gaat gebruiken, is het essentieel om de UI-richtlijnen goed te bekijken. Sommige platforms bieden meer flexibiliteit dan andere. Hoe het ook zij, sommige sleutelcomponenten van het merk of "handtekeningen" moeten blijven.
Een Apple app-ontwikkelaar zou eens moeten kijken iOS Human Interface Guidelines en volg de Apple-normen als het gaat om het ontwerpen van basics, ontwerpstrategieën, UI-elementen, Icon / image design, enz. De Android-ontwikkelaar moet daarentegen alles te weten komen over de componenten, stijl, bruikbaarheid en lay-out van typische Android-applicaties. met behulp van de Handleiding voor Android-ontwikkelaars .
6) Maak alle inhoud beschikbaar voor alle gebruikers
Sommige ontwerpers, in plaats van al hun inhoud in vloeiende lay-outs te laten werken, zullen er eenvoudig voor kiezen om een deel ervan te verbergen voor mobiele gebruikers. Soms komt het omdat de lay-out lastig is, of omdat ze het gevoel hebben dat er gewoon te veel content is voor een mobiele lay-out. Dit is de verkeerde benadering.
Gebruikers een "uitgeklede" versie van uw site of app geven, is niet alleen oneerlijk tegenover mobiele gebruikers, maar kan ook ernstige gevolgen hebben en uw klanten verliezen. Misschien moet je de lay-out tot het uiterste vereenvoudigen, wat inhoud verplaatsen naar andere schermen om rommel te verminderen, of probeer het allemaal beter te organiseren; maar het moet er zijn .
Vergelijk de desktopversie van de BBC-site naar de mobiele versie. Hoewel het eenvoudiger was dan het vroeger was, legt het nog steeds allerlei informatie over het scherm. De mobiele versie daarentegen daalt enkele van de afbeeldingen (die nog steeds beschikbaar zijn in de artikelen zelf), maar behoudt alle koppen, waardoor de ervaring op een scherm van telefoonformaat dramatisch wordt vereenvoudigd.
7) Ontwerp voor aanraking
Het is ook handig om in gedachten te houden dat een gebruiker van een mobiel apparaat vingers gebruikt in plaats van precieze muisaanwijzers. Uw ontwerp moet gemakkelijk te navigeren zijn met vingers in alle maten en vormen, aangezien alle mobiele apparaten nu een aanraakscherm zijn. Een gebruiker hoeft niet te veel te knijpen of in te zoomen om ergens op te tikken of een formulier in te vullen of op een knop te tikken. Onnauwkeurige tikken komen ook vaak voor op kleine apparaten, die moeten worden verantwoord in het ontwerp met groot genoeg aanraakinvoer of gebaren om de klus te klaren.
Hier is een tafel aanraken door Peter-Paul Koch dat kan helpen. Merk op hoe aanraakgebeurtenissen (en andere acties) kunnen variëren, afhankelijk van browsercompatibiliteit en apparaat.
8) Gebruik compressietools
De hoeveelheid hulpmiddelen die tegenwoordig beschikbaar zijn om het werk van een ontwerper minder belastend te maken, is onpeilbaar. U zult scriptcompressoren vinden zoals HTML-compressor of gzip compressie die onnodige opmerkingen, witruimte of code automatisch verwijdert. CSS-minifier en CSS-compressor en nog een aantal tools waarmee je CSS-code kunt samenvoegen en de prestaties kunt verbeteren. Beeldcompressie is ook net zo belangrijk; sommige die de grootte van je .jpeg- en .png-bestanden verminderen terwijl je de kwaliteit intact houdt, zijn onder meer EWWW Image Optimizer , smush.it , optiPNG , en jpegtran .
Hier is een voorbeeld van een zeer responsief portfolioontwerp van RyJohnson . De website staat vol met spectaculaire afbeeldingen die niet verschillen van de desktopversie. Het geheim van snel laden hier is zonder twijfel een beeldoptimalisatie.
