Przejdź do treści
AENEIA SIGNAL
Design / Signal

Tabela porównawcza usług na telefonie: jak zachować sens bez lupy

Porównaj warianty usług czytelnie także na telefonie. Dobór kryteriów, nagłówki, przewijanie, karty oraz próby z długą treścią i powiększonym tekstem.

Fotografia koncepcyjna: kobieta w jasnej marynarce otwiera małą kamienną komorę przy opalowej lampie.
W tym artykule

Tabela mieści się w telefonie. Tylko sens porównania został trzy ekrany wyżej, razem z nagłówkiem kolumny. Przy zestawieniu usług odbiorca powinien móc sprawdzić konkretny warunek: kto przygotowuje treść, co obejmuje wariant i kto zatwierdza wynik. Jeśli musi zapamiętywać legendę albo rozszyfrowywać znaczki, układ nie pomaga. Zobacz, jak zachować znaczenie danych, zamiast jedynie odchudzić tabelę do szerokości ekranu.

Najpierw wybierz kryteria, które odróżniają warianty. Dopiero potem zdecyduj, czy potrzebujesz tabeli z przewijaniem, osobnych kart czy krótkiej listy różnic. Nie ma jednego układu dobrego dla każdej liczby usług. Poniżej przejdziemy przez projekt porównania na przykładzie hipotetycznej oferty, bez fikcyjnych wyników sprzedaży i bez upychania wszystkich warunków w jednym rzędzie.

Zacznij od decyzji klienta, nie od listy możliwości

Wyobraźmy sobie studio oferujące konsultację, projekt oraz projekt z wdrożeniem. Klient nie potrzebuje informacji, że we wszystkich trzech wariantach firma jest profesjonalna. Potrzebuje wiedzieć, jaki rezultat otrzyma, co będzie musiał wykonać sam i jakiego zaangażowania wymaga współpraca. To są kandydaci na osie porównania. Takie kryteria warto oprzeć na rzeczywistych czynnościach i czasie klienta, zamiast porównywać samo hasło o łatwej współpracy.

Przygotuj osobno elementy wspólne i różnice. Wspólne zasady można objaśnić przed zestawieniem. Powielanie ich w każdej kolumnie wydłuża ekran, a najważniejsze różnice giną między kolejnymi potwierdzeniami. Zostaw w porównaniu te cechy, które rzeczywiście wpływają na wybór lub wymagają sprawdzenia przed zamówieniem.

Jeśli nie umiesz opisać różnicy prostym zdaniem, problem może tkwić w samej ofercie. „Rozszerzony standard jakości” trudno zestawić uczciwie z „podwyższonym standardem jakości”. Lepiej wskazać zakres: przygotowanie tekstów, liczba typów widoków, konfiguracja systemu publikacji i sposób przekazania dokumentacji. Uporządkowanie tego tematu łączy się z budową strony usługi B2B.

Dobrze postawione pytanie kontrolne brzmi: jaką decyzję zmieni ten wiersz? Jeżeli żadną, przenieś informację do wspólnego opisu albo usuń. Porównanie ma pomóc wybrać zakres, a nie wykazać, że najbardziej rozbudowana kolumna posiada najwięcej atramentu.

Nazwij kryteria tak, żeby wartości miały sens

Nagłówek „Treści” jest pojemny, ale nie rozstrzyga, czy chodzi o napisanie tekstów, ich korektę, wprowadzenie do systemu czy liczbę podstron. Rozbij go na odpowiednie kryteria albo użyj precyzyjniejszej nazwy. Samo „Tak” ma sens dopiero wtedy, gdy wiadomo, na jakie pytanie odpowiada. Jeśli podobne zestawienia mają powstawać z katalogu, przygotuj model treści z osobnymi polami i słownikami, zamiast wydobywać znaczenie z dowolnego opisu przy każdym porównaniu.

W hipotetycznej ofercie „Wprowadzenie dostarczonych tekstów” i „Opracowanie tekstów od podstaw” powinny być odrębnymi pozycjami. Klient może nie rozróżniać tych prac zawodowo, lecz odczuje różnicę, gdy dostanie prośbę o napisanie całej strony. Zestawienie powinno uprzedzać takie nieporozumienie zamiast ozdabiać je symbolem zaznaczenia.

