UX/UI w nowoczesnych systemach CMS na przykładzie Droopler

Niedawno obchodziliśmy pierwszą rocznicę istnienia Drooplera, naszej dystrybucji Drupala. To dobra okazja, aby spojrzeć na projekt z perspektywy designu i user experience. Poznajcie nasze założenia, którymi kierujemy się, rozwijając ten projekt.

Twórz komponenty a nie podstrony

Chcąc stworzyć uniwersalne narzędzie do tworzenia stron na Drupalu doszliśmy do wniosku, że musimy myśleć o Drooplerze jak o klockach lego. Każda podstrona powinna składać się z predefiniowanych bloków, które ułatwiają tworzenie contentu. Chcieliśmy, aby użytkownik miał do dyspozycji szeroki wybór bloków (sekcji), które będzie mógł dowolnie ustawiać na poszczególnych podstronach. W rezultacie tworzenie podstron na Drooplerze wygląda jak zabawa klockami. Wyboru sekcji dokonujemy z graficznego popupu przedstawiającego możliwe do wykorzystania bloki w formie ikon. Ułatwia to tworzenie stron oraz skraca czas tworzenia strony.

W puli dostępnych sekcji wybieramy te, które odpowiadają nam wyglądem i możliwościami do naszych celów. Do dyspozycji mamy kilkanaście sekcji wśród nich baner, CTA, formularz kontaktowy, blok z treścią, galerię, i wiele innych. Z kolejnymi updatami pojawiają się nowe możliwości i nowe sekcje.

Zrób wygodną edycję treści dla redaktorów

Poza prostym budowaniem stron istotna dla nas była także możliwość łatwej edycji contentu. Dlatego niedawno dodaliśmy możliwość dodawania nowych elementów na podstronach i edycji treści z poziomu frontendu. Wystarczy „najechać kursorem” w odpowiednie miejsce na podstronie i skorzystać z możliwości usunięcia sekcji, edycji istniejącej lub dodać nową. Ta intuicyjna funkcja pozwala w prosty sposób dodać nowy typ treści na stronie bez potrzeby przechodzenia do panelu administracyjnego. Wszystko dzieje się w oknie popup, gdy jesteśmy na podstronie.

Działanie tej funkcji najlepiej zademonstruje poniższy film (od 1:11):

Dostosuj do urządzeń mobilnych

Droopler jest nowoczesnym produktem open source uwzględniającym różnorodność urządzeń, z jakich korzystają aktualnie internauci. Droopler działa świetnie zarówno na telefonach o różnych przekątnych ekranu oraz na komputerach stacjonarnych jak i laptopach. Dzięki podziałowi na bloki udało nam się w sposób czytelny i logiczny przenieść wszystkie typy treści do widoków mobilnych. Głównym wyzwaniem jest mała szerokość ekranu na smartfonach. Dzięki zastosowaniu responsywnych layoutów wszystkie elementy, które nie mieszczą się obok siebie swobodnie „przeskakują” do kolejnego wiersza oraz odpowiednio skalują. W Drooplerze można swobodnie korzystać z plików SVG, które ułatwiają skalowanie elementów wektorowych na ekranach. Dzięki temu unikamy pixelowania obrazów a grafika zawsze pozostaje ostra.

Droopler jest uniwersalny

Sporym wyzwaniem było zaprojektowanie Dooplera tak, aby był uniwersalny i wszechstronny dla wielu typów stron. Zależało nam, aby kolorystyka, typografia, fonty oraz ogólny wygląd strony dobrze sprawdzał się dla jak największej liczby typów witryn. Naszą intencją było zbudowanie dystrybucji, która już po szybkiej instalacji wygląda dobrze. Dlatego startowy wygląd oparliśmy o stonowaną kolorystykę i czytelny, uniwersalny font Lato. Zastosowane rozwiązania zdają się potwierdzać słuszność obranych założeń, ponieważ pojawia się wiele stron, które korzystają z naszego bazowego wyglądu. Wśród nich są strony wydarzeń, biznesów, a nawet parków narodowych.

Nic nie stoi na przeszkodzie, aby jednak „tunningować” Drooplera i nadpisywać istniejące style CSS lub dodawać nowe.

Budowanie dobrych doświadczeń dla użytkowników w Drooplerze

Dobry UX w Drooplerze projektujemy dla dwóch typów odbiorców. Pierwszym z nich jest osoba, która tworzy i edytuje stronę. Dla niej staramy się budować narzędzie do wygodnej i prostej edycji strony. Zależy nam, żeby proces budowania witryny był przyjemny i satysfakcjonujący.  Stąd nasza uwaga na dodawaniu nowych elementów do podstron oraz edycja istniejących, stabilność działania oraz możliwości rozbudowy.

Drugim typem odbiorcy jest internauta odwiedzający gotową stronę. Drooplera optymalizujemy między innymi pod kątem szybkości działania. Dbamy o to, by czas ładowania strony był krótki i by wszystkie elementy wyświetlały się prawidłowo na różnych urządzeniach. Dbamy o to, aby Droopler był atrakcyjny wizualnie oraz się po prostu podobał. Ten prozaiczny powód sprawia że ciągle dopieszczamy aktualną wersję i dodajemy nowe opcje.

Plany na przyszłość

Cały zespół Drooplera intensywnie pracuje nad rozwojem systemu. Od strony designu następuje ciągły rozwój nowych sekcji dla nowych zastosowań. Wychodzimy naprzeciw oczekiwaniom i potrzebom naszych użytkowników, którzy swoim feedbackiem mówią to, czego potrzebują. Widzimy, w jaką stronę idzie rozwój drooplerowych stron i jakie dodatkowe bloki pojawiają się na nich, jest to dla nas sygnał, w jaką stronę warto podążać z designem. Już niedługo pojawi się nowe demo Drooplera zawierające kolejne elementy oraz sprawiające, że droopler będzie nadawał się lepiej do budowy korporacyjnych stron. Sprawdzajcie na bieżąco stronę www.droopler.com oraz nasz profil na FB www.facebook.com/Droopler/