Dissecting Web Design il sito App

App Web, app per Android, app per iPhone e iPad e ora, con l'uscita di app per Mac, il mondo sembra impazzire! Sembra che ci sia un'app per soddisfare quasi ogni situazione? ma in un mercato digitale, come si promuovono queste app? Con il web design, ovviamente!

Ci sono decine di migliaia di app là fuori (e quel numero cresce ogni giorno). Naturalmente, tutte queste varie applicazioni devono utilizzare metodi diversi per promuovere se stessi e l'utilizzo di un sito Web è una delle strategie più importanti. I siti web delle app sono tra i migliori progettati e ci sono molte tendenze che attraversano questa particolare nicchia di siti. In questo articolo daremo un'occhiata più da vicino ed esamineremo alcune di quelle tecniche attualmente in uso.


introduzione


Il sito di Angry Birds è ingannevolmente semplice, usando l'illustrazione per distribuire efficacemente lo spirito della propria app senza bisogno di un design troppo stilizzato.

"Dove saremmo senza Angry Birds che ci permettesse di fare un po 'di vapore lanciando piccoli animali piumati in giro per il posto?"

Alcune persone semplicemente non potrebbero vivere senza Evernote per tutte le loro esigenze di prendere appunti e come potremmo sapere dove tutti sono senza Foursquare? Dove saremmo senza Angry Birds che ci permettesse di fare un po 'di vapore lanciando piccoli animali piumati intorno al luogo? Le app sono quasi diventate essenziali per il lavoro e la vita sociale di molte persone.

La popolarità delle app ha portato migliaia di loro a essere rilasciati nei vari mercati e, per far sì che uno di essi venga notato, deve distinguersi dalla massa e un sito ben progettato è un modo per raggiungere questo obiettivo.

I siti web di app devono svolgere diverse attività in modo efficace. Prima di tutto, è assolutamente cruciale che i siti web delle app siano ben progettati, così come qualsiasi sito web che venda prodotti online; poiché la percezione di un potenziale acquirente del valore e della qualità del prodotto sarà influenzata dall'ambiente in cui è contenuto. Oltre ad avere un bell'aspetto, i siti web delle app dovrebbero commercializzare l'app, comunicarne lo scopo, dimostrarne le capacità e persino istruire l'acquirente su come utilizzarlo. Alcuni potrebbero persino integrare funzionalità di e-commerce se l'app non viene venduta attraverso un marketplace.

Inutile dire che può essere una vera sfida soddisfare tutti questi requisiti e che i progettisti devono trovare modi creativi per farlo. Successivamente, esamineremo in dettaglio alcune funzionalità comuni trovate tra i siti di app che contribuiscono al loro successo. Iniziamo.


Temi

Il sito Web di EpicWin riproduce il tema della loro app sul loro sito? al massimo. Tutto, dalle trame di sfondo alla tipografia, enfatizza lo stile e il tono dell'app.

La grande maggioranza dei siti Web delle applicazioni sceglie di imitare il tema dell'applicazione che sta promuovendo. L'uso creativo di immagini, colori, texture e molti altri elementi consente al soggetto dell'app di trascendere l'app stessa e di abilitare il sito Web a diventare un'estensione di esso. Ci sono molti esempi di questo metodo in azione, uno ovvio sarebbe il sito web dell'app Tea Round.

L'app Tea Round, nelle loro stesse parole; ? rapidamente risolve gli argomenti basati sulla sete decidendo chi fa il tè ?. È estremamente ovvio dal design del sito web che lo scopo della app ruota intorno al tè?

L'uso di immagini come il bollitore, la tazzina sulla nota e la tazza da tè nel logo sono tutti altamente indicativi dello scopo dell'app. Come accennato in precedenza, questo è un uso molto chiaro di questa tecnica, ma può anche essere usato più sottigliezza, come nel sito web qui sotto.

Questo è il sito Web per l'app Get Galleried, che mostra esempi di design web di alta qualità al fine di fornire all'utente l'ispirazione. Dal sito stesso -? Pre-popoliamo siti di ispirazione da raccolte di design selezionate per te in un'interfaccia veloce e affiancata ?. Si noti come il sito Web utilizza un motivo a riquadri per il suo sfondo - suggestivo della galleria piastrellata che l'app presenta.

Questa tecnica di estendere il tema dell'applicazione al sito è un modo eccellente per comunicare la natura dell'app stessa. Certo, mentre sarà ancora necessario fornire una spiegazione su come funziona esattamente l'app, questo metodo fornisce istantaneamente all'utente una sensazione generale del suo scopo.

