Udformning af fokuserede grænseflader til bedre brugerinddragelse

Bruger engagement er en vanskelig metrik, der kan opnås på forskellige måder til forskellige projekter. De fleste designere tænker på grænseflade når de taler om interaktivitet, men sideindhold kan også tilskynde brugerens interaktion. For bedre brugerinddragelse er det vigtigt at skriv engagerende indhold, og præsentér det indhold i et fængende design.

Det er meget lettere sagt end gjort, men hvis du lærer nogle grundlæggende ting, har du ikke noget problem at lave en fokuseret brugergrænseflade med stort indhold til dine projekter.

I dette indlæg vil jeg vise dig, hvordan du kan øge brugerinteraktion og indholdsindsats på web-baserede grænseflader. Det er de to mest almindelige måder at engagere en besøgende på, og hvis du kan optimere oplevelsen Du har ikke noget problem at øge den lukrative tid på side metrisk.

Capture Novelty

Konceptet af nyhed definerer en begivenhed eller ting, der er generelt nyt, ofte meget nyt og unikt baseret på kontekst. Nye begivenheder fange vores opmærksomhed fordi de skille sig ud. Dette gælder også interface design med nyhed repræsenterer elementer, der synes at spring fra siden.

Jeg har for nylig fundet et godt indlæg, der diskuterer vigtigheden af ​​nyhed når det kommer til engagement. Brugerne synes at gravitate mod nye erfaringer, grænseflader og UI elementer fordi de er forskellige. Den eneste kendsgerning at være designet forskelligt ofte gør opmærksom.

Et almindeligt eksempel er knappen Call to Action, der findes på de fleste destinationssider. Du kan også bygge nyhed med baggrundsbilleder, illustrationer eller app screenshots, som f.eks. på landingssiden for Uber for Business.

Denne side har en opfordring til handlingsknap men min opmærksomhed med det samme går til skærmbillederne. De animerer, når de først læsses, så dette kombinerer nyhed af design med bevægelse at gribe opmærksomhed.

Et alternativ ville være GiftRocket ved hjælp af illustreret ikoner som links at dykke længere ind på stedet.

Begge disse eksempler brug nyhed til deres fordel. Du kan ikke altid trække folk længere ind på stedet, men du får bedre resultater, hvis du fanger deres opmærksomhed på et visceralt niveau først.

Designet er den første ting Besøgende ser, og du skal fange deres opmærksomhed inden for få sekunder at tilskynde til yderligere engagement.

Skumbar Typografi

Undersøgelser har fundet ud af, at de fleste brugere scan en webside snarere end at læse det ord for ord. Du vil nok gerne trække folk til at læse dit indhold, men du kan kun gøre så meget.

Det bedste alternativ er at skabe skumbart indhold med overskrifter, fed skrift og billeder, der illustrerer det, du forsøger at sige. Jeg kan i det mindste tænke på det tre kraftige skrive teknikker du kan ansætte i dit indhold til øge læsbarheden:

1. Opdel indhold med klare undertekster
2. Opdele afsnit for at gøre dem mindre
3. Brug punktlister at dele dine point hurtigere

Målet er at holde dine læsere flytter ned på siden uanset hvad der er nødvendigt. Ved at holde indholdet lille i bid-størrelse bidder du får en meget lettere tid til at fange opmærksomhed og køre folk længere ind på webstedet.

Tjek Quick Sprout bloggen for et eksempel på denne skrivestil. Indholdet er skrevet af Neil Patel og han skriver ofte meget langformet indhold, men han bryder ned afsnitene ind i 1-3 sætninger hver.

Hvis du har rigtige overskrifter, og brug billeder / punktpunkter I hele indholdet får du folk til at skumme og læse meget længere. Vær også sikker på at øge mængden af ​​hvide rum mellem afsnit. Margener og paddings begge spiller en stor rolle i layout design og læsbarhed.

Design tekst, så det faktisk er sjovt at læse. Boring kopi vil ikke lokke, men heller ikke sjov kopi, der er for lille eller mangler kontrast.

Eye-Catching Billeder

En nylig casestudie fra Backlinko tyder på, at siderne med mindst et billede generelt rang højere end sider uden billeder. Dette er fantastisk ud fra et SEO-perspektiv.

Men hvad med brugerengagement? Hvis du kan beholde det ene billede over folden eller tæt på toppen det vil også fange opmærksomhed fra besøgende, før de hopper. Husk at nye sideelementer har tendens til at tiltrække.

Når du har et billede (eller mange billeder) spredt over hele siden, vil du bryde op monotonyen af kedelige tekstblokke. Brugere kan tag en pause fra læsning at sætte pris på billedet eller skabe forbindelse mellem billedet og det skriftlige indhold. Men som med de fleste designteknikker er kvaliteten mere værdifuld end mængden.

En Moz-casestudie fandt ud af, at billeder af høj kvalitet har tendens til holde besøgende på siden i meget længere tid. På den anden side er billeder af dårlig kvalitet fungerer ikke så godt og i nogle tilfælde forårsagede de besøgende at hoppe hurtigere end uden billeder. Du bør forsøge at inkludere mindst ét ​​billede, der er relevant for indholdet og det giver værdi til læseren.

