Strony restauracji: dostępna nawigacja, udane zamówienie!

Nawigacja po stronie restauracji, zwłaszcza gdy chce się szybko zaspokoić głód, powinna być płynnym, przyjemnym i bezwysiłkowym doświadczeniem. Niestety nie zawsze tak bywa, a niektóre praktyki mogą natychmiast wywołać frustrację. Głównym celem jest umożliwienie odwiedzającym szybkie i łatwe znalezienie poszukiwanej informacji lub produktu, co jest kluczową różnicą wynikającą z obserwacji interakcji.

1. Punkty, które nie działają: frustracja klienta

Te wadliwe elementy są prawdziwymi źródłami frustracji dla klienta, wpływając bezpośrednio na jej zdolność do interakcji z oferowaną usługą.

A. Wyszukiwanie zaawansowane

Jednym z najczęściej spotykanych problemów na stronach restauracji jest trudność w szybko dotrzeć do głównej treści, zaczynając od karty dań. To, co powinno być prostą czynnością, jak przeglądanie menu czy złożenie zamówienia, czasem zamienia się w prawdziwą przeprawę, zwłaszcza dla użytkowników mało obeznanych z zasadami działania internetu lub osób z niepełnosprawnościami.

Ta złożoność zazwyczaj wynika z niezorganizowanego lub mało czytelnego menu nawigacyjnego. Nagłówki bywają zbyt niejednoznaczne ("Nasze produkty", "Odkryj", "Eksploruj") lub rozproszone w kilku podmenu, co zmusza użytkownika do zgadywania, klikania na ślepo lub rezygnacji. Dochodzi do tego używanie interaktywnych elementów o niskiej dostępności, takich jak rozwijane menu niedostępne za pomocą klawiatury czy elementy dynamiczne nierozpoznawane przez czytniki ekranu.

Brak jasności jest tym bardziej problematyczny, że dotyczy krytycznego momentu w ścieżce użytkownika: poszukiwanie kluczowej informacji. Jeśli karta (menu) lub przycisk zamówienia nie są natychmiast widoczne lub zrozumiałe, powoduje to niemal natychmiastową frustrację. A ta frustracja może mieć bezpośrednie konsekwencje użytkownik opuszcza stronę i idzie zobaczyć ofertę konkurencji, która jest bardziej dostępna i czytelna.

Krótko mówiąc, źle przemyślane menu nawigacyjne to nie tylko problem użyteczności, staje się hamulcem sprzedaży.

B. Menu niedostępne bezpośrednio na stronie

Do najbardziej niezrozumiałych błędów należy całkowity brak karty dań na stronie internetowej restauracji. W takim przypadku użytkownik, choć chętny do zamówienia, napotyka impas: brak informacji o oferowanych daniach, brak bezpośredniego dostępu do oferty, nic poza niejasnym odsyłaczem do wpisu w mediach społecznościowych.

Takie podejście jest nieintuicyjne w erze cyfrowej. Strona internetowa powinna być głównym i najbardziej wiarygodnym źródłem informacji, zwłaszcza w kwestii tak podstawowej jak karta dań. Skazywanie jej na konsultację gdzie indziej — w efemerycznej relacji na Instagramie, trudno czytelnym poście na Facebooku czy w niedostępnym pliku PDF — oznacza proszenie użytkownika o niepotrzebny i nieuzasadniony wysiłek.

Dla osób z niepełnosprawnościami może to szybko stać się nie do pokonania : treści publikowane w mediach społecznościowych nie zawsze są dostępne dla czytników ekranu, zdjęcia menu nie mają opisów alternatywnych, a platformy zewnętrzne nie gwarantują ani ergonomii, ani kompatybilności z technologiami wspomagającymi.

Poza kwestią dostępności, brak informacji na stronie powoduje powszechne irytacje. Każdy klient, bez względu na profil, słusznie oczekuje znalezienia podstawowych informacji tam, gdzie powinien ich szukać: na oficjalnej stronie. Nieumieszczenie karty oznacza złamanie tej logiki i ryzyko utraty klienta już w pierwszych sekundach przeglądania.

C. Konsekwencje trudności w nawigacji

