Najlepszy projekt interfejsu użytkownika dla formularzy: porównanie najlepszych wyborów

Projekt interfejsu użytkownika formularzy obejmuje cztery praktyczne warstwy: układ, kontrolki wprowadzania danych, sprawdzanie poprawności i listy wartości, które najlepiej traktować jako pojedynczy system, a nie cztery oddzielne zadania. W środowisku 4D system ten składa się z kilkunastu natywnych obiektów formularzy, dwóch typów formularzy oraz mechanizmów list, list wyboru i podformularzy, dzięki czemu mały zespół może zapewnić użyteczny ekran wprowadzania danych bez zewnętrznych bibliotek interfejsu użytkownika.

• O jakości interfejsu użytkownika formularza decydują cztery warstwy: układ i grupowanie, wybór kontroli danych wejściowych, sprawdzanie poprawności i obsługa błędów oraz lista wartości/strategia wiązania danych. Słabość jednego poziomu osłabia pozostałe trzy.
• 4D dzieli formularze na formularze wejściowe (wprowadzanie danych) i formularze wyjściowe (wyświetlanie i drukowanie), a ta sama tabela może zawierać kilka z nich. Wybór odpowiedniego typu dla każdego zadania jest pierwszą decyzją projektową, a nie szczegółem.
• Natywne obiekty 4D — pola wejściowe, listy rozwijane, listy wyboru, pola wyboru, grupy opcji, kontrolki kart, podformularze, pola list i listy hierarchiczne — zaspokajają większość potrzeb aplikacji biznesowych bez widżetów innych firm.
• Listy wartości w 4D występują w kilku wersjach: listy statyczne, listy powiązane z polem lub tabelą, listy hierarchiczne i listy wyborów dołączone do pola. Wybór niewłaściwego jest najczęstszą przyczyną błędów „lista rozwijana jest pusta”.
• Walidacja odbywa się w dwóch miejscach: reguły na poziomie pola (filtry wejściowe, wymagane pola, kontrolki zakresu) i reguły na poziomie formularza (logika między polami, kontrolki zapisywania). Dzielenie ich pozwala zachować określone komunikaty o błędach.
• Dostępność i płynność klawiatury nie są ulepszeniami opcjonalnymi. Kolejność zakładek, etykiet związanych z polami i widocznych stanów skupienia decyduje o tym, czy personel wprowadzający dane może pracować szybko.

Co właściwie oznacza „projektowanie interfejsu użytkownika dla formularzy” w kontekście bazy danych

Projekt interfejsu użytkownika formularzy polega na takim zaaranżowaniu powierzchni wprowadzania i wyświetlania danych, aby użytkownik mógł szybko wprowadzić poprawne dane, przy minimalnej liczbie błędów i minimalnym przeszkoleniu. W ogólnym kontekście projektowania stron internetowych wyrażenie to ogólnie oznacza stylizację formularza HTML. W kontekście bazy danych lub low-code oznacza to coś szerszego: formularz jest powiązany z tabelą lub zapytaniem, każda kontrolka jest odwzorowywana na pole lub zmienną, a układ musi przetrwać prawdziwe rekordy z długimi nazwami, wartościami null i nieoczekiwanymi znakami.

Formularze bazy danych mają ograniczenia, których nie mają formularze stron marketingowych. W formularzu może być konieczne wyświetlenie 40 pól podzielonych na trzy logiczne grupy.

Może być konieczne zachowanie użyteczności formularza, gdy powiązana tabela zawiera 200 000 wierszy. Może być konieczne wydrukowanie. Może zaistnieć potrzeba obsługiwania go wyłącznie za pomocą klawiatury przez osobę wprowadzającą faktury przez osiem godzin dziennie. Te ograniczenia popychają projekt w stronę gęstości, wyraźnego grupowania i przewidywalnego przenoszenia fokusu, a nie w kierunku dużych białych przestrzeni i dekoracyjnej animacji.

Praktyczne implikacje: oceniaj dowolne podejście do projektowania formularzy (natywne narzędzia, zestawy komponentów innych firm lub pełna platforma low-code) pod kątem realiów bazy danych, a nie estetyki strony docelowej.

Cztery warstwy projektu interfejsu użytkownika formularza

Warstwa 1: Układ i grupowanie