TechCrunch gør dette med fremhævede billeder i deres artikler, hvor du ofte finder en featured billede over folden.

WordPress gør tilføjelse af fremhævede billeder nemt med post-miniaturefunktionen. Du kan indstille et særskilt billede for hvert indlæg, du skriver, og tvinge disse til at vises øverst på siden. Dette er en perfekt måde at give besøgende et glimt af hvad indholdet handler om, og at øge CTR for relaterede post widgets, der også indeholder post thumbnail.

Kontrasterende sideelementer

Hvis du skal være opmærksom på et bestemt område på en side så asymmetri er din bedste ven. Kontrast kører en hård kile mellem bestemte områder af et design eller visse indholdsblokke.

Besøgende er naturligt ravitate mod kontrast fordi det er anderledes. Store sidestillinger af farve, størrelse eller hvide rum trækker øjet på grund af det bryder formen af ​​alt andet i layoutet.

Mit foretrukne eksempel på kontrasterende sideelementer er måske hjemmesiden til Sketch. Der er meget kontrast fundet mellem de to kald-til-handling knapper, en til at downloade et Sketch-forsøg og den anden til at købe en kopi.

Købsknappen bruger en fuld baggrundsfarve meget lysere end andre farver i overskriften. Knappen tekst er også lysere i forhold til gratis prøveknappen. Dette fører besøgende mod knappen Køb nu udelukkende fra visuelle stimuli.

Du vil bemærke en lignende teknik på hjemmesiden til Optin Monster. Denne overskrift har kun en knap mærket Get OptinMonster Now. Det er en lysegrøn knap på en blå baggrund uden andre grønne elementer i syne.

Farven, størrelsen og formen tegner alle dine opmærksomhed på grund af det kontrasterer med alt andet i overskriften. Direkte ved siden af ​​knappen er en lille tekstlink til en video preview. Det er nok en god video, og det fortjener opmærksomhed, men ikke så meget som test / registrering CTA-knappen.

For en blog kan du have forskellige kvalifikationer til brugerengagement. Et fælles valg er a nyhedsbrev tilmeldingsformular som eksemplet på Aeolidia.

Hvis du ruller ned til bunden af ​​indholdet, vil du bemærke en fancy shmancy tilmeldingsboks designet kun til nyhedsbrevet. Det skiller sig ud fra resten af ​​siden med en unik baggrundsfarve, sjov typografi og et sødt King Triton-ikon.

Den bedste måde at designe med kontrast er at studere eksempler og bare eksperimentere. Se hvad der virker, og hvad der ikke går tracking metrics med A / B test. Hvis du leder efter flere eksempler, skal du tjekke denne Codrops writeup fuld af tips og skærme af levende asymmetriske hjemmesider.

Opmuntre brugerinteraktion

Der er så mange måder at holde besøgende interesseret i et websted, men det mest almindelige er at få dem til at lave ting. Dette gælder både statiske blogs og dynamiske sociale websteder. Der er ingen one-size-passer-alle tricks til dette. Du kan gøre hvad der virker for at gøre brugere føler dig forlovet med siden.

I en statisk site, du kan tilføje masser af relaterede links for at læse mere eller inkludere billedfremvisning. Du kan også Tilføj formularer til brugernes kommentarer eller et nyhedsbrev.

Når det kommer til dynamiske grænseflader, Formålet med webstedet er normalt at tilskynde brugerengagement. Den største hindring er undervise brugere hvordan webstedet virker, og hvordan man skal involvere sig korrekt med grænsefladen.

Tjek dette indlæg af KissMetrics, der taler om brugerengagementsteknikker. En af de bedste strategier jeg har fundet er at design en rundvisning som fører besøgende igennem hver af de primære funktioner.

Tænk over, hvordan forvirrende udsigten til Twitter ville være for en helt ny bruger. Hvis de ikke følger nogen og ikke har nogen tilhængere, hvorfor skulle de tweet?

Det “Følg forslag” boks under tilmelding hjælper nye brugere kendskab til, hvordan Twitter fungerer. Denne funktion primer nye brugere til begynde at engagere sig med platformen og til eksperimentere med funktioner som følger, tweets og private beskeder.

Bortset fra en guidet tur vil du også gerne gøre grænsefladen ligefrem. Prime funktioner skal være 1-2 klik væk fra brugerens dashboard eller hovedside. Intuitive grænseflader har brug for forklaring, og enkelhed fanger opmærksomhed meget hurtigere.

Ved at forstå alle disse teknikker har du en nemmere tid at opbygge grænseflader løse brugernes problemer, og opfordre nye brugere til at deltage. Hvis du leder efter mere UX design engagement tips tjek disse relaterede indlæg:

• En bruger ombordtagende taktik for at øge engagementet (Thinkapps.com)
• En lektion i gradvist engagement (Uxbooth.com)
• Antag ikke, at nye brugere vil lære at bruge dit produkt (Uxdesign.cc)