Najczęstszy błąd przy wdrażaniu menu QR nie polega na tym, że lokal wybrał kod QR. Polega na tym, że pod tym kodem gość znajduje PDF z karty do druku — trzy megabajty, format A4, tekst wielkości mrówki i konieczność szczypania palcami przy każdej pozycji. To nie jest menu cyfrowe. To zeskanowana kartka, która przypadkiem trafiła do internetu.
Dobre menu mobilne to konkretna robota projektowa, ale nie skomplikowana. Poniżej to, co realnie ma znaczenie — po kolei, od rzeczy najważniejszej.
Czas ładowania decyduje, zanim gość cokolwiek przeczyta
Gość skanuje kod przy stoliku, nie w domu na światłowodzie. Jest na danych komórkowych, często w budynku, często w porze, gdy sieć jest obciążona.
Skala problemu jest znana. Google w materiale „The Need for Mobile Speed” (2016) podał, że 53% użytkowników mobilnych opuszcza stronę, której załadowanie trwa dłużej niż trzy sekundy. W tym samym badaniu średni czas ładowania strony mobilnej na połączeniu 3G wynosił 19 sekund. Nowszym, bardziej praktycznym punktem odniesienia jest metryka Largest Contentful Paint z zestawu Core Web Vitals: według dokumentacji Google na web.dev wynik do 2,5 sekundy uznaje się za dobry, od 2,5 do 4 sekund za wymagający poprawy, a powyżej 4 sekund za słaby — przy czym mierzy się 75. percentyl wczytań, a więc realne doświadczenie większości użytkowników, nie średnią.
Co z tego wynika dla Twojego menu:
- Zrezygnuj z PDF-a. Przeglądarka mobilna musi pobrać cały plik, zanim cokolwiek pokaże. Zwykła strona HTML wyświetla treść stopniowo.
- Nie ładuj wszystkich zdjęć naraz. Obrazy poniżej pierwszego ekranu powinny doczytywać się dopiero przy przewijaniu.
- Ogranicz to, czego gość nie potrzebuje. Animowany baner, autoodtwarzane wideo, karuzela zdjęć wnętrza i cztery skrypty analityczne to sekundy, których nikt Ci nie wybaczy przy stoliku.
- Przetestuj na starym telefonie i na danych komórkowych. Nie na swoim najnowszym urządzeniu podłączonym do Wi-Fi w biurze.
Czytelność: pisz dla oka, nie dla projektanta
Menu ogląda się przy przyciemnionym świetle, czasem po całym dniu pracy, często bez okularów. To zupełnie inne warunki niż te, w których projektant patrzył na makietę.
Trzy zasady, które załatwiają większość problemów:
- Kontrast. Wytyczne WCAG (kryterium 1.4.3, poziom AA) wymagają kontrastu co najmniej 4,5:1 dla zwykłego tekstu i 3:1 dla dużego. W3C wprost tłumaczy, skąd ta wartość: 4,5:1 kompensuje spadek wrażliwości na kontrast odpowiadający ostrości wzroku 20/40, typowej dla osób w okolicach osiemdziesiątki. Modny jasnoszary tekst na białym tle tego progu nie spełnia.
- Wielkość tekstu. Punktem wyjścia niech będzie rozmiar, przy którym telefon nie proponuje powiększenia. Jeśli gość musi rozsuwać palcami, projekt jest za mały.
- Odstępy i cele dotykowe. WCAG 2.2 wprowadziło kryterium 2.5.8 Target Size (Minimum) na poziomie AA: elementy klikalne powinny mieć co najmniej 24 na 24 piksele CSS albo odpowiedni odstęp od sąsiednich elementów. W praktyce: nie upychaj kategorii jedna pod drugą tak, żeby dało się trafić w niewłaściwą.
Struktura: gość ma znaleźć danie w dwóch ruchach
Karta papierowa ma tę przewagę, że widać ją całą naraz. Ekran telefonu pokazuje wycinek, więc nawigacja musi to nadrabiać.
- Kategorie na górze, w jednym rzędzie. Przystawki, dania główne, dla dzieci, desery, napoje, alkohole. Gość klika kategorię i od razu jest na miejscu — nie przewija czterech ekranów.
- Nie chowaj cen. Cena musi być przy nazwie dania, w tej samej linii albo bezpośrednio pod nią, w tym samym widoku. Rozwijane szczegóły, w których dopiero pojawia się kwota, irytują gościa i utrudniają wykazanie, że cennik był dostępny przed przyjęciem zamówienia.
- Krótkie opisy. Trzy do pięciu słów o tym, co realnie jest na talerzu. Gość nie czyta poezji, tylko sprawdza, czy będzie mu smakowało.
- Oznaczenia dietetyczne obok nazwy. Wegetariańskie, wegańskie, bezglutenowe, ostre — proste, konsekwentne, tekstowe (nie tylko kolorowe kropki, które nie każdy rozróżni).
- Alergeny dostępne bez szukania. To osobny, poważny temat, który omawiamy w tekście o alergenach w menu cyfrowym.
Zdjęcia: mniej, lepiej, lżej
Zdjęcie w menu ma jedno zadanie — pokazać wielkość i wygląd porcji. Nie ma budować nastroju, od tego jest sala.
Praktyczne zasady:
- Nie fotografuj wszystkiego. Piętnaście zdjęć w karcie na czterdzieści pozycji to lepszy wybór niż czterdzieści zdjęć przeciętnej jakości. Fotografuj to, co chcesz sprzedawać, i to, co wygląda dobrze naprawdę.
- Zdjęcie musi zgadzać się z talerzem. Rozjazd między zdjęciem a rzeczywistością to najprostsza droga do złej opinii w internecie i do reklamacji przy stoliku.
- Kompresuj. Zdjęcie prosto z aparatu to kilka megabajtów. Do menu wystarczy wersja o szerokości rzędu tysiąca pikseli w nowoczesnym formacie. Różnica w wadze bywa dziesięciokrotna, a na ekranie telefonu niewidoczna.
- Jednolita konwencja. To samo światło, ten sam kąt, to samo tło. Zestaw zdjęć zrobionych w różnych warunkach wygląda gorzej niż brak zdjęć.
Ostrożnie natomiast z obietnicami, że zdjęcia „podnoszą sprzedaż o trzydzieści procent”. Liczby tego typu krążą po branżowych blogach bez wskazania źródła, a część klasycznych badań o wpływie prezentacji menu na wybory gości pochodzi z laboratorium, którego kierownik miał kilkanaście publikacji wycofanych z czasopism naukowych. Co da się rzetelnie powiedzieć o wpływie menu na rachunek, opisujemy w tekście o menu cyfrowym a średnim rachunku.
Rzeczy, o których zapomina większość wdrożeń
- Menu musi działać bez aplikacji i bez logowania. Każdy ekran z prośbą o e-mail przed pokazaniem karty kosztuje Cię gości.
- Kod prowadzi wprost do menu. Nie na stronę główną, nie do wyboru lokalizacji, nie na pop-up z ciasteczkami przykrywający cały ekran.
- Informacja o dostępności. Pozycja niedostępna powinna być wyszarzona lub oznaczona, nie usunięta bez śladu — gość, który szukał konkretnego dania, ma to wiedzieć od razu.
- Kontakt i godziny. Numer telefonu klikalny, godziny otwarcia aktualne, adres z odnośnikiem do map. Menu cyfrowe jest dla wielu gości pierwszą stroną Twojego lokalu.
- Wersja do druku. Przyda się, gdy trzeba szybko odświeżyć zapas kart na sali.
Podsumowanie: konkretne działanie na najbliższy tydzień
Otwórz swoje menu na telefonie, wyłącz Wi-Fi i włącz stoper. Jeśli od skanu do czytelnych cen mija więcej niż trzy sekundy, masz jedno zadanie priorytetowe: skompresować zdjęcia i pozbyć się PDF-a. To zwykle jedno popołudnie pracy i największa pojedyncza poprawa, jaką możesz zrobić.
Warto też sprawdzić sam nośnik kodu. Jeżeli gość ma na stoliku wytartą naklejkę, żadne optymalizacje strony nie pomogą — stąd sens trwałego standu z bazą z PETG i wypukłym nadrukiem UV, z nieścieralnym kodem QR i programowalnym chipem NFC, który zniesie codzienne mycie blatu.