Załącznik w formularzu: plik wybrany, wysłany czy dopiero czekający?

Plik pojawił się na liście. Zielony znaczek obok nazwy łatwo uznać za potwierdzenie. Przeglądarka mogła jednak tylko zapamiętać wybór, a dokument, który dotarł na serwer, może nadal czekać na przyjęcie do sprawy. Dla osoby wysyłającej to jedna czynność. Projekt musi uczciwie pokazać jej kolejne etapy.

Wyobraźmy sobie fikcyjną pracownię przygotowującą gabloty wystawowe. Klient dołącza rysunek, zdjęcie miejsca i plik z opisem ekspozycji. Zdjęcie okazuje się za duże, rysunek zostaje zastąpiony nowszą wersją, a przesyłanie opisu przerywa połączenie. Zespół potrzebuje na końcu właściwego kompletu. Klient chce wiedzieć, co jeszcze ma zrobić, bez rozpoczynania całego zgłoszenia od nowa.

Najpierw ustal, jaki komplet pozwala zacząć pracę

Nie zaczynaj od rysowania przerywanej ramki. Ustal, do czego pracowni potrzebne są dokumenty. Rysunek może opisywać wymiary, zdjęcie warunki miejsca, a opis rodzaj eksponatów. Trzy pliki nie są wtedy trzema wymiennymi dowodami wykonania zadania. Brak rysunku ma inne znaczenie niż brak dodatkowej fotografii.

Sprawdź przypadek jednego dokumentu spełniającego kilka potrzeb. Klient może mieć wszystkie rysunki i opis w jednym PDF. Jeśli formularz wymaga trzech osobnych plików tylko dlatego, że makieta ma trzy ramki, tworzy zbędne zadanie dzielenia materiału. Uzgodnij z pracownią, czy przyjęcie wspólnego dokumentu jest możliwe i jak wskazać zawarte w nim informacje. Jeżeli osobne pozycje są konieczne do dalszego obiegu, wyjaśnij to przed wyborem, z instrukcją odpowiadającą rzeczywistej potrzebie odbiorcy.

Przy każdym rodzaju materiału zapisz rozpoznawalny cel. „Rysunek gabloty, jeśli już go masz” pozwala ocenić, co wybrać. Samo „załącznik 1” zostawia tę pracę klientowi. Gdy materiały są opcjonalne, wyjaśnij, co można zrobić bez nich. Pracownia może przygotować pytania do rozmowy, ale potrzebować pomiarów przed właściwą wyceną. Formularz powinien odzwierciedlać ten podział.

Limity pliku ustal z osobą odpowiedzialną za przyjmowanie i przechowywanie dokumentów. Projektant potrzebuje znać dopuszczone formaty, rozmiar, liczbę pozycji oraz przebieg sprawdzenia. Z tego powstają instrukcje i stany interfejsu. Samo zdanie przy przycisku nie ustanawia ograniczenia po stronie serwera ani nie potwierdza bezpieczeństwa zawartości.

Umieść warunki przed wyborem pliku. Klient powinien zobaczyć, czy może dołączyć kilka dokumentów i czy limit dotyczy każdego z osobna, czy całego zestawu. Jeżeli skompresowany folder jest niedopuszczony, napisz, czego oczekujesz zamiast niego. Uprzedź klienta o takim warunku, zanim poświęci czas na przesłanie.

W projekcie formularza kontaktowego załączniki są częścią większego zadania. Powinny zachować opis sprawy, dane kontaktowe i wcześniejsze odpowiedzi. Nie ma dobrego powodu, żeby błędne zdjęcie kasowało poprawnie wpisane pytanie o gablotę.

Każdy plik potrzebuje własnej historii

Po wybraniu pokaż pozycję, którą da się rozpoznać: nazwę, wielkość oraz stan. Jeżeli dokument pełni określoną rolę, zachowaj również tę rolę. „Rysunek — projekt-03.pdf” daje więcej informacji niż samotne „projekt-03.pdf”. Osoba, która wróci po chwili do formularza, nie musi odtwarzać kolejności dodawania.

Uwzględnij też wycofanie się z samego wyboru. Klient naciska „Zmień rysunek”, otwiera okno z plikami i je zamyka. Sprawdź, czy poprzednia pozycja nadal pozostaje na liście i czy jej stan się nie zmienił. Rezygnacja z szukania nowszej wersji nie powinna wyglądać jak świadome usunięcie starej. W próbie zapytaj użytkownika, który dokument zamierza teraz wysłać. Jego odpowiedź szybko pokaże, czy zachowanie kontrolki da się zrozumieć.

Dłuższa nazwa powinna pozwalać odróżnić wersję. Jeżeli dwa dokumenty różnią się końcówką „zatwierdzony” i „roboczy”, schowanie właśnie końca pod wielokropkiem usuwa najpotrzebniejszą informację. Zadbaj o możliwość poznania pełnej nazwy również na telefonie i bez najeżdżania kursorem. Miniatura może pomóc przy fotografii, lecz nie zastąpi identyfikacji dokumentu.

