Cześć wszystkim!

Tydzień temu pokazaliśmy Wam pierwszą publiczną zapowiedź FandomDesktop, unifikację desktopowych doświadczeń Fandomu i Gamepedii. W tej zapowiedzi podwoiliśmy nasze zobowiązanie z Community Connecta, mówiące „im więcej, tym lepiej” i oznaczające większą przejrzystość, większą otwartość i więcej dogłębnego spojrzenia na zmiany, zanim jeszcze zostaną dokonane. Kontynuując to zobowiązanie, podsumujmy, w jaki sposób strony artykułów zmieniają się wraz z FandomDesktop. Przyjrzyjmy się też temu, w jaki sposób doszliśmy do tych zmian.

Zaczynając od sedna sprawy

Kiedy mówimy o wiki będących kluczowym doświadczeniem Fandomu, to właśnie artykuły są jego jądrem. Są tym, na czym skupiacie się jako twórcy i powodem, dla którego zdecydowana większość czytelników odwiedza wasze wiki. Przytłaczająca większość odwiedzin na nich zaczyna się, gdy ktoś kliknie link do artykułu w wynikach wyszukiwania. W związku z tym rozpoczęcie od sposobów na ulepszenie tego doświadczenia, zarówno dla czytelników, jak i zalogowanych edytorów, jest całkowicie logiczne.

Rozwiązania dla wielu przypadków użycia

Obecnie, gdy przychodzi do prezentacji treści, Fandom i Gamepedia różnią się fundamentalnie w designie. Skórka Oasis Fandomu prezentuje całą treść artykułu w standardowej szerokości, która okazuje się lepsza do czytania tekstu, co potwierdziły badania Fundacji Wikipedia i IBM. Skórka Hydra Gamepedii prezentuje treść artykułu w szerszym widoku, który jest lepszy do wyświetlania obfitych tabeli z danymi używanych przez całe mnóstwo gier skupionych na rzemiośle i łupach, tak jak to pokazano na oficjalnej Path of Exile Wiki, która jest prawie niezbędnym doświadczeniem drugiego ekranu podczas grania.

Dla zalogowanych edytorów Gamepedii jest to nawet szersze doświadczenie, ponieważ prawy moduł z reklamami znika. Oprócz tych przypadków użycia istniejących na poszczególnych platformach, przez lata od wydania Oasisa otrzymaliśmy sporo opinii od użytkowników Fandomu, że podczas gdy standardowa szerokość jest świetna dla niektórej treści, to nie zawsze jest idealna i jeśli jest to możliwe, chcieliby więcej miejsca na ekranie. Wiedzieliśmy, że musimy znaleźć dobry sposób na zadowolenie obu końców tego spektrum zastosowań, więc to było nasze podejście...

ANON - Default.png

Oto jak domyślnie będzie wyglądał FandomDesktop na Zelda Wiki dla niezalogowanego użytkownika. W tej chwili Zelda Wiki jest połączoną społecznością Fandomu i Gamepedii, która obecnie posiada design Gamepedii jako rezultat Projektu Crossover. Zauważycie, że w lewym górnym rogu artykułu znajduje się przycisk pełnego ekranu, nad przyciskami spisu treści i edycji. Jest to przełącznik szerokości i zarazem jedna z dwóch dużych zmian dotyczących wyświetlania artykułów w FandomDesktop. Przyjmuje widok standardowej szerokości, który jest dobry dla czytania tekstu i rozszerza go do widoku pełnej szerokości, który dopasowuje się do dostępnej szerokości waszej przeglądarki i jest lepszy do studiowania danych.

ANON - Expanded.png

Oto jak to wygląda na pełnej szerokości. Jest to znacznie szersze niż obecne doświadczenie Fandomu i porównywalne z doświadczeniem niezalogowanego użytkownika Gamepedii. Sieć wyewoluowała, tak samo jak rozmiary monitorów, więc posiadanie standardowej szerokości w myśl podejścia „jeden rozmiar dla wszystkich” w epoce tylu różnych opcji monitorów oznacza, że nie obsługiwaliśmy właściwie naszych czytelników, więc teraz robimy to dobrze.

Chcecie przełączyć się z powrotem do standardowej szerokości? Kliknijcie przełącznik ponownie i powrócicie do poprzednich ustawień.

Ale czekajcie… Jest coś więcej!

Zorientowani na szczegóły czytelnicy tego bloga (czytaj: większość z was) z pewnością zauważyli, że powiedzieliśmy o przełączniku pełnej szerokości jako o jednej z dwóch dużych zmian, które czynimy przy wyświetlaniu artykułów. Czym więc jest ta druga zmiana? Dla zalogowanych edytorów dodajemy drugą opcję kontroli waszego doświadczenia wyświetlania. Poprzez globalną preferencję albo poprzez przełącznik na stronie, zalogowani edytorzy będą mieli opcję ukrycia prawego modułu na stronach artykułów, co zwiększy obszar treści do nawet nieco szerszej niż widok dla zalogowanych użytkowników Gamepedii (około 1.1%).

