Kalkulator na stronie: wynik ma wyjaśniać założenia, a nie udawać wyrocznię

Wynik wynosi 14. Czternaście czego: sztuk, paczek, metrów czy elementów bez zapasu? Kalkulator potrafi wyglądać przekonująco nawet wtedy, gdy odbiorca nie rozumie podstaw odpowiedzi. Duża cyfra na końcu formularza nie zastępuje wyjaśnienia, co zostało policzone.

Na stronie prosty kalkulator może pomagać oszacować ilość albo porównać warianty. Najpierw trzeba ustalić jego pytanie, dane i zakres. Poniżej użyjemy przykładu liczenia papierowych kwadratów do dekoracji prostokątnej powierzchni. To autorski przykład rachunkowy. Nie jest instrukcją technicznego montażu ani gotową regułą dla dowolnego materiału.

Jedno pytanie prowadzi do jednej definicji wyniku

„Ile potrzebuję?” to zbyt szeroki brief. Można obliczyć samą liczbę elementów według powierzchni, liczbę pełnych paczek albo przybliżoną ilość z przyjętym dodatkiem. Te wyniki odpowiadają na różne pytania. Nazwij je przed projektowaniem pól, aby później interfejs nie próbował ukryć kilku odmiennych obliczeń pod jednym słowem „zapotrzebowanie”.

W przykładzie powierzchnia ma 2,4 m na 3 m, czyli 7,2 m². Jeden papierowy kwadrat ma bok 0,3 m, więc jego powierzchnia to 0,09 m². Dzielenie daje 80 elementów według samej powierzchni. Jeśli paczka zawiera sześć, potrzebujemy 14 pełnych paczek, czyli 84 elementów. To nadal ta sama arytmetyka, ale już trzy różne liczby o trzech różnych rolach.

Nie pokazuj ostatniej z nich bez nazwy jednostki i sposobu zaokrąglenia. Klient powinien wiedzieć, że liczba paczek została zaokrąglona w górę, a liczba elementów wynika z zawartości opakowania. Gdy zmieni wariant produktu lub pakowanie, przeliczenie musi użyć odpowiednich danych. Sam poprzedni wynik nie jest własnością całej kolekcji.

Jeżeli wynik ma budować listę części, połącz go z konfiguratorem produktu. Kalkulator odpowiada na pytanie liczbowe, a konfigurator ustala konkretny zestaw. Przejście między nimi wymaga jawnego przypisania obliczonej ilości do oferowanych elementów, zamiast pozostawiać kupującemu samodzielne przepisanie wyniku do kilku pól.

Dane wejściowe potrzebują znaczenia i jednostki

Etykieta „szerokość” powinna dotyczyć konkretnego pomiaru. Czy klient wpisuje wolne miejsce, wymiar przedmiotu czy powierzchnię do pokrycia? Przy polu pokaż krótkie objaśnienie, jeśli różnica ma wpływ na wynik. Rysunek może pomagać wskazać kierunek, ale wartość i jednostka powinny pozostać czytelne także bez obrazu.

Nie mieszaj centymetrów i metrów bez wyraźnej zasady. Jeśli pozwalasz wybrać jednostkę, zdecyduj, czy jej zmiana przelicza wpisaną wielkość, czy tylko zmienia interpretację liczby. Dla klienta te zachowania mają zupełnie inne skutki. Przetestuj je na wartości, której skalę łatwo rozpoznać, aby błąd nie ukrył się w pozornie rozsądnym wyniku.

MDN opisuje atrybuty min, max i step pola liczbowego: określają granice i dopuszczalny przyrost wartości. Są elementem sprawdzania formularza. Nie rozstrzygają jednak, czego dotyczy pomiar i czy wpisana szerokość odpowiada rzeczywistemu zadaniu odbiorcy. To muszą wyjaśnić treść oraz reguła kalkulatora.

Uzgodnij wartości puste, zero i dane poza zakresem. Brak szerokości nie powinien stawać się pomiarem równym zero tylko dlatego, że ułatwia to obliczenie. Wpisanie jednej poprawnej wartości może wystarczać do zachowania części pracy, ale nie do pokazania końcowego wyniku. Komunikat ma wskazać, czego potrzeba dalej.

Zadbaj o zapis dziesiętny i sposób korzystania na telefonie. Odbiorca może wpisywać przecinek, poprawiać pojedynczą cyfrę lub korzystać z innej klawiatury. Sprawdź rzeczywistą kontrolkę oraz jej komunikat, a nie wyłącznie wygląd w makiecie. Zasady projektowania formularzy pomagają zachować etykiety, dane i drogę poprawki.

