Utforming av fokuserte grensesnitt for bedre brukerengasjement

Brukerengasjement er en vanskelig metrisk som kan oppnås på forskjellige måter for ulike prosjekter. De fleste designere tenker på grensesnitt når de snakker om interaktivitet, men sideinnhold kan også oppmuntre brukerinteraksjon. For bedre brukerengasjement er det viktig å skriv engasjerende innhold, og presentere innholdet i en fengende design.

Det er mye enklere sagt enn gjort, men hvis du lærer noen grunnleggende, har du ikke noe problem å lage en fokusert brukergrensesnitt med stort innhold for dine prosjekter.

I dette innlegget vil jeg vise deg hvordan du kan øke brukerinteraksjon og innholdsengasjement på nettbaserte grensesnitt. Dette er de to vanligste måtene å engasjere en besøkende på, og hvis du kan optimalisere opplevelsen Du har ikke noe problem å øke den lukrative tiden på siden metrisk.

Capture Novelty

Konseptet av nyhet definerer en hendelse eller ting som er generelt ny, ofte veldig ny og unik basert på kontekst. Nye hendelser få vår oppmerksomhet fordi de skille seg ut. Dette gjelder også for grensesnittdesign med nyhet som representerer elementer som synes å være hopp av siden.

Jeg har nylig funnet et flott innlegg som diskuterer betydningen av nyhet når det gjelder engasjement. Brukerne synes å gravitate mot nye erfaringer, grensesnitt og UI elementer fordi de er forskjellige. Det eneste faktum å være utformet annerledes trekker ofte oppmerksomhet.

Et vanlig eksempel er Call-to-Action-knappen som finnes på de fleste destinasjonssider. Du kan også bygge nyhet med bakgrunnsbilder, illustrasjoner eller appskjermbilder, som for eksempel på Uber for Business destinasjonssiden.

Denne siden har en anrop til handlingsknapp, men min oppmerksomhet med det samme går til skjermbilder. De animerer når de lastes inn, så dette kombinerer nyhet av design med bevegelse å ta tak i oppmerksomheten.

Et alternativ ville være GiftRocket bruker illustrert ikoner som lenker å dykke videre inn på nettstedet.

Begge disse eksemplene bruk nyhet til deres fordel. Du kan ikke alltid trekke folk lenger inn på nettstedet, men du får bedre resultater hvis du får oppmerksomheten på visceralt nivå først.

Designet er den første tingen Besøkende ser, og du må fange oppmerksomheten deres innen sekunder å oppmuntre til videre engasjement.

Skumbar Typografi

Studier har funnet ut at de fleste brukere skann en nettside heller enn å lese det ord for ord. Du vil sikkert trekke folk inn i å lese innholdet ditt, men du kan bare gjøre så mye.

Det beste alternativet er å skape skumbart innhold med overskrifter, fet skrift og bilder som illustrerer hva du prøver å si. Jeg kan tenke på minst tre kraftige skrive teknikker du kan ansette i innholdet ditt til øke lesbarheten:

1. Del innhold med klare undertekster
2. Bryt opp avsnitt å gjøre dem mindre
3. Bruk punktlister å dele poengene dine raskere

Målet er å holde leserne dine flytter nedover siden uansett hva som er nødvendig. Ved å holde innholdet lite i bite-sized biter du vil ha en mye enklere tid å fange oppmerksomhet og drive folk videre inn på nettstedet.

Ta en titt på Quick Sprout-bloggen for et eksempel på denne skrivestilen. Innholdet er skrevet av Neil Patel, og han skriver ofte veldig langformet innhold, men han bryter ned avsnittene inn i 1-3 setninger hver.

Hvis du har riktige overskrifter, og bruk bilder / punktpunkter Gjennom innholdet får du folk til å skumle og lese mye videre. Vær også sikker på at øke mengden av hvitt plass mellom avsnittene. Marginer og paddings begge spiller en stor rolle i layoutdesign og lesbarhet.

Design tekst slik at det faktisk er morsomt å lese. Boring kopi vil ikke lokke, men heller ikke gøy kopi som er for liten eller mangler kontrast.

Øyeoppfangende bilder

En nylig case study av Backlinko foreslår at sider med minst ett bilde som regel rangere høyere enn sider uten bilder. Dette er flott fra et SEO-perspektiv.

Men hva med brukerengasjement? Hvis du kan beholde det ene bildet over brettet eller nær toppen det vil også fange oppmerksomheten til besøkende før de spretter. Husk at nye sideelementer pleier å tiltrekke seg.

Når du har et bilde (eller mange bilder) spredt over hele siden, vil du bryte opp monotonyen av kjedelige tekstblokker. Brukere kan ta en pause fra å lese å sette pris på bildet, eller opprette en forbindelse mellom bildet og det skriftlige innholdet. Men som med de fleste designteknikker er kvalitet mer verdifull enn kvantitet.

En Moz-casestudie fant at bilder av høy kvalitet pleier å være holde besøkende på siden for mye lenger. På den annen side, bilder av dårlig kvalitet ikke fungerer også og i noen tilfeller forårsaket de besøkende hoppe raskere enn uten bilder. Du bør prøve å inkludere minst ett bilde som er relevant for innholdet og det gir verdi til leseren.

