Gefocuste interfaces ontwerpen voor een betere gebruikersbetrokkenheid

Gebruikersbetrokkenheid is een lastige statistiek die op verschillende manieren kan worden bereikt voor verschillende projecten. De meeste ontwerpers denken aan de interface wanneer ze praten over interactiviteit, maar pagina inhoud kan ook de gebruikersinteractie stimuleren. Voor een betere betrokkenheid van gebruikers is het belangrijk om schrijf boeiende inhoud, en presenteer die inhoud in een aanstekelijk ontwerp.

Het is veel gemakkelijker gezegd dan gedaan, maar als je enkele basisprincipes leert, heb je geen moeite met het maken van een gerichte gebruikersinterface met geweldige inhoud voor uw projecten.

In dit bericht laat ik zien hoe je kunt verhogen gebruikersinteractie en betrokkenheid van content op webgebaseerde interfaces. Dit zijn de twee meest voorkomende manieren om een ​​bezoeker te betrekken, en als je kunt optimaliseer de ervaring u zult geen probleem hebben om die lucratieve tijd op de pagina metriek te verhogen.

Capture Novelty

Het concept van nieuwigheid definieert een gebeurtenis of ding dat over het algemeen nieuw is, vaak heel nieuw en uniek op basis van context. Nieuwe evenementen onze aandacht trekken omdat zij uitblinken. Dit geldt ook voor interface-ontwerp met nieuwheid die elementen vertegenwoordigt die lijken spring van de pagina af.

Ik heb onlangs een goede post gevonden over het belang van nieuwheid als het gaat om betrokkenheid. Gebruikers lijken te aangetrokken worden tot nieuwe ervaringen, interfaces en UI-elementen omdat ze anders zijn. Het enige feit dat het anders is ontworpen, trekt vaak de aandacht.

Een veelvoorkomend voorbeeld is de call-to-action-knop op de meeste bestemmingspagina's. Je kunt ook nieuwigheid bouwen met achtergrondfoto's, illustraties of schermafbeeldingen van apps, zoals op de landingspagina van Uber voor Bedrijven.

Deze pagina heeft een call-to-action-knop maar mijn aandacht onmiddellijk gaat naar de screenshots. Ze bewegen wanneer ze voor het eerst worden geladen, dus dit combineert nieuwheid van design met beweging om de aandacht te trekken.

Een alternatief zou GiftRocket kunnen zijn geïllustreerde pictogrammen als links om je verder in de site te verdiepen.

Beide voorbeelden gebruik nieuwigheid in hun voordeel. Je kunt mensen niet altijd verder naar de site trekken, maar je zult betere resultaten zien als je hun aandacht trekt op een visceraal niveau eerste.

Het ontwerp is het eerste ding bezoekers zien en je moet hun aandacht trekken binnen seconden om verder engagement aan te moedigen.

Skimmable Typography

Studies hebben geconstateerd dat de meeste gebruikers scan een webpagina in plaats van het woord voor woord te lezen. Je zult waarschijnlijk mensen willen leren jouw inhoud te lezen, maar je kunt alleen zoveel doen.

Het beste alternatief is om te creëren skimmable inhoud met koppen, vetgedrukte tekst en afbeeldingen die illustreren wat u probeert te zeggen. Ik kan het tenminste bedenken drie krachtige schrijftechnieken u kunt in uw inhoud aan gebruiken verhoging van de leesbaarheid:

1. Verdeel inhoud met duidelijke ondertitels
2. Verdeel alinea's om ze kleiner te maken
3. Gebruik lijsten met opsommingstekens om uw punten sneller te delen

Het doel is om je lezers te houden naar beneden bewegen op welke manier dan ook. Door de inhoud klein te houden in hapklare brokken u zult een veel gemakkelijkere tijd hebben om de aandacht te trekken en mensen verder de site in te rijden.

