Standard budowania interfejsu aplikacji

---

W poniższym rozdziale zebrane zostały najlepsze praktyki podczas budowania aplikacji.

Zaproponowane rozwiązania pozwolą ci stworzyć przejrzyste, ergonomiczne i funkcjonalne formularze, listy i inne elementu GUI, które podniosą atrakcyjność tworzonej aplikacji.

Układ (Layout)

Powszechną praktyką jest stosowanie szablonów ekranów. W ramach aplikacji określ typy ekranów (np. dashboard, ekrany szczegółów, widok 360, raporty itp.) Poniżej przykład dashbordu menadżera – na stronie znajdują się najważniejsze skumulowane informacje, które bezpośrednio dotyczą użytkownika.

1. Informacje dziel na sekcje i separuj je w sposób czytelny (w tym celu możesz zastosować kontenery oraz nagłówki).

2. Poszczególne komponenty formularza powinny zwierać zbieżne tematycznie dane.
3. W przypadku dużej ilości danych, stosuj:

• Sekcje – są odpowiednie do danych, których użytkownik może potrzebować w danym momencie.

• Zakładki – odpowiednie do odseparowanych danych (użytkownik w ramach danej zakładki znajdzie wszystko czego potrzebuje).

• Osobne ekrany – niepowiązane zestawy danych (np. Obsługa ewidencji czasu pracy, edycja danych adresowych).

4. Unikaj budowania „wysokich” ekranów ( >2 ekrany ). W takim wypadku stosuj: zakładki, osobne ekrany w formie wizarda.

Nawigacja

1. Nawigacja powinna być czytelna, powtarzalna i przewidywalna – zdefiniuj schemat nawigacji i stosuj go w całej aplikacji.
2. Wskazówki dotyczące nawigacji powinny być uwzględnione przy tworzeniu opisanych powyżej szablonów ekranów.
3. Położenie akcji głównych:

• Akcje główne to akcje odnoszące się do całej strony i powinny znajdować się w panelu akcji na formularzu.

• Powyższe akcje powinny być widoczne cały czas. Dobrym rozwiązaniem jest zadokowanie ich na górze strony.
• W przypadku nie dokowania akcji zaleca się pokazanie panelu akcji powyżej formularza.
• W przypadku ekranów, których zawartość powoduje pojawienie się scrolla, dobrą praktyką jest powtórzenie tych akcji pod formularzem.

4. Położenie akcji lokalnych.

• Akcja lokalna to akcja, która odnosi się do części formularza.

• Położenie akcji powinno współgrać ze stylem sekcji (ramka, tło), której dotyczy tak aby było wiadomo czego dotyczy dana akcja.
• Miejsce akcji lokalnej w sekcji powinno być powtarzalne (np. górny prawy róg)

Styl przycisków akcji

1. Style należy stosować konsekwentnie dbając o podkreślanie ich według znaczenia/funkcji.

• Standard - akcje podstawowe, techniczne.
• Primary - akcje wyróżnione, oczekiwane, powodujące postęp w realizowanym procesie.
• Success - akcje pozytywne (akceptacje), kończą jakiś proces (np. zatwierdź zamówienie) lub inicjują jakieś istotne zdarzenie (np. Wyślij wniosek).
• Negation - akcje typu odrzucenie / anulowanie, akcje przerwania procesu lub akcje o znaczeniu negatywnym w kontekście biznesowym (np. Skieruj do windykacji).

2. Kolejność przycisków akcji w panelu akcji.

• W przypadku kilku przycisków akcji obok siebie należy zadbać o powtarzalną ich kolejność.
• Z lewej strony stosujemy akcje wstrzymujące realizowany proces, cofające go lub nawigację WSTECZ.
• Pośrodku akcje neutralne, techniczne (np. zapisz, aktualizuj dane).
• Z prawej akcje postępu /oczekiwane / wyróżnione.

Zapis

1. Na stronie powinno być jasne czego dotyczy akcja zapisu.
2. Nie należy na stronie stosować więcej niż jedna akcja zapisu zmuszając użytkownika do zastanawiania się co zostanie zapisane.
3. Jeżeli istnieje potrzeba zapisana zmiany wartości danej kontrolki „tu i teraz” (jej wartość ma wpływ na zachowania formularza) należy zastosować zapis na zdarzeniu onChange kontrolki.

Edycja

1. Sposób edycji „dużego” formularza powinien zależeć od kontekstu.
2. Poniżej przykład tworzenia elementu obiektu (np. wniosek) gdzie użytkownik będzie uzupełniał wszystkie/większość pól – wszystkie pola są w edycji.

3. Wejście w edycję już istniejącego elementu – można zastosować edycję na poziomie sekcji za pomocą okna popup lub osobnej strony formularza.

4. Nie stosuj formularza w trybie edycji dla każdego wejścia na szczegóły obiektu. Tryb edycji powinien być dostępny jeśli istnieje tego biznesoswe uzasadnienie. W przeciwnym przypadku zastosuj tryb odczytu z opcją edycji na żądanie.

Tryb odczytu – dwie metody

1. Textbox R-O (read only) - stosuj dla małych formularzy gdzie masz więcej miejsca do dyspozycji.

2. Label - stosuj w celu oszczędności miejsca.

3. Możesz przyjąć konwencję mieszaną wg. określonych/własnych kryteriów.
4. Wybierz i stosuj konsekwentnie w całej aplikacji.

Ikony, symbole

1. Stosuj symbole dla akcji oczywistych i typowych, zrozumiałych dla użytkownika (zapis, edycja, akceptacja).
2. Akcja nietypowa, stosowana powszechnie w danej aplikacji, można potraktować jak typową (np. „pobierz PDF” w systemie obsługi dokumentów, gdzie akcja występuje na wielu formularzach).

