Łukasz Wawrzkiewicz
CodiLime
Łukasz WawrzkiewiczSenior UX Designer @ CodiLime

Zasady UX przy projektowaniu zaawansowanych aplikacji sieciowych

Poznaj dobre praktyki podczas projektowania UX w zaawansowanych i generujących duże ilości danych aplikacjach do monitoringu sieci.
23.06.20206 min
Zasady UX przy projektowaniu zaawansowanych aplikacji sieciowych

Artykuł jest dostępny w języku angielskim pod tytułem: UX principles for complex network applications.

W każdej aplikacji znajdują się kluczowe elementy, które decydują tym, czy będzie ona wygodna i funkcjonalna dla użytkownika. Niestety w wielu przypadkach funkcjonalność takiej aplikacji jest mocno ograniczona z powodu długu technologicznego lub braku wiedzy z zakresu UX podczas fazy projektowania. W moim tekście przedstawię dobre praktyki podczas projektowania aplikacji do monitoringu sieci, dzięki którym użytkownicy będą mogli wygodnie korzystać z nawet najbardziej zaawansowanych aplikacji generujących duże ilości danych.

Nawigacja

Pierwszą rzeczą, na którą zwracają uwagę użytkownicy w aplikacji jest łatwość nawigacji. Jest to podstawowy element do zapewnienia właściwego user experience. Ta zasada UX nabiera jeszcze większego znaczenia w przypadku skomplikowanych aplikacji sieciowych, w których użytkownik ma do swojej dyspozycji wiele zaawansowanych funkcji i musi stale radzić sobie z napływem bardzo wielu informacji. Często zdarza się, że wszystkie te funkcje umieszczone są bezpośrednio w menu. Sprawia to, że do wybrania tej potrzebnej w danym momencie trzeba przewinąć całą listę rozwijaną, która może czasem zajmować pół ekranu. Nawet pasek wyszukiwania tutaj nie pomaga.

Rozwiązaniem tego problemu jest dokładne skategoryzowanie wszystkich funkcji przed przystąpieniem do tworzenia menu. Takie skategoryzowane elementy można umieścić w pasku bocznym lub górnym, tworząc w ten sposób nawigację opartą na zasadzie Kategoria > Funkcja. Dzięki temu użytkownicy będą mogli łatwiej odnaleźć potrzebne im funkcje.

W przypadku paska wyszukiwania należy pamiętać o dwóch rzeczach. Po pierwsze, należy go umieścić w widocznej lokalizacji i zaznaczyć odpowiednim tekstem (np. “Wyszukaj X”) lub ikoną. Po drugie, jeśli wyszukiwanie ma być wykonywane w całej aplikacji, pasek wyszukiwania powinien być umieszczony nad elementami, które będą przeszukiwane. Nie jest to nic innego, jak postępowanie według zasady diagramu Gutenberga określającej porządek czytania od lewej do prawej i z góry do dołu. Powstała w ten sposób hierarchia wizualna będzie odzwierciedlać logikę samej aplikacji.


Dobre praktyki UX dotyczące nawigacji

  • Menu powinno być oparte na grupach, a nie pojedynczych funkcjach
  • Funkcje należy umieszczać w menu podrzędnych lub na paskach górnym lub dolnym
  • Lokalizacja paska wyszukiwania powinna być zaznaczona za pomocą tekstu lub ikony

Rys. 1 Pogrupowane menu wraz z paskiem wyszukiwania


Pola edycji danych

Pola edycji danych w aplikacji służą głównie do definiowania lub wybierania danych. Jak według zasad UX powinno wyglądać takie pole? Przede wszystkim musi być łatwo dostępne i mieć odpowiednią etykietę, która pozwoli użytkownikowi zweryfikować, jakie konkretnie dane zostały wprowadzone do tego pola. W przypadku aplikacji sieciowych wyróżniamy trzy główne typu pól edycji danych: do definiowania nowych danych, do wybierania danych z listy lub wybierania zakresu danych (od-do).


Pola do definiowania nowych danych

Ten typ pola służy do wprowadzania danych, które nie zostały wstępnie zdefiniowane w aplikacji. Mogą to być na przykład imię i nazwisko użytkownika podawane podczas rejestracji lub nazwa szablonu do użycia razem z zapisanym pulpitem nawigacyjnym. Nawet jeśli dane nie zostały wstępnie zdefiniowane, można użyć funkcji automatycznego uzupełniania lub automatycznych podpowiedzi opartych na danych wprowadzanych przez użytkownika.

Etykieta pola powinna być zawsze widoczna. Warto też wizualnie rozróżnić typy pól w zależności od tego czy pole edycji jest aktywne lub statusu wprowadzenia danych. Takie rozwiązanie będzie bardzo pomocne, gdy użytkownicy będą chcieli wrócić do edycji formularza, który już wcześniej został wypełniony lub rozpocząć pracę w miejscu, gdzie ją przerwali.

Rys. 2 Pole do definiowania nowych danych


Pole do wybierania danych z listy