Bekijk de Quick Sprout-blog voor een voorbeeld van deze schrijfstijl. De inhoud is geschreven door Neil Patel en hij schrijft vaak zeer lange inhoud, maar hij breekt de paragrafen in 1-3 zinnen elk.

Als je hebt goede krantenkoppen, en gebruiken afbeeldingen / opsommingstekens door de inhoud zul je mensen veel laten skimmen en lezen. Zorg er ook voor verhoog de hoeveelheid witruimte tussen alinea's. Marges en paddings beide spelen een grote rol bij het ontwerp en de leesbaarheid van lay-outs.

Ontwerp tekst, zodat het eigenlijk is leuk om te lezen. Een saaie kopie zal niet verleiden, maar ook geen leuke kopie die te klein is of geen contrast heeft.

Opvallende afbeeldingen

Een recente case study van Backlinko suggereert die pagina's met ten minste één afbeelding over het algemeen rang hoger dan pagina's zonder afbeeldingen. Dit is geweldig vanuit een SEO-perspectief.

Maar hoe zit het met de betrokkenheid van gebruikers? Als je die ene afbeelding kunt houden boven de vouw of dicht bij de top het zal ook de aandacht trekken van bezoekers voordat ze stuiteren. Vergeet niet dat nieuwe pagina-elementen de neiging hebben om aan te trekken.

Wanneer je een afbeelding (of veel afbeeldingen) hebt verspreid op de hele pagina, zul je dat ook doen verbreek de monotonie van saaie tekstblokken. Gebruikers kunnen Neem even pauze van lezen om de afbeelding te waarderen of om een ​​verband te leggen tussen de afbeelding en de geschreven inhoud. Maar zoals bij de meeste ontwerptechnieken, is kwaliteit waardevoller dan kwantiteit.

Uit een Moz case study bleek dat afbeeldingen van hoge kwaliteit de neiging hebben bezoekers houden op de pagina voor veel langer. Aan de andere kant afbeeldingen van slechte kwaliteit werk niet zo goed en in sommige gevallen veroorzaakten ze bezoekers stuiter sneller dan zonder afbeeldingen. U zou moeten proberen om minstens één afbeelding op te nemen relevant voor de inhoud en dat geeft waarde aan de lezer.

TechCrunch doet dit met uitgelichte afbeeldingen in hun artikelen waar je vaak een aanbevolen foto boven de vouw.

WordPress maakt toevoeging van aanbevolen afbeeldingen eenvoudig met de functie voor miniatuurweergave. U kunt een afzonderlijke foto instellen voor elke post die u schrijft en deze forceren om bovenaan de pagina te verschijnen. Dit is een perfecte manier om bezoekers een glimp van te geven waar het allemaal over gaat, en om te verhogen CTR voor verwante berichtwidgets die ook de postminiatuur bevatten.

Contrasterende pagina-elementen

Als je dan op een bepaald gebied op één pagina aandacht moet vestigen asymmetrie is je beste vriend. Contrast drijft een harde wig tussen specifieke delen van een ontwerp of bepaalde blokken met inhoud.

Bezoeker is natuurlijk ravitate naar contrast omdat het anders is. Grote juxtapositie van kleur, grootte of witruimte trekt het oog, omdat het breekt de vorm van al het andere in de lay-out.

Mijn favoriete voorbeeld voor het contrasteren van pagina-elementen is misschien de startpagina van Sketch. Er is veel contrast gevonden tussen de twee call-to-action-knoppen, een voor het downloaden van een Sketch-proef en de andere voor het kopen van een kopie.

De aankoopknop gebruikt een volledige achtergrondkleur veel helderder dan andere kleuren in de header. De knoptekst is ook helderder vergeleken met de gratis proefknop. Dit leidt bezoekers naar de knop Nu kopen uitsluitend van visuele stimuli.

