Navrhovanie zaostrených rozhraní pre lepšiu angažovanosť používateľov

Zapojenie používateľa je zložitá metrika, ktorú možno dosiahnuť rôznymi spôsobmi pre rôzne projekty. Väčšina dizajnérov myslieť na rozhranie keď hovoria o interaktivite, ale obsah stránky môže tiež podporiť interakciu používateľa. Pre lepšiu angažovanosť používateľa je dôležité zapíšte obsah, a prezentovať tento obsah v chytľavom dizajne.

Je to oveľa jednoduchšie povedané než urobiť, ale ak sa naučíte niektoré základy nebudete mať problém vyhotovovať a zamerané užívateľské rozhranie s veľkým obsahom pre vaše projekty.

V tomto príspevku vám ukážem, ako zvýšiť interakcie používateľov a angažovanosti v obsahu na webových rozhraniach. Toto sú dva najbežnejšie spôsoby, ako zapojiť návštevníka, a ak môžete optimalizovať skúsenosti nebudete mať problém zvýšiť lukratívny čas na metrike stránky.

Capture Novelty

Pojem novinka definuje udalosť alebo vec, ktorá je všeobecne nová, často veľmi nová a jedinečná na základe kontextu. Nové udalosti chytiť našu pozornosť, pretože oni vyčnievať. To platí aj pre dizajn rozhrania s novinkou reprezentujúcou prvky, ktoré sa zdajú skočiť zo stránky.

Nedávno som našiel skvelý príspevok, ktorý diskutuje o dôležitosti novosti, pokiaľ ide o angažovanosť. Zdá sa, že používatelia gravitovať smerom k novým skúsenostiam, rozhraniam a prvkom používateľského rozhrania pretože sú iné. Jediná skutočnosť, že je navrhovaná inak, často upozorňuje.

Jedným z bežných príkladov je tlačidlo výzvy na akciu, ktoré sa nachádza na väčšine vstupných stránok. Môžete tiež stavať novosť s obrázky na pozadí, ilustrácie alebo snímky obrazovky aplikácií, ako napríklad na vstupnej stránke Uber for Business.

Táto stránka má tlačidlo výzvy na akciu, ale moja pozornosť okamžite prejde na screenshoty. Animujú sa pri prvom načítaní, takže sa kombinujú novosť dizajnu s pohybom upútať pozornosť.

Alternatívou by bolo použitie GiftRocket ilustrované ikony ako odkazy aby sa ponoril ďalej do lokality.

Oba tieto príklady používať novosť v ich prospech. Nemôžete vždy pritiahnuť ľudí ďalej na stránku, ale uvidíte lepšie výsledky, ak ich zaujmete na viscerálnej úrovni najprv.

Návrh je prvá vec návštevníci vidia a musíte ich upútať počas niekoľkých sekúnd podporiť ďalšie zapojenie.

Skúsiteľná typografia

Štúdie zistili, že väčšina používateľov skenovanie webovej stránky skôr než ho čítať slovom. Pravdepodobne budete chcieť kresliť ľudí do čítania obsahu, ale môžete len urobiť toľko.

Najlepšou alternatívou je vytvoriť skimmable obsah s titulkami, tučným písmom a obrázkami, ktoré ilustrujú to, čo sa snažíte povedať. Myslím aspoň na to tri silné písacie techniky môžete použiť vo svojom obsahu zvýšiť čitateľnosť:

1. Rozdeľte obsah s jasnými titulkami
2. Zlomiť odseky aby boli menšie
3. Použite zoznamy s odrážkami zdieľať svoje body rýchlejšie

Cieľom je udržať čitateľov pohybom nadol prostredníctvom akýchkoľvek potrebných prostriedkov. Udržiavaním obsahu malého v kusoch s veľkou hmotnosťou budete mať oveľa jednoduchší čas zachytiť pozornosť a priviesť ľudí ďalej na miesto.