Inoltre, un ulteriore vantaggio dell'utilizzo delle stesse trame, colori ed elementi di design sia per il sito che per l'app, è che crea continuità tra le due piattaforme, che permetterà all'utente di familiarizzare con il marchio e di utilizzare l'app in modo più confortevole.


Icone e pulsanti

Noterai che, oltre ai siti Web progettati attorno ai temi, sono anche progettati per assomigliare a un'app stessa. Gli elementi che si trovano comunemente in app come icone e pulsanti sono spesso usati anche nella progettazione dei siti web.

Ci sono due principali vantaggi nel progettare il sito web nello stile di un'app. Il primo vantaggio si riferisce al punto fatto in precedenza, in quanto contribuisce a creare continuità tra il sito Web e l'app. In secondo luogo, è ragionevole pensare che una buona quantità di visitatori di questi siti utilizzerà dispositivi sensibili al tocco come iPhone e iPad.

Le app utilizzano elementi di interfaccia grandi e visivi come icone e pulsanti in quanto sono molto più facili da interagire quando si utilizzano dispositivi sensibili al tocco, quindi è solo una buona pratica utilizzare tali funzionalità anche sul sito web.


Immagini del dispositivo e schermate

Puoi parlare con la tua app tutto ciò che desideri, utilizzare ogni superlativo nel dizionario e sostenere che risolverà tutti i problemi della vita, ma a meno che le persone non possano effettivamente vedere ciò che stanno comprando, saranno molto riluttanti a impegnarsi in qualsiasi cosa. È uno dei tanti problemi che alcune persone hanno quando acquistano prodotti su Internet, in particolare per informazioni elettroniche come eBook e musica digitale.

Per risolvere questo problema, le immagini vengono utilizzate per aiutare l'acquirente a visualizzare ciò che stanno acquistando, ad esempio immagini di copertine di album su iTunes o eBook rappresentati come libri reali. È più o meno lo stesso con le app; i siti Web mostreranno spesso schermate dell'app visualizzate su dispositivi come iPhone, iPad e monitor di computer. Questa tecnica non solo consente all'utente di acquisire familiarità con l'aspetto dell'app, ma li aiuterà anche a visualizzare l'app sul proprio dispositivo che potrebbe influenzare la decisione di acquisto.

Se il detto "un'immagine vale più di mille parole" è vero, un video dovrebbe comunicare più informazioni sul prodotto di quante tu possa mai utilizzare il testo. Molti siti web di app hanno adottato video per dimostrare la loro app e le sue capacità ai potenziali acquirenti.

La dimostrazione video per l'app Concentrate è un esempio eccellente. Il video è in grado di dimostrare appieno tutte le funzionalità dell'app in un tempo relativamente breve. Con l'aggiunta di musica di sottofondo gradevole e intestazioni di sezioni brevi; il video è più divertente e l'informazione è molto più facile da digerire rispetto alle molte righe di testo che richiederebbe per comunicare le stesse informazioni.


disposizione

Come abbiamo discusso, i siti web delle app hanno molti obiettivi che devono essere raggiunti, ma il loro obiettivo principale è far sì che i visitatori acquistino l'app stessa. Tutti i siti Web includeranno una qualche forma di collegamento per consentirti di scaricare l'app, tramite un app store o direttamente dal sito stesso.

Per aiutare il sito Web nel fare ciò, i progettisti creeranno spesso un layout semplice ma efficace che guida l'utente attraverso i punti chiave del sito e, infine, l'elemento call to action (il link per il download). Molti scelgono di usare il layout 'Z'. Il redattore di Webdesign + Brandon Jones ha già discusso in modo approfondito il layout della "Z": è un articolo eccellente e ti aiuterà a comprendere meglio i punti di cui stiamo discutendo.

Diamo un'occhiata a come un tale layout è implementato su un sito web di app. Utilizzeremo il sito Web per l'app Leaflet. Ancora una volta, c'è un eccellente tutorial su Webdesign + su come è stato realizzato questo particolare progetto. Una forma approssimativa a "Z" è stata sovrapposta al sito Web per aiutare a dimostrare ulteriormente i nostri punti.

Noterai che la forma "Z" copre vari punti sul sito web nel seguente ordine:

  • Immagini del dispositivo iPhone con schermate dell'app
  • Il logo / nome dell'app
  • Una breve descrizione dell'app
  • Il pulsante di download

