FandomMobile to nowa mobilna wersja wiki, wprowadzona 2 lutego 2021 na wybranych wiki Fandomu po pomyślnych testach beta oraz ograniczonych wdrożeniach na Gamepedii w grudniu i styczniu. Od 7 kwietnia 2021 roku 100% ruchu mobilnego na wiki Fandomu jest domyślnie obsługiwane przez FandomMobile.
Skórka FandomMobile była pierwszym krokiem do stworzenia jednolitego doświadczenia doświadczenia pomiędzy wiki na Fandomie i Gamepedii tzw. „Faza 2” UCP – Unified Community Platform). Korzysta ona z najlepszych rozwiązań obu platform — dla administratorów, edytorów i czytelników. Podobnie jak w całej platformie, Wasze opinie wpływają na dalszy rozwój — zachęcamy do ich zgłaszania.
Powody zmian
Mobilna wersja strony jest najprostszym punktem wejścia w nowy proces projektowania z dwóch głównych powodów:
- doświadczenie Gamepedii jest już oparte na mobilnej skórce MediaWiki, która zapewnia nam najstabilniejszą podstawę techniczną do dalszej pracy.
- większość naszych użytkowników korzysta z urządzeń mobilnych — miesięcznie jest to średnio 56–64% ruchu.
Choć zmiany w skórce przyniosą ze sobą pewne usprawnienia dla edytorów korzystających z urządzeń mobilnych (których liczba wzrasta od czasu wydania mobilnego edytora dla wiki na UCP na Fandomie), w szczególności poprawie ulegną aspekty takie jak czytelność, dostępność i wydajność dla wszystkich użytkowników mobilnych. Zmiany w wersji desktopowej wymagają więcej czasu — również tam będzie możliwość podzielenia się wczesnymi opiniami na ich temat w dalszych etapach procesu.
FandomMobile wykorzystuje mobilne fundamenty Gamepedii, które bazują na mobilnej skórce MediaWiki oraz rozszerzeniu MobileFrontend. Obierając takie podejście, zyskujemy…
- znaczną liczbę kodu współdzielonego ze skórką desktopową,
- aktualizacje wydawane przez Fundację Wikimedia,
- lepszą wydajność w porównaniu z wcześniejszą mobilną skórką Fandomu,
- wsparcie dla wszystkich przestrzeni nazw w MediaWiki, włącznie z mobilnymi stronami specjalnymi!
Na tej podstawie wprowadziliśmy mobilne ulepszenia zaprojektowane przez Fandom, takie jak…
- przenośne infoboksy,
- nowe, przyjazne urządzeniom mobilnym, galerie obrazów
- tabele dostosowane do urządzeń mobilnych
Podczas tworzenia FandomMobile wróciliśmy do opinii, które słyszeliśmy przez lata zarówno od użytkowników Fandomu, jak i Gamepedii dotyczących doświadczenia mobilnego. Następnie wewnątrz firmy omawialiśmy pomysły na zmianę wyglądu, co ostatecznie doprowadziło nas do momentu, w którym możemy oddać efekty naszej pracy do waszych testów. Powtarzającym się motywem w opiniach i rozmowach były problemy z tym, jak niektóre elementy zmieniają się przy przejściu z wersji komputerowej na mobilną — szczególnie obrazy, przycinanie grafik w infoboksach, układy galerii, podpisy itd. Elementy te były prezentowane w sposób, który negatywnie wpływał na doświadczenie czytelników, a także był niemożliwy do zmiany przez edytorów wiki. Oznacza to, że naprawienie tego stanu rzeczy było powinnością Fandomu.
Przejdźmy do kilku makiet projektowych. Zwróćcie proszę uwagę, że obrazy poniżej nie są reprezentacją finalnej implementacji. Zostały przygotowane w oprogramowaniu do projektowania z treścią zastępczą, oraz wykonano je przed wejściem bety w życie w grudniu ubiegłego roku. Zrzuty ekranu z działającego produktu na Fandomie pojawią się wkrótce.
Tryby jasny i ciemny
Wprowadziliśmy długo oczekiwaną funkcję wyboru jasnego i ciemnego motywu na urządzeniach mobilnych. Od października 2022 przełączanie między motywami jest dostępne na wszystkich wiki Fandomu.
Podobnie jak w przypadku skórki komputerowej, motyw wersji mobilnej można edytować w Kreatorze motywu. System poprosi o naprawienie ewentualnych problemów z kontrastem. Zalecamy korzystanie z mobilnego podglądu przed zapisaniem zmian i — jeśli to możliwe — sprawdzenie wyglądu motywu na prawdziwym urządzeniu mobilnym.
Powyższy obraz przedstawia makietę, nad którą pracowaliśmy gdy Gamepedia była oddzielną platformą. Poniżej przykład nowego motywu jasnego i ciemnego na wiki Stranger Things:
Personalizacja
Wygląd wiki jest ważnym elementem tożsamości społeczności. Domyślny motyw mobilny konfiguruje się w Kreatorze motywu, lecz — podobnie jak w wersji na komputery — czasem potrzebne jest użycie dodatkowego CSSu. Administratorzy mogą dodać taki kod do MediaWiki:FandomMobile.css. Dostęp do tej funkcji jest również w Panelu administratora. Pamiętajcie jednak o zasadach zawartych w polityce modyfikacji.
Globalna nawigacja
Przy projektowaniu nawigacji globalnej zależało nam, aby wyszukiwarka nie była tylko wyszukiwarką, ale pozwalała również na odkrywanie treści — zarówno na danej wiki, jak i w serwisie ogółem. Przypadki użycia, jakie przewidywaliśmy, obejmowały wyszukiwanie treści wiki, przeglądanie wiki dostęp do linków globalnych.
Rozważaliśmy dwie opcje:
- opcję widoczną powyżej – linki globalne są tam wyświetlane nad polem wyszukiwania, a opcje odkrywania treści znajdują się pod nim,
- drugą opcję, w której linki globalne wyświetlały się pod paskiem wyszukiwania oraz nad oknem odkrywania treści.
Wybraliśmy pierwszą z nich — bardziej przejrzystą i lepiej odpowiadającą intencji użytkownika, który chce szukać treści na wiki. Jak możecie zauważyć, obecny jest tam przełącznik zakresu wyszukiwania pomiędzy tą wiki a wszystkimi wiki. Nasz test wykazał, że jest on przydatny, ale dalej zbieramy dane i opinie na ten temat, aby lepiej zrozumieć, czym powinna stać się ta funkcja. Na tę chwilę domyślną wartością dla każdego jest „Ta wiki”.
Lokalna nawigacja
Tworząc lokalną nawigację chwieliśmy, aby użytkownicy mogli szybko dostać się do najważniejszych stron wiki — zgodnie z tym, co ustawili administratorzy. Dodaliśmy nowy moduł wyświetlany pod nawigacją globalną, pokazujący nazwę wiki i przycisk otwierający nawigację lokalną.
Po przewinięciu strony w dół lokalna oraz globalna nawigacja łączą się ze sobą w jeden pasek. Dzięki temu użytkownik ma stały dostęp do strony głównej, nawigacji oraz wyszukiwarki — nawet podczas przewijania długich artykułów.
Zaawansowane funkcje mobilne (AMC)
Po lewej — strona historii bez AMC; po prawej — ta sama strona z AMC
Aby poprawić doświadczenie moderatorów korzystających z FandomMobile, przystosowaliśmy skórkę do działania z funkcją Advanced Mobile Contributions (AMC) wbudowaną w MediaWiki. Każdy użytkownik może ją włączyć, aby uzyskać łatwiejszy dostęp do stron dyskusji, historii, narzędzi użytkownika i innych funkcji edycyjnych.
AMC można włączyć tylko będąc na urządzeniu mobilnym i korzystając z wersji mobilnej wiki. W menu profilu przedostatnia opcja to „Opcje mobilne” — prowadzi ona do Special:MobileOptions, gdzie można włączyć lub wyłączyć „tryb zaawansowany”. Zmiana zapisuje się automatycznie.
Spis treści
Spis treści w artykule (po angielsku często nazywany ToC – Table of Contents) to, jak zapewne wiecie, kluczowy element interfejsu ułatwiającym orientację w artykule i szybkie przechodzenie między sekcjami. Na skórce mobilnej nawigacyjna rola spisu treści staje się jeszcze istotniejsza, lecz rola przeglądu treści może stać się irytująca, gdy użytkownik będzie musiał długo przewijać, zanim dotrze do treści.
Aby rozwiązać ten problem, rozważyliśmy trzy różne opcje:
- Spis treści jako część samego artykułu, znajdująca się pod infoboksem i wprowadzeniem.
- Pływający pasek spisu treści przemieszczający się wraz z użytkownikiem przewijającym treść.
- Pływająca ikona spisu treści, przemieszczająca się wraz z użytkownikiem, która może pokazać panel spisu treści po stuknięciu.
Zespoły rozwoju i designu przeanalizowały te opcje i zdecydowały wybrać trzecią, ponieważ zwiększa ona przydatność spisu treści jako funkcji nawigacyjnej i czyni go bardziej dostępnym dla użytkowników w trakcie czytania. Otrzymaliśmy sporo opinii na temat jego implementacji od menadżerów wiki oraz członków zespołu treści – zarówno pod względem ikonografii jak i umiejscowienia, ale chętnie usłyszymy również wasz feedback!
Galerie
Przy galeriach głośno i wyraźnie usłyszeliśmy o dwóch głównych problemach z transformacją galerii Fandomu na skórce mobilnej: braku podpisów dostarczających niezbędny kontekst obrazów oraz mozaikowym układzie, który przestawiał priorytet obrazów. Ponownie, przestudiowaliśmy 3 warianty designu:
- Przewijana pionowo lista obrazów o zmiennej wysokości i stałej szerokości z podpisami wyświetlanymi pod obrazem.
- Przewijana pionowo mozaika dwóch kolumn obrazów ze zmienną wysokością i stałą szerokością z podpisami wyświetlanymi pod każdym z obrazów.
- Przewijana pionowo mozaika dwóch kolumn obrazów ze stałą szerokością i wysokością z podpisami wyświetlanymi pod każdym z obrazów.
Grupa robocza zdecydowała się postawić na opcję drugą, którą możecie zobaczyć wyżej z wymieszanymi grafikami z Doty 2 okraszonymi podpisami z Gry o Tron. Opcja druga zapewniła najlepszy balans jakości i ilości obrazów w galerii poprzez nie wymuszanie przycinania pasującego do stałej wysokości, jednocześnie pokazując obrazy obok siebie. Zauważycie z pewnością, że wyświetlanie podpisów było dla nas dużym priorytetem, który oparliśmy na waszych sugestiach.
Podgląd obrazów
Chcieliśmy upewnić się, że wchodząc w podgląd obrazu użytkownicy otrzymają możliwość cieszenia się większym obrazem, zapoznania się z podpisem, przeglądania innych obrazów, a także okazję do poznania licencją danego pliku (co powinno mieć znaczenie) Na Gamepedii taka funkcja nie istniała, a na Fandomie była jedynie częściowa.
Początkowo planowaliśmy oddzielną stronę z informacjami o licencji, ale ostatecznie zdecydowaliśmy się udostępnić tę możliwość w formie wyskakującego okienka, które można wywołać stukając w przycisk informacji. Redukuje to liczbę stron, jaką trzeba odwiedzić, aby znaleźć tę informację.
W połączeniu z ulepszonymi galeriami zapewnia to znacznie lepsze doświadczenia, szczególnie na wiki zawierających dużo grafik, zrzutów ekranu i materiałów artystycznych.
Preferujesz skórkę komputerową?
Fandom posiada również skórkę komputerową — FandomDesktop — dostępną zarówno na komputerach, jak i urządzeniach mobilnych. Przełączać się można przyciskiem w stopce każdej strony (poza Dyskusjami). Kliknij „Pełna wersja” lub „Wersja mobilna”, by zmienić widok.
Opinie
Aby podzielić się z nami opinią o nowej skórce mobilnej, skontaktuj się z nami przez formularz kontaktowy lub na oficjalnym Discordzie Fandomu. Z chęcią przyjmiemy wasze przemyślenia i konstruktywną krytykę na temat przyszłości wyglądu wiki na urządzeniach mobilnych!