Že v prvem članku smo naslovili številne vidike, kako je mobile-first dizajn spremenil zasnovo spletnih strani in uporabniške izkušnje na spletu. Najbolj izrazito seveda vpliva na vrstni red v oblikovanju, zato se mnogi oblikovalci in tudi naročniki spletnih strani sprašujejo, kako se ga sploh lotiti. V nadaljevanju z vami delimo, na kaj morate biti še posebej pozorni – od velikosti elementov na dotik do ustreznih pisav.
Zgradba in prilagoditev elementov
Če še niste prešli na mobile-first oblikovanje, se vam morda zdi zahtevno in celo nesmiselno najprej osredotočati na izključno mobilno uporabniško izkušnjo, saj je ta bila doslej praviloma v drugem planu. A temeljit premislek o uporabniški izkušnji na mobilnih napravah v najzgodnejših fazah oblikovanja ne prinaša samo optimizacije spletne strani za telefone, temveč vas pripravi k učinkovitemu načrtovanju uporabniške izkušnje tako na mobilnih naparavah kot tudi namizju. Zato bodite tudi pri mobile-first dizajnu kar se da usmerjeni v celotno izkušnjo.
Najprej preverite, katere funkcionalnosti bodo na voljo na mobilnem spletnem mestu, nato pa zbirko osnovnih funkcionalnosti razširite še za računalnik in tablico. Predvidite tudi njihov način izvajanja – najbolje je, če je v samo načrtovanje vključen tudi programer. Pri njem lahko preverite, če so vse predvidene funkcionalnosti res izvedljive. Nato na stopnji izvedbe z žičnimi modeli predstavite mobilno postavitev in funkcionalnost, še preden jo dopolnite z vsebino.
V nadaljevanju pa preverite ključne elemente in njihovo prilagoditev, da vaša spletna stran ponudi odlično in nepozabno mobilno uporabniško izkušnjo.
Design system (navigacija, pisave, velikost fontov, gumbi in velikost, razmiki, velikost ostalih elementov – ikon)
Ko oblikujemo za več različnih naprav, se ne moremo izogniti prilagoditvam velikosti pisav in elementov. Razlika pa je, katere velikosti so privzete. Pri klasičnem oblikovanju so privzete velikosti tiste za računalnik, medtem ko pri mobile-first oblikovanju uporabimo stile, že predvidene za mobile pogled.
Stili vključujejo velikosti pisav, obrazcev, fotografij, gumbov … Da nam ni potrebno vedno znova definirati vseh stilov, si lahko pomagamo s številnimi online knjižnicami, kjer so vsa standardna pravila in smernice oblikovanja zbrana na enem mestu. Najbolj priljubljena je trenutno Bootstrap. Smernice najboljših praks oblikovanja komponent uporabniškega vmesnika pa so najbolje predstavljene na Material Design.
Dejstvo je, da imajo mobilni telefoni na splošno manj pomnilnika, procesne moči in pasovne širine kot druge naprave. Prav tako imamo na voljo tudi manjša vidna polja. Zato je potrebno uporabniški vmesnik (angl. user interface) in z njim celoten design system čim bolj poenostaviti. V mislih moramo imeti, da ne pretiravamo z različnimi vizualnimi učinki, kot so sence, animacije in gradienti. Prav tako pri mobile-first dizajnu odpade možnost hoverjev, saj računalniška miška v tem primeru ni v uporabi.
Tukaj je nekaj ključnih dizajnerskih elementov, na katere morate biti pozorni, ko oblikujete po principih mobile-first. Pri vsakem smo dodali še nasvet, kako ga najučinkoviteje zasnovati za mobilne naprave.
1. Optimizacija navigacije
Kompleksni navigacijski meniji vzamejo veliko prostora na vaših mobilnih straneh, s čimer je uporabniška izkušnja bistveno slabša. Kar zadeva kategorije in podkategorije, vedno uporabljajte preproste in informativne naslove. Način, s katerim lahko optimiziramo navigacijo, je tudi uporaba sticky menija. To uporabnikom pomaga, da se lažje orientirajo in hitreje najdejo pravo vsebino.
2. Pisave
Pri izboru pisav moramo biti pazljivi, da jih za naš dizajn spletne strani ne izberemo preveč; dve do tri različne vrste pisav so povsem dovolj.
Najbolj optimalno je, da pisave izberemo iz knjižnice Google Fonts, saj jih po večini podpirajo vsi brskalniki. Vkolikor niste prepričani o kombinacijah pisav, lahko posežete po različnih platformah, kjer so nanizane preverjene kombinacije pisav za naslove in ostalo besedilo. Ena izmed teh strani je tudi FontPair.
3. Velikosti pisav
Po smernicah Material Designa naj bi bila velikost privzete pisave (angl. body text) 16 dp. Pri določanju privzete pisave ne smemo pozabiti na dejstvo, da so različne pisave lahko bolj ali manj čitljive tudi pri povsem isti velikosti. Zato je velikost 16 dp dobro izhodišče za prikaz na mobilnih napravah. Glavni cilj za dobro uporabniško izkušnjo na telefonu je, da je body text na vašem telefonu (na naravni razdalji) enako berljiv kot besedilo v dobro natisnjeni knjigi.
Prikaz različnih pisav pri enaki velikosti. Vir: Learn UI Design Blog
V zadnjih letih je postala zelo priljubljena uporaba velikih naslovov v digitalni tipografiji. Pri tem je vseeno treba biti zelo previden, saj uporaba večjih velikosti naslovov v mobilnih aplikacijah in spletnih straneh povzroči, da se naslov lahko razteza na 3 do 4 vrstice, hkrati pa vsebuje 1 ali 2 besedi na vrstico. Takšni naslovi uporabnika zmedejo in jih je težko brati. Naslovi, ki bodo kontrastni ostalemu besedilu in lepo berljivi, imajo priporočljivo dolžino 2–3 vrstice.
Prikaz najbolj optimalne dolžine vrstic na mobilnih telefonih za uporabnika. Vir: UX Collective
4. Razmik
Razmik (angl. leading) je prostor med vrsticami. Zaslon za mobilne naprave je manjši, zato je razmik običajno manjši od namizne različice. Pri oblikovanju je praksa, da je razmik enak 120 % velikosti točke pisave.
In še en nasvet; v kolikor je vrstica z besedilom krajša, le-ta optično zahteva tudi manj razmika.
5. CTA gumbi
Pri oblikovanju design systema po principu mobile-first je oblika gumbov zelo pomembna. Kot pri klasičnem oblikovanju mora biti izgled gumbov tipičen, kar pomeni, da je uporabnikom že poznan. Pri tem pazimo tako na velikost, obliko kot tudi razmik (angl. padding).
Z ustrezno velikostjo in obliko gumba lahko bistveno povečamo interakcijo uporabnika na spletni strani. Velik problem se pojavi, če uporabnik ne prepozna elementa, ki ga je mogoče klikniti.
Kadar je klik glavni način interakcije za vašo mobilno aplikacijo, je najbolj optimalna velikost gumba na dotik vsaj 48 x 48 dp. Med posameznimi gumbi mora biti razmika vsaj 8 dp. Seveda je za boljšo preglednost razmik lahko tudi večji.
6. Ikone in elementi na dotik
Pri oblikah ikon moramo paziti na krepkost in geometričnost. Prav tako je za njih priporočljiv simetričen in skladen videz, kar zagotavlja berljivost in jasnost – tudi pri majhnih velikostih. Pri tem se moramo ravnati oblikovnih smernic in paziti, da imajo ikone zelo prepoznavno obliko. Tako poskrbimo, da uporabnik takoj prepozna pomen posamezne ikone.
Razlika med enostavno (levo) in zahtevnejšo (desno) obliko ikone fotoaparata.
Najbolj optimalna velikost ikon po Material designu je 24 x 24 px, velikost elementa na dotik pa mora biti najmanj 48 x 48 px.
Velikosti ikon po Material Designu. Vir: Material Design.
7. Formati datotek elementov
Pozorni morate biti tudi pri izboru formata datoteke za posamezne elemente na strani. Za bitne slike uporabite .jpg, .png ali .gif, za elemente, kot so ikone in logotipo, pa je najboljša izbira format .svg. Vsak izmed formatov ima nekaj prednosti in nekaj pomanjkljivosti.
Pri slikovnem materialu vedno poskrbite na velikost datoteke – nobena slika ne sme biti uporabljena brez optimizacije za spletno uporabo. Svetovni splet nam nudi številna orodja za kompresijo slik. TinyPNG in Jpeg.io nam npr. omogočata kompresijo slike, ob tem pa ohranjata zadosten nivo kvalitete slikovnega materiala za uporabo na spletu. Vektorske oblike grafik so sicer manjših velikosti, a težava je, ker jih nekateri starejši brskalniki ne podpirajo. Če ima grafika veliko krivulj, je morda težja od bitne slike, zato bodite pri formatih zelo pozorni tudi na to.
Ko je le možno, uporabite datoteke v formatu .jpg namesto .png. Pri .png gre običajno za večje datoteke. Skrb za ustrezno velikost datotek je pomembna za zagotavljanje hitrejšega nalaganja spletne strani.
Mreža in širina dokumenta
Preden začnemo z oblikovanjem design systema, moramo v izbranem programu najprej nastaviti velikost delovnega prostora, ki je – po večini – širok 360 dp. Seveda se velikosti posameznih modelov telefonov med seboj razlikujejo, a ta širina je ena izmed manjših, zato jo vzamemo kot osnovo. Nato sledi tudi nastavitev marginov, stolpcev in gutterja.
1. Margin
Margini so prostori med vsebino in levim in desnim robom zaslona. Opredeljeni so kot fiksne vrednosti na vsaki prelomni točki. Širine robu so opredeljene kot fiksne vrednosti v vsakem območju preloma. Za boljšo prilagoditev zaslonu se lahko širina robu spreminja v različnih točkah preloma. Širša polja so primernejša za večje zaslone, saj ustvarijo več praznega prostora pri posamezni vsebini.
Margin pri mobilnih telefonih z zaslonom širokim 360 dp je 16 dp na vsaki strani. Vir: Material Design
2. Stolpci
Vsebina je postavljena na območja zaslona, ki vsebujejo stolpce. Širina stolpca je določena z odstotki, ne pa s fiksnimi vrednostmi. Število stolpcev, prikazanih v omrežju, je določeno glede na območje prelomne točke (angl. breakpoint), na katerem se zaslon gleda, ne glede na to, ali je prelomna točka za mobilne naprave, tablični računalnik ali drugo velikost.
Število stolpcev je na namiznih računalnikih delitelj števila 12 (npr. 2, 3, 4, 6 ali 12). Pri mobile-first načinu se zaradi ožjega zaslona po navadi uporabi maksimalno 6 stolpcev.
Prikaz štirih stolpcev na zaslonu, širokem 360 dp. Vir: Material Design
3. Žleb ali gutter
Gutter je angleški izraz za presledke med stolpci in pomagajo ločiti vsebino, v slovenščini jih imenujemo tudi žlebovi. Širine žlebov so fiksne vrednosti v vsakem območju preloma. Za boljšo prilagoditev zaslonu se lahko širina žleba spreminja na različnih točkah preloma.
Širši gutterji so primernejši za večje zaslone, saj ustvarijo več praznega prostora med stolpci. V primeru zaslona, ki je širok 360 dp, se poslužujemo gutterja v velikosti 16 dp. Tako zagotovimo vsakemu stolpcu 8 dp dodatnega prostora.
4. Beli prostor ali padding
Padding ali beli prostor je v oblikovalskem svetu zelo pomemben, saj z njim dosežemo jasnost in preglednost na strani. Veliko oblikovalcev se razmikov loti po občutku, vseeno pa je za mobile-first predvideno, da so elementi med seboj v razmaku vsaj 30 dp. Če se le da, pazimo, da so velikosti paddingov zaokrožene na 10.
Z uporabo belega prostora lahko zelo izboljšamo tudi uporabniško izkušnjo, saj z njim pomagamo ohraniti fokus. Beli prostor uporabljamo za ustvarjanje fokusnih točk za naše uporabnike, ki opozarjajo na določene elemente. Večji kot je padding okoli določenega elementa na strani, večji je poudarek na tem elementu.
5. Hierarhija elementov
Hierarhija pomeni poudarek ključnih elementov na celotni spletni strani in ustvarjanje kontrasta. Hierarhija vsebine pri klasičnih zaslonih je običajno razporejena v stolpce po 2, 3, 4 ali 6. Zasloni za mobilnih napravah imajo v primerjavi z zasloni računalnikov bolj omejen prostor, zato mnogi oblikovalci uporabljajo le 2 stolpca, kar posledično povzroči manjšo količino vsebine.
Pri razporejanju elementov je potrebo paziti tudi na to, da so pomembna vsebina in glavni elementi med uporabo mobilne naprave dostopni s palcem.
Vaše mobilne ciljne strani morajo biti uporabniku prijazne. Kot take ne bi smele vključevati vse vsebine, ki jo ponavadi predvidevate za namizje. Za začetek se osredotočite na najbolj kritične točke. Vedno pazite, da vrednost in kakovost vaše vsebine nista ogroženi. Uporabite tudi naslove in podnaslove ter pustite dovolj belega prostora, da bo vaša vsebina lažje sledljiva. Pri organizaciji vsebine za mobile si lahko pomagate tudi z razpredelnico. Vanjo vpišite vso vsebino in funkcionalnosti, za katero se vam zdi, da bi jo morala vaša stran vsebovati, nato pa naredite selekcijo. Tako se boste veliko lažje organizirali.
Povzetek
S spletnim mestom, ki je prilagojeno mobilnim napravam, zagotovimo odlično uporabniško izkušnjo uporabnikov. Če spletna stran ni prilagojena mobilnim napravam, zahteva, da uporabniki vsebino in elemente ustrezno povečujejo, da bi prebrali vsebino, kar privede do nezadovoljstva in velike verjetnosti, da bodo spletno mesto zapustili. Mobilna različica spletne strani je enostavno berljiva in hitro uporabna, da uporabnik v čim krajšem času izvede akcijo, ki je njegov cilj.
Če vaša spletna stran še ne nudi odlične mobilne uporabniške izkušnje, je morda čas, da premislite o prenovi ali novi spletni strani. Pri tem vam lahko pomaga naša ekipa ekspertov za UX in mobile-first dizajn. Samo en klik stran smo – pišite nam!
