MediaWiki

Czytanie/WWW/Ulepszenia interfejsu/Piąte testowanie 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 85% complete.
Outdated translations are marked like this.
Languages:

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

  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.

Miej na uwadze:

  • 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 [$1 olga wikimedia.org].

Pytania z formularza opinii

  1. Menu — otwórz prototyp w nowej karcie: https://di-visual-design-menus.web.app/Nied%C5%BAwied%C5%BA_brunatny?pl Którą opcję wolisz i dlaczego? Sprawdź wygląd wyszukiwarki, menu użytkownika, menu linków językowych i menu narzędzi.
  2. Obramowania i tła — otwórz prototyp w nowej karcie: https://di-visual-design-borders-bgs.web.app/Owca_domowa?pl Którą opcję wolisz i dlaczego?
  3. Wyróżnianie czytanej sekcji w spisie treści — otwórz prototyp w nowej karcie: https://di-visual-design-toc-active.web.app/Krokodyle?pl Którą opcję wolisz i dlaczego?
  4. Logo w nagłówku — otwórz prototyp w nowej karcie: https://di-visual-design-header-logo.web.app/Kakapo?pl Którą opcję wolisz i dlaczego?
  5. Kolory linków — otwórz prototyp w nowej karcie: https://di-visual-design-link-colors.web.app/Dziobak_australijski?pl Czy uważasz, że trzeba zrobić coś jeszcze, zanim ta zmiana zostanie wprowadzona?
  6. Rozmiary czcionki — otwórz prototyp w nowej karcie: https://di-visual-design-font-size.web.app/Kolibrowate?pl 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).

Porównanie z innymi interfejsami
 
Zrzut ekranu Wikipedii w hindi, skórka Monobook
 
Zrzut ekranu Wikipedii po japońsku, skórka stary Wektor

Rozważane zmiany

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 do prototypu z opcjami: https://di-visual-design-menus.web.app/Nied%C5%BAwied%C5%BA_brunatny?pl

1) niebieski wyzwalacz, niebieskie elementy

 

2) niebieski wyzwalacz, czarne elementy

 

3) czarny wyzwalacz, niebieskie elementy

 

4) czarny wyzwalacz, czarne elementy

 

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 do prototypu z opcjami: https://di-visual-design-borders-bgs.web.app/Owca_domowa?pl

1) minimalistycznie

 

2) ramki artykułu

 

3) ramki artykułu + podkreślenie nagłówka

 

4) linia wzdłuż spisu treści + podkreślenie nagłówka

 

5) linia wzdłuż spisu treści + podkreślenie tytułu strony

 

6) ramki artykułu + tło nagłówka (jednolite)

 

7) ramki artykułu + tło nagłówka (gradient)

 

8) tło dookoła artykułu (gradient)

 

9) tło dookoła artykułu (jednolite)

 

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. Możemy też ustawić dodatkowe ostylowanie do zaznaczenia aktywnej sekcji.

Link do prototypu z opcjami: https://di-visual-design-toc-active.web.app/Krokodyle?pl

1) minimalistycznie

 

2) wytłuszczenie

 

3) tło

 

4) linia i ramka

 

5) linia i ramka (2)

 

Logo w nagłówku

W Monobooku i starym Wektorze logo jest duże i kwadratowe. Biorąc pod uwagę różne zmiany w Wektorze 2022, bardziej pasującym rozwiązaniem mogłoby być mniejsze, prostokątne logo. Jednakże chcieliśmy zapytać Was o wypróbowanie kilku innych opcji. Wypróbujcie je na różnych rozmiarach ekranu, ponieważ to, jak wypadają, zależy właśnie od wielkości ekranu.

Link do prototypu z opcjami: https://di-visual-design-header-logo.web.app/Kakapo?pl

1) Prostokątne logo po lewej

 

2) Kwadratowe logo po lewej

 

3) Kwadratowe logo po lewej (gradient)

 

4) Prostokątne logo pośrodku

 

Kolory linków

World Wide Web Consortium (W3C) ma Zalecenia w sprawie dostępności. Te zalecenia definiują minimalny kontrast między tekstem a linkami. "Ze względu na użyteczność i dostępność linki powinny być domyślnie podkreślone. W innym wypadku ich kolor musi mieć kontrast w wysokości co najmniej 3:1 w stosunku do zwykłego tekstu oraz, po najechaniu kursorem myszy lub przesunięciu fokusa klawiatury, musi być wskazanie, że są to linki (zwykle jest to podkreślenie).[1] Skoro nie podkreślamy linków domyślnie, kontrast naszego koloru powinien spełniać wymaganie co najmniej 3:1. Aby sprawdzić kontrast między linkami i zwykłym tekstem, możemy użyć narzędzia stworzonego przez WebAIM.