W tym przypadku dane zostały już zdefiniowane w aplikacji i użytkownik może wybrać je z listy. Służą one do wyboru działania związanego z określoną funkcją. Dobrze jest utworzyć opcję dodania do listy nowego elementu, który użytkownik uzna za brakujący. Po kliknięciu pola edycji, użytkownik powinien otrzymać informację, że to jest lista z danymi, które należy wybrać. Zaleca się również użycie strzałek pokazujących kierunek rozwijania i zwijania listy. Dla ludzkiego oka jest bardziej naturalne podążanie zgodnie z siłą grawitacji, to znaczy z góry na dół. Dlatego listy powinny rozwijać się w dół, a zwijać do góry.

Można również dodać opcję sortowania list rozwijanych na podstawie wyboru użytkownika. Takie listy mogą być posortowane alfabetycznie lub według ostatnio używanych danych. Idąc krok dalej, te najczęściej używane można nawet umieścić nad innymi elementami z listy, żeby skrócić czas potrzebny na ich odnalezienie.

Można również dodać opcje sortowania listy na podstawie danych wybranych w tym polu przez innych użytkowników aplikacji. Tego typu lista powinna znaleźć się nad danymi, które domyślnie są przypisane do danego pola i wizualnie się wyróżniać. Dobrze też, żeby lista sortowała się alfabetycznie lub na podstawie tego, kiedy ostatnio zostały użyte jej elementy.

Rys. 3 Pole do wybierania danych z listą rozwijaną


Pole do wybierania zakresu danych (od-do)

Ten typ pola wprowadzania często służy do podania zakresu czasu, dla którego powinny zostać wyświetlone dane. To pole dzieli się na dwa oddzielne pola służące do wprowadzenia wartości “od” i “do”. Wartości te można również umieścić w jednym polu oddzielone separatorem, z etykietami lub ikonami, które wizualizują typ wprowadzanych danych, np. dni — kalendarz lub godziny — zegar. Po kliknięciu pola powinno się wyświetlić nowe okno lub lista z zakresem danych do wprowadzenia. 


Rys. 4 Pole do wybierania danych z zakresem


Dobre praktyki UX dotyczące pól wprowadzania

  • Poprawne formatowanie danych
  • Przyciski szybkiego filtrowania “Ostatnio używane”
  • Wybrane dane są zawsze widoczne
  • Przycisk resetowania


Rys. 5 Statusy pól wprowadzania danych

Wykresy danych

Wykresy stanowią podstawowy element aplikacji do monitoringu sieci generującej bardzo dużo informacji. Gdy mówimy o dobrze wykonanym wykresie, czytelność jest pierwszą rzeczą, która przychodzi do głowy. Aby ją zapewnić, można dodać opcję wyświetlania w trybie pełnoekranowym, która często jest wykorzystywana przez administratorów sieci.

Przy pracy ze skomplikowanymi wykresami dobrze jest móc powiększyć część wykresu, aby uzyskać więcej szczegółów. Pulpity nawigacyjne mogą zawierać wiele wykresów z dużą ilością danych. Aby wyświetlić je wszystkie, ich rozmiar musiałby być bardzo mały. Co więcej takie wykresy są zwykle mało czytelne, zwłaszcza gdy ich zakres danych jest bardzo szeroki, a rozdzielczość ekranu niewielka. Funkcja powiększania wybranego fragmentu jest tutaj właściwym rozwiązaniem. Dzięki niej użytkownicy będą mogli powiększyć wybrane obszary wykresu, aby uzyskać bardziej szczegółowe informacje, których potrzebują.

Warto również zauważyć, że aplikacje sieciowe często są wykorzystywane przez duże i rozproszone zespoły. Z doświadczeń zebranych przez CodiLime wynika, że dodanie opcji generowania linku do udostępniania wykresu znacznie poprawia komunikację w takich zespołach, a w ostatecznym rozrachunku również ogólną satysfakcję użytkowników.

Projektując interfejs aplikacji z dużą ilością danych, trzeba również pamiętać, aby dodać funkcje, które są szczególnie użyteczne dla użytkowników. Będą to obliczanie wartości średnich i trendów wyświetlanych na wykresie, edytowanie sposoby wyświetlania danych wyjściowych, grupowanie i filtrowanie.


Dobre praktyki UX dotyczące wykresów danych

  • Opcja otwierania wykresu w nowym oknie
  • Zaznaczanie wybranej godziny na wykresie
  • Przybliżanie wybranej części wykresu
  • Udostępnianie wykresu lub pulpitu nawigacyjnego innym członkom zespołu


Rys. 6 Wykres z danymi zawierający dodatkowe opcje (tryb pełnoekranowy, wybieranie poszczególnego elementu, konfiguracja, udostępnianie, edycja)

Podsumowanie

Dobra architektura informacji stanowi podstawę w zapewnieniu użytkownikowi wygody i funkcjonalności w aplikacjach z dużą ilością danych. Projektanci UX powinni o tym pamiętać, gdy będą projektować interfejsy użytkownika dla aplikacji tego typu. 

O autorze

Łukasz pracuje w CodiLime na stanowisku UX Designer. Ma doświadczenie w pracy z klientami z różnych branż, ale w tym momencie koncentruje się na IT. Po pracy lubi projektować wszystko to, co jest w stanie wydrukować drukarka, gra w multiplayerowe gry online i wyszukuje nowe rodzaje muzyki, której jeszcze nie słuchał.

<p>Loading...</p>