Costruire uno SmartHub® accessibile e reattivo

Questa guida evidenzia le migliori pratiche e suggerimenti utili per i clienti che desiderano creare layout eccellenti su SmartHub®.

In questo articolo, esamineremo più da vicino:

• Accessibilità – Perché è importante e come assicurarsi che il tuo layout sia più accessibile.

• Reattività – Crea layout che trasmettono il messaggio giusto e che hanno un bell'aspetto sia su desktop che su mobile.

• Autosostenibilità – Rendi semplice l'aggiornamento dei layout da parte di chiunque, indipendentemente dalle capacità di design.

Perché l'accessibilità è importante

L'accessibilità riguarda molte persone, e in modi che non sono sempre ovvi. E più il pubblico è meno abituato ad utilizare strumenti digitali, maggiori diventano queste esigenze.

Risolvere per uno, estendere a molti

Tutti hanno abilità e limiti: progettare tenendo presente questa premessa porta a costruire design dei quali beneficiano universalmente le persone.

Quando sviluppiamo le nostre soluzioni, ci assicuriamo sempre che siano accessibili al pubblico più ampio possibile. Designer, Sviluppatori e Specialisti di Assicurazione della Qualità si assicurano che i nostri prodotti rispettino gli standard di accessibilità.

SmartHub® Layouts è un prodotto estremamente flessibile, che offre ai nostri clienti gli strumenti e la libertà di allineare completamente le loro piattaforme con la cultura aziendale e il branding specifico della loro Azienda.

Dare tale libertà ai nostri clienti significa che sono loro a dover garantire che il contenuto aggiunto sia accessibile. Ecco perché abbiamo creato questa guida per fornire esempi di buona e meno buona accessibilità, oltre a condividere suggerimenti e trucchi utili.

Suggerimenti per rendere accessibile un layout SmartHub

• Evita di incorporare testo nelle immagini. Anche se può sembrare meglio incorporare il testo in un'immagine per avere il font aziendale, questo non è ottimale per l'accessibilità perché:

  • Il testo potrebbe risultare sfocato.

  • I lettori di schermo non saranno in grado di leggere quel testo. Lo considereranno semplicemente come un'immagine.

• Usa buoni contrasti di colore e una dimensione del carattere leggibile.

• Descrivi le immagini 
  Quando passi il mouse su un'immagine su un sito web, le piccole parole che appaiono sono chiamate tag alt. Per qualcuno che ha una disabilità visiva e utilizza un lettore di schermo (un programma software che legge ad alta voce il testo su un sito web), i tag alt vengono letti ad alta voce e sono l'unico modo in cui un utente sa cosa rappresenta l'immagine.

  Prendi sul serio i tag alt e usali come un'opportunità per descrivere l'immagine in modo accurato e conciso. Se è una foto di una persona, scrivi il nome della persona. Se è un oggetto, usa un paio di parole per descriverlo. Se non è rilevante per il contenuto e viene utilizzato solo come decorazione, lascia il tag alt vuoto.

  
  
  

• Fornisci trascrizioni per i video.

• Scrivi link descrittivi e una call-to-action. Questo garantirà che inviamo un messaggio chiaro e uno stimolo per l'utente finale. Una cattiva call-to-action è “Clicca qui”. Le migliori call-to-action sono quelle più descrittive nell'indicare cosa succederà se vengono cliccate. Ecco alcuni esempi: 

  • “Riconosci un collega”.

  • “Invia una cartolina elettronica”.

  • “Candidati ora”.

  • “Vedi offerte”.

• Allinea il testo a sinistra e mantieni un layout coerente, perché leggiamo da sinistra a destra. Usa grassetto, corsivo, e MAIUSCOLO solo quando sono davvero necessari. Mantieni il contenuto breve, chiaro e semplice. Questo renderà il testo più facile da leggere per le persone indipendentemente dalla loro competenza linguistica. È una situazione vantaggiosa per tutti.

Scegli colori appropriati

Scegliere colori appropriati è utile per un sito web di qualsiasi tipo. Evita di usare colori sgargianti e fai attenzione a usare giallo, blu e verde vicini tra loro per aiutare gli utenti daltonici. Evita anche di scegliere colori che non contrastano abbastanza tra loro – come il testo grigio chiaro su uno sfondo bianco, o il testo bianco su uno sfondo giallo (come sotto) – per aiutare ancora di più. 

