CONCEPT PROGETTUALE
Mattia Perissinotto STC 5142 A.A. 2017/2018 Relatore: prof.ssa Greta Ruffino
1
OBIETTIVI
TARGET DI RIFERIMENTO
L’obiettivo principale dell’applicazione è quello di dare al consumatore quante più informazioni possibili circa ciò che ogni giorno viene acquistato nei supermercati. Per questo motivo, l’applicazione fornisce tutti gli strumenti necessari per riuscire a conoscere e prendere coscienza dei casi di pubblicità ingannevole. La forza della piattaforma sta nelle mani dei consumatori i quali, attraverso foto e commenti, hanno la possibilità di esprimere il loro pensiero e potersi connettere con gli altri utenti. L’obiettivo è quello di creare uno spazio virtuale in cui ci sia libertà di pensiero e, grazie alla creazione di tale piattaforma semplice ed intuitiva, è possibile riuscire a dar luogo proprio a questo flusso di informazioni e opinioni. Proprio perché la forza dell’app è data dalle opinioni degli utenti che fanno parte di questa comunità è stata pensata in formato gratuito, e quindi per essere promossa proprio da diverse associazioni no profit conosciute nel territorio italiano ed estero, come la Federconsumatori, Io leggo l’etichetta e il Fatto alimentare, per evitare che all’interno della piattaforma vengano inseriti elementi che rischierebbero di non essere imparziali. Dunque, tramite la condivisione di immagini, commenti e notizie, l’app si configura come una realtà virtuale di tipo comunitario a tutti gli effetti, dove l’informazione sta alla base di tutto.
L’applicazione risulta come una comunità destinata principalmente al consumatore medio il quale potrebbe, con più facilità cadere nel tranello della pubblicità ingannevole. Per questo motivo, il target al quale la piattaforma fa riferimento è proprio al consumatore medio, uomini e donne di un’età compresa tra i 20 e i 60 anni che effettuano acquisti di tipo alimentare in modo quasi quotidiano. La fascia d’età selezionata include dunque principalmente due tipologie di consumatori, sia quello che effettua acquisti senza prestare troppa attenzione a ciò che viene riportato sulle etichette dei prodotti, sia coloro che, al contrario, desiderano conoscere in maniera più approfondita ciò che acquistano, facendo di conseguenza anche attenzione al rapporto qualità prezzo. Proprio perché i destinatari comprendono diverse età, la piattaforma si presenta in modo semplice ed intuitivo, al fine di renderla di facile utilizzo per tutta la fascia selezionata.
ASSOCIAZIONI NO PROFIT COME ENTI PROMOTORI
MOODBOARD
PIATTAFORMA GRATUITA
STOP ALLE ETICHETTE DIFFICILI DA COMPRENDERE
Età: 20-60 anni Utilizzo mezzi di comunicazione Particolare attenzione alla qualità del cibo sano, naturale e biologico Carriera lavorativa avviata
COMMUNITY DI CONSUMATORI
Influenzati dal gruppo Interessi: famiglia, amici Fanno acquisti fisici in prima persona Controllano le etichette riportate sulle confezioni dei prodotti
NAMING
Mattia Perissinotto STC 5142 A.A. 2017/2018 Relatore: prof.ssa Greta Ruffino
2
Per riuscire ad arrivare alla decisione di un nome che fosse in grado di racchiudere tutti gli elementi chiave della piattaforma, è stata effettuata una mappa mentale per riuscire a raggiungere questo risultato. In seguito dunque a profonde riflessioni su quale potesse essere un nome breve, semplice da pronunciare e chiaro affinché il pubblico ne comprendesse il significato, si è arrivati alla conclusione della scelta del nome Cibitas. Di fatto questo termine rappresenta la fusione di due concetti fondamentali della piattaforma ossia il cibo e la comunità. Infatti, il primo termine utilizzato in questa fusione è costituito dalla parola di origine latina “Civitas”, la quale letteralmente significa proprio comunità e dunque un insieme di persone volte ad un unico scopo. La seconda parola invece è cibo, proprio per arrivare al significato finale del termine che è dunque comunità del cibo.
CIBO
Interessi comuni
CITTÀ
City (EN)
Messaggio
Civitas (Latino)
Chat
CIVITAS
Internet
CIBO
Food (EN) Cibus (Latino)
Protezione Riciclabile Eco-friendly ingombrante
Uomo
Device Virtuale Utenti
COMMUNITY
Persone
Collegamento
Cibo
Compatto Forma geometrica
Amici Scatola
PACKAGING
Acqua Prodotti alimentari
Snack Prodotto
Adulto Adolescente
Avatar
Conservazione
Donna
Gruppo
Comitiva
“civitas ‹čìvitas› s. f., lat. [der. di civis «cittadino»]. – Termine che, nella concezione politica e giuridica latina, designava la città-stato; indicava inoltre l’insieme dei cittadini, distinguendosi in ciò da urbs, che indicava invece la città come complesso di edifici e di mura.”
Diz. Treccani
Città Squadra
Confezionato Congelato Fresco Bevanda
Carta
Mappa mentale
CIBITAS
LOGO
3 Logo finale CIBITAS
Colore Per la sua realizzazione sono stati selezionati due colori principali: l’azzurro e il bianco. L’azzurro per le sue note caratteristiche calmanti e di fiducia e, il bianco, per le sue caratteristiche di verità e trasparenza. r: 140 g: 189 b: 217
La realizzazione del logo è stata effettuata tentando di ragionare, come per la scelta del nome della piattaforma, su quali potessero essere gli elementi che la caratterizzassero al meglio e che dunque fossero in grado di renderla riconoscibile al grande pubblico. Gli elementi che sono stati selezionati per la sua realizzazione sono rispettivamente un sacchetto, l’icona di una chat e tre forme circolari. Ebbene, il sacchetto, il quale ricorda facilmente una confezione di patatine ha l’obiettivo di simboleggiare gli imballaggi dei diversi prodotti alimentari, i quali rappresentano l’oggetto principale di esaminazione dell’applicazione stessa. Al suo interno è stata posta l’icona di una chat per riuscire a dare la sensazione che in questa applicazione, i diversi utenti hanno la possibilità di potersi mettere in contatto l’un l’altro e ciò è possibile grazie alle diverse funzioni che Cibitas ha messo loro a disposizione. Infine, in alto al sacchetto, tre forme circolari alle quali sono stati assegnati due significati. Il primo, più esplicito che vuole ricordare tre teste che simboleggiano la comunità che Cibitas ha la volontà di creare. In più è stato assegnato un significato più astratto alle tre forme circolari osservate insieme al resto del logo. Infatti se si osserva con più attenzione, l’intera immagine vuole ricordare la forma di una colonna, la quale non solo rimanda alla civiltà greca e romana, ma vuole anche significare la vera forza di Cibitas, ossia la forza data dall’unione.
r: 122 g: 168 b: 184
r: 0 g: 0 b: 0
Font Al fine di restare in linea con lo stile dell’applicazione, la quale risulta semplice e intuitiva, la scelta del font è ricaduta sull’Aron Grotesque poiché, essendo un font bastoni e quindi privo di grazie, fa sì che l’utente non debba effettuare nessuna fatica per riuscirlo a leggere. POLIZZA: Aron Grotesque
Anteprima icona FORME CIRCOLARI Comunità
CONFEZIONE DI PATATINE Imballaggi prodotti alimentari
COMUNITÀ DEL CIBO Aron Grotesque (bold, minuscolo)
CHAT Condivisione
cibitas
Mattia Perissinotto STC 5142 A.A. 2017/2018 Relatore: prof.ssa Greta Ruffino
ALBERATURA
4
Mattia Perissinotto STC 5142 A.A. 2017/2018 Relatore: prof.ssa Greta Ruffino
Al fine di riuscire a dare a Cibitas una delle caratteristiche che meglio la distinguono, ossia la facilità di navigazione, è stata pensata un’alberatura nella quale sono stati inseriti cinque elementi principali: la home, la ricerca, le notizie, le liste e il profilo. Ebbene, come è possibile notare dallo schema effettuato, tale facilità viene data proprio dal fatto che da ognuna di queste cinque sezioni, è possibile arrivare ad un’unica pagina, la quale costituisce il punto centrale di Cibitas, la scheda prodotto. Infatti, da ognuna delle sezioni nominate è possibile accedere alle caratteristiche dei prodotti e viceversa.
DESIGN
Mattia Perissinotto STC 5142 A.A. 2017/2018 Relatore: prof.ssa Greta Ruffino
5
FAMIGLIA FONT UTILIZZATI:
GOTHAM LIGHT
STRUTTURA DI BASE PULSANTI Barra di stato
BARRA DI STATO
HEADER (barra di navigazione)
HEADER
ABCDEFGHIJKLMNOPQRSTUVWYZ abcdefghijklmnopqrstuvwyz 0123456789
BOOK
MENÙ FISSO attivo
disattivo
HEADER attivo
disattivo
BODY
BODY (Contenuto)
ABCDEFGHIJKLMNOPQRSTUVWYZ abcdefghijklmnopqrstuvwyz 0123456789
RIQUADRI
MEDIUM
Angoli arrotondati
ABCDEFGHIJKLMNOPQRSTUVWYZ abcdefghijklmnopqrstuvwyz 0123456789
BOLD ABCDEFGHIJKLMNOPQRSTUVWYZ abcdefghijklmnopqrstuvwyz 0123456789
FOOTER
FOOTER (Menù fisso)
ICONE COLORI r: 140 g: 189 b: 217
r: 122 g: 168 b: 184
arrotondate r: 0 g: 0 b: 0
COMPILAZIONE LINK Link
Cerca lista
USER FLOW low fidelity: LOGIN
Mattia Perissinotto STC 5142 A.A. 2017/2018 Relatore: prof.ssa Greta Ruffino
6
4a REGISTRAZIONE
1
LANCIO
2
MESSAGGI INFORMATIVI
3
LOGIN
4
5a HOME
USER FLOW high fidelity: LOGIN
Mattia Perissinotto STC 5142 A.A. 2017/2018 Relatore: prof.ssa Greta Ruffino
7
4a REGISTRAZIONE
1
LANCIO
2
MESSAGGI INFORMATIVI
3
LOGIN
4
5a HOME
USER FLOW low fidelity: RICERCA PRODOTTO
8
Mattia Perissinotto STC 5142 A.A. 2017/2018 Relatore: prof.ssa Greta Ruffino
RICONOSCIMENTO
3c IMMAGINE
3a
1
HOME
2
SEZIONE RICERCA
3b
RICERCA PER NOME
5a 4b
SCANSIONE CODICE A BARRE ELENCO
4a PRODOTTI
4c SCHEDA PRODOTTO
USER FLOW high fidelity: RICERCA PRODOTTO
9
Mattia Perissinotto STC 5142 A.A. 2017/2018 Relatore: prof.ssa Greta Ruffino
RICONOSCIMENTO
3c IMMAGINE
3a
RICERCA PER NOME
5a 4b 1
HOME
2
SEZIONE RICERCA
3b
SCANSIONE CODICE A BARRE ELENCO
4a PRODOTTI
4c SCHEDA PRODOTTO
USER FLOW low fidelity: VISUALIZZA SENTENZA
Mattia Perissinotto STC 5142 A.A. 2017/2018 Relatore: prof.ssa Greta Ruffino
10
1
HOME
RICONOSCIMENTO
2c IMMAGINE
3a 3b
SCANSIONE CODICE
2a A BARRE
2b ELENCO PRODOTTI
3c SCHEDA PRODOTTO
4
SENTENZA
USER FLOW high fidelity: VISUALIZZA SENTENZA
Mattia Perissinotto STC 5142 A.A. 2017/2018 Relatore: prof.ssa Greta Ruffino
11
1
HOME RICONOSCIMENTO
2c IMMAGINE
3a 3b
3c SCHEDA PRODOTTO 4
SCANSIONE CODICE
2a A BARRE
2b ELENCO PRODOTTI
SENTENZA
USER FLOW low fidelity: RICERCA PRODOTTO DA LISTA
12
1
HOME
2
SEZIONE LISTE
3
PAGINA LISTA
4
Mattia Perissinotto STC 5142 A.A. 2017/2018 Relatore: prof.ssa Greta Ruffino
SCHEDA PRODOTTO
USER FLOW high fidelity: RICERCA PRODOTTO DA LISTA
13
1
HOME
2
SEZIONE LISTE
3
PAGINA LISTA
4
Mattia Perissinotto STC 5142 A.A. 2017/2018 Relatore: prof.ssa Greta Ruffino
SCHEDA PRODOTTO
USER FLOW low fidelity: VISUALIZZA FONTE NOTIZIA
Mattia Perissinotto STC 5142 A.A. 2017/2018 Relatore: prof.ssa Greta Ruffino
14
1
HOME
2
SEZIONE NOTIZIE
3
SCHEDA NOTIZIA
4
NOTIZIA DA SITO D’ORIGINE
USER FLOW high fidelity: VISUALIZZA FONTE NOTIZIA
Mattia Perissinotto STC 5142 A.A. 2017/2018 Relatore: prof.ssa Greta Ruffino
15
1
HOME
2
SEZIONE NOTIZIE
3
SCHEDA NOTIZIA
4
NOTIZIA DA SITO D’ORIGINE
USER FLOW low fidelity: VISUALIZZA PAGINA PREFERITI
16
1
HOME
2
SEZIONE PROFILO
3
PAGINA PREFERITI
Mattia Perissinotto STC 5142 A.A. 2017/2018 Relatore: prof.ssa Greta Ruffino
USER FLOW high fidelity: VISUALIZZA PAGINA PREFERITI
17
1
HOME
2
SEZIONE PROFILO
3
PAGINA PREFERITI
Mattia Perissinotto STC 5142 A.A. 2017/2018 Relatore: prof.ssa Greta Ruffino
SEZIONE DI LANCIO/REGISTRAZIONE
18
Mattia Perissinotto STC 5142 A.A. 2017/2018 Relatore: prof.ssa Greta Ruffino
La fase di lancio costituisce la prima interazione tra l’utente e la piattaforma Cibitas. Al fine infatti di riuscire a dare una prospettiva più ampia di ciò che Cibitas è, egli obbligatoriamente deve passare attraverso due schermate che vanno proprio a definire di cosa si tratta questo progetto, per poi arrivare ad un’ultima schermata composta dalla registrazione da parte dell’utente. Egli infatti ha la possibilità di potersi registrare in seguito all’inserimento di alcuni semplici dati, per poter poi diventare parte attiva della comunità Cibitas. Allo stesso tempo, gli viene data l’ulteriore possibilità di accedere in maniera facilitata, attraverso l’inserimento dei propri dati del profilo Facebook o Google+, in modo da rendere ancora più veloce l’accesso alla piattaforma.
Dimensioni effettive Iphone 6 Plus
SEZIONE DI LANCIO/REGISTRAZIONE
19
Mattia Perissinotto STC 5142 A.A. 2017/2018 Relatore: prof.ssa Greta Ruffino
0 - FASE DI LANCIO La pagina Login è preceduta da tre schermate che riassumono le caratteristiche dell’applicazione, in maniera tale da permettere di far conoscere al consumatore di cosa tratta la piattaforma.
1 - Le schede si sfogliano in maniera automatica oppure l’utente tramite uno swipe a sinistra o a destra può passare da una schermata all’altra. - L’unica interazione che è possibile in queste schermate oltre allo swipe da una scheda all’altra è quella di cliccare nel bottone apposito “Registrati” così da passare nella schermata successiva ovvero quella di login/ registrazione.
1 - PULSANTE OPZIONI Al tocco di questo pulsante, si aprirà una finestra dove vi è la possibilità di selezionare più voci tra cui: “segnalaci un problema”, “Aiuto”, “impostazioni”.
2 3
2 - CAMPO NOME UTENTE L’utente (solo se già registrato) potrà inserire in questo campo il nome utente scelto durante la registrazione per effettuare l’accesso.
4
3 - CAMPO PASSWORD L’utente (solo se già registrato) potrà inserire in questo campo la password scelta durante la registrazione per effettuare l’accesso.
5 6
4 - PULSANTE ACCEDI Dopo aver inserito le credenziali, attraverso questo pulsante, l’utente potrà effettuare l’accesso alla piattaforma Cibitas con il suo account. 5 - LINK RIPRISTINO PASSWORD Nel caso l’utente si sia dimenticato la password per l’accesso, potrà cliccare in questo link per ripristinare la propria password. 6 - NUOVA REGISTRAZIONE Se l’utente vuole registrarsi con un nuovo account e non è comparsa automaticamente la pagina di registrazione in un primo avvio dell’app, potrà attraverso qeusto link passare alla pagina di registrazione per accedere alla piattaforma.
SEZIONE DI LANCIO/REGISTRAZIONE
20
Mattia Perissinotto STC 5142 A.A. 2017/2018 Relatore: prof.ssa Greta Ruffino
1 - LOGO APPLICAZIONE Pulsante inattivo. 2 - PULSANTE OPZIONI Al tocco di questo pulsante, si aprirà una finestra dove vi è la possibilità di selezionare più voci tra cui: “segnalaci un problema”, “Aiuto”, “impostazioni”.
1
2
4 - CAMPO NOME L’utente dovrà inserire il nome che comparirà anche all’utenza di CIbitas.
3
5 - CAMPO COGNOME L’utente dovrà inserire il cognome che comparirà anche all’utenza di CIbitas.
4 5 6 7 8 9 10 11
3 - CARICA FOTO PROFILO Al tap, l’utente potrà caricare una foto profilo attraverso 2 modalità: dalla galleria immagini del telefonino o attraverso la fotocamera.
6 - CAMPO E-MAIL L’utente qui dovrà inserire una e-mail attiva per la registrazione. L’e-mail è essenziale in quanto successivamente verrà inviato un link per l’attivazione e in un secondo momento in caso di necessità anche il link per il ripristino password. 7/8 - PULSANTI PASSWORD L’utente dovrà inserire una password di minimo 8 cifre per proteggere il proprio account e quindi essenziali per effettuare l’accesso. 9 - PULSANTE REGISTRATI Pulsante che avvia la fase di registrazione (solo se tutti i campi sono stati inseriti e risultano validi). 10/11 - PULSANTE LOGIN TRAMITE SOCIAL All’utente viene concesso anche di loggarsi attraverso il profilo connesso ai social Facebook e Google Plus, così da velocizzare la fase di registrazione.
PAGINA REGISTRAZIONE
SEZIONE HOME
21
Dimensioni effettive Iphone 6 Plus
Mattia Perissinotto STC 5142 A.A. 2017/2018 Relatore: prof.ssa Greta Ruffino
La schermata home costituisce la pagina principale dell’applicazione, attraverso la quale l’utente effettua la navigazione nelle diverse sezioni a lui dedicate. Sono presenti infatti i cinque elementi fondamentali di Cibitas posti nella parte inferiore della schermata, sotto forma di menù fisso. L’utente, in qualsiasi parte dell’applicazione stia navigando, potrà sempre fare riferimento a questo elemento. In alto alla schermata è presente una barra composta di tre pulsanti che rimandano alle tre modalità di ricerca che Cibitas mette a disposizione dell’utente. I tre pulsanti corrispondo rispettivamente alla ricerca tramite codice a abrre, ricerca tramite parole chiave e infine ricerca tramite riconoscimento di imamgine. In più gli viene data l’opportunità di poter rendere personalizzata la sua sezione home grazie alla presenza di una barra a scroll contenente le liste del consumatore, alle quali vi potrà accedere in qualsiasi momento. Inoltre, per dare maggiore importanza alla peculiarità di Cibitas, data dalla sezione delle notizie, nella home l’utente potrà notare tre notizie messe in evidenza le quali, per accedervi, sarà necessario un semplice tap.
SEZIONE HOME
22
Mattia Perissinotto STC 5142 A.A. 2017/2018 Relatore: prof.ssa Greta Ruffino
1 1 - PULSANTE OPZIONI Al tocco di questo pulsante, si aprirà una finestra dove vi è la possibilità di selezionare più voci tra cui: “segnalaci un problema”, “Aiuto”, “impostazioni”. 2 - PULSANTE RICERCA TRAMITE CODICE A BARRE Al tocco di questo pulsante, l’utente avrà la possibilità di effettuare la ricerca di un determinato prodotto attraverso la ricerca del codice a barre (vedi tavola progettuale n. 28).
3
2
4 5
6
3 - PULSANTE RICERCA TRAMITE NOME Al tocco di questo pulsante, l’utente avrà la possibilità di effettuare la ricerca di un determinato prodotto attraverso la ricerca del nome del prodotto o dell’azienda (vedi tavola progettuale n. 27). 4 - PULSANTE RICERCA TRAMITE RICONOSCIMENTO IMMAGINE Al tocco di questo pulsante, l’utente avrà la possibilità di effettuare la ricerca di un determinato prodotto semplicemente fotografando la confezione (vedi tavola progettuale n. 28). 5 - ANTEPRIMA SEZIONE LISTE Questa finestra mostra, sotto forma di icone le liste che l’utente si è creato in sezione liste, accompagnato dal nome e il numero di elementi presenti in essa. Al tocco di una delle liste si verrà trasferiti direttamente alla pagina dedicata alla lista. 6 - ANTEPRIMA SEZIONE NOTIZIE Questo riquadro mostra in evidenza tre notizie scelte dal sistema in base alla data di pubblicazione. al tap di una notizia, si verrà trasferiti direttamente alla pagina principale dove si potrà leggere la notizia. 7 - MENÙ FISSO Menù fisso presente nella maggior parte delle schermate dell’applicazione, così da permettere una navigazione più veloce e facile. In base alla sezione in cui si trova, l’icona dedicata, viene evidenziata.
7
SEZIONE LISTE
23
Mattia Perissinotto STC 5142 A.A. 2017/2018 Relatore: prof.ssa Greta Ruffino
La decisione di inserire la sezione dedicata alle liste è stata effettuata per dare l’opportunità al consumatore di rendere quanto più personale la propria esperienza all’interno di Cibitas. Egli infatti può creare quante più liste desidera, assegnando loro dei nomi e inserendo diversi prodotti alimentari, a seconda dell’esigenza che lo ha portato a voler raggruppare un determinato tipo di genere alimentare piuttosto che un altro.
Dimensioni effettive Iphone 6 Plus
SEZIONE LISTE
24
Mattia Perissinotto STC 5142 A.A. 2017/2018 Relatore: prof.ssa Greta Ruffino
1 - LOGO CON SIMBOLO DI RIFERIMENTO ALLA SEZIONE Per ogni pagina principale di una sezione, comparirà in questa posizione il logo dell’applicazione accompagnato dall’icona che compare anche nel menu fisso, per facilitarne ancora di più la posizione in cui ci si trova. (pulsante inattivo) 2 - PULSANTE OPZIONI Al tocco di questo pul sante, si aprirà una finestra dove vi è la possibilità di selezionare più voci tra cui: “segnalaci un problema”, “Aiuto”, “impostazioni”.
1
2
4
3
3 - PULSANTE MODIFICA LISTA Questo pulsante una volta premuto, consente di modificare i seguenti parametri delle diverse liste create dall’utente.
5 Permette all’utente di spostare una lista in alto o in basso semplicemente trascinandola Elimina lista Permette all’utente di selezionare un colore per personalizzare la propria lista Modifica nome lista
4 - RICERCA LISTA Cliccando su questa zona, l’utente potrà cercare all’interno della sezione una lista precisa tra le molte che ci possono essere.
6
7
5 - LISTA La barra della lista è caratterizzata da elementi grafici e testuali che permettono di distinguere una lista da un’altra. nella zona sinistra della barra vi è prima di tutto un segno grafico a forma di rettangolo colorato che permette agli occhi dell’utente una più facile individuazione della lista. Successivamente vi è il nome della lista (dello stesso colore del segno grafico) con sottostante i nomi dei primi 3 prodotti all’interno della lista. Nella zona di destra vi è il numero di elementi presenti all’interno della lista con successivamente un’icona a forma di freccia che permette all’utente di entrare nella pagina dedicata con un semplice tap. 6 - AGGIUNGI LISTA Attraverso questo pulsante, l’utente potrà aggiungere una nuova lista. 7 - MENÙ FISSO Menù fisso presente nella maggior parte delle schermate dell’applicazione, così da permettere una navigazione più veloce e facile. In base alla sezione in cui si trova, l’icona dedicata, viene evidenziata.
SEZIONE LISTE
25
Mattia Perissinotto STC 5142 A.A. 2017/2018 Relatore: prof.ssa Greta Ruffino
1 - PULSANTE “BACK” Cliccando su questo bottone, l’utente verrà riportato sulla pagina “Sezione liste”. 2 - RICERCA NELLA LISTA Cliccando su questa zona, l’utente potrà cercare un determinato prodotto presente nella lista.
1
2 4
3 - PULSANTE RIMUOVI PRODOTTI Il pulsante permette all’utente di cancellare un prodotto dalla lista.
3
5
Al tap viene eliminato il prodotto dalla lista
4 - NOME LISTA Il nome della lista compare all’interno di un riquadro del colore associato alla lista. 5 - RIQUADRO PRODOTTO Il riquadro del prodotto per tutte le liste compare in bianco con una cornice del colore associato alla lista. Per identificare il prodotto, sulla sinistra compare una foto della confezione, al centro la descrizione e infine a destra il logo dell’azienda produttrice.
PAGINA LISTA
SEZIONE RICERCA
26
Mattia Perissinotto STC 5142 A.A. 2017/2018 Relatore: prof.ssa Greta Ruffino
Uno degli elementi che dà veramente la sensazione all’utente di essere in un rapporto con l’applicazione, è data dalla possibilità di poter effettuare la ricerca dei prodotti in tre diverse modalità che riportano direttamente alla scheda del prodotto. La prima è costituita dalla ricerca tramite foto nella quale è necessario solamente fotografare il prodotto, in modo analogo viene data l’opportunità di effettuare la ricerca tramite codice a barre e, infine, attraverso l’inserimento di parole chiave che caratterizzano il prodotto che si vuole trovare. È stata fatta dunque la scelta volontaria di non inserire una banca dati costituita di diversi generi alimentari al fine di mantenere il carattere di simultaneità e facilità di Cibitas.
Dimensioni effettive Iphone 6 Plus
SEZIONE RICERCA
27
1
2
Mattia Perissinotto STC 5142 A.A. 2017/2018 Relatore: prof.ssa Greta Ruffino
1 - LOGO CON SIMBOLO DI RIFERIMENTO ALLA SEZIONE Per ogni pagina principale di una sezione, comparirà in questa posizione il logo dell’applicazione accompagnato dall’icona che compare anche nel menu fisso, per facilitarne ancora di più la posizione in cui ci si trova. (pulsante inattivo) 2 - PULSANTE OPZIONI Al tocco di questo pulsante, si aprirà una finestra dove vi è la possibilità di selezionare più voci tra cui: “segnalaci un problema”, “Aiuto”, “impostazioni”. 3 - PULSANTE RICERCA PER NOME Questo pulsante una volta premuto, permette di effettuare una ricerca di un determinato prodotto o una determinata azienda all’interno del database dell’applicazione.
3
- Una volta cliccato sul bottone, la schermata espande la sezione ricerca, e riduce i due pulsanti “Scansione codice” e “Riconoscimento immagine”, così da permettere di passare in caso di necessità a queste funzioni. - Compare sotto il campo di ricerca, una finestra che mostra le ultime parole cercate in ordine cronologico.
5
Per chiudere la funzione ricerca per nome, basta effettuare un tap sulla “x” nel campo di ricerca.
Una volta inserito il valore nel campo di ricerca e dato conferma, i prodotti individuati nel database compaiono nel seguente modo, a forma di elenco affiancati ognuno dal logo dell’azienda produttrice.
6
4
4 - MENÙ FISSO Menù fisso presente nella maggior parte delle schermate dell’applicazione, così da permettere una navigazione più veloce e facile. In base alla sezione in cui si trova, l’icona dedicata, viene evidenziata.
SEZIONE RICERCA
28
Mattia Perissinotto STC 5142 A.A. 2017/2018 Relatore: prof.ssa Greta Ruffino
5 - PULSANTE RICERCA TRAMITE CODICE A BARRE Dopo aver schiacciato questo pulsante, si verrà trasferiti ad una schermata dove basterà inquadrare, con l’utilizzo della fotocamera, il codice a barre riportato sulla confezione di un prodotto alimentare per avviare una ricerca.
Torna indietro (sezione ricerca)
1
2
Mostra cronologia ricerche
Come funziona (Popup contenente le informazioni per l’utilizzo)
Riquadro di ricerca (per avere esito positivo ad una ricerca, inquadrare il codice a barre, posizionandolo al centro di questo riquadro)
Attiva flash Esito positivo Inserimento manuale codice
3 Avvia scannerizzazione
Seleziona foto da galleria
5
Esito negativo
Opzioni
6 - PULSANTE RICERCA TRAMITE RICONOSCIMENTO IMMAGINE Dopo aver schiacciato questo pulsante, si verrà trasferiti ad una schermata dove basterà fotografare la confezione di un prodotto per avviare una ricerca.
6
Torna indietro (sezione ricerca)
Come funziona (Popup contenente le informazioni per l’utilizzo)
Mostra cronologia ricerche Riquadro di ricerca (per avere esito positivo, fotografare la confezione, posizionandola all’interno di questo riquadro)
4
Attiva flash
Rotazione attiva/bloccata
Scatta foto
Seleziona foto da galleria
Opzioni
SCHEDA PRODOTTO
29
Dimensioni effettive Iphone 6 Plus
Dimensioni effettive Iphone 6 Plus
Dimensioni effettive Iphone 6 Plus
Mattia Perissinotto STC 5142 A.A. 2017/2018 Relatore: prof.ssa Greta Ruffino
La sezione dedicata alle informazioni relative al prodotto, costituisce il fulcro dell’applicazione e di tutte le intenzioni che hanno portato alla creazione di Cibitas. Infatti, all’interno di questa sezione è possibile trovare una scheda completa di tutte le caratteristiche positive e negative del prodotto selezionato. Si tratta di una pagina interattiva nella quale il consumatore può prendere visione a tutto tondo le informazioni relativa al prodotto, i suoi valori nutrizionali, nonché le foto e i commenti effettuati dagli altri utenti. In più, il consumatore ha la possibilità di poter esprimere il suo grado di soddisfazione nei confronti del prodotto attraverso una barra composta di tre colori: rosso, giallo e verde i quali, rispettivamente corrispondono ad un basso, medio e alto grado di soddisfazione nei suoi confronti. Nei casi in cui poi quel determinato prodotto abbia subito sanzioni o sia in fase processuale, l’utente può notare un simbolo in fianco alla sua immagine tramite la quale, con un tap, raggiunge direttamente la notizia relativa alla sentenza data o in atto.
SCHEDA PRODOTTO
Mattia Perissinotto STC 5142 A.A. 2017/2018 Relatore: prof.ssa Greta Ruffino
30
1 - LOGO CON SIMBOLO DI RIFERIMENTO ALLA SEZIONE Per ogni pagina principale di una sezione, comparirà in questa posizione il logo dell’applicazione accompagnato dall’icona che compare anche nel menu fisso, per facilitarne ancora di più la posizione in cui ci si trova. (pulsante inattivo) 2 - RICERCA Questo pulsante permette di effettuare una nuova ricerca di prodotto. 3 - AGGIUNGI Questo pulsante permette di aggiungere il prodotto ad una delle liste personali.
1
2
3 4 5 6 7 9
8
12
10 11
13
4 - CONDIVIDI Il pulsante permette all’utente di condividere la scheda del prodotto sui social o ad un amico. 5 - PULSANTE OPZIONI Al tocco di questo pulsante, si aprirà una finestra dove vi è la possibilità di selezionare più voci tra cui: “segnalaci un problema”, “Aiuto”, “impostazioni”. 6 - TITOLO CARTELLA Per ricordare all’utente in che cartella si trova, viene evidenziata la sezione dedicata in base alla sua posizione. Inoltre questa sezione fa capire all’utente che ci sono altre cartelle di riferimento alla notizia ovvero in questo caso “Commenti” e “Notizie”. Per potervi accedere basterà uno semplice swipe verso sinistra. 7 - CERTIFICAZIONI Per informare i consumatori che soffrono di determinate patologie, nel riquadro compaiono delle icone raffiguranti l’assenza di determinati ingredienti se nell’etichetta del prodotto ne viene certificata l’assenza.
9 - PREFERITI Con un tap, l’utente può inserire nei preferiti il prodotto visualizzato. 10 - PULSANTE GALLERIA UTENTI Con un tap, l’utente può aprire la galleria con tutte le foto pubblicate dagli utenti. Inoltre viene segnalata la quantità di foto pubblicate.
- La galleria presenta l’anteprima delle foto utenti in riquadri disposti a mosaico. - Per tornare alla scheda del prodotto, basterà cliccare sul bottone indietro a forma di freccia.
11 - BARRA DI VOTAZIONE La barra di votazione (a), consente all’utente di lasciare una votazione personale sul gradimento del prodotto trascinandola verso destra. la votazione può essere espressa tramite 3 diversi indici di gradimento, contraddistinti da 3 diverse emoji colorate (b). Ad ogni livello di gradimento, viene associato oltre all’emoji, un colore di riconoscimento, che compare anche sulla barra riassuntiva di tutti i voti espressi dalla community di CIbitas (c). Inoltre compare anche il numero di votazioni espresse per ogni livello di gradimento dagli utenti, affiancati dalla rispettiva emoji. (a) Nessuna votazione (b) Votazione negativa (b) Votazione neutra (b) Votazione positiva
LEGENDA:
(c) Barra riassuntiva votazioni community Senza glutine
SCHEDA PRODOTTO A
Senza uova
Senza lattosio
Veggie
Adatto per vegetariani
Senza zucchero
Vegan
Adatto per vegani
8 - SLIDESHOW MEDIA Al centro del riquadro compare sempre un’immagine visualizzabile a 360° della confezione del prodotto. Con uno swipe a destra l’utente se previsto dall’azienda, può visualizzare lo spot trasmesso tramite i vari media del prodotto o della linea di prodotti. Scorrendo invece a sinistra, l’utente potrà visualizzare le foto pubblicate dai vari utenti.
12 - DENOMINAZIONE Questo riquadro comprende gli elementi identificativi del prodotto ovvero la sua denominazione, il logo dell’azienda produttrice, diciture presenti sotto la denominazione del prodotto e il tipo di confezione con la rispettiva quantità del contenuto. 13 - ALLERTA SENTENZA Ove presente, questo simbolo se di colore rosso, indica che c’è stata una chiusura di istruttoria relativa al prodotto visualizzato. Nel caso sia di colore giallo, indica che il prodotto è stato denunciato ed è in corso l’analisi da parte dell’autorità interpellata. Istruttoria conclusa
Istruttoria in corso
SCHEDA PRODOTTO
31
Mattia Perissinotto STC 5142 A.A. 2017/2018 Relatore: prof.ssa Greta Ruffino
1 - INGREDIENTI All’interno del riquadro compariranno sotto forma di elenco puntato (per facilitarne la lettura) gli ingredienti riportati in etichetta. 2 - VALORI NUTRIZIONALI All’interno del primo riquadro dedicato ai valori nutrizionali, compare il valore di calorie (per 100g di prodotto) a grandi dimensioni per rendere immediata la consapevolezza del valore energetico.
1 2
1 1 - SIMBOLI In questo riquadro compariranno tutti i simboli che compaiono in etichetta, con relativo approfondimento sul significato.
4 - ELENCO VALORI NUTRIZIONALI I valori nutrizionali principali e non, vengono rappresentati in questo riquadro sotto forma di elenco.
3
4
3 - INFOGRAFICA VALORI NUTRIZIONALI Per facilitarne la lettura, i principali valori nutrizionali, presenti per legge in tutte le etichette (carboidrati, grassi, proteine, sale, fibre) vengono rappresentati all’interno di clessidre colorate. Ove l’indice risulta basso e quindi non distinguibile all’interno delle clessidre, in aiuto c’è anche il valore in quantità sotto forma numerica.
5
SCHEDA PRODOTTO B
5 - FINESTRA INFORMATIVA In aiuto al consumatore, nel caso non conosca un determinato valore nutrizionale, cliccando sulla freccia in altezza del valore sconosciuto, comparirà una finestra con all’interno la spiegazione attraverso l’utilizzo di un linguaggio comprensibile per il consumatore medio.
2
SCHEDA PRODOTTO C
2 - RICICLO L’ultimo riquadro contiene il metodo più corretto di riciclaggio della confezione e delle sue varie componenti, con relativa infografica per rendere la lettura più piacevole e diretta.
SCHEDA PRODOTTO
32
Mattia Perissinotto STC 5142 A.A. 2017/2018 Relatore: prof.ssa Greta Ruffino
1 - COMMENTO Il commento comparirà nella schermata all’interno di una vignetta di un colore definito dal sistema (per facilitare la visualizzazione da un commento ad un altro). All’interno della vignetta oltre al commento compare la foto profilo dell’utente insieme al proprio nickname. Inoltre compare il tempo passato dalla pubblicazione e un simbolo a forma di stella, dove attraverso un tap, l’utente può contrassegnare come preferito il commento che poi verrà aggiunto alla schermata preferiti su “Il mio profilo” (vedi tavola progettuale n. 40). 2 - RISPONDI Vignetta posta sotto alla vignetta dedicata al commento. All’interno vi è il pulsante “Rispondi” che permette all’utente di rispondere al commento collegato. Inoltre viene espresso il numero di commenti effettuati dagli altri utenti. effettuando un tap sulla freccetta, compare una finestra con all’interno i commenti dei vari utenti. In fase di scrittura, l’utente avrà anche la possibilità di citare un prodotto all’interno del testo.
5
1 6
Per citare un prodotto basterà digitare la “@” seguito dal nome del prodotto. Comparirà automaticamente una lista con tutti i prodotti che assomigliano a quanto digitato. Nel commento la citazione risulterà cliccabile e porterà alla scheda del prodotto correlato.
2 3
3 - CAMPO RISPOSTA L’utente una volta aperta la tendina della discussione ad un commento, potrà dare una risposta anche attraverso questo campo, con la possibilità di caricare anche una foto con un semplice passaggio (effettuando un tap nell’icona della fotocamera). 4 - AGGIUNGI COMMENTO Cliccando su questo bottone, l’utente potrà scrivere e postare il suo commento personale relativo alla notizia.
4
SCHEDA PRODOTTO Cartella Commenti
SCHEDA PRODOTTO Cartella Notizie
5 - ISTRUTTORIA Nel caso l’utente non abbia notato l’icona di allerta nella prima cartella della scheda prodotto, non potrà non notarla in questa schermata. Se vi è un’istruttoria chiusa o in corso, verrà sempre messa in evidenza al di sopra di tutte le altre notizie. Le informazioni compaiono all’interno di una barra bianca su sfondo grigio e sono: stato dell’istruttoria con relativo esito, il nome dell’azienda presa in causa, la denominazione del prodotto protagonista, il numero del provvedimento e la data di pubblicazione. Inoltre compare il “leggi” che oltre a consigliare l’utente di leggere l’istruttoria funziona anche come link diretto al documento ufficiale emesso dall’ente (vedi tavola progettuale n. 36). 6 - ANTEPRIMA NEWS L’anteprima delle varie notizie correlate a quella principale, compaiono all’interno di un riquadro caratterizzato a sinistra dall’anteprima della foto principale della notizia, seguita dal logo dell’azienda produttrice, il titolo dell’argomento, una parte scritta dell’articolo e la data di pubblicazione della notizia.
SEZIONE NEWS
33
Mattia Perissinotto STC 5142 A.A. 2017/2018 Relatore: prof.ssa Greta Ruffino
La sezione dedicata alle notizie ha lo scopo di rendere quanto più partecipe il consumatore di tutto ciò che riguarda il settore alimentare. All’interno di essa egli non trova solamente notizie che hanno a che fare con i procedimenti penali in atto o effettuati per alcuni prodotti, bensì ha anche la possibilità di poter prendere visione di notizie derivanti dagli enti promotori, con lo scopo di riuscire a creare un rapporto tra la piattaforma e le diverse associazioni che aderiscono ad essa. L’obiettivo finale di questo spazio è proprio quello di far sì che il consumatore sia più consapevole e tragga vantaggio nel prendere visione di tali articoli, così da porre maggiore attenzione a ciò che acquista. Per riuscire a rendere anche questa sezione interattiva, all’utente è permesso di poter salvare le notizie preferite pubblicate e commentarle, in modo da non fermare mai il flusso di informazioni e opinioni volute appositamente da Cibitas. Dimensioni effettive Iphone 6 Plus
SEZIONE NEWS
34
1 - LOGO CON SIMBOLO DI RIFERIMENTO ALLA SEZIONE Per ogni pagina principale di una sezione, comparirà in questa posizione il logo dell’applicazione accompagnato dall’icona che compare anche nel menu fisso, per facilitarne ancora di più la posizione in cui ci si trova. (pulsante inattivo)
Mattia Perissinotto STC 5142 A.A. 2017/2018 Relatore: prof.ssa Greta Ruffino
7 - LAYOUT NOTIZIE All’utente, viene offerta la possibilità di cambiare layout della schermata notizie, riducendo i riquadri delle notizie e quindi avendo una visualizzazione di più contenuti.
2 - RICERCA NOTIZIA Cliccando su questa zona, l’utente potrà cercare all’interno del database, una precisa notizia.
1
3 4
2
5 7
3 - PULSANTE FILTRO Cliccando su questo pulsante, si aprirà una tendina dove l’utente potrà ridurre la serie di notizie presenti nella schermata in base all’anno di pubblicazione. - Per tornare alla precedente visualizzazione, basterà ricliccare il pulsante “Cambia layout”.
8
- Per selezionare l’anno, basterà effettuare un tap sulla casella corrispondente all’anno preferito. - È possibile attraverso uno swipe a sinistra, scorrere le annate per trovare un anno meno recente. - Per chiudere la finestra basterà effettuare un tap sul pulsante “filtro”.
4 - PREFERITI Questo pulsante permette all’utente di visualizzare nella lista delle notizie, solo le notizie che sono state contrassegnate dall’utente stesso come preferite.
6
5 - PULSANTE OPZIONI Al tocco di questo pulsante, si aprirà una finestra dove vi è la possibilità di selezionare più voci tra cui: “segnalaci un problema”, “Aiuto”, “impostazioni”. 6 - MENÙ FISSO Menù fisso presente nella maggior parte delle schermate dell’applicazione, così da permettere una navigazione più veloce e facile. In base alla sezione in cui si trova, l’icona dedicata, viene evidenziata.
8 - BARRA NOTIZIA La notizia è rappresentata all’interno di un riquadro dove compaiono diversi elementi presenti all’interno della notizia ovvero: il logo dell’azienda produttrice (in caso di una notizia relativa ad un prodotto preciso) o il logo dell’associazione promotore della notizia, l’immagine principale della notizia, il titolo della notizia, il numero di commenti effettuati dagli utenti all’interno della pagina, quantità di visualizzazioni effettuate dagli utenti e la data di pubblicazione della notizia. Inoltre compaiono due simboli, ovvero un paio di occhiali e una stella. Il primo se evidenziato segnala all’utente che ha già visualizzato quella notizia in caso contrario la notizia non è mai stata visualizzata. Il secondo se evidenziato indica che la notizia è stata contrassegnata come preferita dall’utente. L’utente può disattivare la preferenza direttamente da questa schermata senza dover necessariamente entrare all’interno della pagina della notizia. Il riquadro inoltre è presentato colorato con colori ripresi dal logo identificativo dell’azienda/sito protagonista della notizia.
SEZIONE NEWS
35
Mattia Perissinotto STC 5142 A.A. 2017/2018 Relatore: prof.ssa Greta Ruffino
1 - PULSANTE “BACK” Cliccando su questo bottone, l’utente verrà riportato sulla pagina “Sezione notizie”. 2 - PREFERITO Questo pulsante consente all’utente di contrassegnare la notizia come preferita. 3 - CONDIVIDI Il pulsante permette all’utente di condividere il contenuto della notizia sui social o ad un amico.
1
5
7 10
6 8
2
3
9
4
4 - PULSANTE OPZIONI Al tocco di questo pulsante, si aprirà una finestra dove vi è la possibilità di selezionare più voci tra cui: “segnalaci un problema”, “Aiuto”, “impostazioni”. 5- TITOLO CARTELLA Per ricordare all’utente in che cartella si trova, viene evidenziata la sezione dedicata in base alla sua posizione. Inoltre questa sezione fa capire all’utente che ci sono altre cartelle di riferimento alla notizia ovvero in questo caso “Commenti” e “Altre News”. Per potervi accedere basterà uno semplice swipe verso sinistra. 6 - INTESTAZIONE NOTIZIA All’interno di questo riquadro vi sono gli elementi principali della notizia sotto forma di immagine ovvero: La confezione del prodotto protagonista della notizia, il logo dell’azienda produttrice e il logo dell’ente che ha emesso la sentenza sul prodotto. 7 - BOTTONE SCHEDA Al tap, l’utente verrà reindirizzato alla scheda del prodotto di riferimento (vedi tavola progettuale n. 29). 8 - CONTENUTO NOTIZIA Il contenuto della notizia compare in un riquadro separato a quello dove compaiono gli elementi identificativi della notizia. All’interno di questo riquado vi è in alto a sinistra la data di pubblicazione della notizia. Successivamente si trova il titolo dell’argomento con relativo sottotitolo. Infine si troverà una parte testuale contenuta nella sentenza con alla fine un altro link che rimanda alla sentenza vera e propria.
PAGINA NOTIZIA Cartella Notizia
9 - SFONDO Il colore di sfondo della schermata è lo stesso colore utilizzato nel riquadro di anteprima presente nella pagina principale delle news.
SEZIONE NEWS
Mattia Perissinotto STC 5142 A.A. 2017/2018 Relatore: prof.ssa Greta Ruffino
36
10 - BOTTONE SANZIONE Al tap, l’utente verrà trasferito alla pagina dedicata alla sentenza del prodotto.
La delibera viene presentata sotto forma di PDF e vi è la possibilità di ispezionarlo effettuando uno scroll verso il basso. È possibile conoscere immediatamente il numero del provvedimento, l’azienda presa in esame e l’ente esaminatore grazie a loghi inseriti in alto alla schermata.
1
5
2
3
4
Opzioni Torna indietro (sezione notizie) Scarica nel device
7 10
6 8
9
Condividi
Indicatori di pagina
11 - NOTIZIA SITO ASSOCIAZIONE PROMOTRICE Nel caso di una notizia ripresa dal sito di una delle associazioni promotrici, il layout rimane identico con delle piccole differenze grafiche vista la diversità dei contenuti.
- Nel riquadro superiore, al posto dell’immagine del prodotto, compare l’immagine contenuta nella notizia. - Al posto dei loghi dell’azienda e dell’ente, compare il logo dell’associazione. Vai alla pagina riferimento
PAGINA NOTIZIA Cartella Notizia
web
di
SEZIONE NEWS
37
Mattia Perissinotto STC 5142 A.A. 2017/2018 Relatore: prof.ssa Greta Ruffino
1 - PULSANTE “BACK” Cliccando su questo bottone, l’utente verrà riportato sulla pagina “Sezione notizie”. 2 - PREFERITO Questo pulsante consente all’utente di contrassegnare la notizia come preferita. 3 - CONDIVIDI Il pulsante permette all’utente di condividere il contenuto della notizia sui social o ad un amico.
1
5
3
2
6 7
8
4
4 - PULSANTE OPZIONI Al tocco di questo pulsante, si aprirà una finestra dove vi è la possibilità di selezionare più voci tra cui: “segnalaci un problema”, “Aiuto”, “impostazioni”. 5 - TITOLO CARTELLA Per ricordare all’utente in che cartella si trova, viene evidenziata la sezione dedicata in base alla sua posizione. Inoltre questa sezione fa capire all’utente che ci sono altre cartelle di riferimento alla notizia ovvero in questo caso “Notizia” e “Altre News”. Per potervi accedere basterà uno semplice swipe verso destra o sinistra. 6 - COMMENTO Il commento comparirà nella schermata all’interno di una vignetta di un colore definito dal sistema (per facilitare la visualizzazione da un commento ad un altro). All’interno della vignetta oltre al commento compare la foto profilo dell’utente insieme al proprio nickname. Inoltre compare il tempo passato dalla pubblicazione e un simbolo a forma di stella, dove attraverso un tap, l’utente può contrassegnare come preferito il commento che poi verrà aggiunto alla schermata preferiti su “Il mio profilo” (vedi tavola progettuale n. 40). 7 - RISPONDI Vignetta posta sotto alla vignetta dedicata al commento. All’interno vi è il pulsante “Rispondi” che permette all’utente di rispondere al commento collegato. Inoltre viene espresso il numero di commenti effettuati dagli altri utenti relativi a quel commento. Effettuando un tap sulla freccetta, compare una finestra con all’interno i commenti dei vari utenti.
PAGINA NOTIZIA
Cartella Commenti
8 - AGGIUNGI COMMENTO Cliccando su questo bottone, l’utente potrà scrivere e postare il suo commento personale riguardo la notizia.
SEZIONE NEWS
38
1
5
2
3
6
Mattia Perissinotto STC 5142 A.A. 2017/2018 Relatore: prof.ssa Greta Ruffino
1 - PULSANTE “BACK” Cliccando su questo bottone, l’utente verrà riportato sulla pagina “Sezione notizie”.
4
2 - PREFERITO Questo pulsante consente all’utente di contrassegnare la notizia come preferita. 3 - CONDIVIDI Il pulsante permette all’utente di condividere il contenuto della notizia sui social o ad un amico. 4 - PULSANTE OPZIONI Al tocco di questo pulsante, si aprirà una finestra dove vi è la possibilità di selezionare più voci tra cui: “segnalaci un problema”, “Aiuto”, “impostazioni”. 5 - TITOLO CARTELLA Per ricordare all’utente in che cartella si trova, viene evidenziata la sezione dedicata in base alla sua posizione. Inoltre questa sezione fa capire all’utente che ci sono altre cartelle di riferimento alla notizia ovvero in questo caso “Commenti” e “Notizia”. Per potervi accedere basterà uno semplice swipe verso destra. 6 - ANTEPRIMA NEWS L’anteprima delle varie notizie correlate a quella principale, compaiono all’interno di un riquadro caratterizzato a sinistra dall’anteprima della foto principale della notizia, seguita dal logo dell’azienda produttrice, il titolo dell’argomento, una sezione dell’articolo e la data di pubblicazione della notizia.
PAGINA NOTIZIA
Cartella Altre News
SEZIONE PROFILO
39
Dimensioni effettive Iphone 6 Plus
Mattia Perissinotto STC 5142 A.A. 2017/2018 Relatore: prof.ssa Greta Ruffino
In una qualsiasi piattaforma che richieda un’esposizione da parte dell’utente è necessaria la registrazione da parte dello stesso e dunque, la creazione di un profilo virtuale. Qui infatti il consumatore può creare la sua pagina personale composta di una foto profilo, il proprio nome e cognome e alcune piccole sezioni, all’interno delle quali, sono inseriti tutti gli elementi che durante la navigazione in Cibitas, sono stati segnalati come preferiti e quindi foto, commenti, notizie e prodotti. In più ha la possibilità di poter tenere sotto controllo quanto egli sia attivo all’interno della piattaforma grazie ad una semplice sezione all’interno della stessa schermata che permette di vedere quanti commenti e quante votazioni ha dato nel corso del tempo. Infine, in questa schermata viene dedicato uno spazio fondamentale, ossia quello delle donazioni. Infatti, tramite un tap sul simbolo selezionato per le donazioni, l’utente è libero di contribuire o meno al mantenimento di Cibitas sul mercato. Ebbene, trattandosi di un progetto in collaborazione con associazioni no profit, per riuscire a mantenere gratuita la piattaforma, è stato pensato di inserire questa possibilità pe riuscire, ancora una volta, a garantire imparzialità e trasparenza.
SEZIONE PROFILO
Mattia Perissinotto STC 5142 A.A. 2017/2018 Relatore: prof.ssa Greta Ruffino
40
1 - LOGO CON SIMBOLO DI RIFERIMENTO ALLA SEZIONE Per ogni pagina principale di una sezione, comparirà in questa posizione il logo dell’applicazione accompagnato dall’icona che compare anche nel menu fisso, per facilitarne ancora di più la posizione in cui ci si trova. (pulsante inattivo)
1
2
2 - PULSANTE DONAZIONE Al tocco di questo pulsante, si aprirà una finestra dove vi è la possibilità di effettuare una donazione per contribuire allo sviluppo e al mantenimento dell’applicazione.
3 4
3 - PULSANTE CONDIVIDI Pulsante che offre la possibilità di condividere l’applicazione con uno o più amici attraverso diversi metodi (Whatsapp, Facebook, SMS,...). 4 - PULSANTE OPZIONI Al tocco di questo pulsante, si aprirà una finestra dove vi è la possibilità di selezionare più voci tra cui: “segnalaci un problema”, “Aiuto”, “impostazioni”.
5
5 - FOTO PROFILO Anteprima della propria foto profilo e del proprio nome utente.
6
7
8
9
10
6 - I MIEI PREFERITI Pulsante che porta alla pagina dei preferiti. All’interno della pagina dei preferiti l’utente potrà trovare i prodotti, le notizie, i commenti che ha contrassegnato con l’icona a forma di stella. Inoltre nel pulsante compare un riassunto degli elementi salvati sotto forma di quantità.
PRODOTTI: nell’elenco il prodotto è rappresentato dalla foto della confezione, dal logo aziendale e dalla descrizione. NOTIZIE: nell’elenco le notizie compaiono con a sinistra il logo o dell’azienda produttrice se si tratta di un prodotto o del sito di riferimento in caso di notizia esterna.
11
COMMENTI: gli elementi che compaiono del commento sono la foto profilo dell’utente, la data e ora di pubblicazione, l’argomento di riferimento e una sezione del commento.
12 13
Opzioni Torna indietro (sezione profilo) Elimina elementi
14
Filtra elementi
SEZIONE PROFILO
41
7 - I MIEI VOTI Pulsante che porta alla pagina dei voti personali. All’interno della pagina di riferimento, si troveranno i voti che l’utente ha effettuato nella scheda prodotto (vedi tavola progettuale n. 30).
Nell’elenco del voto, a singolo voto, sono affiancate: l’indice di gradimento segnalato, il logo dell’azienda produttrice del prodotto, la descrizione del prodotto e la foto della confezione. Opzioni Torna indietro (sezione profilo) Elimina elementi Filtra elementi
8 - I MIEI COMMENTI Pulsante che porta alla pagina dei propri commenti lasciati all’interno delle varie notizie o delle schede del prodotto.
i commenti vengono rappresentati insieme alla data e ora di pubblicazione e il titolo del commento o del prodotto di riferimento.
9 - LE MIE FOTO Pulsante che porta alla pagina delle foto personali scattate e inserite nei commenti di una determinata notizia o prodotto.
La griglia di visualizzazione è a 4 colonne e le anteprime delle foto sono ritagliate in forme quadrate per ottimizzare lo spazio della schermata ed aumentare la quantità di foto disponibili nel display. Opzioni Torna indietro (sezione profilo) Elimina elementi Filtra elementi
10 - DATI PERSONALI Pulsante che porta alla pagina personale dell’utente, dove potrà modificare Nome, Cognome, E-mail e Password.
Opzioni Torna indietro (sezione profilo)
Opzioni Torna indietro (sezione profilo) Elimina elementi Filtra elementi
Elimina elementi Filtra elementi
Mattia Perissinotto STC 5142 A.A. 2017/2018 Relatore: prof.ssa Greta Ruffino
11 - IMPOSTAZIONI Pulsante che porta alla pagina delle impostazioni generali. 12 - ASSISTENZA Pulsante che porta alla pagina di assistenza dell’applicazione dove, l’utente può trovare i contatti in caso di problemi o per dei chiarimenti. 13 - DONAZIONE Pulsante che porta alla pagina di donazione. All’interno di essa, l’utente potrà donare in maniera anonima e non, una somma di denaro di qualsiasi importo superiore a 1 euro. 14 - MENÙ FISSO Menù fisso presente nella maggior parte delle schermate dell’applicazione, così da permettere una navigazione più veloce e facile. In base alla sezione in cui si trova, l’icona dedicata, viene evidenziata.