8 zlatih pravil mobilnega oblikovanja

Mobilno oblikovanje: opice se zberejo pred monolitnim črnim pametnim telefonom; sveti z različnimi elementi uporabniškega vmesnika. V ozadju leži gorska veriga, osvetljena z vzhajajočim soncem, ki se izžareva v koncentričnih krogih.

Mobilno oblikovanje je razmeroma novo, a ključnega pomena. Še pred desetletjem je oblikovanje za splet pomenilo oblikovanje za namizni računalnik; zdaj to pomeni tudi oblikovanje za mobilne naprave. Mobilni telefoni spodbujajo vse večji spletni promet in številke bodo le še naraščale.

Po podatkih Statiste smo oktobra 2018 imeli 3,9 milijarde edinstvenih uporabnikov mobilnega interneta in več kot 50 odstotkov vsega prometa na spletnih straneh po vsem svetu je bila ustvarjena prek mobilnih telefonov . Odlično spletno oblikovanje ni več razkošje, temveč nekaj nujnega.

Ustvarjanje odlične spletne izkušnje za mobilne uporabnike zahteva več kot le ustvarjanje odzivno spletno oblikovanje (čeprav vrh graditelj spletnih strani lahko pomaga, kot lahko tudi vaš spletno gostovanje izbira). V tem članku lahko odkrijete temeljna načela zasnove spletnega mesta za mobilne naprave.



01. Ustvarite ciljno usmerjene izkušnje

Uporabniki mobilnih naprav so zelo ciljno usmerjeni uporabniki. Vsakič, ko obiščejo spletno stran, imajo določeno nalogo, ki jo želijo izpolniti, in pričakujejo, da bodo resnično hitro dobili tisto, kar potrebujejo. Torej, kako lahko to uresničite?

Predstavljajte si svoje idealne uporabnike: Podobno kot pri gradnji hiše se gradnja spletnega mesta začne s trdno podlago. Temelj odličnega spletnega oblikovanja je znanje o vaših uporabnikih. Raziskave uporabnikov bi morale biti eden prvih korakov pri oblikovanju izdelkov. Natančno morate ugotoviti, kdo so vaši uporabniki in kaj želijo doseči. Ko spoznate želje in potrebe svojih uporabnikov, lahko ustvarite uporabniško pot, za katero veste, da popolnoma ustreza njihovim pričakovanjem (vse ugotovitve varno shranite v shranjevanje v oblaku ). Nato temeljito opravite uporabniško testiranje poskrbeli, da ste dosegli te cilje.

Izboljšajte izkušnje okoli svojega osnovnega cilja: Kaj želite doseči s to spletno stranjo? Iskanje odgovorov na to vprašanje je še ena pomembna stvar pri ustvarjanju mobilne spletne izkušnje. Ali poskušate spodbuditi angažiranost, prisiliti uporabnike k nakupu izdelkov ali k prijavi za storitev? Jasno navedite cilj in pomislite, kako lahko zmanjšate število korakov, ki jih mora uporabnik narediti, da ga doseže.

smešne slike, v katere se lahko fotografirate

02. Prilagodite svojo vsebino delu v manjšem prostoru

Vsebina je tista, ki predstavlja vrednost za večino spletnih mest. To je glavni razlog, da jih ljudje obiščejo. Ko gre za mobilno spletno oblikovanje, je nemogoče izkoristiti namizno izkušnjo in jo ponoviti v mobilni napravi; pomembno je, da spletna mesta oblikujete z mislijo na mobilne uporabnike. To pomeni, da moramo vsebino in funkcije prilagoditi velikosti zaslona in navad uporabnika. Katere korake lahko torej storite, da to dosežete?

Izogibajte se vodoravnemu drsenju: Uporabnikom je všeč, da se spletna mesta pomikajo navpično, ne pa vodoravno. Zato ne bi smelo biti strani, na katerih je za ogled vsebine potrebno vodoravno drsenje. Elementi s fiksno širino so eden najpogostejših razlogov, ki povzročajo vodoravno drsenje, zato preverite, ali imate vsebino, ki se dobro prikaže le na določeni širini vidnega polja.

