Progettare interfacce mirate per un migliore coinvolgimento degli utenti

Coinvolgimento dell'utente è una metrica difficile che può essere raggiunta in modi diversi per diversi progetti. La maggior parte dei designer pensa al interfaccia quando parlano di interattività, ma contenuto della pagina può anche incoraggiare l'interazione dell'utente. Per un migliore coinvolgimento degli utenti, è importante scrivi contenuti accattivanti, e presentare quel contenuto in un design accattivante.

È molto più facile a dirsi che a farsi, ma se impari alcune nozioni di base, non avrai problemi a crearne una interfaccia utente focalizzata con ottimi contenuti per i tuoi progetti.

In questo post, ti mostrerò come aumentare interazione dell'utente e coinvolgimento dei contenuti su interfacce basate sul web. Questi sono i due modi più comuni per coinvolgere un visitatore e, se possibile ottimizzare l'esperienza non avrai problemi ad aumentare la redditività del tempo sulla metrica delle pagine.

Cattura novità

Il concetto di novità definisce un evento o una cosa che è generalmente nuova, spesso molto nuova e unica in base al contesto. Nuovi eventi attira la nostra attenzione perché loro spicca. Questo vale anche per il design dell'interfaccia con la novità che rappresenta gli elementi che sembrano saltare fuori dalla pagina.

Recentemente ho trovato un ottimo post che parla dell'importanza della novità quando si parla di coinvolgimento. Gli utenti sembrano gravitano verso nuove esperienze, interfacce e elementi dell'interfaccia utente perché sono diversi. L'unico fatto di essere progettato diversamente spesso attira l'attenzione.

Un esempio comune è il pulsante di invito all'azione presente nella maggior parte delle pagine di destinazione. Puoi anche costruire novità con foto di sfondo, illustrazioni o schermate delle app, come nella pagina di destinazione di Uber for Business.

Questa pagina ha un pulsante di chiamata ad azione ma la mia attenzione immediatamente va agli screenshot. Si animano quando vengono caricati per la prima volta, quindi questo combina novità di design con movimento per attirare l'attenzione.

Un'alternativa sarebbe l'uso di GiftRocket icone illustrate come collegamenti approfondire ulteriormente il sito.

Entrambi questi esempi usa la novità a loro vantaggio. Non puoi sempre attirare le persone nel sito, ma vedrai risultati migliori se catturerai la loro attenzione a livello viscerale primo.

Il design è la prima cosa i visitatori vedono e devi catturare la loro attenzione in pochi secondi incoraggiare un ulteriore impegno.

Tipografia Skimmable

Gli studi hanno trovato che la maggior parte degli utenti scansiona una pagina web piuttosto che leggerlo parola per parola. Probabilmente vorrai coinvolgere le persone nella lettura dei tuoi contenuti, ma puoi fare così tanto.

La migliore alternativa è creare contenuto skimmable con titoli, testo in grassetto e immagini che illustrano ciò che stai cercando di dire. Posso almeno pensare tre potenti tecniche di scrittura puoi utilizzare i tuoi contenuti per aumentare la leggibilità:

1. Dividere il contenuto con i sottotitoli chiari
2. Spezza i paragrafi per renderli più piccoli
3. Utilizzare elenchi puntati per condividere i tuoi punti più velocemente

L'obiettivo è quello di mantenere i tuoi lettori spostando la pagina verso il basso con qualsiasi mezzo necessario. Mantenendo contenuti piccoli in pezzi di dimensioni mordenti avrai un tempo molto più facile catturare l'attenzione e guidare le persone più avanti nel sito.

Dai un'occhiata al blog Quick Sprout per un esempio di questo stile di scrittura. Il contenuto è scritto da Neil Patel e spesso scrive contenuti molto lunghi, ma lui rompe i paragrafi in 1-3 frasi ciascuno.

Se hai titoli adeguati, e usare immagini / punti elenco in tutto il contenuto otterrai persone che sfiorano e leggono molto oltre. Assicurati anche di aumentare la quantità di spazio bianco tra i paragrafi. Margini e rivestimenti entrambi svolgono un ruolo importante nella progettazione e nella leggibilità del layout.

Disegna il testo in modo che sia effettivamente divertente da leggere. La copia noiosa non attirerà, ma nemmeno la copia divertente sarà troppo piccola o priva di contrasto.

Immagini che catturano gli occhi

Un recente case study di Backlinko suggerisce che le pagine con almeno un'immagine generalmente rango più alto di pagine senza immagini. Questo è fantastico da una prospettiva SEO.

Ma per quanto riguarda il coinvolgimento degli utenti? Se puoi mantenere quell'unica immagine Sopra la piega o vicino alla cima catturerà anche l'attenzione dei visitatori prima di rimbalzare. Ricorda che i nuovi elementi della pagina tendono ad attrarre.

Quando hai un'immagine (o più immagini) inframmezzata in tutta la pagina, lo farai spezzare la monotonia di blocchi di testo noiosi. Gli utenti possono prenditi una pausa dalla lettura per apprezzare l'immagine o creare una connessione tra l'immagine e il contenuto scritto. Ma come con la maggior parte delle tecniche di progettazione, la qualità è più preziosa della quantità.

Un case study di Moz ha scoperto che le immagini di alta qualità tendono a mantenere i visitatori sulla pagina ancora per molto. D'altra parte, immagini di scarsa qualità non funziona altrettanto bene e in alcuni casi hanno causato visitatori rimbalzo più veloce che senza immagini. Dovresti provare ad includere almeno un'immagine che è pertinente al contenuto e quello fornisce valore al lettore.

TechCrunch fa questo con le immagini presenti nei loro articoli in cui troverai spesso un foto in primo piano above the fold.

WordPress semplifica l'aggiunta di immagini in primo piano con la funzionalità di post-miniatura. Puoi impostare una foto distinta per ogni post che scrivi e forzare la visualizzazione di questi nella parte superiore della pagina. Questo è un modo perfetto per dare un'occhiata ai visitatori di cosa tratta il contenuto, e per aumentare CTR per i post widget correlati che contengono anche la miniatura del post.

Elementi a contrasto di pagina

Se devi attirare l'attenzione su una particolare area di una pagina, allora asimmetria è il tuo migliore amico. Contrasto guida un duro cuneo tra aree specifiche di un progetto o determinati blocchi di contenuti.

Visitatore è naturale Ravitare verso il contrasto perché è diverso. Grandi giustapposizioni di colore, dimensioni o spazi bianchi attirano l'attenzione perché essa rompe gli schemi di tutto il resto nel layout.

Il mio esempio preferito per contrastare gli elementi della pagina è forse la pagina iniziale di Sketch. C'è un sacco di contrasto trovato tra i due pulsanti di invito all'azione, uno per scaricare una versione di prova di Sketch e l'altra per l'acquisto di una copia.

Il pulsante di acquisto utilizza un colore di sfondo completo molto più luminoso rispetto ad altri colori nell'intestazione. Il testo del pulsante è anche più luminoso rispetto al pulsante di prova gratuito. Questo porta i visitatori verso il pulsante Acquista ora esclusivamente da stimoli visivi.

Noterai a tecnica simile sulla home page di Optin Monster. Questa intestazione ha solo un pulsante con l'etichetta Ottieni OptinMonster Now. È un pulsante verde brillante su uno sfondo blu senza altri elementi verdi in vista.

Il colore, le dimensioni e la forma attirano la tua attenzione perché contrasta con tutto il resto nell'intestazione. Direttamente accanto al pulsante c'è un piccolo link testuale per un'anteprima video. Probabilmente è un bel video e merita attenzione, ma non tanto quanto il pulsante CTA di prova / registrazione.

Per un blog, potresti avere qualifiche diverse per il coinvolgimento degli utenti. Una scelta comune è a modulo di iscrizione alla newsletter come l'esempio su Aeolidia.

Se scorri verso il basso fino al fondo del contenuto, noterai a scatola di registrazione fancy-shmancy progettato solo per il modulo di newsletter. Si distingue dal resto della pagina con un colore di sfondo unico, una tipografia divertente e un'icona di King Triton carina.

Il modo migliore di progettare con contrasto è studiare esempi e solo sperimentare. Guarda cosa funziona e cosa no metriche di tracciamento con test A / B. Se stai cercando altri esempi, dai un'occhiata a questo articolo di Codrops pieno di consigli e schermate di siti web live asimmetrici.

Incoraggiare l'interazione dell'utente

Ci sono tanti modi per mantenere i visitatori interessati a un sito, ma il più comune è farlo falli fare cose. Questo è vero sia per i blog statici che per i siti social dinamici. Non ci sono trucchi adatti a tutti per questo. Puoi fare qualsiasi cosa funzioni per rendere gli utenti sentirsi coinvolti con la pagina.

In un sito statico, potresti aggiungere molto Link correlati per leggere di più, o includere slideshow di immagini. Puoi anche aggiungi moduli per i commenti degli utenti o una newsletter.

Quando si tratta di interfacce dinamiche, lo scopo del sito è solitamente quello di incoraggiare il coinvolgimento degli utenti. Il più grande ostacolo è insegnando agli utenti come funziona il sito e come interagire correttamente con l'interfaccia.

Dai un'occhiata a questo post di KissMetrics che parla delle tecniche di coinvolgimento degli utenti. Una delle migliori strategie che ho trovato è quella di progettare una visita guidata che conduce i visitatori attraverso ciascuna delle caratteristiche principali.

Pensa a quanto sarebbe confusa la prospettiva di Twitter per un nuovo utente. Se non seguono nessuno e non hanno seguaci, perché dovrebbero twittare?

Il “Segui i suggerimenti” box durante l'iscrizione aiuta i nuovi utenti conoscere come funziona Twitter. Questa funzione attira i nuovi utenti iniziare ad impegnarsi con la piattaforma, e a sperimentare con le caratteristiche come segue, tweet e messaggi privati.

A parte un tour guidato, lo vorrai anche tu rendere l'interfaccia semplice. Le caratteristiche principali dovrebbero essere 1-2 clic di distanza dalla dashboard o dalla pagina principale dell'utente. Interfacce intuitive bisogno di una spiegazione, e semplicità cattura l'attenzione molto più veloce.

Comprendendo tutte queste tecniche, avrai più tempo a creare interfacce risolvere i problemi degli utenti, e incoraggiare nuovi utenti a partecipare. Se stai cercando di più Suggerimenti per il design di UX dai un'occhiata a questi post correlati:

• Una tattica di onboarding per aumentare il coinvolgimento (Thinkapps.com)
• Una lezione di coinvolgimento graduale (Uxbooth.com)
• Non dare per scontato che i nuovi utenti vogliano imparare come usare il tuo prodotto (Uxdesign.cc)