Oddziel wybór od przesyłania oraz gotowości do wysłania zgłoszenia. Dla naszego przykładu można nazwać stany: wybrany, przesyłany, sprawdzany, gotowy albo wymagający poprawki. To roboczy zestaw do uzgodnienia z działaniem systemu. Każda nazwa powinna odpowiadać zdarzeniu, które da się zaobserwować, a nie procentowi narysowanemu dla uspokojenia klienta.

Jeżeli pliki rozpoczynają przesyłanie automatycznie, wyjaśnij to przy wyborze. Jeżeli dopiero końcowy przycisk uruchamia transfer, pokaż wcześniej przygotowaną listę. W obu wariantach trzeba rozpoznać, czy przycisk „Usuń” usuwa lokalny wybór, czy dokument już powiązany ze szkicem. Osoba nie powinna poznawać tej różnicy przez przypadkowe kliknięcie.

Wymiana rysunku wymaga równie czytelnej decyzji. Najpierw klient wskazuje nową wersję, potem widzi jej gotowość i potwierdzenie zastąpienia. Przy błędzie nowego pliku potrzebuje wiedzieć, czy wcześniejszy nadal pozostaje przy zgłoszeniu. Ustal to jawnie. Dwie podobne nazwy i jeden krzyżyk nie wyjaśnią, który projekt trafi do pracowni.

Odtwórz wymianę także przy dwóch transferach trwających równocześnie. Klient wybiera poprawiony rysunek, zanim zakończy się przesyłanie poprzedniego. W roboczej próbie starszy plik dociera później. Ustal z wykonawcą, jak system zachowa informację o zamierzonym zastąpieniu, a w interfejsie pokaż przyjętą wersję. Sam porządek pojawiania się komunikatów nie wyjaśnia intencji klienta. Po zakończeniu obu prób na podsumowaniu ma być rozpoznawalny ten rysunek, który rzeczywiście wybrał do dalszej pracy.

Sprawdź też pliki o identycznej nazwie. Mogą zawierać różne treści, zwłaszcza po pobraniu dokumentu z dwóch wiadomości. Jeżeli system pozwala je zachować, interfejs potrzebuje dodatkowego rozróżnienia. Jeżeli rozpoznaje powtórzenie, komunikat powinien wyjaśnić, co zostało pominięte. Sama nazwa nie jest wystarczającym uzasadnieniem, żeby cicho zastąpić jedną wersję drugą.

Błąd ma wskazać konkretny ruch

Wskazówki komponentu File upload GOV.UK rozróżniają komunikaty dla niewłaściwego formatu, przekroczonego rozmiaru, pustego pliku i nieudanego przesłania. To użyteczny punkt odniesienia: od rodzaju problemu zależy czynność, którą użytkownik może wykonać.

W naszej fikcyjnej sprawie zbyt duże zdjęcie wymaga zastąpienia lub zmniejszenia. Przerwany transfer opisu wymaga ponowienia. Brak rysunku może wymagać wybrania właściwego dokumentu. Komunikat „Nieprawidłowy plik” nie odróżnia żadnej z tych sytuacji. Klient musi sam odkryć, czego system od niego chce.

Pokaż błąd przy pozycji, której dotyczy. Przy większym zestawie przydaje się też podsumowanie prowadzące do problematycznego dokumentu. Pozostałe poprawne pliki powinny zachować swój stan. Jeśli jeden transfer zawiódł, nie oznaczaj całej listy jako pustej i nie każ ponownie szukać rysunku, który został już przyjęty.

W tekście podaj granicę i możliwy następny krok. „Zdjęcie ma 18 MB, dopuszczamy do 10 MB. Wybierz mniejszy plik” jest przykładem roboczym; rzeczywiste liczby muszą pochodzić z waszych ustaleń. Dla awarii usługi potrzebujesz innego komunikatu. Poprawianie dokumentu nie naprawi niedostępnego serwera.

Gdy przyczyna nie została rozpoznana, zachowaj tę niepewność. Nie ogłaszaj uszkodzenia pliku tylko dlatego, że żądanie się nie powiodło. Wskaż, co użytkownik może ponowić i które dane zostały zachowane. Jeśli proponujesz inną drogę kontaktu, powinna ona prowadzić do osoby zdolnej przyjąć tę samą sprawę.

Pasek doszedł do końca. Co dalej?

Dokumentacja MDN właściwości upload opisuje zdarzenie loadend, które występuje po zakończeniu przesyłania niezależnie od powodzenia. To konkretna granica techniczna: koniec etapu nie jest samodzielnym dowodem sukcesu.

Dla klienta pracowni istotny jest dalszy wynik. Dokument mógł dotrzeć, lecz nadal wymagać sprawdzenia lub przypisania do zgłoszenia. Jeżeli te czynności rzeczywiście istnieją, potrzebują osobnych stanów. Nie zatrzymuj paska na 99 procentach na czas całkiem innej operacji. Użytkownik nie wie wtedy, czy ma czekać, odświeżyć stronę, czy rozpocząć ćwiczenia oddechowe.