Cilj postavitve z enim stolpcem: Postavitve z enim stolpcem pomagajo pri upravljanju omejenega prostora na majhnem zaslonu in omogočajo enostavno spreminjanje velikosti med pokončnim in ležečim načinom.

Uporabnikom je všeč, da se spletna mesta pomikajo navpično, ne pa vodoravno. Zato ne bi smelo biti strani, kjer je potrebno vodoravno drsenje.

Prepričajte se, da uporabnikom ni treba priti do povečave: Obiskovalci so lahko razočarani, ko morajo povečati ali pomanjšati, da lahko preberejo besedilo ali si ogledajo sliko. Oblikujte svoje spletno mesto za mobilne naprave, tako da uporabnikom ne bo treba nikoli spremeniti velikosti.

Uporabite čitljivo velikost pisave: 11 točk je absolutna najmanjša velikost besedila. Ta velikost uporabnikom omogoča branje besedila na tipični vidni razdalji brez povečave.

Izberite pisave, ki se dobro prilagodijo: Če izkušnje s spletnim mestom zahtevajo branje, je bolje uporabiti pisave brez serifa, kot sta Helvetica ali Roboto.

Slika, ki prikazuje dve različni velikosti tarče na dotik: par na levi je vsak manjši od konice prsta, desni pa večji od konice prsta.

Poskrbite, da boste oblikovali tarče na dotik, ki so dejansko primerne velikosti za konice prstov. Zasluge: Apple(Kreditna slika: Apple)

Uporabite prstom prijazen dizajn: Ko oblikujete mobilno spletno mesto, ne pozabite, da bodo obiskovalci uporabili prste namesto puščice miške, človeški konci pa so večji od kazalca miške. Prizadevajte si oblikovati prijazen vmesnik, kjer je vsak interaktivni element ustrezno velik.

Študija MIT Touch Lab ugotovila, da je povprečna velikost konice prsta 8-10 mm , zaradi česar je 10 mm x 10 mm dobra minimalna velikost ciljne enote na dotik.

Upoštevajte tudi relativno razdaljo med cilji na dotik. Če se interaktivni elementi nahajajo preblizu drug drugemu, lahko uporabniki mobilnih naprav po naključju s prstom tapnejo napačen gumb. Da se to ne bi zgodilo, poskrbite za pravilno velikost gumbov in med njimi dodajte tudi dovolj prostora.

Poskrbite za razširitev slik izdelkov: Številne študije so dokazale, da se ljudje pretežno učijo vizualno. Večina ljudi veliko bolje razume in razume koncepte, če so dostavljeni na tak način, zato je uporaba slik v spletnem oblikovanju odličen način za hitro povzemanje ključnih sporočil.

Bistvenega pomena je, da ne samo, da zagotovite visokokakovostna sredstva, temveč jih tudi razširite, tako da jih bodo uporabniki zlahka podrobno videli.

Slike igrajo ključno vlogo na spletnih mestih za e-trgovino - ljudje se pri odločanju zanašajo na slike izdelkov. Bistvenega pomena je, da ne samo, da zagotovite visokokakovostna sredstva, temveč jih tudi razširite, tako da jih bodo uporabniki zlahka podrobno videli. Razširite celotno sliko in ne le njen del.

Bodite previdni pri promocijah in oglasih: Promocije in oglasi lahko zlahka zasenčijo vsebino. Čeprav lahko sporočilo oglasa deluje za nekatere obiskovalce, ga v večini primerov uporabniki preskočijo in preidejo na bolj dragocene informacije. Ta pojav je znan kot transparentna slepota.