Logged In - Collapsed Right Rail.png

Jak powiedzieliśmy, możecie to osiągnąć albo poprzez ustawienie w preferencjach, albo poprzez kliknięcie przełącznika w kształcie strzałki w prawym górnym rogu artykułu. Ta opcja pojawiła się jako rezultat bezpośredniego feedbacku od Community Councili, Gamepedia Fellowship, edytorów Fandomu i Gamepedii w wywiadach 1 na 1 z badań dotyczących designu, a także od uczestników Community Connecta. Edytorzy chcieli opcji umożliwiającej zobaczenie tak dużej przestrzeni treści, jak to możliwe i gdy spotkaliśmy się z takim zjednoczonym i praktycznym feedbackiem, ta decyzja była dla nas łatwa.

To jest dodatek dla zalogowanych użytkowników. Prawy moduł jest miejscem na wyświetlanie reklam dla niezalogowanych użytkowników, więc przełącznik nie jest czymś, co możemy udostępnić niezalogowanym. Pasuje to do designu opcji pełnej szerokości na Gamepedii, która jest dostępna tylko dla zalogowanych użytkowników.

Na koniec chcemy dodać dużo wartości do prawego modułu dla wszystkich użytkowników, ponieważ to świetne miejsce na narzędzia odkrywania i edycji. Będziemy do tego dążyć po uruchomieniu FandomDesktopu, kiedy zanurzymy się w więcej projektów nowych narzędzi edycyjnych, poprawy wyszukiwania, nowych dróg dla odkrywania i niektórych rzeczy, których nawet nie możemy jeszcze ogłosić. Skoro dodatkowa wartość prawego modułu nie pojawi się wraz z uruchomieniem FandomDesktop, sprawienie, żebyście trzymali go z powodu obietnicy jakiejś niezidentyfikowanej dodatkowej użyteczności w przyszłości, nie było dobrym wyborem. Jeśli zdecydujecie się wyłączyć prawy moduł, chcemy otrzymać to kliknięcie od was, by włączyć go ponownie i zaangażować się w nowe rzeczy, które tam później umieścimy.

A te inne przyciski?

Cieszymy się, że je zauważyliście, zwłaszcza że wspomnieliśmy je mimochodem! Dodaliśmy dwa stałe narzędzia stron, które podążają za wami podczas przewijania: Spis Treści i Edycję Strony.

Nasz zespół designu przeprowadził testowanie mapy cieplnej stron artykułów, które wykazało, że podczas gdy posiadanie spisu treści w górnej części strony jest logicznym designem, nie służy wszystkim użyciom w praktyce i właściwie dodaje więcej przewijania do doświadczenia użytkownika. Co jest pierwszą rzeczą, co ktoś robi, kiedy trafia na artykuł? Zaczyna przewijać i przechodzi tuż obok spisu treści. Jeśli znajduje się na długiej stronie i potrzebuje pomocy w jej nawigowaniu, musi przewijać ją całą z powrotem na górę do spisu treści.

Zadebiutowawszy w doświadczeniu FandomMobile, stały przycisk spisu treści umożliwia wam szybkie dostanie się do nawigacji artykułu z każdego miejsca na stronie, co jest szczególnie przydatne dla długich stron. Nie ma więcej potrzeby przewijania całości do góry do spisu. Po prostu naciśnijcie przycisk, a spis pojawi się jako element nawigacyjny.

ANON - Scroll ToC.png

Jak powiedzieliśmy, to oryginalnie pochodzi z pracy nad FandomMobile. Już wcześnie wiedzieliśmy, że chcemy mieć spis treści jako stały element, który przewija się z wami dla lepszej nawigacji po stronie, gdyż doświadczenie konieczności przewijania z powrotem do góry jest nawet gorsze, gdy używacie ekranu dotykowego. Podczas projektowania doświadczenia FandomMobile przeszliśmy przez kilka różnych iteracji, zanim doszliśmy do przycisku z boku, który widzicie na mobilnej stronie obecnie.

Jedno z wczesnych badań zakładało pasek spisu treści podążający za wami w dół strony, ale nie podobało nam się, ile treści zakrywał, zwłaszcza na telefonach. Mały przycisk z boku, unoszący się na granicy obszaru treści miał najwięcej sensu i przenieśliśmy ten projekt do naszej pracy nad FandomDesktop. Nie tylko miało to sens z perspektywy ciągłości, ale też z przyciskami zwiększenia szerokości i edycji strony posiadanie innych ustawień dla stałego punktu dostępu do spisu treści byłoby raczej nie na miejscu dla naszych użytkowników.

Jeszcze raz, do edytora!

