Для чего предусмотрена кнопка в бургер меню

Гамбургер-меню

Гамбургер-меню (от англ. «hamburger menu») — это значок (иконка) меню, который используется дизайне сайтов, программного обеспечения и заменяет кнопку со словом «Меню» или «Файл».

Иногда эту иконку называют просто «Гамбургер» или «Меню Хот-Дог», либо «Трёхстрочное меню», потому что у значка три горизонтальные линий.

Он так называется, потому что очень уж схож с классическим гамбургером: верхняя и нижняя полосы имитируют булку, а средняя — котлету. При нажатии на иконку открывается выпадающее меню.

Многих пользователей интересует, можно ли открыть такое меню с помощью горячей кнопки. Пока быстрой клавиши для доступа к этому меню нет, но некоторые программы позволяют открыть гамбургер нажатием клавиши Alt на клавиатуре.

Свяжите сервисы между собой без программистов за 5 минут!

Как настроить выгрузку данных из BotHelp в OneBox?

Подключение SMS4B

Автор иконки — дизайнер Норм Кокс. Он хотел создать простое, лаконичное и понятное изображение, похожее на список и придумал эту идею давно, в 1981 году для Xerox Star. Но использоваться иконка начала с 2000-х годов в мобильных интерфейсах, а обрела свою популярность после того, как появилась в в мобильном приложении Фейсбука для Айфонов в 2010 году.

Сегодня такое меню можно встретить в подавляющем большинстве приложений, она стала стандартом для графического дизайна, хотя многие дизайнеры критикуют её и предлагают найти замену, потому что считают, что не всем пользователям понятно, что означает эта иконка. Были даже проведены A/B-тесты, показавшие, что если поменять значок гамбургера на слово «Меню», то это облегчает пользователям навигацию.

Однако другие специалисты утверждают, что к гамбургеру уже все привыкли и он стал неотъемлемой частью визуального оформления, а эксперимент с A/B-тестами и заменой иконки на слово «Меню» показал несущественное влияние на поведение пользователей.

Настроить интеграцию без программистов ApiX-Drive

Статьи о маркетинге, автоматизации и интеграциях в нашем Блоге

Как создать анимированное гамбургер-меню в React

Если вы хотите добавить несколько отточенных анимаций в свои приложения React, Framer Motion — это инструмент для этой работы.

В этом руководстве я покажу вам, как создать полностью анимированное мобильное меню, используя движение кадров в Reaction.

Что мы собираемся создать?

В этом руководстве я шаг за шагом проведу вас по реализации полноценного анимированного и отзывчивого компонента мобильного меню в React с использованием Framer Motion.

Вы также можете ознакомиться с этим подробным видео-уроком, который я создал на основе этой статьи.

Предпосылки

Хотя для начала работы с этим руководством не требуется предварительного знакомства с Framer Motion, важно иметь базовые знания в React, поскольку здесь я не буду подробно описывать основные концепции React.

На протяжении всего этого урока вы будете использовать следующие инструменты:

• React 18.2.0: React — это библиотека JavaScript, используемая для создания пользовательских интерфейсов. Она позволяет разработчикам создавать повторно используемые компоненты пользовательского интерфейса и эффективно обновлять пользовательский интерфейс на основе изменений данных.
• Framer Motion: Framer Motion — популярная библиотека анимации для React. Он предоставляет простой в использовании интерфейс для создания плавных интерактивных анимаций и переходов в веб-приложениях.
• Vite: Vite — это сервер быстрой разработки и инструмент сборки для современных веб-приложений.
• Tailwind: В этом руководстве вы будете использовать Tailwind для применения стилей к вашим компонентам React.

Начало работы

Чтобы начать работу с этим руководством, я подготовил для вас стандартный проект, который содержит все необходимые зависимости, так что вам не нужно настраивать свой проект с нуля.

Просто клонируйте исходный шаблон из репозитория GitHub, а затем следуйте инструкциям.

Как создать простую навигационную панель в React

Прежде чем приступить к созданию анимированного мобильного меню, важно сначала обратиться к навигационной панели рабочего стола. Вы хотите убедиться, что ваша навигационная панель не только остается адаптивной, но и хорошо смотрится на настольных устройствах.

Я уже настроил для вас каталог routes , содержащий массив со всеми необходимыми маршрутами для вашего приложения. Вы можете легко отобразить эти маршруты, импортировав массив и сопоставляя его по мере необходимости.

//��./src/routes.ts

//��./src/routes.ts import < BiHomeAlt2 >from "react-icons/bi"; import < FiSearch >from "react-icons/fi"; import < PiChatCircleBold >from "react-icons/pi"; import < IoPricetagsOutline >from "react-icons/io5"; export const routes = [ < title: "Home", href: "#", Icon: BiHomeAlt2, >, < title: "Explore", href: "#", Icon: FiSearch, >, < title: "Pricing", href: "#", Icon: IoPricetagsOutline, >, < title: "About", href: "#", Icon: PiChatCircleBold, >, ];

Каждый объект в массиве routes включает значок, импортированный из библиотеки React Icons, понятный заголовок и ссылку href , обозначающую путь к маршруту.

Давайте отобразим массив маршрутов на панели навигации. Откройте ./src/comComponents/nav-desktop и добавьте следующий код:

//��./src/components/nav-desktop.tsx

Компонент NavDesktop отображает неупорядоченный список ( ul ), содержащий маршруты. Он использует массив routes , импортированный из файла ../routes , для динамического создания элементов списка ( li ) со ссылками ( a ) и значками.

Вы только что создали красивую панель навигации на рабочем столе.

Теперь, когда у вас есть навигационная панель на рабочем столе, пришло время создать анимированное мобильное меню.

Как создать анимированный гамбургер-значок в React

Сначала давайте создадим кнопку с гамбургер-значком. Эта кнопка позволит пользователям переключать видимость вашего мобильного меню.

Hamburger React — это невероятно легкая библиотека React, которая предоставляет широкий спектр анимированных значков гамбургеров для плавной интеграции в ваши приложения React.

Хотя у вас, безусловно, есть возможность создавать свои собственные анимированные значки гамбургеров с нуля, в этом руководстве вы будете использовать Hamburger React для реализации анимированного гамбургер-значка и перейдете к созданию анимированного мобильного меню.

Откройте файл ./src/components/nav-mobile.tsx и добавьте следующий код:

//��./src/components/nav-mobile.tsx

//��./src/components/nav-mobile.tsx import < useClickAway >from "react-use"; import < useRef >from "react"; import < useState >from "react"; import < Squash as Hamburger >from "hamburger-react"; import < AnimatePresence, motion >from "framer-motion"; import < routes >from "../routes"; export const NavMobile = () => < const [isOpen, setOpen] = useState(false); return ( 
 size= toggle= />
 ); >;

