Elaborato di Tecnologie Web: progettazione

Personas

Per guidare le scelte progettuali, sono stati identificati tre possibili profili di utenti:

• Luca, 23 anni, studente universitario: vive in un appartamento universitario, ha un budget limitato, cerca offerte a prezzi competitivi. Nella sua quotidianitá utilizza principalmente lo smartphone per fare acquisti online, piú raramente utilizza il laptop. Preferisce interfacce semplici ma colorate che permettono di effettuare checkout rapido. È affetto da daltonismo. Quando acquista un prodotto ne controlla dettagliatamente l'immagine.
• Giulia, 45 anni, addetta alla gestione dei laboratori universitari: acquista sia per uso personale che per il dipartimento (soprattutto hardware). Preferisce avere una descrizione completa di un prodotto. Sia per scopo personale che lavorativo utilizza principalmente un ambiente desktop. I prodotti acquistati, soprattutto per il lavoro, devono essere sempre funzionanti: preferisce fare acquisti in negozi online in cui é possibile contattare il venditore in caso di necessitá. Ha molto a cuore la sicurezza: preferisce utilizzare applicazioni che mettono al sicuro i suoi dati.
• Sofia, 20 anni, studentessa universitaria: presenta ipovisione seria. Utilizza screen reader sia da telefono che da laptop. Dipende fortemente dalle descrizioni vocali e dalla navigazione tramite tastiera. Preferisce applicazioni con alta accessibilitá.

Scenari

Per ogni persona è stato immaginato uno scenario d'uso realistico dell'applicazione:

• Luca é in pausa tra una lezione e l'altra al campus. Ha appena scoperto che la relazione del suo prossimo esame deve per forza essere stampata, necessita quindi di carta e cartucce per la stampante. Apre l'app sullo smartphone, filtra "cancelleria", "solo prodotti scontati" e cerca "carta" sulla barra di ricerca. Aggiunge rapidamente al carrello il prodotto; ripete l'operazione anche per le cartucce da stampante. Luca conferma rapidamente l'ordine, riporta l'indirizzo del campus per la spedizione e torna a lezione.
• Giulia deve sostituire 3 monitor del laboratorio informatico. Dal desktop dell'ufficio cerca "monitor 24 pollici", filtra per fascia di prezzo e legge attentamente le specifiche dei prodotti di suo interesse. Giulia trova dei modelli perfetti ma ha dubbi sulla garanzia di questi ultimi, decide quindi di contattare il venditore per chiedere maggiori informazioni. Dopo la conferma, ordina i 3 dispositivi.
• Sofia ha deciso di fare scorta di penne ed evidenziatori, filtra quindi i prodotti in base alla categoria "cancelleria". Tramite uno shortcut nella home-page va al catalogo e filtra i prodotti. Scorrendo la pagina tramite TAB arriva al prodotto desiderato, ci clicca sopra, legge la descrizione tramite screen reader e decide di procedere all'acquisto.

Design

Le seguenti decisioni progettuali derivano dall’analisi dei profili utenti e dei loro scenari d’uso:

• Gestione degli sconti: se un prodotto ha uno sconto quest'ultimo deve essere ben visibile. Per studenti con budget limitato puó essere utile filtrare i prodotti in base al prezzo e alla presenza o meno di uno sconto applicato.

• Interfaccia astratta dal dispositivo: l'applicazione verrá utilizzata sia da ambienti desktop che mobile. Si ipotizza che principalmente l'accesso all'app avverrá da smarphone, si decide quindi di sviluppare l'interfaccia prima per dispositivi mobili e successivamente per ambiente desktop.

• Interfaccia colorata: si ipotizza che l'applicazione venga usata piú dagli studenti universitari che dall'amministrazione del campus stesso, si decide di dare un aspetto vivace all'interfaccia, colorata con tonalitá tra loro armoniose (ma sempre rispettando i valori di contrasto e rispettando il daltonismo degli utenti). Si decide di basare l'interfaccia su una palette arancione/gialla/rossa/azzurra con tonalitá a pastello. In caso di colori problematici per chi é affetto da daltonismo, come ad esempio l'accostamento di rosso e verde per accettare o negare una azione, si accerta disambiguitá tramite l'utilizzo di testo e simboli appositi.

• Prodotti descrittivi: tutti i prodotti devono avere una propria pagina in modo tale da poter mantenere l'attenzione sul singolo articolo e mostrare una descrizione completa di quest'ultimo.

• Messaggistica col venditore: si crea un sistema di notifiche multifunzione. Il venditore potrá:

  • essere aggiornato sull'esaurimento scorte di un prodotto
  • essere aggiornato sul piazzamento di un ordine
  • inviare un messaggio personalizzato a tutti i clienti o ad uno specifico cliente

  Il cliente invece potrá:

  • essere aggiornato sul cambio dello stato di un proprio ordine
  • essere aggiornato su grossi sconti (ad esempio sconti superiori al 20%)
  • contattare direttamente il venditore tramite un messaggio personalizzato

• Navigazione da tastiera: per dare supporto ai bisogni degli utilizzatori con disabilitá si decide di rendere navigabile l'intero sito web tramite tastiera. Si fa particolare attenzione a dare il focus a pop-up e messaggi generati dopo il caricamento della pagina.

• Immagini e prodotti: ogni prodotto deve avere una immagine associata, in modo tale che un articolo possa essere riconosciuto a primo impatto. Tutte le immagini dei prodotti avranno una alternativa testuale, in modo da non discriminare l'utilizzo di screen reader.

• Password protetta: si decide di proteggere le password cifrandole, in modo da renderle sicure nel database (si sceglie di utilizzare l'algoritmo ARGON2).

Architettura dell'applicazione

Le pagine ideate sono:

• Vetrina: landing page degli utenti e dell'amministratore. Da' il benvenuto all'utente e mostra alcuni articoli in offerta e i piú popolari (la popolaritá é basata sul numero di vendite per articolo)
• Catalogo: listino dei prodotti con filtri applicabili su di essi. Da qui il venditore puó aggiungere/modificare un prodotto.
• Contatti: pagina che permette l'invio di notifiche personalizzate verso il venditore o verso i clienti.
• Login / Registrazione: pagine simili atte all'accesso e alla registrazione degli utenti
• Notifiche: raccolta con tutte le notifiche dell'utente che possono essere segnate come lette oppure eliminate
• Carrello: pagina che dá un resoconto all'utente degli articoli da lui selezionati per l'acquisto. Nel carrello i prezzi vengono bloccati al momento della loro aggiunta.
• Ordini: pagina che permette agli utenti di visualizzare i propri ordini e lo stato di quest'ultimi. Il venditore, da questa pagina, controlla tutti gli ordini che vengono effettuati dai clienti.

Mockup

Vengono prodotti i mockup tramite il software "Figma" delle pagine sopra elencate. Per ogni pagina si produce prima il mockup della versione mobile per poi aggiungere progressivamente dettagli passando alla versione desktop. A seguito della produzione dei mockup e dell'approvazione di questi da parte di un gruppo di colleghi si procede allo sviluppo dell'applicazione. L'interfaccia finale non si discosta molto dai mockup: sono state apportate modifiche ad alcuni colori, alla presentazione degli articoli in vendita nel listino e aggiunti dettagli decorativi come ad esempio le ombreggiature o gli angoli arrotondati.