Jak zaprojektować czytelne menu cyfrowe dla restauracji

Dlaczego karta zaprojektowana na papier nie działa tak samo na ekranie

Drukowaną kartę ogląda się z bliska: można przewracać strony, zatrzymać się przy wybranej kategorii albo wrócić do wcześniejszej pozycji. Ekran stawia klienta w innej sytuacji — musi on od razu rozpoznać strukturę i znaleźć potrzebne informacje, nie trzymając menu w rękach. Problem pojawia się wtedy, gdy całą papierową kartę próbuje się przenieść na jeden ekran. Żeby wszystko zmieścić, zmniejsza się nazwy, ceny zaczynają być zbyt blisko siebie, a odstępy oddzielające kategorie znikają. W efekcie na ekranie mogą znaleźć się wszystkie informacje, a mimo to korzystanie z menu będzie trudne. Dlatego projektowanie menu cyfrowego dla restauracji nie zaczyna się od wyboru kroju pisma. Najpierw trzeba zdecydować, które informacje rzeczywiście muszą być widoczne jednocześnie. Ekran nie musi odtwarzać każdego centymetra oryginalnej karty — powinien pozwolić klientowi szybko znaleźć interesującą go kategorię, należące do niej dania i cenę każdej pozycji.

Najpierw podziel menu, dopiero potem zmniejszaj tekst

Gdy karta nie mieści się wygodnie na ekranie, pierwszym odruchem często jest zmniejszenie wszystkiego. Lepiej odwrócić tę kolejność: zanim zmniejszysz tekst, podziel informacje. Najprościej rozdzielić kartę według kategorii, które klient już zna i rozumie. W przykładzie z tego artykułu trzy ekrany wystarczą, aby stworzyć trzy wyraźne bloki: Przystawki, Dania główne i Desery. Każdy ekran może dzięki temu skupiać się na jednej części wyboru zamiast próbować pomieścić całą kartę. Taki podział ułatwia również edycję. Jeśli każdy ekran ma jasno określoną funkcję, łatwiej zauważyć, kiedy dana kategoria staje się przeładowana i wymaga innego rozłożenia treści. Odpowiednia liczba pozycji nie wynika z jednej uniwersalnej wartości — zależy od dostępnej przestrzeni, długości nazw oraz odległości, z jakiej ekran będzie oglądany. Praktyczna zasada jest prosta: jeśli dodanie nowego dania wymaga ściśnięcia całej kompozycji, problemem najprawdopodobniej nie jest rozmiar czcionki, lecz ilość informacji pokazywanych jednocześnie.

Zbuduj wyraźną hierarchię kategorii, dań i cen

Po podzieleniu treści każdy ekran potrzebuje powtarzalnej hierarchii. Klient powinien niemal od razu rozpoznać trzy poziomy: jaką kategorię ogląda, jakie dania się w niej znajdują i gdzie widoczne są ich ceny. Kategoria pełni funkcję punktu orientacyjnego i powinna wyraźnie odróżniać się od listy. Nazwy dań muszą być wystarczająco widoczne, by można było szybko przejrzeć kolejne pozycje. Ceny powinny natomiast pozostawać w stałym miejscu, aby nie trzeba było za każdym razem szukać kolejnej kwoty. Wyrównanie i odstępy są równie ważne jak rozmiar tekstu. Jeśli ceny zmieniają położenie, dania są zbyt ciasno ułożone albo każdy wiersz ma inną strukturę, czytanie wymaga większego wysiłku. Stały wzorzec pozwala przeglądać menu wzrokiem zamiast rozszyfrowywać każdy element osobno. Warto też unikać sytuacji, w której wszystkie elementy walczą o uwagę. Jeżeli kategoria, dania, ceny, zdjęcia i wyróżnienia mają taki sam ciężar wizualny, znika jasna ścieżka czytania. Hierarchia polega właśnie na określeniu, co użytkownik zauważy najpierw, a co powinno pojawić się w następnej kolejności.

Praktyczny układ: wyróżniony produkt po lewej, menu po prawej

Jednym z możliwych rozwiązań jest przeznaczenie części ekranu na wyróżniony produkt, a pozostałego miejsca na listę dań. Produkt może na przykład zajmować lewą stronę, a menu danej kategorii — prawą. Taki podział daje zdjęciu lub głównemu produktowi własną przestrzeń bez umieszczania go za tekstem i bez przerywania listy. Jednocześnie część z menu może zachować regularny układ nazw i cen. Nie jest to jedyne poprawne rozwiązanie. W zależności od formatu ekranu, liczby dań i dostępnych materiałów wizualnych wyróżniony produkt może znaleźć się w innym miejscu albo zostać całkowicie pominięty. Najważniejsze jest zachowanie funkcjonalnego podziału: element przyciągający wzrok nie powinien utrudniać korzystania z karty. Jeśli taki układ jest stosowany na kilku ekranach, warto zachować jego spójność. Gdy strefa wyróżnienia i lista zajmują podobne miejsca w Przystawkach, Daniach głównych i Deserach, klient szybko uczy się sposobu organizacji informacji.