Obecne kolory linków
Kolor Kontrast z kolorem tekstu #202122 Wynik testu Link do wyniku testu
niebieskie linki #0645ad 1.89:1 ❌ Źle link do wyników
odwiedzone linki #0b0080 1.01:1 ❌ Źle link do wyników
Proponowane kolory linków
Kolor Kontrast z kolorem tekstu #202122 Wynik testu Link do wyniku testu
niebieskie linki #3366cc 3:1 ✅ Dobrze link do wyników
odwiedzone linki #795cb2 3.06:1 ✅ Dobrze link do wyników

Dodatkowo zaproponowany kolor linków występuje w Wikimedia Design Style Guide i jest użyty na naszych stronach mobilnych oraz w różnych logotypach, więc zmiana na ten kolor byłaby przejawem konsekwentności i spójności.

Link do prototypu z proponowanymi kolorami: https://di-visual-design-link-colors.web.app/Dziobak_australijski?pl

Obecne kolory linków

 

Proponowane kolory linków

 


Rozmiar tekstu

Misją naszego ruchu jest przekazanie wiedzy całego świata jak największej liczbie ludzi. Obecnie większość wolnej wiedzy, jaką oferujemy, przekazujemy w formie tekstu. Badania dowiodły, że ustawienia typograficzne (takie jak wielkość tekstu, długość linii, interlinia) mają wpływ na czytanie, zarówno na komfort (np. użycie mięśni gałek ocznych), jak i zrozumienie i zapamiętanie.[2][3][4][5] Jest zatem dla nas ważne, żebyśmy mieli najlepsze ustawienia typograficzne w naszym interfejsie. Kolejnym ważnym czynnikiem, o którym powinniśmy pamiętać, rozważając, co jest najlepsze dla naszych projektów, jest to, że ludzie zarówno czytają uważnie, jak i przelatują wzrokiem tekst.[6][7]

W poprzedniej fazie projektu czytaliśmy o badaniach dotyczących długości szpalty i uznaliśmy, że najlepsza dla naszych projektów jest liczba między 90 a 140 znaków (zob. więcej). Ostatnio spędziliśmy więcej czasu na czytaniu o wielkości tekstu. Najbardziej przekonującym i dającym się zastosować badaniem, które znaleźliśmy, jest to z 2016 roku, w którym użyto śledzenia gałek ocznych do oceny wpływu wielkości tekstu i interlinii na czytanie Wikipedii:

Używając metod hybrydowych w designie, porównaliśmy obiektywną i subiektywną czytelność i zrozumiałość artykułów z tekstem między 10 a 26 punktami i interlinią między 0,8 a 1,8 (font: Arial). Nasze ustalenia dostarczają dowodów, że czytelność, mierzona jako średni czas skupienia wzroku, zwiększała się znacznie wraz ze wzrostem wielkości tekstu. Ponadto na pytania o zrozumienie tekstu udzielano znacznie częściej poprawnych odpowiedzi, kiedy tekst miał wielkość między 18 a 26 punktów. Te ustalenia dostarczają dowodów, że strony internetowe zawierające dużo tekstu powinny stosować tekst wielkości 18 punktów lub większego oraz domyślnej interlinii, jeżeli celem jest ułatwienie czytania i zrozumienia tekstu. Te wyniki znacznie różnią się od poprzednich rekomendacji; prawdopodobnie dlatego, że jest to pierwsze badanie uwzględniające tekst powyżej 14 punktów.[8]

Po pierwsze musimy zamienić miarę używaną przez badaczy (punkty) na miarę używaną przez przeglądarki (piksele). 1 piksel równa się 72 punktom / 96.[9][10] Zakres porównany w badaniach (10-26 punktów) odpowiada więc 13,3-34 pikselom. Zalecana wielkość, 18 punktów, to 24 piksele.

Czy powinniśmy więc powiększyć tekst do 24 pikseli? Badanie dotyczyło czytania ze zrozumieniem, jednakże użytkownicy często przelatują tekst wzrokiem w poszukiwaniu konkretnej informacji. Jest to inny rodzaj czytania, który oczywiście korzysta z sytuacji, kiedy tekst jest mniejszy niż w przypadku uważnego czytania ze zrozumieniem. Nasza zachowawcza propozycja, biorąca pod uwagę szybkie oglądanie strony, to zwiększenie tekstu do 16 pikseli. (Zwiększylibyśmy także szerokość szpalty, z 960 do 1050 pikseli). Kolejnym krokiem będzie przeprowadzenie naszego własnego badania, żeby lepiej przestudiować wielkość tekstu na wikimediowych wiki.

Wykorzystana bibliografia z zakresu typografii i czytelności

Link do prototypu z proponowanym rozmiarem czcionki: https://di-visual-design-font-size.web.app/Kolibrowate?pl

Feedback

Przypisy

  1. ↑ Contrast and Color Accessibility, Understanding WCAG 2 Contrast and Color Requirements: "Color-only identification of links".
  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. ↑ Konwerter PT (punkty typograficzne) do PX (pikseli)
Retrieved from "https://www.mediawiki.org/w/index.php?title=Reading/Web/Desktop_Improvements/Fifth_prototype_testing/pl&oldid=6728015"