Centrum Społeczności
Advertisement
Centrum Społeczności

FandomMobile jest nowym mobilnym doświadczeniem, które wdrażamy na wybranych wiki na Fandomie od 2 lutego 2021 roku, czyniąc dalsze kroki po zakończonych sukcesem testach beta, i częściowych wdrożeniach na Gamepedii w grudniu i styczniu.

Jest to nasz pierwszy krok w kierunku ogólnego zjednoczenia doświadczenia pomiędzy wiki na Fandomie i Gamepedii (wcześniej etap ten znany był jako „Faza 2” Unified Community Platform), wykorzystując najlepsze elementy z obu stron, które doceniają administratorzy, edytorzy oraz czytelnicy. Tak samo jak z całą platformą, wasze opinie formują nasz proces produkcyjny, dlatego prosimy, abyście się nimi z nami dzielili.

Powody zmian

Internetowa skórka mobilna to najprostszy punkt wejścia do nowego designu z dwóch ważnych powodów:

  • Na Gamepedii doświadczenie jest już oparte na skórce mobilnej MediaWiki, która dostarcza nam solidne podstawy techniczne, na których możemy budować.
  • Prace te będą mieć wpływ na większość naszych użytkowników, biorąc pod uwagę, że średnio 56-64% naszego całościowego ruchu każdego miesiąca pochodzi z urządzeń mobilnych.

Choć zmiany w designie przyniosą ze sobą pewne usprawnienia dla edytorów korzystających ze skórki mobilnej (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ść oraz wydajność dla wszystkich użytkowników mobilnych. Zmiany wyglądu skórki desktopowej zabiorą więcej czasu i również dostaniecie możliwość podzielenia się wczesnymi opiniami na ich temat w dalszych etapach procesu.

FandomMobile korzysta z podstaw doświadczenia mobilnego Gamepedii, opartego na autorskiej skórce mobilnej MediaWiki o rozszerzeniu MobileFrontend. Obierając takie podejście, zyskujemy…

  • Znaczną liczbę kodu współdzielonego ze skórką desktopową.
  • Aktualizacje wydawane przez Fundację Wikimedia.
  • Lepszą wydajność od skórki mobilnej Fandomu.
  • Wsparcie dla wszystkich przestrzeni nazw w MediaWiki.

Korzystając z tych fundamentów możemy udostępnić także usprawnienia zaprojektowane przez Fandom, takie jak…

  • Przenośne infoboksy.
  • Galerie przyjazne urządzeniom mobilnym.
  • Tabele z danymi, czytelne na skórce mobilnej.

Tworząc FandomMobile, wróciliśmy do feedbacku dotyczącego doświadczenia mobilnego, jaki dostawaliśmy na przestrzeni lat zarówno od użytkowników Fandomu jak i Gamepedii. 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ło kiepskie doświadczenie związane ze zmienianiem się niektórych elementów podczas przechodzenia z komputera na urządzenie mobilne, szczególnie dotyczyło to obrazów, przycinania obrazów w infoboksach, układów galerii, podpisów obrazów itp. Elementy te prezentowane były w sposób, który prowadził do negatywnego odbioru przez czytelników, którego nie mogli zmienić edytorzy. Oznacza to, że naprawienie tego stanu rzeczy było powinnością Fandomu.

Przejdźmy do niektórych ze szkiców designu. 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. Screenshoty z działającego produktu na Fandomie pojawią się wkrótce.

Tryby jasny i ciemny

Light and dark.png

Rozumiemy, chcecie opcji przełączania pomiędzy jasnym i ciemnym motywem. Zgadzamy się, to ma wpływ na czytelność. Pracujemy, aby uczynić to dla was rzeczywistością – zostańcie z nami na bieżąco.

Globalna nawigacja

Global nav.png

W kwestii globalnej nawigacji – nie chcieliśmy, aby pasek wyszukiwania służył tylko wyszukiwaniu, ale również dostarczał opcje odkrywania treści, która dotyczy poszczególnej wiki oraz platformy jako takiej. Przypadki użycia, jakie przewidywaliśmy zakładały wyszukiwanie treści wiki, odkrywanie treści wiki oraz dostęp do linków globalnych. Zaprezentowano dwie opcje, jedną z nich możecie zobaczyć powyżej – linki globalna są tam wyświetlane nad polem wyszukiwania, a opcje odkrywania treści znajdują się pod nim. Drugą opcją było wyświetlanie linków globalnych pod paskiem wyszukiwania oraz nad oknem odkrywania treści. Wybrana przez nas opcja była tą bardziej elegancką i szanującą intencje 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 dodanie takiego przełącznika zapewnia dobre doświadczenie użytkownikom, 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

Wiki nava.png

Tworząc lokalną nawigację chwieliśmy, aby użytkownicy mieli dyskretny dostęp do tego, co administratorzy umieścili w głównej nawigacji, pozwalając im na maksymalne wykorzystanie konsumowanych treści. Nowością jest tutaj nowa opcja wyświetlana pod globalną nawigacją, która prezentuje nazwę wiki oraz możliwość przeglądania nawigacji. Gdy użytkownik rozpoczyna przewijanie strony w dół, lokalna oraz globalna nawigacja łączą się ze sobą, co pozwala na niczym niezmącony dostęp do strony głównej wiki, lokalnej nawigacji oraz wyszukiwania (które przywołuje globalną nawigację).

Spis treści

Toc.png

Spis treści w artykule (po angielsku często nazywany ToC – Table of Contents) to, jak zapewne wiecie, kluczowy element interfejsu, który przedstawia przegląd zawartości oraz to, w jaki sposób zawartość jest zorganizowana na stronie. Pozwala także na łatwą nawigację pomiędzy fragmentami artykułu. 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:

  1. Spis treści jako część samego artykułu, znajdująca się pod infoboksem i wprowadzeniem.
  2. Pływający pasek spisu treści przemieszczający się wraz z użytkownikiem przewijającym treść.
  3. 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

Gallery 1.png

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:

  1. Przewijana pionowo lista obrazów o zmiennej wysokości i stałej szerokości z podpisami wyświetlanymi pod obrazem.
  2. 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.
  3. 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

Lightbox mockup.png

Chcieliśmy upewnić się, że wchodząc w podgląd obrazu użytkownicy otrzymają możliwość cieszenia się większym obrazem, przeczytania podpisu, nawigacji pomiędzy innymi obrazami, a także okazję do poznania licencji danego pliku (co powinni mieć znaczenie), doświadczenie, które nie istnieje na Gamepedii i jest dostępne tylko częściowo na Fandomie. Zamiast odsyłać użytkownika do osobnej strony ze szczegółami licencyjnymi, jak początkowo planowaliśmy, postanowiliśmy 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ę. Łącząc to z odnową galerii wydaje nam się, że jest to znaczne ulepszenie – w szczególności dla wiki z dużą ilością screenshotów, ikon i artworków.

Dostosowywanie

Wyrażanie tożsamości wiki to poważne sprawa dla naszych społeczności, przy czym rysuje się wyraźna przepaść między tym, jak wykonane jest to na Fandomie a jak na Gamepedii. Unifikacja wyglądu pomiędzy Fandomem i Gamepedią to coś, nad czym wciąż toczymy wewnętrzne dyskusje, dlatego zakres modyfikacji jest na razie ograniczony.

Zbieranie feedbacku

Aby podzielić się z nami opinią o nowej skórce mobilnej możesz skontaktować się z helperami, wysłać zgłoszenie, lub skontaktować się z nami 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!

Advertisement