8 Golden Rules of Mobile Design

Mobilt design er en relativt ny, men vigtig overvejelse. For bare et årti siden betegner designet til at designe til en stationær computer; Nu betyder det også at designe til mobile enheder. Mobiltelefoner kører en stigende mængde af webtrafik, og tallene vil kun vokse.

Ifølge Statista, i oktober 2018 havde vi 3,9 milliarder unikke mobile internetbrugere og mere end 50 procent af alle Website Traffic Worldwide blev genereret gennem mobiltelefoner . Et godt webdesign er ikke længere en luksus, men noget af en nødvendighed.

Oprettelse af en fantastisk weboplevelse for mobile brugere kræver mere end bare at oprette Responsive Web Design (selvom en top Website Builder. kan hjælpe, som kan din Web Hosting. valg). I denne artikel kan du opdage principperne for mobilwebstedets design.

01. Byg målrettede oplevelser

Mobilbrugere er meget målrettede brugere. Hver gang de besøger en hjemmeside, har de en bestemt opgave, de ønsker at opnå, og de forventer at få det, de har brug for rigtig hurtigt. Så hvordan kan du få det til at ske?

Billede Dine ideelle brugere: Ligesom opbygning af et hus, bygger en hjemmeside med et solidt fundament. Og fundamentet for Great Web Design er den viden, du har om dine brugere. Brugerforskning bør være et af de første trin i produktdesign. Du skal finde ud af, præcis, hvem dine brugere er, og hvad de vil opnå. Når du har kendskab til dine brugers ønsker og har brug for, kan du derefter oprette en brugerrejse, som du ved, passer perfekt til deres forventninger perfekt (sørg for at gemme nogen resultater sikkert i Sky lagring ). Derefter udfører grundigt ud brugerprøvning vil sørge for at du har opnået disse mål.

Forfind erfaringerne omkring dit kerneformål: Hvad vil du opnå med denne hjemmeside? At finde svarene på dette spørgsmål er en anden vigtig ting at gøre, når du opretter mobil weboplevelse. Forsøger du at køre engagement, få brugerne til at købe produkter eller tilmelde dig en tjeneste? Stat klart målet og tænk på, hvordan du kan reducere antallet af trin, en bruger skal tage for at nå det.

02. Tilpas dit indhold for at arbejde i et mindre rum

Indholdet er, hvad der giver værdi for de fleste websteder. Det er den primære årsag til, at folk besøger dem. Når det kommer til mobilt webdesign, er det umuligt at tage en desktop oplevelse og replikere den på mobilen; Det er vigtigt at designe hjemmesider med mobile brugere i tankerne. Det betyder, at vi skal tilpasse indhold og funktioner til at imødekomme brugerens skærmstørrelse og vaner. Så hvilke skridt kan du tage for at opnå dette?

Undgå vandret rulning: Brugere er komfortable med steder, der ruller lodret, men ikke vandret. Derfor bør der ikke være sider, hvor vandret rulning er forpligtet til at se indhold. Fastbreddeelementer er en af ​​de almindelige grunde, der forårsager vandret rulning, så kontroller du ikke har indhold, der kun viser godt på en bestemt visningsbredde.

Mål for et enkelt kolonne layout: Single-column layouts hjælper med at styre det begrænsede rum på en lille skærm og også muliggøre nem skalering mellem portræt og liggende tilstand.

Sørg for, at brugerne ikke behøver at klemme til zoom: Besøgende kan let frustreres, når de skal zoome ind eller ud for at læse en tekst eller se et billede. Design dit mobilwebsted, så brugerne aldrig behøver at ændre størrelsen.

Brug læselig skriftstørrelse: 11 point er den absolutte minimumsstørrelse for tekst. Denne størrelse gør det muligt for brugerne at læse tekst ved en typisk visningsafstand uden at zoome.

Vælg skrifttyper, der skalaer godt: Hvis webstedsoplevelsen kræver læsning, er det bedre at bruge SANS-SERIF-skrifttyper som Helvetica eller Roboto.

Brug fingervenlig design: Når du designer et mobilwebsted, skal du huske besøgende vil bruge deres fingre i stedet for en muspil og menneskelige fingerspidser er større end en musemarkør. Forsøg at designe en fingervenlig grænseflade, hvor hvert interaktivt element er dimensioneret korrekt.

En MIT Touch Lab Study fandt ud af, at den gennemsnitlige størrelse af et fingertip er 8-10 mm , Gør 10 mm x 10mm en god minimumsuger målstørrelse.