Układ decyduje o tym, ile decyzji musi podjąć użytkownik jednocześnie. Najbardziej wydajną techniką projektowania interfejsu użytkownika formularzy jest grupowanie powiązanych pól w bloki wizualne z nagłówkiem, a następnie porządkowanie bloków zgodnie z kolejnością, w jakiej faktycznie docierają dane. Formularz faktury grupuje dane klienta, pozycje, sumy i warunki płatności – w tej kolejności, ponieważ w takiej kolejności gromadzone są informacje.

Powiązane: Claris FileMaker Pro — Długotrwała platforma relacyjnych baz danych dla zespołów, które potrzebują niestandardowych aplikacji na komputery stacjonarne, w Internecie i na urządzeniach mobilnych w jednym pliku..

Kontrolki kart i kontrolki strony obsługują formularze, które w przeciwnym razie byłyby zbyt wysokie. Kontrolka zakładki dzieli pola rekordu na wiele paneli; użytkownik widzi jeden panel na raz, ale rekord pozostaje nienaruszony. Jest to standardowa odpowiedź na „formularz ma 60 pól” i zwykle jest lepsza niż redukcja czcionek lub przewijanie.

Wyrównanie siatki ma większe znaczenie niż dekoracja. Wyrównanie etykiet i pól wejściowych do spójnej siatki kolumn umożliwia skanowanie gęstego formularza. Wyrównane do lewej etykiety nad polami są odpowiednie dla wąskich formularzy; etykiety wyrównane do prawej obok pól nadają się do gęstych, szerokich formularzy, ponieważ oko może przemieszczać się na krótką, stałą odległość od etykiety do danych wejściowych.

Warstwa 2: Wybór kontroli wejścia

Wybór kontroli to miejsce, w którym zyskuje się lub traci większość użyteczności. Zasada jest prosta: kontrola musi sprawić, że zbiór dopuszczalnych odpowiedzi stanie się oczywisty.

Nasz wybór: Airtable — Prosty interfejs arkusza kalkulacyjnego oparty na prawdziwej relacyjnej bazie danych, z automatyzacją, widokami i udostępnianymi interfejsami..

• Pola do wprowadzania dowolnego tekstu dla nazwisk, opisów, referencji — wszystkiego, co ma otwarty zestaw odpowiedzi.
• Rozwijane menu, gdy zestaw odpowiedzi jest zamknięty i wystarczająco krótki, aby można go było zeskanować (w przybliżeniu poniżej 15 pozycji).
• Pola kombi, gdy zestaw odpowiedzi jest zamknięty, ale długi lub gdy użytkownicy będą musieli wpisać tekst, aby go przefiltrować.
• Przyciski opcji, gdy dostępnych jest niewiele opcji, a wyświetlenie ich wszystkich na raz pomaga w podjęciu decyzji.
• Pola wyboru dla niezależnych wskaźników tak/nie, w tym zestawów wielokrotnego wyboru, w których wiele odpowiedzi może być prawdziwych.
• Selektory dat i elementy sterujące czasem dla danych czasowych, z podstawowym formatem przechowywania ustawionym przez bazę danych, a nie widżet.
• Pola list i podformularze dla relacji jeden do wielu: wiersze zamówień, listy kontaktów, przydziały zadań.
• Listy hierarchiczne dla danych w kształcie drzewa, takich jak plan kont lub drzewa kategorii.

Częstym błędem jest używanie wolnego pola tekstowego do opisywania czegoś, co w rzeczywistości jest kodem: statusu, kategorii, waluty. Dowolny tekst zachęca do literówek, które fragmentują raporty. Zamknięta lista im zapobiega.

Warstwa 3: Walidacja i obsługa błędów

Walidacja ma dwa zadania: zapobieganie przedostawaniu się złych danych do bazy danych i informowanie użytkownika dokładnie, co ma poprawić. Obydwa zadania najlepiej wykonywać, dzieląc walidację na poziomy.

Sprawdzanie poprawności na poziomie pola jest uruchamiane, gdy użytkownik opuszcza pole lub w trakcie pisania. Filtry wejściowe ograniczają liczbę znaków, które w ogóle można wprowadzić. Wymagane flagi pól, kontrole zakresów i maski formatu wyłapują większość błędów w momencie wprowadzenia, gdy użytkownik nadal pamięta, co zamierzał.

