8 måter å optimalisere nettstedet ditt for mobil
Da verden skiftet fra stasjonære datamaskiner til mobile enheter, ble designere enda mer fokusert på UX. Selv om brukergrensesnittet spiller en viktig rolle i å skape mobilvennlige design, har brukeropplevelsen nå blitt like viktig, spesielt siden vi nå har flere enheter å fokusere på og brukeropplevelsen er forskjellig fra typen enhet.
UX er noe som spenner over grensen til grafikk og estetikk. Akkurat som Rahul Varshney, medskaperen av foster.fm , sier:
Et brukergrensesnitt uten UX er som en maleren som slår maling på lerret uten å tenke.
Rahul var rett på med denne analogien. Du kan ha den mest tiltalende, brukervennlige, unike og funksjonelle desktopversjonen av nettstedet ditt, men hvis du ikke tar den mobile opplevelsen i betraktning, maler du bare uten tanker.
Så, hva skiller en god mobilopplevelse fra en dårlig? Det er ikke så vanskelig å skille mellom de viktigste komponentene som utgjør en svært effektiv, optimalisert og brukerfokusert design. Men her er noen gode metoder som burde lede deg på veien:
1) Ikke avkall mobil-først
Hvis nettstedet ditt er rettet mot mobil UX, vil du kanskje bryte tradisjonen ved å følge "mobil først" -strategien. Det er ingen skade i å omfavne denne teknikken når du er positiv at de fleste av brukerne dine får tilgang til nettstedet ditt via en mobil enhet. Akkurat som codemyviews antyder at mobilnettdesign ikke er en nisje, det er faktisk "1,2 milliarder mobilnettbrukere over hele verden", og nummeret ser ikke ut til å falle noen gang snart (det vil trolig øke i nær fremtid). Dette kan være litt utfordrende først; men hvis du er villig til å sette brukeren først, er det verdt et skudd.
Bare fordi du har rettet mot å designe et enkelt, rent eller mobilfokusert nettsted, betyr det ikke at det ikke bør være sofistikert. Karimrashid.com er et perfekt eksempel på hvordan enkelhet og raffinement kan blandes til å skape en ren og responsiv, men likevel stilig design.
2) Lag væskeoppsett
Det er rett og slett altfor mange mulige skjermstørrelser der ute for å velge og velge hvilke du skal designe for. Du må opprette et oppsett som tilpasses så sømløst som mulig for dem alle. Heldigvis er væskeoppsett her for å redde dagen!
Basert på prosenter i stedet for bestemte målinger som piksler, har væskeoppsett blitt standard blant webprofessorer. De kan være vanskelig, men å sørge for at så mange mennesker som mulig faktisk kan bruke nettstedet ditt, er vel verdt innsatsen.
3) Mål for funksjonalitet
Hva er funksjonalitet? Det er det du tilbyr dine besøkende for å få ting gjort, og gjort fort. Basert på formålet med nettstedet ditt, bør alle verktøy som nærmeste butikklokaler, produktsøk, produktomtaler eller valutaomformere hjelpe brukerne til å utføre planlagte "funksjoner" og oppnå mål mye raskere.
Purina , en kjæledyrmatleverandør, er et perfekt eksempel på hvordan man gjør "funksjoner" enklere på en nettside. Hjemmesiden har en søkeboks hvor du kan søke etter det du leter etter. Nedenfor er to separate kolonner for den type dyremat de spesialiserer seg på. Hele nettstedet er enkelt å navigere med kolonne, knapper, verktøy og designelementer som bestemmer seg for den beste typen kjæledyrmat - og deretter å kjøpe - en bris.
4) Identifiser brukerne
Ikke prøv å bli en jack i alle bransjer, fordi det kan koste deg en typisk bruker, og ingen vil det. Finn ut først hvem brukerne er. Deretter finne ut deres typiske nettleseradferd. Når det er satt til side, finn ut hva som gjør dem kryss. Moderne brukere har to hovedtyper: de som surfer uten mål, og de som ønsker å utføre en oppgave. Hver av disse gruppene vil kreve forskjellige "funksjoner" basert på deres behov.
Det er ikke vanskelig å gjette demografien til The Body Shop nettstedets brukere siden det gir tips over hele siden. Siden Body Shop er svært fokusert på "naturlige ingredienser" og sosial aktivisme, er de monokromatiske grønne variasjonene, en glidebryter av naturlige ingredienser, "grønn" valg av bilder, rapporter om rettferdige handler, løfter og andre sosiale arrangementer en forståelig godt utviklet designkonsept.
5) Se alltid ut utviklerens biblioteker og retningslinjer
Basert på plattformen du vil bruke, er det viktig å gi UI-retningslinjene en nærmere titt. Noen plattformer gir mer fleksibilitet enn andre. Uansett hva som er tilfelle, bør noen viktige komponenter av merke eller "signaturer" forbli.
En Apples apputvikler bør ta en titt på IOS Human Interface Retningslinjer og følge Apple-standarder når det gjelder å designe grunnleggende, designstrategier, grensesnittelementer, ikon / bildedesign, etc. Android-utvikleren skal derimot lære alt om komponentene, stilen, brukervennligheten og utformingen av typiske Android-applikasjoner med hjelp av Android utviklere guide .
6) Gjør alt innhold tilgjengelig for alle brukere
Noen designere, i stedet for å gjøre alt innholdet sitt i væskeoppsett, vil ganske enkelt velge å skjule noe av det fra mobilbrukere. Noen ganger er det fordi oppsettet er vanskelig, eller de føler at det bare er for mye innhold for et mobilt layout. Dette er feil tilnærming.
Å gi brukerne en "strippet ned" -versjon av nettstedet ditt eller appen er ikke bare urettferdig for mobilbrukere, men kan alvorlig gjenopprette og miste kunder. Du må kanskje forenkle layoutet til det ytterste, flytte noe innhold til andre skjermer for å redusere rot, eller bare prøve å organisere alt bedre. men det må være der .
Sammenlign desktopversjonen av BBC nettsted til mobilversjonen. Mens det er enklere enn det pleide å være, setter det fortsatt all slags informasjon over hele skjermen. Den mobile versjonen daler i motsetning til noen av bildene (som fortsatt er tilgjengelige i artiklene selv), men holder alle overskriftene, og forenkler opplevelsen dramatisk på en telefonstørrelsesskjerm.
7) Design for berøring
Det er også nyttig å huske på at en mobilenhetsbruker bruker fingre istedenfor presisjonsvennlige musepekere. Ditt design bør være enkelt å navigere med fingre i alle størrelser og former, med tanke på at alle mobile enheter nå er berøringsskjerm. En bruker må ikke koble for mye eller zoome inn for å trykke på noe eller fylle ut et skjema eller trykke på en knapp. Unøyaktige kraner er også svært vanlige på små enheter som bør tas hensyn til i designet med store nok berøringsinnganger eller bevegelser for å få jobben gjort.
Her er en berøringsbordet av Peter-Paul Koch som kan hjelpe. Legg merke til hvordan berøring av hendelser (og andre handlinger) kan variere avhengig av nettleserkompatibilitet og enhet.
8) Bruk komprimeringsverktøy
Mengden verktøy som er tilgjengelige i dag for å gjøre en designers arbeid mindre belastende, er ufattelig. Du finner skriptkompressorer som HTML kompressor eller gzip komprimering som automatisk fjerner unødvendige kommentarer, hvitt mellomrom eller kode. CSS minifier og CSS kompressor og noen flere verktøy som lar deg sammenkoble CSS-koden og forbedre ytelsen. Bildekomprimering er også like viktig; Noen som vil redusere størrelsen på .jpeg og .png-filer, mens du fortsatt holder kvaliteten intakt, inkluderer EWWW Image Optimizer , smush.it , optiPNG , og jpegtran .
Her er et eksempel på en svært responsiv porteføljedesign av RyJohnson . Nettstedet er fullt av spektakulære bilder som ikke er annerledes enn desktopversjonen. Hemmeligheten til rask lasting her er uten tvil bildeoptimalisering.
