Reading/Web/Desktop Improvements/Fifth prototype testing/pl

Prosimy was o opinie na temat wyglądu (visual designu) Wektora 2022. Przez visual design rozumiemy wygląd tekstu, przycisków, ramek, tła i odległości między elementami interfejsu.

Instrukcje
Miej na uwadze:
 * 1) Przejrzyj tę stronę, aby poznać kontekst
 * 2) Utwórz nową sekcję na tej stronie, używając formularza poniżej (zostanie on automatycznie uzupełniony pytaniami).
 * 3) Podziel się swoją opinią w nowo utworzonej sekcji.
 * To są prototypy, większość funkcji nie działa, ponadto mogą występować bugi i niedoskonałości.
 * Formularz utworzenia nowej sekcji nie jest kompatybilny z edytorem wizualnym (VE). Jeżeli używasz edytora wizualnego, utwórz nową sekcję, skopiuj i wklej pytania zamieszczone poniżej.
 * Nie musisz odpowiadać na każde pytanie - skup się na tych, na temat których masz jakąś opinię.
 * Design, a szczególnie visual design, może być oceniany subiektywnie. Chociaż wszyscy mamy prawo do posiadania opinii, prosimy o jak najdokładniejsze opisanie twojej. Wyjaśnij też, jak ma się ona do założeń prostoty i użyteczności designu.
 * Może być tak, że istnieją dobre warianty, których tutaj nie zaprezentowaliśmy. Śmiało zasugeruj coś innego, jeśli uważasz, że byłoby lepsze niż przedstawione warianty. Jeżeli dobrze czujesz się w dziedzinie designu lub programowania, śmiało dodaj szkice lub prototypy swoich pomysłów (nie jest to jednak obowiązkowe). Pliki designera: Figma, Sketch, Google Drawing. Prototyp: GitHub.
 * Jeżeli dodajesz swoje pomysły, prosimy, nie edytuj tej strony; zamieść je na stronie ze swoją opinią.
 * Doceniamy designerów-amatorów i szanujemy doświadczonych designerów. Przejrzymy wszystkie opinie i pomysły, a w sprawie końcowej decyzji będziemy polegali na osądach doświadczonych designerów.
 * Jeżeli wolisz wysłać opinię e-mailem, wyślij go do Olgi Vasilevej na [mailto:Olga@wikimedia.org olga@undefinedwikimedia.org].

Pytania z formularza opinii

 * 1) Menus — open prototype in a new tab: https://di-visual-design-menus.web.app/Brown_bear. Którą opcję wolisz i dlaczego? Sprawdź wygląd wyszukiwarki, menu użytkownika, menu linków językowych i menu narzędzi.
 * 2) Borders and backgrounds — open prototype in a new tab: https://di-visual-design-borders-bgs.web.app/Zebra. Którą opcję wolisz i dlaczego?
 * 3) Active section in the table of contents — open prototype in a new tab: https://di-visual-design-toc-active.web.app/Otter. Którą opcję wolisz i dlaczego?
 * 4) Logo in the header — open prototype in a new tab: https://di-visual-design-header-logo.web.app/Panda. Którą opcję wolisz i dlaczego?
 * 5) Link colors — open prototype in a new tab: https://di-visual-design-link-colors.web.app/Salmon. Czy uważasz, że trzeba zrobić coś jeszcze, zanim ta zmiana zostanie wprowadzona?
 * 6) Font size — open prototype in a new tab: https://di-visual-design-font-size.web.app/Hummingbird. Czy masz jakieś uwagi co do zaproponowanej wielkości tekstu?

Wyjaśnienie i kontekst
W ciągu ostatnich dwóch lat zrobiliśmy różne zmiany w strukturze interfejsu. Przesunęliśmy wyszukiwarkę, linki językowe i spis treści. Zorganizowaliśmy niektóre linki w formie menu. Ponadto ograniczyliśmy szerokość szpalty, dodaliśmy przyczepiony nagłówek i przesunęliśmy tytuł strony nad zakładki strony. Teraz, mając wszystkie te elementy w nowych miejscach, chcemy zająć się ogólnym wyglądem. Niektóre ze wstępnych pytań, jakie sobie zadawaliśmy, to:
 * jak możemy użyć visual designu do poprawy interfejsu?
 * czy to, że skórka ma swoją "osobowość" (jak niebieskie linie i gradienty w starym Wektorze) jest wartościowe?
 * w którym momencie jest za dużo dodatków? kiedy mogą rozpraszać lub sprawiać, że interfejs będzie dezorientujący?
 * co, jeśli podejdziemy do sprawy radykalnie minimalistycznie i upodobnimy interfejs do pierwotnego wyglądu Wikipedii?

Tradycyjnie nasze podejście było proste i funkcjonalne. Było niewiele ostylowania elementów HTML, co upraszczało interfejs zarówno dla użytkowników, jak i dla designerów i programistów. To oznacza również, że wygląd naszego interfejsu jest dość ponadczasowy. Nie gonimy za trendami i nie wprowadzamy zmian co kilka lat. Patrząc na poniższe zrzuty ekranu, możemy zobaczyć, jak ostrożnie Monobook i stary Wektor używają visual designu (głównie ramki i kolory tła).