Infine, non usare mai il colore come unico mezzo per trasmettere informazioni. Combinalo sempre con un'altra caratteristica, come forma e dimensione, per permettere all'elemento di distinguersi da un gruppo. 

Consigli

• Se c'è qualche incertezza sui colori utilizzati, attieniti al semplice testo nero su sfondo bianco, poiché è leggibile per la maggior parte del pubblico.

Pensa alla struttura dei titoli e suddividi il testo in paragrafi chiari

Questo è utile per qualsiasi pubblico, ma è imperativo per il pubblico anziano o per coloro con disabilità di apprendimento. Se c'è molto testo su una pagina, suddividilo in paragrafi più piccoli. Se vengono aggiunti titoli al testo, assicurati che siano in un ordine logico man mano che il lettore procede lungo la pagina. 

Consigli

• Usa un linguaggio semplice e diretto nella forma attiva. Consulta questa guida per maggiori informazioni.
• Non mettere grandi titoli importanti in fondo al contenuto.

Rendilo adatto ai dispositivi mobili

Anche se la maggior parte dei dipendenti lavora prevalentemente su computer desktop o laptop, può di certo capirare che accedano anche dai loro dispositivi mobili mentre sono in movimento.

Ecco alcuni consigli per assicurarsi che il layout appaia bene sui dispositivi più piccoli:

• Controlla sempre come appare il layout sugli schermi più piccoli.
  Consiglio: Ridimensiona la finestra del browser per vedere come apparirebbe su tablet e smartphone.

• Usa più riquadri “Immagine & Testo” e “Icona & Testo” invece di riquadri “Immagine di sfondo”.

  • I riquadri “Immagine & Testo” e “Icona & Testo” nei layout di SmartHub® mantengono l'immagine e il testo separati, quindi il sistema mantiene una copia nella dimensione del carattere che lo renderà facilmente leggibile

  • Il riquadro “Immagine di sfondo” scala la dimensione del carattere insieme all'immagine. Questo per evitare che il testo sia illeggibile su alcune parti dello sfondo.

  • Se usi “Immagine di sfondo”, assicurati di scegliere una dimensione del carattere più grande e controlla come appare il riquadro sui dispositivi mobili:

    • Per riquadri di larghezza 1 colonna (riquadri 1x1 e 1x2), usa una dimensione del carattere minima di 14px, o ottimale di 16px.

    • Per riquadri di larghezza 2 colonne (riquadri 2x1 e 2x2), usa una dimensione del carattere minima di 18-20px, o ottimale di 20-22px.

• Raccomandiamo ai nostri clienti di evitare di usare riquadri che sono larghi 3 o 4 colonne. Questi diventano molto piccoli sui dispositivi mobili.

  • Se i clienti decidono comunque di usare riquadri larghi, assicurati che la loro altezza sia di almeno 2 righe e che sia l'immagine che il testo siano molto grandi.

• "Si prega di tenere presente che la barra di navigazione superiore non appare nell'app mobile Connect+. La nostra raccomandazione è di assicurarsi che tutto il contenuto possa essere navigato intuitivamente tramite i riquadri di SmartHub. La barra di navigazione dovrebbe essere usata come 'scorciatoia' per aiutare gli utenti web a raggiungere dove devono andare."
• Rendi le cose facilmente modificabili se il layout è destinato a cambiare spesso

I layout che utilizzano riquadri “Immagine di sfondo” progettati da designer professionisti appaiono fantastici, ma potrebbero non essere adatti se il layout dell'hub cambierà spesso aspetto, poiché richiederebbe tempo di progettazione per cambiarlo ogni volta.

È possibile per i clienti produrre un effetto simile a un banner progettato grazie a software come PowerPoint, Keynote o qualsiasi software di grafica, ma comunque le immagini dovranno essere esportate e caricate nel nuovo layout.

Invece, per rendere le cose molto più semplici e facili da modificare, consigliamo ai clienti di utilizzare riquadri come "Immagine & Testo" e "Icona & Testo". Con questi, i clienti possono modificare il testo immediatamente e otterranno risultati visivamente ottimi su qualsiasi dimensione dello schermo.

Rendere le cose semplici significa che i layout possono essere facilmente aggiornati da chiunque, indipendentemente dalle loro capacità di design!