8 Gouden regels van mobiel ontwerp

Mobiel ontwerp is een relatief nieuwe maar essentiële overweging. Slechts een decennium geleden, ontwerpen voor het web betekende het ontwerpen voor een desktopcomputer; Nu betekent het ook het ontwerpen voor mobiele apparaten. Mobiele telefoons rijden een toenemende hoeveelheid webverkeer en de cijfers gaan alleen maar groeien.

Volgens Statista hadden we in oktober 2018 3,9 miljard unieke mobiele internetgebruikers en meer dan 50 procent van alle websiteverkeer wereldwijd werd gegenereerd door mobiele telefoons ​Een geweldig webontwerp is niet langer een luxe, maar iets van een noodzaak.

Het creëren van een geweldige webervaring voor mobiele gebruikers vereist meer dan alleen maar maken Responsive Web Design (hoewel een top website bouwer kan helpen, zoals jouw web hosting keuze). In dit artikel kunt u ontdekken van de basisbeginselen voor het ontwerpen van mobiele site.

01. Bouw doelgerichte ervaringen

Mobiele gebruikers zijn zeer doelgerichte gebruikers. Elke keer dat ze een website bezoeken, hebben ze een specifieke taak die ze willen bereiken en ze verwachten te krijgen wat ze echt snel nodig hebben. Dus hoe kun je dat laten gebeuren?

