Przeczytaj jak zrobiłem kartę menu online dla restauracji. Prosty interfejs użytkownika upraszczający znalezienie dań na karcie menu online. Często na tego typu stronach trzeba scrollować całą listę dań i bywa to frustrujące więc uprościłem odnalezienie konkretnego dania na karcie menu online restauracji.
Strona Internetowa dla restauracji wiąże się z przedstawieniem karty menu z daniami jakie dana restauracja serwuje, pojektując stronę Internetową należy zaprojektować dobre UI czyli interfejs użytkownika nie zapominając chociażby o drobnym przemyśleniu UX czyli o doświadczeniach użytkownika. W moim przykładzie posłużę się stroną gdzie zrobiłem kartę menu online dla restauracji rozwiązując problem przewijania strony z góry do dołu w poszukiwaniu kategorii i konkretnego dania, mało tego restauracja oferowała dowóz więc personą - użytkownikiem jest osoba zamawiająca jedzenie głównie na szybko więc uproszczenie karty menu było priorytetowe. W poniższym przykładzie rozwiązałem dwa typowe problemy na tego typu kartach menu online. Pierwsze to zbyt długa ciągła lista do przewijania co frustruje użytkownika i wydłuża proces wyszukania konkretnego dania co może skutkować odrzuceniem zamówienia. Drugim bardzo częstym problemem jest nie poręczna karta menu na urządzenia przenośne co może zniechęcać do strony internetowej restauracji co też może skutkować mniejszą ilością zamówień. Jak wspomniałem wcześniej głównym użytkownikiem jest osoba zamawiająca jedzenie na szybko na dowóz więc oczywistym jest to, że korzysta ze smartfona aby przejrzeć menu restauracji. Obserwując statystyki strony po 6 miesiącach użytkowania pokazało, że 80% użytkowników przeglądało stronę restauracji na smartfonach i nie myliłem się aby dostosować kartę menu restauracji do jak najlepszych doświadczeń na urządzenia mobilne. Przed wdrożeniem przeprowadziłem testy wirtualne i na kilku urządzeniach przenośnych aby wdrożyć jedną ze słusznych rozwiązań.
Jak widać na zrzucie ekranu mobilnego na dzień dobry dostajemy listę zakładek z opisanymi kategoriami dań z dołączoną ikoną dania, która podpowiada co znajdziemy pod daną zakładką. W ten sposób niemalże prawie na całym ekranie mamy całą listę kategorii więc odnalezienie tej konkretnej zajmuje dosłownie chwilę. Dopiero po kliknięciu w daną kategorię rozwija się lista dań z danej kategorii i co najważniejsze "rozwija się lista", a nie przeładowuję na nową podstronę co skutkuje chwilą czekania na przeładowanie. Po kliknięcie w kategorię lista rozwija się natychmiast bez czekania na przeskok podstrony co prosto pisząc zwiększa dobre doświadczenia użytkownika rozwiązując problem długich poszukiwań w kartach menu online restauracji, która dodatkowo oferuję dowóz. Jest to kluczowe bo jak wspomniane wcześniej statystyki pokazały bardzo dużą ilość osób korzystających ze smartfonów. Należy w tych przypadkach pomyśleć głównie o takim typie użytkowników, a nawet zastanowić się nad zasadą projektowania mobile first gdzie w pierwszej kolejności projektuje się widok ekranów mobilnych.
Takie menu świetnie sprawdza się na urządzeniach mobilnych, ale również na desktopie więc jest to uniwersalne rozwiązanie. To ciekawy przykład interfejsu użytkownika z zastosowaniem użytecznego projektowania dla dobrych doświadczeń użytkownika oraz prostej szybkiej nawigacji. Z góry założyłem jaka persona będzie korzystać z produktu cyfrowego (menu restauracji online) - klient zamawiający na szybko jedzenie z dowozem. Zaserwowałem proste szybkie rozwiązanie aby skrócić i uprzyjemnić drogę wyszukania dania w menu. Jeśli wejdzie się na stronę główną restauracji można zrobić to dwoma lub maksymalnie czteroma ruchami.
Scenariusz nawigacji po interfejsie użytkownika w wersji mobilnej
- Strona Główna - przejście na podstronę MENU - chwila przeładowania się podstrony.
- Na ekranie pojawi się lista kategorii lecz w większości przypadków kilka dolnych kategorii będzie schowana więc drugim ruchem może być lekkie przewinięcie ekranu aby odsłonić pozostałe zakładki kategorii. Nowe kategorie mogą się pojawiać z biegiem czasu więc przewinięcie ekranu z listą kategorii jest raczej nie uniknione.
- Kolejnym ruchem jest kliknięcie w kategorię i na tym można zakończyć ponieważ dotarliśmy do kategorii lecz ostatnim czwartym ruchem może być przesunięcie listy dań w kategorii.
Ostatecznie można zamknąć się w trzech ruchach wchodząc bezpośrednio na podstronę z MENU pomijając stronę główną.
Ogólnie takie rozwiązanie można stosować przy innego typu rozwijanych kategoriach aby zapewnić prostą nawigację i udoskonalać w razie potrzebnych scenariuszy nawigacyjnych lub dostosowując do persony użytkujących dany produkt cyfrowy ponieważ dla mnie jako projektanta UI jest to produkt cyfrowy, a dla użytkownika końcowego po prostu fajne menu restauracji.
Obecnie strona nie funkcjonuje już w Internecie, ale wykonałem nagranie video przeglądając stronę główną i przechodząc do zakładki MENU a potem do podstrony z daniami specjalnymi. Są to dwa krótkie filmiki pokazujące przegląd witryny restauracji. Pierwszy filmik pokazuje wygląd ekranu mobilnego, natomiast drugi pokazuje wygląd deksktopowy na ekranie full HD.
Widok ekranu mobilnego (360x800 px)
Widok ekranu desktopowego full HD (1920x1080 px)
Projekt projektowi nie równy
Projekt projektowi nie równy ponieważ powyższe rozwiązanie można wykonać na kilka sposobów np. zmniejszenie szerokości lub dodanie zaokrąglonych narożników zakładek w kategoriach menu lub zastosowanie innej kolorystyki i dobraniu innych czcionek w projekcie co też wpływa na ostateczny odbiór. Akurat aspekt wizualny w tym projekcie ma w tle obraz w czarnych odcieniach i na jego tle zakładki w kolorze białym dla bardzo dużego kontrastu co można trochę porównać do zasady zwiększonego kontrastu (AAA). Czym jest zwiększony kontrast (AAA) ? Można przeczytać na stronie kontrast zwiększony (AAA). Projekt wizualny i wygląd ostateczny można zmienić i dostosować, ale akurat mi chodzi o zastosowanie samego rozwiązania interfejsu użytkownika więc opisałem jak zrobiłem kartę menu online dla restauracji oraz jak rozwiązałem kluczowe problemy występujące na stronach internetowych restauracji. Niektóre źle przemyślane rozwiązania skutkują gorszym odbiorem użytkownika, trudniejszym odnalezieniem to czego szuka i finalnie nie chęć do korzystania z takiej strony Internetowej. Nieprzemyślany projekt strony lub po prostu realizacja strony Internetowej tanim kosztem "u tańszego wykonawcy" może skutkować takimi problemami bez przeprowadzonej pracy UX/UI co doprowadzi do małego ruchu na witrynie restauracji i mniejszej ilości zamówień online.
Należy przeprowadzić chociażby podstawą pracę UX czyli zbadać doświadczenia użytkownika, jak uprościć mu proces nawigacji i jak rozwiązać dotychczasowe problemy aby ostatecznie dane rozwiązanie było użyteczne i maksymalnie proste. Podczas pracy nad UX tworzy się tzw. personę czyli użytkownika końcowego, który korzysta z aplikacji webowej i ostatecznie określa się jak można użytkownikowi uprościć poruszanie się po aplikacji. Drugim krokiem to praca UI czyli wizualne zaprojektowanie interfejsu użytkownika bazując na danych zebranych przy pracy nad UX tworząc całość i tutaj sprowadzam się do początku, że projekt projektowi nie równy bo można UI zaprojektować na kilka sposobów trzymając się jednych danych zebranych w UX. Tutaj trzeba trzymać się założonej stylistyki do projektu i oczekiwań klienta, do którego czasem trzeba się dostosować, ale dla dobrych praktyk UX/UI można odradzić np. źle dobrane kolory przez klienta i zaproponować inne, które bardziej wpłyną na użyteczność końcową. Cały UX/UI wpływa na odbiór końcowy i jest ważny przy tego typu projektach i na pewno warto zainwestować w przemyślany projekt aby zmaksymalizować korzyści dla siebie. Duże firmy wydają grube pieniądze na pracę UX aby badać doświadczenia użytkowników i projektując tym samym przyjazne interfejsy użytkownika.
Polecam obejrzeć dobry serial na Netflix pt. Abstract - The Art of Design gdzie w sezonie drugim bodajże w piątym odcinku serialu pt. "Ian Spalter: Digital Product Design" jest historia cyfrowego projektu produktu i pokazywane są prace nad doświadczeniami użytkowników aplikacji Instagram, testy użyteczności i wdrażanie interfejsu oraz cały proces eksperymentowania z nowymi projektami produktów czyli praca UX/UI designera. To jak wygląda dana aplikacja nie jest przypadkiem lecz celowym zamiarem aby osiągnąć zamierzony cel.
Zdjęcie UX/UI pochodzi z Freepik