Olajšajte iskanje kontaktnih podatkov: Mobilni uporabniki pogosto obiščejo spletna mesta, da bi našli kontaktne podatke. Uporabniki bodo morda želeli poklicati podjetje, izpolniti obrazec za stik ali najti naslov, odvisno od nujnosti. Za spletna mesta e-trgovine mora biti telefonska številka na voljo neposredno na začetnem zaslonu.

03. Optimizirajte vsebino za optično branje

Dobro znano dejstvo je, da uporabniki ne berejo po spletu; skenirajo. Ko se nov obiskovalec približa spletni strani, najprej poskusi optično prebrati stran in vsebino razdeliti na prebavljive podatke. Uporabnikom je to nalogo mogoče olajšati z upoštevanjem nekaj preprostih pravil.

Upoštevajte vrstni red, v katerem podajate vsebino na strani: Ljudje berejo od zgoraj navzdol. Zato je pomembno, da pomembne stvari ohranite na vrhu strani, ostale pa premaknete navzdol po hierarhiji.

Zmanjšajte nered: Dajte prednost vsebini pred elementi uporabniškega vmesnika - zmanjšajte moteče dejavnike tako, da odstranite nepotrebne funkcionalne in dekorativne elemente. Prizadevajte si ustvariti minimalističen slog, saj boste s tem uporabniku olajšali, da se osredotoči na nalogo.

Izogibajte se dolgim ​​blokom besedila brez slik: Zelo verjetno je, da bo preskočen kakšen ogromen del vsebine. Za razčlenitev besedila uporabite naslove, odstavke ali zaporedne točke.

Dajte večjo vizualno težo pomembnim elementom: Pomembne elemente, na primer ključne točke za sporočila, ustvarite tako, da jih bodo obiskovalci videli takoj. Poudarite elemente z različnimi velikostmi, presledki ali živahnimi barvami.

04. Ustvarite predvidljivo navigacijo

Pomoč uporabnikom pri navigaciji bi morala biti glavna prednostna naloga vsakega spletnega mesta. Navsezadnje je najbolj prepričljiva vsebina neuporabna, če je ljudje ne najdejo. Zato je pomembno, da z nekaterimi naslednjimi koraki vlagate v oblikovanje trdnega navigacijskega sistema.

Uporabite znane navigacijske vzorce: Ko gre za ustvarjanje navigacijskega mehanizma za vaše spletno mesto, si velja zapomniti preprosto pravilo: ne izumljajte kolesa - prizadevajte si ustvariti znano izkušnjo. Vedno se je bolje zanesti na navigacijske vzorce, ki jih pozna večina uporabnikov (na primer zgornja vrstica za navigacijo ali meni s hamburgerji), kot pa ustvariti svoj edinstven navigacijski sistem (npr. Navigacijski sistem, ki temelji na kretnjah). Ko ustvarite znano navigacijo, pomagate uporabnikom, da se pri interakciji z vašim izdelkom zanesejo na svoje prejšnje izkušnje.

Omejite skupno število možnosti navigacije: Ne postavljajte preveč možnosti v menije. Obsežen meni bo morda dobro deloval za namizna spletna mesta, vendar ne ustrezajo dizajnu za mobilne naprave. Ker na vidnem območju zaslona ne bodo na voljo vse možnosti navigacije, boste uporabnike mobilnih naprav prisilili, da se pomikajo po seznamu možnosti. Pomislite, kako lahko predstavite čim manj elementov v meniju. V idealnem primeru meni, ki ga oblikujete ne sme imeti več kot sedem ločenih kategorij .

Slika, ki prikazuje navigacijo po ABC

ABC v navigacijskem meniju ponuja samo prednostne možnosti - vse sekundarne možnosti so skrite za 'Več'(Zaslon slike: ABC)

Prednostno izberite možnosti navigacije : Organizirajte navigacijo glede na način, kako uporabniki delujejo s funkcionalnostjo. Najbolj priljubljene navigacijske možnosti v globalnem meniju naj bodo na vrhu, primarna dejanja pa morajo biti na voljo na vidnem območju zaslona.