Przykład: pełna karta na trzech ekranach

Zobaczmy, jak zastosować te zasady w przykładowej karcie restauracji. Informacje zostały rozłożone na trzech poziomych ekranach — po jednym dla każdej kategorii — z zachowaniem tej samej zasady kompozycyjnej: wyróżniony produkt oraz krótka lista dań z cenami. Pierwszy ekran prezentuje Przystawki i wyróżnia burratę z pieczonymi pomidorami za 10,90 €. Na liście znajdują się krokiety z szynką za 7,90 €, sałatka ziemniaczana po domowemu za 7,50 €, patatas bravas za 6,90 € oraz chrupiące kalmary za 9,50 €. Drugi ekran poświęcony jest Daniom głównym. Wyróżniono burgera firmowego za 13,90 €, a w menu znajdują się grillowany kurczak za 14,50 €, ryż z warzywami za 13,50 €, grillowany łosoś za 16,90 € oraz antrykot z ziemniakami za 19,50 €. Trzeci ekran przedstawia Desery. Wyróżnione miejsce zajmuje sernik za 6,50 €. Listę uzupełniają brownie czekoladowe za 6,00 €, crema catalana za 5,50 €, lody rzemieślnicze za 5,00 € oraz owoce sezonowe za 4,90 €. Wartość tego przykładu nie polega na traktowaniu takiego układu jako obowiązkowego szablonu, lecz na pokazaniu, że podział na kategorie pozwala uniknąć ściskania całej karty w jednej kompozycji.

Czego można nauczyć się z tych trzech ekranów

Przykład pokazuje kilka zasad, które można wykorzystać ponownie. Pierwsza: podział karty może zwiększyć przejrzystość bez rezygnowania z istotnych informacji. Każdy ekran ma jednoznaczną kategorię i ograniczoną liczbę wyborów, które klient może przeglądać w uporządkowany sposób. Druga zasada to spójność. Zachowanie tej samej logiki dla kategorii, listy, cen i wyróżnionego produktu ogranicza niepotrzebne różnice między ekranami. Treść się zmienia, ale sposób jej odczytywania pozostaje taki sam. Trzecia: wyróżnienie produktu wymaga miejsca. Dodanie głównego elementu nie powinno oznaczać dokładania kolejnej warstwy treści do już przeładowanej karty. Lepiej przeznaczyć dla niego jasno określoną strefę, jednocześnie chroniąc przestrzeń potrzebną do czytania menu. Na koniec czytelność trzeba oceniać na rzeczywistym ekranie, a nie tylko w edytorze. Projekt, który z bliska wydaje się przestronny, po instalacji może wyglądać zupełnie inaczej. Przed zakończeniem pracy warto sprawdzić, czy kategorie, nazwy i ceny są dobrze widoczne w typowych warunkach, w jakich klienci korzystają z menu w restauracji.

Jak aktualizować menu bez projektowania go od nowa za każdym razem

Dobry system menu ekranowego powinien działać również wtedy, gdy zmienia się karta. Jeśli wymiana jednego dania zmusza do przebudowania całej kompozycji, projekt jest zbyt mocno uzależniony od konkretnej treści, dla której został przygotowany. Rozwiązaniem jest praca na stabilnej strukturze. Kategoria, strefa dań, położenie cen i miejsce na wyróżniony produkt mogą zachować swoje funkcje, podczas gdy nazwy lub prezentowane produkty się zmieniają. Dzięki temu aktualizacja polega przede wszystkim na podmianie informacji w ramach znanej hierarchii. Pomaga również stosowanie spójnych zasad podczas edycji. Szczególnie długa nowa nazwa nie powinna być rozwiązywana poprzez zmniejszenie wyłącznie tej jednej linii do poziomu utrudniającego odczyt. Lepiej najpierw sprawdzić przestrzeń w bloku, dostępne brzmienie tekstu lub ogólny układ, zanim naruszy się spójność wizualną. Uwzględnienie aktualizacji już na etapie projektowania sprawia, że menu cyfrowe staje się systemem wielokrotnego użytku, a nie materiałem, który trzeba projektować od początku przy każdej zmianie oferty.

Tworzenie i publikowanie menu z iMediaGO

Po ustaleniu struktury kolejnym krokiem jest przeniesienie jej na ekrany w restauracji i zapewnienie możliwości bieżącej aktualizacji. iMediaGO pozwala tworzyć, aktualizować i publikować kampanie oraz menu cyfrowe na ekranach w lokalu. Praktyczną zaletą pracy ze strukturą podobną do tej z przykładu jest możliwość oddzielenia treści od organizacji: kategorie zachowują czytelną, powtarzalną logikę, a znajdujące się w nich dania można aktualizować w razie potrzeby. Cel przez cały czas pozostaje ten sam: technologia nie powinna komplikować karty, lecz pomagać prezentować informacje w uporządkowany sposób i łatwo utrzymywać je na bieżąco.

Przykładowa karta restauracji: trzy ekrany