Pozrite sa na blog Quick Sprout pre príklad tohto štýlu písania. Obsah je napísaný Neilom Patelom a často píše veľmi dlhý obsah, ale on rozdeľuje odseky do 1-3 viet.

Ak máte správne titulky, a používať obrázky / odrážky v celom obsahu dostanete ľudí skimming a čítať veľa ďalej. Uistite sa tiež zvýšiť množstvo medzery medzi odsekmi. Okraje a výplne obe hrajú obrovskú úlohu v dizajne a čitateľnosti rozloženia.

Navrhnite text tak, aby bol skutočne zábavné čítanie. Nudná kópia nebude lákať, ale nebude ani zábavná kópia, ktorá je príliš malá alebo nemá kontrast.

Oko-chytanie obrázkov

Nedávna prípadová štúdia spoločnosti Backlinko naznačuje, že stránky s aspoň jedným obrázkom všeobecne vyššia než stránky bez obrázkov. To je skvelé z pohľadu SEO.

Ale čo sa týka angažovanosti používateľov? Ak môžete zachovať tento jeden obrázok nad záhybom alebo v blízkosti vrcholu bude to tiež zachytiť pozornosť návštevníkov skôr, ako sa odrazí. Nezabudnite, že nové prvky stránky majú tendenciu priťahovať.

Keď máte po celej stránke zobrazený obrázok (alebo veľa obrázkov) rozdeliť monotónnosť nudných textových blokov. Používatelia môžu prestávka od čítania zhodnotiť obraz alebo vytvoriť spojenie medzi obrázkom a písomným obsahom. Ale ako pri väčšine návrhových techník, kvalita je cennejšia ako množstvo.

Prípadová štúdia spoločnosti Moz zistila, že obrázky s vysokou kvalitou majú tendenciu udržať návštevníkov na stránke oveľa dlhšie. Na druhej strane obrazy s nízkou kvalitou nefungujú rovnako dobre a v niektorých prípadoch spôsobili návštevníkov odskočiť rýchlejšie než bez obrázkov. Mali by ste sa pokúsiť zahrnúť aspoň jeden obrázok, ktorý je relevantné pre obsah a to poskytuje čitateľovi hodnotu.

TechCrunch to robí s vybranými obrázkami vo svojich článkoch, kde často nájdete zobrazená fotka nad záhybom.

WordPress prináša jednoduché doplnenie funkčných obrázkov pomocou funkcie miniatúry post. Môžete nastaviť odlišnú fotografiu pre každý príspevok, ktorý napíšete, a donútiť ho, aby sa zobrazil v hornej časti stránky. Je to dokonalý spôsob, ako návštevníkom pozrieť o čom je obsah, a zvýšiť CTR pre súvisiace miniaplikácie, ktoré obsahujú miniatúru príspevku.

Kontrastné elementy stránky

Ak potrebujete upozorniť na jednu konkrétnu oblasť na stránke potom asymetria je váš najlepší priateľ. kontrastovať riadi tvrdý klin medzi špecifickými oblasťami dizajnu alebo určitými blokmi obsahu.

Návštevník je prirodzene zmiernenie kontrastu pretože je to iné. Veľké juxtapozície farby, veľkosti alebo medzery vytiahnu oko, pretože zlomí formu všetkého ostatného v rozložení.

Môj obľúbený príklad kontrastných elementov stránky je možno domovskou stránkou Sketch. Je tu veľa kontrastu medzi oboma tlačidlami výzvy na akciu, jeden pre sťahovanie skúšobnej verzie Sketch a druhý pre zakúpenie kópie.

Tlačidlo nákupu používa plnú farbu pozadia oveľa jasnejšie než iné farby v hlavičke. Text tlačidla je tiež jasnejší v porovnaní s tlačidlom bezplatnej skúšobnej verzie. Toto vedie návštevníkov k tlačidlu Kúpiť výlučne z vizuálnych podnetov.

