MediaWiki

Čtení/Web/Vylepšení desktopu/Testování pátého prototypu

< Reading‎ | Web‎ | Desktop Improvements
This page is a translated version of the page Reading/Web/Desktop Improvements/Fifth prototype testing and the translation is 100% complete.
Languages:

Uvítali bychom váš názor na některá rozhodnutí týkající se vizuálního designu pro Vector 2022. Vizuálním designem rozumíme stylizaci textu, tlačítek, ohraničení, pozadí a mezer.

Instrukce

  1. Zkontrolujte kontext této stránky
  2. Vytvořte novou sekci na této stránce pomocí níže uvedeného formuláře (bude předvyplněna otázkami, na které budete odpovídat).
  3. Vyplňte svou zpětnou vazbu do nově vytvořené sekce.

Prosím měj na paměti:

  • Jedná se o prototypy, většina funkcí nefunguje a mohou existovat další chyby nebo vtípky, na které narazíte.
  • "Formulář nové sekce" bohužel není kompatibilní s VisualEditorem (VE). Pokud používáte VisualEditor, vytvořte prosím ručně novou sekci a zkopírujte a vložte otázky zpětné vazby (uvedené níže).
  • Nemusíte kontrolovat každou sekci. Zaměřte se na ty, které jsou pro vás nejzajímavější.
  • Design a konkrétně vizuální design může být subjektivní. I když máme všichni právo na svůj vlastní názor, žádáme vás, abyste se co nejlépe pokusili vysvětlit ten váš a jak souvisí s našimi cíli designu, kterými jsou jednoduchost a použitelnost.
  • Mohou existovat dobré možnosti, které zde nejsou uvedeny. Neváhejte navrhnout něco jiného, pokud si myslíte, že by to fungovalo lépe než uvedené možnosti. Pokud jste spokojeni s designem a/nebo kódováním, neváhejte zahrnout makety nebo prototypy svých nápadů (není to nutné). Soubory návrhů: Figma, Sketch, Google Drawing. Prototyp: GitHub.
  • Pokud posíláte své vlastní nápady, neupravujte prosím tuto stránku. Zahrňte je do formuláře zpětné vazby.
  • Vážíme si amatérských vývojářů a respektujeme zkušené vývojáře. Prověříme veškerou zpětnou vazbu a nápady a nakonec se při konečných rozhodnutích budeme spoléhat na úsudek zkušených designérů.
  • Pokud byste raději poslali zpětnou vazbu e-mailem, zašlete zpětnou vazbu na olga@wikimedia.org.

Náhled dotazů na zpětnou vazbu

  1. Menu — otevřít prototyp na nové kartě: https://di-visual-design-menus.web.app/Brown_bear. Kterou možnost preferujete a proč? Zkontrolujte prosím nabídku vyhledávání, uživatelskou nabídku, jazykovou nabídku a nabídku nástrojů.
  2. Hranice a pozadí — otevřít prototyp na nové kartě: https://di-visual-design-borders-bgs.web.app/Zebra. Kterou možnost preferujete a proč?
  3. Aktivní sekce v obsahu — otevřít prototyp na nové kartě: https://di-visual-design-toc-active.web.app/Otter. Kterou možnost preferujete a proč?
  4. Logo v záhlaví — otevřít prototyp na nové kartě: https://di-visual-design-header-logo.web.app/Panda. Kterou možnost preferujete a proč?
  5. Link colors — otevřít prototyp na nové kartě: https://di-visual-design-link-colors.web.app/Salmon. Existuje nějaká další práce, kterou je podle vás třeba udělat, než tuto změnu provedeme?
  6. Velikost písma — otevřít prototyp na nové kartě: https://di-visual-design-font-size.web.app/Hummingbird. Máte nějaké obavy z navrhované velikosti písma?

Pozadí a kontext

