TYPO3 NEOS – TESTY UŻYTECZNOŚCI

TYPO3 Neos to nowy, opensourcowy CMS (content management system) stworzony przez społeczność TYPO3. Bazując na wieloletnim doświadczeniu z TYPO3 oraz innymi systemami, twórcy postawili przed sobą zadanie stworzenia CMS-a nowej generacji – systemu, który będzie intuicyjny i prosty dla użytkownika, z szybkim i prostym procesem szkolenia. Czy powyższe cele zostały z sukcesem zrealizowane?Do jakiego stopnia prawdziwe jest stwierdzenie twórców Neosa zamieszczone na oficjalnej stronie www.neos.typo3.org: „You don‘t need training to edit content in Neos – you already know how to do it. You just click on the part you want to edit – and start.”

Aby się o tym przekonać zaprosiliśmy do testów 11 osób. Niektóre z nich pracowały wcześniej z innymi cms-ami. Inne osoby nie miały takiego doświadczenia i pierwszy raz próbowały poradzić sobie z edycją treści na stronie www. Przygotowaliśmy stronę testową w wersji 1.2.2 (http://neos-usability.creativetest7.de/), prosty tutorial dla podstawowych elementów zaplecza w Neosie oraz 6 zadań o różnym stopniu trudności.

W artykule przedstawimy opis każdego z zadań, wnioski płynące z obserwacji pracy edytorów, a następnie ogólne uwagi i oceny testerów na temat Neosa.

Nasi testerzy:

  1. Basia (administracja, HR, marketing) – znajomość WordPressa
  2. Magdalena (testerka oprogramowania) – bez znajomości CMS-a
  3. Kamil – (marketing) bez znajomości CMS-a
  4. Łukasz (programista) –  bez znajomości CMS-a
  5. Ania (instruktor fitness) – bez znajomości CMS-a
  6. Karol  (front-end developer) – znajomość WordPressa, SmugMug
  7. Agnieszka  (testerka oprogramowania) –  bez znajomości CMS-a
  8. Anna (marketing) – bez znajomosci CMS-a
  9. Olga (pracownik akademicki) – znajomość Joomla
  10. Basia (badania społeczne, prowadzenie sklepu) – znajomość własnego sklepu online
  11. Darek (front-end developer) – znajomość WordPressa

Testy przeprowadzone były w dwóch formach:

  • 6 sesji na żywo z zapisywaniem reakcji użytkownika i sposobów korzystania z zaplecza  – w razie trudności w wykonywaniu zadań prowadząca sesję dostarczała wskazówek odnośnie budowy i funkcjonowania zaplecza Neosa.
  • 5 sesji online – prośba o wykonanie zadań bez jakiejkolwiek pomocy ze strony prowadzącego testy. W czasie testów online trzy osoby wykonały wszystkie zadania. Czwarty edytor wykonał zadanie nr 1 i 6  oraz częściowo zadanie 3. Kolejna osoba była w stanie wykonać bez pomocy tylko pierwsze zadanie.

 

Omówienie poszczególnych zadań:

Zadanie 1 – edytuj treść

Na stronie głównej popraw literówkę oraz dodaj nową treść – adres e-mail w stopce.

Celem zadania było sprawdzenie intuicyjności edycji inline. Żaden z testerów nie miał problemu ze zmianą lub dodaniem nowej treści. Hasło„you already know how to do it” posiada więc mocne uzasadnienie w rzeczywistych  doświadczeniach użytkowników z edycją tekstów na zapleczu Neosa.

Możliwość podglądu i edycji strony w dokładnie takiej formie jak widok frontendowy jest cenioną przez edytorów cechą backendu. Zdecydowana większość klientów z obawami i niechęcią reaguje na panele administracyjne, w których użytkownik natychmiast po zalogowaniu, a następnie wprowadzeniu zmian, nie widzi kompletnej strony z całą jej treścią. Budowa strony z bloków/modułów wymaga dłuższego treningu. W przypadku zaplecza Neosa ‚canvas view’ odzwierciedla całą stronę, co jest bardziej naturalne dla początkujących użytkowników. Po wykonaniu pierwszego zadania jedna z testerek stwierdziła: „Nie jest to wcale tak zniechęcające jak sobie wyobrażałam”.

Odnośnie pracy na backendzie zauważyliśmy, że początkowo użytkownicy próbują nawigować pomiędzy podstronami poprzez klikanie na menu lub logo zamiast na lewy panel nawigacyjny.

 

Zadanie 2 – zmień strukturę

Zmień treść zorganizowaną w kolumny. Zadaniem testera była zmiana (przeniesienie elementów) pomiędzy trzema kolumnami oraz zmiana ustawień elementu nadrzędnego.

cs-creativestyle-neos-tests-cms-open-source-1

 

Celem drugiego zadania było sprawdzenie, jak użytkownicy radzą sobie z przenoszeniem i umieszczaniem w odpowiednim miejscu elementów w bardziej rozbudowanej strukturze. Nasze doświadczenie pokazuje, że użytkownicy mogą  stracić orientację w strukturze strony przy większej ilości elementów, zwłaszcza, gdy ich liczba (i logika) nie jest zrozumiała z punktu widzenia edytora (np. konieczność umieszczania floatujących elementów zajmujących  część strony we wrapperach).

cs-creativestyle-neos-tests-cms-open-source-inspector-1

Niektórzy nasi testerzy nie mieli żadnych problemów z właściwym ułożeniem elementów i określili zadanie jako łatwe. Inni mieli problemy z umieszczeniem odpowiednich elementów typu box w content collections – w rezultacie elementy nie były wyświetlane. Trudność sprawiało zrozumienie, że elementy będące w kolumnach nie mają ustalonej indywidualnie szerokości, ale przyjmują szerokość ustaloną dla elementu nadrzędnego Three Column Content.

Zdecydowana większość testerów próbowała najpierw odszukać możliwość zmienienia szerokości samych elementów (obrazek, tekst, video), zmiana elementu nadrzędnego (Three Column Content) nie była dla nich pierwszym wyborem. Być może było to związane z niwielką liczbą informacji o zapleczu Neosa i funkcjonowaniu poszczególnych elementów, którą otrzymali testerzy. Po udzieleniu dodatkowych wyjaśnień na temat zagnieżdżania i zmieniania kolejości, a także szerokości elementów, testerzy nie mieli już problemów ze zmianą elementów.

W czasie przygotowywania informacji dla użytkowników strony na Neosie, warto zwrócić uwagę na konieczność umieszczania treści w Content Collection oraz pokazanie kolejności dodawania elementów. Należy dokładnie wytłumaczyć możliwości zagnieżdżania. Dla użytkownika problemem może być to, że niektóre elementy nie są w żaden sposób widoczne na stronie.

 

Zadanie 3 – dodaj nowy slajd

Treść zadania trzeciego brzmiała: na stronie głównej Home po trzecim slajdzie dodaj nowy slajd (czwarty z kolei) z dostarczonymi danymi (nagłówek, tekst, zdjęcie).

Celem zadania było przeanalizowanie możliwości dodawania nowych elementów przez użytkownika. W większości testerzy dobrze radzili sobie z wykonaniem powyższego polecenia. Najczęściej zapominali jednak o pogrupowaniu opcji inspektora w zakładki, co skutkowało problemem ze znalezienien inspektora dla dodawania i edycji obrazków.  Nasze doświadczenie pokazuje, że jest to częsty problem na początkowym etapie. Przygotowując instrukcje dla edytorów, warto kilkakrotnie wskazać na istnienie zakładek. Testerzy mieli także problem z zamykaniem panelu mediów – jednak opcja zamykania poprzez przycisk z krzyżykiem zostanie dodana w najnowszej wersji Neosa. Niektórzy użytkownicy zapominali także o akceptowaniu zmian (apply) lub ich publikowaniu (publish) – dlatego warto dobrze wytłumaczyć procedurę publikacji.

Warto pamiętać o dodawaniu placeholderów dla tekstów edytowanych inline – w przypadku ich braku, użytkownicy często są zdezorientowani. Użytkownicy backendu potrzebują także bezpieczeństwa w kwestii cofania zmian – do instrucji warto wprowadzić omówienie przyciskow publikujących lub cofających zmiany.

 

Zadanie 4 – dodaj element nadrzędny (wrapper) oraz umieść w nim kilka nowych elementów

Zadanie polegało na dodaniu nowej sekcji z trzema boxami. Edytorzy dostali wskazówkę, aby użyć elementu „Box Wrapper/Container”, a następnie umieścić w jego wnętrzu odpowiednie elementy typu Box.

Na tym etapie zauważyliśmy, że wielu testerów intuicyjnie używa drzewa elementów (nodów) – prawdopodobnie bazując na podobnym doświadczeniu z folderami. Edytorzy porównywali poziomy, aby dowiedzieć się gdzie w hierarchii znajduje się dany element, nie mieli także problemów z zamykaniem lub otwieraniem elementów nadrzędnych.

cs-creativestyle-neos-tests-cms-open-source-2

Na tym etapie testów użytkownicy mieli problemy z nieodświeżoną strukturą nodów. Mylące było użycie w zakładkach inspektora, dokładniej takiej samej ikonki jak w przycisku Live Shortcut – dla wygody użytkownika należy unikać powtarzania ikonek, ponieważ sugerują tą samą funkcjonalność. Warto także skonsultować z klientem jego sposób nazywania elementów na stronie. Istnieją przypadki, w których elementy mogą mieć bardzo podobny wygląd i strukturę, traktowane są więc przez dewelopera jako ten sam element. Jednak sposób analizowania strony przez klientów opiera się bardziej na funkcjach elementów – czasem wygodniejsza może być duplikacja elementów i nadanie im innych nazw oraz pogrupowanie ich w odpowiednie grupy w panelu Create New.

cs-creativestyle-neos-tests-cms-open-source-3

 

 

 

cs-creativestyle-neos-tests-cms-open-source-4

Zadanie 5 – nowa strona

Zadanie 5 polegało polegało na dodaniu nowej podstrony Team oraz dodaniu na niej nowych elementów.

Testerzy poproszeni zostali o dodanie nowej podstrony, a następnie o wstawienie do podstrony elementów z opisem poszczególnych członków zespołu. Zadanie nie sprawiło edytorom większych trudności.

 

Zadanie 6 – tłumaczenie treści

W zadaniu 6 użytkownicy poproszeni zostali o rozpoczęcie tłumaczenia na język polski.  Najczęściej testerzy intuicyjnie rozumieli zastosowaną zastosowaną strukturę jezyków, jednak problemem było znalezienie odpowiedniego menu przełączającego języki, który znika po wybraniu elementu innego niż sama strona.

 

Wnioski

Po zakończeniu testów poprosiliśmy testerów o wypełnienie ankiety zawierającej między innymi pytania na temat dobrych i problematycznych cech zaplecza Neosa.

Co najbardziej podobało się naszym testerom? Oto ich odpowiedzi:

  • Przejrzystość
  • Podgląd na rzeczywisty wygląd
  • Szybkość edycji/wprowadzania zmian
  • Dużo funkcji
  • Ładny wygląd – 2x
  • Dość wysoki poziom intuicyjności,
  • Klikalność wszystkich elementów,
  • Łatwe przechodzenie do wersji live po poprawkach i publikowanie
  • Kolorystyka (wyraźne przyciski na spokojnym tle)
  • Przejrzysta struktura
  • Duża ilość opcji
  • Stosunkowo intuicyjna obsługa
  • Interfejs ma bardzo nowoczesny design który jest czytelny
  • Kolorystyka i elementy interfejsu (ikony animacje przejścia) są bardzo dopracowane
  • Wyświetlanie struktury bardzo ułatwia kontrolowanie pracy
  • Spore możliwości, intuicyjność
  • Przejrzysty, uważam, że intuicyjny, chociaż na pierwszy rzut oka nie widzi się wszystkiego co można w nim zrobić
  • Przejrzyste zaplecze, które nie jest zniechęcające dla początkujących użytowników

Po tej sporej porcji pozytywnych wrażeń pora na zasygnalizowane problemy. Część z nich omówiona została w artykule i wiąże się z minimalnymi podpowiedziami , które dostępne były dla naszych edytorów. Części z nich można uniknąć poprzez zaoferowanie klientom dobrych instrukcji i początkowego szkolenia –  na przykład w formie wideo lub tutoriali ze screenami, natomiast części zmian oczekujemy w nowej wersji Neosa. Co ciekawe, niektórzy z naszych testerów stwierdzili, że bardzo niechętnie czytają instrukcje, w których znajdują sie screeny, natomiast chętniej sięgają po tutoriale w formie video.

Wady według naszych testerów:

  • Trzeba dużo klikać, żeby wprowadzić zmiany
  • Cofanie nie jest łatwe/nie jest do końca jasne ile ostatnich zmian zostanie cofniętych
  • Ikona linku jest identyczna z ikoną przechodzenia do wersji live – nie zauważyłam gdzie mogę dodać link
  • Drobne błędy (zgubił jedną zmianę)
  • Na ekranie o niskiej rozdzielczości paski narzędzi zabierają bardzo dużo miejsca, przez co obszar roboczy jest bardzo mały i wymaga scroloowania w poziomie co skutecznie utrudniało pracę
  • Na początku ciężko było mi się odnaleźć w realizowanych przez program zależnościach, ale po jakimś czasie spędzonym z CMS’em można się do tego przyzwyczaić
  • Ikona dodawania nowych stron ze strzałką jest myląca
  • Prawy panel nadal nie sprawia dla mnie wrażenia intuicyjnego (zależności pomiędzy zakładkami)
  • Trochę powolny, nie przystosowany do każdej rozdzielczości(1366×768)
  • Kopiowanie za pomocą myszy byłoby wygodne z wykorzystaniem funcji drag&drop
  • Nie doszlam do tego jak cofnąć małe zmiany
  • niemożliwość zastosowania niektórych operacji na „ekranie głównym” – może byłoby lepiej, gdyby niektóre funkcje były dostępne od razu z środkowego ekranu, a nie z paska inspektora
  • Brak odświeżania się strony – „nierównoległość” informacji/zmian w okienkach;
  • Szerokość pierwszej kolumny (lewy panel administracyjny) mogłaby być manipulowalna

Warto zwrócić szczególną uwagę na problemy testerów z wyświetlaniem całego widoku strony podczas pracy na zapleczu. Design strony posiadał responsywność, jednak powyżej szerokości 1200px miał ustawioną stałą szerokość dla kontenera treści. To nasz błąd, który pokazuje konieczność dobrego przetestowania zaplecza na najczęściej używanych rozdzielczościach desktopowych.

Podsumowaniem artykułu będzie jeszcze jedna zaleta wymieniona przez jednego z naszych edytorów: Generalnie fajnie się na nim pracuje!

 

pluswerk