Overvej også den relative afstand mellem berøringsmål. Hvis interaktive elementer er placeret for tæt på hinanden, kan mobilbrugere ved et uheld trykke på en forkert knap med fingeren. For at forhindre, at der skulle ske, skal du sørge for korrekt størrelse knapper og også tilføje nok plads mellem dem.

Gør produktbilleder udvidet: Mange undersøgelser har bevist, at folk er overvejende visuelle elever. De fleste mennesker er i stand til at forstå og forstå begreber langt bedre, når de leveres på den måde, hvilket er derfor at bruge billeder i webdesign er en fantastisk måde at opsummere nøglebeskeder hurtigt.

Billeder spiller en afgørende rolle i eCommerce websites - folk stole på produktbilleder, når de træffer en beslutning. Det er vigtigt ikke kun at levere højkvalitetsaktiver, men også gøre dem udvidelige, så brugerne nemt kan se dem i detaljer. Udvid hele billedet i stedet for bare en del af det.

Pas på med kampagner og annoncer: Kampagner og annoncer kan nemt overbygge indholdet. Mens annoncens besked kan fungere for nogle besøgende, springer brugere i en flertal af sager brugere og går videre til mere værdifulde oplysninger. Dette fænomen er kendt som bannerblindhed.

Gør det nemt at finde kontaktoplysninger: Mobilbrugere besøger ofte websteder for at finde kontaktoplysninger. Afhængigt af uopsætteligheden vil brugerne måske ringe til et firma, udfylde en kontaktformular eller finde adressen. For e-handelswebsteder skal telefonnummeret være tilgængeligt lige på startskærmen.

03. Optimer indholdet til scanning

Det er en velkendt kendsgerning, at brugerne ikke læser online; de scanner. Når en ny besøgende nærmer sig en webside, er den første ting, de forsøger at gøre, scanne siden og opdele indholdet i fordøjelige oplysninger. Det er muligt at gøre denne opgave lettere for brugerne ved at følge et par enkle regler.

Husk den rækkefølge, hvor du giver indhold på en side: Folk læser fra top til bund. Derfor er det vigtigt at bevare de vigtige ting øverst på en side og flytte resten ned i henhold til hierarkiet.

Skær rodet: Prioritere indhold over brugergrænsefladeelementer - Reducer distraktioner ved at fjerne unødvendige funktionelle og dekorative elementer. Forsøg at skabe en minimalistisk stil, fordi du gør det nemt for brugeren at fokusere på opgaven.

Undgå lange typer af tekst uden billeder: Det er meget sandsynligt, at eventuelle store indhold af indhold vil blive sprunget over. Brug overskrifter, afsnit eller punktum til at bryde op tekst.

Sæt mere visuel vægt på vigtige elementer: Gør vigtige elementer som nøglebeskeder Focal Points, så besøgende ser dem med det samme. Fremhæv elementer ved hjælp af forskellige størrelser, hvide rum eller levende farver.

04. Opret forudsigelig navigation

Hjælper brugerne navigere skal være en topprioritet for hver hjemmeside. Det mest overbevisende indhold er trods alt ubrugeligt, hvis folk ikke kan finde det. Derfor er det vigtigt at investere i at designe et solidt navigationssystem ved hjælp af nogle af de følgende trin.

Brug velkendte navigationsmønstre: Når det kommer til at oprette en navigationsmekanisme til dit websted, er det værd at huske en simpel regel: Genopfyld ikke hjulet - stræber efter at skabe en velkendt oplevelse. Det er altid bedre at stole på navigationsmønstre, som de fleste brugere er bekendt med (f.eks. Topnavigationslinje eller Hamburger-menu) i stedet for at oprette dit eget unikke navigationssystem (f.eks. Gesture-baseret navigationssystem). Når du opretter velkendt navigation, hjælper du brugerne til at stole på deres tidligere erfaring, når du interagerer med dit produkt.

Sæt en grænse for det samlede antal navigationsindstillinger: Sæt ikke for mange muligheder i menuerne. En omfattende menu kan fungere godt til desktopwebsteder, men de passer ikke til mobilt design. Da ikke alle navigationsindstillinger vil være tilgængelige på et synligt område på skærmen, vil du tvinge mobile brugere til at rulle gennem en liste over muligheder. Tænk, hvordan du kan præsentere de færreste menupunkter muligt. Ideelt set, menuen du designer bør ikke have mere end syv særskilte kategorier .

Prioritere navigationsindstillinger : Organiser navigation baseret på måden brugere arbejder med funktionalitet. De mest populære navigationsindstillinger i en global menu skal gå øverst, og de primære handlinger skal være tilgængelige på et synligt område på skærmen.