Napišite jasne nalepke: Vsaka navigacijska možnost mora imeti jasno in jedrnato oznako. Izogibajte se žargonu - navigacija, ki jo oblikujete, ne sme vsebovati izrazov, ki jih obiskovalci ne bodo razumeli. Jasne nalepke bodo obiskovalcem omogočile, da napovejo rezultat svojih dejanj.

Poskrbite, da bodo interaktivni elementi videti kot interaktivni elementi : Ko načrtujete gumbe in povezave, pomislite na to, kako dizajn sporoča cenovno ugodnost. Kako uporabniki razumejo element kot interaktivni objekt? Način izgleda predmeta uporabnikom pove, kako ga uporabiti. Vizualni elementi, ki so videti kot povezave ali gumbi, vendar niso interaktivni (na primer podčrtane besede, ki niso povezave, ali pravokotna polja z besedami, ki niso gumbi), lahko uporabnike zlahka zmedejo.

Sporočite trenutno lokacijo: 'Kje sem?' je temeljno vprašanje, na katerega uporabniki potrebujejo odgovor za učinkovito krmarjenje. Jasno navedite trenutno lokacijo.

Slika navigacije po spletnem mestu ASOS - ikona za iskanje je vidna na glavni navigaciji.

ASOS postavi iskanje na vrh zaslona za svojo spletno stran za mobilne naprave(Image Image: ASOS)

Navedite funkcijo iskanja: Če načrtujete zapleteno spletno mesto z veliko vsebine ali funkcij, morate zagotoviti preprosto vrstico za iskanje. Z uvedbo funkcionalnosti iskanja zagotovite hitro pot do informacij / funkcij za mobilne uporabnike, ki na spletno mesto pridejo z določenim vprašanjem.

Ne skrivajte možnosti iskanja v meniju. To bi morala biti ena izmed prvih stvari, ki jih obiskovalci vidijo na vaših straneh.

Uporabnikom olajšajte vrnitev na domačo stran: Obiskovalci pričakujejo, da se bodo ob tapkanju logotipa na vrhu strani vrnili nazaj na domačo stran in bodo razočarani, če to ne bo uspelo.

Naj bo vaš uporabnik v enem oknu: Izogibajte se pozivom k dejanju, ki uporabnika pošljejo v nova okna. Nekateri uporabniki bodo imeli težave s preklapljanjem med okni v mobilnem brskalniku in morda ne bodo mogli najti prejšnje strani.

05. Izogibajte se ustvarjanju cestnih zapor

Blokade cest ustvarjajo trenje in trenje je najhujši sovražnik konverzije. Na srečo jih lahko preprosto izognete.

Ne prekinjajte obiskovalcev: Velika pojavna okna so ena najbolj tipičnih vrst prekinitev spletne izkušnje. Takšne pasice so bile dolgo namenjene promocijskim sporočilom, v zadnjem času pa so številna spletna mesta začela uporabljati moteča pojavna okna, da bi dobila dovoljenje za uporabo piškotkov (GDPR). Ne glede na to, katere informacije želite pokazati obiskovalcem, poskrbite, da ne bodo motile celotne izkušnje.

Ne pustite uporabnikom, da zapustijo vaše spletno mesto: Na poteh uporabnikov določite mesta, zaradi katerih lahko uporabnik pogleda zunaj vašega spletnega mesta, nato pa zagotovite vsebino / funkcije, ki jih bodo obdržale na vašem spletnem mestu. Polje promocijske kode na spletnih mestih za e-trgovino je morda najpogostejši primer, zaradi katerega obiskovalci zapustijo spletno mesto, da bi našli kupon. Veliko bolje je, da nekaj kuponov ponudite kar na spletnem mestu, da preprečite takšno vedenje.

Slika, ki prikazuje stran spletnega mesta Netflix, ki zahteva, da se uporabniki prijavijo, preden lahko vidijo, katera vsebina je na voljo na spletnem mestu.

