Čtení/Web/Vylepšení/Funkce/Omezení šířky obsahu na ploše

Přehled

Funkce

Úložiště

FAQ

« Předchozí

Další »

Řešeno přes Phabricator
Úkol T246420

Jedním z hlavních cílů projektu je učinit Wikipedii a další wikiwemidní stránky vstřícnějšími pro nováčky. Jedním ze způsobů, jak toho chceme dosáhnout, je zpříjemnit čtení článků.

Co znamená mít příjemný (nebo nepříjemný) čtenářský zážitek? Podle výzkumu existuje několik přispívajících faktorů, z nichž hlavní je délka tratě. Studie Délka řádků počítačového textu ovlivňuje čtení a učení od Petera Ortona, Ph.D. z IBM Center for Advanced Learning, dochází k závěru, že čím delší je délka řádku, tím obtížnější je pro někoho číst a nakonec se učit a uchovávat si textové informace. Několik dalších souvisejících studií lze nalézt v článku na Wikipedii Délka čáry, které všechny doporučují 40 až 75 znaků na řádek.

I když není nijak zvlášť jednoduché dosáhnout doporučené délky řádků na wikinách Wikimedie, budeme omezovat šířku obsahu pomocí parametru max-width, abychom většinu textu na wikinách přiblížili doporučené délce.

Můžete se dozvědět více podrobností o výzkumu a úvahách, které stojí za touto funkcí.

Popis funkce a požadavky

Hlavní funkcí této funkce je omezení šířky obsahu článku. Abychom však zajistili, že se ostatní prvky na stránce (jmenovitě postranní panel a záhlaví) příliš nevzdálí od obsahu, přidali jsme dva další kontejnery. Druhý kontejner zajišťuje, že postranní panel zůstane blízko obsahu. Aby se záhlaví příliš nevzdálilo od obsahu i postranního panelu, existuje třetí kontejner, který omezuje maximální šířku záhlaví.

Z technického hlediska: Obsah na většině stránek je umístěn uvnitř kontejneru obsahu s maximální šířkou 960 pixelů. Existují dva další kontejnery, které pomáhají spravovat šířku dalších částí rozhraní, jako je záhlaví a postranní panel: kontejner pracovního prostoru (maximální šířka 1440px) a kontejner stránky (1650px). Níže jsou uvedeny diagramy, které ilustrují, jak tyto kontejnery fungují. Existují určité stránky, jejichž obsah není omezen kontejnerem obsahu, včetně Historie, Nedávných změn a dalších podobných stránek typu protokolu.

• 
  Diagram znázorňující tři kontejnery rozvržení se zavřeným bočním panelem
• 
  Diagram znázorňující tři kontejnery rozvržení s otevřeným bočním panelem
• 
  Diagram znázorňující tři kontejnery rozvržení se speciální stránkou

Požadavky na vývoj a směrnice

Zde je GIF, který ilustruje rozdíl mezi aktuálním rozvržením a aktualizovaným rozvržením s různými výše popsanými omezeními šířky:

GIF porovnávající aktuální rozvržení s aktualizovaným rozvržením, které omezuje šířku obsahu

Omezení

Hlavní komplikací je, že některé stránky protokolu, jako například Historie a Nedávné změny, se kvůli zalamování řádků stávají čím užší obrazovka, tím obtížněji čitelnými. Proto jsme se rozhodli s těmito stránkami zacházet zvláštním způsobem a omezit je pouze na kontejner pracovního prostoru (1440px) spíše než na kontejner obsahu (960px). Zde je GIF prototypu, který ukazuje přepínání mezi stránkou článku a související stránkou historie:

GIF zobrazující šířku stránky článku oproti stránce historie v novém rozvržení Vector

Uživatelské testování s editory

