Kontekst Projektu
System, który porządkuje złożone dane
Projekt dotyczył nowej wersji systemu dla płatników składek — osób i firm pracujących na co dzień z danymi finansowymi, dokumentami i raportami. Moim zadaniem było uporządkowanie złożonych informacji oraz zaprojektowanie widoków spójnych ze standardami usług publicznych.
System opierał się na wzorcach design systemu mObywatel, ale wymagał rozszerzeń pod pracę biurową: duże tabele, intensywne filtrowanie i porównywanie danych. Szukałem rozwiązań, które ułatwiają pracę i nie dokładają użytkownikowi dodatkowej złożoności.
Wyzwanie: praca z dużymi tabelami
Mobilny układ zaprojektowany od podstaw
Kluczowym elementem systemu były rozbudowane tabele — z wieloma kolumnami, statusem dokumentów, datami, kwotami, identyfikatorami. Analiza wykazała, że to właśnie tabele są najczęściej używaną częścią systemu: użytkownicy sortują, filtrują, porównują i eksportują dane.
Trudność polegała na tym, że klasyczny model responsywności nie sprawdził się. Poziome przewijanie na telefonach utrudniałoby pracę i prowadziło do błędów. Potrzebne było rozwiązanie, które nie traci informacji, ale dostosowuje strukturę do małego ekranu.
Zamiana kolumn w pionowe bloki
W wersji mobilnej zrezygnowałem z przewijania w poziomie. Każda pozycja z tabeli została ułożona pionowo i podzielona na sekcje odpowiadające kolumnom desktopowym. Pierwszy wiersz został wyróżniony jako nagłówek rekordu, dzięki czemu użytkownik natychmiast orientuje się, czego dotyczy wpis.
Rezultat:
- pełny dostęp do danych bez przewijania w poziomie,
- czytelność i brak utraty kontekstu,
- spójna logika między desktopem i mobile (bez kopiowania układu 1:1).
Wyzwanie: dostęp do akcji w długich tabelach
Kluczowe operacje zawsze pod ręką
Użytkownicy często zaznaczają wiele pozycji jednocześnie i wykonują akcje zbiorcze: pobieranie dokumentów, zmiana statusu, eksport. Na desktopie przyciski akcji były umieszczone nad tabelą — ale znikały z pola widzenia po przewinięciu strony.
To powodowało dezorientację i niepotrzebne przewijanie w górę, tylko po to, by wykonać prostą operację.
Podwójna dostępność akcji: u góry i u dołu ekranu
Na desktopie główne akcje są nad tabelą. Przy długich listach zaprojektowałem dodatkową szufladę akcji u dołu ekranu, która pojawia się, gdy przyciski nad tabelą znikają z widoku.
To połączenie dwóch modeli interakcji znacznie poprawiło płynność pracy:
- akcje dostępne niezależnie od długości listy,
- mniej zbędnego przewijania,
- przewidywalna obsługa działań zbiorczych.
Jak działa responsywność w tym module
Na koniec warto pokazać, jak cały układ zachowuje się w praktyce — szczególnie podczas przejścia między widokiem desktopowym a mobilnym.
Praca z tabelami to częsty problem w projektowaniu, a każdy przypadek jest inny i zależy od potrzeb użytkownika oraz kontekstu. W tym projekcie udało się stworzyć rozwiązanie, które działa wygodnie i przewidywalnie, niezależnie od tego, jak duża jest tabela czy gdzie na stronie znajduje się użytkownik.
Zakres współpracy
W projekcie Ubezpieczeń dla Biznesu odpowiadałem za kluczowe prace UX związane z projektowaniem systemu webowego opartego o złożone dane i dokumenty. Moje działania obejmowały:
- warsztaty koncepcyjne z zespołami merytorycznymi,
- analizę potrzeb płatników i scenariuszy pracy z dokumentami,
- przepływy, zależności i logikę interfejsu,
- projekt widoków tabelarycznych i zachowań interakcji,
- makiety (low/high fidelity) i prototypy,
- dokumentacja, konsultacje i doprecyzowanie wdrożenia z zespołem developerskim.
Efekty
Zaprojektowane rozwiązania usprawniają pracę z danymi: mniej przewijania, szybsze filtrowanie i łatwiejsze działania zbiorcze. Pionowy układ tabel na mobile oraz stały dostęp do akcji poprawiają przewidywalność obsługi i eliminują utrudnienia w codziennych zadaniach.