Netflix prosi uporabnike, da se prijavijo, preden lahko vidijo, katera vsebina jim bo na voljo(Image Image: Netflix)

Ne prisilite uporabnikov, da se prijavijo: Zahtevni uporabniki se registrirajo, preden lahko vidijo informacije ali uporabijo spletno storitev, imajo visoke stroške interakcije - prisilitev registracije je prezgodaj povzroči, da uporabniki opustijo spletno mesto . Preden zagotovijo osebne podatke, želijo obiskovalci razumeti, kaj jim spletno mesto ponuja.

Če želite ustvariti pretok uporabnikov z najmanj ovir za konverzijo, morajo spletna mesta za mobilne naprave obiskovalcem omogočiti raziskovanje vsebine, ne da bi se morali prijaviti. Za spletna mesta za e-trgovino je bistveno, da uporabnikom dovolite, da kupujejo kot gost.

Za nadaljevanje potovanja olajšajte preklop na drugo napravo: Mobilni telefoni ne veljajo za samostojne izkušnje. Običajni uporabnik ima več naprav, kot so namizni računalniki, mobilni telefoni in tablični računalniki, in pričakuje, da bo imel med uporabo tega izdelka nemoteno izkušnjo v vseh teh napravah. Mnogi na primer uporabljajo mobilne naprave samo za iskanje izdelkov, nato pa za pretvorbo preklopijo na namizje. Uporabniki pričakujejo, da bodo nadaljevali pot od kraja, kjer so se ustavili na mobilnem telefonu.

Nekaj ​​stvari, s katerimi lahko sinhronizirate trenutni napredek uporabnika:

  • Sinhronizirajte seznam želja, priljubljene in košarico za uporabniški račun.
  • Neregistriranim uporabnikom ponudite enostaven način shranjevanja ali izmenjave informacij med napravami (na primer možnost pošiljanja povezave na e-pošto).

06. Oblikujte učinkovite obrazce

Vnos obrazca je eno najpogostejših nalog v spletu. Težko si je predstavljati kakršno koli izkušnjo, ki od uporabnikov ne zahteva izpolnjevanja neke vrste obrazca. Ker je to tako vseprisotna praksa, je sposobnost izpolnjevanja obrazca brez bolečin ključnega pomena za ohranjanje uporabnika. Tu je nekaj nasvetov, s pomočjo katerih boste trenja čim manjši:

Zmanjšajte vnose v obrazce: Na splošno velja, da manj kot mora uporabnik posredovati podatkov, bolj bo užival v vaši spletni izkušnji. Ti kazalci vam bodo pomagali zmanjšati pritiske tipk in vnose, ki jih morajo uporabniki vnesti:

  • Zmanjšajte skupno število polj. Obrazci naj bodo vedno čim krajši in preprostejši, tako da odstranite vsa nepotrebna polja. Vprašajte samo tisto, kar v resnici morate vedeti.
  • Uporabite samodejno popravljanje, uporabo velikih začetnic in samodejno dokončanje, da zmanjšate možnost napake uporabnika.
  • Izogibajte se spustnim poljem. Spustna mesta skrivajo možnosti, kar ustvarja dodatne stroške interakcije - uporabniki se morajo dvakrat dotakniti, da izberejo pravo možnost. Če za izbiro možnosti uporabljate spustno polje, ga zamenjajte z izbirnimi gumbi.
  • Ko uporabnik pritisne tipko return, se samodejno premakne na naslednje polje.
  • Z vgrajenim preverjanjem v realnem času zmanjšajte napake obrazca.
  • Uporabite obstoječe informacije za čim večje udobje. Na primer, lahko vnesete nekatera polja, kot so naslov za dostavo ali podatki za obračun za vaše registrirane uporabnike.
  • Razmislite o ponudbi alternativnih mehanizmov vnosa. Razmislite, katere zmogljivosti naprave lahko uporabite za boljšo uporabniško izkušnjo. Na primer, namesto da uporabnike prosite, da vnesejo podatke o kreditni kartici, omogočite uporabo kamere naprave za skeniranje kartice in integracijo sistemov, kot sta Apple Pay in Google Pay, da omogočite plačilo z enim dotikom.

