Designing a self-ordering kiosk menu interface
Quick answer: DigitalSignage.com's rules for a self-ordering kiosk menu interface: eight screens at most (attract, category, item, modifiers, one upsell, cart, pay, confirm), touch targets of at least 24 by 24 CSS pixels under WCAG 2.2 with 44 pixels as the planning figure, 6 to 8 categories and 6 to 9 items per screen, one photo style, calories beside the price where 21 CFR 101.11 applies, and a 60 to 120 second timeout with a 20 second warning. The ordering app and payment come from the kiosk or POS vendor; DigitalSignage.com SignStudio builds the attract loop and menu boards around the kiosk, with touch components on mediaCLOUD Plus+.
Key facts
- A plain item should reach the cart in 5 to 7 taps and the whole order in no more than 8 screens; every extra screen is a chance to abandon.
- WCAG 2.2 success criterion 2.5.8 sets a 24 by 24 CSS pixel minimum target; the common planning figure of 44 pixels is 11 mm on a 22-inch 1080p screen and 16 mm on a 32-inch 1080p screen.
- WCAG contrast is 4.5:1 for normal text and 3:1 for large text; price and allergen text should meet 4.5:1.
- 21 CFR 101.11 requires calorie counts on menus and menu boards at chains with 20 or more locations, and a self-ordering kiosk is a menu under that rule.
- A 60 to 120 second idle timeout with a warning at least 20 seconds before it, and a session that clears on timeout, is the practical minimum from our ADA kiosk guide.
- In the worked example, moving the one upsell prompt from the cart to the item screen on 500 kiosk orders a day is worth $5,265 a year of margin, before measuring what the extra screen costs in abandonment.
Last updated November 4, 2026.
What screens does a self-ordering kiosk flow need?
Eight screens cover every order, and the goal is to pass through as few of them as the item needs: attract, category, item, modifiers, one upsell, cart, pay and confirm. The table gives each screen's purpose, the taps a customer should need to leave it and the content rules that keep it fast.
| Screen | Purpose | Taps to pass | Content rules | Who builds it |
|---|---|---|---|---|
| Attract | Draw people over and say "touch to order" | 1 | 10 words or fewer, one short video or 3 slides, the languages offered, a visible status | DigitalSignage.com SignStudio as a scheduled attract loop, or the kiosk app's idle screen |
| Category | Choose a group | 1 | 6 to 8 tiles with a photo each; "eat in or take away" asked here or on the attract | Kiosk app |
| Item | Choose an item | 1 | 6 to 9 items with name, price, photo and calories where required | Kiosk app |
| Modifiers | Size, options, removals | 1 to 3 | Required choices first, defaults preselected, one group per screen on small displays | Kiosk app |
| Upsell | One add-on offer | 1 | One offer, one photo, two large buttons | Kiosk app |
| Cart | Review and edit | 1 | Line items with quantity controls, totals, a clear "checkout" button | Kiosk app |
| Pay | Choose a method and pay | 1 to 2 | The terminal prompt, an optional tip prompt, a QR to pay on the phone | Kiosk app and the payment terminal |
| Confirm | Order number and where to collect | 0 | A large order number, receipt choice, auto-return to the attract loop after about 10 seconds | Kiosk app; the order-status board above the counter from SignStudio |
Bottom line: a plain item passes through six of the eight screens in 5 to 7 taps; modifiers and the upsell are the only screens allowed to add taps, and everything else, from loyalty to surveys, moves to the receipt or to a screen above the kiosk.
Three questions have fixed homes. "Eat in or take away" is asked once, on the attract or the first category screen, because the kitchen and the tax may depend on it. Language is offered on the attract and stays available on every screen. Loyalty is scanned at pay, never before ordering, because a sign-in wall at the start is the single biggest cause of walk-aways.
The back button and the progress indicator are the two controls that never move. Put "back" in the same corner on every screen and show "step 2 of 5" so a customer knows the end is near. Our self-service ordering kiosk guide covers the POS integration and kitchen routing behind these screens.
How big should touch targets be on an ordering kiosk?
WCAG 2.2 success criterion 2.5.8 sets the floor at 24 by 24 CSS pixels, and a common planning figure for a public kiosk is 44 pixels or about 10 mm, with 8 pixels of space between targets. Pixels are not millimetres, so the table converts both figures for the common kiosk panels.
| Panel | Picture width | mm per pixel | 24 px minimum | 44 px planning figure | 60 px comfortable |
|---|---|---|---|---|---|
| 15.6 in 1080p | 13.6 in, 345 mm | 0.180 | 4.3 mm | 7.9 mm | 10.8 mm |
| 22 in 1080p | 19.2 in, 487 mm | 0.254 | 6.1 mm | 11.2 mm | 15.2 mm |
| 27 in 1080p | 23.5 in, 598 mm | 0.311 | 7.5 mm | 13.7 mm | 18.7 mm |
| 32 in 1080p | 27.9 in, 709 mm | 0.369 | 8.9 mm | 16.2 mm | 22.1 mm |
| 43 in 4K | 37.5 in, 952 mm | 0.248 | 6.0 mm | 10.9 mm | 14.9 mm |
Bottom line: 44 pixels reaches the 10 mm planning figure on a 22-inch or larger 1080p panel; on a 15.6-inch tablet use 56 pixels, and on a 4K panel double every pixel count because each pixel is half the size.
The millimetre is what matters to a finger. An adult fingertip contact patch is roughly 10 mm across, so a 10 mm target with 2 mm of space is the practical minimum and 15 mm is comfortable for a hurried user holding a bag. The 44-pixel figure is a shortcut that happens to give 10 to 16 mm on the panels most kiosks use.
Spacing prevents the wrong tap more than size does. Two 44-pixel buttons touching each other produce more mis-taps than two 36-pixel buttons with 12 pixels between them. Keep 8 pixels or more between every pair of targets, and more between "add to order" and "remove", which should never sit side by side.
How many categories and items should each screen show?
Six to eight categories on the first screen and six to nine items per category screen, in a 2 by 3 or 3 by 3 grid, with no more than three levels of depth. A 40-item menu becomes 6 categories of about 7 items, and every item is two taps from the category screen.
Scrolling is allowed but should not be needed for the first screenful. Put the best sellers in the first six tiles and let the rest scroll; a customer who sees a full grid starts choosing, while one who sees a half-empty grid looks for a staff member. Our word budget guide sets the text limits per screen.
Type size at arm's length is generous compared with a menu board. Our ADA kiosk guide sets 16 pixels as the minimum body size; a planning figure for item names is 28 to 36 pixels on a 22 to 32 inch 1080p panel, with prices the same size as the name. Our font guide for digital signage covers faces with clear numerals, which matter most on a price grid.
What are the photography rules for a kiosk menu?
One angle, one background, one crop and real portions, for every item, is the rule; a kiosk menu with mixed photo styles reads as untidy and makes items hard to compare.
- Shoot every item from the same angle (three-quarter from above is the usual) on the same neutral background with the same lighting.
- Crop to one ratio for the whole menu, square or 4:3, at the pixel size the tile uses; our image optimization guide covers sizes and compression.
- Show the portion the customer gets, in the packaging it comes in for takeaway items.
- Put no text in the photo; price, size and calories live in the tile's text so they can change without a reshoot.
- Use one neutral placeholder for items without a photo rather than a mix of stock images.
- Reshoot seasonal items each season and the core menu when packaging changes.
Photos drive the upsell screen as much as the item screen. The add-on offer gets the same photo treatment as a main item, and a well-lit cookie outsells a text-only "add a cookie" line. Keep the photo library in one shared folder so the kiosk app and the SignStudio menu boards use the same images.
Where do allergens and calories go on a kiosk menu?
Calories sit beside the price on the item tile in the same size as the price, allergen icons sit on the item screen with a filter on the category screen, and the daily calorie statement goes where the rule puts it. For chains with 20 or more locations, 21 CFR 101.11 treats a self-ordering kiosk as a menu; our FDA menu labeling guide sets out the rule, so this page does not restate it.
How do you make an ordering kiosk accessible?
Reach, contrast, target size, time limits, language, audio and a staffed fallback are the seven accessibility needs, and each has a number or a rule from the ADA 2010 Standards or WCAG 2.2. The table shows where each one appears in the interface.
| Need | Rule or figure | How it shows up in the interface |
|---|---|---|
| Reach | ADA 308: operable parts 15 to 48 inches above the floor | Every control in the lower reachable band; a "lower the menu" button at the bottom of tall portrait screens |
| Contrast | WCAG 4.5:1 for normal text, 3:1 for large text | Price, allergen and button text at 4.5:1; see color contrast for digital signage |
| Target size | WCAG 2.5.8 minimum 24 px; 44 px or 10 mm planning figure; 8 px spacing | Buttons from the table above; no adjacent "add" and "remove" |
| Time limits | Warn 20 seconds before a timeout, allow an extension; 60 to 120 seconds default | A visible countdown with "I need more time"; the session clears on timeout |
| Language | A language switch on the attract and every screen | Plan for 30 percent text expansion as a planning figure; see multi-language localization |
| Audio and non-visual use | A headphone jack with audio prompts; a tactile keypad for the PIN | The kiosk vendor's accessibility mode; the payment terminal's raised keys |
| Cognitive load | One task per screen, a fixed back button, a progress indicator, plain words | No marketing copy on task screens; "Sold out" rather than a greyed tile |
| Staffed fallback | A counter or a help button | "Need help? Order at the counter" on the attract and the pay screen |
Bottom line: reach and target size are physical and decided before the first screen is drawn; contrast, time limits and language are software settings that cost nothing; audio and the tactile keypad come from the kiosk and payment vendors.
Our ADA kiosk compliance guide has the full checklist, including the 30 by 48 inch clear floor space and the 27 inch knee clearance. The one interface habit that fails most audits is the timeout without a warning: a slower customer loses the order at screen five and the kiosk returns to the attract loop with no explanation.
Who builds the attract loop and who builds the ordering app?
The kiosk or POS vendor supplies the ordering application and the payment, and DigitalSignage.com SignStudio supplies the attract loop, the menu boards above the counter and the order-status board; ordering applications and payment processing are not DigitalSignage.com features.
The two share a menu source. Prices and sold-out flags kept in a Google Sheet feed the SignStudio menu boards through the Google Sheets component, which shows the sheet and updates when the sheet changes; POS integration, an Enterprise feature, feeds the boards from the till. The kiosk app reads the same POS, so one price change reaches the boards and the kiosk together. See POS integration.
SignStudio's own touch components can build the flow where no payment is taken on screen. Buttons, lists, Form Input, a soft keyboard and a shopping cart with multi-screen synchronization send items to a kitchen screen without code; payment happens at the counter or through a QR code to the vendor's web payment page. That suits a prototype, a table-side tablet or a no-payment kiosk, not a replacement for the vendor's app.
Whether SignPlayer and a third-party ordering app can share one kiosk screen, where Form Input submissions are delivered, and how kiosk sessions are logged are not covered in our documentation; ask support (support@digitalsignage.com, live chat at https://chat.digitalsignage.com/). A locked-down full kiosk presentation is an Enterprise feature; touch components are on mediaCLOUD Plus+.
15 interactive menu board ideas
The ideas below are grouped by where they run: in the kiosk app, in SignStudio on the boards around it, or in both from one shared sheet. None needs custom code on the signage side.
| # | Idea | When to use it | Where it runs |
|---|---|---|---|
| 1 | Tap-to-filter by diet (vegetarian, vegan, gluten-free) | Mixed menus, campus dining | Kiosk app; a SignStudio list on a Plus+ touch board |
| 2 | Build-your-own visualiser that stacks toppings as you tap | Pizza, bowls, burgers, salads | Kiosk app |
| 3 | "Most ordered right now" tile from today's sales | QSR peaks, new menus | Kiosk app from the POS; boards through POS integration on Enterprise |
| 4 | Daypart switch, breakfast grid to lunch grid at 10:30 | Cafes, bakeries | SignStudio campaigns by time window and screen group; the kiosk app's dayparts |
| 5 | Sold-out items hide themselves from a shared sheet | Bakeries, daily specials | Google Sheets component on the boards; the POS 86 list in the kiosk app |
| 6 | One pair-it prompt per item (fries with the burger) | Every QSR | Kiosk app upsell screen |
| 7 | Calorie-sorted or "under 500 calories" view | Health-led brands, gyms | Kiosk app |
| 8 | Language toggle with the languages of the neighbourhood | Tourist areas, campuses | Kiosk app; alternate SignStudio scenes on the boards |
| 9 | QR to finish and pay on the phone when the line is long | Peak queues | QR component on Plus+ on the attract screen or a board |
| 10 | Kids' menu with pictures only and three choices | Family restaurants | Kiosk app |
| 11 | Order-ready board that shows the number from the confirm screen | Every counter | SignStudio with a shared sheet or the vendor's public status page in the Web Page component |
| 12 | Combo builder with a running total | Value menus | Kiosk app |
| 13 | Allergen lookup by ingredient | Schools, hospitals, airports | Kiosk app; a SignStudio list on a touch board |
| 14 | Loyalty scan at the end, never at the start | Chains with an app | Kiosk app at the pay screen |
| 15 | Table-side ordering tablet synced to a kitchen screen | Casual dining, food halls | SignStudio shopping cart with multi-screen synchronization on Plus+; payment at the counter or through the POS vendor |
Bottom line: ideas 1, 2, 6, 7, 10, 12 and 14 live in the kiosk app; 4, 5, 9 and 11 are SignStudio boards fed by a sheet, a schedule or a public page; and 3, 8, 13 and 15 can run on either side from the same source.
The order-ready board, idea 11, is the one that improves the kiosk most for the least money. A customer who sees their number move across a screen above the counter stops asking staff and stops crowding the pickup point. Our digital menu boards guide covers the boards, and the point-of-sale advertising guide covers the offer on the same screen.
Worked example: an upsell screen
A quick-service restaurant runs one add-on offer per kiosk order, "add a cookie for $1.50", and wants to know whether to show it in the cart or right after the main item is chosen. Every input is an assumption to replace with the restaurant's own numbers.
Assumptions, every one of them yours to change:
- 500 kiosk orders a day over 360 days.
- The add-on sells for $1.50 at 65 percent gross margin.
- Acceptance is 12 percent when the offer appears in the cart and 15 percent when it appears right after the main item.
- The average order is $9.00 at 60 percent margin, and the extra screen is tested for 2 weeks for any change in abandonment.
- The kiosk is a 22-inch 1080p portrait panel at 0.254 mm per pixel.
| Step | Calculation | Result |
|---|---|---|
| 1. Accepted per day in the cart | 500 x 0.12 | 60 |
| 2. Margin per day | 60 x $1.50 x 0.65 | $58.50 |
| 3. Margin per year | $58.50 x 360 | $21,060 |
| 4. Accepted per day after the item | 500 x 0.15 | 75 |
| 5. Margin per year after the item | 75 x $1.50 x 0.65 x 360 | $26,325 |
| 6. Gain from moving the screen | $26,325 - $21,060 | $5,265 a year |
| 7. Abandonment check | If the extra screen loses 0.5 percent of orders: 2.5 x $9.00 x 0.60 x 360 | $4,860 a year lost, so the net gain falls to $405 |
| 8. Decision rule | Keep the earlier screen only if measured abandonment rises by less than 0.5 percent | Measure for 2 weeks before deciding |
| 9. Screen layout | Headline 48 px, photo 600 x 450 px, two buttons 480 x 120 px | Buttons are 122 x 30 mm on the 22-inch panel, far above the 11 mm planning figure |
| 10. Button labels | "Yes, add a cookie $1.50" and "No thanks" in the same size and weight | No dark-pattern sizing; the decline button is as easy to hit as the accept |
Bottom line: the earlier offer is worth $5,265 a year on paper, but a 0.5 percent rise in abandonment wipes out $4,860 of it, so the test must log walk-aways as well as acceptance before the screen moves.
Step 7 is the discipline of kiosk design in one line: every screen that adds revenue also adds a chance to leave. The restaurant's kiosk console logs both acceptance and abandoned sessions; the POS report gives the order counts. Run the two layouts on alternate days for two weeks, which our A/B testing guide explains for screens, and keep the layout with the higher net figure.
How to build the attract loop and menu boards in DigitalSignage.com
The attract loop, the menu boards and the order-ready board are ordinary SignStudio scenes, so they run on the free plan for the first 3 screens on displays the restaurant already owns.
- Create a free DigitalSignage.com account and build three scenes at each screen's native resolution: the attract loop ("Touch to order", the languages, a short video), the menu boards and an order-ready board.
- Keep prices, sold-out flags and the order-ready numbers in a Google Sheet shared with SignStudio; the Google Sheets component shows the sheet and updates when it changes, so staff edit from a phone. Prices from the till need POS integration, an Enterprise feature.
- Schedule dayparts as campaigns with a date range, days of the week and a time window, assigned to a screen group such as Menu Boards, so the kiosk app's dayparts and the boards switch together.
- If the kiosk screen itself runs SignPlayer, build the attract scene with Touch Button components (navigate to a scene, open a URL, call an API, play media, show a popup) on mediaCLOUD Plus+, and set the idle timeout so the scene returns to the scheduled attract loop.
- Install the free DigitalSignage.com SignPlayer on each player and pair it by typing the registration code shown on the screen into SignStudio under Register SignPlayer.
SignPlayer caches scenes and media locally and switches campaigns on its own clock, so the boards keep playing through an outage; the shared sheet pauses until the connection returns. Our SignStudio menu board setup guide walks through the board build step by step.
Frequently asked questions
Designing a self-ordering kiosk menu interface
Use eight screens at most (attract, category, item, modifiers, one upsell, cart, pay, confirm) so a plain item reaches the cart in 5 to 7 taps. Size touch targets at 44 pixels or about 10 mm with 8 pixels of spacing (WCAG 2.2 sets a 24 pixel minimum), show 6 to 8 categories and 6 to 9 items per screen, shoot every photo in one style, put calories beside the price where 21 CFR 101.11 applies, and set a 60 to 120 second timeout with a 20 second warning. The kiosk or POS vendor builds the ordering app; SignStudio builds the attract loop and the boards.
How many screens should a kiosk ordering flow have?
Eight at most: attract, category, item, modifiers, one upsell, cart, pay and confirm. A plain item should pass through six of them in 5 to 7 taps; only modifiers and the single upsell may add taps. Loyalty sign-up, surveys and marketing move to the receipt or to a screen above the kiosk, because every extra screen is a chance to abandon the order.
How big should buttons be on a touch screen kiosk?
At least 24 by 24 CSS pixels under WCAG 2.2 success criterion 2.5.8, with 44 pixels or about 10 mm as the common planning figure and 8 pixels between targets. On a 22-inch 1080p panel 44 pixels is 11 mm and on a 32-inch 1080p panel 16 mm; on a 15.6-inch tablet use 56 pixels to reach 10 mm, and on a 4K panel double the pixel counts.
Do self-ordering kiosks need calorie counts?
At chains with 20 or more locations, yes: 21 CFR 101.11 requires calories on menus and menu boards, and a self-ordering kiosk is a menu under the rule. Put the calorie figure beside the price on the item tile in the same size as the price and show the daily calorie statement where the rule places it. Our FDA menu labeling guide covers the rule in full.
How long should a kiosk menu timeout be?
A default of 60 to 120 seconds for a simple order, with a visible warning at least 20 seconds before the timeout and a button to extend it, is the practical minimum from our ADA kiosk guide. On timeout the session clears and the screen returns to the attract loop, which also protects the next customer's privacy.
Can I build an ordering kiosk in DigitalSignage.com?
You can build the attract loop, the menu boards, the order-ready board and a no-payment ordering flow: SignStudio's touch components on mediaCLOUD Plus+ include buttons, lists, Form Input, a soft keyboard and a shopping cart with multi-screen synchronization that sends items to a kitchen screen without code. Payment processing is not a DigitalSignage.com feature; it needs a certified terminal and the kiosk or POS vendor's application. A locked kiosk presentation is Enterprise; for anything else, ask support.
What are good interactive digital menu board ideas?
Diet filters, a build-your-own visualiser, a most-ordered tile from the POS, daypart switching, sold-out items that hide from a shared sheet, one pair-it prompt per item, a calorie-sorted view, a language toggle, a QR to finish on the phone, a pictures-only kids' menu, an order-ready board, a combo builder, allergen lookup, loyalty at the end and a table-side tablet synced to the kitchen screen. The table above says which run in the kiosk app and which on SignStudio boards.
Related guides
- Self-service ordering kiosks for restaurants and retail
- Digital menu boards implementation guide
- Best fonts for digital signage
- FDA menu labeling compliance for digital menu boards
- ADA accessibility compliance for kiosks
- How many words should a digital sign have?
- Color contrast for digital signage
- Point-of-sale advertising and upselling on screens
- Touch screen kiosk displays: sizes, touch technology and enclosures
Try it on your own screens, free
DigitalSignage.com, which publishes this guide, runs a permanent free plan: the first 3 screens are free forever (no credit card, no ads, no watermark, no time limit), then from $3 per screen per month on Plus+. Once an account has 4 or more screens, every screen is billed, so 10 screens cost $360 a year; Enterprise is priced per screen in the public price calculator. The free DigitalSignage.com SignPlayer runs on Windows, Mac, Android and Android TV, Chrome OS, Raspberry Pi, iPad or any modern web browser, so the hardware you already own usually works. Start free · pricing · How 11 vendors compare on price
Maintained by MediaSignage Inc., operator of DigitalSignage.com since 2006. Product behavior on this page comes from our own SignStudio and SignPlayer documentation; where we do not document a step, this page says so instead of guessing. Last reviewed November 4, 2026.