Jeżeli wynik zmienia się w trakcie wpisywania, nie pokazuj przypadkowej odpowiedzi po pierwszej cyfrze jak gotowego oszacowania. Możesz poczekać na komplet danych albo wyraźnie nazwać stan roboczy. Interfejs powinien pomagać dokończyć zamiar, zamiast reagować na każdy znak tak energicznie, że klient przestanie ufać własnemu pomiarowi.

Zaokrąglenie powinno być widoczną częścią rozumowania

Wróćmy do papierowych kwadratów. Osiemdziesiąt elementów nie mieści się w trzynastu paczkach po sześć, bo dałyby 78 sztuk. Czternaście paczek daje 84. Pokazanie tej relacji pomaga odczytać wynik bez zastanawiania się, dlaczego sklep proponuje więcej niż wynikało z pierwszej liczby. Można wyjaśnić to jednym zdaniem przy podsumowaniu.

Dodatek na straty lub inne okoliczności jest osobnym założeniem. Nie ustawiaj arbitralnej wartości jako uniwersalnej normy. Jeżeli właściciel kalkulatora przewiduje konkretną regułę, nazwij jej pochodzenie i zakres. Użytkownik powinien wiedzieć, czy może ją zmienić oraz czy widoczny wynik już ją uwzględnia. Pole „zapas” bez definicji nie wyjaśnia sposobu obliczenia.

Własny przykład może pokazać wpływ przyjętego dodatku bez udawania zalecenia. Gdy do 80 elementów doliczymy umownie 10%, otrzymamy 88. Przy paczkach po sześć będzie to 15 paczek i 90 elementów. Taki przykład objaśnia mechanikę zaokrąglania; nie dowodzi, że 10% wystarczy do dowolnego rzeczywistego zastosowania.

Oddziel również wynik według powierzchni od układu elementów. Proste dzielenie pól nie uwzględnia automatycznie wszystkich kształtów, wycięć i ograniczeń. Jeśli projekt przewiduje pokazanie ułożenia na modelu 3D, wykorzystaj te same dane i pokaż relację między liczbą a widokiem. Sam efekt przestrzenny nie zmienia użytej reguły obliczenia.

Zapisz również kolejność zaokrągleń. Jeśli kalkulator najpierw skraca powierzchnię, a dopiero potem liczy elementy, może otrzymać inny wynik niż przy zachowaniu pełnej wartości do ostatniego kroku. W przykładzie 7,57 m² podzielone przez 0,09 m² daje ponad 84 elementy. Potrzeba więc 85 całych elementów, a przy paczkach po sześć: 15 paczek, czyli 90 sztuk.

Gdyby wejście wcześniej skrócić do 7,56 m², dzielenie dałoby dokładnie 84 elementy i 14 paczek. Różnica w prezentowanej powierzchni wygląda niewinnie, lecz zmienia wynik zakupu o pełne opakowanie. To przykład znaczenia reguły, nie zalecenie konkretnej dokładności pomiaru. Osoba odpowiedzialna za obliczenie powinna wskazać, na którym etapie zaokrąglenie jest uzasadnione.

Przy odbiorze porównaj wartości użyte w obliczeniu z wartościami pokazanymi człowiekowi. Jeżeli dla czytelności ukrywasz część cyfr, nie zostawiaj wrażenia, że wynik został wyliczony z innego wejścia. Można pokazać krótszą wartość i udostępnić wyjaśnienie precyzji. Potrzebna jest jednak jedna jawna reguła, którą redakcja oraz wdrożenie potrafią tak samo opisać.

Nie pokazuj większej dokładności, niż wynika z danych. Kilka miejsc po przecinku może wyglądać naukowo, ale odbiorca nadal mógł podać pomiar orientacyjny. Ustal potrzebną precyzję z osobą odpowiadającą za regułę. Dla liczby całych paczek ważniejsze jest czytelne zaokrąglenie niż ciąg cyfr, których nie da się zamówić.

Pozwól poprawić jedną liczbę bez zaczynania od nowa

Podsumowanie powinno pokazywać istotne dane, na których oparto wynik. Dzięki temu klient może zauważyć pomyłkę w szerokości bez cofania się przez cały formularz. Nie musi to być długa tabela. Wystarczy czytelny zapis wartości i możliwość przejścia do konkretnej poprawki. Po zmianie pokaż nowy wynik wraz z aktualnymi założeniami.

GOV.UK we wzorcu sprawdzania odpowiedzi pokazuje podsumowanie i odnośniki pozwalające zmienić wskazaną sekcję, zachowując wcześniejsze dane. To użyteczny wzorzec powrotu. W kalkulatorze trzeba dodatkowo zadbać, żeby korekta przeliczyła właściwą odpowiedź i nie pozostawiła starej liczby obok nowego wejścia.