Sprawdzanie poprawności na poziomie formularza jest uruchamiane, gdy użytkownik próbuje zapisać lub przejść do następnego rekordu. Ten poziom zarządza regułami obejmującymi pola: data końcowa po dacie początkowej, suma równa się sumie wierszy, występuje co najmniej jedna metoda kontaktu. Kontroli tych nie można przeprowadzić dla poszczególnych pól, ponieważ zależą one od wartości, których użytkownik nie zakończył wprowadzania.

Pokazywanie błędów jest częścią projektu, a nie przemyślanym dodatkiem. Najbardziej skuteczny wzorzec jest umieszczony obok pola naruszającego, prostym językiem i stwierdza, co jest złe, a co dopuszczalne. Pojedyncze modalne okno dialogowe zawierające listę dwunastu błędów zmusza użytkownika do szukania. Sam kolor nie wystarczy: połącz go z tekstem lub ikoną, aby przekaz przetrwał ślepotę barw i druk monochromatyczny.

Warstwa 4: Listy wartości i powiązanie danych

Listy wartości stanowią tkankę łączną pomiędzy formularzami i danymi. W 4D lista wartości może być statyczna (wprowadzona raz, używana wszędzie), połączona z polem lub tabelą (aby odzwierciedlała aktualne dane), hierarchiczna (w przypadku struktur drzewiastych) lub dołączona do pola jako lista wyboru, która ogranicza to, co to pole akceptuje.

Powiązane: Microsoft Power Apps — Tworzenie aplikacji klasy korporacyjnej, wymagających niewielkiej ilości kodu, połączone z platformami Microsoft 365, Dataverse i Power Automate..

Decyzja projektowa dotyczy konserwacji. Statyczną listę trzech metod płatności można wprowadzić ręcznie. Lista 400 klientów musi być powiązana z tabelą klientów, inaczej po tygodniu będzie nieaktualna. Lista, która musi pokazywać tylko aktywnych klientów, wymaga listy opartej na zapytaniach, a nie całej listy tabel.

Wiązanie określa również zachowanie podczas usuwania i zmiany nazwy. Lista wyborów dołączona do pola wymusza ograniczenie w warstwie danych; lista rozwijana wypełniana podczas ładowania formularza wymusza to tylko w tym formularzu. Aby zapewnić integralność danych, preferuj ograniczenie związane z polem.

Porównanie: podejścia do budowania form dla małych zespołów

Podejście	Najlepsze dla	Mocne strony	Kompromisy
Natywne formularze platformowe (np. formularze wejścia/wyjścia 4D)	Aplikacje biznesowe powiązane ze schematem relacyjnym	Bezpośrednie wiązanie pól, wbudowana walidacja i listy wartości, wydruk, brak dodatkowego środowiska uruchomieniowego (runtime)	Styl wizualny jest raczej funkcjonalny niż modny; głęboka personalizacja wymaga znajomości platformy
Kreatory drag-and-drop low-code	Narzędzia wewnętrzne, ekrany CRUD, szybka iteracja	Szybka pierwsza wersja, osoby niebędące programistami mogą wnieść swój wkład	Dyscyplina modelu danych może się pogorszyć; złożona walidacja często i tak wymaga kodu
Ręcznie kodowany interfejs WWW (React, Vue itp.)	Produkty skierowane do klienta z indywidualnym UX	Całkowita kontrola nad układem, dostępnością i zachowaniem	Sam odbudowujesz walidację, listy, drukowanie i uprawnienia
Biblioteki komponentów i systemy projektowania	Zespoły standaryzujące wiele formularzy	Spójność na ekranach, udokumentowane wzorce	Nadal wymaga wiązania, sprawdzania poprawności i logiki listy poniżej
Siatki w stylu arkusza kalkulacyjnego	Zbiorcze wprowadzanie i edycja danych	Znajomość personelu finansowego i operacyjnego, szybka praca w trybie tabelarycznym	Słabe w przypadku przepływów pracy obejmujących jeden rekord na raz i złożonej walidacji

Szczera rada dotycząca projektowania interfejsu użytkownika formularzy: dostosuj narzędzie do przepływu pracy. Formularz używany przez trzech pracowników wewnętrznych do wprowadzania zamówień nie wymaga niestandardowego interfejsu. Formularz, z którego korzysta 50 000 klientów, tak.

