Minęło 10 miesięcy, odkąd udostępniliśmy Page Builder Sandwich publicznie. Mamy teraz około 6 000 aktywnych instalacji i jest to dla nas spore osiągnięcie. Otrzymaliśmy dzięki temu mnóstwo opinii, zarówno dobrych, jak i złych. Wszyscy są jednak zgodni co do tego, że ludzie uwielbiają to, jak łatwo buduje się układy i tworzy treści w porównaniu z innymi dostępnymi kreatorami stron.
Duża część otrzymanych przez nas opinii dotyczyła próśb o nowe funkcje i w ciągu ostatnich kilku miesięcy dodaliśmy wiele z nich. Jednak w miarę jak to robiliśmy, zaczęliśmy powoli zmieniać także interfejs użytkownika. W konsekwencji zmienialiśmy również doświadczenie użytkownika… na gorsze. Doszło do punktu, w którym musieliśmy przemyśleć interfejs na nowo, ponieważ po prostu nie działał już płynnie, a różne funkcje ze sobą nie współgrały.
Niefunkcjonujący już interfejs
W poprzednich wersjach PBS chcieliśmy, aby wszystko miało formę przycisków. Dlaczego? Ponieważ przyciski są łatwe w użyciu. Po prostu… w nie klikasz. W starszych wersjach inspektora (pasek boczny na powyższym obrazku) kliknięcie przycisku zwiększało wartość, a kliknięcie z wciśniętym klawiszem Shift ją zmniejszało. Brzmi to całkiem prosto. Jednak wraz z dodaniem karuzel, zakładek, map oraz innych nowych elementów i funkcji, wszystkie te przyciski stały się mieszanką różnych ikon o odmiennych stylach i zaczęły wyglądać bardziej jak hieroglify niż fajny interfejs. Nie stanowiło to problemu dla doświadczonych użytkowników, ale wyglądało dość onieśmielająco, jeśli PBS był dla kogoś nowością.
Kolejną kwestią było kilka problemów pojawiających się w inspektorze. Pierwotnym pomysłem było uczynienie wszystkiego prostym i dostępnym wewnątrz inspektora. A pod pojęciem „wszystko” miałem na myśli wszystko – od zamiany tekstu w nagłówki, po zmianę kolorów tła, kolorów czcionek i tak dalej. Jednak w swoim obecnym stanie inspektor zawiera teraz mnóstwo opcji, które zmuszają do ciągłego przewijania w górę i w dół kółkiem myszy. Dość mocno odbiega to od inspektora, jakiego wcześniej chciałem stworzyć dla użytkowników.
Na koniec – niedawno wprowadziliśmy mapowanie shortcode’ów dla Twoich ulubionych wtyczek. Ta funkcja wymagała od nas utworzenia pól tekstowych, suwaków numerycznych, pól wyboru oraz dodatkowych nowych typów opcji potrzebnych do tego, aby edycja shortcode’ów była przyjemniejsza. Początkowo był to dobry pomysł i tak, ułatwił manipulowanie shortcode’ami. Ale znowu, funkcja ta odbiegała od naszego interfejsu opartego „wyłącznie na przyciskach”. Z perspektywy czasu używanie tylko przycisków do zmiany atrybutów shortcode’ów było naprawdę niemożliwe. Teraz, w najnowszej wersji, skończyliśmy z dwoma rodzajami kontrolek: przyciskami i polami shortcode’ów.
Istnieje jeszcze kilka innych powodów, które skłoniły nas do uznania, że nasz interfejs nie jest już efektywny (lub dopasowany do naszych potrzeb), ale powyższe punkty są najważniejsze. Jedno było jednak zawsze pewne: wiedzieliśmy, że musimy zaktualizować interfejs.
Definiowanie tego, jak idealnie powinien działać kreator stron
Zamiast od razu rzucać się w wir pracy i zmieniać wszystko na bieżąco, zrobiliśmy sto kroków wstecz, aby spojrzeć na całe doświadczenie korzystania z kreatora stron. Chcieliśmy tchnąć w ten interfejs nowe życie. Szczerze mówiąc, nie chcieliśmy przebudowywać go rok po roku. To wyczerpujące i z pewnością nie przynosi znaczącej pomocy społeczności WordPressa. Tym razem postanowiliśmy zrobić wszystko powoli i ostrożnie. Zbadaliśmy każdy zakamarek Page Builder Sandwich i to, co czyni go dobrym kreatorem stron, i w końcu ujęliśmy całe doświadczenie edycji w kilku kluczowych koncepcjach.
Kluczowa koncepcja #1: Pisanie bezpośrednio w treści w celu edycji elementów
Jednym z głównych powodów instalowania kreatora stron jest chęć uwolnienia się od ograniczeń edytora tekstowego w panelu administracyjnym WordPressa. Nie chodzi o to, że edytor w panelu jest zły, ale podczas tworzenia stron internetowych nie pokazuje od razu, jak Twoja strona będzie wyglądać dla odwiedzających, ani nie pozwala na rozmieszczenie treści poza układem jednokolumnowym. Widać tam tylko tekst i niektóre obrazy, ale żadnych bardziej złożonych elementów (np. formularzy kontaktowych). Można dodawać shortcode’y, tak, ale nie wyświetlą się one w swojej wyrenderowanej formie*.
* Istnieją wtyczki tworzone przez innych, aby rozwiązać ten problem, takie jak Shortcake UI, ale nie o to w tym chodzi.
I tu właśnie wkraczają kreatory stron typu front-end. Przenoszą one doświadczenie edycji z panelu administracyjnego na stronę wizualną, dzięki czemu edytujesz swoją witrynę dokładnie tak, jak zobaczą ją Twoi goście. Jak ująłby to Pippin: To, co widzisz, jest tym, co otrzymujesz (WYSIWYG).
Kolejną zaletą edytora front-end jest to, że pozwala edytować tekst bezpośrednio. Wpisywanie nagłówków i akapitów daje łatwość korzystania ze zwykłego edytora tekstu podczas tworzenia stron internetowych. Przyciski i etykiety zakładek również powinny być modyfikowalne przez proste kliknięcie na nie i wpisanie tekstu.
Jest to obszar, w którym większość innych kreatorów stron radzi sobie słabo. Większość z nich zmusza do wpisywania tekstu w polu tekstowym, aby cokolwiek edytować. Powtórzmy: nie tak powinno to wyglądać w prawdziwych kreatorach front-endowych. Pisanie i edycja tekstu bezpośrednio na stronie były mocną stroną Page Builder Sandwich od wersji 2 i zadbaliśmy o to, aby zostało to zachowane w wersji 3.
Kluczowa koncepcja #2: Wykorzystanie myszy do szybkich poprawek
Mysz to potężne narzędzie, które w kreatorach stron jest często zaniedbywane. Bardzo często kreatory stron używają jej po prostu do przeciągania elementów i upuszczania ich w różnych miejscach lub do klikania przycisków czy pól wejściowych. Choć to w porządku, mysz daje znacznie więcej możliwości w zakresie budowania stron.
Po pierwsze, użycie myszy jako narzędzia do edycji strony zapewnia fantastyczną wizualną informację zwrotną, zwłaszcza przy dostosowywaniu właściwości wizualnych, takich jak marginesy, dopełnienia (padding) i rozmiary. Teraz modyfikowanie elementów staje się naturalnym doświadczeniem.
W PBS w wersji 3 będzie można dostosować za pomocą myszy wiele rzeczy. Możesz regulować marginesy/odstępy między poszczególnymi elementami, dopełnienia wewnątrz kolumn, a także rozmiary obrazów, ikon i map. Zastąpiliśmy również suwakami te przyciski, które pozwalały zmieniać wartości liczbowe.
Kluczowa koncepcja #3: Tekst powinien być łatwy w stylowaniu
Jeśli cofniesz się o krok od monitora, zauważysz, że większość tego, co dodajesz na swoich stronach internetowych, to treść tekstowa. Tak, mamy tam obrazy i ikony, które jej towarzyszą – a ostatnio mamy tendencję do dodawania na naszych stronach większych obrazów. Jednak większość ważnych treści to wyłącznie tekst: nagłówki, listy punktowane, akapity, cytaty itp. Wraz z nim pojawia się kwestia stylowania tekstu, tak aby pasował do naszych projektów. Zmieniamy jego rozmiary i kolory, pogrubiamy go lub stosujemy kursywę. Wszystko po to, aby nasze treści były bardziej czytelne, trafne i atrakcyjne dla naszych odbiorców.
Ponieważ często stylujemy tekst, przyciski umożliwiające zmianę stylów powinny być łatwo dostępne. Nie powinny być schowane w wyskakującym okienku, które najpierw trzeba otworzyć. Na tę przypadłość cierpi większość kreatorów stron. Aby ich interfejs użytkownika można było nazwać „przejrzystym”, nawet najczęściej używane opcje są ukrywane przed wzrokiem.
Aby to rozwiązać, przyjrzeliśmy się najczęściej używanym procesorom tekstu. Zauważyliśmy, że zwykle mają one w pobliżu górnej krawędzi ekranu pasek z mnóstwem przycisków służących do formatowania tekstu, i skopiowaliśmy ten sam układ w wersji 3. Mamy teraz rząd wszystkich przycisków stylizowania tekstu, który jest zawsze obecny na górze ekranu. Dzięki temu stylowanie staje się naprawdę szybkie i intuicyjne podczas edycji tekstu.
Kluczowa koncepcja #4: Zaawansowane opcje stylowania powinny być elastyczne, a zarazem łatwe do zrozumienia
Najważniejsze w kreatorze stron jest to, aby pozwalał ludziom łatwo tworzyć oszałamiające projekty. Oznacza to, że powinniśmy zapewniać wiele różnych ustawień i opcji bez konieczności pokonywania trudnej krzywej uczenia się. Możliwość dostosowywania marginesów, dopełnień i stylowania tekstu jest świetna, ale to za mało. Do wykonania zadania potrzebne są znacznie bardziej zaawansowane opcje, takie jak obrazy tła, desenie, obramowania, nieruchome tła i wiele innych. Nagromadzenie tych wszystkich różnych ustawień może być nieco przytłaczające, dlatego w wersji 3 uprościliśmy niektóre z nich i uporządkowaliśmy je w kategorie, aby wszystko było bardziej przyjazne.
Kluczowa koncepcja #5: Obsługa shortcode’ów
Na koniec nie zapominajmy, że nasz kreator stron opiera się na WordPressie. Powinniśmy korzystać z możliwości tej platformy i jej funkcji, a nie ograniczać je czy od nich odchodzić. Jedną z wielkich funkcji oferowanych przez WordPress są shortcode’y. Nie oznacza to, że cała treść powinna składać się z shortcode’ów – byłoby to chaotyczne – ale powinniśmy po prostu być z nimi zgodni. Wiele wtyczek i motywów korzysta z shortcode’ów i byłoby ogromną stratą, gdybyśmy je wszystkie zignorowali. W rzeczywistości shortcode’y dają użytkownikom maksymalną elastyczność podczas tworzenia stron.
Kilka tygodni temu wprowadziliśmy nasz system mapowania shortcode’ów i dzięki niemu zmapowaliśmy setki shortcode’ów z setek wtyczek. Nadaliśmy priorytet najpopularniejszym wtyczkom znajdującym się w katalogu wtyczek WordPressa, więc istnieje duża szansa, że spotkasz je na własnych stronach. Zostało to dodatkowo wzmocnione w wersji 3 i będziemy nadal rozwijać ten aspekt w przyszłości.
Podsumowanie
Wzięliśmy wszystkie te kluczowe właściwości i wdrożyliśmy je w Page Builder Sandwich w wersji 3. To najlepszy kreator stron, jaki do tej pory stworzyliśmy dla WordPressa. Jest bardziej intuicyjny i naturalny w użyciu, działa szybciej, jest łatwiejszy w obsłudze i bardziej przyjazny niż kiedykolwiek.
Jeśli masz jakieś przemyślenia na temat kluczowych funkcji kreatora stron, daj nam znać, zostawiając komentarz poniżej.