POS UI/UX Research — 2026-05
Глубокое исследование лучших практик UI/UX для POS-кассы фастфуда (QSR — Quick Service Restaurant) и конкретные рекомендации для нашего desktop-pos. Основа для последующих BR’ов по UX-улучшениям.
Контекст
Touch-redesign desktop-pos завершён (8 фаз: tokens, BottomSheet, NumericInput, Stepper, ActionBar, TextInput, etc). Базовая touch-эргономика хорошая, но конкуренты (Toast, iiko, Square, Lightspeed) опережают по информационной архитектуре и workflow. Этот research — план следующих улучшений.
1. Конкурентный обзор
iiko Front (РФ — главный конкурент)
3-колонка: слева список блюд + сумма / по центру меню с группами + поиск (по name/SKU/barcode) + комбо-наборы / справа 3 вкладки «избранное».
Паттерны для воспроизведения:
- Постоянная видимость корзины (не модальная, не collapsible)
- Поиск по нескольким атрибутам (название, артикул, баркод)
- «Избранное» отдельно от категорий
- Модификатор как отдельная сущность с обязательными/опциональными группами
Toast POS (US — флагман в QSR)
3-зона: слева детали чека / по центру меню + поиск + Open Item / справа/внизу Hold/Send/Pay sticky.
Паттерны:
- Favorites tab per-cashier → у Velvet Taco +20% throughput
- Required-модификаторы подсвечиваются в нижней зоне диалога
- Sticky footer с тремя primary actions (Hold / Send / Pay)
Источник: restauranttechnologynews.com, Toast docs.
Square for Restaurants (US)
Conversational modifiers — главная фишка. Кнопки Add / No / Extra / Sub рядом с каждой опцией (вместо отдельных списков «без…» и «с…»).
Auto-progression через required modifier sets.
Источник: Square community.
Lightspeed K-Series (CA/EU)
3-зона register: order summary (верх) / numpad (collapsible, середина) / меню (главная зона). Quick Service Mode — pay-at-order на одном экране.
Паттерны:
- Numpad collapsible (свёрнут когда не нужен → больше места меню)
- Allergens/Notes как отдельные кнопки (не overflow)
- Картинки опциональны (tile-only тоже работает)
Revel Systems (на iPad)
Conversational ordering — кассир принимает заказ в любом порядке (а не «выбери основное → потом гарнир»). Критично для шаурмы где клиент диктует «двойной соус, без лука, средний» вперемешку.
McDonald’s NP6 (proprietary)
Photo-driven, language-agnostic — иконки/фото вместо текста. Meal-сборка через wizard «Step 1 of 3». Цветовое кодирование секций. Фиксированный grid 4×6 (никаких scrollable lists).
Subway POS
Жёсткий wizard: хлеб → размер → начинка → сыр → овощи → соусы → meal upgrade → напиток. Брендовые цвета, лаконичный текст. Subway отказался от формального обучения — система само-обучаема.
Starbucks Next Gen POS
80% drink orders помещаются на главный экран без навигации — это самый важный показатель для QSR. Top-N обычных заказов на главном (без drill-down). Batch-grouping одинаковых напитков в KDS.
Источник: koronapos.com — Starbucks.
R-Keeper / Quick Resto / Tillypad
R-Keeper: настраиваемый screen designer (drag-and-drop кнопок). Quick Resto: similar к iiko. Tillypad: mid-range функционал.
2. Best Practices (с источниками)
| Практика | Деталь | Источник |
|---|---|---|
| Distance-based sizing | Кассир смотрит с ~80 см. На 1080p+ моноблоке нужен body 18-20px (у нас 16px) | Creative Navy |
| Tap speed = 2× normal | Опытный кассир тапает в 2 раза быстрее. Целевой бенчмарк: транзакция <5 сек | flip-pos |
| Touch target ≥1cm физически | На 21.5”/1080p ~55px. На 15.6” минимальные ≥48 могут быть тесными | NN/G |
| Spacing важнее размера | Между primary actions ≥8-12px иначе fat-finger hits | NN/G |
| Glove mode | Кассиры в перчатках бывают. Решение: hardware с industrial-controller + увеличить touch-area hitbox | Pioneer |
| Steppers vs numpad | Stepper для 1-5 единиц (один tap), numpad для cash/tip/скидок | NN/G Steppers |
| Conversational > forced wizard | В QSR клиент диктует модификаторы вперемешку. Wizards только для meal-deals | Revel + Square |
| Цветовое кодирование категорий | Мозг сортирует по цвету быстрее чем по тексту. Brand-corner цвета для секций | dev.pro |
| Минимум модалов | Каждый модал = потеря контекста. Inline/side-panel вместо overlay где можно | LogRocket |
| Persistent cart > collapsible | Кассир должен видеть итог всегда (anti-fraud, double-check) | iiko/Toast/Lightspeed |
| Photos optional, color tiles mandatory | Фото плохого качества хуже чем colored tile с текстом | Starbucks/McDonald’s |
| Top-N favorites zone | Где 80% продаж. Toast: per-cashier favorites = +20% throughput | Toast |
| «Open Item» quick-product | Кнопка для произвольной позиции с ценой (сезонные/нестандарт) | Toast |
| Errors recovery > prevention dialogs | 1-tap отмена позиции > подтверждение каждого выбора | UXmatters |
3. Рекомендации по нашим экранам
MainScreen (приём заказа)
R-1. Поиск + «Часто» — две недостающие зоны. Сейчас categories slot вертикально слева. У всех serious конкурентов сверху сайдбара есть поиск + favorites/часто. Шаурма/донер: клиент произносит «Big Mac» → кассир должен набрать первые 2 буквы, не скроллить категории. Что менять: Над списком категорий — кнопка-tile «★ Часто» и кнопка-tile «🔍 Поиск». «Часто» — top-N товаров за 7 дней по этой ТТ. Поиск — overlay-input с auto-complete по prefix. Источник: Toast favorites (+20% throughput), iiko «быстрое меню».
R-2. Корзина 440px возможно избыточна.
На 1366×768 (бюджетный 15.6” моноблок) — это 32% экрана только для корзины. У Toast/Lightspeed корзина 25-30%.
Что менять: gridTemplateColumns: "200px minmax(0, 1fr) minmax(360px, 28%)".
R-3. Toolbar «Обновить меню» сильно outsized. Меню меняется редко. Перенести в шапку или footer категорий — освободить прайм-зону.
R-4. Tile продуктов — добавьте badge-индикаторы для модификаторов.
ProductTile получает hasModifiers, но это не отображено. Toast/Square показывают значок «требуется выбор» (диамант или dot) в углу.
Что менять: Правый-верх угол маленький значок если hasModifiers=true.
R-5. OrderType Switcher и стол — слишком много места. В час пик такси/самовывоз 80%, это one-time choice на смену. Что менять: Поднять OrderTypeSwitcher как maly sticky-полоску (3 segmented-button) сверху корзины 40px высотой.
R-6. Цветовое кодирование категорий — обязательно.
В Catalog Service backfill color из палитры по умолчанию: ['#EF3124', '#FFB800', '#00A86B', '#0066CC', '#8B4789', '#F77F00', '#264653', '#E07A5F'].
R-7. OrderTypeSwitcher → иконки. 🍽 / 🥡 / 🛵 вместо/рядом с текстом. Кассир видит за 0.1 сек.
Modifier selection
R-8. Conversational pattern (как Square).
Заменить radio/checkbox на inline + / − / ✕ кнопки на каждой опции. Required-группа подсвечена красным сверху если не выбрано.
Источник: Square conversational modifiers.
R-9. Required-модификаторы блокируют CTA.
Primary Добавить в чек — disabled пока не выбран size.
R-10. Multi-select с лимитом — visible counter. «Топпинги (выбрано 1 из 3)» над группой.
R-11. «Назад» в bottom-sheet для случая «упс, не тот товар».
Payment flow
R-12. Минимизировать шаги: 3 экрана максимум. (1) Сумма + способ → (2) ввод суммы / ожидание карты → (3) Успех. Если способ один (только cash/card) — сразу big-buttons на 1-м экране.
R-13. Suggested amounts для cash.
💵 Наличные → numpad + кнопки 1000 / 1500 / 2000 / Точная сумма / +200. Клиент даёт 1500 за чек 1430 → один tap.
R-14. Сдача — гигантским шрифтом на 2-3 секунды (auto-dismiss или tap-to-continue), потом печать.
R-15. Split bill — отложенный appetite. Для шаурма/бургер takeaway split редкий. Прячем в overflow. Для dine_in (TableOrderScreen) — выводим явно.
ActiveOrders / поиск заказа
R-16. Filter chips сверху + auto-refresh. В час пик 30 заказов/час → может быть 10-15 активных одновременно. List + scroll медленно. Нужны:
- Filter chips: «Все» / «Готовится» / «Готовы к выдаче» / «Просрочены»
- Auto-refresh каждые 5-10 сек (или WebSocket)
- Sort: «just open first» / «overdue first»
- Поиск по № чека (1-3 цифры с мини-numpad)
R-17. Card-tile вместо list-row. Tile 200×160: № чека крупно сверху, статус-цветом (warning «готовится», success «готов»), 2-3 первых блюда + сумма.
R-18. Time-since-open visible counter. Каждый tile: «🕐 4:32» с момента открытия. Цвет: серый <3min, оранжевый 3-7min, красный >7min.
Refund
R-19. Three-step с обязательной причиной.
- Выбор позиций (чекбокс на tile с количеством для частичного)
- Причина (selectable: «Брак» / «Ошибка кассира» / «Отмена клиентом» / «Другое»)
- Подтверждение с суммой + способом возврата
R-20. Сильный confirm только на финальном шаге.
Не плодить «Вы уверены?» на каждом — anti-pattern. Один modal с большой Подтвердить возврат 530 ₽.
R-21. Audit-trail видимый. Под confirm мелким текстом: «Возврат привязан к чеку №1024, кассир Иванов, смена №56».
4. Anti-patterns которых стоит избегать
| # | Anti-pattern | Почему плохо |
|---|---|---|
| A1 | Скрытые жесты на primary CTA (swipe-down) | Кассир не знает что есть |
| A2 | Однотипные цвета категорий | Глаз сортирует по цвету быстрее чем по тексту |
| A3 | Захардкоженные wizards с 5+ шагами в час пик | Раздражают опытных |
| A4 | Модалы поверх модалов | Кассир теряется |
| A5 | Подтверждения каждого тапа | Slowdown ×2-3 |
| A6 | Скрытие критических данных за collapsible | Кассир сверяется с дисплеем клиента |
| A7 | Низкий контраст в primary buttons | В свете дневной кухни не видно |
| A8 | Cancel рядом с Pay одного размера | Mistap |
| A9 | Tipping default 25% незаметно | Дарк-pattern |
| A10 | Нет undo для последнего действия | Случайный товар → искать в корзине |
| A11 | Внутренний scroll категорий | Двойной scroll в час пик |
| A12 | Нет «Open Item» на главном | Сезонный товар → блок |
| A13 | Numpad overlay поверх корзины | Кассир не видит итог при вводе |
| A14 | Photo обязательно для каждого товара | Низкокачественные фото хуже tile с текстом |
| A15 | Логин по password в час пик | 30 заказов/час и каждый кассир входит password — медленно. PIN/RFID |
5. Топ-10 приоритетных изменений
| # | Что | Где | Эффект | Сложность |
|---|---|---|---|---|
| 1 | «★ Часто» tab + поиск (auto-complete) сверху колонки категорий | MainScreen + Catalog Service (favorite metric per ТТ) | Сокращение времени принятия популярных заказов на 30-40% | Средняя |
| 2 | Conversational modifiers с Add/No/Extra | UI пакет ModifierSelector | 2× скорость заказа со многими модификаторами | Средняя |
| 3 | Required-modifiers блокируют CTA + автопрогрессия | ModifierSelector | Меньше «забыл выбрать size» | Низкая |
| 4 | Suggested amounts для cash payment (1000/1500/2000 + точная) | NumericInput / payment screen | На 50% быстрее cash transactions | Низкая ⭐ |
| 5 | Filter chips + auto-refresh + status-color tile в ActiveOrders | ActiveOrdersScreen | Поиск активного 1-2 сек вместо 5-10 | Средняя |
| 6 | Цветовые палитры категорий по умолчанию + backfill | Catalog миграция + админка | Меньше misclick | Низкая ⭐ |
| 7 | Корзина 440px → minmax(360px, 28%) | MainScreen layout | На 15.6” +30% места tile | Очень низкая ⭐ |
| 8 | Time-since-open в ActiveOrders (серый/жёлтый/красный) | ActiveOrdersScreen | Менеджер видит overdue | Низкая |
| 9 | PIN-логин (4-6 цифр) для смены кассира внутри открытой смены | LoginScreen + Auth Service | На 80% быстрее переключение | Средняя |
| 10 | Refund 3-step с одним финальным confirm | RefundScreen | Меньше ошибочных, audit trail | Средняя |
Источники
- Toast: Optimize Screen for Faster Order Entry
- Toast Unveils QSR Solution
- Toast: Manage Orders With POS
- Square: Modifier Set Order on POS
- iiko Front обзор
- iiko Front API
- Lightspeed K-Series — Register Screen
- Lightspeed — Void Reasons
- Revel QSR Orders Overview
- McDonald’s POS — esper.io
- McDonald’s NP6 Training Simulator
- Subway POS — KoronaPOS
- Starbucks POS — KoronaPOS
- R-Keeper v7
- Creative Navy — 16 UX Factors
- UXmatters — Designing POS
- dev.pro — 10 UX Tactics
- NN/G — Touch Target Size
- NN/G — Input Steppers