Il designer ha deliberatamente scelto di posizionare questi punti lungo il percorso che intende seguire dall'utente. Se il visitatore del sito dovesse effettivamente seguire il percorso previsto, per prima cosa riceverebbe una prima indicazione sullo scopo del sito attraverso l'uso di immagini iPhone con schermate dell'app. L'utente dovrebbe quindi notare rapidamente il logo dell'app seguito da un paragrafo che descrive brevemente cosa fa l'app.

Ora che l'utente è stato educato sui numerosi vantaggi dell'app, insieme alle immagini accattivanti, arriva a un pulsante comodamente collocato (insieme ad un prezzo allettante) che permetterà loro di acquistare l'app da soli.

C'è un'incredibile quantità di app disponibili ed è un mercato molto competitivo, quindi è essenziale che tu possa attirare l'attenzione degli utenti, presentare i vantaggi dell'app e rendere più facile per loro comprarlo tutto in un breve lasso di tempo e il layout 'Z' è perfetto per questo. Ovviamente è impossibile adattare tutte le informazioni in questo spazio, quindi troverai spesso che i siti che implementano questo layout andranno molto più dettagliatamente su come l'app funzioni più in basso nella pagina.

Il layout "Z" non è affatto l'unico layout utilizzato dai siti web delle app, poiché ce ne sono molti altri tra cui scegliere, ma è molto efficace se usato correttamente. Ecco altri esempi del layout "Z" in azione.

Ottenere Galleried

Evernote


Passi e punti elenco

Il mercato delle app è saturo e se un potenziale acquirente non è convinto rapidamente dalla tua app, puoi garantire che saranno in grado di trovare qualcosa che andrà altrove. Pertanto è essenziale che tu possa comunicare come funziona la tua app e i benefici che fornirà in modo chiaro e conciso.

L'utilizzo di punti elenco e passaggi numerati rappresenta un metodo efficace per scomporre informazioni, in quanto gli utenti potrebbero non essere disposti a leggere interi paragrafi di informazioni su come funziona.

Il sito Web dell'app Gallerytopia utilizza entrambi i punti elenco e i passaggi numerati per comunicare informazioni sull'app. Tutti i benefici sono riassunti usando una piccola quantità di punti elenco brevi e facili da digerire. I vantaggi elencati da questi punti elenco sono ulteriormente migliorati dall'uso di simboli visivi "tick", quasi come se stessero controllando l'elenco dei requisiti.

Più in basso nella pagina, le istruzioni su come utilizzare l'app sono suddivise in tre passaggi numerati. È molto comune per i siti web di app dividere le informazioni su come funziona l'app o su come utilizzarla in una piccola quantità di passaggi numerati. Questi passaggi comunicano che l'app è molto semplice e facile da usare, perché nessuno vuole comprare qualcosa di così complicato?


Altri esempi di grandi siti di app

Ora che abbiamo visto alcune delle funzionalità implementate dai siti web delle app, diamo un'occhiata a come alcuni dei migliori siti web di app realizzano questo. Di seguito sono riportati alcuni esempi di siti Web per app splendidamente progettati.

Caleidoscopio

Fatture

Bord

concentrarsi

Corriere

Evernote

Cose

Livelli

App Epic Win


Conclusione

Abbiamo discusso molte diverse caratteristiche e tecniche che si trovano comunemente tra i siti web di app e sembra esserci un obiettivo comune rispetto a molte di queste funzionalità; e questo è per comunicare le informazioni in modo rapido ed efficiente. È stato recentemente annunciato che l'app store di Apple ha raggiunto i dieci miliardi di download e il mercato è in continua crescita. Il sito Web di qualsiasi app deve catturare l'attenzione dell'utente, comunicarne i benefici e renderlo facilmente disponibile in breve tempo; altrimenti ci sono molte altre opzioni tra cui scegliere tra un'app shopper.

Infine, vale la pena ricordare che, sebbene questi siti Web impieghino molte tecniche per raggiungere i loro obiettivi, queste funzionalità non sarebbero così efficaci se non fossero contenute in progetti di siti Web meravigliosamente realizzati.

Questo articolo ha discusso alcune funzionalità e tecniche che rendono efficaci i siti web delle app. Ci sono altre caratteristiche che hai notato tra questi tipi di siti web? C'è un sito web di app particolarmente buono che conosci? Per favore condividi i tuoi pensieri e commenti qui sotto!