Этот компонент React создает кнопку, которая открывает и закрывает меню. Кнопка запускается как закрытая ( isOpen имеет значение false ). При нажатии на него видимость меню переключается.

Кроме того, компонент NavMobile останется скрытым на больших экранах, поскольку вы уже внедрили компонент desktop navbar.

Как создать анимированное мобильное меню в React

Давайте расширим функциональность вашего мобильного меню и отобразим маршруты навигации, как только пользователь нажмет на кнопку «гамбургер».

Откройте файл ./src/components/nav-mobile.tsx и добавьте следующий код:

//��./src/components/nav-mobile.tsx

Вот упрощенное объяснение компонента:

Настройка состояния и ссылок:

• Компонент начинается с создания двух переменных: isOpen и ref .
• isOpen отслеживает, открыто или закрыто меню.
• ref похож на метку, которую мы прикрепляем к элементу HTML. В данном случае он используется для ссылки на контейнер меню.

Обработка щелчков за пределами меню:

• Компонент использует хук useClickAway из библиотеки React-Use, чтобы обнаружить, когда пользователь щелкает за пределами меню. Когда это происходит, он запускает функцию, которая закрывает меню, устанавливая для isOpen значение false .

Рендеринг гамбургер-кнопки:

• Компонент отображает кнопку, которая выглядит как гамбургер-значок. Эта кнопка служит тумблером для открытия и закрытия меню.
• При нажатии на кнопку переключается значение isOpen , которое определяет, отображается меню или нет.

Отображение меню:

• Если isOpen имеет значение true , это означает, что должно отображаться меню. В этом случае отображается список ссылок и значков.
• Каждая ссылка представляет отдельную страницу или раздел. При нажатии на ссылку обновляется isOpen , чтобы закрыть меню.

Это основной поток работы этого компонента React! Он настраивает состояние для отслеживания статуса открытия/закрытия меню, обрабатывает щелчки вне меню, отображает кнопку для переключения меню и отображает содержимое меню, когда оно должно быть открыто.

Теперь давайте используем движение рамки для анимации мобильного меню. Откройте файл ./src/components/nav-mobile.tsx и добавьте следующий код:

//��./src/components/nav-mobile.tsx

Давайте разберем части, связанные с движением:

AnimatePresence:

Компонент AnimatePresence — это специальный контейнер, предоставляемый библиотекой framer-motion . Он управляет жизненным циклом анимации для элементов, входящих и выходящих из DOM.

В этом коде он обтекает содержимое меню, указывая, что оно должно анимироваться при появлении или исчезновении.

Меню анимации контента:

Содержимому меню (той части, которая отображается при открытии меню) даются анимационные инструкции. Эти инструкции включают:

• initial : Это определяет начальное состояние анимации. Здесь она запускается без непрозрачности (полностью невидимая).
• animate : Это определяет, как продвигается анимация. Он указывает, что непрозрачность должна быть равна 1 (полностью видна), создавая эффект затухания.
• exit : Это определяет, как ведет себя анимация, когда содержимое меню удаляется из DOM. Здесь он устанавливает непрозрачность равной 0, создавая эффект затухания.
• transition : Это управляет поведением анимации с течением времени. В этом случае его продолжительность установлена равной 0,2 секунды, что означает, что для завершения анимации требуется 0,2 секунды.

Анимация элемента ссылки:

Для каждого отдельного элемента ссылки в меню даны инструкции по анимации. Эти инструкции включают:

• initial : Это задает начальное состояние анимации. Она начинается с элемента, который является маленьким (масштаб 0) и полностью невидимым (непрозрачность 0).
• animate : Это определяет, как продвигается анимация. Он указывает, что элемент должен увеличиться до своего обычного размера (масштаб 1) и стать полностью видимым (непрозрачность 1).
• transition : Это определяет поведение анимации. Установлена «пружинящая» анимация, которая создает эффект упругости. Значения жесткости и демпфирования контролируют упругость, в то время как задержка создает ступенчатый эффект, в результате чего анимация каждого элемента начинается немного позже предыдущего.

Эти анимации придают визуальный колорит меню и пунктам прейскуранта, обеспечивая плавный переход между ними при открытии и закрытии.

Поздравляем, теперь у вас есть полностью анимированное Hamburger Menu, отличная работа!

Вывод

В этом руководстве мы интегрировали Framer Motion для создания динамического анимированного гамбургер-меню в React. Применяя описанные методы, вы теперь обладаете навыками улучшения навигации пользователя с помощью плавной анимации и интерактивных элементов.

Вы можете подписаться на меня в Twitter, где я делюсь другими полезными советами по веб-разработке. Счастливого кодирования!

Ин­клю­зив­ные ком­по­нен­ты: меню и кноп­ки меню

Классифицировать сложно. Например, возьмём крабов. Раки-отшельники, веерные крабы и подковообразные крабы, с точки зрения таксономии, не настоящие крабы, но это не мешает использовать в их названиях слово «краб». Всё становится ещё запутаннее, когда через какое-то время благодаря процессу, называемому канцеризацией, ненастоящие крабы эволюционируют, чтобы больше походить на настоящих. Это то, что произошло с королевскими крабами, которые в прошлом были раками-отшельниками. Представьте размеры их раковин!

В дизайне мы часто совершаем такую же ошибку, когда называем разные вещи одинаковыми именами. Они кажутся похожими, но внешность может быть обманчивой. Это плохо сказывается на прозрачности вашей библиотеки компонентов. С точки зрения инклюзивности это может привести к тому, что вы измените нужную семантику и поведение компонента на совершенно противоположные. Пользователи будут ожидать одного поведения, а получат другое.

Классический пример — термин «выпадающий список» (dropdown). В интерфейсах многие вещи «выпадают», включая в , и подменю навигации со списком ссылок, которое раскрывается с помощью JavaScript. Одинаковые названия — разные явления. Некоторые называют это «выпадающее меню» (pull-down menu), но давайте не вдаваться в подробности.

Выпадающие списки, которые состоят из нескольких пунктов, часто называют «меню». Об этом я и хочу поговорить в этой статье. Мы будем делать настоящее меню, но по пути обсудим их не совсем настоящие реализации.

Давайте начнём с вопроса: является ли блок ссылок с картинки, выпадающий вниз из панели навигации, меню?

Правильный ответ: нет, это не настоящее меню.

