Designa fokuserade gränssnitt för bättre användarengagemang

Användarengagemang är en knepig mätning som kan uppnås på olika sätt för olika projekt. De flesta designers tycker om gränssnitt när de pratar om interaktivitet, men sidinnehåll kan också uppmuntra användarens interaktion. För bättre användarengagemang är det viktigt att skriv engagerande innehåll, och presentera det innehållet i en catchy design.

Det är mycket lättare sagt än gjort, men om du lär dig några grundläggande saker har du inga problem att skapa en fokuserad användargränssnitt med bra innehåll för dina projekt.

I det här inlägget visar jag hur du kan öka användarinteraktion och innehållsengagemang på webbaserade gränssnitt. Det här är de två vanligaste sätten att engagera en besökare, och om du kan optimera upplevelsen du kommer inte ha något problem att öka den lukrativa tiden på sidan metrisk.

Fånga nyhet

Konceptet av nyhet definierar en händelse eller sak som är generellt ny, ofta väldigt ny och unik baserat på sammanhang. Nya händelser fånga vår uppmärksamhet eftersom de stå ut. Detta gäller också för gränssnittsdesign med nyhet som representerar element som verkar hoppa av sidan.

Jag hittade nyligen ett bra inlägg som diskuterar vikten av nyhet när det gäller engagemang. Användare verkar gravitate mot nya erfarenheter, gränssnitt och UI-element eftersom de är olika. Det enda faktum att vara utformat annorlunda uppmärksammas ofta.

Ett vanligt exempel är anropsknappen som finns på de flesta målsidor. Du kan också bygga nyhet med bakgrundsbilder, illustrationer eller app skärmdumpar, som på landningssidan för Uber for Business.

Den här sidan har ett anrop till åtgärdsknapp men min uppmärksamhet omedelbart går till skärmdumparna. De animerar när de först laddas så det här kombineras nyhet av design med rörelse att fånga uppmärksamhet.

Ett alternativ skulle vara GiftRocket med illustrerade ikoner som länkar att gräva längre in på platsen.

Båda dessa exempel använd nyhet till deras fördel. Du kan inte alltid dra personer längre in på webbplatsen, men du kommer att se bättre resultat om du tar sin uppmärksamhet på en visceral nivå först.

Designen är den första saken besökare ser, och du behöver fånga deras uppmärksamhet inom sekunder att uppmuntra till ytterligare engagemang.

Skimmable Typography

Studier har funnit att de flesta användare skanna en webbsida snarare än att läsa det ord för ord. Du kommer noga vilja dra personer till att läsa ditt innehåll, men du kan bara göra så mycket.

Det bästa alternativet är att skapa skumbart innehåll med rubriker, fet text och bilder som illustrerar vad du försöker säga. Jag kan åtminstone tänka på tre kraftfulla skrivtekniker du kan använda i ditt innehåll till öka läsbarheten:

1. Dela innehåll med tydliga undertexter
2. Bryta upp stycken för att göra dem mindre
3. Använd punktlista att dela dina poäng snabbare

Målet är att hålla dina läsare flytta ner på sidan med vilket medel som helst. Genom att hålla innehållet litet i bitar i bitar du kommer att ha en mycket lättare tid att fånga uppmärksamhet och köra människor vidare in på webbplatsen.

Kolla in Quick Sprout-bloggen för ett exempel på denna skrivstil. Innehållet är skrivet av Neil Patel och han skriver ofta mycket långformat innehåll, men han bryter ned styckena i 1-3 meningar varje.

Om du har riktiga rubriker, och använda bilder / punktpunkter genom hela innehållet får du folk att skumma och läsa mycket längre. Också vara säker på öka mängden av blankutrymme mellan stycken. Marginaler och paddlingar båda spelar en stor roll i layoutdesign och läsbarhet.

Design text så att det är faktiskt kul att läsa. Boring copy kommer inte locka, men det kommer inte heller att vara roligt kopiera som är för liten eller saknar kontrast.

Eye-Catching bilder

En nyligen genomförd fallstudie av Backlinko föreslår att sidor med minst en bild rent generellt ranka högre än sidor utan bilder. Detta är bra från ett SEO-perspektiv.

Men vad sägs om användarengagemang? Om du kan behålla den ena bilden ovanför vikten eller nära toppen Det kommer också att fånga besökarnas uppmärksamhet innan de studsar. Kom ihåg att nya sidelement har en tendens att locka till sig.

När du har en bild (eller många bilder) interspersed över hela sidan kommer du bryta upp monotonin av tråkiga textblock. Användare kan ta en paus från läsning att uppskatta bilden eller skapa en koppling mellan bilden och det skriftliga innehållet. Men som med de flesta designtekniker är kvalitet mer värdefull än kvantitet.

En Moz-fallstudie visade att bilder av hög kvalitet tenderar att hålla besökare på sidan under mycket längre tid. Å andra sidan bilder av dålig kvalitet fungerar inte lika bra och i vissa fall orsakade de besökare att studsa snabbare än utan bilder. Du bör försöka inkludera minst en bild som är relevant för innehållet och det ger värde till läsaren.

