Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Non dovremmo usare i placeholder

281 views

Published on

L'attributo placeholder contiene una quantità sorprendente di problemi che impediscono di offrire ciò che promette.
Chiariamo perché dovremmo valutare di smettere di usarlo.

Published in: Design
  • Finally found a service provider which actually supplies an essay with an engaging introduction leading to the main body of the exposition Here is the site ⇒⇒⇒WRITE-MY-PAPER.net ⇐⇐⇐
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Did u try to use external powers for studying? Like ⇒ www.HelpWriting.net ⇐ ? They helped me a lot once.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Very nice tips on this. In case you need help on any kind of academic writing visit website ⇒ www.WritePaper.info ⇐ and place your order
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Non dovremmo usare i placeholder

  1. 1. Non dovremmo usare i placeholder
  2. 2. L'attributo placeholder contiene una quantità sorprendente di problemi che impediscono di offrire ciò che promette. Chiariamo perché dovremmo valutare di smettere di usarlo.
  3. 3. Fonte: https://www.smashingmagazine.com/2018/06/placeholder-attribute/
  4. 4. https://w3c.github.io/html/sec-forms.html#the-placeholder-attribute “Il placeholder rappresenta un breve suggerimento (una parola o una frase breve) inteso ad aiutare l'utente con l'inserimento di dati quando un campo input non ha valore. Un suggerimento potrebbe essere un valore di esempio o una breve descrizione del formato previsto. "
  5. 5. Problemi
  6. 6. Traduzione • I browser con funzionalità di traduzione automatica come Chrome ignorano gli attributi placeholder quando viene avviata una richiesta di traduzione della pagina corrente. • Il contenuto del placeholder non verrà tradotto e rimarrà come lingua originale.
  7. 7. Se questo contenuto non viene aggiornato insieme al resto della pagina tradotta, esiste un'alta probabilità che una persona che non ha familiarità con la lingua non sia in grado di comprendere e utilizzare correttamente l’input.
  8. 8. Questa dovrebbe già essere una ragione sufficiente per non usare i placeholder.
  9. 9. Molte persone impostano i loro dispositivi per utilizzare una lingua che non è la lingua ufficiale del paese riportata dall'indirizzo IP del proprio browser.
  10. 10. Interoperabilità L'interoperabilità è la pratica di far scambiare sistemi diversi e comprendere le informazioni. È una parte fondamentale di Internet e della tecnologia assistiva.
  11. 11. label + input ❤
  12. 12. Un input interoperabile viene creato associando ad esso un elemento <label>
  13. 13. Il placeholder viene spesso utilizzato al posto di un elemento label. È un pratica che sembra aver guadagnato popolarità nella comunità del design.
  14. 14. Indovinate chi fa così?
  15. 15. Se una label è associata a un input, facendo clic o toccando il testo della label si mette a fuoco l'input. Questo piccolo trucco fornisce un'area aggiuntiva per interagire con l'input, il che può essere utile per le persone con problemi di controllo motorio. I placeholder che fungono da label, così come le label flottanti, non possono farlo.
  16. 16. Cognizione
  17. 17. Quando una persona inserisce informazioni in un input, il suo contenuto placeholder scomparirà. L'unico modo per ripristinarlo è rimuovere le informazioni inserite. Il messaggio di guida viene rimosso non appena la persona che tenta di compilare l'input interagisce con esso. No good!
  18. 18. Le persone meno tecnologicamente istruite potrebbero non capire perché il contenuto della guida stia scomparendo o come riportarlo indietro.
  19. 19. Alfabetizzazione Digitale
  20. 20. Presumere che l'utente finale "semplicemente saprà" è semplice arroganza.
  21. 21. Il placeholder può apparire come contenuto inserito. Se si tratta di un campo obbligatorio, l'invio del form creerà un'esperienza frustrante in cui potrebbe non capire quale sia l'errore o come risolverlo. Se non è un campo obbligatorio, il tuo form corre il rischio di non riuscire a raccogliere informazioni secondarie potenzialmente preziose.
  22. 22. Non è responsive
  23. 23. Non saprai mai dov'è quel codice.
  24. 24. Contrasto di colore
  25. 25. • Troppo chiaro: non passa i criteri di accessibilità e rischia di non esser visto. • Troppo scuro: può diventare abbastanza scuro da essere interpretato come input inserito, anche da persone più digitalmente alfabetizzate.
  26. 26. Modalità Contrasto elevato
  27. 27. Il sistema operativo Windows contiene una funzione chiamata Modalità contrasto elevato. Quando è attivato, assegna nuovi colori agli elementi dell’interfaccia e utilizza un numero limitato di opzioni di colore.
  28. 28. Facciamo il CSS per la Modalità Contrasto Elevato!
  29. 29. –Hugo Giraudel “High contrast mode is not about design anymore but strict usability. You should aim for highest readability, not color aesthetics.” https://twitter.com/HugoGiraudel/status/877123359418576896
  30. 30. Per ricapitolare, l’attributo placeholder: • Non può essere tradotto automaticamente; • Spesso viene utilizzato al posto di una label, bloccando la tecnologia assistiva; • Può nascondere informazioni importanti quando si inizia a digitare nell’input; • Può essere troppo chiaro per essere leggibile; • Ha opzioni di styling CSS limitate; • Può apparire come informazioni pre-riempite e essere saltato sopra.
  31. 31. Soluzione?
  32. 32. Questo approccio: • Comunica una gerarchia visiva e strutturale: • A cosa serve questo input (label); • Cose che devi sapere per usare l'input correttamente; • L’input stesso. • Può essere tradotto; • Non sembreranno informazioni pre-riempite; • Può essere visto in condizioni di ipovisione; • Non scomparirà quando il contenuto viene inserito nell’input; • Può includere markup semantico ed essere stilizzato tramite CSS.
  33. 33. Ocio!
  34. 34. Se posto sotto l'input, il contenuto potrebbe essere oscurato quando appare una tastiera sullo schermo.
  35. 35. • Le soluzioni front-end sfruttano speciali attributi di input permettendo di utilizzare il sito o l'app con la minore complicanza possibile. • Un buon copywriting crea etichette che descrivano chiaramente e sinteticamente lo scopo dell'input. • Non facendo assunzioni sulle base di altre persone, inclusa la tecnologia che usano, puoi fare la tua parte per aiutare a prevenire l’esclusione. (“eh ma tanto lo sanno usare!!1!1!”)
  36. 36. Prenditi un po’ di tempo per rivedere il tuo design, il tuo codice e vedere cosa non regge. Forse è il caso di rivedere come usiamo i placeholder.

×