То, что навигационная схема состоит из списков или ссылок — давнее соглашение. Оно почти так же давно предписывает, что дополнительная навигация (sub-navigation) должна быть вложенными списками со ссылками. Если бы я удалил стили для компонента, показанного выше, я бы увидел что-то вроде этого списка ссылок, только с Times New Roman и синего цвета.

• [Главная](#) • [О нас](#) • [Магазин](#) ◦ [Одежда для собак](#) ◦ [Вафельницы](#) ◦ [Магические шары](#) • [Контакты](#) 

С точки зрения семантики вложенные списки со ссылками в этом контексте корректны. Системы навигации на самом деле оглавления: именно так они устроены. Единственное, что действительно заставляет думать, что перед нами меню — это стилизация вложенных списков и способ их отображения при наведении курсора или при фокусе.

В этом месте часто ошибаются и начинают добавлять семантику из WAI-ARIA: aria-haspopup=»true» , role=»menu» , role=»menuitem» и так далее. Их можно использовать, но в другом контексте. Вот две причины для этого:

1. ARIA-меню предназначены не для навигации, а для десктопных приложений. Представьте себе систему меню для любого из них.
2. Ссылка верхнего уровня должна быть ссылкой. То есть она не ведёт себя как кнопка меню.

Относительно второго пункта: при перемещении по области навигации в подменю ожидаешь, что каждое подменю будет появляться при наведении или при фокусе на ссылке верхнего уровня (например, «Магазин» из примера выше). Это одновременно показывает подменю и размещает ссылки в нём в порядке получения фокуса. С помощью JavaScript можно управлять событиями фокуса (focus) и его потери (blur) и сохранить внешний вид подменю пока это необходимо. При этом те, кто использует для навигации клавиатуру, должны иметь возможность переходить по очереди от одной ссылки каждого уровня к другой.

Кнопки меню, которым задан атрибут aria-haspopup=»true» , так себя не ведут. Они становятся активными по клику и у них нет другой цели кроме показа скрытого меню.

Как показано на картинке, вне зависимости от того раскрывается меню или скрывается, это будет объявлено благодаря атрибуту aria-expanded . Вам нужно только изменить это состояние при клике, а не при фокусе. Пользователи обычно не ожидают явного изменения состояния при простом событии фокуса. На самом деле в нашей системе навигации состояние не изменяется. Это просто трюк со стилизацией. С точки зрения поведения мы можем перемещаться с помощью клавиши Tab так, как если бы не было никакого трюка с показом и скрытием элемента.

Проблема с навигационными подменю Скопировать ссылку

Навигационные подменю (или для кого-то «выпадающие списки») отлично работают с мышью или с клавиатуры, но не так хороши для касаний. Когда вы в первый раз нажимаете на ссылку верхнего уровня «Магазин» из примера, то сообщаете, что надо открыть подменю и перейти по ссылке.

Здесь есть два возможных варианта решения проблемы:

1. Избежать поведения по умолчанию ссылок верхнего уровня ( e.preventDefault() ) и написать скрипт для полной поддержки семантики и поведения меню WAI-ARIA.
2. Убедиться, что каждая страница, на которую ведёт ссылка верхнего уровня меню, имеет оглавление в качестве альтернативы подменю.

Первое решение не самое хорошее. Я ранее замечал, что этот тип семантики и поведения нежелателен в данном контексте, где ссылки — это управляемые контролы (subject controls). Кроме того пользователи больше не смогут переходить на страницу верхнего уровня, если она есть.

Какие устройства — сенсорные? Скопировать ссылку

Заманчиво думать: «Это не самое хорошее решение, но я применю его только для сенсорных интерфейсов». Проблема в том, как определить, есть ли у устройства сенсорный экран?

Вам точно не стоит относить любой «маленький экран» к разряду «экранов с сенсорным управлением». Работая в одном офисе с людьми, разрабатывающими сенсорные дисплеи для музеев, я могу заверить вас, что самые большие экраны — сенсорные. Не забывайте о ноутбуках с клавиатурой и сенсорным дисплеем.

К тому же многие, но далеко не все устройства небольшого размера являются сенсорными. В инклюзивном дизайне вы не можете позволить себе предполагать.

Второе решение более инклюзивное и надёжное. Это «фолбэк» для пользователей всех устройств. Но я специально взял в кавычки это слово, потому что думаю, что на самом деле постраничные оглавления — это лучший способ обеспечения навигации.

Похоже, получившая премию команда Government Digital Services с этим согласится. Вы также могли видеть такие оглавления в Wikipedia.

Оглавление Скопировать ссылку

Оглавления — это навигация для связанных между собой страниц или их разделов, которые должны быть семантически похожи на основные области навигации сайта. Для них используются элементы с , списки и общие подписи к ним.

Примечания Скопировать ссылку

• В этом примере мы представляем каждый раздел как отдельную страницу, как если бы это было в выпадающем подменю.
• Важно, чтобы каждая страница из «Магазин» имела одинаковую структуру. Поэтому оглавление «Продукты» находится в одном и том же месте. Консистентность улучшает понимание.
• Список группирует элементы, а вспомогательные технологии могут установить их количество и объявить о них, например, с помощью синтезированного голоса в скринридерах.
• Тегу заголовок задан с помощью атрибута aria-labelledby . Это означает, что большинство скринридеров объявит «Продукты, навигация» при попадании в область с помощью клавиши Tab . Также это приведёт к тому, что такая навигация будет разбита скринридерами на отдельные элементы, через которые пользователи смогут переходить к областям страницы напрямую.

Всё на одной странице Скопировать ссылку

Если вы можете поместить все разделы на одной странице, при этом не сделав её слишком длинной и избежав утомительной прокрутки, то так даже лучше. Просто задайте для каждого раздела якорную ссылку. Например, href=»#waffle-irons» должна вести к id=»waffle-irons» .

Примечание: в некоторых браузерах фокус плохо переносится на отдельные фрагменты страницы. Добавление tabindex=»-1″ к нужному фрагменту исправляет это.

В случае, если на сайте много контента, лучше тщательно продумывать информационную архитектуру с оглавлениями меню, чем делать ненадёжную и громоздкую систему выпадающих меню. Так будет легче сделать адаптивную версию страницы с меньшим количеством кода, а также это упростит восприятие её структуры. Там, где системы выпадающих меню скрывают структуру, оглавления обнажают её.

На некоторых сайтах, включая правительственный цифровой сервис gov.uk, есть страницы с указателями (или «темами»), которые представляют собой просто оглавления. Это настолько мощная концепция, что популярный генератор статических сайтов Hugo создаёт такие страницы по умолчанию.

Информационная архитектура — это важная часть инклюзивности. Плохо организованный сайт может соответствовать нужным вам техническим требованиям, но при этом будет отталкивать многих пользователей. Особенно это касается тех, у кого есть когнитивные нарушения или у кого мало времени на то, чтобы с чем-то долго разбираться.

Кнопки навигационного меню Скопировать ссылку

Пока мы обсуждаем тему фальшивых навигационных меню, было бы упущением с моей стороны не поговорить про кнопки меню. Вы наверняка видели состоящую из трёх линий иконку-гамбургер или «navicon».

Даже с упрощённой информационной архитектурой и одним уровнем навигационных ссылок пространство на маленьких экранах на вес золота. Скрытие навигации за кнопкой означает, что во вьюпорте будет больше места для основного контента.

Кнопка навигации больше всего из того, что мы изучали, похожа на настоящую кнопку меню. Так как она открывает меню по клику, то она должна:

1. Быть кнопкой, а не ссылкой.
2. Содержать информацию о развёрнутом или свёрнутом состоянии соответствующего меню (которое, строго говоря, представляет собой просто список ссылок).

Прогрессивное улучшение Скопировать ссылку

Давайте не будем забегать вперёд. Мы должны помнить о прогрессивном улучшении и подумать, как это будет работать без JavaScript.

В изначальном HTML-файле мало что можно сделать с помощью кнопок (кроме кнопок для отправки данных, но они даже близко не связаны с тем, что нам нужно сделать). Может быть, вместо этого, нам следует начать с простой ссылки, которая приведёт нас к навигации?

Нет особой необходимости использовать ссылку, если между ней и навигацией нет большого количества контента. Так как навигация сайта в большинстве случаев должна размещаться наверху страницы, то в этом решении нет необходимости. Так что, действительно, навигационное меню без JavaScript должно быть просто… навигацией.

Вы улучшите его, добавив кнопку, которая в исходном состоянии скрывает навигацию с помощью атрибута hidden :

Некоторые более старые браузеры, сами знаете какие, не поддерживают hidden , так что не забудьте учесть это в вашем CSS. Селектор ниже решит эту проблему, так как display: none делает то же самое, что и атрибут hidden : скрывает меню от вспомогательных технологий и удаляет ссылку из порядка получения фокуса.

[hidden]

Делать всё возможное для поддержки старого программного обеспечения — это, конечно, часть инклюзивного дизайна. Некоторый софт невозможно обновить или его разработчики не хотят этого делать.

Расположение Скопировать ссылку

Многие неправильно размещают кнопку за пределами области (навигации). Это может привести к тому, что пользователи скринридеров, которые перемещаются по с помощью горячих клавиш, решат, что область пустая, что не особо им поможет. Со списком, скрытым от скринридеров, они просто столкнулись бы с этим:

Вот как мы можем переключить состояние:

var navButton = document.querySelector('nav button'); navButton.addEventListener('click', function() < let expanded = this.getAttribute('aria-expanded') === 'true' || false; this.setAttribute('aria-expanded', !expanded); let menu = this.nextElementSibling; menu.hidden = !menu.hidden; >); 

ARIA-controls Скопировать ссылку

Как я уже писал в «Aria-controls Is Poop», атрибут aria-controls , который помогает пользователям скринридеров при переходе от контролирующего элемента к контролируемому, поддерживается только в JAWS. Так что на него нельзя положиться.

Без хорошего метода перемещения между элементами, вам нужно убедиться в том, что одно из следующего верно:

1. Первая ссылка раскрывающегося списка — следующая в порядке фокуса после кнопки (как в предыдущем примере кода).
2. При раскрытии списка на первую ссылку сделан фокус.

В нашей ситуации я рекомендовал бы первый вариант. Это намного проще, так как не нужно беспокоиться о перемещении фокуса обратно на кнопку и о том, какие события для этого нужны. Кроме того, сейчас нет ничего, что могло бы предупредить пользователей о том, что фокус будет перемещён в другое место. В настоящих меню, которые мы вскоре обсудим, за это отвечает aria-haspopup=»true» .

Использование aria-controls на самом деле не приносит большого вреда, за исключением того, что делает объявления в скринридере более подробным. Однако некоторым пользователям JAWS это может быть нужно. Вот как будет использоваться атрибут вместе с id для списка:

Меню и роли menuitem Скопировать ссылку

Настоящее меню (с точки зрения WAI-ARIA) должно себя идентифицировать с помощью роли menu (для контейнера) и, обычно, роли menuitem для дочерних элементов (или других ролей для подобных элементов). Эти роли для родителей и детей работают сообща и предоставляют вспомогательным технологиям нужную информацию. Вот как можно расширить список, добавив для него семантику меню:

Поскольку наше навигационное меню начинает вести себя как «настоящее» меню, не должно ли тут быть ролей menuitem ?

Краткий ответ — нет. Более подробный ответ: нет, потому что наши элементы списка содержат ссылки, а элементы menuitem не могут иметь интерактивных потомков. То есть они являются контролами в меню.

Мы хотим, чтобы пользователи знали, что они используют ссылку и могут ожидать от неё поведения ссылки, так что пример выше не очень хороший. Как я уже сказал, настоящие меню предназначены для (написанных на JavaScript) приложений.

То, что у нас осталось, это своего рода гибридный компонент, который не совсем настоящее меню, но, по крайней мере, сообщает пользователям, открыт ли список ссылок, благодаря состоянию aria-expanded . Это подходящий паттерн для навигационных меню.

Примечание. Элемент Скопировать ссылку

Если вы давно знакомы с адаптивным дизайном, то можете вспомнить паттерн, в котором навигация была свёрнута в элемент в небольших вьюпортах.

Как и в случае с переключателями на основе чекбоксов, которые мы обсуждали (см. в переводе — прим. переводчика), использование нативного элемента, который ведёт себя не так, как задумано, без дополнительного скрипта — хороший выбор. Особенно с точки зрения эффективности и производительности в случае мобильных устройств. Элементы — это своего рода меню, с семантикой, аналогичной меню, открывающееся кнопкой, которую мы скоро будем создавать.

Однако, так же как и с переключателем, основанном на чекбоксе, мы используем элемент, связанный со вводом данных, а не просто делаем выбор. Это может запутать многих пользователей, тем более, что этот шаблон использует JavaScript, чтобы выбранный элемент вёл себя как ссылка. Неожиданное изменение контекста, которое это вызывает, считается ошибкой согласно критерию 3.2.2 On Input (Level A).

Настоящие меню Скопировать ссылку

Теперь, когда мы обсудили ненастоящие меню и квази-меню, пришло время создать настоящее меню, которое открывается и закрывается настоящей кнопкой меню. С этого момента я буду называть вместе кнопку и меню — «кнопкой меню».

Но в каком случае наша кнопка меню может считаться настоящей? Что ж, это будет компонент меню, предназначенный для выбора параметров в приложении, который предусматривает всю нужную семантику и стандартное поведение для такого инструмента.

Как я уже упоминал, эти соглашения пришли из дизайна десктопных приложений. ARIA-атрибуты и управление фокусом с помощью JavaScript необходимы для их полной имитации. Одна из целей ARIA — помочь веб-разработчикам создавать сложные веб-интерфейсы и не нарушать при этом устоявшие паттерны взаимодействия, пришедшие из реального мира.

В этом примере мы представим, что наше приложение — это какая-то игра или викторина. Наша кнопка меню даёт пользователю выбрать уровень сложности. С учётом всей семантики меню выглядит следующим образом:

 Сложность ▾  
Лёгкая Средняя Очень высокая 
 

Примечания Скопировать ссылку

• aria-haspopup просто указывает на то, у кнопки есть скрытое меню. Это работает как предупреждение о том, что при нажатии на кнопку пользователь будет перемещён в выпадающее меню (скоро мы рассмотрим поведение фокуса). Его значение не меняется: оно всегда true .
• Элемент внутри кнопки содержит символ Юникод с маленьким чёрным перевёрнутым треугольником. Он визуально показывает, что нажатие на кнопку раскроет что-то под ней. Этого aria-haspopup не может показать. Атрибут aria-hidden=»true» не разрешает скринридерам объявлять «перевёрнутый треугольник» или что-то подобное. Благодаря aria-haspopup этого не нужно делать в невизуальном контексте.
• aria-haspopup дополняет aria-expanded . Атрибут сообщает пользователю, находится ли он в данный момент в открытом (развёрнутом) меню или оно закрыто (свёрнуто), переключаясь между значениями true и false .
• Само меню имеет (точно названную) роль menu . Для него нужны потомки с ролями menuitem . Они не обязательно должны быть прямыми потомками элемента menu . В этом примере так сделано для простоты.

Клавиатура и поведение при фокусе Скопировать ссылку

Когда дело доходит до того, чтобы сделать интерактивные контролы доступными для клавиатуры, лучшее, что вы можете сделать, это использовать правильные элементы. Поскольку здесь используются элементы , то мы можем быть уверены в том, что события по клику будут срабатывать при нажатии клавиш Enter и Space , как указано в HTMLButtonElement interface. Также это означает, что мы можем отключить пункты меню, используя связанное с кнопкой свойство disabled .

Есть намного больше способов взаимодействовать с кнопкой с клавиатуры. Вот краткий обзор поведения при фокусе с клавиатуры, которое мы будем реализовывать на основе WAI-ARIA Authoring Practices 1.1:

• Enter , Space или ↓ на кнопке меню — открывает меню.
• ↓ на пункте меню — перемещает фокус к следующему пункту меню или к первому, когда вы дошли до последнего пункта.
• ↑ на пункте меню — перемещает фокус к предыдущему пункту меню или к последнему, если вы находитесь на первом.
• ↑ на кнопке меню — закрывает меню, если оно открыто.
• Esc на пункте меню — закрывает меню и перемещает фокус на кнопку меню.

Преимущество перемещения фокуса между пунктами меню с помощью клавиш со стрелками состоит в том, что за Tab сохраняется функция выхода из меню. На практике это означает, что пользователям не нужно проходить через каждый пункт меню, чтобы выйти из меню. Это значительно улучшает юзабилити, особенно в меню, где много пунктов.

Добавление tabindex=»-1″ к пунктам меню делает их недоступными для фокуса с помощью Tab , но сохраняет возможность фокуса на элементах при нажатии на клавиши со стрелками.

 Сложность ▾  
Лёгкая Средняя Очень высокая 
 

Метод open Скопировать ссылку

Мы можем создать методы для обработки различных событий как часть продуманного дизайна API.

Например, метод open нужен для переключения значения aria-expanded на true , изменить значение меню hidden на false и сделать фокус на первом элементе меню с menuitem , который не скрыт:

MenuButton.prototype.open = function ()

Мы можем исполнить этот метод, когда пользователь нажимает клавишу вниз на кнопке меню, на которой сделан фокус:

this.button.addEventListener('keydown', function (e) < if (e.keyCode === 40) < this.open(); >>.bind(this)); 

Кроме того, разработчик, использующий этот скрипт, сможет теперь программно открывать меню:

exampleMenuButton = new MenuButton( document.querySelector('[aria-haspopup]') ); exampleMenuButton.open(); 

Примечание. Хак с чекбоксом Скопировать ссылку

Если вам не нужен JavaScript, то лучше не использовать его настолько, насколько это возможно. Использование третьей технологии поверх HTML и CSS всегда усложняет систему и приводит к появлению в ней слабых мест. Однако не все компоненты можно создать без использования JavaScript.

В случае с кнопками меню желание сделать их «работающими без JavaScript» привело к появлению так называемого хака с чекбоксом. В нём состояние checked (или unchecked ) скрытого чекбокса используется для переключения видимости элемента меню с помощью CSS.

/* Меню закрыто */ [type="checkbox"] + [role="menu"] < display: none; >/* Меню открыто */ [type="checkbox"]:checked + [role="menu"]

Для пользователей скринридеров роль чекбокса и состояние checked бессмысленны в этом контексте. Это можно частично исправить, добавив role=»button» для чекбокса.

К сожалению, это отменяет взаимодействие со встроенным состоянием checked , лишая нас обратной связи о состоянии элемента без JavaScript (что плохо, хотя в этом контексте это было бы так же связано с состоянием checked ).

Но это возможно имитировать с помощью aria-expanded . Нам просто нужно добавить наш лейбл к двум элементам со , как показано ниже.

  Сложность развёрнуто свёрнуто ▾  

Оба этих элемента визуально скрыты благодаря классу visually-hidden , но, в зависимости от того в каком состоянии мы находимся, только один из них скрыт от скринридера. То есть только одному задано свойство display: none и это определяется установленным (но не объявляемым) состоянием checked :

/* Класс, который скрывает визуально элементы со */ .vh < position: absolute !important; clip: rect(1px, 1px, 1px, 1px); padding:0 !important; border:0 !important; height: 1px !important; width: 1px !important; overflow: hidden; >/* Отобразить правильное состояние для скринридеров с помощью текущего состояния элемента */ [type="checkbox"]:checked + label .expanded-text < display: inline; >[type="checkbox"]:checked + label .collapsed-text < display: none; >[type="checkbox"]:not(:checked) + label .expanded-text < display: none; >[type="checkbox"]:not(:checked) + label .collapsed-text

Это разумное решение, но работа над нашей кнопкой меню всё ещё не закончена. Ожидаемое поведение фокуса, которое мы обсудили, просто не может быть реализовано без JavaScript.

Такое поведение принято и предсказуемо, оно делает кнопку более удобной. Однако, если вам действительно нужно сделать кнопку меню без JavaScript, то это самый подходящий вариант. Учитывая то, что урезанная кнопка навигационного меню, которую я рассмотрел ранее, предлагает контент меню, который не зависит от самого JavaScript (то есть ссылки), этот подход может быть подходящим вариантом.

Примечание: меню открывает только пробел.

Событие choose Скопировать ссылку

Исполнение некоторых методов должно вызывать события, чтобы мы могли настроить обработчики событий. Например, мы можем транслировать событие choose , когда пользователь кликает по пункту меню. Мы можем установить это с помощью CustomEvent , которое даёт нам возможность передавать аргумент в свойство события detail . В этом случае аргумент ( choice ) будет узлом DOM выбранного пункта меню.

MenuButton.prototype.choose = function (choice) < // Определить событие 'choose' var chooseEvent = new CustomEvent('choose', < detail: < choice: choice >>); // Передать событие (Dispatch the event) this.button.dispatchEvent(chooseEvent); return this; > 

Есть много всего, что мы можем сделать с помощью этого механизма. Возможно, у нас есть live region с id со значением menuFeedback :

Теперь мы можем настроить обработчик событий и заполнить live region информацией, скрытой внутри события:

exampleMenuButton.addEventListener('choose', function (e) < // Получить текст узла (label) var choiceLabel = e.details.choice.textContent; // Получить узел live region var liveRegion = document.getElementById('menuFeedback'); // Заполнить live region liveRegion.textContent = `Your difficulty level is $`; >): 

При выборе пункта меню пользователь скринридера услышит: «Вы выбрали [название пункта меню]». Изменения контента live region (которому задан здесь атрибут role=»alert» ) объявляются скринридерами при каждом его обновлении. Live region не является обязательным, но это пример того, что может произойти в интерфейсе, когда пользователь сделал выбор в меню.

Сохранение выбора Скопировать ссылку

Не все пункты меню нужны для выбора сохранения настроек. Многие из них ведут себя как стандартные кнопки, которые при нажатии приводят к тому, что что-то происходит в интерфейсе. Однако, в случае с нашей кнопкой меню со сложностью, мы хотели бы указать текущую настройку сложности. То есть ту, которая выбрана последней.

Атрибут aria-checked=»true» работает для элементов, которым вместо menuitem задана роль menuitemradio . Расширенная разметка со вторым выбранным элементом (установленным) выглядит так:

 Сложность ▾  
Лёгкая Средняя Очень высокая 
 

В нативных меню на многих платформах выбранные элементы отмечаются с помощью галочек. Мы можем это без проблем сделать, используя чуть больше CSS:

[role="menuitemradio"][aria-checked="true"]::before

При перемещении по меню с запущенным скринридером при фокусе на этом выбранном элементе он объявит что-то вроде: «Галочка, средний, пункт меню, выбрано».

Поведение при открытии меню с выбранным menuitemradio немного отличается. Вместо того, чтобы сделать фокус на первом (включённом) элементе в меню, фокус устанавливается на выбранном элементе.

Какая польза от такого поведения? Пользователь (любой) помнит о своём предыдущем выборе. В меню с многочисленными параметрами (например, с масштабом), люди, работающие на клавиатуре, находятся в оптимальном положении для изменения настроек.

Использование кнопки меню с помощью скринридера Скопировать ссылку

В этом видео я покажу вам как использовать кнопку меню в VoiceOver и Chrome. В примере используются элементы с ролью menuitemradio , атрибутом aria-checked и обсуждается поведение кнопки при фокусе. Таким образом ведут себя и другие популярные скринридеры.

Расшифровка Скопировать ссылку

Хейдон: Это кнопка меню со сложностью и я собираюсь протестировать её на VoiceOver в Chrome. Для начала я сделаю фокус на самой кнопке.

VoiceOver: Сложность, всплывающая кнопка.

Хейдон: Сначала вы услышите «Сложность» — это подпись. Затем «всплывающая кнопка», что означает её состояние, что ей задано area-expanded=»false» и что она всплывающая, потому что для неё установлено значение true в атрибуте aria-haspopup . Сейчас я открою меню с помощью клавиши со стрелкой вниз.

VoiceOver: Галочка, очень сложно, пункт меню, выбран, меню, пять пунктов.

Хейдон: Здесь много информации. Для начала «Галочка, очень сложная». Это подпись. Я использую псевдоэлемент для того, чтобы добавить галочку. «Пункт меню», потому что в этом случае это пункт меню с ролью menuitemradio . «Выбран», потому что задан атрибут aria-checked со значением checked . И также вы слышите, что в меню пять пунктов. Это потому, что этот пункт меню вместе с другими находится внутри элемента, которому задана роль menu . Сейчас я нажму на кнопку со стрелкой вниз, чтобы сделать фокус на пункте «Очень высокая».

VoiceOver: Очень высокая, пункт меню.

Хейдон: На этот раз вы услышали только подпись и роль элемента, потому что он очевидно не выбран. Для того, чтобы выбрать этот пункт, я нажимаю кнопку Enter .

VoiceOver: Сложность, всплывающая кнопка.

Хейдон: Это закрывает меню и перемещает фокус на саму кнопку меню «Сложность». Итак, вы вернулись туда, откуда начали.

Инклюзивная кнопка меню на Github Скопировать ссылку

Я и Хьюго Жирадель вместе работали над созданием компонента кнопки меню с фичами API, которые я описал, и ещё многим другим. Вы должны поблагодарить Хьюго за многие из этих фич, так как они основывались на работе над a11y-dialog — доступным модальным окном. Он есть на Гитхабе и в npm.

npm i inclusive-menu-button --save 

Кроме того, Хьюго сделал специально для вас версию кнопки на React.

Чеклист Скопировать ссылку

• Не используйте семантику ARIA для меню в случае с системами навигационных меню.
• На сайтах с большим количеством контента не скрывайте структуру в выпадающих меню.
• Используйте aria-expanded у кнопок для того, чтобы сообщить о том, что навигационное меню открыто или закрыто.
• Убедитесь, что навигационное меню следующее в порядке фокуса после кнопки, которая его открывает и закрывает.
• Никогда не жертвуйте юзабилити ради решений без JavaScript. Это заносчиво.

1С:Предприятие 8. Фастфуд. Фронт-офис

Изменение цен на «1С:Предприятие 8. Фастфуд. Фронт-офис» с 1 апреля 2024 г. Ознакомиться с новыми ценами можно здесь.

Решение предназначено для автоматизации предприятий общественного питания, работающих в формате быстрого обслуживания (без официанта).

С помощью решения могут быть автоматизированы такие предприятия общественного питания как: одиночные и сетевые столовые, сети ресторанов быстрого питания, фудкорты, буфеты, кафе, бары и закусочные, рестораны формата фри-фло, пекарни и кондитерские, объекты корпоративного и индустриального питания, а также точки уличного питания, фудтраки и выездной кейтеринг (обслуживание мероприятий).

Конфигурация создана на основе «1С:Розница» и дополняет типовые функциональные возможности отраслевой спецификой бизнеса

ОТРАСЛЕВЫЕ ОСОБЕННОСТИ УЧЕТА

Интеграция с сервисами Яндекс.Еда и Delivery Club. Дистанционное обслуживание клиента и доставка не проблема! Бесшовная интеграция позволяет автоматически получать заказы из сервиса. Полное сопровождение жизненного цикла заказа: отправка меню и цен в сервис Яндекс.Еда/Delivery Club, автоматическое получение заказов с уже примененными маркетинговыми акциями, исполнение заказов на доставку силами своей курьерской службы или курьеров сервиса.

Самостоятельная работа без бэк-офиса – в самом простом варианте использования, для автоматизации процесса обслуживания гостей, достаточно ввести информацию о меню, назначить цены и можно приступать к регистрации продаж.

Два вида пользовательского интерфейса: обычный для ведения учета и настроек системы, и специализированный для работы персонала с использованием сенсорного экрана POS-терминала.

Для авторизации пользователем могут использоваться как виртуальная клавиатура, так и подключенные к системе считыватель карт или сканер штрих кода.
Подбор товаров и блюд в заказы может осуществляться на POS-терминалах при помощи «сенсорного» меню, «горячими» клавишами, по коду или штрих-коду, а указание количества – вручную, повторным выбором позиций или приемом веса с электронных весов.

Расширенные настройки интерфейса под каждый конкретный случай. В зависимости от структуры меню заведения можно полностью изменить порядок отображения разделов, каждый из которых можно настроить индивидуально.

Предусмотрена возможность вносить изменения в интерфейс, согласно индивидуальным предпочтениям сотрудника.

Например, кассир может: Увеличивать и уменьшать размеры кнопок элементов меню, Задавать количество колонок и строк, Управлять размером шрифта, Менять размеры таблицы заказа посредством уменьшения или увеличения шрифта.

Для мониторов разного разрешения и размера отображение структуры меню может быть изменено.

Использование нескольких видов меню (без ограничений) с ручным или автоматическим выбором при оформлении/корректировке заказа. Доступность меню по дате, времени, дням недели. При этом для одного блюда могут быть установлены разные цены для каждого вида меню.

Наименование позиции в меню может отличаться от наименования товара/блюда в справочнике Номенклатура, что позволяет выводить на экран кассирам и на печать оптимальную информацию.

Кроме видов меню поддерживается работа с модификаторами. Например, блюдо «Пельмени» может подаваться с модификаторами «уксус» или «майонез». При этом модификаторами могут быть как товары с ценой или без нее, так и инструкции по приготовлению. Модификаторы можно объединять в наборы. К модификаторам можно применять ограничения по количеству, например при продаже блюда должен быть выбран хотя бы один, но не более двух модификаторов.

С использованием механизма модификаторов реализована работа комплексными обедами. В этом случае в качестве блюда при продаже выбирается «Бизнес ланч», а в качестве модификатора к нему указывается набор модификаторов «Первое», который в свою очередь состоит из блюд «Борщ» и «Суп-гуляш», и хотя бы один из этих модификаторов обязательно должен быть выбран.

Управление лояльностью – ручные скидки, дисконтные карты, бонусы, настройка и применение различных автоматических дисконтных схем: скидки по дате и времени, скидки на позицию или сумму чека, «3-я кружка бесплатно» и т.д.

Различные виды оплат при расчетах с гостем. Оплата наличными или банковской картой. Подарочные сертификаты, депозитные карты, талоны, питание персонала и представительские расходы.

Для расчета одного заказа можно комбинировать неограниченное количество видов оплат. В зависимости от настроек системы, каждый вид оплаты может формировать документы реализации или документы списания. Например, можно настроить для вида оплаты «представительские расходы» при загрузке продаж в бэк-офис 1С:Общепит автоматическое формирование документа «Списание», который сразу в бухгалтерском учете правильно отразит такой вид продажи.

Автоматизация современного городского фастфуда – рабочие места Кассир, Кухня, Комплектовщик, Электронная очередь. Также поддерживается и классическая настраиваемая схема автоматической печати заказов на сервис-принтерах кухни в зависимости от места приготовления блюда.

Рабочее место Кассир. Выбор вида меню, настройка интерфейса под себя (количество рядов, строк, размер кнопок и шрифта, вида отображения меню — иерархически, с группами, сплошным списком), оформление заказа гостя.

Прием оплаты. В нижней части кнопки управления заказом и две быстрых кнопки оплаты. Сюда выводятся самые популярные способы расчета, что позволяет кассиру закрывать заказ одним нажатием на кнопку в 90% случаев.

Выданный гостю чек об оплате содержит номер заказа, для отслеживания гостем его готовности на табло электронной очереди.

Рабочее место Кухня. Интерфейс для поваров, комплектовщиков, администраторов кухни, который отображает все текущие заказы, их состав, статус приготовления. Количество строк в заказе, колонок может быть настроено в зависимости от размера и разрешения экрана.

Повар принимает заказ, изменяет его статус в процессе приготовления, отмечает приготовленные, что позволяет администраторам видеть и управлять загруженностью кухни.

Статус позиций в заказе и заказа в целом используется комплектовщиками для выдачи заказов гостям. Комплектовщики собирают заказ и отдают его гостям, контролируя при выдаче номер заказа на чеке у гостя.

Электронная очередь. Над раздачей размещаются экраны, на которых отображаются все заказы — находящиеся в работе и уже готовые к выдаче. Гость по номеру своего чека самостоятельно отслеживает статус своего заказа.

Доставка. Блок доставки позволяет полноценно отражать в системе каждый этап работы службы доставки заведения — от принятия заказа до доставки клиенту.

После получения заказа, менеджер вносит информацию о клиенте, его контактные данные, адресе доставки и самом заказе.

Затем заказ перемещается на кухню, приобретая статус “Готовится” и по приготовлению отправляется на сборку и доставку. Каждый из сотрудников может отслеживать на каком этапе находится заказ, кто ответственный и т.д.

Call-центр. Частный случай работы с доставкой, когда речь идет о сетевой структуре организации. Несколько точек приготовления. Единая точка приема заказов:



Рабочее место Call-центр предназначено для приема заказов следующими способами: входящие звонки, получение заказов от агрегаторов доставки, получение заказов с web-сайта, мобильное приложение гостя. Для этих целей предусмотрены специализированные инструменты:

• Интеграция с агрегаторами доставки Яндекс.Еда и Delivery Club. Данные сервисы позволяют клиентам оформлять заказы, используя свои площадки (веб сайт, мобильное приложение и т.п.), выделяют курьеров для доставки еды, а также представляет детальную информацию о получателях заказов при использовании внутренних курьеров. При этом данная интеграция позволяет автоматизировать процесс передачи нормативно-справочной информации и заказов между информационной базой и сервисами.
• Интеграция с внешними системами через открытый API. Веб-сайты, мобильные приложения и т.п. В частности, возможна передача нормативно-справочной информации во внешние системы и получение заказов из них.

• Благодаря взаимодействию с решением «1С-Рарус: Интеграция с телефонией (СофтФон)», автоматизирована работа с телефонией в АРМ Call-центр и АРМ Доставка. Данная интеграция позволяет управлять звонками, выполнять автоматическое определение клиента по входящему номеру абонента, выполнять автосоздание заказов, автоматически подставлять номер в новый заказ и многое другое.
• Обработка «Телефония», позволяет произвести настройки, просмотреть историю входящих и исходящих звонков с текущего рабочего места, а также выполнять исходящие звонки, не находясь в режиме фронта.

• Работа с мобильным приложением «Мобильный курьер». Интеграция с данным приложением позволит автоматизировать процесс взаимодействия и управления курьерами, контролировать их месторасположение, предоставит возможность курьерам самостоятельно принимать заказы и многое другое.
• Важной частью работы с клиентами и гостями является их своевременное уведомление о работе с их заказами. Для этого добавлена возможность отправки SMS сообщений клиентам о статусе заказа, а так же курьерам с произвольным текстом.
• Отчеты доставки.

Для анализа деятельности предприятия в режиме «Доставка» предусмотрен пул отчетов, позволяющих получить как наглядное понимание ситуации через графики и диаграммы, а также подробно изучить каждую операцию через традиционные табличные отчеты:

Полный список отчетов по режиму Доставка:

• «Доставки по блюдам» позволяет получить информацию о наиболее популярных заказанных товарах.
• «Доставки по часам» позволяет получить информацию о пиковой нагрузке зон доставки по часам.
• «Доставки по зонам доставки» позволяет получить информация о загруженности зон доставки.
• «Доставки по источникам» позволяет получить информация об источниках заказов доставки.
• «Доставки по клиентам» позволяет получить информация о наиболее лояльных и активных клиентах.
• «Доставки по курьерам» позволяет оценить загруженность и качество работы курьеров.
• «Оплаты по доставкам» позволяет проанализировать способы оплаты заказов.
• «Причины отмен доставок» позволяет проанализировать причины и количество отменных заказов.

Складской и производственный учет:

• упрощенный режим, без бэк-офиса: использование типового механизма «Сборка товаров в наборы» базовой конфигурации «1С:Розница» (составление «набора» для каждого блюда – комплектация блюда ингредиентами, списание ингредиентов и оприходование блюда, отражение остатков в складском учете).
• расширенный учет, подключение в качестве бэк-офиса линейки решений 1С:Общепит или 1C:Управление предприятием общепита: технологические и калькуляционные карты, отраслевые печатные формы серии «ОП», расчет себестоимости выпуска с учетом отраслевой специфики (потери при обработке, аналоги, сезонные коэффициенты перерасхода сырья, вложенные полуфабрикаты, учет недовложений), учет химико-энергетических показателей (ХЭХ) кулинарной продукции.

Широкий спектр подключаемого торгового оборудования. Доступны все модели торгового оборудования, подключаемые к 1С:Розница через «1С:Библиотека подключаемого оборудования 8».

Обмен данными:

• ЕГАИС — поддерживаются два варианта работы со вскрытием тары: создание акта вскрытия бутылки с отправкой в бэк-офис «1С:Общепит» для дальнейшей обработки или создание акта вскрытия с отправкой документа списания в ЕГАИС непосредственно из «1С:Фастфуд» минуя бэк-офис.

• Сервисы безналичных чаевых – CloudTips, Delivery Club Tips, СберЧаевые, Нетмонет, ЧаЧаЧай, Яндекс Чаевые, 2tip (по мере подключения других систем список постоянно расширяется).
• Прием оплаты с помощью СБП (оплата по QR-кодам) через банки «СКБ» и «Открытие» (список планируется расширять по мере подключения других банков).
• 1С:Отель – общее платежное пространство для гостя с единой точкой расчета на ресепшн отеля. Например, гость может услуги ресторана «записать на свой номер» и оплатить их при выезде из отеля. Реализовано получение данных о скидках из 1С:Отель, что позволяет регулировать стоимость блюд для разных тарифов гостиницы и статусов гостя, а также поддерживать единую политику управления лояльностью.
• Интеграция с решением для киосков «1С-Рарус:Терминал самообслуживания».
• Депозитно-дисконтные и бонусные сервера для реализации собственных программ лояльности, поддержки схемы расчетов «карта на входе» или организации корпоративного и дотационного питания сотрудников предприятия (персонифицированный учет сотрудников, лимиты дотаций по количеству приема пищи или сумме в день\неделю\месяц с ограничением используемого набора блюд в дотациях, а также учет спец. питания (сухие пайки, молоко «за вредность» и т.д.). Для этого в решении предусмотрен открытый интерфейс обмена данными, который позволяет подключать внешние сервисы различного назначения (первыми таким подключенными и работающими сервисами стали агрегаторы доставки Яндекс.Еда и Delivery Club, а также «РестАрт:Депозитно-дисконтный сервер» от компании «1С-Рарус»). С его помощью можно бесшовно интегрировать в общую систему мобильные приложения, сайты доставки или бронирования столиков, системы управления лояльностью и т.д.

• обеспечить высокую надежность, производительность и масштабируемость системы;
• организовать работу с системой через Интернет, в режиме тонкого клиента или веб-клиент (через обычный интернет-браузер), в том числе в «облачном» режиме;
• создавать мобильные рабочие места с использованием планшетов и иных мобильных устройств;
• настраивать интерфейс для конкретного пользователя или группы пользователей с учетом роли пользователя, его прав доступа и индивидуальных настроек.