Progettazione di una homepage 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 realizzerà il tè e ogni altro pazzo compito che puoi immaginare.

Con tutta questa competizione, come puoi convincere i visitatori che la tua app è un proverbiale ago nel fieno? Oggi vedremo alcuni esempi reali per vedere se possiamo imparare quali strategie imitare e quali evitare.

La home page dell'app è estremamente importante

Hai speso un sacco di tempo, soldi e sforzi per creare un'applicazione web. È un'impresa di prim'ordine che sicuramente ti sorprenderanno. C'è solo una presa, devi convincere le persone a fare un tentativo.

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 sulla registrazione? pulsante. Anche se il servizio è completamente gratuito e offre un sacco di funzioni, devi davvero lavorare per vincere quelle conversioni.

Non dare per scontato che solo perché un utente è atterrato sulla tua home page che è sinceramente interessato a ciò che hai da offrire e quindi ha solo bisogno di una leggera spinta per andare oltre. Le probabilità sono, hanno seguito alcuni link con solo una vaga idea di dove sarebbero finiti e sono in una fase delicata in cui sono suscettibili di passare su un altro sito in pochi secondi se non li tiri dentro.

La homepage della tua app Web è uno dei tuoi strumenti di marketing più preziosi. Resisti all'impulso di accartocciare rapidamente qualcosa e invece fai il massimo sforzo. 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 porzione del sito above the fold.

C'è molto che mi piace di questa pagina. Prima di tutto, è molto semplice e concentrato. Non ti travolge con affermazioni vuote su come il servizio cambierà la tua vita, né 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, procedo.

Kroud ha davvero il compito di mettere in relazione un servizio complesso in un messaggio chiaro che funge anche da forte richiamo all'azione: • Creare una pagina di FAQ interattiva 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 in grassetto sono una buona cosa! Ecco il pulsante Kroud alle dimensioni reali.

Questo pulsante è enorme e molto chiaro su ciò che accade quando lo si preme: "Avvia un Kroud", con il messaggio secondario, "È gratuito!". Nota come questo pulsante attira la tua attenzione non solo per le dimensioni, ma anche per il colore. È molto più luminoso dell'altro contenuto che i tuoi occhi sono immediatamente attratti da esso.

Suggerimento: le schermate 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 uno spot pubblicitario o un sito web per una nuova Corvette. Cosa pensi che sarebbe la pagina? Ci sono un milione di possibili progetti, ma una cosa probabilmente rimarrebbe costante: vedresti la macchina. Le corvette hanno un'eredità di buon design e sanno che il modo migliore per sfoggiare la loro ultima prodezza è mostrarti una sua fotografia in tutta la sua gloria. Chi potrebbe essere convinto di acquistare un'auto sportiva senza nemmeno vederlo? Questo sarebbe ancora più vero se la macchina sportiva non fosse una Corvette ma piuttosto qualcosa di cui nessuno aveva mai sentito parlare.

Funziona come una metafora della home page dell'app Web. Le app Web sono una dozzina e nessuno ne ha mai sentito parlare. A meno che non ti vergogni delle tue scarse capacità di progettazione, le persone vorranno vedere esattamente come sarà il servizio prima che si prendano il tempo per iscriversi.

I ragazzi di Freckle lo sanno bene e hanno scelto di completare la loro pagina con una serie di cinque schermate.

Anche se grandi porzioni di alcuni di questi sono coperti, l'immagine nel suo complesso ti dà davvero uno sguardo decente su come si presenta il servizio.

Funzionalità come screenshot

La tendenza attuale nella progettazione di home page di app Web è quella di mostrare le funzionalità della tua home page con icone piccole. Questa è una grande idea che aumenta davvero il valore estetico della pagina e aiuta a rompere grandi blocchi di copie. Ecco un esempio di Fatturazione di Ballpark.

Anche se le icone sono migliori del testo, nel caso in cui tu abbia davvero un'interfaccia solida, 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.

Guarda come la messaggistica qui è rafforzata da un'immagine di come apparirà esattamente nell'app? Questa è una tendenza che sto vedendo sempre di più ultimamente e penso che sia una buona idea che migliora veramente l'idea dell'icona della precedente generazione di applicazioni web.

Come altro esempio, TodayPulse mostra tre delle loro funzionalità principali in una striscia orizzontale di schermate:

Peeve: no Screenshots

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 indizio di come sia effettivamente l'app.

Anche se queste pagine sono abbastanza attraenti, come Wordfaire di seguito, le probabilità che io lo provassi sono molto meno semplicemente perché non riesco a vedere un'anteprima.

Il vecchio adagio: un'immagine vale più di mille parole? si dimostra davvero vero in questa arena.Semplicemente non ho intenzione di leggere i sette paragrafi di testo sulla home page di Wordfaire. Ne scambierò almeno cinque per uno screenshot senza pensarci due volte.