Je zult een a merken vergelijkbare techniek op de startpagina van Optin Monster. Deze header heeft slechts één knop met de naam Get OptinMonster Now. Het is een felgroene knop op een blauwe achtergrond zonder andere groene elementen in zicht.

De kleur, grootte en vorm trekken allemaal uw aandacht omdat het contrasteert met al het andere in de kop. Direct naast de knop is een kleine tekstlink voor een videovoorbeeld. Het is waarschijnlijk een geweldige video en het verdient aandacht, maar niet zo veel als de CTA-knop voor het testen / aanmelden.

Voor een blog kun je verschillende kwalificaties hebben voor gebruikersbetrokkenheid. Een veel voorkomende keuze is een nieuwsbrief aanmeldingsformulier zoals het voorbeeld op Aeolidia.

Als u naar de onderkant van de inhoud scrolt, ziet u een fancy-shmancy signup box speciaal ontworpen voor het nieuwsbriefformulier. Het onderscheidt zich van de rest van de pagina met een unieke achtergrondkleur, leuke typografie en een schattig King Triton-pictogram.

De beste manier om met contrast te ontwerpen, is door voorbeelden te bestuderen en gewoon te experimenteren. Zie wat werkt en wat niet door statistieken bijhouden met A / B-tests. Als u op zoek bent naar meer voorbeelden, bekijk dan deze Codrops-write-up vol met tips en schermen van live asymmetrische websites.

Stimuleer gebruikersinteractie

Er zijn zoveel manieren om bezoekers geïnteresseerd te houden in een site, maar de meest voorkomende is om laat ze dingen doen. Dit geldt voor zowel statische blogs als dynamische sociale sites. Hier zijn geen one-size-fits-all-trucs voor. U kunt doen wat werkt om gebruikers te maken voel me betrokken bij de pagina.

In een statische site, misschien voeg je er veel aan toe Gerelateerde Links voor meer lezen, of opnemen diavoorstellingen met afbeeldingen. Je kan ook formulieren toevoegen voor gebruikerscommentaren of een e-mailnieuwsbrief.

Als het aankomt op dynamische interfaces, het doel van de site is meestal om gebruikersbetrokkenheid te stimuleren. De grootste hindernis is gebruikers onderwijzen hoe de site werkt en hoe deze op de juiste manier met de interface te verbinden.

Bekijk dit bericht door KissMetrics over gebruikersbetrokkenheidstechnieken. Een van de beste strategieën die ik heb gevonden is om ontwerp een rondleiding waar bezoekers doorheen komen elk van de primaire functies.

Bedenk hoe verwarrend het vooruitzicht van Twitter zou zijn voor een geheel nieuwe gebruiker. Als ze niemand volgen en geen volgers hebben, waarom tweten ze dan?

De “Volg suggesties” box tijdens het aanmelden helpt nieuwe gebruikers maak kennis met hoe Twitter werkt. Deze functie priemt nieuwe gebruikers aan begin boeiend te zijn met het platform en naar experimenteren met functies zoals volgende, tweets en privéberichten.

Afgezien van een rondleiding die je ook wilt maak de interface eenvoudig. Topkenmerken moeten zijn 1-2 klikken weg van het dashboard of de hoofdpagina van de gebruiker. Intuïtieve interfaces uitleg nodig, en eenvoud vangt de aandacht veel sneller.

Door al deze technieken te begrijpen, heb je een gemakkelijkere tijd om interfaces te bouwen problemen van gebruikers oplossen, en moedig nieuwe gebruikers aan om mee te doen. Als u op zoek bent naar meer UX-ontwerpovereenstemmingstips bekijk deze gerelateerde berichten:

• Een gebruiker die onboarding-tactieken gebruikt om betrokkenheid te vergroten (Thinkapps.com)
• Een les in geleidelijk engagement (Uxbooth.com)
• Ga er niet van uit dat nieuwe gebruikers willen leren hoe ze uw product moeten gebruiken (Uxdesign.cc)