Provedli jsme kolo zpětné vazby s prototypem omezené šířky obsahu s editory napříč různými wikinami. Redaktoři byli vyzváni, aby si prototyp prohlédli a poskytli zpětnou vazbu pomocí centrálního oznamovacího banneru. Z této funkce panovaly smíšené pocity: mnoho editorů ocenilo kratší řádky a shodlo se, že tato funkce vytvořila pohodlnější čtenářský zážitek. Některým editorům se nelíbily mezery kolem obsahu a měli pocit, že je to plýtvání prostorem. Všechny tyto zpětné vazby vyvažujeme rozsáhlým existujícím výzkumem délky řádků a pohodlí při čtení.

Cíle a motivace

Čitelnost

Výzkum

Primárním cílem je zlepšit čitelnost wiki stránek Wikimedie. Rozhodli jsme se zapracovat na šířce oblasti obsahu. K tomuto problému existují doporučení založená na výzkumu.

• Článek na anglické Wikipedii o délce řádku poskytuje dobrý přehled.
• Stejně tak esej profesorky Laury Franz.
• Optimální délka řádku při čtení - A Literature Review (2005), z recenzovaného časopisu Visible Language – "studie dospěly k závěru, že střední délka řádků v rozmezí 50 až 70 cpl [znaků na řádek] je nejsnáze čitelná a uživatelé neupřednostňují extrémní délky řádků (velmi krátké nebo velmi dlouhé) při čtení z obrazovky. Nebyl zjištěn žádný významný vliv délky řádku na porozumění, i když rychlí čtenáři těží z úzkých sloupců s krátkými řádky díky specifickým vzorcům čtení (s jedním protichůdným zjištěním)“.
• Efekty okolních informací a délka řádku na porozumění textu z webu (2002), z Canadian Journal of Learning and Technology – "Porozumění bylo ovlivněno mezerami. Účastníci lépe rozuměli informacím obklopeným mezerami než informacím obklopeným nesmyslnými informacemi", což se pravděpodobně stane, pokud se text roztáhne až na okraj prohlížeče.
• Vliv rychlosti čtení a délky řádku na efektivitu čtení z obrazovky (2001), z International Journal of Human-Computer Studies – "Zdá se, že délka řádku 55 cpl podporuje efektivní čtení z hlediska rychlosti i porozumění. Protože však délky čar použité v této studii byly rozprostřeny v širokém rozsahu, může existovat optimálnější nastavení, než je toto. Změnou rozsahu a extrémů délek čar v budoucím výzkumu může být možné přesněji identifikovat optimální formát a prozkoumat relativní příspěvky mechanických a kognitivních faktorů."
• Kratší řádky usnadňují čtení v těch, kteří bojují (2013), od PLOS One – "Krátké řádky snižují počet regresí a obecně zlepšují rychlost čtení a porozumění jednoduše tím, že snižují pravděpodobnost, že bude možné vnímat přeplněný text na místech, která byla dříve fixována."
• Vliv délky řádku na online čtení dětí a dospělých (2002), od Laboratoře pro výzkum použitelnosti softwaru (SURL) (SURL) na Státní univerzita ve Wichitě – "Tato studie zkoumala účinky délky řádku na výkon čtení. Bylo zjištěno, že rychlosti čtení jsou nejrychlejší při 95 cpl. Čtenáři hlásili, že se jim líbí nebo nelíbí extrémní délky řádků (35 cpl, 95 cpl)“.
• Účinky délky řádků na výkon při čtení dětmi a dospělými a vnímaný a skutečně vnímaný dospělými (2003), ze Sborníku výroční schůze Společnosti pro lidské faktory a ergonomii – "Nebyly zjištěny žádné rozdíly ani v době čtení, ani v účinnosti u dospělých ani u dětí. Dospělí však dávali přednost kratším délkám řádků před délkou řádků na celou obrazovku.“ a "Podmínka nejužší délky řádku byla vnímána jako podpora nejvyšší koncentrace čtenáře, zatímco podmínka střední délky řádku byla považována za nejoptimálněji prezentovanou délku pro čtení."
• Čtení online textu:Porovnání čtyř rozložení bílého prostoru (2004), není jasné, zda to bylo recenzováno – "Výsledky této studie ukázaly, že manipulace s bílým místem na okraji ovlivnila rychlost čtení i porozumění. Účastníci četli text na okraji pomaleji, ale pochopili více než text bez okraje. Výsledky obecně upřednostňovaly použití marží."

