Salta al contenuto principale
VUXAUX/UI design · interfacce accessibili
Verifica il tuo sitoLa normaServiziChi dichiara cosaDomandeLavoriRichiedi la diagnosi

Lavori / Memorica Studio

Progetto reale

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.

Vai al sito memorica-studio.com (si apre in una nuova scheda)

Capitolo 1 · Il problema

Il sito diceva di funzionare.

Memorica Studio è uno studio fotografico di Castenaso, alle porte di Bologna. Aveva già un sito e aveva già un sistema di prenotazione: si sceglieva il servizio, la data, il luogo, si firmava il contratto e si pagava, tutto in un percorso solo.

Il problema non era che mancasse qualcosa. Era che nessuno aveva mai verificato se ciò che il sistema dichiarava di fare corrispondesse a ciò che faceva. Un pannello di controllo tutto verde, un deploy «riuscito», una pagina che si apre: sono tre cose che sembrano una prova e non lo sono.


Capitolo 2 · La ricerca

Un piccolo gruppo, nessun laboratorio.

Il sito è stato provato più volte da un piccolo gruppo di amici, conoscenti e potenziali clienti, in sessioni informali. Non è ricerca strutturata: nessun protocollo, nessun campione rappresentativo, nessuna registrazione. È la cosa che si può fare davvero quando si è un’attività piccola, e vale la pena dirlo com’è invece di darle un nome che non merita.

La parte positiva è presto detta: l’iscrizione veniva percepita come facile e più di uno ha dichiarato che avrebbe comprato. È un buon segno, ma è anche il tipo di riscontro che si ottiene chiedendo a chi ti vuole bene.

Il risultato che conta è l’altro. Le persone oltre i sessant’anni si fermavano tutte nello stesso punto: dopo aver inserito la mail in registrazione non capivano di dover uscire dal sito, aprire la propria casella di posta e cliccare il link di conferma. Il passaggio dal sito all’email non era ovvio — e non lo è quasi mai, perché chiede di cambiare applicazione nel mezzo di un’operazione.

Un difetto che si ripete vale più di molte approvazioni: le approvazioni confermano quello che già credevi, il difetto no.


Capitolo 3 · La diagnosi

Cosa abbiamo trovato chiedendo alle cose vive.

Ogni verifica è stata fatta interrogando il sistema in funzione, non leggendo il codice. È una distinzione che sembra pedante finché non produce numeri come questi.

27 su 31funzioni del server che rispondevano con un errore
Chiamate una per una in produzione. Il percorso di prenotazione era morto — nessuno poteva prenotare — mentre il pannello mostrava il deploy come riuscito.
273punti in cui il colore del marchio era scritto e non veniva applicato
La classe esisteva nel codice ma non nel foglio di stile compilato: le icone ereditavano il grigio del testo. Da qui i «quadrati neri» segnalati dalla titolare.
2,83 : 1contrasto reale di quelle icone, contro il minimo di 3:1
Criterio 1.4.11 delle WCAG. Calcolato sul colore che il browser applica davvero, non su quello scritto nel codice.
1/2026il numero che ogni nuova fattura avrebbe preso
Il contatore viveva nella memoria del browser e ripartiva da zero a ogni ricaricamento. Con la 7/2026 già emessa a mano, la prima fattura del sito avrebbe duplicato un numero.
200la risposta del sito a qualunque indirizzo inesistente
Una regola restituiva la home al posto dell’errore: un file mancante non si vedeva, e infatti per ore non si è visto.

Capitolo 4 · Le decisioni

Dichiarare invece di nascondere.

Ogni correzione ha seguito lo stesso criterio: rendere impossibile l’errore, non renderlo meno probabile. Dove non si poteva, dichiararlo.

I numeri delle fatture non li assegna più il browser ma il database, con un vincolo che rende il duplicato impossibile anche se un domani qualcuno scrivesse un secondo pezzo di codice che assegna numeri. Lo stesso per gli sconti: due prenotazioni simultanee non possono spendere due volte lo stesso utilizzo, perché il limite sta nella condizione della scrittura, non in un controllo fatto prima.

Quando un pagamento rateale viene rifiutato, la data non si libera subito: resta riservata a quel cliente per tre giorni, perché chi ha provato a pagare è interessato. Ma i tre giorni sono un numero solo, scritto in un posto solo, e c’è qualcosa che li fa scadere davvero — altrimenti sarebbero una frase in una email.

E la regola che tiene insieme tutto: il sito ha smesso di rispondere «va bene» a un indirizzo che non esiste. Un errore che non si vede non è tolleranza, è un guasto rimandato.


Capitolo 5 · Il risultato

Cosa è vero adesso.

Nessuno di questi numeri riguarda i clienti acquisiti: sarebbe presto per dirlo e non lo diremo finché non sarà misurabile. Riguardano la presenza digitale — cioè se il sistema fa quello che dichiara.

31 su 31funzioni raggiungibili
Riverificate una per una dopo la correzione. Le tre che rispondono con un errore non sono endpoint: sono moduli di appoggio, e ora è scritto dove serve.
404la risposta a un indirizzo inesistente
Un file che manca ora si vede subito, invece di nascondersi dietro una pagina che si apre.
8/2026il numero della prossima fattura
Assegnato dal database in modo atomico, con il contatore separato dalle fatture perché le prime sette sono state emesse a mano e non esistono come righe.
4email automatiche che prima non partivano
Conferma del pagamento riuscito — che non esisteva per nessun metodo, nemmeno con la carta — avviso al cliente e alla titolare se il pagamento viene rifiutato, e un solo promemoria prima che la data si liberi.

Capitolo 6 · L’accessibilità

