Le code cards sono sempre più utili per la navigazione che mira alla vendita. Si collegano subito ai siti, che trattengono il cliente con una grafica web dinamica ed interattiva. Scopri tutto quel che c’è da sapere sul design interattivo, se vuoi diventare esperto di grafica per sito web.

Code cards, come sono fatte e perché usarle

Tutti ne maneggiamo una prima o poi. Le code cards sono tessere di plastica che ci vengono regalate come “chiave” per accedere digitalmente ad un prodotto o a un servizio. Questo avviene grazie al codice “QR” che è stampato sopra e contiene informazioni crittografate a forma di quadrato. Il codice dà una risposta rapida alle nostre ricerche in rete, collegandoci ai siti web. L’accesso online avviene tramite lo smartphone, che scannerizza il codice della carta con la fotocamera.  Ma si può usare anche una App specifica. I preziosi quadratini bianconeri che contengono i QR sono comparsi in Italia nel 2000, evoluzione dei codici a barre, che erano invece formati da strisce verticali numerate.

I QR code sfondarono subito nel fashion Made in Italy, catturando i lettori di riviste glamour, assaliti dalla voglia di saperne di più sui brand. A quei tempi venivano stampati negli angoli delle pagine pubblicitarie del prodotto o dei manifesti ed erano statici. Includevano una sola short URL, che indirizzava velocemente l’utente nel web, su siti graficamente intriganti.

Presto, tra le maglie della grafica web, nacque una grafica di sito web dedicata proprio agli utenti di QR code. Che finirono poi stampati su speciali cards e/o regalate ai clienti per gli usi più diversi. Per esempio:

• Badge aziendali collegati a servizi per i dipendenti
• Tessere associative collegate agli eventi
• Fidelity cards di attività commerciali per info sui  prodotti e news sugli sconti
• Gift per regalare pacchetti vacanze, prodotti di bellezza, servizi
• Key cards di Musei e Hotel, che rimandano ad info sui servizi turistici.

Poi è entrato in scena il codice QR dinamico. E’ bidimensionale e “quick response”, più facile da gestire, sia dal pubblico, sia dalle aziende. La code card con codice QR dinamico è diventata, così, uno strumento unico e personale. Si associa anche ad un unico prodotto, costruendo le info sui gusti del cliente, sempre in evoluzione. Contiene molte più informazioni, ed è scaricabile in versione vettoriale o bitmap.

Leggi anche 5 Consigli di Visual Marketing per aumentare il tasso di conversione

La code card oggi è diventata anche strumento di marketing: consente infatti di controllare le prestazioni del codice sull’utente e l’impatto dei siti web collegati. Raccogliendo i dati si costruiscono campagne pubblicitarie mirate, migliorando la grafica web. Leggi di seguito quel che c’è da sapere sul Web Design interattivo su code cards!

Il web design interattivo su code cards, come crearlo

Grafica web e code cards: sei interessato e vuoi sapere di più sul design interattivo?. Ecco alcune dritte per crearlo:

1. Decidi il codice in base alla funzione del sito web che sarà collegato

Per esempio se è un:

• sito aziendale, dove i clienti possono trovare informazioni utili, risorse gratuite, coupon o una pagina di destinazione di servizi. Ideale per promuovere l’e-commerce o un servizio professionale. Oppure per aumentare il numero di abbonati email, se gestisci un magazine. Gli utenti accedono ad una landing page con informazioni e risorse gratuite in cambio del loro indirizzo email

• una pagina di archiviazione o di “atterraggio“, in cui gestisci contenuti messi a disposizione dell’utente, come FAQ, immagini gif, video di Youtube,  profili social. Adatto per le Associazioni

• Google Maps. Il codice QR rimanda il cliente che ha scansionato il codice al luogo che gli proponi, connettendolo al relativo sito per le info. Utile per il travel e il turismo eno-gastronomico, se gestisci un bed&breakfast

Leggi anche Aumentare i clienti usando il Geomarketing

• Caso di vCard personale, che ha soppiantato il vecchio biglietto da visita. Si tratta di una business card online e rimanda ai siti web con tutte le informazioni professionali che ti riguardano: portfolio lavori, storytelling sul brand, blog che gestisci, pagine social

• Negozio online da cui scaricare le App che hai inventato.

2. Costruisci il codice QR da collegare ai siti web

Col generatore di codici costruisci il tuo codice QR, incorporando le URL dei siti web in cui vuoi portare i clienti. Piattaforme come uQR ti possono aiutare. Scaricalo poi come file di immagine raster e scansionalo con i lettori Android e iPhone, per assicurarti che reindirizzi effettivamente ai siti scelti. Tieni presente che anche la grafica del codice si può personalizzare: per esempio con l’aggiunta di un logo al centro o con la modifica del colore. Questo rafforza l’identità del brand

3. Progetta la grafica interattiva del sito web da collegare alla code card

Sei pronto per progettare la grafica dinamica per i siti web collegati alla tua code card. Secondo Viget:

La grafica interattiva aumenta la comprensione del prodotto nel pubblico

Questo perché fornisce molte informazioni in un breve lasso di tempo: un risultato notevole per le forniture online! Ecco qualche esempio di sito web che sfrutta con successo il design interattivo connesso alla code card:

• Species in Pieces, contiene carte dinamiche raffiguranti 30 specie di animali in via di estinzione. Il Web Design interattivo su code cards offre ai visitatori un’anteprima dei prodotti facendo lampeggiare le risposte alle domande di codifica. Catturati dall’animazione, i navigatori sono incoraggiati a scorrere le pagine ed esplorare l’intero sito

• One Design Company, per attirare subito l’attenzione dell’utente sceglie direzioni diagonali di scorrimento e animazioni giocose. Offre servizi di progettazione ai visitatori che hanno usato il code

• MailChimp, usa la grafica web interattiva per congratularsi con i clienti che hanno programmato una campagna promozionale di e-mail

• La landing page “Your Plan, Your Placet” di Google, offre info agli utenti sui modi più semplici per risparmiare energia. Le sezioni hanno piccoli pulsanti animati. Passando con il mouse su ciascun pulsante, si ingrandiscono per enfatizzare il contenuto. In questo modo si riducono i tempi di caricamento e l’utente non sente il bisogno di abbandonare subito la ricerca

Il web design interattivo su code cards, ultimi consigli

Sei deciso a progettare il sito web interattivo seguendo le nuove tendenze del design UX. Segui gli ultimi consigli da seguire per un sito efficace:

• assicurati di non distogliere i visitatori dal loro scopo. La maggioranza delle aziende vuole che gli utenti vadano nel form dei contatti per inviare il modulo con i propri dati. Oppure, invitandoli all’azione, che riempiano il carrello e procedano agli acquisti. Se la grafica di animazione è troppo spinta, distoglie dagli obbiettivi. Non progettare elementi interattivi che impediscano di completare queste azioni

• Integra Google Analytics nella costruzione del codice, per avere una migliore esperienza di monitoraggio del traffico nel sito. I dati raccolti saranno utili per programmare le campagne di marketing e aumentare le vendite

Conclusioni

Hai scoperto di più sul Web Design interattivo su code cards. Se hai voglia di offrire un’esperienza di navigazione avanzata per far crescere un business, fatti subito avanti. Il mondo della grafica web ti aspetta!