Nie mieszaj w jednej osi czynności, obietnic i ocen. „Analityka”, „Pełne bezpieczeństwo” oraz „Najwyższa jakość” nie są porównywalnymi elementami zakresu. Każdy istotny punkt powinien mieć opis możliwy do potwierdzenia: co zostanie wykonane, w jakich granicach i jak będzie odbierane.

Przy cenach oraz widełkach zaznacz, którego zakresu dotyczą. Oznaczenie „od” nie usuwa potrzeby wyjaśnienia podstawy. Więcej wariantów takiej prezentacji omawia cennik usług B2B na stronie. Najpierw uzgodnij treść porównania z ofertą handlową, a dopiero potem dopracuj jej skróty wizualne.

Wybierz układ według tego, co trzeba porównać jednocześnie

Tabela jest przydatna, gdy odbiorca zestawia tę samą cechę między kilkoma wariantami. Karty sprawdzają się, gdy każdy wariant wymaga krótkiego, samodzielnego opisu. Lista różnic wystarczy, jeśli wybór zależy od dwóch lub trzech punktów. Warto przygotować proste szkice tych układów z prawdziwą treścią i sprawdzić to samo zadanie na każdym.

Na przykład poproś osobę testującą, żeby znalazła wariant obejmujący wdrożenie, ale pozostawiający przygotowanie tekstów po jej stronie. Następnie zapytaj, kto będzie prowadził późniejsze aktualizacje. Szybkie odnalezienie pierwszej odpowiedzi nie wystarczy, jeżeli układ utrudnia zrozumienie drugiej, równie istotnej granicy zakresu.

Nie zamieniaj tabeli automatycznie w karty wyłącznie po to, żeby usunąć poziome przewijanie. Przy wielu kryteriach klient musi wtedy pamiętać wartości z wcześniejszych kart. Uporządkowany, przewijany fragment może być czytelniejszy niż bardzo długa lista trzech prawie identycznych opisów. Dobór zależy od rzeczywistego zadania, nie od estetycznej niechęci do paska przewijania.

Jeżeli proponujesz przełącznik wybierający dwa warianty do porównania, sprawdź jego koszt obsługi. Taki mechanizm ma sens przy większym katalogu. Dla trzech prostych usług może jedynie zamienić bezpośrednią odpowiedź w dodatkową pracę przed odpowiedzią.

Zachowaj relacje danych w rzeczywistej strukturze

Tabela na stronie nie powinna być tylko siatką wizualną. Poradnik W3C dotyczący tabel wyjaśnia potrzebę oznaczenia nagłówków oraz powiązania ich z komórkami danych. Dzięki temu osoba korzystająca z technologii asystującej może rozpoznać, którego wariantu i kryterium dotyczy odczytywana wartość.

W specyfikacji dla wykonawcy zapisz więc nie tylko kolory i szerokości, ale również nazwy osi oraz relacje między nimi. Prosta tabela z nagłówkami wierszy i kolumn jest łatwiejsza do zrozumienia niż układ z wieloma scalonymi komórkami. Jeśli projekt wymaga kilku poziomów nagłówków, sprawdź, czy ta złożoność pomaga klientowi, czy tylko odwzorowuje wewnętrzną strukturę firmy.

Uważaj przy mobilnym przestawianiu elementów. Zmiana wyglądu nie powinna zgubić informacji o tym, do czego należy dana wartość. Osobna karta może potrzebować powtórzenia nazwy kryterium, nawet jeśli na szerokim ekranie występuje ona tylko raz. Nie zakładaj, że kolejność wizualna i kolejność odczytu zawsze pozostaną takie same.

Te próby wykonuj razem z oceną dostępności strony firmowej. Działanie jednego porównania nie potwierdza zgodności całego serwisu, ale pozwala usunąć konkretną przeszkodę w podejmowaniu decyzji. Powtórz próbę także po zmianie treści, bo dłuższa nazwa lub nowy warunek mogą ujawnić problem, którego nie było w pierwszym zestawie danych. Rozpoznawalna relacja między nagłówkiem i wartością jest tutaj równie ważna jak wyraźna czcionka.

