Osnovni UI/UX principi, ki bi jih moral poznati vsak razvijalec

Zgodi se, da se razvijalci lahko znajdemo na projektih, kjer moramo implementirati določene funkcionalnosti, za katere pa nam naročnik ne priskrbi oblikovalske specifikacije. Razlogi za to so različni; ali naročnik nima zadostnih sredstev ali pa nas preganjajo roki.

Ne glede na razlog, ki tiči za tem, na koncu lahko pride do tega, da mora razvijalec najti najboljšo možno rešitev v dani situaciji. Pri tem mora seveda upoštevati vse specifike projekta ter potrebe končnega uporabnika, ki mu je produkt namenjen. Prav zato menim, da bi moral vsak razvijalec, tako front-end kot back-end, poznati osnovne principe UX/UI oblikovanja.

Naj poudarim, da nisem strokovnjak na tem področju, vendar bi kljub temu z vami rad delil nekaj osnovnih smernic. Sledim jim tudi tudi sam, ko se znajdem na projektu, pri katerem ima naročnik pomanjkljivo specifikacijo za oblikovanje ali pa te sploh ni.

Wireframe uporabite za vse!

Ja, prav ste prebrali - pripravite wireframe (žičnate modele) za čisto vse. Za tiste, ki ne veste, kaj je wireframe: gre za preprost način, s katerim razčlenite vsebino in fukncionalnost projekta in ob tem upoštevate uporabniško izkušnjo ter potek posameznih uporabniških interakcij.
S takim postopkom bo celotno načrtovanje projekta bolj enostavno, pri pisanju in urejanju kode pa boste časovno bolj učinkoviti.

Držite se osnov

Pri načrtovanju wireframov je glavni cilj planiranje in ne izgled. Postavitev elementov na strani ter uporabniška izkušnja sta na tej točki bolj pomembna kot privlačen izgled. Pri razvoju wireframeov morate seveda tesno sodelovati z naročnikom oz. celotno ekipo, ki je vključena v razvoj funkcionalnosti. Samo tako boste lahko poskrbeli, da boste pri postavitvi dejansko zajeli bistvo funkcionalnosti, ki jo razvijate. 

Z izgledom se začnite ukvarjati komaj potem, ko prejmete dokončno potrditev postavitve. Na tak način boste privarčevali ogromno časa! Glavno je, da načrtujete vnaprej in tako poskrbite, da boste manj časa porabili za ponovno pisanje oz. izboljšavo kode.

Wireframi so lahko preproste skice, ki jih narišete v vašo beležko. Za skiciranje osnutkov lahko uporabite tudi programsko opremo, kot je recimo Photoshop, Adobe XD, Sketch itd. Jaz vam toplo priporočam Freehand (Invision), ki omogoča možnost deljenja osnutkov bodisi z naročnikom ali ekipo sodelavcev. Če imate grafično tablico, še toliko bolje, saj bo rezultat isti, kot če bi skicirali na list papirja, le da bo slednje še vedno v digitalni obliki.

Wireframe za lažjo ponazoritev; narejen je s pomočjo Freehanda (Invision).

Kompozicija

Pri kompoziciji imam v mislih predvsem to, da pazite na poravnavo določenih elementov.

Preprost primer tega bi bil naslov in kratek odstavek besedila, pri čemer ima vsak od njiju drugačno poravnavo. Recimo da je naslov poravnan na levo, odstavek besedila pa ima sredinsko poravnavo. V takem primeru celotna postavitev deluje čudno, uporabnik bo zmeden in vsebina ne bo pregledna in berljiva.

Preprost primer pravilne in napačne poravnave.

Velikost šteje

To je pogosta napaka, ki jo opažam. Poskrbeti morate, da je velikost gumbov in drugih oblikovnih elementov konsistentna in v skladu s proporci celotne spletne strani. Pomembnost elementov na spletni strani lahko ločite tudi z uporabo kontrasta. Gumb je še vedno gumb in ni potrebe, da bi ga povečali zato, da bi deloval bolj pomemben.

Primer, kjer je pomembnost gumba pravilno poudarjena z barvo (kontrastom) in ne z velikostjo.

Razmiki in tipografija

Včasih smo elemente ločevali z razdelilnimi črtami, ampak navade uporabnikov so se spremenile,in v primerjavi s preteklostjo, danes lažje razločijo med elementi. Namesto uporabe razdelilnih črt zato priporočam, da uporabite nekoliko več praznega prostora (white space).

Primer dobro postavljenega razmaka med naslovom in odstavkom.

Kot sem omenil prej, končni dizajn mora biti enostaven za razumevanje; razmiki in tipografija igrata pri tem veliko vlogo. Ko se ukvarjam z naslovi in besedilnimi odstavki, običajno sledim ½ pravilu, ki je zelo preprosto: velikost naslova deliš z 2 in dobljeno vrednost uporabiš kot razmik med naslovom in odstavkom. V večini primerov deluje uporabnikom prijazno.

Zaključek

To je bilo samo nekaj izredno preprostih primerov, s katerimi lahko izboljšate dizajn, vendar verjemite mi, da v praksi pogosto naletim na take napake. Seveda je še veliko pomembnih stvari, ki jih nismo omenili. Barvna teorija in tipografija sta recimo zelo obširni temi, vendar se v tej objavi nisem želel spuščati v podrobnosti, saj bi zapis potem bil predolg, vi pa na koncu že čisto zdolgočaseni :)

Resnično upam, da vam bo kateri izmed teh nasvetov olajšal dnevne izzive, s katerimi se srečujete kot razvijalec, izboljšal delovni proces in seveda najbolj pomembno: manj časa boste porabili za ponovno pisanje oz. izboljšavo kode, zaradi česar boste na dolgi rok privarčevali ne samo na vašem času, temveč tudi zmanjšali strošek razvoja za vašega naročnika.