Progettazione di una home page di app Web: esempi, suggerimenti e problemi
Il Web è completamente saturo di app che ti aiutano a connetterti con un social network, creare liste della spesa, gestire progetti di grandi dimensioni, decidere chi farà il tè e ogni altra folle attività che puoi immaginare.
Con tutta questa competizione, come puoi convincere i visitatori che la tua app è un ago proverbiale nel fieno? Oggi vedremo alcuni esempi reali per vedere se possiamo imparare quali strategie imitare e quali evitare.
La home page della tua app è estremamente importante
Hai speso un sacco di tempo, denaro e fatica per creare un'applicazione web. È un'impresa di prim'ordine che sicuramente prenderai come un incendio. C'è solo un problema, devi convincere le persone a provarlo.
Non importa quanto sia buona la tua app Web, devi comunque avere solide tattiche di vendita che alla fine convincono le persone a fare clic sul pulsante "Iscriviti". Anche se il servizio è completamente gratuito e offre moltissime funzionalità, devi davvero lavorare per vincere quelle conversioni.
Non dare per scontato che solo perché un utente è arrivato sulla tua home page sia sinceramente interessato a ciò che hai da offrire e quindi abbia bisogno solo di una leggera spinta per andare oltre. Le probabilità sono che hanno seguito un collegamento solo con una vaga idea di dove sarebbero finiti e si trovano in una fase delicata in cui è probabile che si spostino su un altro sito in pochi secondi se non li tiri dentro.
La home page dell'app Web è uno dei più preziosi strumenti di marketing. Resistete alla tentazione di mettere insieme qualcosa velocemente e fate il vostro meglio. Diamo un'occhiata ad alcuni esempi per vedere cosa possiamo imparare.
Suggerimento: mantieni il design semplice e il messaggio forte
Il nostro primo esempio viene da un nuovo servizio chiamato Kroud. Diamo un'occhiata alla parte del sito above the fold.
C'è molto che mi piace di questa pagina. Innanzitutto, è molto semplice e mirato. Non ti travolge con affermazioni vuote su come il servizio cambierà la tua vita, né ti fa battere le spalle su ciò che il sito è. Non c'è niente di peggio di una pagina che non si definisce bene. Se non riesco a capire cosa fa la tua app in cinque secondi, sto andando avanti.
Kroud in effetti inchioda il compito di collegare un servizio complesso in un messaggio chiaro che funge anche da forte invito all'azione: "Crea una pagina di domande interattive in pochi secondi". Quella linea è una delle prime cose che vedo quando carico la pagina e trasmette immediatamente esattamente ciò che fa il sito.
Il grande pulsante
Un'altra cosa che possiamo imparare da Kroud è che i pulsanti di iscrizione grandi e audaci sono una buona cosa! Ecco il pulsante Kroud a dimensioni reali.
Questo pulsante è enorme e molto chiaro su ciò che accade quando lo premi: "Avvia un Kroud", con il messaggio secondario "È gratis!". Nota come questo pulsante attiri la tua attenzione non solo con le dimensioni, ma anche con il colore. È molto più luminoso dell'altro contenuto che i tuoi occhi sono immediatamente attratti da esso.
Suggerimento: gli screenshot sono un must!
La homepage della tua app web ha due obiettivi principali: educare le persone sul tuo prodotto e convincerle a provarlo. Questi sono gli stessi obiettivi che vedi nel marketing e nella pubblicità di quasi tutte le aziende del pianeta.
Immagina un annuncio di rivista o un sito Web per una nuova Corvette. Come pensi che sarebbe quella pagina? Ci sono un milione di possibili progetti, ma una cosa probabilmente rimarrebbe costante: vedresti l'auto. Le corvette hanno un'eredità di buon design e sanno che il modo migliore per mostrare la loro ultima impresa è mostrarti una fotografia in tutto il suo splendore. Chi potrebbe essere convinto di acquistare un'auto sportiva senza nemmeno vederla? Questo sarebbe ancora più vero se l'auto sportiva non fosse una Corvette ma invece qualcosa di cui nessuno aveva mai sentito parlare.
Funziona come una metafora della home page dell'app Web. Le app Web sono una decina e nessuno ha mai sentito parlare delle tue. A meno che non ti vergogni delle tue scarse capacità di progettazione, le persone vorranno vedere esattamente come sarà il servizio prima di prendere il tempo per iscriversi.
I ragazzi di Freckle lo sanno bene e hanno scelto di iniziare la loro pagina con una serie di cinque schermate.
Anche se molte parti di questi sono coperte, l'immagine nel suo insieme ti dà davvero una buona occhiata di come appare il servizio.
Funzionalità come schermate
La tendenza attuale nel design della home page dell'app Web è quella di mostrare le funzionalità della tua homepage con piccole icone. Questa è un'ottima idea che aumenta davvero il valore estetico della pagina e aiuta a rompere grandi blocchi di copie. Ecco un esempio di fatturazione Ballpark.
Sebbene le icone siano migliori del testo, nel caso in cui tu abbia davvero un'interfaccia solida, in realtà penso che gli screenshot possano essere un elemento visivo molto più forte. Le schermate comunicano direttamente il tuo servizio mentre le icone generiche presentano semplicemente una rappresentazione astratta di ciò che gli utenti possono aspettarsi di vedere. Scopri come Freckle discute le loro caratteristiche.
Vedi come la messaggistica qui è rafforzata da un'immagine di esattamente come apparirà nell'app? Questa è una tendenza che sto vedendo sempre più recentemente e penso che sia una buona tendenza che migliora davvero l'idea dell'icona della precedente generazione di app web.
Come altro esempio, TodayPulse mostra tre delle loro caratteristiche principali in una striscia orizzontale di schermate:
Peeve: nessuna schermata
Potresti pensare che gli screenshot siano piuttosto semplici e che nessuno abbia bisogno di questo promemoria, ma la verità è che ci sono innumerevoli home page di app web che non ti danno il minimo accenno di come appaia l'app.
Anche se queste pagine sono abbastanza attraenti, come Wordfaire di seguito, le probabilità che io provi sono molto meno semplicemente perché non riesco a vedere un'anteprima.
Il vecchio adagio "un'immagine vale più di mille parole" si rivela davvero vero in questa arena. Semplicemente non ho modo di leggere i sette paragrafi di testo sulla home page di Wordfaire. Ne scambierei almeno cinque con uno screenshot senza pensarci due volte.
Suggerimento: consenti agli utenti di giocare con un esempio live
Il concetto di "prova prima di acquistare" esiste sin dagli albori del venditore. È un concetto semplice che persisterà fino a quando ci saranno prodotti. Gli impegni fanno schifo, specialmente quando c'è incertezza. Consentendo a un utente di provare prima l'app Web, l'incertezza viene eliminata.
È estremamente importante tenere presente che il "provare prima di acquistare" si applica anche ai servizi gratuiti! Sembra confuso ma è davvero abbastanza semplice. Anche un servizio gratuito mi fa perdere tempo, una risorsa che trovo piuttosto preziosa e che non commercia per nulla. Iscriversi a un servizio web gratuito sembra ancora un impegno; uno che non voglio fare a meno che non sia davvero sicuro che il prodotto mi piacerà.
Il concetto è semplice, crea un modo in cui gli utenti possono curiosare e calciare le gomme della tua app senza inserire un singolo bit di informazioni. Lo vediamo nell'azione di seguito per Pen.io. Questa è un'altra pagina senza schermate, ma è resa un po 'meglio dall'inclusione di un collegamento a un esempio in modo da poter vedere cosa ottieni dal servizio.
Ancora una volta, è bello che Pen.io lo includa, ma l'esecuzione è più forte su Kroud, dove il collegamento alla pagina di esempio è rafforzato da un'anteprima.
Peeve: tour lunghi
Alcune app web ti porteranno in un'escursione di dieci minuti che spiega il loro servizio in dettaglio. Non fraintendetemi, le informazioni sono buone e se sto pagando per un servizio, lo voglio. Ma un “tour del prodotto” dovrebbe davvero richiedere tanto lavoro?
Se faccio clic su un collegamento che dice "Fai un tour", quello che voglio davvero fare è vedere l'app. Un esempio dal vivo come abbiamo appena discusso in molto più forte di 2.000 parole che spiegano come sarà quando finalmente raggiungerai il punto in cui ti è permesso di provarlo. Alcuni siti creano persino un esempio live "intelligente" modificato che guida l'utente attraverso il processo. Questo è un ottimo modo per consentire agli utenti di provare il tuo servizio assicurandoti davvero che ottengano il punto e vedano ciò che desideri.
Ancora una volta, non è necessariamente male parlare delle tue funzionalità, ma ricorda che è importante consentire agli utenti di saltare e vedere cosa pensano.
Includi un video
Un'altra idea per mostrare la tua app Web in azione è quella di includere un breve video direttamente sulla homepage. Se un'immagine vale più di mille parole, un minuto a 15-30 fotogrammi al secondo non ha prezzo! Un video raggiunge lo stesso obiettivo dell'esempio e degli screenshot, solo che è più dinamico degli screenshot e un'esperienza più strutturata di un campo di prova in formato libero.
La voliera fa un buon lavoro mostrando questo time-lapse del loro editor di immagini creando una complessa manipolazione fotografica.
Una delle mie attuali implementazioni preferite di un video sulla home page di un'app Web è Greplin. Qui viene visualizzato un video quando si carica la pagina, ma se non si avvia il video dopo alcuni secondi, si trasforma in una presentazione di schermate.
Peeve: cartoni animati che non mostrano mai l'app
Per qualche motivo, la cosa interessante da fare in questo momento è mettere insieme uno di questi video come un simpatico cartone animato. Questa è spesso una grande idea, ma il problema che ho è che dopo due minuti di qualche piccola animazione noiosa ho ancora poca o nessuna idea di come sia effettivamente l'app!
I due video seguenti di Minus e Summify ne sono un buon esempio. Certo, alla fine riescono quasi a mostrarti una versione illustrata dell'app, ma solo alla fine e anche allora, è una piccola sbirciata astratta.
Pensieri conclusivi: una ricetta per il successo
Tutti i consigli di questo articolo sono rivolti ai due obiettivi principali per la home page dell'app Web, di cui abbiamo già discusso: educazione e allettamento. Per prima cosa, elimina tutto il disordine dal tuo design e ridimensionalo fino agli elementi più importanti in modo che il visitatore possa concentrarsi sulle informazioni vitali senza distrazioni.
Nel tuo messaggio, fai una dichiarazione in grassetto su cosa fa l'app e a chi serve. Oggi non abbiamo discusso molto su quest'ultimo aspetto, ma c'è una forte argomentazione che suggerisce che vincerai più conversioni identificando chiaramente il tuo pubblico di destinazione. Esempio: "MyCoolWebApp aiuta progettisti e sviluppatori a organizzare le informazioni sul cliente e sul progetto" è meglio di "MyCoolWebApp organizza le informazioni sul cliente e sul progetto". Assicurati inoltre di segnalare eventuali funzionalità importanti e perché i visitatori dovrebbero utilizzare l'app.
Una volta che hai eliminato i tuoi messaggi, è il momento di concentrarti sulla presentazione del tuo prodotto al tuo pubblico. Tre fantastici modi per farlo sono screenshot (diversi se puoi farlo oscillare), account di esempio live e tour video (il tipo che mostra effettivamente il prodotto). L'obiettivo di lei è ridurre la quantità di incertezza che circonda il tuo prodotto. Meno incertezza c'è, meno utenti saranno titubanti a registrarsi.
Tutto questo ovviamente presuppone che tu abbia un prodotto di qualità. Se la tua interfaccia è scadente, allora nascondila al pubblico e segui invece descrizioni noiose e lunghe!