Drewniany grzebień z metalowymi zębami i naprawą z porcelany na stole rzemieślniczym.
Fotografia koncepcyjna AeneiaNic nie jest odpadem

Jeśli tabela się przewija, pokaż to bez zagadek

Przewijanie fragmentu w poziomie może być uzasadnione. Objaśnienie kryterium Reflow w WCAG 2.2 przewiduje wyjątek dla treści wymagających układu dwuwymiarowego, w tym tabel danych. Nie oznacza to jednak dowolności dla całej strony ani zwolnienia z czytelności poszczególnych komórek.

W praktyce warto wyraźnie oddzielić przewijany obszar od reszty strony i pokazać, że dalej istnieją kolejne kolumny. Można wykorzystać widoczną część następnej kolumny oraz krótką wskazówkę. Nie polegaj wyłącznie na ledwo zauważalnym cieniu. Sprawdź także obsługę klawiaturą i to, czy użytkownik potrafi opuścić ten fragment bez szukania sposobu ucieczki.

Przyklejona pierwsza kolumna może pomagać zachować kontekst, ale na małym ekranie zabiera znaczną część szerokości. Wypróbuj najdłuższą nazwę kryterium i powiększony tekst. Jeżeli na wartości zostaje wąski pasek, mechanizm rozwiązuje jeden problem, tworząc następny. Czasem lepsza będzie krótsza nazwa z jasnym objaśnieniem nad tabelą.

Nie pomniejszaj wszystkich liter do rozmiaru przypisu. To pozorna oszczędność miejsca okupiona wysiłkiem czytelnika. Zasady skali i czytelności opisuje typografia strony premium. Wrażenie jakości wynika również z tego, że klient nie musi wykonywać gestu szczypania przy każdej odpowiedzi.

Zastąp samotne symbole informacją

Ptaszek i kreska wyglądają zwięźle, ale kreska może oznaczać brak, nie dotyczy, nie ustalono albo opcję dodatkowo płatną. To cztery różne sytuacje biznesowe. Uzgodnij jeden słownik i pokaż go tam, gdzie czytelnik rzeczywiście z niego skorzysta. W ważnych pozycjach zwykłe „Nie obejmuje” bywa lepsze niż elegancka niejednoznaczność.

Podobnie z kolorami. Wyróżnienie polecanego wariantu powinno mieć wyjaśnienie: dla kogo jest odpowiedni i w jakiej sytuacji. Najdroższa kolumna nie staje się najlepszą tylko dlatego, że otrzymała złote tło. Jeśli rekomendacja dotyczy określonego profilu klienta, nazwij go, zamiast sugerować uniwersalny wybór.

Wyjaśnienia nie powinny wymagać wskazywania myszą małej ikonki. Na telefonie taki mechanizm może być niewygodny, a dla klawiatury niedostępny. Istotny warunek umieść w treści albo zapewnij zwykłą, dostępną kontrolkę rozwijania. Szczególnie dotyczy to limitów, obowiązków klienta i kosztów dodatkowych.

Przygotuj osobną próbę dla osoby, która czyta tylko nazwy wariantów i wartości. Czy rozumie różnicę między „Opcjonalnie”, „Po uzgodnieniu” i „W zakresie”? Jeżeli nie, nie poprawiaj samej legendy. Być może usługi wymagają jaśniejszego określenia granic jeszcze przed publikacją.

Zderz projekt z treścią, która nie współpracuje

Do testu wstaw długą nazwę usługi, kilkuzdaniowy warunek oraz brak wartości w jednej pozycji. Dodaj inną wersję językową, jeśli serwis ją przewiduje. To nie są złośliwe przypadki wymyślone dla sportu. Oferta zmienia się po publikacji, a projekt powinien wytrzymać coś więcej niż idealny zestaw krótkich słów.

Sprawdź również zmianę liczby wariantów. Co stanie się po wycofaniu jednej usługi? Czy edytor może zmienić kolejność bez ręcznego poprawiania całego układu? Czy opis wspólny nadal pasuje do wszystkich kolumn? Odpowiedzi wpływają na sposób przygotowania danych i pracę redakcji, a nie tylko na jednorazowy wygląd.