Te „złe praktyki” w zakresie nawigacji mają bezpośrednie i negatywne konsekwencje dla użytkownika, a w konsekwencji dla działalności restauracji:

• Generują frustrację użytkownika.

• One wymagają dodatkowego wysiłku od klienta aby uzyskać to, czego szuka.

• Wobec tych przeszkód klient nie składa zamówienia i zwraca się ku konkurencji, co przekłada się na bezpośrednią utratę przychodów.

Szerzej rzecz biorąc, trudności z nawigacją stanowią punkt tarcia, który wpływa nie tylko na satysfakcję klienta, ale też na wiarygodność marki i pozytywne sygnały wysyłane do wyszukiwarek. Innymi słowy, zła jakość doświadczenia użytkownika może zaszkodzić reputacji restauracji i jej widoczności online.

2. Co działa: prostota i dostępność dla wszystkich

Na szczęście są dobre przykłady, które rozumieją znaczenie przejrzystej i jednoznacznej nawigacji. Na przykład wezmę stronę pizzerii, do której mam zwyczaj zamawiać.

A. Jasna i przejrzysta nawigacja

Ta pizzeria wdrożyła bardzo skuteczne podejście: umieściła bezpośrednio w głównym menu dwa kluczowe przyciski. Jeden nosi tytuł „Zamów online”, a drugi „Zamów telefonicznie”. 

Jaki jest cel tego pozornie prostego rozwiązania?

1. Natychmiastowa oszczędność czasu : Użytkownicy znajdują natychmiast to, czego szukają, bez konieczności zgadywania, gdzie kliknąć lub przeglądania wielu stron.

2. Zwiększona dostępność : Kluczowy punkt często niedoceniany — dla osób niedowidzących lub niewidomych korzystających z czytników ekranu i wyszukiwania głosowego, czytelność tych przycisków ma ogromne znaczenie. Jasny i precyzyjny opis wskazujący, dokąd prowadzi przycisk, znacznie ułatwia wyszukiwanie głosowe. Przyciski typu „kliknij tutaj” są mało przydatne dla tych technologii, w przeciwieństwie do „poznaj nasze menu”. To ogromny krok w kierunku cyfrowej inkluzji.

B. Zdjęcia i składniki dania

Poza samą nawigacją, doświadczenie użytkownika i dostępność dotyczą także sposobu prezentacji treści. Na stronie, którą analizowałem, zauważyłem elementy warte podkreślenia:

1. Opis składników obok zdjęć : Bardzo pozytywnym aspektem jest umieszczanie opisów składników obok każdego zdjęcia dania. Pozwala to użytkownikowi dokładnie poznać skład, co jest wyjątkowo przydatne dla osób z ograniczeniami dietetycznymi, alergiami lub po prostu chcących dokonać świadomego wyboru. To świetny przykład przejrzystości i troski o klienta.

2. Zarządzanie obrazami Strona z listą pizz opiera się na dobrej logice. Każdy obrazek ma pełny opis tekstowy składników, co sprawia, że zdjęcia nie są niezbędne do zrozumienia treści. Pełnią one jedynie funkcję ilustracyjną i można je traktować jako dekoracyjne. Jednak aby strona była w pełni dostępna, te obrazy powinny być wyraźnie oznaczone jako dekoracyjne dla technologii wspomagających, poprzez przypisanie im pustego atrybutu alt (alt=""). Jeśli natomiast uznasz, że obraz nie jest tylko dekoracją, możesz wypełnić atrybut alt tekstem „[Nazwa pizzy] z [składnikami]”.

Tymczasem na stronie tej pizzerii żaden atrybut alt nie występuje, co może spowodować niepożądaną lekturę przez czytniki ekranu (nazwa pliku lub ścieżka techniczna). Nie wystarczy więc nic nie wstawiać: brak atrybutu jest interpretowany inaczej niż pusty atrybut. Ten aspekt warto poprawić, aby w pełni przestrzegać dobrych praktyk dostępności.

3. Teraz czas na zalecenia 

Skoro przeanalizowaliśmy, co działa, a co nie w zakresie dostępności na stronach restauracji, czas przekształcić te obserwacje w konkretne działania.

