Navrhování zaměřených rozhraní pro lepší zapojení uživatelů

Zapojení uživatele je složitá metrika, kterou lze dosáhnout různými způsoby pro různé projekty. Většina návrhářů si to myslí rozhraní když mluví o interaktivitě, ale obsah stránky může také podpořit interakci uživatelů. Pro lepší zapojení uživatele je důležité zapsat poutavý obsah, a prezentovat tento obsah v chytlavém designu.

Je mnohem snazší říci, než udělat, ale pokud se naučíte nějaké základy, nebudete mít žádný problém s tvorbou zaměřené uživatelské rozhraní s velkým obsahem pro vaše projekty.

V tomto příspěvku vám ukážu, jak zvýšit interakce uživatele a zapojení obsahu na webových rozhraních. To jsou dva nejběžnější způsoby, jak zapojit návštěvníka, a pokud můžete optimalizovat zkušenosti nebudete mít žádný problém při zvyšování lukrativního času na stránce metriky.

Zachytit novinu

Pojem novinka definuje událost nebo věc, která je obecně nová, často velmi nová a jedinečná na základě kontextu. Nové události chytit naši pozornost, protože oni vyčnívat. To platí i pro návrh rozhraní s novinkou představující prvky, které se zdají skočit ze stránky.

Nedávno jsem našel skvělý post diskutující o významu novosti, pokud jde o angažovanost. Zdá se, že uživatelé přitahují nové zkušenosti, rozhraní a prvky uživatelského rozhraní protože jsou jiné. Samotná skutečnost, že byla navržena jinak, upozorňuje.

Jedním z běžných příkladů je tlačítko volání na akci, které se nachází na většině vstupních stránek. Můžete také postavit novinku s fotky pozadí, ilustrace nebo snímky obrazovky aplikace, například na vstupní stránce Uber for Business.

Tato stránka má tlačítko s výzvou k akci, ale má pozornost okamžitě jde na screenshoty. Animují se při prvním načtení, takže to kombinuje novinka designu s pohybem chytit pozornost.

Alternativou by bylo použití GiftRocket ilustrované ikony jako odkazy ponořit se dále do lokality.

Oba tyto příklady využít novost ve svůj prospěch. Nemůžete vždy čerpat lidi dál do stránek, ale uvidíte lepší výsledky, pokud se upoutáte jejich pozornosti na viscerální úrovni První.

Design je první věc Návštěvníci vidět, a je třeba chytit jejich pozornost během několika vteřin podpořit další zapojení.

Skimabilní typografie

Studie zjistily, že většina uživatelů skenování webové stránky raději než číst slovo za slovo. Pravděpodobně budete chtít lidi vtáhnout do čtení vašeho obsahu, ale můžete to udělat jen tolik.

Nejlepší alternativou je vytvořit snesitelný obsah s titulky, tučným textem a obrázky, které ilustrují, co se snažíte říct. Přemýšlím alespoň o tom tři mocné techniky psaní můžete použít ve svém obsahu zvýšit čitelnost:

1. Rozdělte obsah s jasnými titulky
2. Rozdělit odstavce aby byly menší
3. Použijte seznamy s odrážkami rychleji sdílet vaše body

Cílem je udržet vaše čtenáře pohybující se po stránce nezbytnými prostředky. Udržováním malého obsahu v kouscích velikosti kousnutí budete mít mnohem jednodušší čas zachytit pozornost a řídit lidi dál do stránek.

Podívejte se na blog Quick Sprout pro příklad tohoto stylu psaní. Obsah napsal Neil Patel a často píše velmi dlouhý obsah, ale on rozděluje odstavce do 1-3 vět.

Pokud máte řádné titulky, a použití obrázky / odrážky v celém obsahu dostanete lidi skimming a čtení mnohem dál. Také se ujistěte, že zvýšit množství mezer mezi odstavci. Okraje a výplně oba hrají obrovskou roli v designu designu a čitelnosti.

Navrhněte text tak, aby byl ve skutečnosti zábavné číst. Nudné kopírování nebude lákat, ale ani zábavná kopie, která je příliš malá nebo chybí kontrast.

Snímky pro zachycení očí

Nedávná případová studie Backlinka naznačuje, že stránky s alespoň jedním obrázkem obvykle hodnost vyšší než stránky bez obrázků. To je skvělé z pohledu SEO.

Ale co zapojení uživatelů? Pokud můžete tento obrázek zachovat nad záhybem nebo blízko vrcholu zaujme také pozornost návštěvníků před tím, než se odrazí. Nezapomeňte, že nové prvky stránky mají tendenci přitahovat.

Máte-li na stránce roztroušenou fotku (nebo mnoho obrázků) rozdělit monotónnost nudných textových bloků. Uživatelé mohou pauzu od čtení ocenit obrázek nebo vytvořit spojení mezi obrazem a psaným obsahem. Ale stejně jako u většiny konstrukčních technik je kvalita cennější než kvantita.

Případová studie Moz zjistila, že kvalitní snímky mají tendenci udržet návštěvníky mnohem déle. Na druhou stranu, nekvalitní obrazy nefungují také av některých případech způsobili návštěvníkům rychlejší odraz než bez obrázků. Měli byste se pokusit zahrnout alespoň jeden obrázek obsahu a to poskytuje hodnotu čtenáři.