Skriv klare etiketter: Hver navigationsindstilling skal have en klar og kortfattet etiket. Undgå jargon - navigationen du design bør ikke indeholde vilkår, dine besøgende ikke forstår. Klare etiketter vil give besøgende mulighed for at forudsige resultatet af deres handlinger.

Sørg for, at interaktive elementer ser ud som interaktive elementer : Når du designer knapper og links, skal du tænke på, hvordan designet kommunikerer fordel. Hvordan forstår brugerne elementet som et interaktivt objekt? Den måde, et objekt ser, fortæller brugerne, hvordan man bruger det. Visuelle elementer, der ligner links eller knapper, men er ikke interaktive (f.eks. Understreget ord, der ikke er links eller rektangulære kasser med ord, der ikke er knapper), kan nemt forvirre brugere.

Kommuniker den aktuelle placering: "Hvor er jeg?" er et grundlæggende spørgsmål, som brugerne har brug for et svar for effektivt at navigere. Tydeligt angive den aktuelle placering.

Giv en søgefunktion: Hvis du designer et komplekst websted med en masse indhold eller funktioner, skal du sikre dig, at du giver en søgelinje for nem navigation. Ved at implementere søgefunktionalitet, giver du en hurtig rute til information / funktioner til mobile brugere, der kommer til webstedet med et bestemt spørgsmål i tankerne.

Skjul ikke søgeindstillingen i menuen. Det skal være en af ​​de første ting, besøgende ser på dine sider.

Gør det nemt for brugerne at vende tilbage til hjemmesiden: Besøgende forventer, at når de trykker på logoet øverst på en side, vender de tilbage til hjemmesiden, og de bliver frustreret, hvis det ikke virker.

Hold din bruger i et enkelt vindue: Undgå opkald til handling, der sender en bruger til nye vinduer. Nogle brugere vil have problemer med at skifte mellem Windows i en mobilbrowser og kan muligvis ikke finde den forrige side.

05. Undgå at skabe roadblocks

Roadblocks skaber friktion og friktion er den værste fjende af konvertering. Heldigvis er der enkle ting, du kan gøre for at siddeplade dem.

Afbryd ikke besøgende: Store pop-ups er en af ​​de mest typiske typer afbrydelser på weboplevelsen. I lang tid blev sådanne bannere dedikeret til promo-meddelelser, men for nylig begyndte mange websteder at bruge distraherende pop-ups for at få tilladelse til at bruge cookies (GDPR). Uanset hvilke oplysninger du vil vise til dine besøgende, skal du sørge for, at det ikke distraherer fra den samlede oplevelse.

Gør ikke brugerne forlade dit websted: Identificer steder i brugerrejser, der kan få en bruger til at se uden for dit websted og derefter give indhold / funktioner til at holde dem på dit websted. Et promo-kodefelt på e-handelswebsteder er måske det mest almindelige eksempel, der gør besøgende efterlade et websted i forsøget på at finde kuponen. Det er meget bedre at tilbyde nogle kuponer lige på stedet for at forhindre sådan adfærd.

Tving ikke brugere til at tilmelde sig: Krævende brugere Tilmeld dig, før de kan se oplysninger eller bruge en online-tjeneste, har en høj interaktionsomkostning - tvangsregistrering for tidligt kan Årsag Brugere om at opgive webstedet . Før du leverer personlige oplysninger, ønsker de besøgende at få en fornemmelse af, hvad et websted tilbyder dem.

For at oprette en brugerflow med de mindst hindringer for konvertering, skal mobilsteder gøre det muligt for besøgende at udforske indhold uden at skulle tilmelde sig. For e-handelswebsteder er det vigtigt at lade brugerne købe som gæst.

Gør det nemt at skifte til en anden enhed for at fortsætte rejsen: Overvej ikke mobil som frittstående oplevelser. En typisk bruger har flere enheder som en desktop, mobiltelefon og tablet og forventer at have en sømløs oplevelse på tværs af alle disse enheder, når du bruger dit produkt. For eksempel bruger mange mennesker kun mobile enheder til produktsøgning og derefter skifter til skrivebordet til at konvertere. Brugere forventer at fortsætte rejsen fra hvor de stoppede på mobilen.

Her er et par ting, du kan gøre for at synkronisere en brugers nuværende fremskridt:

• Synkroniser til ønskeliste, favoritter og kurv for en brugerkonto.
• Tilbyde en nem måde at gemme eller dele oplysninger på tværs af enheder til ikke-registrerede brugere (f.eks. En mulighed for at sende linket til e-mail).

06. Design effektive former

Formindtastning er en af ​​de mest almindelige opgaver på nettet. Det er svært at forestille sig nogen erfaring, der ikke kræver, at brugerne udfylder en slags form. Fordi det er en sådan allestedsnærværende praksis, er evnen til at udfylde en form smertefri, afgørende for at holde en bruger indgreb. Her er et par tips, der kan hjælpe dig med at holde friktion til et minimum:

Minimer indgange i formularer: Generelt er de mindre data en bruger at give, desto mere, de vil nyde din weboplevelse. Disse pointers hjælper dig med at reducere tastetryk og inputbrugere skal gøre:

• Minimere det samlede antal felter. Hold altid formularer så korte og enkle som muligt ved at fjerne eventuelle unødvendige felter. Spørg kun, hvad du virkelig har brug for at vide.
• Brug auto-korrekt, auto-kapitalisering og automatisk komplet for at reducere chancen for brugerfejl.
• Undgå drop-down felter. Dropdowns Skjul indstillingerne, og dette skaber ekstra interaktionsomkostninger - brugere skal trykke to gange for at vælge den rigtige indstilling. Hvis du bruger et drop-down-felt til et udvalg af indstillinger, skal du overveje at erstatte det med radioknapper.
• Flyt automatisk til næste felt, når en bruger trykker tilbage.
• Minimere formularfejl med real-time inline validering.
• Brug eksisterende oplysninger til at maksimere bekvemmeligheden. For eksempel kan du fylde nogle felter som forsendelsesadresse eller faktureringsoplysninger til dine registrerede brugere.
• Tænk på at tilbyde alternative inputmekanismer. Overvej, hvilke enhedsfunktioner der kan bruges til at give en bedre brugeroplevelse. For eksempel, i stedet for at bede brugere om at skrive kreditkortoplysninger, skal du give mulighed for at bruge enhedens kamera til at scanne kortet og integrere systemer som Apple Pay og Google Pay for at aktivere betaling på et tryk.

Giv matchende tastatur: Mobilbrugere sætter pris på websteder, der giver et passende tastatur til feltet. Denne funktion forhindrer dem i at skulle udføre ekstra handlinger. For eksempel, når brugerne skal indtaste et telefonnummer, skal dit websted vise det numeriske 0 til 9 tastatur.

Indstil HTML-indgangstyper for at vise det korrekte tastatur. Her er syv inputtyper, der er relevante for at danne design:

• Input Type = "Text" Viser mobilenhedens normale tastatur.
• Input Type = "Email" Viser det normale tastatur og '@' og '.com'.
• Input Type = "Tel" Viser den numeriske 0 til 9 tastatur.
• Input Type = "nummer" Viser et tastatur med tal og symboler.
• Input Type = "Dato" Viser mobilenhedens datevælger.
• Input Type = "DateTime" Viser mobilenhedens dato og klokkeslæt.
• Input Type = "Måned" Viser mobilenhedens måned og årvælger.

Lad brugerne ændre placeringsfelt: Mange websites automatisk registrerer brugerplacering og bruger disse oplysninger til derefter at give relevant indhold. Det er vigtigt at lade brugerne ændre placeringen, fordi i nogle tilfælde måske vil se resultater for et andet sted.

07. Forsøg at skabe en konsekvent oplevelse

Konsistens er en af ​​de vigtigste søjler af brugeroplevelse. Konsekvent design er brugervenligt design - ved at fokusere på at skabe konsekvent design, skaber du mere intuitivt design. Altid stræbe efter at gøre hjemmesiden både internt og eksternt konsekvent.

Intern konsistens: Opret et konsekvent bibliotek med designaktiver og brug det til alle sider på dit websted. Skrifttyper, knapper, links, ikoner og alle andre UI-elementer skal være konsekvente på tværs af hjemmesiden for at holde visuel konsistens.

Ekstern konsistens: Sørg for, at hjemmesiden du designer ligner en del af en større produktfamilie. For eksempel, hvis du har en mobil app, skal din mobilwebsite formidle en følelse af fortrolighed for brugere, der bruger den.

08. Byg dit bedste mobilwebsted

Alle punkter, der er nævnt her, kan betragtes som industriens bedste praksis. Men bare fordi noget hedder en 'bedste praksis' betyder det ikke, at det er den optimale løsning til dit websted. Derfor er det altid vigtigt at teste dine designbeslutninger. Gør brugervenlighed test en obligatorisk del af din designproces og forbedrer oplevelsen regelmæssigt.

Denne artikel blev oprindeligt offentliggjort i udstedelse 317 af net , verdens bedst sælgende magasin til webdesignere og udviklere. Køb problem 317. eller Abonner på Net. .

Relaterede artikler:

• 6 tendenser, der ændrer ansigtet af mobil UI design
• 10 tips til bedre mobil UX Design
• Sådan designer brugervenlige mobilgrænseflader