Trimtab BPMredesign aplikacji online
Trimtab oferuje zaawansowaną aplikację do zarządzania procesami w organizacji (business process management). Aplikacja umożliwia zarządzanie obiegiem dokumentów, czasem pracy, procesami sprzedaży, relacjami z klientami i in.
Zostałem poproszony o zaprojektowanie zmian, które poprawią zawrówno funkcjonowanie jak i wygląd aplikacji (UX & IU).
Klient
- Trimtab sp. z o.o.
Zadania
- Ewaluacja UX
- Badania generatywne
- Współpraca z programistami
- Projektowanie funkcjonalności
- Projektowanie interakcji
- Projekty UX / Makiety Lo-Fi
- Projekt UI / Makiety Hi-Fi
- Testy ewaluacyjne
Ewaluacja
Już wstępna ewaluacja wykazała wiele niedociągnięć UX, w tym kilka błędów krytycznych. Niektóre z wykrytych problemów:
- niejasna hierarchia i nawigacja,
- brak odpowiedniego kontrastu nazw, narzędzi i danych
(np. zakładki nieodróżnialne od przycisków, przyciski wyglądające jak pola tekstowe), - niespójne użycie narzędzi
(np. różne przyciski dla tych samych funkcji, te same narzędzia umieszczone w innym miejscu itp.), - stłoczone, trudne do skanowania dane,
- brak responsywności formularzy,
- niespójne użycie kolorów i ikon.
Po skończonej szczegółowej ewaluacji, wywiadach z interesariuszami, klientami i niewielką grupą użytkowników zdecydowaliśmy się na głębszy redesign (screeny* i opisy poniżej).
Projekt
Rezultaty nowego projektu:
- stonowana kolorystyka umożliwia lepszą ekspozycję danych,
- wyraźna, oczywista hierarchia i kontrast treści na ekranie,
- spójna nawigacja
- nowe funkcjonalności
(m. in. zarządzanie zadaniami, zaawansowane wyszukiwanie, podgląd dokumentów), - responsywne formularze,
- otwarte dokumenty są dostępne z każdego miejsca aplikacji.
Zarządzanie zadaniami
Zaprojektowałem nową sekcję aplikacji ułatwiającą użytkownikom zarządzanie własną pracą (ilustracja poniżej). Widok dostępny jest bezpośrednio po zalogowaniu i zawiera listę wszystkich zadań przypisanych do użytkownika.
Karty zadań wyświetlają podstawowe informacje o rodzaju zadania, dołączonych do niego komentarzach, załącznikach itp. Można je filtrować i sortować. Filtry jasno pokazują ilość przypisanych zdań.
Oprócz kart zadań strona wyświetla przypięte notatki użytkownika (również nowa funkcjonalność) i najnowsze komentarze dotyczące jego zadań.
Tabele
Nowe tabele (przykład poniżej) są czytelniejsze, łatwiejsze do przeglądania. Funkcje, informacje i narzędzia są wyraźnie rozróżnione, łatwo dostępne i umieszczone w stałych miejscach.
Dane można sortować klikając w nagłówek kolumny, bez potrzeby rozwijania menu (1 kliknięcie - AZ, 2 kliknięcie - ZA, 3 kliknęcie - reset).
Do tabeli dodana jest stała kolumna “liczba porządkowa”, która na pierwszy rzut oka pozwala zorientować się, czy tabela posortowana jest domyślnie czy nie.
Wyszukiwanie zaawansowane jest skupione w jednym formularzu dostępnym pod przyciskiem obok pola wyszukiwania (w pierwotnej wersji filtry wyszukiwania są rozproszone w menu poszczególnych kolumn).
Dodałem też nowe narzędzie pozwalające ukrywać/przywracać kolumny i zmieniać ich kolejność w tabeli.
Formularze
Otwarte dokumenty są dostępne w zakładkach zawsze widocznych na górze strony, bez konieczności wracania do sekcji, w której dokument został otwarty. Numer/nazwa dokumentu jest czytelny, a nagłówek zawiera breadcumps wskazujące z jakiej sekcji pochodzi dokument.
Domyślnie otwiera się podgląd dokumentu (poniżej), który jest czytelniejszy i łatwiejszy do przeglądania niż formularz.
Na samej górze wyświetla się wyróżnione podsumowanie, zawierające najistotniejsze dane.
Tryb edycji (poniżej) zyskał więcej “oddechu”, jest czytelniejszy. Pola, do których edycji użytkownik nie ma uprawnień są wyraźnie wygaszone.
Zarówno podgląd jak i formularze są responsywne. W obu widokach można też wyświetlić wszystkie sekcje formularza, kilka wybranych sekcji lub tylko jedną - izolacja danych ułatwia skupienie na edycji (nowa funkcjonalność).
Dokumenty można zapisywać do schowka i przypinać do nich notatki (nowe funkcjonalności).
* Wszystkie dane, nazwy sekcji aplikacji i formularzy są zupełnie przypadkowe i służą wyłącznie jako ilustracja GUI aplikacji.