MichałMarzecProjektantUX/UI

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.

Przykłady ekranów z aplikacji Trimtab BPM

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ń.

Ekran z zadaniami użytkownika

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.

Przykładowa tabela

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.

Podgląd dokumentu

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).

Edycja dokumentu

* Wszystkie dane, nazwy sekcji aplikacji i formularzy są zupełnie przypadkowe i służą wyłącznie jako ilustracja GUI aplikacji.

następny projekt