Domača » UI / UX » Oblikovanje osredotočenih vmesnikov za boljše sodelovanje uporabnikov

    Oblikovanje osredotočenih vmesnikov za boljše sodelovanje uporabnikov

    Uporabniško sodelovanje je težavna metrika, ki jo je mogoče doseči na različne načine za različne projekte. Večina oblikovalcev misli na vmesnik ko govorijo o interaktivnosti, ampak vsebine strani lahko spodbuja tudi interakcijo med uporabniki. Za boljše sodelovanje uporabnikov je pomembno, da napisati privlačno vsebino, in predstavi to vsebino v privlačnem dizajnu.

    To je veliko lažje reči kot narediti, če pa se naučite nekaj temeljev, ne boste imeli težav pri izdelavi a osredotočen UI z veliko vsebino za vaše projekte.

    V tej objavi vam bom pokazal, kako povečati interakcija uporabnikov in sodelovanje z vsebino na spletnih vmesnikih. To sta dva najpogostejša načina za vključitev obiskovalca in če lahko optimizirate izkušnjo ne boste imeli težav pri povečevanju tega donosnega časa na metriki strani.

    Zajem novosti

    Koncept novost definira dogodek ali stvar, ki je na splošno nova, pogosto zelo nova in edinstvena glede na kontekst. Novi dogodki pritegnejo našo pozornost, ker so izstopati. To velja tudi za načrtovanje vmesnikov, pri čemer novost predstavlja elemente, ki se zdijo skočite s strani.

    Pred kratkim sem našel odličen post, ki govori o pomenu novosti, ko gre za angažiranje. Zdi se, da uporabniki težiti k novim izkušnjam, vmesnikom in elementom uporabniškega vmesnika ker so drugačni. Samo dejstvo, da je oblikovan drugače, pogosto opozarja.

    Običajen primer je gumb za klic na dejanje na večini ciljnih strani. Prav tako lahko gradite novost z fotografije v ozadju, ilustracije ali posnetki zaslona aplikacij, kot je na ciljni strani Uber for Business.

    Ta stran nima gumba za klicanje, ampak mi takoj posveti pozornost gre na slike zaslona. Animirajo, ko se prvič naložijo, tako da to združi novost oblikovanja z gibanjem da bi pritegnili pozornost.

    Alternativa bi bila uporaba GiftRocket prikazane ikone kot povezave poglobiti v spletno mesto.

    Oba primera novost v svojo korist. Ne morete vedno pritegniti ljudi naprej v spletno mesto, vendar boste videli boljše rezultate, če boste pritegnili njihovo pozornost na visceralni ravni prvi.

    Oblika je prva stvar obiskovalci vidijo in morate pritegniti njihovo pozornost v nekaj sekundah spodbujanje nadaljnjega sodelovanja.

    Skimabilna tipografija

    Študije so pokazale, da večina uporabnikov skeniranje spletne strani namesto branja besedo za besedo. Verjetno boste želeli ljudi pritegniti k branju vaše vsebine, vendar lahko le toliko.

    Najboljša alternativa je ustvariti vsebino, ki jo je mogoče posnemati z naslovi, krepkimi besedili in slikami, ki ponazarjajo, kaj želite povedati. Lahko se vsaj spomnim tri močne tehnike pisanja lahko uporabite v svoji vsebini povečati berljivost:

    1. Razdelite vsebino z jasnimi podnapisi
    2. Razdeli odstavke da bi jih zmanjšali
    3. Uporabite seznam z označenimi črkami hitreje delite svoje točke

    Cilj je ohraniti vaše bralce premikanje po strani z vsemi potrebnimi sredstvi. Z majhno vsebino v velikih kosih precej lažje boste zajemali pozornost in vozili ljudi naprej.

    Oglejte si blog Quick Sprout za primer tega sloga pisanja. Vsebino je napisal Neil Patel in pogosto piše zelo dolge vsebine, vendar je on razčlenjuje odstavke v 1-3 stavke.

    Če imate ustrezne naslove, in uporabo slike / oznake skozi celotno vsebino boste dobili ljudi posnemanje in branje veliko dlje. Prav tako se prepričajte, da poveča količino presledka med odstavki. Robovi in ​​obloge oba imata veliko vlogo pri oblikovanju in berljivosti.

    Oblikujte besedilo tako, da bo dejansko zabavno branje. Dolgočasna kopija ne bo pritegnila, vendar tudi ne bo zabavna kopija, ki je premajhna ali nima kontrasta.

    Slike, ki pritegnejo oči

    Nedavna študija primera Backlinka predlaga, da se strani z vsaj eno sliko splošno višje kot strani brez slik. To je super z vidika SEO.

    Kaj pa vpletenost uporabnikov? Če lahko obdržite tisto sliko nad pregibom ali blizu vrha prav tako bo pritegnil pozornost obiskovalcev, preden se bodo odbili. Ne pozabite, da novi elementi strani privlačijo.

    Ko boste imeli sliko (ali več slik) na celotni strani, boste razbiti monotonijo dolgočasnih besedilnih blokov. Uporabniki lahko si vzemite odmor od branja cenim sliko ali vzpostavi povezavo med sliko in napisano vsebino. Toda kot pri večini tehnik oblikovanja je kakovost bolj dragocena kot količina.

    Študija primera Moz je pokazala, da so kakovostne slike ponavadi obdržati obiskovalce na strani dlje časa. Po drugi strani pa slike slabe kakovosti tudi ne delam in v nekaterih primerih so povzročili obiskovalcem hitreje premetavati kot brez slik. Poskusite vključiti vsaj eno sliko, ki je pomembne za vsebino in to daje vrednost bralcu.

    TechCrunch to počne s predstavljenimi slikami v njihovih člankih, kjer boste pogosto našli a prikazana fotografija nad pokrovom.

    WordPress omogoča dodajanje predstavljenih slik preprosto s funkcijo sličice. Za vsako objavo, ki jo napišete, lahko nastavite ločeno fotografijo in jo prisilite prikazati na vrhu strani. To je odličen način, da obiskovalcem omogočite vpogled kakšna je vsebina, in povečati RPK za sorodne gradnike objav, ki vsebujejo tudi sličico objave.

    Kontrastni elementi strani

    Če morate potem opozoriti na eno določeno področje na strani asimetrija je tvoj najboljši prijatelj. Kontrast poganja trden klin med določenimi deli modela ali določenimi bloki vsebine.

    Obiskovalec je seveda nasprotujejo ker je drugačen. Velike jukstapozicije barve, velikosti ali presledka privabljajo oko zaradi tega zlomi kalup vsega drugega v postavitvi.

    Moj najljubši primer za kontrastne elemente strani je morda domača stran Skica. Najdeno je veliko kontrasta med dvema gumboma za poziv k dejanjem, enega za prenos preskusne skice, drugo pa za nakup kopije.

    Gumb za nakup uporablja polno barvo ozadja veliko svetlejša kot druge barve v glavi. Besedilo gumba je tudi svetlejše od gumba za brezplačno preizkušanje. To vodi obiskovalce do gumba Kupi zdaj izključno iz vizualnih dražljajev.

    Opazili boste podobne tehnike na domači strani Optin Monster. Ta glava ima samo en gumb z oznako Get OptinMonster Now. To je svetlo zelen gumb na modrem ozadju brez drugih zelenih elementov na vidiku.

    Barva, velikost in oblika pritegnejo vašo pozornost zaradi tega nasprotuje z vsem drugim v glavi. Neposredno poleg gumba je majhna besedilna povezava za predogled videoposnetka. To je verjetno odličen videoposnetek in si zasluži pozornost, vendar ne toliko kot gumb za poskusno / prijavno CTA.

    Za spletni dnevnik lahko imate različne kvalifikacije za sodelovanje uporabnikov. Ena najpogostejša izbira je obrazec za prijavo na novice kot je primer na Aeolidia.

    Če se pomaknete navzdol na dno vsebine, ki jo boste opazili a okno za prijavo fancy-shmancy zasnovan samo za obliko novic. Izstopa iz preostale strani s edinstvena barva ozadja, zabavna tipografija in luštna ikona King Triton.

    Najboljši način oblikovanja s kontrastom je preučevanje primerov in samo eksperimentiranje. Poglejte, kaj deluje in kaj ne meritve sledenja s testiranjem A / B. Če iščete več primerov, si oglejte to pisanje Codropov, polno nasvetov in zaslonov živih asimetričnih spletnih mest.

    Spodbujajte sodelovanje uporabnikov

    Obstaja veliko načinov, kako obiskovalce zanimati spletno mesto, vendar je najpogostejša možnost naj jih delajo. To velja tako za statične bloge kot za dinamične socialne strani. Za to ni enake velikosti. Lahko naredite vse, kar je potrebno, da bi uporabniki se počutite vpleteni v stran.

    V statično mesto, lahko dodate veliko povezane povezave za več branja ali vključitev slideshows. Lahko tudi dodaj obrazce za komentarje uporabnikov ali e-novice.

    Ko gre za dinamični vmesniki, namen spletnega mesta je ponavadi spodbujanje sodelovanja uporabnikov. Največja ovira je uporabnikov poučevanja kako deluje spletno mesto in kako pravilno sodelovati z vmesnikom.

    Oglejte si to objavo s strani KissMetricsa, ki govori o tehnikah vključevanja uporabnikov. Ena izmed najboljših strategij, ki sem jih našel, je pripravite voden ogled ki vodi obiskovalce skozi vsako od glavnih funkcij.

    Razmislite o tem, kako bi bila zmeda možnosti Twitterja za novega uporabnika. Če ne sledijo nikomur in nimajo nobenih privržencev, zakaj bi tweetali?

    The “Sledite predlogom” polje med prijavo pomaga novim uporabnikom spoznajte, kako Twitter deluje. Ta funkcija omogoča nove uporabnike začnite se ukvarjati s platformo in do preizkusite funkcije tweets in zasebna sporočila.

    Poleg vodenega ogleda boste želeli narediti vmesnik preprost. Glavne lastnosti bi morale biti 1-2 klikov stran na nadzorni plošči ali glavni strani uporabnika. Intuitivni vmesniki potrebujejo razlago, in preprostosti pritegne pozornost veliko hitreje.

    Z razumevanjem vseh teh tehnik boste lažje zgradili vmesnike reševanje težav uporabnikov, in nove uporabnike, da se pridružijo. Če iščete več UX oblikovni nasveti za oblikovanje si oglejte te povezane objave:

    • Taktika uporabnika za povečanje sodelovanja (thinkapps.com)
    • Lekcija v postopnem angažiranju (uxbooth.com)
    • Ne predvidevajte, da bi se novi uporabniki želeli naučiti, kako uporabljati vaš izdelek (uxdesign.cc)