Il colore che non arrivava.

Il difetto più istruttivo dell’intero lavoro è stato anche il più banale. L’accento del marchio era scritto in 273 punti dell’interfaccia e non compariva in nessuno: la classe c’era nel codice, la regola corrispondente non c’era nel foglio di stile. Le icone ereditavano il grigio del testo e finivano dello stesso colore del loro fondo scuro.

Chi lo guardava vedeva quadrati neri e pensava a un’immagine mancante. Chi leggeva il codice vedeva un colore scelto con cura. Nessuno dei due si sbagliava, ed è esattamente il punto: una cosa scritta non è una cosa che accade.

Corretto quello, sono rientrati anche i lucchetti delle schermate di accesso, che erano lo stesso difetto in un altro posto. E le icone dentro i dischi scuri hanno preso un colore più chiaro, perché lì l’accento originale si sarebbe fermato a 2,83:1 — sotto il minimo che la norma chiede.


Capitolo 7

Il lavoro non è finito, ed è giusto dirlo.

Il percorso di prenotazione è stato misurato — trentanove attivazioni distinte dalla home al pagamento, con il metodo di conteggio dichiarato — e ne esiste un progetto di riduzione. Quel progetto non è ancora in produzione, quindi qui non compare nessun «dopo»: comparirà quando sarà una misura e non una previsione.

Se riconosci qualcosa di tuo in questa storia — un pannello verde su un sistema che non funziona, un colore che non si vede, un numero che nessuno ha mai verificato — è il tipo di lavoro che facciamo.

Le schermate, prima e dopo

Una schermata da sola non dice niente: mostra com’è adesso, e chi non ha visto il prima non ha modo di capire cosa sia cambiato. Perciò ogni passaggio è una coppia.

La prenotazione

Prima «Prenota online» era una scheda con scritto «1 ora» e il pulsante «Richiedi di prenotare»: nessun calendario, nessun prezzo, la conferma arrivava dopo. Ora il percorso è in sei passaggi dichiarati, con il riepilogo sempre a lato e il prezzo che si aggiorna a ogni scelta.

Prima

Pagina «Prenota online» del sito precedente: una scheda «Servizio fotografico professionale, 1 ora» con il pulsante «Richiedi di prenotare».

Dopo

Passo 1 di 6 della prenotazione attuale: scelta tra privato e azienda, elenco dei servizi e riepilogo laterale con il prezzo in tempo reale.

Il listino

Prima i prezzi erano frasi sparse dentro la pagina Servizi: per sapere quanto costavano quattro ore bisognava scrivere e aspettare. Ora la tabella mostra sei durate, la tariffa oraria che scende da 170€/ora a 120€/ora e il totale accanto a ogni riga.

Prima

Pagina «I nostri servizi» del sito precedente: testo descrittivo ed elenco puntato dei servizi fotografici, senza tabella prezzi.

Dopo

Pagina «Prezzi» del sito attuale: tabella con sei durate, tariffa oraria da 170€/h a 120€/h e totale per ciascuna, accanto alle domande frequenti.

Il portfolio

Prima il portfolio era testo introduttivo seguito da riquadri vuoti con i titoli lasciati come link blu di default. Ora le sei raccolte dichiarano quante foto contengono e si aprono sopra la pagina.

Prima

Pagina Portfolio del sito precedente: testo di presentazione e tre riquadri senza anteprima con i titoli come collegamenti blu.

Dopo

Sezione «Alcuni lavori» del sito attuale: sei schede scure con il nome della raccolta e il numero di foto, da «Brand & Aziende, 71 foto» a «Virtual Tour 360°, su richiesta».

Il contatto

Prima una domanda costava quattro campi e un’attesa di cui nessuno dichiarava la durata. Ora l’assistente in pagina propone le domande più frequenti e porta direttamente alla prenotazione, senza lasciare la pagina.

Prima

Sezione «Hai domande?» del sito precedente: campi Nome, Cognome, Email e pulsante Invia.

Dopo

Home del sito attuale con l’assistente «Nico» aperto sopra la pagina: quattro domande pronte e il collegamento «Vai alla prenotazione».

La home

Prima la home apriva su sei voci di menù e due parole sottolineate, senza dire cosa facesse lo studio. Ora la prima riga dichiara il servizio, il primo elemento cliccabile è la prenotazione e ogni raccolta del portfolio indica quante foto contiene.

Prima

Home del sito precedente in una cattura d’archivio: menù con sei voci, area immagine non caricata, i collegamenti «Fotografia» e «Grafica».
Cattura dall’archivio web: le fotografie della home non sono state salvate dall’archivio e compaiono come segnaposto. Il sito precedente le mostrava regolarmente.

Dopo

Home del sito attuale: titolo «Dalla prenotazione alla consegna delle foto, in un unico posto», pulsante «Prenota il tuo shooting» e quattro raccolte del portfolio con il numero di foto.

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

VUXA

UX/UI design · interfacce accessibili. Progettiamo siti, e-commerce e applicazioni che le persone usano senza doverci pensare, conformi all’obbligo di accessibilità.

Contatti

  • info@vuxa.it
  • +39 350 573 3061
    lunedì–venerdì, 9–18
  • Castenaso (BO)

Sito

  • Servizi
  • Chi dichiara cosa
  • Metodo
  • Domande frequenti
  • Lavori
  • Verifica gratuita

Trasparenza

  • Informazioni sull’accessibilità
  • Segnala un problema di accessibilità
  • Privacy e cookie
  • P.IVA 04203791209

Nicoleta Veronica Trevisan · Castenaso (BO)

Riferimenti normativi: D.Lgs. 82/2022 · EN 301 549 · WCAG 2.2 AA