TechCrunch gjør dette med kjente bilder i deres artikler hvor du ofte finner en kjennetegnet bilde over brettet.

WordPress gjør det mulig å legge til kjente bilder enkelt med funksjonen etter miniatyrbildet. Du kan angi et tydelig bilde for hvert innlegg du skriver og tvinge disse til å vises øverst på siden. Dette er en perfekt måte å gi besøkende et glimt av hva innholdet handler om, og å øke CTR for relaterte post widgets som også inneholder post miniatyrbildet.

Kontrasterende sideelementer

Hvis du trenger å ta hensyn til et bestemt område på en side da asymmetri er din beste venn. Kontrast driver en hard kilde mellom bestemte områder av et design eller visse blokker av innhold.

Besøkende er naturlig ravitate mot kontrast fordi det er annerledes. Store sammenstillinger av farge, størrelse eller hvite plass trekker øyet fordi det bryter formen av alt annet i oppsettet.

Mitt favoritteksempel for kontrasterende sideelementer er kanskje hjemmesiden til Sketch. Det er mye kontrast funnet mellom de to kall-til-handling-knappene, en for å laste ned en Sketch-prøveversjon, og den andre for å kjøpe en kopi.

Kjøpsknappen bruker en full bakgrunnsfarve mye lysere enn andre farger i toppteksten. Knappteksten er også lysere i forhold til gratis prøveversjonsknappen. Dette fører besøkende mot knappen Kjøp nå utelukkende fra visuelle stimuli.

Du vil legge merke til a lignende teknikk på hjemmesiden til Optin Monster. Denne overskriften har bare en knapp merket Få OptinMonster nå. Det er en lys grønn knapp på en blå bakgrunn uten andre grønne elementer i sikte.

Farge, størrelse og form alle trekke oppmerksomheten din på grunn av det Kontrast med alt annet i overskriften. Rett ved siden av knappen er en liten tekstlenke for en video forhåndsvisning. Det er sannsynligvis en flott video, og det fortjener oppmerksomhet, men ikke så mye som testen / registreringen CTA-knappen.

For en blogg kan du ha forskjellige kvalifikasjoner for brukerengasjement. Et vanlig valg er a nyhetsbrev påmeldingsskjema som eksempelet på Aeolidia.

Hvis du ruller ned til bunnen av innholdet, vil du legge merke til a fancy-shmancy signup boks designet bare for nyhetsbrevet. Det skiller seg ut fra resten av siden med en unik bakgrunnsfarge, morsom typografi og et søtt King Triton-ikon.

Den beste måten å designe med kontrast er å studere eksempler og bare eksperimentere. Se hva som fungerer og hva som ikke skjer sporing av beregninger med A / B-testing. Hvis du leter etter flere eksempler, sjekk ut denne Codrops writeup full av tips og skjermbilder av levende asymmetriske nettsteder.

Oppmuntre brukerinteraksjon

Det er så mange måter å holde besøkende interessert i et nettsted, men det vanligste er å få dem til å gjøre ting. Dette gjelder både statiske blogger og dynamiske sosiale nettsteder. Det finnes ikke noen størrelse-passer-alle triks for dette. Du kan gjøre hva som fungerer for å gjøre brukere føl deg forlovet med siden.

I en statisk område, du kan legge til mye av Relaterte linker for å lese mer, eller inkludere bildefremvisning. Du kan også legg til skjemaer for brukerkommentarer eller et nyhetsbrev.

Når det gjelder dynamiske grensesnitt, Formålet med nettstedet er vanligvis å oppmuntre brukerengasjement. Den største hindringen er undervise brukere hvordan nettstedet fungerer, og hvordan du skal samarbeide med grensesnittet.

Sjekk ut dette innlegget av KissMetrics og snakk om brukerengasjementsteknikker. En av de beste strategiene jeg har funnet er å utform en guidet tur som fører besøkende gjennom hver av de viktigste funksjonene.

Tenk på hvordan forvirrende utsiktene til Twitter vil være til en helt ny bruker. Hvis de ikke følger noen og ikke har noen tilhengere, hvorfor ville de tweet?

De “Følg forslagene” boks under påmelding hjelper nye brukere Bli kjent med hvordan Twitter fungerer. Denne funksjonen primer nye brukere til begynn å engasjere seg med plattformen, og til eksperimentere med funksjoner som følger, tweets og private meldinger.

Bortsett fra en guidet tur vil du også gjør grensesnittet rett frem. Prime funksjoner bør være 1-2 klikk unna fra brukerens dashbord eller hovedside. Intuitive grensesnitt trenger forklaring, og enkelhet fanger oppmerksomhet mye raskere.

Ved å forstå alle disse teknikkene, har du en enklere tid å bygge grensesnitt som løse brukerens problemer, og oppfordre nye brukere til å bli med. Hvis du leter etter mer UX design engasjement tips sjekk ut disse relaterte innleggene:

• En bruker ombordtakende taktikk for å øke engasjementet (Thinkapps.com)
• En leksjon i gradvis forlovelse (Uxbooth.com)
• Anta ikke at nye brukere vil lære å bruke produktet (Uxdesign.cc)