Jeśli umożliwiasz porównanie dwóch scenariuszy, nazwij ich różnice. Klient może chcieć zobaczyć wynik dla większej powierzchni albo innego pakowania. Zachowaj punkt odniesienia i wskaż zmienioną daną. Dwie liczby bez opisanych założeń nie tworzą porównania, nawet jeśli zostały ustawione w równych kartach z efektowną strzałką między nimi.

Przy małym ekranie pilnuj relacji między etykietą a wartością. Zasady czytelnego porównania na telefonie pomagają zachować znaczenie, kiedy układ nie mieści się w jednym wierszu. Oddziel wejście od wyniku oraz wynik roboczy od przyjętego, jeżeli kalkulator korzysta z osobnego przycisku obliczania.

Wynik może być potrzebny poza stroną: w notatce, rozmowie z obsługą lub późniejszym porównaniu. Jeśli oferujesz kopiowanie, zabierz z liczbą również jednostkę i podstawowe wejścia. Samo „14” traci sens natychmiast po wklejeniu do wiadomości. Krótkie podsumowanie może podać 14 paczek po sześć sztuk dla wskazanej powierzchni, bez kopiowania całej strony.

Przy zapisie wyniku zachowaj istotne założenia. Zmiana wielkości opakowania albo reguły dodatku może sprawić, że wcześniejsze oszacowanie da się odtworzyć tylko na podstawie starszej wersji. Nie trzeba pokazywać odbiorcy historii rozwoju aplikacji. Wystarczy zrozumiałe oznaczenie tego, według jakich danych otrzymał zapisany wynik i czy przed zamówieniem trzeba go ponownie przeliczyć.

Jeżeli dane wejściowe mają być zachowane po powrocie, powiedz, co wróci do formularza. Inna osoba może korzystać z tego samego urządzenia, a klient może rozpoczynać nowe zadanie o zupełnie innym rozmiarze. Widoczne wartości oraz łatwy reset pomagają zauważyć ten stan. Nie traktuj dawnych pomiarów jak neutralnych ustawień, których użytkownik nie musi sprawdzać. Jeśli kalkulator jest częścią dłuższego zgłoszenia, zaplanuj zapis i powrót do właściwego etapu formularza, z rozpoznawalnymi danymi poprzedniego obliczenia.

Sprawdź również odbiór wyniku bez polegania na samym układzie wizualnym. Osoba korzystająca z odczytu treści powinna rozpoznać nazwę wartości, jednostkę oraz to, czy pokazano już pełny wynik. Samo powiększenie cyfry lub zmiana jej koloru nie daje tej informacji w każdym sposobie korzystania ze strony.

Jeżeli liczba odświeża się automatycznie, prześledź moment przekazania zmiany. Nie przerywaj wpisywania kolejnych cyfr serią komunikatów o częściowym wyniku. Ustal, kiedy obliczenie jest gotowe do odczytania i jak użytkownik może do niego wrócić po poprawce danych.

Ostatni przycisk nie może zmieniać charakteru wyniku

„Oblicz”, „dodaj do koszyka” i „wyślij zapytanie” wykonują różne zadania. Jeśli kalkulator jest informacyjny, pokaż dalszy krok odpowiedni do tej roli. Nie sugeruj przyjęcia zamówienia przez samo wyświetlenie szacunku. Jeśli wynik zasila koszyk, potrzebna jest zgodność produktu, ilości i aktualnych warunków, którą trzeba sprawdzić po stronie sklepu.

Jeżeli dodajesz kwotę, dopasuj ją do ustalonej prezentacji cennika. Pokaż, czy cena dotyczy jednej sztuki, pełnej paczki czy całej obliczonej ilości. Zmiana pakowania powinna zmienić właściwą podstawę obliczenia. W podsumowaniu nazwij elementy wliczone w kwotę i te, które wymagają osobnej decyzji, aby czytelnik mógł sprawdzić wynik bez odgadywania znaczenia ceny.

Sprawdź kilka przypadków z ręcznie policzoną odpowiedzią. Uwzględnij pełną paczkę, wynik tuż ponad jej wielokrotnością, puste pole i zmianę jednostki. Następnie obejrzyj stronę jak osoba, która nie zna wzoru. Sprawdzasz jednocześnie arytmetykę i rozumienie wyniku. Samo potwierdzenie, że przycisk reaguje, nie obejmuje żadnego z tych pytań.

W Aeneia Design łączymy treść i interakcję w uzgodnionym zakresie strony. Na rozmowę o kalkulatorze przynieś wzór, przykłady wejść oraz poprawne wyniki. Dzięki temu liczba 14 przestanie wyglądać jak zagadka. Będzie wiadomo, czego dotyczy i co można z nią zrobić dalej.