Akcje nietypowe wspieraj dodatkowym tekstem przycisku akcji.

3. Stosuj tooltipy w każdej sytuacji.

Kontekst użycia ekranu

1. Buduj ekrany oparte o dane odpowiadające potrzebie biznesowej użytkownika . Agreguj dane potrzebne użytkownikowi na danym etapie procesu lub czynności, eliminując potrzebę przełączania się pomiędzy ekranami.
2. Separuj dane na osobne ekrany, jeśli nie stanowią one spójnej całości w kontekście biznesowym.
3. Projektuj dedykowane ekrany dostarczające użytkownikowi informacji, których potrzebuje

Przykład 1

Dashboard menagera prezentuje statystyki i wartości, które podlegają jego kontroli. Ten ekran ma dostarczyć informacji „co wymaga jego uwagi i podjęcia działania”, ale samo podjęcie tego działania nie musi być realizowane poprzez ten właśnie ekran.

Przykład 2

Ekran pracownika zawiera dwa konteksty:

1. Rejestracja czasu pracy – zbiór funkcji umożliwiający rejestrację aktywności zawodowej lub absencję.
2. Kartoteka – zbiór informacji i dokumentów dla pracownika (adresy, kontakt, płaca, pożyczki, ZUS itp.).

Zakres prezentowanych informacji

1. Pamiętaj, że wszystko jest informacją – ikona, kolor, wielkość, wyrównanie – stosuj ich z umiarem podkreślając tylko to, co może stanowić pomoc / wsparcie użytkownika w realizowanym procesie biznesowym.
2. Dobieraj zestaw danych stanowiący wartość dla użytkownika w chwili wykonywania danej czynności.

Identyfikacja obiektu

1. Warto zadbać aby cały czas były dostępne istotne informacje o obsługiwanym podmiocie.

Przykład 1 – przy obsłudze wniosku kredytowego cały czas pokazuj dane identyfikacyjne klienta (imię, nazwisko, PESEL, CID itp.).

Przykład 2 – Przypisując przesyłki do pojazdu kuriera, pokazuj dane pojazdu (typ, model, numer rejestracyjny. przewoźnik).

Kontrolki

Lista

1. Stosuj ograniczoną ilość kolumn – scroll poziomy na liście stanowi duże utrudnienie.
2. Maksymalna ilość wierszy – tak aby było możliwe wyświetlenie całej listy z nagłówkiem, filtrem i paginacją na jednym ekranie.
3. Jeżeli lista będzie zawierać kilka rekordów (np. < 5) zrezygnuj z paginacji (np. lista żyrantów kredytu kiedy nie może ich być więcej niż 5).
4. Określaj szerokość kolumn względem oczekiwanej zawartości.
5. Stosuj wyrównanie treści kolumn:

• teksty do lewej
• wartości liczbowe do prawej
• daty do lewej

6. Filtry – stosuj układ filtra w taki sposób aby zajmował on jak najmniej miejsca.

7. Stosuj krótkie opisy / skróty pól filtra aby uniknąć zawijania wierszy (definiuj tooltipy z pełnym opisem pól).
8. Akcje związane z całą listą umieszczaj w toolbarze listy.
9. Akcje związane z rekordem umieszczaj bezpośrednio na rekordzie (ikona).

10. Korzystaj z opcji sortowania danych. Projektant aplikacji powinien wiedzieć po czym ma się domyślnie sortować lista i takie ustawienia zastosować. Więcej patrz: Wybór kolumn i sortowania.

Repeater

1. Repeater stosuj do wyświetlenia skończonej ilości elementów, tak aby była możliwa jego obsługa w ramach jednego ekranu.
2. Separuj elementy powtarzalne w sposób widoczny (kontenery, separatory).

3. W przypadku elementów jednowierszowych nie stosuj dodatkowych separatorów elementów powtarzalnych.
4. Używaj opcji Pierwszy wiersz nagłówkowy w celu oszczędności miejsca na formularzu.

Popupy (formularz otwarty w oknie popup)

1. Umieszczaj akcje zadokowane na dole okna formularza. Tak aby były dostępne cały czas.
2. Do akcji finalizującej pożądane działanie w ramach okna popup, dołączaj dodatkową akcję JS z funkcją zamykającą okno popup.

Przykład: przycisk ZAPISZ / ZATWIERDŹ w oknie popup powinien powodować zamknięcie tego okna.

3. Zawsze odświeżaj odpowiedni element strony po zamknięciu okna, tak aby zmiany były od razu widoczne.

Przycisk

1. Umieszczając kilka przycisków obok siebie na formularzu stosuj Kontener (flow) w celu optymalizacji odstępów między przyciskami.

2. Chcąc umieścić przycisk wyrównany „do prawej” dowolnego obiektu, stosuj Kontener (flow) - pozwoli to uniezależnić położenie przycisku od szerokości kolumny kontenera, na którym przycisk został osadzony.

Grupa

1. W zależności od spodziewanej zawartości edytowanych pól, modyfikuj domyślny układ grupy (4-4-4) w celu lepszego wykorzystania powierzchni ekranowej.

Pole daty, Pole tekstowe z maską

1. Określaj szerokość w kolumnach adekwatnie do spodziewanej zawartości.

Pole liczbowe

1. Opcję spiner stosuj tam gdzie dodawanie jednostek ma sens

• Pole Ilość domowników na utrzymaniu - użycie poprawne
• Pole Kwota zadłużenia - użycie niepoprawne

Zobacz również

Menu

Listy

Formularze