Beeld uw ideale gebruikers: Vergelijkbaar met het bouwen van een huis, het bouwen van een website begint met een solide basis. En de stichting voor Great Web Design is de kennis die u over uw gebruikers hebt. Gebruikersonderzoek moet een van de eerste stappen zijn in het productontwerp. U moet erachter komen wie uw gebruikers zijn en wat ze willen bereiken. Nadat u weet dat uw gebruikers van uw gebruikers en nodig hebben, kunt u dan een gebruikersreis maken die u weet dat het perfect past bij hun verwachtingen (zorg ervoor dat u alle bevindingen veilig opslaat cloud opslag ​Dan, het uitvoeren van grondig Gebruikers testen Zorg ervoor dat je die doelen hebt bereikt.

Verfijn ervaring rond uw kerndoelstelling: Wat wil je bereiken met deze website? Het vinden van de antwoorden op deze vraag is een ander belangrijk ding om te doen bij het maken van mobiele webervaring. Probeert u de ingrijping te besturen, kunt u gebruikers producten kopen of aanmelden voor een service? Geef duidelijk het doel aan en denk aan hoe u het aantal stappen kunt snijden dat een gebruiker moet duren om het te bereiken.

02. Pas uw inhoud aan om in een kleinere ruimte te werken

Inhoud is wat waarde biedt voor de meeste websites. Het is de belangrijkste reden dat mensen ze bezoeken. Als het gaat om mobiel webdesign, is het onmogelijk om een ​​bureaubladervaring te nemen en het op mobiel te repliceren; Het is belangrijk om websites te ontwerpen met mobiele gebruikers in gedachten. Dat betekent dat we inhoud en functies moeten aanpassen om de schermgrootte en gewoonten van de gebruiker aan te passen. Dus welke stappen kunt u nemen om dit te bereiken?

Vermijd horizontaal scrollen: Gebruikers zijn comfortabel met sites die verticaal scrollen, maar niet horizontaal. Daarom zouden er geen pagina's moeten zijn waar horizontale scrollen nodig is om inhoud te bekijken. Elementen met vaste breedte zijn een van de gemeenschappelijke redenen die horizontaal scrollen veroorzaken, dus controleer u geen inhoud die alleen goed wordt weergegeven op een bepaalde viewportbreedte.

Doel op een lay-out van één kolom: Lay-outs met één kolom helpen bij het beheren van de beperkte ruimte op een klein scherm en maken ook eenvoudige schaal mogelijk tussen portret- en landschapsmodus mogelijk.

Zorg ervoor dat gebruikers niet hoeven te knijpen-zoom: Bezoekers kunnen gemakkelijk gefrustreerd worden als ze in of uit moeten indienen om een ​​tekst te lezen of een afbeelding te bekijken. Ontwerp uw mobiele site, zodat gebruikers nooit de grootte moeten wijzigen.

Gebruik leesbare lettergrootte: 11 punten is de absolute minimale grootte voor tekst. Met deze maat kunnen gebruikers tekst lezen op een typische kijkafstand zonder zoomen.

Selecteer Lettertypen die goed Schaal: Als de website-ervaring moet lezen, is het beter om SANS-SERIF-lettertypen te gebruiken zoals Helvetica of Roboto.

Gebruik vingervriendelijk ontwerp: Wanneer u een mobiele site ontwerpt, onthoud dat bezoekers hun vingers zullen gebruiken in plaats van een muispijl en menselijke vingertoppen zijn groter dan een muisaanwijzer. Streef ernaar om een ​​vingervriendelijke interface te ontwerpen waarin elk interactief element op de juiste manier is afgeschreven.

Een MIT Touch Lab-studie ontdekte dat de gemiddelde grootte van een vingertop 8-10 mm is , 10 mm x 10 mm een ​​goede minimale aanraakdoelgrootte maken.

Overweeg ook de relatieve afstand tussen aanraakdoelstellingen. Als interactieve elementen te dicht bij elkaar zijn, kunnen mobiele gebruikers per ongeluk met hun vinger op een verkeerde knop tikken. Om te voorkomen dat het gebeurt om de knoppen correct te maken en ook voldoende ruimte tussen hen toe te voegen.

Maak productafbeeldingen uitbreidbaar: Veel studies hebben bewezen dat mensen voornamelijk visuele leerlingen zijn. De meeste mensen zijn in staat om concepten veel beter te begrijpen en te begrijpen wanneer ze op die manier worden afgeleverd, daarom het gebruik van afbeeldingen in het webontwerp is een geweldige manier om sleutelberichten snel samen te vatten.

Afbeeldingen spelen een vitale rol in e-commerce-websites - Mensen vertrouwen op productafbeeldingen bij het nemen van een beslissing. Het is van essentieel belang om niet alleen hoogwaardige activa te bieden, maar ze ook uitbreidbaar maken zodat gebruikers ze gemakkelijk in detail kunnen zien. Breid het hele beeld uit in plaats van er slechts een deel ervan uit te oefenen.

Wees voorzichtig met promoties en advertenties: Promoties en advertenties kunnen eenvoudig de inhoud overschaduwen. Terwijl het bericht van de advertentie voor sommige bezoekers kan werken, slaat u in een meerderheid van de gevallen de gebruikers over en gaan ze verder met meer waardevolle informatie. Dit fenomeen staat bekend als bannerblindheid.

Maak het gemakkelijk om contactgegevens te vinden: Mobiele gebruikers bezoeken vaak websites om contactgegevens te vinden. Afhankelijk van de urgentie willen gebruikers misschien een bedrijf bellen, een contactformulier invullen of het adres vinden. Voor eCommerce-websites moet het telefoonnummer beschikbaar zijn op het startscherm.

03. Intimaliseer inhoud voor het scannen

Het is een bekend feit dat gebruikers niet online lezen; ze scannen. Wanneer een nieuwe bezoeker een webpagina nadert, is het eerste wat ze proberen te doen, de pagina scannen en de inhoud verdelen in verteerbare stukjes informatie. Het is mogelijk om deze taak gemakkelijker te maken voor gebruikers door een paar eenvoudige regels te volgen.

Let op de volgorde waarin u inhoud op een pagina verstrekt: Mensen lezen van boven naar beneden. Daarom is het belangrijk om de belangrijke dingen bovenaan een pagina te behouden en de rest naar beneden te zetten volgens de hiërarchie.

Knip de rommel af: Prioriteit geven aan inhoud via gebruikersinterface-elementen - verminderen afleiding door onnodige functionele en decoratieve elementen te verwijderen. Streef ernaar om een ​​minimalistische stijl te creëren, want door dat te doen, maakt u het gemakkelijk voor de gebruiker om zich te concentreren op de taak.

Vermijd lange blokken tekst zonder afbeeldingen: Het is zeer waarschijnlijk enige enorme gevallen van inhoud worden overgeslagen. Gebruik rubrieken, paragrafen of kogelpunten om tekst uit te breekt.

Zet meer visueel gewicht op belangrijke elementen: Maak belangrijke elementen, zoals belangrijke berichten Focal Points, dus bezoekers zien ze meteen. Benadruk elementen met behulp van verschillende maten, witruimte of levendige kleuren.

04. Maak voorspelbare navigatie

Door gebruikers te helpen bij het navigeren moet een topprioriteit zijn voor elke website. Immers, de meest overtuigende inhoud is nutteloos als mensen het niet kunnen vinden. Daarom is het belangrijk om te investeren in het ontwerpen van een solide navigatiesysteem, met behulp van enkele van de volgende stappen.

Gebruik vertrouwde navigatiepatronen: Als het gaat om het creëren van een navigatiemechanisme voor uw website, is het de moeite waard om een ​​eenvoudige regel te onthouden: het wiel niet opnieuw uitvinden - streven om een ​​vertrouwde ervaring te creëren. Het is altijd beter om te vertrouwen op navigatiepatronen waarmee de meeste gebruikers bekend zijn (zoals de bovenste navigatiebalk of het Hamburger-menu) in plaats van uw eigen unieke navigatiesysteem te maken (bijv. Gebaseerd navigatiesysteem). Wanneer u een bekende navigatie maakt, helpt u gebruikers te vertrouwen op hun vorige ervaring bij het interageren met uw product.

Plaats een limiet op het totale aantal navigatieopties: Zet niet te veel opties in menu's. Een uitgebreid menu kan goed werken voor desktopsites, maar passen ze niet in het mobiele ontwerp. Aangezien niet alle navigatie-opties beschikbaar zijn in een zichtbaar gedeelte van het scherm, dwingt u mobiele gebruikers om door een lijst met opties te bladeren. Denk aan hoe je de minste menu-items kunt presenteren. Idealiter, het menu dat u ontwerpt zou niet meer dan zeven verschillende categorieën moeten hebben ​

Prioritize-opties voor de navigatie : Organiseer navigatie op basis van de manier waarop gebruikers werken met functionaliteit. De meest populaire navigatiemogelijkheden in een wereldwijde menu moeten bovenaan gaan en de primaire acties moeten beschikbaar zijn in een zichtbaar gedeelte van het scherm.

Schrijf heldere labels: Elke navigatieveul moet een duidelijk en beknopt etiket hebben. Vermijd jargon - de navigatie die u ontwerpt, mag geen termen bevatten die uw bezoekers niet begrijpen. Heldere labels geven bezoekers het vermogen om het resultaat van hun acties te voorspellen.

Zorg ervoor dat interactieve elementen eruit zien als interactieve elementen : Denk bij het ontwerpen van knoppen en links na over hoe het ontwerp zich communiceert. Hoe begrijpen gebruikers het element als een interactief object? De manier waarop een object eruit ziet, vertelt gebruikers hoe ze het moeten gebruiken. Visuele elementen die op koppelingen of knoppen lijken, maar zijn niet interactief (zoals onderstreepte woorden die geen links of rechthoekige vakken zijn met woorden die niet knoppen) kunnen verwarren gebruikers.

Communiceer de huidige locatie: "Waar ben ik?" is een fundamentele vraag waarmee gebruikers een antwoord nodig hebben om effectief te navigeren. Geef duidelijk de huidige locatie aan.

Geef een zoekfunctie op: Als u een complexe site met veel inhoud of functies ontwerpt, moet u ervoor zorgen dat u een zoekbalk opgemaakt voor eenvoudige navigatie. Door zoekfunctionaliteit te implementeren, biedt u een korte route aan informatie / functies voor mobiele gebruikers die naar de site komen met een specifieke vraag in gedachten.

Verberg de zoekoptie niet in het menu. Het moet een van de eerste dingen zijn die bezoekers op uw pagina's zien.

Maak het gemakkelijk voor gebruikers om terug te keren naar de startpagina: Bezoekers verwachten dat wanneer ze op het logo op de top van een pagina tikken, ze terugkeren naar de startpagina en ze gefrustreerd raken als dat niet werkt.

Houd uw gebruiker in een enkel venster: Vermijd oproepen-to-action die een gebruiker naar nieuwe vensters verzenden. Sommige gebruikers hebben problemen om te schakelen tussen Windows in een mobiele browser en mogelijk niet in staat zijn om de vorige pagina te vinden.

05. Vermijd het maken van wegversperringen

Roadblocks creëren wrijving en wrijving is de ergste vijand van conversie. Gelukkig zijn er eenvoudige dingen die je kunt doen om ze te reiken.

Onderbreek bezoekers niet: Grote pop-ups zijn een van de meest typische soorten onderbreking op de webervaring. Lange tijd waren dergelijke banners gewijd aan promo-berichten, maar onlangs begonnen veel sites afleidende pop-ups te gebruiken om toestemming te krijgen om cookies (GDPR) te gebruiken. Ongeacht welke informatie u aan uw bezoekers wilt laten zien, zorg ervoor dat het niet afleidt van de algehele ervaring.

Laat gebruikers niet uw website achterlaten: Identificeer plaatsen in gebruikersreizen die een gebruiker kan ertoe brengen buiten uw site te kijken en vervolgens inhoud / functies te bieden om ze op uw site te houden. Een promocodeveld op e-commerce-websites is misschien wel het meest voorkomende voorbeeld dat bezoekers een site achterlaten in de poging om de kortingsbon te vinden. Het is veel beter om een ​​aantal kortingsbonnen aan te bieden op de site om dergelijk gedrag te voorkomen.

Forceer gebruikers niet om aan te melden: Veeleisende gebruikers registreren voordat ze informatie kunnen zien of een online service gebruiken, heeft een hoge interactiekosten - Forcing-registratie te vroeg ervoor zorgen dat gebruikers de site verlaten ​Voordat we persoonlijke informatie verstrekken, willen bezoekers een idee krijgen van wat een site ze biedt.

Om een ​​gebruikersstroom te maken met de minste belemmeringen voor conversie, moeten mobiele sites bezoekers in staat stellen inhoud te verkennen zonder zich aan te melden. Voor e-commerce-websites is het essentieel om gebruikers te laten kopen als gast.

Maak het gemakkelijk om over te schakelen naar een ander apparaat om de reis voort te zetten: Overweeg niet mobiel als stand-alone ervaringen. Een typische gebruiker heeft verschillende apparaten zoals een desktop, mobiele telefoon en tablet en verwacht een naadloze ervaring op al die apparaten te hebben bij gebruik van uw product. Bijvoorbeeld, veel mensen gebruiken alleen mobiele apparaten voor productonderzoek en overschakelen vervolgens naar desktop om te converteren. Gebruikers verwachten de reis voort te zetten van waar ze op mobiel zijn gestopt.

Hier zijn een paar dingen die u kunt doen om de huidige voortgang van een gebruiker te synchroniseren:

• Synchroniseer verlanglijst, favorieten en mand voor een gebruikersaccount.
• Bied een eenvoudige manier om informatie op te slaan of te delen over apparaten voor niet-geregistreerde gebruikers (zoals een optie om de link naar e-mail te verzenden).

06. Ontwerp efficiënte vormen

Formulieringang is een van de meest voorkomende taken op het web. Het is moeilijk om je een ervaring voor te stellen die niet vereist dat gebruikers een soort vorm invullen. Omdat het zo'n alomtegenwoordige praktijk is, is het vermogen om een ​​vormpijnvrij te vullen is cruciaal voor het behouden van een gebruiker. Hier zijn een paar tips die u kunnen helpen wrijving tot een minimum te beperken:

Minimaliseer ingangen in formulieren: Over het algemeen moet de minder gegevens een gebruiker bieden, hoe meer ze genieten van uw webervaring. Deze aanwijzers helpen u bij het verminderen van de toetsaanslagen en de gebruikers die gebruikers moeten maken:

• Minimaliseer het totale aantal velden. Houd de vormen altijd zo kort en eenvoudig mogelijk door onnodige velden te verwijderen. Vraag alleen wat je echt moet weten.
• Gebruik Auto-corrigeer, automatisch kapitalisatie en automatisch compleet om de kans op gebruikersfout te verminderen.
• Vermijd vervolgvelden. Dropdowns Verberg de opties en dit creëert extra interactiekosten - gebruikers moeten twee keer tikken om de juiste optie te selecteren. Als u een vervolgveld gebruikt voor een selectie van opties, overweeg dan om deze te vervangen door keuzerondjes.
• Ga automatisch naar het volgende veld wanneer een gebruiker op de rendement drukt.
• Minimaliseer formulierfouten met real-time inline-validatie.
• Gebruik bestaande informatie om het gemak te maximaliseren. U kunt bijvoorbeeld een aantal velden invullen, zoals verzendadres of factureringsinformatie voor uw geregistreerde gebruikers.
• Denk aan het aanbieden van alternatieve invoermechanismen. Overweeg welke apparaatmogelijkheden kunnen worden gebruikt om een ​​betere gebruikerservaring te bieden. In plaats van gebruikers te vragen om creditcardgegevens in te typen, geeft u de optie om de camera van het apparaat te gebruiken om de kaart te scannen en systemen zoals Apple Pay en Google Pay te scannen om betaling in één tik te maken.

Zorg voor bijpassende toetsenbord: Mobiele gebruikers waarderen websites die een geschikt toetsenbord voor het veld bieden. Deze functie voorkomt dat ze extra acties moeten uitvoeren. Wanneer gebruikers bijvoorbeeld een telefoonnummer moeten invoeren, moet uw website het numerieke 0 tot 9 toetsenbord weergeven.

Stel HTML-invoertypen in om het juiste toetsenblok te tonen. Hier zijn zeven invoertypen relevant om ontwerp te vormen:

• Invoertype = "Tekst" Geeft het normale toetsenbord van het mobiele apparaat weer.
• Invoer Type = "E-mail" Geeft het normale toetsenbord en '@' en '.com' weer.
• Invoertype = "Tel" Geeft het numerieke 0 tot 9 toetsenbord weer.
• Invoertype = "nummer" Geeft een toetsenbord weer met cijfers en symbolen.
• Ingangstype = "Datum" Geeft de datumkeuzeschakelaar van het mobiele apparaat weer.
• Invoertype = "DateTime" Geeft de datum- en tijdselector van het mobiele apparaat weer.
• Ingangstype = "maand" Geeft de maand en het jaarselector van het mobiele apparaat weer.

Laat gebruikers locatieveld wijzigen: Veel websites automatisch detecteren gebruikerslocatie en gebruiken deze informatie om vervolgens relevante inhoud te leveren. Het is essentieel om gebruikers de locatie te laten wijzigen, want in sommige gevallen kunnen gebruikers de resultaten voor een andere plaats willen zien.

07. Streef ernaar om een ​​consistente ervaring te creëren

Consistentie is een van de belangrijkste pijlers van gebruikerservaring. Consistent design is gebruiksvriendelijk ontwerp - door zich te concentreren op het creëren van consistent ontwerp, creëert u meer intuïtieve ontwerp. Streef altijd ernaar om de website zowel intern als extern consistent te maken.

Interne consistentie: Maak een consistente bibliotheek met ontwerpactiva en gebruik het voor alle pagina's van uw website. Lettertypen, knoppen, links, pictogrammen en alle andere UI-elementen moeten consistent zijn over de website om visuele consistentie te houden.

Externe consistentie: Zorg ervoor dat de website die u ontwerpt, een deel van een grotere productfamilie. Als u bijvoorbeeld een mobiele app hebt, moet uw mobiele website een gevoel van vertrouwdheid overbrengen voor gebruikers die het gebruiken.

08. Bouw uw beste mobiele site

Alle hier genoemde punten kunnen worden beschouwd als de beste praktijken van de industrie. Maar alleen omdat iets een 'beste praktijk' wordt genoemd, betekent niet dat het de optimale oplossing is voor uw website. Daarom is het altijd belangrijk om uw ontwerpbeslissingen te testen. Maak gebruik van een verplicht onderdeel van uw ontwerpproces en verbeter de ervaring op regelmatige basis.

Dit artikel is oorspronkelijk gepubliceerd in kwestie 317 van netto- , 's werelds best verkochte magazine voor webontwerpers en ontwikkelaars. Koop nummer 317 of Abonneer u op NET ​

Gerelateerde artikelen:

• 6 Trends die het gezicht van het mobiele UI-ontwerp veranderen
• 10 tips voor beter mobiel UX-ontwerp
• Hoe gebruikte gebruiksvriendelijke mobiele interfaces