Končni nanos – barva, tipografija in animacija v UX oblikovanju

V naših zadnjih člankih o oblikovanju UX, Umetnost in znanost oblikovanja uporabniške izkušnje in UX oblikovanje: Odkrivanje vzorcev obnašanja uporabnikov za boljši dizajn , smo raziskali faze načrtovanja in izdelave prototipov pri izdelavi izdelka, osredotočenega na uporabnika, in se dotaknili teme zakonov UX, ki so globoko zakoreninjeni v človeškem vedenju. Zdaj je čas, da našemu funkcionalnemu prototipu vdahnemo življenje z uporabo barve in tipografije blagovne znamke. Preučili bomo tudi, kako lahko animacija izboljša uporabniško izkušnjo, da postane bolj prijetna in zabavna za uporabo.

Končna oblika in predaja razvijalcem (developer handoff)

Zdaj, ko smo natančno določili, kaj rešitev počne, in jasno definirali uporabniške tokove (user flows), ki jih uporabniki izvedejo, da dosežejo svoj cilj, je čas, da izpopolnimo te žične okvirje z elegantnim uporabniškim vmesnikom. Upoštevajte dejstvo, da se lahko izdelava prototipa izvede tudi po fazi definiranja grafičnih elementov, kot so gumbi, pisave in barve. To je zato, ker se veliko digitalnih izdelkov nenehno posodablja z novimi funkcijami, kar zahteva iteracije različnih funkcij.



Najprej si bomo ogledali, kako nam lahko teorija barv pomaga pri ustvarjanju čudovitih uporabniških vmesnikov in s tem izboljšanju uporabniške izkušnje.

Barva

Psihologija barv v UX je pomembna pri vodenju uporabnika v nakup in pri vzpostavljanju komunikacije blagovne znamke z uporabnikom. Ker barva velja za element, ki si ga je najlažje zapomniti, se ta element uporablja tako v UX kot tudi v marketingu.

Barva je vizualni dražljaj, ki takoj izzove čustva in reakcije. Psihologi so predlagali, da barvni vtis predstavlja 60% sprejemanja ali zavrnitve izdelka. Tako lahko slaba barvna kombinacija močno vpliva na celotno uporabniško izkušnjo, z enakim učinkom kot slaba kopija strani ali počasno nalaganje spletnega mesta.

Vsi imamo barvne preference, vendar obstajajo podobnosti preferenc med enakimi starostnimi skupinami, med spoloma in med kulturami. Na primer, raziskave kažejo, da so svetle barve, kot sta rumena in rdeča, priljubljene v mlajši starostni skupini, medtem ko imajo barve s krajšo valovno dolžino, kot so modra, vijolična in zelena, raje odrasli in starejši. Barvni pomeni se lahko razlikujejo tudi med kulturami: na zahodu bela pomeni nedolžnost in upanje, v Aziji pa je bela barva za smrt, žalovanje in nesrečo. Kot UX oblikovalec se morate zavedati teh kulturnih konotacij, še posebej, če tržite za določeno lokacijo ali kulturno skupino.


Prav tako je pomembno upoštevati število uporabljenih barv. Običajno se držimo le ene ali dveh barv in uporabljamo veliko praznega prostora (white space) s poudarki živahnih barv, da pritegnemo pogled na določen element, ki poziva k dejanju (CTA – Call to action). Če uporabljate preveč barv, še posebej, če so vse zelo svetle, boste izgubili hierarhijo z vsemi, ki se borijo za pozornost. 82 % vseh podjetij uporablja samo do dve barvi, vključeni v njihove logotipe.


Pravilo ’60/30/10′ veleva, da dizajn vsebuje primarno barvo, ki zavzema 60% razmerje, nato sekundarno barvo, ki zavzame 30%, in nazadnje poudarek barve, ki zavzame 10%. Poglejmo barve, uporabljene v Instagramovem procesu registracije (onboarding):

Deli iz Instagramovega onboarding flow-a

Pisava

Tipografija v oblikovanju UX/UI služi za večjo čitljivost sporočila, poveča stopnjo interakcije, dopolni kopijo in dvigne splošno uporabniško izkušnjo na višjo raven. Dobra tipografija bo pritegnila pozornost in spodbudila uporabnike, da začnejo brati. Zato oblikovalci uporabniškega vmesnika, UX pisci, tekstopisci in drugi strokovnjaki za marketing pogosto med seboj sodelujejo – da zagotovijo privlačno vsebino, ki bo po videzu tako dobra, kot po prebrani vsebini.

Kvalitetne pisave, pravilni razmiki ter pametne izbire barv in kontrastov bodo uporabnikom omogočili večjo interakcijo z besedilom vašega digitalnega izdelka. Poleg tega osredotočanje na tipografijo pri oblikovanju UX/UI prav tako gradi podobo vašega podjetja. Ko se celotna tipografija ujema z identiteto blagovne znamke, pušča vtis, da ima podjetje močno definirano vizijo in podobo. Takšen vtis takoj dvigne stopnjo zaupanja uporabnikov in gradi prepoznavnost.


• V svojem digitalnem izdelku uporabite največ dve pisavi. Več kot to bo povzročilo zmedo in motnje v berljivosti.
• Če v svoji ekipi nimate tekstopisca ali pisca UX, vedno izberite kratko in preprosto besedilo.
• Preizkusite lestvice višine pisav, animacije, če jih imate, barve in presledke; poglejte, kaj najbolje deluje pri vaših priljubljenih uporabnikih.

Animacija

UX/UI oblikovalci gradijo animacije, ki uporabnike opozarjajo na spremembe, vplivjo na njihove odločitve in med drugim nakazujejo razmerje med elementi. Animacija uporabniškega vmesnika prav tako zmanjša mehanski občutek spletnega mesta ali aplikacije ter ustvari veliko bolj naravno in intuitivno izkušnjo.

Pri oblikovanju uporabniškega vmesnika je animacija lahko funkcionalna ali dekorativna. Funkcionalna animacija vodi in obvešča uporabnika v realnem času, medtem ko je dekorativna animacija ključno orodje za pripovedovanje zgodb in samo blagovno znamko. Najpogostejše vrste animacij uporabniškega vmesnika običajno spadajo v te štiri skupine:

• Mikrointerakcije
• Nalaganje in napredek
• Navigacija
• Pripovedovanje zgodb in blagovna znamka

Primer mikrointerakcije, ki obvesti in razvedri uporabnika v realnem času.

Končne misli

Spoznali smo, da čeprav imajo nekateri ljudje raje določene barve kot druge, ima le-ta pomembno vlogo pri zaznavanju in doživljanju produkta, zato jo moramo uporabljati zmerno in tako, da uporabnika vodi k določenemu dejanju. Poleg tega je tipografija pomemben dejavnik pri zaznavanju blagovne znamke in tona, v katerem je nekaj predstavljeno – predvsem naj bo čitljivo in lahko berljivo! Na koncu smo izvedeli, da lahko animacija pomaga pri doživljanju našega vmesnika na bolj tekoč in dinamičen način (v nasprotju s statičnim prehodom). Vse to je potrebno upoštevati, če želimo ustvarjati edinstvene in prijetne uporabniške izkušnje.