Oblíbeným doporučením je, že by měl být mezi 40 a 75 znaky na řádek. Závěry několika studií docházejí k závěru, že "krátké délky řádků jsou lépe čitelné". Pokud jde o učení a uchovávání informací: "Subjekty čtoucí úzké odstavce měly lepší uchování než ty, které čtou široké odstavce".

Pokyny pro přístupnost webového obsahu (WCAG)

• The Web Accessibility Initiative (WCAG) směrnice 1.4.8 uvádí, že aby byly řádky textu přístupné všem uživatelům, měly by mít 80 nebo méně znaků (nebo 40 nebo méně znaků, pokud je text čínský, japonský nebo korejština).

Oblíbené stránky s omezenou šířkou

Lze najít mnoho populárních stránek, které splňují tyto pokyny.

• Články v online vědeckém časopise Nature mají maximální šířku, což znamená ~76 znaků na řádek.
• Články New York Times mají ~64 znaků na řádek.
• Články Times of India mají přibližně 100 znaků (hindština).
• Články v časopisech Oxford Academic jsou ~75.
• Články na webových stránkách World Health Organization jsou ~96 (latinská abeceda), ~46 (čínská abeceda) a ~85 (azbuka).
• Při použití režimu čtení v Safari nebo Firefox je text vykreslen na ~73 a ~77 znaků na řádek (latinská abeceda).

Srovnání s wikinami Wikimedie

V současné době má anglická wiki stránka Wikimedie v okně prohlížeče o velikosti 1280 pixelů počet znaků ~170 znaků na řádek. To je na malém konci spektra velikostí obrazovky.

Na wiki Wikimedie počet znaků na řádek roste s rostoucí šířkou obrazovky. Takže na druhé nejoblíbenější velikosti obrazovky, 1920px (21 % uživatelů), je počet znaků na řádek ~262, což je více než trojnásobek doporučené hodnoty.

Proč nezvolit "nejjednodušší" řešení

Na základě výhradně doporučené délky řádku se zdá, že někde kolem 700 pixelů je rozumné. Proč neomezit šířku tak, abychom dosáhli doporučené délky čáry, jak se zdá na jiných webech s online obsahem?

Protože naše stránky jsou jiné, a proto je lidé jinak čtou.

• Stránky wiki Wikimedie jsou velmi dlouhé, obsahují velké množství informací a nejsou jednotné od jedné stránky k druhé. V důsledku toho mají lidé potřebu procházet a vyhledávat na stránkách. To je něco jiného než lineární čtení typického online článku nebo knihy. Podporuje to náš výzkum týkající se doby čtení na Wikipedii.
• Čím užší obsah vytvoříme, tím delší bude stránka. Možná je také obtížnější skenování, protože zahrnuje více rolování atd. Další informace týkající se různých typů online čtení naleznete v této studii z roku 2006 provedené Nielsen Norman Group.
• Navíc není jednoduché dosáhnout určitého počtu textových znaků na řádek. Je to proto, že wiki stránky Wikimedie obsahují mnoho prvků, které jsou vnořené vedle textu.

Článek o měsíci o šířce 550 pixelů, nepřerušovaný odstavec s počtem znaků na řádek ~83

Článek o měsíci o šířce 750 pixelů, odstavec vedle infoboxu s počtem znaků na řádek ~72

Náš návrh musí brát v úvahu tyto rozdíly.