A. Ogólne zalecenia dla optymalnej nawigacji

Aby zapewnić płynne i dostępne doświadczenie użytkownika, oto kluczowe działania do wdrożenia na stronie Twojej restauracji:

• Uczyń mapę restauracji łatwo dostępną Link do twojego menu powinien być widoczny i jasno oznaczony już na stronie głównej lub w głównym menu nawigacyjnym.

• Używaj jednoznacznych etykiet przycisków Zamiast ogólnikowych określeń wybierz jasne sformułowania, które precyzyjnie wskazują działanie lub cel kliknięcia. Na przykład: Zobacz kartę, Zamów online, Zarezerwuj stolik, Skontaktuj się z nami to skuteczne etykiety.

• Ułatw główne działania Jeśli zamawianie telefoniczne jest popularne, przycisk Zamów telefonicznie z wyraźnie podanym numerem jest bardzo przydatny.

• Pomyśl o dostępności głosowej Przyciski z precyzyjnymi i opisowymi etykietami są nie tylko przydatne dla wszystkich użytkowników, ale niezbędne dla osób korzystających z asystentów głosowych lub czytników ekranu. Dzięki temu twoja strona będzie użyteczna dla znacznie szerszej publiczności.

• Unikaj rozproszonych informacji Wszystkie ważne informacje (menu, godziny otwarcia, kontakt, adres) powinny być scentralizowane i łatwe do znalezienia na twojej stronie, bez zmuszania użytkownika do korzystania z innych platform, takich jak media społecznościowe.

B. Szczegółowe zalecenia dotyczące obrazów

Obrazy odgrywają zasadniczą rolę w komunikacji wizualnej w sieci. Jednak dla wielu użytkowników, w szczególności korzystających z czytnika ekranu lub mających zaburzenia poznawcze czy wzrokowe, mogą stać się przeszkodą, jeśli nie są prawidłowo zaimplementowane. 

Każdy obraz powinien być opatrzony tekstem alternatywnym (alt), który krótko opisuje jego zawartość lub funkcję.

• W przypadku obrazu informacyjnego, atrybut alt powinien przekazywać informację zawartą na obrazie.

• W przypadku obraz wyłącznie dekoracyjnyużyj pustego atrybutu alt (alt="") i wyłącz ją z nawigacji za pomocą role="presentation" lub aria-hidden="true".

Obrazy nie powinny być jedynym kanałem informacji. Jeśli ważna informacja jest przekazywana za pomocą obrazu (wykres, piktogram, mapa itp.):

• Podaj opis tekstowy w pobliżu

• Użyj aria-describedby aby powiązać z nim dłuższy opis w razie potrzeby.

W przypadku obrazów złożonych (schematy, infografiki, wykresy):

• Umieść wyjaśniający podpis pod obrazem.

• Podaj równoważny tekst lub szczegółowe streszczenie, umieszczone obok lub powiązane przez ARIA.

Gdy używasz obrazu jako linku lub przycisku interaktywnego:

• Atrybut alt obrazka powinien jasno wskazywać akcję, która zostanie wywołana lub miejsce, do którego prowadzi link, zamiast jedynie opisywać sam obraz lub jego nazwę pliku. Na przykład dla przycisku pobierania alt powinien brzmieć „Pobierz PDF broszury”.

Podsumowanie: co zawsze należy sprawdzić

Rodzaj obrazu	Czy atrybut alt jest wymagany?	Zawartość atrybutu alt
Obraz informacyjny	Tak	Opisać, co przedstawia obraz
Obraz dekoracyjny	Tak (alt="")	Puste, aby był ignorowany przez czytniki ekranu
Przycisk / link	Tak	Wskazać działanie lub cel
Logo	Tak	Nazwa marki lub firmy
Złożona grafika	Tak + opis	Streszczenie lub równoważny osobny tekst (podpis, powiązany opis)

Dostępność obrazów jest często zaniedbywana, a tymczasem stanowi istotny element inkluzywnej strony internetowej. Stosując te dobre praktyki, zapewniasz lepsze doświadczenie wszystkim użytkownikom, jednocześnie przestrzegając prawnych obowiązków dotyczących dostępności cyfrowej.

