Z radością ogłaszamy, że wersja 3 aplikacji Parseur jest już dostępna w wersji preview i czeka na Wasze opinie! Choć ta odsłona nie wprowadza przełomowych funkcji, znacząco zwiększa intuicyjność i komfort korzystania z Parseur, jednocześnie stawiając fundamenty pod przyszłe ulepszenia.
W dalszej części artykułu opisujemy, co się zmieniło i dlaczego. Jeśli chcesz od razu przetestować nowy wygląd, możesz pominąć dalszą lekturę i skorzystać z przycisku poniżej.
Czym jest aplikacja Parseur?
Parseur składa się z kilku elementów:
- Główna strona (obejmująca stronę, na której właśnie jesteś)
- API (interfejs programistyczny do Parseur)
- Aplikacja (interfejs użytkownika Parseur)
Parseur v3 to zupełnie nowe podejście do projektowania aplikacji Parseur, czyli tego miejsca, w którym użytkownicy spędzają najwięcej czasu. Aplikacja powinna spełniać dwa główne zadania:
- Umożliwić szybkie i bezproblemowe wdrożenie nowych użytkowników. Parseur może przetwarzać dokumenty w wielu scenariuszach, ale na początku nie musisz znać ich wszystkich. Aplikacja powinna płynnie przeprowadzić Cię przez najważniejsze kroki i ukryć zaawansowane możliwości.
- Zapewnić efektywność użytkownikom zaawansowanym. Gdy już poznasz główne funkcje, możesz chcieć dostosować proces ekstrakcji dokumentów do własnych wymagań. Gdy Parseur stanie się Twoim narzędziem codziennej pracy tak jak dla wielu zadowolonych klientów, aplikacja nie powinna Cię ograniczać – żadnych niepotrzebnych kliknięć ani żmudnego przewijania w poszukiwaniu potrzebnych opcji.
Znalezienie równowagi między potrzebami początkujących i zaawansowanych użytkowników to wyzwanie, przed którym staje wiele zespołów SaaS. Mamy nadzieję, że nasza nowa wersja świetnie sobie z tym radzi.
Dlaczego przeprojektowaliśmy aplikację Parseur?
Zacznę od krótkiego zastrzeżenia: nie jestem profesjonalnym projektantem ani ekspertem z zakresu UI/UX. Parseur to mała firma, składająca się z trzech osób, którą współzałożyłem. Na co dzień łączę pracę nad aplikacją React z zadaniami sprzedażowymi, marketingowymi, wsparciem, administracją i wieloma innymi.
Dla mnie design powinien być funkcjonalny, estetyczny, łatwy w obsłudze i szybki do wdrożenia oraz utrzymania.
Pozwól, że przybliżę historię naszej aplikacji.
W pierwszych miesiącach rozwoju Parseur utrzymany był w zielonej stylistyce, z motywem pirackim (serio!) i wykorzystywał Material Design od Google. Więcej o tamtym niecodziennym początku przeczytasz w wywiadzie dla Starter Story.
Pod koniec 2016 roku byliśmy gotowi na start online. Niestety, zarzuciliśmy motyw piratów i zastąpiliśmy Material Design stylem Bootstrap od Twittera. Dlaczego? Nie byliśmy pewni, czy rynek B2B SaaS jest gotowy na motyw z belkami, hakami i rumem (a może coś straciliśmy – już się nie dowiemy). Wybrałem Bootstrap, gdyż w 2016 roku Material Design i React były nowością, a Material UI nie oferował jeszcze wielu potrzebnych komponentów. Wszelkie modyfikacje były złożone i czasochłonne. Bootstrap umożliwił nam szybki start... przynajmniej na początku.
Z czasem wraz z rozwojem Parseur pojawiały się nowe funkcje, bardziej zaawansowane opcje, poprawki i usprawnienia. Każda nowość (strona, dodatkowy formularz, checkbox itd.) oznaczała potrzebę kolejnych modyfikacji szablonu Bootstrap, by osiągnąć zamierzony wygląd. Początkowa elastyczność przerodziła się w coraz większą uciążliwość, a rozwój aplikacji zaczął się wydłużać.
Przy planowaniu kolejnej dużej aktualizacji postanowiliśmy zacząć z „czystą kartą” i odświeżyć design. Chcieliśmy nie tylko zapewnić lepsze doświadczenie użytkownikom, ale również uzyskać większą swobodę w dostosowywaniu aplikacji pod własne potrzeby.
Przeszliśmy z Bootstrapa na Tailwind CSS. Tailwind to narzędziowy framework, który nie narzuca gotowego wyglądu, lecz pozwala kreować każdy element według własnych potrzeb. Takie podejście wymaga większego nakładu pracy początkowo, ale pomagało nam Tailwind UI dostarczając inspiracji oraz instrukcji.
Prace rozpoczęły się na początku lipca 2021 roku i trwały około dwóch miesięcy. Najlepiej działało zarządzanie, gdy codzienne obowiązki wykonywałem rano, by popołudniami w pełni poświęcić się interfejsowi. Pomogło również to, że lipiec i sierpień w Parseur są spokojniejsze pod kątem wsparcia, a na Mauritiusie trwa wtedy zima – więc basen i plaża nie kusiły 😊.
Co się zmieniło?
Co nowego w Parseur v3?
Nowy design
Stary wygląd powoli się dezaktualizował, miał typowy, rozpoznawalny styl Bootstrapa.
Postawiliśmy na nowoczesność. Niebieski „Parseur blue” został, ale pojawiły się pastelowe tła i wyrazista typografia.
Wprowadziliśmy także spójniejsze nagłówki, nowy wygląd formularzy i lepszą obsługę na urządzeniach mobilnych.
Ulepszona nawigacja
Do tej pory aplikacja miała nagłówek na górze, menu boczne po lewej (dla mailboxa i ustawień) i stopkę.
W nowej odsłonie menu ogranicza się do lewej strony — to więcej miejsca na właściwą treść. Menu można zwinąć, co daje jeszcze większą przestrzeń roboczą, szczególnie podczas pracy ze złożonymi szablonami.
Nowy edytor szablonów
Edytor szablonów to najbardziej zaawansowana część aplikacji oraz miejsce, gdzie zarządzając własnymi szablonami, spędzisz najwięcej czasu. Wraz z rozwojem funkcjonalności edytor stawał się coraz bardziej złożony.
Uproszczone zakładki
Przeprojektowaliśmy zakładki, żeby były wygodniejsze:
- Dawne „Dostępne” i „Używane” zastąpiła jedna zakładka „Pola” — mniej klikania podczas tworzenia pól.
- Pola statyczne są zawsze widoczne. Wcześniej na małych ekranach były ukryte pod strzałką, co utrudniało ich odnalezienie i rodziło pytania we wsparciu.
- Nowa zakładka „Ustawienia”: tu znajdziesz rzadziej używane opcje, jak działania na szablonie czy jego dezaktywacja.
- Przyciski akcji zawsze w zasięgu: „Nowe pole”, „Nowa tabela”, „Utwórz szablon” są zawsze dostępne na dole ekranu. Wcześniej przy dużej liczbie pól trzeba było je odszukiwać przewijając w dół.
„Extra” to teraz „Pola metadanych” (Metadata)
Nazwa „Extra” była niezrozumiała, co potwierdzali użytkownicy prosząc o jej zmianę. Nowa zakładka wyświetla także opis każdego pola.
Ostrzeżenie przed opuszczeniem edytora
Przed zamknięciem edytora szablonu z niezapisanymi zmianami pojawi się czytelne ostrzeżenie. Nigdy więcej utraconych zmian przez przypadkowe kliknięcie poza edytorem!
Ulepszona integracja z Zapier
Dotychczasowy ekran eksportu do Zapier był niestandardowy i wykorzystywał API Zapier.
Podczas pracy nad nową wersją Zapier uruchomił swój katalog aplikacji do osadzenia — czytelniejszy, łatwiejszy w obsłudze i świetnie pasujący do naszego nowego designu!
Usprawnione wyszukiwanie i filtrowanie
Przeprojektowaliśmy pola wyszukiwania i filtrowania, aby zajmowały mniej miejsca i natychmiastowo aktualizowały wyniki podczas wpisywania. Filtr zakresu dat dokumentów otrzymał gotowe, szybkie opcje: dziś, wczoraj, ostatnie 7 dni, ostatnie 30 dni.
Akcje masowe dopasowane do kontekstu
Na liście dokumentów rzadziej używane akcje (np. ponowne przetwarzanie, kopiowanie, pomijanie, usuwanie) są widoczne dopiero po zaznaczeniu odpowiednich pozycji za pomocą checkboxa zbiorczego. Dzięki temu lista podstawowych akcji jest uproszczona, a opis czynności pokazywany jest nad ikoną.
Inne zmiany
Wśród dodatkowych usprawnień:
- Nowy pasek postępu ładowania stron na górze ekranu
- Przeprojektowane widoki dla większej przejrzystości — usunęliśmy zbędne elementy, zachowując pełną funkcjonalność
- Odświeżone ikony szablonów, dokumentów, pobrań i konta
- Poprawiona wydajność — szybszy start i działanie aplikacji
- I wiele więcej! Sprawdź nowy wygląd samodzielnie!
Co dalej?
Wersja 3 będzie przez kilka tygodni dostępna jako wersja preview, abyśmy mogli zebrać feedback i upewnić się, że u każdego wszystko działa prawidłowo. W tym czasie domyślną pozostanie wersja v2. Gdy upewnimy się, że wszystko jest stabilne, wyłączymy aplikację Parseur v2 i uczynimy v3 wersją domyślną.
Ostatnia aktualizacja