• Měli bychom omezit šířku o určitou míru, abychom se přizpůsobili soustředěnému/zaujatému čtení. To znamená kratší délky čar a menší hustotu.
• Zároveň bychom měli čtenářům stále umožnit procházet a prohledávat a získávat vizuální mapu stránky, aniž by museli příliš rolovat. To je argument pro delší délky čar a větší hustotu.

Jak to uděláme?

Naše řešení

Možná bychom chtěli zvážit dvě společné zkušenosti.

1. Horní část článku, odstavec textu umístěný vedle infoboxu
2. Střed článku, odstavec bez prvků, které by jej přerušovaly

Můžeme uvažovat o těchto dvou zkušenostech v různých šířkách a počítat délku znaků na řádek pro každou z nich:

Šířka obsahu	Odstavec vedle informačního pole	Nepřerušovaný odstavec
600px	~30 znaků na řádek	~94 znaků na řádek
700px	~59	~109
800px	~76	~125
900px	~89	~142
1000px	~105	~154

Při šířce 1 000 pixelů je nepřerušovaný odstavec textu dlouhý ~154 znaků, což je zhruba dvojnásobek horní hranice doporučeného rozsahu. Někdy existují plovoucí prvky, které jsou širší než informační pole, což má za následek užší sloupce textu vedle nich. Také zde nebyla stanovena maximální šířka. I když někteří editoři mohou upravovat na užších obrazovkách (nebo kontrolovat, jak stránky vypadají na užších obrazovkách), pravděpodobně se na stránkách objeví obsah, který na užší šířce (zatím) nebude vypadat skvěle, protože to možná nepřipadalo v úvahu (např. velké tabulky). .

Dalším přístupem je uvažování o rozvržení založeném na mřížce. Jedná se o přístup, jehož cílem je jak vizuální harmonie na stránce, tak snazší rozhodování o rozestupech, šířkách atd. Vzhled Vector aktuálně nepoužívá mřížku. Něco, co bychom mohli udělat, je uvažovat o šířce infoboxu jako sloupce mřížky (protože jsou to běžné prvky) a pak použít násobek k určení šířky obsahu.

Článek o Indii s obsahem o 3x šířce infoboxu

Článek o Indii s obsahem o 4x šířce infoboxu

Vytvoření společného čtenářského zážitku

Zavedení maximální šířky by pomohlo vytvořit společný zážitek. Doufejme, že by to editorům pomohlo při rozhodování o rozvržení stránky.

Poznámka: Na Příručka stránky stylu/rozvržení je zmíněna minimální velikost 1024px. To však není úplně totéž.

V současné době může editor upravovat stránku o šířce 1500 pixelů, zatímco čtenář ji čte v šířce 1200 pixelů. Implementací maximální šířky tento rozdíl zcela neodstraníme. Stále by existovala variace pod pevnou šířkou pro lidi s užšími obrazovkami. Tím bychom však značně omezili rozsah variací.

Závěr

Po zvážení toho všeho jsme došli ke dvěma závěrům:

1. Zdá se, že maximální šířka v rozsahu 800–1000 pixelů je rozumným výchozím bodem. Obsah na stránce vycentrujeme, abychom zajistili, že bude vypadat dobře s otevřeným i zavřeným bočním panelem.
2. Zdá se, že stojí za to provést studii zaměřenou konkrétně na čitelnost článků na Wikipedii. Doufáme, že se nám k tomu podaří najít zdroje.

Zobrazuje se obsah s maximální šířkou 960 pixelů (sbalený postranní panel)

Zobrazení obsahu s maximální šířkou 960 pixelů (otevřený boční panel)

Další poznámky

Poznámka k porušení šablon / obsahu / speciálních stránek / atd.