Suggerimento: consentire agli utenti di giocare con un esempio dal vivo

Il concetto di? Prova prima di acquistare? esiste fin dall'alba 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 la tua app Web, l'incertezza viene rimossa.

È estremamente importante tenere a mente che il? Prova prima di acquistare? vale anche per i servizi gratuiti! Questo sembra confondere ma è davvero abbastanza semplice. Anche un servizio gratuito mi divora il tempo, una risorsa che trovo abbastanza preziosa e che non cambierà per niente. Iscriversi a un servizio web gratuito sembra ancora un impegno; uno che non voglio fare a meno che non sia davvero sicuro che mi piacerà il prodotto.

Il concetto è semplice, crea un modo in cui gli utenti possono sondare e dare un calcio alle gomme della tua app senza inserire un singolo bit di informazioni. Lo vediamo in azione qui sotto per Pen.io. Questa è un'altra pagina senza screenshot ma è resa un po 'migliore dall'inclusione di un collegamento a un esempio in modo da poter vedere ciò che ottieni dal servizio.

Ancora una volta, è fantastico che Pen.io lo includa, ma l'esecuzione è più forte su Kroud, dove il link alla pagina exampe è rinforzato da un'anteprima.

Peeve: lunghi tour

Alcune app web ti porteranno in un'escursione di dieci minuti che spiega dettagliatamente il loro servizio. Non fraintendetemi, l'informazione è buona e se sto pagando per un servizio, lo voglio. Ma dovrebbe un? Tour del prodotto? davvero essere così lavoro-intenso?

Se clicco su un link che dice "Fai un tour?", Quello che voglio veramente è vedere l'app. Un esempio dal vivo come abbiamo appena discusso in più di 2.000 parole che spiegano come sarà quando finalmente raggiungerai il punto in cui ti è permesso provarlo. Alcuni siti costruiscono anche una smart? Modificata? esempio dal vivo che ti guida attraverso il processo. Questo è un ottimo modo per consentire agli utenti di provare il tuo servizio assicurandoti al contempo che ottengano il punto e vedere cosa vuoi che facciano.

Anche in questo caso, non è necessariamente brutto parlare delle tue funzionalità, ma ricorda che è importante consentire agli utenti di entrare e vedere cosa pensano.

Includi un video

Un'altra idea per mostrare la tua app Web in azione è includere un breve video direttamente nella home page. 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 di screenshot e un'esperienza più strutturata di un campo di prova in forma libera.

Aviary fa un buon lavoro mostrando un time-lapse del loro editor di immagini creando una complessa manipolazione fotografica.

Una delle mie attuali implementazioni preferite di un video di home page dell'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 ragione, la cosa bella da fare adesso è mettere insieme uno di questi video come un divertente cartone animato. Questa è spesso un'ottima idea, ma il problema che ho è che dopo due minuti di una noiosissima animazione ho ancora poco o niente idea di come sia realmente l'app!

I due video qui sotto da Minus e Summify sono buoni esempi di questo. Certo, alla fine arrivano quasi mostrandoti una versione illustrata dell'app, ma solo alla fine e anche in quel momento, è una piccola sbirciatina astratta.

Pensieri di chiusura: una ricetta per il successo

Tutti i consigli in questo articolo sono mirati ai due obiettivi principali per la home page della tua app Web, di cui abbiamo già discusso: educazione e allettamento. Per prima cosa, elimina tutto il disordine dal tuo progetto e riducilo agli elementi più importanti in modo che il visitatore possa concentrarsi sulle informazioni vitali senza distrazioni.

Nella tua messaggistica, fai una dichiarazione in grassetto su cosa fa l'app e a chi serve. Oggi non abbiamo discusso di quest'ultimo punto, ma c'è una forte argomentazione che suggerisce che vincerai più conversioni identificando chiaramente il tuo pubblico di destinazione. Esempio:? MyCoolWebApp aiuta i progettisti e gli sviluppatori a organizzare le informazioni su client e progetti? è migliore di? MyCoolWebApp organizza le informazioni su client e progetti ?. Assicurati inoltre di indicare eventuali funzioni importanti e perché i visitatori devono utilizzare l'app.

Una volta che la messaggistica è stata eliminata, è ora di concentrarsi sulla presentazione del prodotto al pubblico. Tre ottimi modi per farlo sono gli screenshot (diversi se si può oscillare), gli account di esempio dal vivo e i video tour (il tipo che mostra effettivamente il prodotto). L'obiettivo è quello di ridurre la quantità di incertezza che circonda il tuo prodotto. Minore è l'incertezza, meno utenti saranno riluttanti a iscriversi.

Questo ovviamente presuppone che tu abbia un prodotto di qualità. Se la tua interfaccia è zoppa, allora con tutti i mezzi, nascondila dal pubblico e mantieni invece descrizioni noiose e lunghe!