C. Zalecenia: dostępne formularze kontaktowe

Jeśli chodzi o formularze kontaktowe, ich dostępność jest kluczowa, aby zapewnić, że wszyscy użytkownicy, w tym osoby z niepełnosprawnościami, mogą wchodzić w interakcje i korzystać z podstawowych usług. Dobrze zaprojektowany formularz kontaktowy jest łatwy w użyciu dla każdego.

Oto kluczowe punkty do przestrzegania dla dostępnego formularza kontaktowego, opierając się na standardach WCAG i RGAA:

• Wyraźne etykietowanie pól : Każde pole (takie jak imię, adres e-mail, wiadomość) powinno mieć widoczną i jednoznaczną etykietę opisującą jego funkcję, a ta etykieta powinna być powiązana z polem przy pomocy znacznika <label> z atrybutem for. Kluczowe jest unikanie polegania wyłącznie na placeholderach, ponieważ mogą być niewidoczne dla technologii wspomagających lub zniknąć podczas wpisywania.

• Płynna nawigacja klawiaturą : Użytkownik powinien móc poruszać się po formularzu wyłącznie za pomocą klawiatury (klawisze Tab, Shift+Tab, Enter, Spacja). Wszystkie elementy interaktywne muszą być osiągalne i aktywowane bez użycia myszy.

• Komunikaty dla czytników ekranu : Dla użytkowników czytników ekranu należy dostarczyć dodatkowe opisy, na przykład używając aria-describedby do powiązania pola z komunikatem pomocy. Należy także wskazać, czy pole jest wymagane za pomocą atrybutów required i/lub aria-required="true".

• Jasne zarządzanie błędami : Jeśli podczas wprowadzania danych wystąpi błąd, powinien on być wyraźnie wskazany w pobliżu odpowiedniego pola, przy użyciu koloru połączonego z czytelnym tekstem i, jeśli to możliwe, ikoną. Komunikaty o błędach muszą być także czytelne dla czytnika ekranu, za pomocą role="alert" lub aria-live="assertive".

• Informacja zwrotna dla użytkownika po akcji : Po pomyślnym przesłaniu formularza powinien zostać wyświetlony wizualny komunikat potwierdzający i automatycznie odczytany przez czytnik ekranu, używając role="status" lub aria-live="polite".

• Dostępność mobilna i powiększanie : Formularze powinny być responsywne, czyli dostosowane do ekranów mobilnych i umożliwiać powiększanie do 200% bez utraty treści ani nakładania się elementów.

Stosując te zalecenia do wszystkich elementów strony, od menu po formularze, buduje się naprawdę inkluzywne, spójne i efektywne doświadczenie dla wszystkich użytkowników.

Bonus: captchy w formularzach

Te CAPTCHA są często używane do zabezpieczania formularzy przed robotami, ale stwarzają wiele problemów z dostępnością. To RGAA wymaga, aby te rozwiązania były dostępne dla wszystkich, w tym przez osoby korzystające z czytnika ekranu lub nie mogące używać myszy. Oto tabela podsumowująca problemy i zalecane dostępne rozwiązania.

Podsumowanie: dostępność korzystna dla wszystkich

Dostępność cyfrowa nie jest luksusem zarezerwowanym dla kilku użytkowników, lecz kluczowym narzędziem poprawiającym doświadczenie wszystkich klientów, w tym osób z niepełnosprawnościami. Dostępna strona restauracji to jaśniejsza, bardziej płynna, bardziej efektywna strona. Przykład analizowanej pizzerii pokazuje, że możliwe jest zaoferowanie intuicyjnej nawigacji i przyjemnej prezentacji wizualnej.

Przyjmując te dobre praktyki, restauracje nie tylko spełniają normy: poszerzają swoją bazę klientów, poprawiają pozycjonowanie w wyszukiwarkach i, co najważniejsze, okazują prawdziwy szacunek wszystkim użytkownikom.

Artykuł „Strony restauracji: dostępna nawigacja, udane zamówienie!” został opublikowany na stronie Abondance.