C'è un nuovo arrivo nella città del design: il neumorfismo. Si prevede che diventerà una grande tendenza del design. Diamo un'occhiata a cos'è il neumorfismo, alle potenziali insidie ​​dell'accessibilità e a come usarlo in modo responsabile.

Neumorfismo: il modo accessibile e inclusivo

 

accessibilita neumorfismo 1 siti accessibili

Stesso design grigio su bianco fianco a fianco. Uno visto con una visione perfetta e l'altro con un simulatore di ipovisione.

Neu ... e adesso?

Neumorfismo è una parola di fantasia per indicare una tendenza nel design dell'interfaccia utente. Il suo nome deriva dallo skeumorfismo , un modo per integrare oggetti del mondo reale nel design dell'interfaccia utente. L'esempio classico è il bidone della spazzatura. Il neumorfismo è fondamentalmente il "Nuovo Scettomorfismo", quindi lo scetticismo con un tocco moderno. Ha un aspetto un po '"morbido" che ricorda un po' il design piatto (flat design) . Per un buon articolo approfondito sul neumorfismo, controlla: Neumorphism in user interfaces (uxdesign.cc)

Ad ogni modo, al momento sta suscitando un certo clamore nella comunità del design, che è stato innescato da un design creato da Alexander Plyuto , pubblicato il 5 novembre 2019 sulla comunità di design Dribbble:

accessibilita neumorfismo 2 siti accessibili

Prototipo di design in cui gli elementi dell'interfaccia non hanno bordi, solo ombre sbiadite che sono molto difficili da vedere.

Questo design è diventato virale, con oltre 220.000 visualizzazioni e 4000 Mi piace. Ha anche dato il via a un intero gruppo di designer che hanno avuto modo di provare la nuova tecnica di progettazione. Ecco alcuni dei design più popolari fino ad oggi su Dribbble:

accessibilita neumorfismo 3 siti accessibili

Design del ciclo del sonno con pulsanti ombra che sono davvero difficili da vedere.

accessibilita neumorfismo 4 siti accessibili

Invio pacchetto prototipo di progetto. Ancora una volta, pulsanti ombra e carte difficili da individuare

accessibilita neumorfismo 5 siti accessibili

Prototipo di progettazione di carte di credito. Quasi impossibile vedere sullo sfondo la sagoma di una carta Visa.

Puoi trovare molti altri design su Dribbble con il tag Neumorphism.

Ehi guarda, siamo di tendenza!

Molte persone sono piuttosto eccitate, prevedendo che il neumorfismo sarà una grande tendenza in futuro.

https://twitter.com/LudusEstArs/status/1215243113247232001?s=20

https://twitter.com/webwide_io/status/1208763520424304643?s=20

Gary Simon, che ha mezzo milione di abbonati al suo canale Youtube DesignCourse, ha realizzato un video tutorial intitolato Potrebbe essere la PIÙ GRANDE tendenza del design dell'interfaccia utente del 2020? #Neumorfismo .

La cosa grandiosa di Gary Simon è che, anche se non è un esperto di accessibilità, ha sempre in mente l'accessibilità e parla regolarmente dell'importanza del design inclusivo. Come nel video sopra, dove menziona l'importanza dei contrasti di colore. Il che ci porta perfettamente a ...


I potenziali problemi con il neumorfismo

Il problema principale di questa tendenza sono gli scarsi contrasti in quasi tutti i design là fuori. Come probabilmente hai notato scorrendo i disegni del neumorfismo sopra, la maggior parte dei loro schemi di colori sono molto grigio chiaro su bianco. Molti degli elementi dell'interfaccia sono appena visibili, anche se hai una visione perfetta. Ora immagina cosa fa per qualcuno che usa il proprio dispositivo alla luce del sole o per utenti con problemi di vista.

Usiamo il simulatore di disabilità Funkify , un'estensione del browser di cui siamo orgogliosi di aver contribuito alla creazione, per visualizzare il design originale attraverso un filtro per ipovedenti:

accessibilita neumorfismo 6 siti accessibili

Design originale rispetto al simulatore di ipovisione. Gli elementi dell'interfaccia come i pulsanti non sono più visibili.

Anche se puoi ancora dare un'occhiata a gran parte del testo e delle icone, è ancora abbastanza frustrante essere a malapena in grado di identificare uno qualsiasi degli elementi dell'interfaccia, come pulsanti, carte e grafici.

Il neumorfismo viene spesso definito "soft UI (interfaccia utente)". Guardando attraverso i progetti su Dribbble, sarebbe quasi meglio chiamarlo "interfaccia utente fantasma".

