8 måder at optimere dit websted til mobil
Da verden skiftede fra stationære computere til mobile enheder, blev designere endnu mere fokuseret på UX. Selv om brugergrænsefladen spiller en vigtig rolle i at skabe mobilvenlige designs, er brugeroplevelsen nu blevet lige vigtig, især da vi nu har flere enheder til at fokusere på og brugeroplevelsen afviger fra typen af enhed.
UX er noget, der spænder over grænserne for grafik og æstetik. Ligesom Rahul Varshney, medskaberen af foster.fm , siger:
En UI uden UX er som en maler, der slår maling på lærred uden at tænke.
Rahul var lige ved med denne analogi. Du kan have den mest tiltalende, brugervenlige, unikke og funktionelle desktopversion af dit websted, men hvis du ikke tager den mobile oplevelse i betragtning, så maler du bare uden tanke.
Så, hvad adskiller en god mobil oplevelse fra en dårlig? Det er ikke for svært at adskille de centrale komponenter, der udgør en meget effektiv, optimeret og brugerfokuseret design. Men her er et par bedste fremgangsmåder, der skal guide dig på vejen:
1) Afsked ikke mobil-først
Hvis dit websted er rettet mod mobil UX, vil du måske bryde traditionen ved at følge "mobile first" -strategien. Der er ingen skade i at omfavne denne teknik, når du er positiv, at de fleste af dine brugere får adgang til dit websted via en mobil enhed. Ligesom codemyviews foreslår at mobilwebdesign ikke er en niche, der er faktisk "1,2 milliarder mobilwebbrugere over hele verden" og nummeret ser ikke ud til at falde nogen tid snart (det vil sandsynligvis stige i den nærmeste fremtid). Dette kan være lidt udfordrende i starten; men hvis du er villig til at sætte din bruger først, er det et skød værd.
Bare fordi du har til formål at designe et simpelt, rent eller mobilfokuseret websted, betyder det ikke, at det ikke bør være sofistikeret. Karimrashid.com er et perfekt eksempel på, hvordan enkelhed og sofistikering kan blandes til at skabe et rent og lydhør, men alligevel elegant design.
2) Opret væske layout
Der er simpelthen alt for mange mulige skærmstørrelser derude til at vælge og vælge, hvilke du skal designe. Du skal oprette et layout, der tilpasses så nemt som muligt til dem alle. Heldigvis er flydende layouter her for at redde dagen!
Baseret på procentsatser i stedet for bestemte målinger som pixels, er fluid layouter blevet standard blandt web-fagfolk. De kan være vanskelige, men at sikre, at så mange mennesker som muligt rent faktisk kan bruge dit websted, er det værd at gøre.
3) Mål for funktionalitet
Hvad er funktionalitet? Det er det, du tilbyder dine besøgende for at få tingene gjort, og gjort hurtigt. Baseret på formålet med dit websted bør alle værktøjer som nærmeste butikssteder, produktsøgning, produktanmeldelser eller valutaomformere hjælpe brugerne med at udføre tilsigtede "funktioner" og nå målene meget hurtigere.
Purina , en dyrefoder udbyder, er et perfekt eksempel på, hvordan man lettere gør "funktioner" på en webside. Hjemmesiden har en søgefelt, hvor du kan søge det, du leder efter. Nedenfor er der to separate kolonner for den slags dyrefoder, de specialiserer sig i. Hele hjemmesiden er let at navigere med kolonne, knapper, værktøjer og designelementer, der gør det muligt at bestemme den bedste slags kæledyrsfødevarer - og derefter købe - en brise.
4) Identificer dine brugere
Forsøg ikke at blive en jack i alle handler, fordi det kan koste dig en typisk bruger, og ingen ønsker det. Find ud af, hvem dine brugere er. Så find ud af deres typiske web browsing opførsel. Når det er sat til side, find ud af, hvad der får dem til at krysse. Moderne brugere har to hovedtyper: dem, der surfer uden et mål i tankerne, og dem der søger at udføre en opgave. Hver af disse grupper ville kræve forskellige "funktioner" baseret på deres behov.
Det er ikke svært at gætte demografien hos The Body Shop-webstedets brugere, da det giver tips over hele siden. Da Body Shop er stærkt fokuseret på "naturlige ingredienser" og social aktivisme, er de monokromatiske grønne variationer, en skyder af naturlige ingredienser, "grøn" valg af billeder og rapporter om fair trade, løfter og andre sociale arrangementer en forståelig veludviklet design koncept.
5) Se altid udviklerens biblioteker og retningslinjer
Baseret på den platform, du vil bruge, er det vigtigt at give UI-retningslinjerne et godt udseende. Nogle platforme giver større fleksibilitet end andre. Uanset hvad der er tilfældet, bør nogle vigtige komponenter af mærke eller "underskrifter" forblive.
En apple app udvikler bør se på iOS Human Interface Retningslinjer og følg Apple-standarderne når det kommer til at designe grunde, designstrategier, brugergrænseelementer, ikon / billeddesign osv. Android-udvikleren skal derimod lære alt om komponenter, stil, brugbarhed og layout af typiske Android-applikationer med hjælp fra Android udviklere guide .
6) Gør alt indhold tilgængeligt for alle brugere
Nogle designere, i stedet for at gøre alt deres indhold i væskeformater, vil simpelthen vælge at skjule noget af det fra mobile brugere. Nogle gange er det fordi layoutet er vanskelig, eller de føler, at der bare er for meget indhold til et mobillayout. Dette er den forkerte tilgang.
At give brugerne en "fjernet" -version af dit websted eller din app er ikke kun urimelig for mobilbrugere, men kan alvorligt komme i brand igen og miste dine kunder. Du skal måske forenkle layoutet til det yderste, flytte noget indhold til andre skærme for at reducere rod eller bare forsøge at organisere det hele bedre; men det skal være der .
Sammenlign desktop version af BBC site til den mobile version. Mens det er enklere end det plejede at være, stiller det stadig alle slags information over hele skærmen. Den mobile version daler derimod nogle af billederne (som stadig er tilgængelige i artiklen selv), men holder alle overskrifter, hvilket forenkler oplevelsen på en skærm i telefonstørrelse dramatisk.
7) Design til berøring
Det er også nyttigt at huske på, at en mobilenhedsbruger vil bruge fingrene i stedet for præcisionsvenlige musepekere. Dit design skal være nemt at navigere med fingre i alle størrelser og former, da alle mobilenheder nu er berøringsfølsomme. En bruger behøver ikke at klemme for meget eller zoome ind for at trykke på noget eller udfylde en formular eller trykke på en knap. Ukorrekte taps er også meget almindelige på små enheder, som skal redegøres for i designet med store nok berøringsindgange eller bevægelser for at få arbejdet færdigt.
Her er en touch bord ved Peter-Paul Koch det kan hjælpe. Bemærk, hvordan berøringshændelser (og andre handlinger) kan variere afhængigt af browserkompatibilitet og enhed.
8) Brug komprimeringsværktøjer
Mængden af værktøjer, der er til rådighed i dag for at gøre en designers arbejde mindre belastende, er ufattelig. Du finder scriptkompressorer som f.eks HTML kompressor eller gzip komprimering, der automatisk fjerner unødvendige kommentarer, hvidt rum eller kode. CSS minifier og CSS kompressor og nogle flere værktøjer, der giver dig mulighed for at sammenkæde CSS-kode og forbedre ydeevnen. Billedkomprimering er også lige så vigtig; nogle der vil reducere størrelsen af dine .jpeg og .png-filer, mens du stadig holder kvaliteten intakt, inkluderer EWWW Image Optimizer , smush.it , optiPNG , og jpegtran .
Her er et eksempel på en meget responsiv porteføljekonstruktion af RyJohnson . Webstedet er fyldt med spektakulære billeder, der ikke adskiller sig fra desktopversionen. Hemmeligheden med hurtig indlæsning her er uden tvivl billedoptimering.