TechCrunch gör det här med utvalda bilder i sina artiklar där du ofta hittar en presenterat foto ovanför veckan.

WordPress gör det enkelt att lägga till utvalda bilder med funktionen för miniatyrbilden. Du kan ställa in ett tydligt foto för varje post du skriver och tvinga dessa att visas högst upp på sidan. Detta är ett perfekt sätt att ge besökarna en glimt av vad innehållet handlar om, och att öka CTR för relaterade post widgets som också innehåller miniatyren efter inlägget.

Kontrastande sidelement

Om du behöver uppmärksamma ett visst område på en sida då asymmetri är din bästa vän. Kontrast driver en hård kile mellan specifika delar av en design eller vissa innehållsgrupper.

Besökare är naturligt ravitate mot kontrast eftersom det är annorlunda. Stora juxtapositioner av färg, storlek eller vitt utrymme drar ögat på grund av det bryter formen av allt annat i layouten.

Mitt favoritexempel för kontrasterande sidelement är kanske Sketchs hemsida. Det finns mycket kontrast hittad mellan de två anrops-knapparna, en för att ladda ner en Sketch-försök och den andra för att köpa en kopia.

Köpknappen använder en fullständig bakgrundsfärg mycket ljusare än andra färger i rubriken. Knapptexten är också ljusare jämfört med knappen för fri provning. Detta leder besökare mot knappen Köp nu enbart från visuella stimuli.

Du märker en liknande teknik på Optin Monsters hemsida. Denna rubrik har bara en knapp märkt Get OptinMonster Now. Det är en ljusgrön knapp på en blå bakgrund utan några andra gröna element i sikte.

Färgen, storleken och formen drar upp din uppmärksamhet på grund av den kontrasterar med allt annat i rubriken. Direkt bredvid knappen är en liten textlänk för en videobild. Det är nog en bra video och det förtjänar uppmärksamhet, men inte lika mycket som testen / registreringen CTA-knappen.

För en blogg kan du ha olika kvalifikationer för användarengagemang. Ett vanligt val är a nyhetsbrev registreringsformulär som exempel på Aeolidia.

Om du rullar ner till botten av innehållet märker du en fancy-shmancy signup box designad bara för nyhetsbrevet. Det sticker ut från resten av sidan med en unik bakgrundsfärg, rolig typografi och en söt King Triton-ikon.

Det bästa sättet att designa med kontrast är att studera exempel och bara experimentera. Se vad som fungerar och vad som inte gör spårningsmått med A / B-testning. Om du letar efter fler exempel kolla här Codrops writeup full av tips och skärmar av levande asymmetriska webbplatser.

Uppmuntra användarinteraktion

Det finns så många sätt att hålla besökare intresserade av en webbplats, men det vanligaste är att få dem att göra saker. Detta gäller både statiska bloggar och dynamiska sociala webbplatser. Det finns inga one-size-passar-alla tricks för detta. Du kan göra vad som helst för att göra användare känna dig förlovad med sidan.

I en statisk plats, du kan lägga till massor av relaterade länkar för att läsa mer, eller inkludera bildspelspel. Du kan också lägg till formulär för användar kommentarer eller ett nyhetsbrev.

När det kommer till dynamiska gränssnitt, Syftet med webbplatsen är oftast att uppmuntra användarengagemang. Den största hindringen är undervisa användare hur webbplatsen fungerar, och hur man ordentligt engagerar sig i gränssnittet.

Kolla in det här inlägget av KissMetrics och prata om användarengagemangstekniker. En av de bästa strategierna jag hittat är att utforma en guidad tur vilket leder besökare genom var och en av de primära funktionerna.

Tänk på hur förvirrande utsikterna till Twitter skulle vara en helt ny användare. Om de inte följer någon och inte har några anhängare, varför skulle de tweet?

De “Följ förslag” rutan under anmälan hjälper nya användare lära känna hur Twitter fungerar. Denna funktion primerar nya användare till börja engagera med plattformen och till experimentera med funktioner som följer, tweets och privata meddelanden.

Bortsett från en guidad tur vill du också gör gränssnittet enkelt. Prime funktioner bör vara 1-2 klick bort från användarens instrumentpanel eller huvudsida. Intuitiva gränssnitt behöver förklaring, och enkelhet fångar uppmärksamhet mycket snabbare.

Genom att förstå alla dessa tekniker har du en enklare tid att bygga gränssnitt som lösa användarnas problem, och uppmuntra nya användare att gå med. Om du letar efter mer UX design engagemang tips kolla in dessa relaterade inlägg:

• En användare ombordstigande taktik för att öka engagemanget (Thinkapps.com)
• En lektion i gradvis förlovning (Uxbooth.com)
• Anta inte att nya användare vill lära sig hur man använder din produkt (Uxdesign.cc)