TechCrunch to s představoval obrázky v jejich článcích, kde budete často najít představoval fotografii nad záhybem.

Aplikace WordPress usnadňuje přidávání zobrazených obrázků pomocí funkce náhledů. Pro každý příspěvek, který píšete, můžete nastavit odlišnou fotografii, která se bude zobrazovat v horní části stránky. To je ideální způsob, jak návštěvníkům nahlédnout o čem je celý obsah, a zvýšit CTR pro související widgety příspěvků, které také obsahují miniaturu příspěvku.

Kontrastní prvky stránky

Pokud potřebujete, aby pozornost na jednu konkrétní oblast na stránce pak asymetrie je tvůj nejlepší kamarád. Kontrast pohání pevný klín mezi specifickými oblastmi designu nebo určitých bloků obsahu.

Návštěvník je přirozeně raviate k kontrastu protože je to jiné. Velké kombinace barev, velikostí nebo mezer mezi nimi nakreslují oko, protože to zlomí formu všeho ostatního v rozvržení.

Můj oblíbený příklad pro kontrastní prvky stránky je možná domovská stránka Skica. Je zde mnoho kontrastu mezi dvěma tlačítky volání k akci, jeden pro stahování Sketch soudu a druhý pro nákup kopie.

Tlačítko nákupu používá plnou barvu pozadí mnohem jasnější než ostatní barvy v záhlaví. Text tlačítka je také jasnější ve srovnání s volným zkušebním tlačítkem. To vede návštěvníky k tlačítku Koupit nyní pouze z vizuálních podnětů.

Všimnete si a podobnou techniku na domovské stránce společnosti Optin Monster. Toto záhlaví má pouze jedno tlačítko označené Get OptinMonster Now. Je to jasně zelené tlačítko na modrém pozadí bez dalších zelených prvků v dohledu.

Barva, velikost a tvar všechny přitahují vaši pozornost, protože to kontrastuje se vším ostatním v záhlaví. Přímo vedle tlačítka je malý textový odkaz pro náhled videa. Je to asi skvělé video a zaslouží si pozornost, ale ne tolik jako zkušební / registrační tlačítko CTA.

Pro blog můžete mít různé kvalifikace pro zapojení uživatele. Jedna společná volba je formulář pro registraci newsletteru například na příkladu Aeolidia.

Pokud přejdete dolů do dolní části obsahu, zjistíte a fancy-shmancy registrační box navržen pouze pro informační bulletin. Vyčnívá ze zbytku stránky jedinečná barva pozadí, zábavná typografie a roztomilá ikona krále Tritona.

Nejlepším způsobem, jak navrhnout kontrast, je studium příkladů a experiment. Podívejte se, co funguje a co ne metriky sledování s testováním A / B. Pokud hledáte více příkladů, podívejte se na tento Codrops writeup plný tipů a obrazovek živých asymetrických webových stránek.

Podporovat interakci uživatelů

Existuje mnoho způsobů, jak udržet návštěvníky zájem o stránky, ale nejčastější je dostat je dělat věci. To platí jak pro statické blogy, tak i pro dynamické sociální stránky. Nejsou k tomu žádné triky pro všechny velikosti. Můžete dělat, co děláte, aby uživatelé cítit se angažován na stránce.

V statické místo, můžete přidat spoustu související odkazy pro čtení více nebo zahrnout prezentace obrázků. Můžete také přidat formuláře pro komentáře uživatelů nebo e-mailový zpravodaj.

Pokud jde o dynamická rozhraní, Účelem těchto stránek je obvykle podpořit zapojení uživatelů. Největší překážkou je učitelů jak web funguje a jak správně spolupracovat s rozhraním.

Podívejte se na tento příspěvek od společnosti KissMetrics, kde se mluví o technikách zapojení uživatelů. Jedna z nejlepších strategií, které jsem našel, je navrhnout prohlídku s průvodcem který vede návštěvníky jednotlivých základních funkcí.

Přemýšlejte o tom, jak matoucí je vyhlídka na Twitteru pro nového uživatele. Pokud nikoho nesledují a nemají žádné následovníky, proč by to pípali?

“Postupujte podle doporučení” při registraci pomáhá novým uživatelům seznámit se s tím, jak Twitter funguje. Tato funkce připravuje nové uživatele začít se angažovat s platformou a experimentovat s funkcemi následující, tweety a soukromé zprávy.

Kromě prohlídky budete také chtít rozhraní je jednoduché. Prvotní prvky by měly být 1-2 kliknutí z řídicího panelu nebo hlavní stránky uživatele. Intuitivní rozhraní potřebují vysvětlení, a jednoduchost zaujme pozornost mnohem rychleji.

Pochopení všech těchto technik, budete mít jednodušší čas budování rozhraní, které řešit problémy uživatelů, a povzbudit nové uživatele ke vstupu. Pokud hledáte více UX tipy zapojení zapojení podívejte se na tyto související příspěvky:

• Uživatel Onboarding Tactic ke zvýšení angažovanosti (thinkapps.com)
• Lekce v postupném zapojení (uxbooth.com)
• Nepředpokládejte, že se noví uživatelé chtějí naučit používat váš produkt (uxdesign.cc)