Платформа цифрового меню та замовлень для кафе, барів і ресторанів
Послуги: UX/UI-дизайн, розробка платформи на Laravel, Next і React, адаптивна верстка
Зміна асортименту, цін або складу позицій потребує повторного друку, а гість не завжди отримує актуальну інформацію про доступні страви й напої.
Відвідувачеві доводиться чекати, поки офіціант принесе меню, прийме замовлення та повернеться для уточнень або оплати.
Кожна точка має власний асортимент, ціни, адресу й графік роботи, але власникові незручно підтримувати кілька окремих систем.
Страви, напої та супутні товари потрібно розділити на категорії й підкатегорії так, щоб гість швидко знаходив потрібну позицію навіть у широкому асортименті.
Гість переходить до цифрової сторінки закладу зі смартфона й одразу бачить доступні категорії, позиції, ціни та основну інформацію.
Основне меню складається з великих напрямів, а всередині кожного передбачені окремі категорії для страв, напоїв та інших товарів.
У картці показуються назва, опис, фотографія, ціна, вага або об’єм, після чого позицію можна додати до замовлення.
Відвідувач формує кошик, перевіряє вибрані позиції, оформлює замовлення й переходить до оплати в межах одного інтерфейсу.
Кафе, бар або ресторан отримує власне меню, адресу, контакти, графік роботи та посилання на соціальні мережі.
Власник може об’єднати кілька закладів у спільній системі та керувати їхніми меню й даними через окремі кабінети без створення незалежних платформ.
Темна основа та помаранчеві акценти формують характер інтерфейсу
- Чорний фон об’єднує всі екрани
- Білий текст виділяє основну інформацію
- Помаранчевий колір позначає активні елементи
- Сірі лінії розділяють рівні контенту
Темна палітра відповідає атмосфері бару й водночас створює контрастне тло для назв, цін і фотографій. Помаранчевий колір використаний вибірково: він показує активний розділ, вартість позиції та кнопки основних дій. Другорядні описи виконані приглушеним сірим текстом і не конкурують із головною інформацією.
Основні розділи утворюють перший рівень навігації
- Меню, пиво, бар, напої та сигарети винесені в окремі вкладки
- Активний розділ підкреслений помаранчевою лінією
- Назви доповнені тематичними піктограмами
- Вкладки зібрані в одному горизонтальному рядку
Верхня навігація розділяє великий асортимент за типами продукції ще до перегляду конкретних позицій. Користувач одразу бачить, у якій частині меню перебуває, і переходить між основними напрямами без повернення на окремий стартовий екран.
Вкладені категорії уточнюють вибір усередині розділу
- Кожна категорія оформлена окремою кнопкою
- Активна кнопка відрізняється фоном
- Довгий перелік продовжується горизонтально
- Назва відкритої категорії повторюється над картками
Дані в картці позиції читаються в заданому порядку
-
Назва відкриває картку
Великий білий текст одразу показує конкретну страву, напій або товар.
-
Опис формує другий рівень
Склад або коротка характеристика подані приглушеним кольором під назвою.
-
Ціна та порція розташовані поруч
Вартість виділена помаранчевим, а вага чи об’єм показані окремим показником.
-
Фото й додавання не змішуються з текстом
Фото й додавання не змішуються з текстом
Фото й додавання не змішуються з текстом
- Назва закладу й адреса розташовані у шапці Користувач бачить, меню якої точки відкрив, ще до перегляду асортименту.
- Пошук винесений в окрему кнопку Піктограма розташована у правій частині верхньої панелі.
- Повне меню відкривається окремо Кнопка поруч із пошуком не перевантажує основну навігацію додатковими пунктами.
- Меню та замовлення доступні в нижній панелі Розділ «Меню» повертає до каталогу позицій, а «Замовлення» відкриває список доданих страв і напоїв.
Верхня зона відповідає за ідентифікацію закладу й загальні інструменти, а нижня — за перехід між вибором позицій і сформованим замовленням. Завдяки такому розподілу службові елементи не займають місце всередині самого меню.
Дані про заклад відкриваються в окремій інформаційній панелі
-
Логотип і назва формують заголовок
Поруч одразу показана адреса конкретного закладу.
-
Контакти винесені в самостійну секцію
Номер телефону виділений великим текстом і доповнений кнопкою дзвінка.
-
Графік поєднаний зі статусом роботи
Зелена мітка показує, що заклад відкритий, а поруч зазначений часовий проміжок.
-
Соціальні мережі завершують панель
Посилання оформлені піктограмами й відокремлені від основних контактних даних.
Одна система карток працює з різними типами асортименту
- Страви можуть містити фотографію та розгорнутий склад Для бургерів та інших позицій передбачено достатньо місця для опису й зображення.
- Напої показують об’єм разом із ціною Картка зберігає ту саму структуру для чаю, алкоголю та безалкогольних напоїв.
- Короткі позиції не потребують зайвих полів Сигарети подані без фотографій і довгих описів, але залишаються частиною спільної сітки.
- Різне наповнення не змінює принцип взаємодії Назва, параметри, ціна та кнопка додавання займають передбачувані місця в кожній категорії.
Єдина структура підходить для кафе з компактним меню, бару з великим вибором напоїв або мережі, де різні точки мають власний асортимент. Заклад змінює наповнення, а звичний для гостя порядок перегляду й вибору залишається незмінним.