Menu
W interfejsie używamy kilku menu. Jednak do tej pory nasze podejście do ostylowania menu nie było konsekwentne. Mamy możliwość wypracować bardziej dostępne i jednolite rozwiązania do ostylowania menu. W najprostszej formie menu dzielą się na dwie części: wyzwalacz i elementy. Rozważamy wybór między czernią a niebieskim (zarówno dla wyzwalacza, jak i elementów) oraz pogrubieniem i brakiem pogrubienia (dla wyzwalacza).

Link to prototype with options: https://di-visual-design-menus.web.app/Brown_bear

Ramki i tła
Czy powinniśmy dodać ramki i tła, żeby pomóc odróżnić obszary interfejsu? Jak one powinny wyglądać? Jak napisaliśmy w rozdziale Wyjaśnienie i kontekst, Monobook i starszy Wektor mają tła i ramki, które oddzielają interfejs od treści. Tła i ramki mogą nadać trochę "osobowości" interfejsowi. Jednakże ustalenie, czy są one przydatne lub konieczne, jest trudne. Przedstawiamy kilka opcji coraz większej ilości/coraz ciemniejszych ramek i teł.

Link to prototype with options: https://di-visual-design-borders-bgs.web.app/Zebra

Aktywna sekcja w spisie treści
Spis treści jest teraz po lewej stronie artykułu i pozostaje widoczny w tym samym miejscu mimo przewijania. Nowością jest to, że spis treści wskazuje, którą sekcję czytasz (nazywamy to "aktywną sekcją"). Obecnie, podobnie jak w przypadku zakładek Artykuł/Dyskusja, aktywna sekcja w spisie treści jest zaznaczona na czarno, a nieaktywne są niebieskie. Ten schemat nam się podoba, ponieważ jest prosty, nie zwraca na siebie uwagi i jest użyty gdzieś indziej. We could also use additional styling to indicate the active section.

Link to prototype with options: https://di-visual-design-toc-active.web.app/Otter

Logo w nagłówku
Monobook and Legacy Vector both feature a square Wikipedia logo with a large globe. Given the various changes to Vector 2022 a smaller, rectangular logo in the corner may fit the layout better. However, we wanted to make sure to try various options. Please remember to try these options at various screen sizes, as the balance of the layout shifts depending on your screen size.

Link to prototype with options: https://di-visual-design-header-logo.web.app/Panda

Kolory linków
The World Wide Web Consortium (W3C) have Web Content Accessibility Guidelines. These guidelines define a minimum contrast level for links: "For usability and accessibility, links should be underlined by default. Otherwise, link text must have at least 3:1 contrast with surrounding body text, and must present a non-color indicator (typically underline) on mouse hover and keyboard focus." Since we do not underline links by default, our link color choice must meet the 3:1 contrast requirement. In order to check the contrast of our links with our body text we can use the contrast checker provided by WebAIM.

Additionally, the proposed blue link color is already part of the Wikimedia Design Style Guide, and is used on our mobile websites as well as in various project logos, so we would be gaining consistency.

Link to prototype with proposed colors: https://di-visual-design-link-colors.web.app/Salmon

Rozmiar tekstu
The mission of our movement is to provide all of the world's knowledge to as many people as possible. Currently the majority of the knowledge we offer is in the form of text. Research has shown that typographic settings (such as font size, line length, and line height) influence the experience of reading, both in terms of general comfort (i.e. eye strain and fatigue), and comprehension and retention. Therefore it is important for us to use optimal typographic settings in our interface. An important factor to keep in mind when determining what is optimal for our projects is that people engage both in in-depth reading, as well as scanning of text.

In a previous phase of the project we read research studies regarding the line length and concluded that between 90–140 characters per line is optimal for our projects (link to writeup). Recently we have spent time reading research studies about font size. The most convincing, and directly applicable, research we have found thus far is a 2016 study that used eye-tracking to evaluate the affects of font size and line spacing for people reading Wikipedia:

Using a hybrid-measures design, we compared objective and subjective readability and comprehension of the articles for font sizes ranging from 10 to 26 points, and line spacings ranging from 0.8 to 1.8 (font: Arial). Our findings provide evidence that readability, measured via mean fixation duration, increased significantly with font size. Further, comprehension questions had significantly more correct responses for font sizes 18 and 26. These findings provide evidence that text-heavy websites should use fonts of size 18 or larger and use default line spacing when the goal is to make a web page easy to read and comprehend. Our results significantly differ from previous recommendations, presumably, because this is the first work to cover font sizes beyond 14 points.

Firstly, we need to convert the measure used by the researchers (points) into the measure that browsers ultimately render (px). The conversion is: 1px = 72pt / 96. So the range studied in the research (10–26 points) is equivalent to 13.3–34px. Their conclusion, 18 points, is equal to 24px. So should we increase the font size to 24px? The research studied in-depth reading, however people often scan the page in order to find a certain piece of information. This is a different reading behavior, that arguably benefits from a smaller font size than in-depth reading does. Our conservative proposal, taking into account scanning, is to increase the font size to 16px to begin with (we would be increasing the maximum width of the article as well, from 960px to 1050px.). As a next step, we will plan to conduct our own research to further study font size on Wikimedia wikis.

Annotated bibliography of typography and readability research

Link to prototype with proposed font size: https://di-visual-design-font-size.web.app/Hummingbird