Část toho, co dělá Wikipedii a další wikiny Wikimedie, mocným nástrojem pro sdílení znalostí, spočívá v tom, že existuje jen velmi málo omezení, jak jsou informace prezentovány. Výsledkem je široká škála různých prvků na stránkách: tabulky, galerie obrázků, diagramy, panoramatické obrázky, grafy, formuláře, mapy, pole kategorií a další. Vypořádali jsme se s výzvami při návrhu mobilního webu a zajistili, aby obsah vypadal dobře. To je důvod, proč si uvědomujeme, že nastanou situace, kdy obsah stránky nebude vypadat skvěle vzhledem k maximálnímu využití. Naším plánem je:

• Spolupráce s našimi testovacími wiki komunitami, abyste identifikovali problémy a diskutovali o řešeních pomocí stylů šablon nebo jiných existujících nástrojů.
• Neimplementovat maximální šířku na speciálních stránkách. Speciální stránky nejsou určeny ke "čtení". Často fungují spíše jako seznamy nebo kontrolní panely. Dokud nebudeme mít čas propracovat podrobnosti o citlivějších rozvrženích těchto stránek, necháme je být. Zde je první prototyp toho, jak by to fungovalo. Můžete přepínat mezi "Zobrazit historii" a "Číst", abyste to pochopili: https://di-collapsible-sidebar-5.firebaseapp.com/Tea

Předchozí konverzace

Toto téma bylo v minulosti diskutováno.

• 2014 – diskuze z projektu Typography Refresh

Neváhejte sem přidat další odkazy na minulé konverzace.

Přepnout na celou šířku

Přepínač na celou obrazovku

Do října 2022 mohli přihlášení uživatelé přepínat mezi omezenou a plnou šířkou obsahu pouze pomocí miniaplikací. Podle anglických wikipedistů to bylo nedostatečné. Rozhodli jsme se postavit přepínač. (Vpravo vidíte snímek obrazovky tohoto přepínače.) Muselo to být viditelné a dostupné jak pro přihlášené, tak i pro odhlášené uživatele. V důsledku toho máme:

1. Vytvořena preference pro přihlášené uživatele. Umožňuje nastavit šířku napříč zobrazenými stránkami a wikinami. Předvolba je k dispozici v sekci vzhledu na stránce s předvolbami (Zapnout režim omezené šířky). Může být také nastaveno jako globální preference.
2. Vytvořen přepínač pro přihlášené a neodhlášené uživatele. Přepínač je k dispozici na každé stránce, pokud je šířka obrazovky větší než 1400 pixelů. Výběrem přepínače se zvětší šířka oblasti obsahu.
   • Pro přihlášené uživatele přepínač také ovládá preferenci uvedenou v bodě 1 výše. Pokud například kliknete na přepínač na stránce a navštívíte stránku s nastaveními, všimnete si, že políčko Zapnout režim omezené šířky není zaškrtnuté.
   • Pro neodhlášené uživatele přepínač zpočátku nastavoval šířku pro každou stránku. To znamená, že po obnovení stránky nebo otevření jiné stránky se šířka vrátí do výchozího (omezeného) stavu.
   • Poté, co jsme si nastavili náš vzhled jako výchozí na anglické Wikipedii, jsme se dozvěděli o obavách ohledně nastavení pro odhlášené uživatele. Po koordinaci s mnoha týmy jsme provedli změnu. Od února 2023 vidí všichni uživatelé nastavení šířky dle vlastního výběru, a to i při obnovování stránek nebo otevírání nových.

Proč přepínač zpočátku fungoval pro jednotlivé stránky? Důvodem bylo, že preference v zásadě nejsou dostupné pro neodhlášené uživatele. Absence preferencí pro odhlášené uživatele se netýká pouze tohoto vzhledu. (Můžete si zjistit více o technických omezeních .) Podařilo se nám najít krátkodobý obchvat. Musíme udělat ještě více práce, abychom zajistili, že toto řešení bude možné zachovat. V budoucnu bychom mohli použít lepší řešení. To by se dalo použít na nastavení, jako je velikost písma nebo tmavý režim.