Kolejną zauważalną wizualną zmianą jest to, że w nagłówku artykułu styl wezwań do edycji i komentowania zmieniliśmy z przycisków na ikony. Naszą intencją było pozwolenie treści zabłysnąć i zaprezentować wciągające doświadczenie dla naszych czytelników. Aby w tym pomóc, ograniczyliśmy wizualny obszar drugorzędnych funkcji, co umożliwiło treści naprawdę wyjść naprzód jak nigdy wcześniej. Następnie starannie dodaliśmy kilka elementów, które pomogą czytelnikowi poruszać się po stronie, ale nadal skupiliśmy się na tym, by zajmowały jak najmniej wizualnej przestrzeni, by nie konkurowały z waszą treścią.

Przycisk edycji strony jest jednym z dwóch punktów dostępu do edytora całej strony w designie strony artykułu na FandomDesktop. W prawym górnym rogu strony znajduje się tradycyjny punkt dostępu do edycji strony, jednak teraz możecie wejść do edytora całej strony w którymkolwiek miejscu, do którego przewinęliście. Jako zalogowani edytorzy nadal macie dostęp do edycji sekcji, ale ten dodatkowy punkt dostępu daje wam lepszy dostęp do pełnego doświadczenia nieważne, gdzie się znajdujecie.

Widoczność przycisku edycji zależy od tego, czy użytkownik ma uprawnienia do edycji strony, którą obecnie przegląda. Na przykład niezalogowany użytkownik na wiki z wyłączonym edytowaniem dla niezarejestrowanych użytkowników nigdy nie zobaczy przycisku edycji strony. Podobnie zalogowany edytor przeglądający stronę zabezpieczoną do edycji wyłącznie przez adminów nie zobaczy tego przycisku.

Im więcej, tym lepiej

Ten blog został zapowiedziany jako spojrzenie na to, w jaki sposób zmienią się strony artykułów i, jeśli oczekiwaliście, że zamierzamy dokonać dużych zmian w treści, cieszymy się, że owe oczekiwania zostały obalone. Treść sama w sobie? Po prostu działa. Kiedy użytkownicy klikają wynik wyszukiwania z Fandomu, oczekują, że zobaczą spis treści, infoboks i linki do innych stron, które rozpoczną ich podróż w dół króliczej nory na wiki. To się nie zmienia. Strony artykułów pozostają jądrem kluczowego doświadczenia, które wszyscy znają i kochają, i jako bonus znaleźliśmy nowe okazje do uczynienia doświadczania treści lepszego i z większą ilością wyborów użytkowników.

W dodatku do wielkich zmian do wyboru szerokości i kontroli strony nadajemy także całej stronie trochę szlifu. Czynimy więcej użytku ze standardowych komponentów MediaWiki, których obecnie używa się na Gamepedii i które są znacznie bardziej aktualne niż ich odpowiedniki na Fandomie. Rozszerzamy także nasze użycie obiektowo zorientowanego motywu interfejsu użytkownika, co czyni doświadczenie bardziej nowoczesnym. A także stosujemy Kreator motywu dla większej ilości komponentów.

Mieliśmy perfekcyjną kombinację feedbacku mówiącego nam o czymś i okazji, by zrobić tę rzecz: rozwiązanie dla większej ilości przypadków wykorzystania artykułów, które Oasis i Hydra rozwiązują osobno, a jednocześnie odświeżając znane doświadczenie.

Skórka Opcje dla niezalogowanych użytkowników Opcje dla zalogowanych użytkowników
Oasis Standardowa szerokość z modułem Standardowa szerokość z modułem
Hydra Pełna szerokość z modułem Pełna szerokość bez modułu
FandomDesktop Standardowa szerokość z modułem

Pełna szerokość z modułem

Standardowa szerokość z modułem

Pełna szerokość z modułem

Standardowa szerokość bez modułu

Pełna szerokość bez modułu

Jak powiedzieliśmy kilka razy: im więcej, tym lepiej.

Co dalej?

Jest o wiele więcej do omówienia w ramach pracy nad FandomDesktop (i nie tylko!), więc rozglądajcie się za blogami o dostosowywaniu i Kreatorze motywu, globalnej i lokalnej nawigacji, narzędziach edytora, a także o tym, co robimy z dolnym paskiem narzędzi (możecie go zobaczyć?).

W międzyczasie zacznijcie odliczać, aż dostaniecie tryby pełnej szerokości i Ultraszerokości, jak nazywamy doświadczenie pełnej szerokości bez prawego modułu. FandomDesktop stanie się dostępny do testów nieco później tej wiosny, z migracjami istniejących wiki tego lata.

Dajcie nam znać, co sądzicie, w komentarzach! Chętnie odpowiemy także na wszystkie pytania, na które możemy, na temat tego, co tu zobaczyliście.

Jeśli chcecie przeczytać badanie IBM, tutaj znajduje się link (w języku angielskim).

Treści społeczności są dostępne na podstawie licencji CC-BY-SA, o ile nie zaznaczono inaczej.