Postęp liczbowy pokazuj dla zakresu, który potrafisz określić. Przy oczekiwaniu bez znanego końca lepsza bywa nazwa wykonywanej czynności i możliwość bezpiecznego odejścia. Projekt długiego zadania na stronie obejmuje właśnie ten powrót: gdzie odnaleźć wynik i co zrobić, gdy pierwotna karta została zamknięta.

Przycisk kończący zgłoszenie musi uwzględniać stan kompletu. W naszym przykładzie rysunek jest gotowy, zdjęcie wymaga wymiany, a opis czeka na ponowienie. Ustal, czy wolno wysłać zgłoszenie bez zdjęcia. Jeśli tak, potrzebna jest świadoma decyzja klienta. Jeśli nie, wyjaśnij konkretny brak zamiast zostawiać nieaktywny przycisk bez słowa.

Podgląd i powrót nie powinny mieszać wersji

Miniatura pomaga sprawdzić, czy wybrano fotografię właściwego miejsca. Przy dokumencie z wieloma stronami klient może potrzebować czegoś więcej niż pierwszej planszy. Zanim dodasz podgląd, ustal jego zakres: które formaty obsługuje, czy pokazuje wybrany plik oraz jak wrócić bez utraty formularza. Nazwa otwartej wersji powinna pozostać widoczna.

Przy fotografii z telefonu sprawdź również moment wyboru. Klient może mieć kilka niemal takich samych ujęć i dopiero po zobaczeniu większego podglądu rozpoznać właściwe. Pozwól mu wrócić do tej konkretnej pozycji oraz ją wymienić. Zbadaj też, czy pionowe zdjęcie i dłuższa nazwa nie zasłaniają sterowania. To ma być oglądanie wybranego materiału, a nie drugie, trudniejsze zadanie polegające na poszukiwaniu zamknięcia podglądu.

Przy plikach HTML i SVG z aktywną treścią trzeba rozpoznać, co samo otwarcie może uruchomić. Formularz przyjmujący materiały nie musi automatycznie oferować podglądu każdego dopuszczonego formatu. Wybierz sposób sprawdzenia odpowiadający rzeczywistemu obiegowi pliku.

Jeżeli zgłoszenie można zapisać, rozróżnij zachowanie danych formularza i zachowanie załączników. Klient, który wraca następnego dnia, powinien zobaczyć, które pozycje nadal są dostępne. Etykieta „szkic zapisany” nie może ukrywać potrzeby ponownego wybrania wszystkich dokumentów. To jeden z warunków projektu formularza na kilka podejść.

Podobny porządek pomaga przy przygotowaniu materiałów do audytu: odbiorca potrzebuje rozpoznać rolę dokumentu i jego wersję. Dla pracowni warto więc zachować tę informację także po stronie zespołu. Lista, którą klient zaakceptował przed wysyłką, powinna dać się porównać z materiałami rzeczywiście przypisanymi do sprawy.

Odbierz ten sam komplet po obu stronach

Przygotuj próbę z trzema dokumentami o wyraźnie różnych rolach. Zmień jeden, usuń drugi, przerwij przesyłanie trzeciego. Następnie wróć do formularza i spróbuj dokończyć sprawę. Zapisuj, co człowiek widzi przy każdym pliku oraz który materiał na końcu otrzymuje pracownia. To sprawdzenie ma obejmować drogę dokumentu, nie wyłącznie elegancki widok listy.

Po stronie pracowni poproś drugą osobę o odnalezienie rysunku zatwierdzonego przez klienta. Powinna rozpoznać dokument bez zgadywania na podstawie daty pobrania. Sprawdź, czy nazwa roli i informacja o wersji przetrwały przekazanie, a usunięta pozycja nie wróciła w automatycznie przygotowanej paczce. Jeśli zespół otrzymuje jedynie wiadomość o zgłoszeniu, a pliki znajdują się w innym miejscu, przejdź także ten odnośnik i upewnij się, że dotyczy właściwej sprawy.

Powtórz kluczowe czynności na telefonie oraz klawiaturą. Użytkownik powinien móc rozpoznać pozycję, uruchomić jej poprawkę i znaleźć wynik. Nie opieraj usuwania na nieopisanym krzyżyku, który pojawia się wyłącznie po najechaniu kursorem. Gdy lista się zmienia, sprawdź również miejsce dalszej obsługi: po usunięciu pliku klient nadal potrzebuje wiedzieć, gdzie się znajduje.

Na koniec porównaj podsumowanie ze stanem zaplecza. Potwierdzenie po wysłaniu formularza powinno odnosić się do rzeczywiście przyjętej operacji. Jeśli część dokumentów nie dotarła, zielony ekran nie może opowiadać o komplecie. Lepiej wskazać brakującą pozycję i zachować numer sprawy niż zmusić klienta do kolejnego zgłoszenia z dopiskiem „poprzednio chyba nie poszło”.

Do rozmowy o projekcie strony w Aeneia Design przygotuj kilka typowych dokumentów i jeden trudny przypadek. Pozwoli to ustalić potrzebne stany oraz granicę pracy formularza przed wyborem wyglądu kontrolki. Dobrze zaprojektowana lista daje prostą odpowiedź: ten plik jest właściwy, ten jeszcze czeka, a ten wymaga mojego działania.