Během posledních dvou let jsme provedli různé strukturální změny rozhraní. Přesunuli jsme vyhledávací pole, přepínač jazyků a obsah. Určité odkazy a nástroje jsme uspořádali do nabídek. A my jsme omezili šířku obsahu, přidali sticky hlavičku a přesunuli nadpis stránky nad panel nástrojů stránky. Nyní, se všemi těmito různými prvky umístěnými v aktualizovaném rozhraní, obracíme naši pozornost na celkový vzhled. Některé počáteční otázky, které náš tým zvažoval, jsou:

  • Jak můžeme použít vizuální design ke zlepšení rozhraní?
  • Myslíme si, že má cenu mít skin nějakou další osobitost (jako modré čáry a přechody v Legacy Vector)?
  • V jakém bodě je toho příliš mnoho, takže by to mohlo být rušivé nebo matoucí?
  • Co kdybychom toho dělali co nejméně a zvolili super minimalistický přístup podobný původnímu rozhraní Wikipedie?

Historicky byl náš přístup jednoduchý a funkční. Prvky HTML mají malý styl (pokud vůbec nějaký), což zjednodušuje rozhraní jak pro uživatele, kteří jej používají, tak pro lidi, kteří jej navrhují a vytvářejí. Znamená to také, že náš vizuální design je spíše nadčasový. Neřídíme se trendy a nepotřebujeme provádět změny každých pár let. Při pohledu na níže uvedené snímky obrazovky vidíme, jak Monobook a Legacy Vector používají vizuální design střídmě (hlavně okraje a barvy pozadí).

Porovnání rozhraní
 
Snímek obrazovky hindské Wikipedie se vzhledem Monobook
 
Snímek obrazovky japonské Wikipedie se vzhledem Legacy Vector

Uvažované změny

Menu

V našem rozhraní používáme několik nabídek. Dosud náš přístup k tomu, jak stylujeme menu, nebyl konzistentní. S Vector 2022 máme příležitost vyvinout přístupnější a konzistentnější přístup ke stylingu našich menu. Ve své nejjednodušší formě mají nabídky dva prvky: ovládání nabídky a položky nabídky. Zvažujeme modrou vs. černou (pro ovládání nabídky i možnosti nabídky) a tučné vs. netučné (pro ovládání nabídky).

Odkaz na prototyp s možnostmi: https://di-visual-design-menus.web.app/Brown_bear

1) modré ovládání, modré položky

 

2) modré ovládání, černé předměty

 

3) černé ovládání, modré předměty

 

4) černé ovládání, černé předměty

 

Hranice a pozadí

Měli bychom přidat okraje a pozadí, abychom pomohli rozdělit oblasti rozhraní, a pokud ano, jak by měly vypadat? Jak jsme zmínili v části Pozadí a kontext výše, Monobook i Vector používají pozadí a okraje k oddělení rozhraní od obsahu. Pozadí a okraje mohou také přidat osobitost rozhraní. Je však obtížné zjistit, jak jsou funkční nebo potřebné. Vytvořili jsme několik možností s postupně více/tmavšími okraji a pozadím.

Odkaz na prototyp s možnostmi: https://di-visual-design-borders-bgs.web.app/Zebra

1) minimalistické

 

2) ohraničení článku

 

3) ohraničení článku + podtržení záhlaví

 

4) řádek obsahu + podtržení záhlaví

 

5) řádek obsahu + podtržení názvu stránky

 

6) okraje článku + pozadí záhlaví (plné)

 

7) okraje článku + pozadí záhlaví (stupeň)

 

8) vnější pozadí článku (stupeň)

 

9) vnější pozadí článku (plné)

 

Aktivní sekce v obsahu

Obsah je nyní na (levé) straně článku a je upevněn na místě, takže zůstává viditelný i při posouvání stránky dolů. Novinkou je, že obsah uvádí, kterou sekci článku právě čtete (říkáme tomu "aktivní sekce"). V současné době, podle vzoru používaného na kartách Článek/Rozhovor, je aktivní sekce v obsahu černá a neaktivní sekce jsou modré. Tento vzor se nám líbí, protože je jednoduchý, neruší a používá se jinde. Můžeme také použít další styling k označení aktivní sekce.

Odkaz na prototyp s možnostmi: https://di-visual-design-toc-active.web.app/Otter

