Memorica Studio

Servizi fotografici su appuntamento

Piattaforma di prenotazione con area riservata e assistente conversazionale, ripensata perché il percorso di prenotazione regga anche da tastiera e da screen reader.

Lavoro realizzato per un cliente.

Scheda in lavorazione. Testi e immagini di questo caso sono provvisori: la struttura è definitiva, i contenuti no.

Immagine segnaposto. Qui andrà: la schermata di scelta della data, con il calendario mensile, il giorno selezionato evidenziato da bordo e testo, e la fascia oraria disponibile elencata sotto — Scelta della data: la selezione è indicata dal bordo e dal testo, non dal solo colore.

Da dove si partiva

Il percorso di prenotazione si interrompeva nei punti in cui l’utente doveva indovinare: campi senza indicazione del formato, errori mostrati solo dopo l’invio, calendario utilizzabile soltanto col mouse.

L’area riservata era raggiungibile ma non navigabile da tastiera: il focus si perdeva all’apertura dei pannelli e non c’era modo di tornare indietro senza il puntatore.

Cosa abbiamo fatto

Ridisegno del percorso di prenotazione, passaggio per passaggio, con stati di errore e di attesa progettati e non lasciati al caso.
Calendario utilizzabile da tastiera, con annunci per screen reader al cambio di mese e alla selezione.
Gestione esplicita del focus nell’area riservata: apertura, chiusura e ritorno al punto di partenza.
Assistente conversazionale con area messaggi annunciata e chiusura da tastiera.

Immagine segnaposto. Qui andrà: l’area riservata con l’elenco degli appuntamenti, ciascuno con data, stato e i comandi per spostarlo o annullarlo — Area riservata: ogni appuntamento porta con sé le azioni possibili.

Immagine segnaposto. Qui andrà: l’assistente conversazionale aperto nella pagina, con tre domande suggerite come pulsanti e il campo di scrittura con la sua etichetta visibile — Assistente: domande suggerite come veri pulsanti, campo con etichetta vera.

Il modulo di prenotazione, prima e dopo

I due stati sono affiancati e sempre visibili: niente da trascinare, niente da scoprire col puntatore.

Prima

Immagine segnaposto. Qui andrà: il modulo originale: i campi hanno il segnaposto grigio al posto dell’etichetta, e il messaggio di errore è una sola scritta rossa in cima al modulo

Dopo

Immagine segnaposto. Qui andrà: il modulo ridisegnato: ogni campo ha l’etichetta sopra, il formato atteso sotto, e l’errore compare accanto al campo che lo riguarda

Cosa mostra questo caso

Progettazione di percorsi di conversione
Accessibilità da tastiera e con screen reader
Sistema di componenti con stati completi
Interfacce conversazionali accessibili

Un problema simile?

Raccontacelo. Se non è il nostro campo te lo diciamo subito.

Parliamone oppure guarda gli altri lavori