Ulubiony czytelnik: Knack — Niewymagający kodu kreator baz danych, przeznaczony dla portali, katalogów i narzędzi wewnętrznych – z cenami ryczałtowymi zamiast opłat za użytkownika..

Jak podjąć decyzję: lista kontrolna kryteriów

Rozwiąż te pytania dotyczące projektowania interfejsu użytkownika formularzy przed zbudowaniem, a projekt w dużej mierze zadecyduje sam.

1. Kto z niego korzysta i jak często? Okazjonalni użytkownicy potrzebują hojnych wskazówek i etykiet; zwykli użytkownicy potrzebują gęstości i skrótów klawiaturowych.
2. Ile pól i jak są pogrupowane? Mniej niż 15 pól na jeden panel. Powyżej 25 zaplanuj karty lub strony.
3. Które pola są zbiorami zamkniętymi? Każdy zbiór zamknięty staje się listą, grupą opcji lub zestawem pól wyboru – nigdy wolnym tekstem.
4. Które pola są wymagane i które mają reguły formatu? Stają się one walidacją na poziomie pola.
5. Które reguły obejmują pola? W momencie zapisywania stają się one walidacją na poziomie formularza.
6. Czy formularz jest drukowany? Jeśli tak, zaprojektuj formularz wyjściowy świadomie, zamiast polegać na układzie ekranu w celu zapewnienia akceptowalnego wydruku.
7. Jaka jest ścieżka klawiatury? Jawnie ustaw kolejność tabulacji; nie akceptuj wartości domyślnej, jeśli nie jest ona zgodna z sekwencją wprowadzania danych.
8. Co się dzieje z długą wartością? Przed wysyłką przetestuj nazwę firmy składającą się z 60 znaków i pole z wartością null.

Dostępność i przepływ klawiatury

Dostępność w formularzach baz danych — kluczowy element projektowania interfejsu użytkownika formularzy — polega głównie na tym, aby niczego nie psuć. Każdy wpis wymaga etykiety programowej, a nie tylko pobliskiego bloku tekstu. Ostrość powinna być widoczna. Kolejność tabulacji powinna być zgodna z kolejnością czytania formularza. Komunikaty o błędach powinny być dostępne i ogłaszane, a nie tylko oznaczone kolorem czerwonym.

Wytyczne W3C dotyczące dostępności treści internetowych (WCAG) pozostają złotym standardem dla podstawowych zasad, a praktyki autorskie WAI-ARIA dokumentują oczekiwane zachowanie klawiatury dla złożonych widżetów, takich jak panele z zakładkami i pola list. Platformy stacjonarne i platformy o niskim kodzie wdrażają własne warstwy dostępności, ale zasady pozostają niezmienne: nadawanie nazw każdemu kontrolce, utrzymywanie przewidywalności skupienia i nigdy nie poleganie wyłącznie na kolorze.

Na szczególną uwagę zasługuje przepływ klawiatury, gdyż stanowi on największą dźwignię produktywności przy wprowadzaniu dużych ilości danych. Dobrze zaprojektowany formularz wprowadzania zamówień pozwala wykwalifikowanemu operatorowi na dokonanie rekordu bez konieczności dotykania myszki: przechodzenia pomiędzy polami, używania klawiszy strzałek na listach i wyzwalania zapisu za pomocą skrótu klawiaturowego. Przetestuj to, wprowadzając dziesięć rekordów przy fizycznie odłączonej myszy.

Typowe błędy i sposoby ich unikania

Rozważając projekt interfejsu użytkownika dla formularzy, unikaj następujących pułapek:

Zbyt wiele pól na jednym ekranie. Podział na karty lub kreatory zmniejsza liczbę błędów i obciążenie poznawcze. Koszt to jedno dodatkowe kliknięcie; zysk jest na ogół większy.

Dowolny tekst, do którego należy lista. Pola stanu, kategorii, regionu i waluty prawie zawsze powinny być ograniczone.

Weryfikacja, która uruchamia się zbyt wcześnie. Oznaczenie pola jako nieprawidłowego, gdy użytkownik nadal pisze, jest wrogie. Sprawdzaj przy rozmyciu lub zapisaniu, a nie po każdym naciśnięciu klawisza, chyba że sprawdzenie jest rzeczywiście przydatne podczas pisania.