1) minimalistické

 

2) tučně

 

3) pozadí

 

4) čára s okrajem

 

5) řádek s okrajem (2)

 

Logo v záhlaví

Monobook a Legacy Vector mají čtvercové logo Wikipedie s velkým glóbem. Vzhledem k různým změnám Vector 2022 může menší, obdélníkové logo v rohu lépe odpovídat rozvržení. Chtěli jsme však vyzkoušet různé možnosti. Nezapomeňte prosím vyzkoušet tyto možnosti na různých velikostech obrazovky, protože vyvážení rozložení se mění v závislosti na velikosti vaší obrazovky.

Odkaz na prototyp s možnostmi: https://di-visual-design-header-logo.web.app/Panda

1) Obdélníkové logo vlevo

 

2) Čtvercové logo vlevo

 

3) Čtvercové logo vlevo (stupeň)

 

4) Střed loga obdélníku

 

Barvy odkazů

TWorld Wide Web Consortium (W3C) má Pokyny pro přístupnost webového obsahu. Tyto pokyny definují minimální úroveň kontrastu pro odkazy: "V zájmu použitelnosti a přístupnosti by měly být odkazy ve výchozím nastavení podtržené. Jinak musí mít text odkazu kontrast alespoň 3:1 s okolním textem těla a musí představovat nebarevný indikátor (obvykle podtržený) při najetí myší a zaměření klávesnice."[1] Protože odkazy ve výchozím nastavení nepodtrháváme, naše volba barvy odkazu musí splňovat požadavek na kontrast 3:1. Abychom zkontrolovali kontrast našich odkazů s naším tělem, můžeme použít kontrast checker, který poskytuje WebAIM.

Aktuální barvy odkazu
Barva Kontrast s hlavním textem #202122 Výsledek testu Odkaz na výsledek testu
modré odkazy #0645ad 1.89:1 ❌ Neúspěch odkaz na výsledky
navštívené odkazy #0b0080 1.01:1 ❌ Neúspěch odkaz na výsledky
Navrhované barvy odkazu
Barva Kontrast s hlavním textem #202122 Výsledek testu Odkaz na výsledek testu
modré odkazy #3366cc 3:1 ✅ V pořádku odkaz na výsledky
navštívené odkazy #795cb2 3.06:1 ✅ V pořádku odkaz na výsledky

Navíc navrhovaná modrá barva odkazu je již součástí Wikimedia Design Style Guide a používá se na našich mobilních webech a také v různých logách projektů, takže bychom získali konzistenci.

Odkaz na prototyp s navrženými barvami: https://di-visual-design-link-colors.web.app/Salmon

Aktuální barvy odkazu

 

Navrhované barvy

 


Velikost písma

Posláním našeho hnutí je poskytnout veškeré znalosti světa co největšímu počtu lidí. V současné době je většina znalostí, které nabízíme, ve formě textu. Výzkum ukázal, že typografická nastavení (jako je velikost písma, délka řádku a výška řádku) ovlivňují zážitek ze čtení, a to jak z hlediska celkového pohodlí (tj. namáhání očí a únavy), tak porozumění a udržení.[2][3][4][5] Proto je pro nás důležité používat v našem rozhraní optimální typografické nastavení. Důležitým faktorem, který je třeba mít na paměti při určování toho, co je pro naše projekty optimální, je, že se lidé zabývají jak hloubkovým čtením, tak i skenováním textu.[6][7]

V předchozí fázi projektu jsme četli výzkumné studie týkající se délky řádku a dospěli jsme k závěru, že pro naše projekty je optimální 90–140 znaků na řádek (link to writeup). Nedávno jsme strávili čas čtením výzkumných studií o velikosti písma. Nejpřesvědčivějším a přímo použitelným výzkumem, který jsme dosud našli, je studie z roku 2016, která používala sledování očí k vyhodnocení vlivu velikosti písma a řádkování na lidi, kteří čtou Wikipedii:

Pomocí hybridního návrhu jsme porovnávali objektivní a subjektivní čitelnost a porozumění článků pro velikost písma v rozmezí 10 až 26 bodů a řádkování v rozmezí 0,8 až 1,8 (font: Arial). Naše zjištění poskytují důkaz, že čitelnost, měřená střední dobou fixace, se významně zvýšila s velikostí písma. Dále, otázky s porozuměním měly výrazně správnější odpovědi pro písmo velikosti 18 a 26. Tato zjištění poskytují důkaz, že webové stránky s velkým množstvím textu by měly používat písma velikosti 18 nebo větší a používat výchozí řádkování, pokud je cílem učinit webovou stránku snadno čitelnou a srozumitelnou. Naše výsledky se výrazně liší od předchozích doporučení, pravděpodobně proto, že se jedná o první práci, která pokrývá velikosti písma nad 14 bodů.[8]

Za prvé, musíme převést míru používanou výzkumníky (body) na míru, kterou prohlížeče nakonec vykreslují (px). Převod je: 1px = 72pt / 96.[9][10] Rozsah studovaný ve výzkumu (10–26 bodů) tedy odpovídá 13,3–34 pixelům. Jejich závěr, 18 bodů, se rovná 24px.

Měli bychom tedy zvětšit velikost písma na 24px? Výzkum zkoumal hloubkové čtení, ale lidé často skenují stránku, aby našli určitou informaci. Jedná se o odlišné chování při čtení, které pravděpodobně těží z menší velikosti písma než při čtení do hloubky. Náš konzervativní návrh, který bere v úvahu skenování, je pro začátek zvětšit velikost písma na 16 pixelů. (Zvětšili bychom také maximální šířku článku z 960px na 1050px.) Jako další krok budeme plánovat provedení vlastního výzkumu, abychom dále studovali velikost písma na wikinách Wikimedie.

Anotovaná bibliografie typografie a výzkumu čitelnosti

Odkaz na prototyp s navrhovanou velikostí písma: https://di-visual-design-font-size.web.app/Hummingbird

Zpětná vazba

Poznámky pod čarou

  1. ↑ Přístupnost kontrastu a barev, porozumění požadavkům WCAG 2 na kontrast a barvu: "pouze barevná identifikace odkazů".
  2. ↑ Hussain, Sohaib, Ahmed, Qasim Khan, (2011-11-01). "faktory čitelnosti webu ovlivňující uživatele všech věkových kategorií". Australian Journal of Basic and Applied Sciences, 2011, 5 (11), s. 972 - 977.
  3. ↑ Nanavati, Bias (2005). "[Optimální délka řádku https://eric.ed.gov/?id=EJ749012 při čtení – přehled literatury]". Viditelný jazyk, v39 n2 p121-145 2005.
  4. ↑ Banerjee, Majumdar, Majumdar (2011-01). "Studie čitelnosti, subjektivních preferencí a duševní zátěže u mladých dospělých Indů pro výběr optimálního typu a velikosti písma během čtení na obrazovce". Al Ameen Journal of Medical Sciences.
  5. ↑ Patterson, Tinker (1940). "Jak učinit písmo čitelné; příručka pro typografy, tiskaře a inzerenty, založená na dvanáctiletém výzkumu zahrnujícím testy rychlosti čtení u 33 031 osob". Nakladatelství Harper & Brothers.
  6. ↑ TeBlunthuis, Bayer, Vasileva (2019-08). "Bydlení na Wikipedii: zkoumání času stráveného čtenáři globální encyklopedie". OpenSym '19: Sborník příspěvků z 15. mezinárodního sympozia o otevřené spolupráci.
  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! Vliv velikosti písma a řádkování na online čitelnost". Konference Lidské faktory ve výpočetních systémech.
  9. ↑ Schaeffer, Kyle (30-09-2008) "CSS Font-Size: em vs. px vs. pt vs. procent"
  10. ↑ [převodník PT na PX https://pixelsconverter.com/pt-to-px]
Retrieved from "https://www.mediawiki.org/w/index.php?title=Reading/Web/Desktop_Improvements/Fifth_prototype_testing/cs&oldid=6417963"