Slika, ki prikazuje razloge, zakaj kupci med blagajnami opustijo košare; drugi najpogostejši razlog, ki ga je navedlo 27% vprašanih, je, da je bil postopek odjave predolg / zapleten.

bo sega naredil novo konzolo
Razlogi za opustitev med plačilom po Baymard Institute(Slika: Zavod Baymard)

Navedite ujemajočo se tipkovnico: Mobilni uporabniki cenijo spletna mesta, ki nudijo ustrezno tipkovnico za to področje. Ta funkcija jim preprečuje izvajanje dodatnih dejanj. Na primer, ko morajo uporabniki vnesti telefonsko številko, mora vaše spletno mesto prikazati številčno tipkovnico od 0 do 9.

Nastavite vrste vnosa HTML, da prikažejo pravilno tipkovnico. Tu je sedem vrst vnosa, pomembnih za oblikovanje obrazca:

  • vrsta vnosa = 'besedilo' prikaže običajno tipkovnico mobilne naprave.
  • vrsta vnosa = 'email' prikaže običajno tipkovnico ter '@' in '.com'.
  • vrsta vnosa = ”tel” prikaže številčno tipkovnico od 0 do 9.
  • vrsta vnosa = 'število' prikaže tipkovnico s številkami in simboli.
  • vrsta vnosa = 'datum' prikaže izbirnik datuma mobilne naprave.
  • vrsta vnosa = 'datum in čas' prikaže izbirnik datuma in ure mobilne naprave.
  • vrsta vnosa = 'mesec' prikaže izbirnik meseca in leta mobilne naprave.

Naj uporabniki spremenijo lokacijsko polje: Številna spletna mesta samodejno zaznajo lokacijo uporabnika in te podatke uporabijo za zagotavljanje ustrezne vsebine. Bistveno je, da uporabnikom dovolite, da spremenijo lokacijo, ker v nekaterih primerih uporabniki morda želijo videti rezultate za drugo mesto.

07. Prizadevajte si ustvariti dosledno izkušnjo

Doslednost je eden ključnih stebrov uporabniške izkušnje. Dosleden dizajn je uporabniku prijazen dizajn - s poudarkom na ustvarjanju skladnega oblikovanja ustvarite bolj intuitiven dizajn. Vedno si prizadevajte, da je spletno mesto interno in zunanje usklajeno.

Notranja skladnost: Ustvarite dosledno knjižnico sredstev za oblikovanje in jo uporabite za vse strani svojega spletnega mesta. Pisave, gumbi, povezave, ikone in vsi drugi elementi uporabniškega vmesnika morajo biti na celotnem spletnem mestu skladni, da ostanejo vizualno dosledni.

Zunanja skladnost: Poskrbite, da bo spletno mesto, ki ga oblikujete, videti kot del večje družine izdelkov. Če imate na primer mobilno aplikacijo, mora vaše mobilno spletno mesto uporabnikom, ki jo uporabljajo, zagotoviti občutek domačnosti.

08. Sestavite svoje najboljše spletno mesto za mobilne naprave

Vse tukaj omenjene točke lahko štejemo za najboljše industrijske prakse. A samo to, da se nekaj imenuje 'najboljša praksa', še ne pomeni, da je to optimalna rešitev za vaše spletno mesto. Zato je vedno pomembno, da preizkusite svoje oblikovalske odločitve. Naj bo preizkušanje uporabnosti obvezen del vašega postopka oblikovanja in redno izboljševajte izkušnje.

Ta članek je bil prvotno objavljen v številki 317 z dne mreža , najbolje prodajana revija na svetu za spletne oblikovalce in razvijalce. Kupite številko 317 ali naročite se na net .

Povezani članki: