Lettura/Web/Migliorie all'IU desktop/Test del quinto prototipo

From mediawiki.org
This page is a translated version of the page Reading/Web/Desktop Improvements/Fifth prototype testing and the translation is 90% complete.
Outdated translations are marked like this.
Languages:

Ci piacerebbe ricevere un feedback su alcune decisioni riguardanti il visual design per il tema Vector 2022. Con “visual design” intendiamo lo stile del testo, dei pulsanti, dei bordi, degli sfondi e della spaziatura.

Istruzioni

  1. Consulta questa pagina per il contesto
  2. Crea una nuova sezione su questa pagina utilizzando il modulo qui sotto (si autocompletarà con le domande alle quali devi rispondere).
  3. Aggiungi i tuoi commenti riguardanti il prototipo nella nuova sezione che si è creata.

Per favore tieni presente che:

  • Questi sono prototipi, la maggioranza dei link non funziona davvero e che potresti incappare in bug o difetti vari.
  • Il modulo per creare una nuova sezione purtroppo non è compatibile con il VisualEditor (VE). Se stai utilizzando l'interfaccia di modifica visuale (senza wikisintassi), per favore crea manualmente una nuova sezione e copia incolla le domande di feedback (elencate qui sotto).
  • Non è necessario che esamini tutte le sezioni; concentrati su quelle che ti interessano di più.
  • Il design, e soprattutto il visual design, ha una componente soggettiva. Nonostante tutti abbiamo diritto ad avere le nostre opinioni, ti chiediamo di fare del tuo meglio per spiegarci le tue ragioni, e in che modo esse siano compatibili con i nostri obiettivi di semplicità e usabilità.
  • Potresti non trovare qui alcune valide opzioni. Sentiti libero di suggerirci qualcosa di diverso se pensi che funzionerebbe meglio delle opzioni presentate. Se sei a tuo agio con la grafica e/o con il codice sentiti pure libero di includere dei modellini o dei prototipi delle tue idee (ma non è richiesto). I file del design: Figma, Sketch, Google Drawing. Il prototipo: GitHub.
  • Se vuoi renderci partecipe delle tue proprie idee per favore non modificare questa pagina; scrivile nel modulo per il feedback.
  • Apprezziamo i grafici non professionisti e rispettiamo il punto di vista dei grafici esperti. Esamineremo tutti i feedback e le idee, e alla fine ci affideremo al giudizio di designer esperti per prendere le decisioni finali.
  • ⓘ Se preferisci mandare il tuo feedback via email, per favore contatta Olga Vasileva all'indirizzo olga@wikimedia.org.

Anteprima delle domande per il feedback

  1. Menu — apri il prototipo in un nuovo tab: https://di-visual-design-menus.web.app/Ursus_arctos?it Quale opzione preferisci e perché? Per favore, assicurati di aver verificato il menu della ricerca, il menu utente, il menu delle lingue e il menu degli strumenti.
  2. Bordi e sfondi — apri il prototipo in un nuovo tab: https://di-visual-design-borders-bgs.web.app/Canis_lupus?it Quale opzione preferisci e perché?
  3. Sezione attiva nell'Indice — apri il prototipo in un nuovo tab: https://di-visual-design-header-logo.web.app/Ailuropoda_melanoleuca?it Quale opzione preferisci e perché?
  4. Logo nell'header — apri il prototipo in un nuovo tab: https://di-visual-design-toc-active.web.app/Oceano_Indiano?it Quale opzione preferisci e perché?
  5. Colore dei link — apri il prototipo in un nuovo tab: https://di-visual-design-link-colors.web.app/Salmonidae?it Pensi che sia necessaria qualche messa a punto ulteriore prima di fare questo cambiamento?
  6. Dimensione del carattere — apri il prototipo in un nuovo tab: https://di-visual-design-font-size.web.app/Trochilidae?it Hai delle perplessità riguardo alla dimensione del carattere proposta?

Sfondo e contesto

Negli ultimi due anni abbiamo apportato vari cambiamenti strutturali all'interfaccia. Abbiamo spostato la barra della ricerca, il selettore delle lingue, e l'indice. Abbiamo organizzato alcuni link e strumenti nei menu. E abbiamo limitato la larghezza del contenuto, aggiunto l'header fisso, e spostato il titolo della pagina sopra la barra degli strumenti della pagina. Adesso che tutti questi elementi sono posizionati nell'interfaccia aggiornata stiamo spostando la nostra attenzione sull'aspetto globale. Alcune delle domande iniziali che si è posto il nostro team sono:

  • Come possiamo migliorare l'interfaccia attraverso il visual design?
  • Pensiamo che sia utile per il tema avere un aspetto più deciso (le linee blu e la sfumatura del Legacy Vector) ?
  • A che punto diventa troppo, tanto da diventare una fonte di distrazione o rendere l'interfaccia confusa?
  • E se invece facessimo il meno possibile, adottando un approccio iperminimalista come quello adottato dall'interfaccia delle origini di Wikipedia?

Storicamente il nostro approccio è sempre stato semplice e funzionale. Lo stile degli elementi HTML è minimo (se non addirittura nullo), il che semplifica l'interfaccia sia per chi la usa sia per chi la progetta e la costruisce. Ciò significa anche che il nostro visual design è pressoché senza tempo. Non seguiamo le mode e non abbiamo bisogno di fare cambiamenti ogni due anni. Guardando gli screenshot qui sotto possiamo vedere come Monobook e il Legacy Vector usano il visual design con parsimonia (principalmente bordi e colori di sfondo).

Comparative interfaces
Screenshot della Wikipedia in hindi con il tema Monobook
Screenshot della Wikipedia in giapponese con il tema Legacy Vector

Cambiamenti presi in considerazione

Menu

Usiamo svariati menu nella nostra interfaccia. Fino ad ora, il nostro approccio allo stile dei menu non è stato coerente. Abbiamo l'opportunità, con Vector 2022, di sviluppare un approccio allo stile dei nostri menu più accessibile e coerente. Ridotti all'osso, i menu hanno due componenti: un trigger di menu (traducibile come innesco, attivatore) e gli argomenti del menu. Stiamo considerando i colori blu vs. nero (sia per il trigger che per le opzioni di menu), e i caratteri normali vs. in grassetto (per il trigger del menu).

Link al prototipo con le opzioni: https://di-visual-design-menus.web.app/Ursus_arctos?it

1) trigger blu, argomenti in blu

2) trigger blu, argomenti in nero

3) trigger nero, argomenti in blu

4) trigger nero, argomenti in nero

Bordi e sfondi

Dovremmo aggiungere bordi e sfondi per aiutare a suddividere le regioni dell'interfaccia, e se sì che aspetto dovrebbe avere? Come abbiamo accennato nella sezione Sfondo e contesto qui sopra, sia Monobook che Vector usano sfondi e bordi per suddividere l'interfaccia dal contenuto. Sfondi e bordi possono anche dare un tocco di personalità all'interfaccia. Tuttavia, non è semplice sapere fino a che punto siano necessari o funzionali. Abbiamo creato svariate opzioni, con sfondi e contorni progressivamente sempre più scuri.

Link al prototipo con le opzioni: https://di-visual-design-borders-bgs.web.app/Canis_lupus?it

1) minimalista

1) minimalist

2) bordi della voce

3) bordi della voce + header sottolineato

4) linea dell'indice + header sottolineato

5) linea dell'indice + titolo della pagina sottolineato

6) bordi della voce + sfondo dell'header (pieno)

7) bordi della voce + sfondo dell'header (sfumato)

8) sfondo esterno della voce (sfumato)

9) sfondo esterno della voce (pieno)

Sezione attiva nell'indice

Adesso l'Indice si trova nella barra laterale (a sinistra) ed è stato reso fisso per farlo restare visibile quando si scorre la pagina verso il basso. L'Indice ha una una nuova caratteristica: evidenzia quale sezione della voce stai leggendo (la chiamiamo la "sezione attiva"). Attualmente, in continuità con il modello utilizzato nei tab Voce/Discussione, la sezione attiva nell'Indice è nera e le sezioni non attive sono blu. Ci piace questo modello perché è semplice, non fa distrarre, ed è usato altrove. Possiamo anche usare uno stile supplementare per indicare la sezione attiva.

Link al prototipo con le opzioni: https://di-visual-design-header-logo.web.app/Ailuropoda_melanoleuca?it

1) minimalista

2) grassetto

3) sfondo

4) linea con bordo

5) linea con bordo (2)

Logo nell'header

Monobook e Legacy Vector sono entrambi caratterizzati dal logo di Wikipedia quadrato con un grande globo. Dati i vari cambiamenti apportati a Vector 2022, un logo più piccolo e rettangolare posto nell'angolo potrebbe adattarsi meglio al layout. Tuttavia, vogliamo assicurarci di provare varie opzioni. Per favore ricordati di testare queste opzioni su schermi di varie dimensioni, perché l'eauilibrio del layout cambia in funzione della misura del tuo schermo.

Link al prototipo con le opzioni: https://di-visual-design-toc-active.web.app/Oceano_Indiano?it

1) Logo rettangolare sulla sinistra

2) Logo quadrato sulla sinistra

3)Logo quadrato sulla sinistra (sfumatura)

4) Logo rettangolare al centro

Colore dei link

Il World Wide Web Consortium (W3C) ha messo a punto delle Linee guida per l'accessibilità dei contenuti Web. Queste linee guida definiscono un livello di contrasto minimo per i link: "Per ragioni di usabilità e di accessibilità, i link devono essere sottolineati di default. Altrimenti, il testo del link deve presentare un contrasto di almeno 3:1 rispetto al corpo del testo circostante, e deve presentare un indicatore non colorato (generalmente la sottolineatura) al passaggio del mouse o se selezionato da tastiera."[1] Poiché non sottolieiamo i link di default, la nostra scelta del colore del link deve andare incontro alle esigenze del contrasto 3:1. Al fine di verificare il contrasto tra i nostri link e il nostro corpo del testo possiamo utilizzare il controllore di contrasto (contrast checker) fornito da WebAIM.

Attuali colori del link
Colore Contrasto con il corpo del testo #202122 Risultato del test Link al risultato del test
Link blu #0645ad 1.89:1 ❌ Fallito link ai risultati
Link visitato #0b0080 1.01:1 ❌ Fallito link ai risultati
Colori del link proposti
Colore Contrasto con il corpo del testo #202122 Risultato del test Link al risultato del test
Link blu #3366cc 3:1 ✅ Validato link ai risultati
Link visitato #795cb2 3.06:1 ✅ Validato link ai risultati

In aggiunta, il colore del link blu proposto fa già parte della Wikimedia Design Style Guide, ed è usato sia sui nostri siti mobile che nei loghi di vari progetti, sicché guadagneremmo in coerenza.

Link al prototipo con i colori proposti: https://di-visual-design-link-colors.web.app/Salmonidae?it

Attuali colori del link

Colori proposti


Dimensione del carattere

