Le pagine dei tour sono una delle componenti più importanti per app e / o servizi di pubblicità di siti Web. La pagina del tour è spesso dove gli utenti interessati o prenderanno la decisione ferma di iscriversi o passare a qualcos'altro.
Inutile dire che c'è un sacco di pressione come designer per fare bene! Non temere, tuttavia, molti designer di talento ti hanno preceduto e possiamo imparare molto guardando i loro esempi. Ci tufferemo nelle pagine dei tour di giganti come Mozilla, 37Signals e Mint.com e vediamo quali trucchi comuni usano tutti per vincere le conversioni.
È più difficile di quanto sembri
L'hai fatto, hai evitato quella pagina di sempre sfuggente che è stata cancellata dall'utente. Sono interessati al tuo sito e vogliono saperne di più. Pensi di essere in chiaro, ma una nuova sfida ti aspetta. Ora hai una possibilità per convincerli che puoi mantenere le promesse della home page, che la tua app fa quello che hai detto e più in un modo migliore di quello che fanno gli altri.
Stai progettando una pagina del tour. È un compito apparentemente semplice. Farai bene a non attraversarlo senza entusiasmo, ma invece spendere un po 'di tempo rendendolo la pagina migliore che puoi. È qui che i potenziali utenti inizieranno davvero a formulare giudizi sul tuo servizio e non vorrai rovinare quella prima impressione importante. Diamo un'occhiata ad alcuni esempi dal vivo di designer che ti hanno preceduto per vedere cosa possiamo imparare.
Mint.com
Mint è uno dei miei servizi preferiti sul web. Non solo è immensamente utile per tracciare ogni centesimo speso, ma è anche molto attraente dal punto di vista del design. Dal momento che i loro designer sono così talentuosi, ho pensato che probabilmente potrebbero insegnarci una cosa o due sull'argomento di oggi. Ecco uno snap della pagina del tour:
Organizzazione del contenuto
La prima cosa che noto su questa pagina è che ha un tonnellata di contenuto. Non vuoi sovraccaricare i tuoi visitatori di informazioni se hai un servizio abbastanza diretto, ma qualcosa di finanziario come Mint genera un sacco di bandiere rosse con persone che sono giustamente caute nel fornire un accesso al loro conto bancario sul sito. Alla luce di questo, Mint è molto trasparente su ogni aspetto del servizio prima di iscriversi.
Questo è un concetto importante. Se il tuo servizio ha motivi che inducono i visitatori a sospendere quando pensano di iscriversi, la pagina del tour è la tua occasione per affrontare questi problemi in dettaglio aprendo, onesto e rassicurando il tuo prodotto.
Un'altra grande cosa che Mint ha ragione è l'organizzazione del contenuto in pezzi piccoli, digeribili e ben organizzati. Piuttosto che lanciare tutto in una pagina lunga un miglio, hanno implementato una sorta di commutatore di contenuti AJAX che aggiorna la colonna destra mentre scegli un argomento.
Forte presentazione dei contenuti
Un'altra cosa che zecca davvero le unghie è la presentazione del loro contenuto. Prendi nota di ciò perché molte persone sbagliano: titoli brevi, semplici e diretti accompagnati da schermate chiare e accattivanti e un testo di supporto breve ma descrittivo. Ecco come appare in azione:
Notare la copia qui, è breve e al punto mentre ti dice quello che devi sapere. Controlla anche come lo screenshot si concentra sulla parte importante, questo trucco lente è molto comune nel web design in questo momento.
Anche la menta ha un altro asso nella manica. Quando gli screenshot potrebbero non essere sufficienti, aggiungono alcuni spunti visivi extra. Nello screenshot qui sotto, il titolo di un budget è rafforzato dalla lettura immediata di un salvadanaio con una cintura attorno a esso per indicare i budget:
Lo screenshot avrebbe potuto farlo da solo, ma i grafici sono un po 'vaghi e quindi non erano una lettura istantanea, il maiale potrebbe essere scadente e prevedibile, ma aiuta a spingere questo disegno esattamente dove deve essere.
Campo base
Lasciamo indietro Mint e guardiamo un'altra pagina del tour ben progettata. Le persone di 37signals sono famose per il loro stile di design semplice e pulito che serve solo ciò di cui hai bisogno e niente di più. Ecco una panoramica della pagina del tour per la loro app Basecamp.
Diverso, ma lo stesso
Notare due aspetti importanti di questa pagina alla luce dell'esempio precedente. Innanzitutto, lo stile del design è molto diverso da quello di Mint. Tuttavia, le pagine sono in realtà incredibilmente simili. Nota i brevi frammenti di contenuti organizzati da uno switcher di contenuti sulla sinistra, schermate, titoli forti, spunti visivi extra per aiutare gli screenshot, anche lo stile di layout avanti e indietro è quasi esattamente quello che abbiamo visto su Mint.
Questa è una cosa molto importante da imparare come designer: i modelli di design esistono indipendentemente dallo stile del design. La menta ha un aspetto molto lucido e rifinito con un sacco di lucentezza e riflessione mentre Basecamp è molto piatto nella sua semplicità simile a Google. Questo è semplicemente il rivestimento di caramelle, tuttavia, sotto questo è il quadro critico di un layout forte, che rende il contenuto più facile da recepire.
Scavando più a fondo
Una volta verificata la panoramica delle funzioni di Basecamp, hai la possibilità di vederle in azione facendo clic sui piccoli collegamenti video sparsi nella pagina. Sono uno schifo di un buon video prodotto e penso che questi aiuti davvero a mantenere i tuoi contenuti brevi e al punto mentre offri ancora l'aspetto approfondito di cui alcuni visitatori hanno bisogno.
Tieni presente che Basecamp è orgoglioso di quanto sia semplice e spoglio il suo set di funzionalità, quindi se Basecamp non è troppo di base per i video dimostrativi del prodotto, nessuno dei due è il tuo sito. Le app di screencasting video sono molto economiche e facili da usare, quindi non importa quale sia il tuo budget, non è difficile organizzare tour video dall'aspetto professionale.
Mozilla Rethinks the Tour Page
Il formato di base che abbiamo visto per le ultime due pagine del tour è abbastanza comune.Puoi vedere le tattiche quasi identiche utilizzate su dozzine di siti di app web. Controlla le pagine del tour per Checkout App e Campaign Monitor e troverai lo stesso commutatore di contenuti allineato a sinistra usato insieme a brevi elenchi di funzionalità insieme a screenshot e icone.
C'è una ragione per cui questo formato è così diffuso: funziona. Ognuna di queste pagine è in grado di mantenere la propria identità unica mentre condivide tecniche provate e vere con i suoi fratelli. Tuttavia, questo non significa necessariamente che le regole della pagina del tour sono definite in pietra o che siamo atterrati sulla migliore soluzione possibile per tutti i siti.
Un esempio di un'azienda che spesso decide di pensare fuori dagli schemi è Mozilla. Il loro talentuoso team di designer ha deciso di abbandonare il formato della pagina del tour più comune e di tracciare le proprie tracce. Il risultato è una panoramica divertente, interattiva e incredibilmente semplice del browser:
Qui vediamo uno screenshot del browser con una serie di indicatori posizionati dappertutto. Le istruzioni sono semplici e possono essere lette in un secondo:? Passa sopra i marcatori qui sotto per le informazioni sulle caratteristiche. Seguendo questo consiglio ti diamo un'occhiata più da vicino alle caratteristiche importanti.
Mi piace come questo metodo sia diretto, spiega le caratteristiche dell'app non attraverso icone generiche astratte e paragrafi gonfiati ma con un semplice screenshot che indica tutto ciò che devi sapere.
Un pasticcio organizzato
Questo metodo di marcatura di uno screenshot crea un design abbastanza organico. Piuttosto che un flusso prevedibile e logico, i marcatori sono sparsi dappertutto. C'è un trucco di design molto sottile che ti aiuta a vedere l'ordine nel caos, riesci a vederlo?
Quel piccolo percorso punteggiato è uno di quei piccoli tocchi di design che possono davvero tirare insieme una pagina. Senza di esso, c'è un pasticcio di collegamenti, con esso, c'è una chiara progressione da seguire. Certo, non devi seguirlo perfettamente e scommetterei che pochi utenti lo facciano, tuttavia, è la semplice presenza che conferisce alla pagina un leggero ma importante incremento dell'usabilità mentre porta in una parvenza di ordine.
Mostra il processo
Il nostro ultimo trucco di design per la pagina del tour che dovresti sapere proviene da Big Cartel. Ecco una foto ritagliata della loro pagina del tour:
C'è qualcosa di super semplice ma incredibilmente efficace nella parte superiore di questa pagina, un processo in tre fasi. A volte una pagina del tour deve essere più di una semplice vetrina di funzionalità. Ad esempio, quando affermi che il tuo servizio semplifica qualcosa di complicato, come la creazione di un negozio online, è fondamentale che tu illustri come funziona in qualche modo.
Tre è un numero magico, quindi quando possibile, cerca di suddividere i processi in tre semplici e semplici passaggi che chiunque può cogliere. Si tratta di far sentire l'utente autorizzato, ha bisogno di guardare questo e dire "Posso farlo!", Specialmente se hanno guardato altrove e hanno trovato solo soluzioni scoraggianti complicate.
Conclusione
Gli esempi sopra ognuno hanno le loro lezioni uniche per insegnarci e insieme dipingono una foto di alcune pratiche di progettazione di pagine tour molto comuni che puoi implementare nei tuoi prossimi progetti.
Mentre ti imbarchi nella tua avventura con la pagina del tour, ricorda che il web ti offre una notevole libertà di sperimentare per vedere cosa funziona meglio. Prova a inventare alcuni modelli diversi e poi esegui alcuni test A / B per vedere quali utenti rispondono al meglio.
Se hai recentemente progettato una pagina del tour, lascia un commento con un link qui sotto. Quali tecniche hai impiegato per garantire il successo? Hai imparato qualcosa sperimentando layout e design diversi?