Ogólne komunikaty o błędach. „Nieprawidłowe dane wejściowe” nic nie mówią użytkownikowi. „Data początkowa musi przypadać przed datą końcową” mówi im wszystko.

Ignoruj ​​stan pusty. Nowe rekordy mają wszędzie wartości null. Zaprojektuj wygląd formularza, zanim pojawią się jakiekolwiek dane.

Zapomnij o formularzu wydruku. Układ ekranu z paskami przewijania i zakładkami nie jest drukowany prawidłowo. Utwórz oddzielny formularz wyjściowy dla dokumentów.

Brak dyscypliny danych testowych. Testuj z najdłuższymi realistycznymi wartościami, znakami akcentowanymi i rekordami naruszającymi wszystkie opcjonalne relacje.

Często zadawane pytania

Jaki jest najlepszy projekt interfejsu użytkownika dla formularzy w aplikacji bazodanowej?

Najlepszy projekt interfejsu dla formularzy w aplikacji bazodanowej grupuje powiązane pola w oznaczone bloki, wykorzystuje kontrolki z zamkniętej listy dla dowolnego pola ze stałym zestawem odpowiedzi, sprawdza poprawność na poziomie pola i formularza oraz definiuje jawną ścieżkę klawiatury. Gęstość i przewidywalność przeważają nad dekoracją, ponieważ formularze baz danych są wielokrotnie używanymi narzędziami pracy, a nie raz oglądanymi powierzchniami marketingowymi.

Czy powinienem używać menu rozwijanych czy przycisków opcji?

Listy rozwijane są odpowiednie w przypadku zamkniętych zestawów odpowiedzi, które są długie lub mają ograniczoną przestrzeń; przyciski opcji nadają się do krótkich zestawów, w których jednoczesne wyświetlanie wszystkich opcji pomaga w podejmowaniu decyzji. Przydatną praktyczną zasadą jest to, że przy maksymalnie pięciu opcjach przyciski opcji lub kontrolki segmentowe są zazwyczaj bardziej przejrzyste, a poza około piętnastoma opcjami pole kombi z możliwością przeszukiwania jest lepsze od zwykłej listy rozwijanej.

Ile pól powinien mieć formularz?

Pojedynczy panel formularza działa dobrze z około 15 do 25 polami; poza tym podziel rekord na karty, strony lub użyj wieloetapowego kreatora. Ograniczenie nie ma charakteru technicznego, ale poznawczego: użytkownicy tracą kontrolę nad tym, gdzie się znajdują i jakie pola wypełnili, gdy formularz przewija się daleko poza jeden ekran.

Jaka jest różnica między formularzami wejściowymi a formularzami wyjściowymi?

Formularze wejściowe są przeznaczone do wprowadzania i edytowania danych, dlatego priorytetowo traktują elementy sterujące, sprawdzanie poprawności i przepływ klawiatury. Formularze wyjściowe są przeznaczone do wyświetlania i drukowania, dlatego priorytetem jest układ, typografia i dopasowanie strony. Wiele platform baz danych, w tym 4D, traktuje je jako osobne typy formularzy dołączone do tej samej tabeli.

Jak przeprowadzić weryfikację bez irytowania użytkowników?

Sprawdzaj reguły na poziomie pola, gdy użytkownik opuszcza pole, a nie przy każdym naciśnięciu klawisza, i reguły sprawdzające zależności między polami stosuj dopiero podczas zapisu. Wyświetlaj błędy obok obok niewłaściwego pola, prostym językiem i powiąż kolor z tekstem lub ikoną. Nigdy nie uniemożliwiaj użytkownikowi poruszania się po formularzu tylko dlatego, że pole jest obecnie nieprawidłowe.

Czy potrzebuję systemu do projektowania wewnętrznych formularzy biznesowych?

Uproszczony system jest przydatny, gdy masz więcej niż kilka formularzy. Wspólny zestaw pozycji etykiet, wartości odstępów, rozmiarów kontrolek i stylów błędów zapewnia spójność ekranów i przyspiesza tworzenie nowych formularzy. Pełny system projektowania jest zwykle przesadą w przypadku małego zestawu wewnętrznych narzędzi, ale jednostronicowy przewodnik po stylach już nie.