La mission del nostro movimento è di fornire tutta la conoscenza del mondo al maggior numero di persone possibile. Attualmente la maggior parte della conoscenza che offriamo si trova sotto forma di testo. La ricerca ha mostrato che le impostazioni tipografiche (quali la dimensione del carattere, la lunghezza della linea e l'altezza della linea) influenzano l'esperienza della lettura, sia in termini di comfort generale (fatica e tenzione oculare, per esempio), sia a livello di comprensione e memoria.[2][3][4][5] Per questo è importante utilizzare impostazioni tipografiche ottimali nella nostra interfaccia. Un fattore importante da considerare per determinare cos'è ottimale per i nostri progetti è che la gente può impegnasi sia in una lettura approfondita che nel dare una scorsa al testo.[6][7]

In una fase precedente del progetto abbiamo letto degli studi riguardanti la lunghezza della linea e concluso che una linea da 90–140 caratteri è ottimale per i nostri progetti (link alla presentazione). Recentemente abbiamo passato del tempo a leggere degli studi di ricerca sulla dimensione del carattere. La ricerca più convincente e direttamente applicabile che abbiamo trovato fino ad ora è uno studio del 2016 che ha usato il monitoraggio oculare per valutare per valutare gli effetti della dimensione dei caratteri e dell'interlinea per chi legge Wikipedia:

Con l'aiuto di un modello di misurazione ibrido abbiamo confrontato la comprensione e la leggibilità oggettiva e soggettiva delle voci con dimensioni dei caratteri da 10 a 26 punti e interlinee tra 0,8 e 1,8 (font: Arial). I nostri risultati mostrano che la leggibilità, misurata per la durata media di fissazione, è direttamente proporzionale alla dimensione del carattere. Inoltre, le domande di comprensione del testo comporavano un maggior numero di risposte corrette con le dimensioni del carattere 18 e 26. Questi risultati provano che i siti web a forte densità di testo dovrebbero utilizzare la dimensione di carattere 18 o superiore, e utilizzare un'interlinea di default per rendere una pagina web facile da leggere e da capire. I nostri risultati differiscono significativamente dalle precedenti raccomandazioni, presumibilmente perché si tratta del primo lavoro che includa le dimensioni di carattere superiori ai 14 punti.[8]

In primo luogo, è necessario convertire la misura utilizzata dai ricercatori (punti) nella misura che i browser visualizzano (px). La conversione è: 1px = 72pt / 96.[9][10] Quindi, l'intervallo studiato nella ricerca (10-26 punti) equivale a 13,3-34px. La loro conclusione, 18 punti, equivale a 24px.

Quindi dovremmo aumentare la dimensione del carattere a 24px? La ricerca ha studiato la lettura approfondita, tuttavia le persone spesso danno una scorsa alla pagina per trovare una determinata informazione. Questo corrisponde a un comportamento diverso in lettura, che probabilmente trae vantaggio da una dimensione dei caratteri più piccola rispetto alla lettura approfondita. La nostra proposta, che vuole essere prudente tenendo conto della scansione oculare veloce, è quella di aumentare la dimensione dei caratteri a 16px, per cominciare. (Aumenteremo anche la larghezza massima dell'articolo, da 960px a 1050px.) Come passo successivo, intendiamo condurre una nostra ricerca per studiare ulteriormente le dimensioni dei caratteri sui wiki Wikimedia.

Bibliografia commentata della ricerca sulla tipografia e la leggibilità

Link al prototipo con la dimensione del carattere proposta: https://di-visual-design-font-size.web.app/Trochilidae?it

Feedback

Riferimenti e note

  1. ↑ Accessibilità del contrasto e del colore, comprendere le esigenze delle WCAG 2 rispetto ai contrasti e ai colori: "identificazione dei link a colori unicamente.
  2. ↑ Hussain, Sohaib, Ahmed, Qasim Khan, (2011-11-01). "Web readability factors affecting users of all ages". Australian Journal of Basic and Applied Sciences, 2011, 5 (11), pp. 972 - 977.
  3. ↑ Nanavati, Bias (2005). "Optimal Line Length in Reading--A Literature Review". Visible Language, v39 n2 p121-145 2005.
  4. ↑ Banerjee, Majumdar, Majumdar (2011-01). "Readability, Subjective Preference and Mental Workload Studies on Young Indian Adults for Selection of Optimum Font Type and Size during Onscreen Reading". Al Ameen Journal of Medical Sciences.
  5. ↑ Patterson, Tinker (1940). "How to make type readable; a manual for typographers, printers and advertisers, based on twelve years of research involving speed of reading tests given to 33,031 persons". Harper & Brothers Publishers.
  6. ↑ TeBlunthuis, Bayer, Vasileva (2019-08). "Dwelling on Wikipedia: investigating time spent by global encyclopedia readers". OpenSym '19: Proceedings of the 15th International Symposium on Open Collaboration.
  7. ↑ Moran (2020-04-05). "How People Read Online: New and Old Findings". Nielsen Norman Group.
  8. ↑ Rello, Pielot, Marcos (05-2016). "Make It Big! The Effect of Font Size and Line Spacing on Online Readability". Conference on Human Factors in Computing Systems.
  9. ↑ Schaeffer, Kyle (30-09-2008) "CSS Font-Size: em vs. px vs. pt vs. percent"
  10. ↑ Convertitore di PT a PX
Retrieved from "https://www.mediawiki.org/w/index.php?title=Reading/Web/Desktop_Improvements/Fifth_prototype_testing/it&oldid=6403718"