PORTALE DEDICATO :
3.5. Restyling e lancio di una nuova versione: le specifiche tecniche Il nuovo portale convenzioni Piaggio presenta una struttura altamente
modulabile, in tutte le sue parti. In questo modo, infatti, i contenuti sono tutti editabili, dai titoli dei box, alle descrizioni prodotti, alle immagini, ai listini.
Ciò è stato voluto per cercare di rendere il più possibile flessibile questo strumento, al fine di andare incontro alle esigenze della clientela di riferimento.
Andando ad analizzare ogni sua singola parte, entrando come convenzionati della Cassa Forense, di seguito si delineeranno, in maniera dettagliata, le specifiche tecniche del portale: dai colori, ai visori, funzioni, alle pagine brand, alle risoluzioni responsive.
Tali distinte sono state oggetto della gran parte del mio lavoro all’interno di Piaggio & C. S.p.A. Collaborando costantemente con le agenzie Tinext e Oot e lo staff dell’Ufficio Marketing Italia, abbiamo dato vita, da fine Marzo 2016, all’implementazione e sviluppo del nuovo canale di vendite del Gruppo.
Le Vendite Dirette, a questo proposito, hanno concesso la pubblicazione delle immagini che seguiranno; queste sono a scopo puramente illustrativo e, pertanto, i prezzi e contenuti che si visioneranno, non rappresentano le reali informazioni presenti nel sito.
Tutto il potale è contrassegnato da sei colori principali:
dovrebbe implementare tutte quelle tecnologie utili per un adattamento automatico alle preferenze dell’utente (Friedman, 2011).
81
Figura 3.5: Palette colore
Fonte: Piaggio & C. S.p.A.
1. BLU, usato per menu, link interni ed esterni, titoli, accordio44 chiusi, frecce, indicatori slider45.
2. CIANO, utilizzato per CTA (Call to Action46)/bottoni, voci
breadcrumb47 cliccabili, url testuali.
3. BLU SCURO, dedicato per nome utente, titoli non cliccabili, prezzi non convenzionati, accordio aperti.
4. GIALLO, riservato a prezzi e percentuali di sconto.
5. NEVE, adoperato come background shortcut (ovvero una funzione/“scorciatoia” linkabile che porta a una determinata pagina del portale), background slider, background link esterni.
44 “Accordio” è un controllo attraverso il quale vengono nascosti e mostrati determinati blocchi di
dati in base all’interazione con l’utente. Viene utilizzato principalmente in due casi: per ridurre l’ingombro del testo nella pagina oppure per focalizzare l’attenzione dell’utente su una determinata porzione di testo.
45 Uno slider è un widget grafico che permettono di far scorrere contenuti di diversi pannelli (in
questo caso immagini di sfondo) automaticamente, senza dover scorrere con il mouse o premere su pulsanti.
46
La cosiddetta “Call to Action” (CTA), ovvero chiamata all'azione, comprende elementi posti all'interno di una pagina web per indurre il visitatore a compiere un'azione (esempio.: comprare o compilare un modulo).
47
La breadcrumb (letteralmente "briciole di pane") (o anche “filo di Arianna” o “Percorso di Pollicino”) è una tecnica di navigazione usata nelle interfacce utente. Il loro scopo è quello di fornire agli utenti un modo di tener traccia della loro posizione in documenti o programmi.
82 6. GRIGIO, impiegato per i testi descrittivi, testo form (schede da compilare, moduli, ecc.), testo del footer (cioè il cosiddetto “fondo della pagina web”).
Questi richiamano tutti quelli del logo del Gruppo: il blu, il ciano, il grigio. Il giallo, invece, è stato scelto per spiccare e mettere in risalto la scontistica riservata ai convenzionati (la leva prezzo è uno degli aspetti centrali che mettono in moto le vendite dell’unità operativa).
Gli elementi editabili del sito li ritroviamo, rispettivamente, in: MENU: tutti i titoli sono maiuscoli
VISORI (immagini) o SLIDER: puramente grafici.
BOX: tutti gli elementi sono testuali, comprese le CTA e devono essere editabili da CMS48; il filtro blu sopra sulle immagini è trasparente a gradiente.
La pagina di Login/Registrazione ha un
background con un’immagine Wide (ovvero che occupa tutto lo schermo) di sfondo con ancoraggio a destra, più l’applicazione di un filtro blu a gradiente che richiama i colori di Piaggio Group e un logo di dimensioni fisse, ancorato al margine destro in alto. Per quanto concerne i contenuti, la pagina si apre, invece, con il form di Login. Se ho già effettuato l’accesso dallo stesso IP (Internet Protocol) i campi saranno precompilati.
48
CMS (Content Management System), è sistema software di gestione dei contenuti di un sito.
Figura 3.6: Login/Registrazione
83 Al clic/tap su “REGISTRATI” si aprirà un accordion con i campi da compilare.
Da 1280 px a risoluzioni superiori, i contenuti hanno una posizione fissa, mentre la foto di sfondo è riproporzionata.
Da 1024 px a 480 px i margini diminuiscono progressivamente.
Titolo e contenuti rimangono i medesimi per tutte le risoluzioni, fatta eccezione per la versione mobile in cui questi saranno più grandi e disposti due per riga, con i bottoni CTA centrati alla pagina.
La Home Page, come ogni sito che si rispetti, è composta da:
Header, con logo e nome utente registrato ancorato a sinistra. Un messaggio di benvenuto e link Logout a destra. Quest’ultimo dalla versione 1024 px in giù sparisce e Logout entra a far parte del menu come ultima voce. Sempre in queste risoluzioni, data la nidificazione del menu a icona, comparirà il logo Piaggio Group su sfondo bianco dell’header.
Menu, posizionato sempre in spalla destra.
Visore, che per 1280 / 1024 / 768 px copre
Figura 3.7: Home Page
84 proporzionalmente tutte la larghezza di pagina. Vi sono poi frecce sempre presenti e palline di posizione per la numerazione all’interno dell’immagine, al centro in basso. Vi è poi la possibilità di inserire uno slider automatico a tempo o gestibile dall’utente tramite le frecce. Per la risoluzione a 480 px, invece, il visore copre sempre tutta la larghezza ma deve essere tagliato a destra e a sinistra e visualizzare la parte centrale. Le frecce non sono presenti, lo slider verrà indicato solo dalle “palline” posizionate fuori visore subito sotto. A
tablet e mobile lo swipe cambia immagine.
Box, sono sempre di tre tipologie, che, di seguito a “Box Promo e Servizi” si descriverà meglio.
Il Menu, a seconda degli strumenti digitali adottati, cambia insieme all’interfaccia.
Display 1280 px
Per tutte le versioni desktop il menu è sempre presente in spalla destra con la voce” LISTINI” di default sempre aperta. Le voci bianche su fondo Blu hanno
Fonte: Piaggio & C. S.p.A.
85 un over Ciano. In generale, il menu scrolla assieme alla pagina fino alla visualizzazione dell’ultima voce, dopodiché si blocca anche se l’utente continua a scrollare la pagina.
Tablet e mobile 1024 / 768 / 480 px
Il Menu si riduce a icona in alto a destra e ingloba la voce “LOGOUT”. Al clic/tap sull’icona hamburger49 entra da destra verso sinistra il menu, assieme alla X per la chiusura dello stesso e un layer (strato) blu scuro al 75% copre l’intera pagina. Le dimensioni sono le stesse della risoluzione 1280 px e valgono le stesse regole.
I Box promo e servizi sono, come su scritto, principalmente di tre categorie.
1. Box primario. Composto da immagine di sfondo con filtro Blu trasparente a gradiente, label Blu con sezione di riferimento, logo partner se presente, breve testo e CTA. L’intero box è cliccabile. In caso di Listino è possibile inserire il prezzo di un veicolo in promozione al posto della CTA. Nella versione
mobile 480 px si allarga orizzontalmente fino al margine e
l’immagine si adatta
proporzionalmente (una parte di foto non è visibile). Uno sotto l’altro.
49 L’icona hamburger è costituita graficamente da tre barre orizzontali, ed è diventata uno standard
grafico nella rappresentazione dei menu di navigazione responsive.
Fonte: Piaggio & C. S.p.A.
86 2. Box secondario. Sfondo bianco con outline Neve, comprende una foto che copre il 50% dell’altezza, label Blu con la sezione di riferimento, un breve testo e CTA. In caso di necessità la foto può essere sostituita da un titolo. In caso di un video invece, l’anteprima copre tutto il box e viene inserita la CTA centrale. Tutto il box è cliccabile. Versione mobile 480 px il box ha le stesse proporzioni. Posizionati uno sotto l’altro.
3. Shortcut; avente uno sfondo neve con testo, icona (se presente) e freccia. Tutta l’area è cliccabile. Può essere una singola (posizionata centralmente) o doppia come visualizzata da un laptop, a 1280 px. Nella Versione mobile 480 px ha le stesse proporzioni; se doppio saranno uno sotto l’altro.
Le cosiddette “Pagine Famiglia” hanno:
Figura 3.10: Pagine Famiglia
Fonte: Piaggio & C. S.p.A.
1. Voce di menu selezionata.
2. Comparsa del breadcrumb, presente anche nella versione mobile.
3. Comparsa del logo del listino di riferimento sopra al visore, anche se non fa parte della grafica del visore.
87 4. Visore grafico delle stesse dimensioni di quello visualizzato da un normale
schermo di computer.
5. Box famiglia. Presenti in caso di gruppi di modelli all’interno del brand. Sono composti di immagine emozionale, nome della famiglia, prezzo di partenza, bottone che porta alla pagina dei vari modelli.
6. Box modello. Composto da foto still-life, cioè su sfondo bianco e con oggetti inanimati, nome del veicolo, prezzo pieno sbarrato, prezzo convenzionato, bottone che porta alla pagina di dettaglio.
7. Area sottostante possono essere inseriti n°3 box secondari con video, lancio contatti e/o faq e/o news.
8. Shortcut con link esterno al sito prodotto del brand selezionato. Over testo e freccia Ciano.
La Pagina Brand è molto simile a quella precedente e viene usata per tutti le marche del Gruppo che non hanno sottocategorie nei modelli dei veicoli e che quindi non hanno bisogno di essere raggruppati.
Figura 3.11: Pagina Brand
88 La Pagina Dettaglio, invece, si riferisce al singolo veicolo.
Figura 3.12: Pagina dettaglio
Fonte: Piaggio & C. S.p.A.
A mobile i vari elementi andranno tutti uno sotto l’altro, fatta eccezione del titolo e logo del brand che dovranno essere affiancati. In questa si ritrovano:
1. Nome veicolo per esteso, se molto lungo va su due righe. 2. Comparsa del logo del listino di riferimento.
3. Slider foto e/o video del veicolo.
4. Breve testo descrittivo del modello, prezzo di vendita al pubblico sbarrato e prezzo convenzionato. Bottone “ORDINA” che porta al modulo d’acquisto.
89 5. Area sottostante possono essere inseriti n°3 box secondari con lancio
contatti e/o faq e/o news.
6. Slider Box Modello con altri veicoli simili.
7. Shortcut con link esterno agli accessori del brand selezionato. Over testo e freccia Ciano.
Le pagina relativa alle “Domande frequenti” o “FAQ” ha tre elementi fondamentali:
Figura 3.13: FAQ
Fonte: Piaggio & C. S.p.A.
1. Comparsa della buca di ricerca per le domande frequenti.
2. Prima FAQ ad accordion aperta di default all’atterraggio in pagina.
3. Esempio FAQ ad accordion chiuso. Over titolo Ciano. Al clic/tap su un’altra domanda l’accordion aperto si deve chiudere. Rimane quindi sempre solo una domanda aperta.
90 Il Modulo d’acquisto, il vero “cuore” del portale convenzioni, si presenta con un form riportante oltre che campi da compilare come i “Dati personali “dell’utente (residenza, professione, numeri di telefono), anche con le condizioni di vendita generali di Piaggio & C. S.p.A. con elencate garanzie, diritto di recesso, trattamento e spese di consegna, e l’informativa ai sensi del D. Lgs. 196/2003 per il trattamento dei dati personali.
Figura 3.14: Modulo d’acquisto
91 Il form del Modulo si presenta, nello specifico, come una serie di
accordion aperti.
1. Form Dati personali. Se il convenzionato ha già dato queste informazioni, l’accordion sarà precompilato e chiuso.
2. Esempio form aperto da compilare
3. Bottone per l’invio del modulo (a mobile sarà centrato).
Le Promo/servizi/news sono pagine aggregazioni sotto forma di visori e box.
Figura 3.15: Promo/servi/news
92 Queste sono composte da:
1. Slider di visori grafici che seguono le regole degli altri visori.
2. Box primari con lancio a n°3 Promozioni (che differiscono da quelle del visore).
3. Shortcut per lanci testuali.
4. Box primari per lancio a n°3 Servizi.
5. CTA per la visualizzazione di altre promo o servizi.
6. Box secondari per abstract di news composti di titolo, breve testo e CTA testuale per l’approfondimento.
7. CTA per la visualizzazione di altre news.
La pagina Foglia non è nient’altro una pagina di dettaglio di una promozione o servizio.
Figura 3.16: Foglia
93 Questa presenta:
1. Titolo promozione o servizio o news.
2. Logo partner se ci troviamo all’interno di una promo. 3. Immagine, una sola.
4. Sottotitolo, testo descrittivo e CTA.
5. Slider Box Primari se ci troviamo in Promozioni e Servizi. Slider Box Secondari se ci troviamo dentro una news.
Infine, vi è la pagina Contatti.
Figura 3.17: Contatti
94 Composta essenzialmente da:
1. Titolo pagina contatti
2. Lista di contatti. Al click sulla indirizzo di posta riportato si apre già una mail con destinatario.
Ogni giorno le Vendite Dirette modificano ed implementano tali specifiche tecniche, al fine di rendere l’esperienza di navigazione e uso del portale il più piacevole e semplice possibile.
Gli addetti dell’unità organizzativa, in questo senso, devono essere in grado di interpretare gli ultimi trend e proporre un sito moderno e funzionale, con proposte di interfacce di altissima qualità.