Všimnete si a podobná technika na domovskej stránke Optin Monster. Táto hlavička má iba jedno tlačidlo označené ako Get OptinMonster Now. Je to jasne zelené tlačidlo na modrom pozadí bez ďalších zelených prvkov.

Farba, veľkosť a tvar vás upútajú, pretože to kontrastuje so všetkým ostatným v hlavičke. Priamo vedľa tlačidla je malý textový odkaz na ukážku videa. Je to pravdepodobne skvelé video a zaslúži si pozornosť, ale nie toľko ako tlačidlo CTA na skúšanie / registráciu.

Pre blog môžete mať odlišnú kvalifikáciu pre zapojenie používateľov. Jednou spoločnou voľbou je a formulár na prihlasovanie do bulletinov ako napríklad príklad o spoločnosti Aeolidia.

Ak posuniete nadol na spodok obsahu, všimnete si ho fiktívna prihlasovacia schránka navrhnuté len pre formulár bulletinu. Zvyšok stránky vyniká jedinečná farba pozadia, zábavná typografia a roztomilá ikona kráľa Tritona.

Najlepším spôsobom konštruovania s kontrastom je študovať príklady a len experimentovať. Pozrite sa, čo funguje a čo nie metriky sledovania s testovaním A / B. Ak hľadáte ďalšie príklady, prečítajte si tento kód pre kódovanie, ktorý je plný tipov a obrazoviek živých asymetrických webových stránok.

Podporujte interakciu používateľa

Existuje toľko spôsobov, ako udržať návštevníkov záujem o stránky, ale najbežnejšie je dostať ich robiť veci. Platí to aj pre statické blogy a dynamické sociálne stránky. Neexistujú žiadne triky, ktoré by vyhovovali všetkým. Môžete robiť všetko, čo je pre používateľov sa cítite angažovaní so stránkou.

V statické stránky, môžete pridať veľa súvisiace odkazy pre čítanie viac, alebo zahrnúť prezentácie obrázkov. Môžete tiež pridať formuláre pre komentáre používateľov alebo e-mailový spravodaj.

Pokiaľ ide o dynamické rozhrania, Účelom stránky je zvyčajne povzbudenie angažovanosti používateľov. Najväčšou prekážkou je vyučujúcich používateľov ako funguje lokalita a ako sa správne zapojiť do rozhrania.

Pozrite si tento príspevok od spoločnosti KissMetrics, ktorá hovorí o technikách interakcie používateľov. Jedna z najlepších stratégií, ktorú som našiel, je Navrhnite prehliadku so sprievodcom ktorá vedie návštevníkov každá z hlavných funkcií.

Premýšľajte o tom, ako by mätúce vyhliadky Twitteru boli pre úplne nového používateľa. Ak nikoho nevykonajú a nemajú žiadnych nasledovníkov, prečo by to mali byť?

“Sledujte návrhy” počas registrácie pomáha novým používateľom zoznámte sa s tým, ako funguje Twitter. Táto funkcia prináša nové používateľom Začnite zapájať s platformou a experimentovať s funkciami ako sú nasledujúce, tweety a súkromné ​​správy.

Okrem prehliadky so sprievodcom budete tiež chcieť jednoduché rozhranie. Prvotné funkcie by mali byť 1-2 kliknutia z používateľskej tabuľky alebo hlavnej stránky. Intuitívne rozhrania potrebujú vysvetlenie, a jednoduchosť zachytáva pozornosť oveľa rýchlejšie.

Pochopením všetkých týchto techník budete mať jednoduchší čas na vytváranie rozhraní riešiť problémy používateľov, a povzbudiť nových používateľov, aby sa pripojili. Ak hľadáte viac UX dizajnové konštrukčné hroty pozrite si tieto súvisiace príspevky:

• Užívateľská taktika na zvýšenie angažovanosti (Thinkapps.com)
• Lekcia v postupnej angažovanosti (Uxbooth.com)
• Nepredpokladajte, že sa noví používatelia chcú naučiť používať váš produkt (Uxdesign.cc)