Jeśli klient będzie pobierał zestawienie, zaplanuj wersję do druku albo właściwie przygotowany plik. Nie wystarczy zdjęcie tabeli. Wyjaśnienie wyboru formatu znajdziesz w porównaniu PDF i zwykłej strony. Warunki nie powinny zniknąć tylko dlatego, że przestały mieścić się w kadrze zrzutu ekranu.

Połącz porównanie z następnym krokiem bez ukrytej zmiany zakresu

Przyciski pod wariantami powinny jasno mówić, co nastąpi: przejście do opisu, rozpoczęcie zapytania czy wybór zakresu do rozmowy. „Wybieram” może sugerować złożenie zamówienia, choć formularz dopiero zbiera wstępne dane. Dopasuj tekst do rzeczywistego skutku. Jeżeli cena wymaga potwierdzenia, nie twórz wrażenia, że kliknięcie zamyka warunki współpracy.

W formularzu zachowaj kontekst wybranego wariantu, jeśli serwis ma taką możliwość. Klient nie powinien ponownie szukać jego nazwy ani odtwarzać listy zaznaczonych opcji. Jednocześnie pokaż mu, co zostało przekazane do zapytania i jak to zmienić. Automatyczne wypełnienie ukrytego pola nie pomoże, jeśli pracownik później odczyta inny zakres niż ten, który odbiorca pamięta z tabeli.

Własne ćwiczenie możesz przeprowadzić na dwóch scenariuszach. W pierwszym klient zna potrzebny wariant i chce tylko zapytać o dostępność. W drugim nie wie jeszcze, czy potrzebuje wdrożenia, więc chce omówić wybór. Czy obie osoby mają naturalną drogę dalej? Jeśli tabela wymaga od drugiej zdecydowanego wyboru przed kontaktem, może tworzyć pozorną pewność zamiast pomagać podjąć decyzję.

Zachowaj możliwość zapytania o zakres spoza zestawienia, jeżeli firma rzeczywiście go rozważa. Nie każ odbiorcy wybierać przypadkowej kolumny tylko po to, żeby otworzyć rozmowę. Jasna opcja „Pomóżcie mi dobrać zakres” może być uczciwsza od kolejnego uniwersalnego pakietu. Zasady takiej kontynuacji opisuje formularz kontaktowy strony B2B.

Podczas utrzymania porównuj również wiadomość otrzymaną przez zespół z aktualnym opisem wariantu. Nazwa w formularzu może pozostać stara po redakcyjnej zmianie tabeli. Dodaj sprawdzenie tej zależności do zadania publikacyjnego i powtórz próbę po aktualizacji. Odbiorca widzi jedną ofertę; wewnętrzny podział na treść, formularz i powiadomienie nie powinien zmieniać jej znaczenia.

Odbierz odpowiedzi na pytania, które miały ułatwić wybór

Przed publikacją wybierz kilka realnych pytań ofertowych i poproś o odnalezienie odpowiedzi na telefonie. Zapisz nie tylko czas, lecz także pomyłki: wskazanie niewłaściwego wariantu, przeoczenie warunku lub mylne uznanie opcji za element ceny. To materiał do poprawienia konkretnej informacji, a nie ranking zręczności osób testujących.

Do odbioru strony internetowej dołącz widok przy powiększeniu tekstu, próbę klawiatury i porównanie z aktualną ofertą handlową. Za treść powinien odpowiadać właściciel usługi. Projektant może uporządkować warunki, ale nie powinien samodzielnie rozstrzygać, które zobowiązania firma bierze na siebie.

Jeśli chcesz uporządkować warianty oraz ich prezentację, zobacz zakres Aeneia Design.

Aeneia / Redakcja Aeneia

Tekst redakcyjny. Linki do źródeł znajdziesz w treści.

Źródła sprawdzone: .

O Aeneia
Aeneia / Initium

Od wiedzy do decyzji

Opowiedz nam, co chcesz uporządkować. Ustalimy, od czego zacząć.

Przejdź do kontaktu