Oltre ai contrasti, altri due problemi di accessibilità sono:

  1. Mancanza di etichette.
    Molti dei designer sembrano rimuovere le etichette per le icone quando provano il neumorfismo. Forse perché stanno facendo tutto il possibile per creare un'interfaccia morbida e spoglia. Le icone senza etichette sono qualcosa che danneggia sia l'accessibilità che l'usabilità delle interfacce.

  2. Capire cosa è cliccabile.
    Gli utenti non dovrebbero aver bisogno di indovinare cosa è cliccabile e cosa no. Questo è molto importante per molti utenti anziani, che spesso eviteranno di fare clic su cose di cui non sono del tutto sicuri che siano cliccabili. Questo è lo stesso problema che combatte molto con il design piatto.

Esci dalla tua bolla

Ieri un uomo di 80 anni mi ha detto di essere stressato. Aveva cercato di capire come pagare per parcheggiare la sua auto in strada qui a Stoccolma, in Svezia. Ha provato molto, ma non è riuscito a leggere il testo sull'interfaccia del parcheggio, nemmeno con gli occhiali da lettura. Ha finito per ricevere una multa di 750 kr (80 dollari).

Credo di parlare per la maggior parte delle persone in questo mondo quando dico: non abbiamo bisogno di interfacce meno leggibili. Dovremmo andare nella direzione opposta.

A giudicare dai design di Dribbble, i migliori designer del mondo non sono d'accordo con me. Quindi è il momento di uscire dalla bolla dei designer e realizzare alcuni fatti importanti.

La maggior parte delle persone in questo mondo non sono giovani, esperti di tecnologia con una visione perfetta. La maggior parte delle persone non sperimenta la tua interfaccia su monitor ultra HD da 32 pollici. E potresti sederti per quest'ultimo: alla maggior parte delle persone non importa nemmeno come appare la tua app.

Vogliono solo fare qualcosa. E per farlo, devono vedere cosa c'è sullo schermo. Anche se sono fuori al sole. Oppure usa un vecchio telefono piccolo. O hai problemi di vista.

accessibilita neumorfismo 7 siti accessibiliPersona anziana che utilizza uno smartphone al sole. Testo: "Visione non perfetta", "sole sullo schermo" e "vecchio telefono".

È possibile il neumorfismo accessibile?

Decisamente! Non c'è nulla nel neumorfismo che costringa i designer a usare il grigio chiaro su bianco in tutti i loro progetti. O che proibisce le etichette di testo tramite icone.

In effetti, molti dei design in modalità oscura su Dribble sono molto migliori (anche se non perfetti), come la versione oscura in questo.

accessibilita neumorfismo 8 siti accessibili

Modalità chiaro e scuro di un lettore musicale. La modalità scura ha contrasti decisamente migliori.

 Ecco un altro design scuro in cui i contrasti sono migliori.

accessibilita neumorfismo 9 siti accessibili

Design in modalità oscura del lettore musicale. L'arancione su nero crea contrasti abbastanza buoni.

E ho anche trovato un luminoso con contrasti accettabili, anche se i bordi attorno ai pulsanti potrebbero essere resi più chiari.

accessibilita neumorfismo 10 siti accessibili

Design neumorfismo del lettore musicale. Qui i pulsanti sono più chiari e i contrasti sono migliori.

Quindi, se desideri progettare un neumorfismo accessibile, assicurati di rispettare i criteri delle Linee guida per l'accessibilità dei contenuti Web (WCAG 2.1) sui contrasti. In particolare questo: 1.4.11 Contrasto non testuale . Fondamentalmente richiede icone, bordi e altri elementi dell'interfaccia per avere contrasti di almeno 3: 0: 1. È leggermente inferiore al requisito per il contenuto di testo, che richiede un rapporto di contrasto di almeno 4,5: 1.

Ecco alcuni ottimi strumenti gratuiti che puoi utilizzare per misurare i contrasti: I migliori strumenti gratuiti per la verifica del contrasto del colore .

Oltre a contrasti sufficienti, assicurati che il tuo design renda chiaro ciò che è selezionabile e di etichettare le tue icone. Allora sei pronto!

Riavvolgendo

L'obiettivo generale di creare un'interfaccia morbida e pulita è super positivo dal punto di vista dell'accessibilità. Soprattutto se si considerano tutti gli utenti con disabilità cognitive che sono particolarmente sensibili ai progetti disordinati. Potrebbero essere utenti stressati, stanchi, nello spettro dell'autismo e così via.

Per andare fino in fondo e rendere il neumorfismo davvero inclusivo, assicurati che:

  1. I contrasti del testo sono almeno 4,5: 1
  2. Il contrasto dei bordi dei pulsanti, delle icone e di altri elementi dell'interfaccia è almeno 3.0: 1
  3. È facile capire cosa è cliccabile
  4. Le icone hanno etichette di testo.

Allora avrai fatto la tua parte per indirizzare questa tendenza del design nella giusta direzione!

Se questo articolo ti è piaciuto ...

Potresti anche divertirti con questi:

Hai bisogno di maggiori informazioni? Vuoi una consulenza?

contatta i nostri esperti