Build an interactive touchscreen kiosk menu

What you need

A touch screen sized to the spot: counter units commonly run 10 to 15 inches and wall units larger. The sizing logic is the same as for any touch kiosk screen whatever it plays, so pick the size and resolution first and build the pages to the panel's native pixels, as laid out in sizing a touch wayfinding kiosk screen.

A small computer to run the menu: any compact PC that runs a browser with a kiosk mode. It drives the touch monitor over HDMI or DisplayPort and reads the touches over USB. Some signage players accept a web page as their content instead; what to know about a web page signage player covers what that route asks of your build.

The content: finished videos and photos for each segment. The menu itself is a folder of simple pages, built in the steps further down.

Shape the menu two levels deep

Two levels is the whole tree. The home screen carries one button per product segment, two to four of them; your three segments fit with room to spare. Each segment opens a submenu of up to six tiles, videos and photos mixed. Every clip is two taps from home, three counting the tap back. Deeper trees lose first-time visitors: each level adds a decision and a wait, and few visitors dig that deep on a public screen.

Six tiles per submenu holds the grid at 3 x 2, which keeps every tile big; the worked example runs the numbers. Give the home screen a muted attract clip 15 to 30 seconds long, playing behind the buttons, so the screen invites the first tap instead of sitting dark.

Size the touch targets

Set the floor at 44 pixels for anything a finger hits, the minimum that mobile interface guidelines converge on. On a 10-inch panel at 1280 x 800, about 150 pixels per inch, that floor works out at 44 / 150 = 0.29 in, about 7.5 mm, next to a fingertip at about 10 mm. So 44 px is for the small controls, the back button above all; the content tiles should be several times that, and the worked example sizes them from the grid.

Put the back button in the same corner of every page. A consistent corner is the one detail visitors learn fastest in kiosk navigation.

Set the idle return

Set the idle time to your longest video plus 30 seconds. A visitor who starts a 90-second clip and just watches produces no input, and the timer has to outlast the clip; with a 90-second longest video that is 90 + 30 = 120 seconds. If the page code drives the return itself, reset the timer on every touch and on each video's play and pause events, and 60 seconds is enough.

Defaults run slow for a public screen. Microsoft Edge's kiosk mode setup defaults the idle time to 5 minutes and accepts any value you type, and five minutes parks the last visitor's page in front of the next one. For comparison, shop-floor practice blanks an untouched operator screen after 30 seconds and returns an operator station to its home page after 10 minutes; a public kiosk sits between the two, and your longest clip sets the number.

Prepare the video and photo files

Encode every video at 1920 x 1080 in H.264 in an MP4 container at about 8 Mbps, with AAC audio. Eight megabits per second is the common target for clean Full HD playback; more only bloats the folder and slows the first tap. Add captions or bake text into the frames, because a branch floor with music and foot traffic drowns out a small speaker.

Shoot the photos as 1920 x 1080 JPEG at normal quality, about 0.5 MB each.

Design for one video playing at a time. A grid that autoplays several Full HD clips at once stutters even on a desktop, and Android players cannot show multiple videos at once, so a kiosk built on one has no say in the matter. Give every video tile a poster frame, a still from the clip, so the grid stays light until the tap.

Example: one branch kiosk in numbers

Scenario: a branch with three product segments, on a 10-inch touch panel at 1280 x 800, about 150 pixels per inch.

Menu: a home screen with 3 segment buttons, each submenu holding 3 videos and 3 photos, 9 clips and 9 photos in all, any clip 2 taps from home.

Buttons: with 40 px side margins and 16 px gutters, the 3 x 2 grid gives (1280 - 80 - 32) / 3 = 389 px wide tiles at 300 px tall, about 66 x 51 mm. The 44 px floor is 7.5 mm on this panel (44 / 150 = 0.29 in), so every tile clears it several times over.

Files: 9 clips at 90 seconds and 8 Mbps. Per clip: 90 s x 8 Mbit/s = 720 Mbit, and 720 Mbit / 8 = 90 MB. Video total: 9 x 90 MB = 810 MB. Photos: 9 x 0.5 MB = 4.5 MB. The library is about 815 MB.

Idle: the longest clip is 90 s, plus 30 s, so the idle time is 120 seconds.

Result: an 815 MB folder, two taps to any video, tiles six times a fingertip wide, and a screen that resets itself two minutes after the last touch.

Recommendation: Build the menu as a folder of local pages run in the browser's kiosk mode: two levels, up to six tiles per submenu, 1920 x 1080 H.264 at 8 Mbps, touch targets of 44 px minimum, and an idle return of longest video plus 30 seconds, 120 seconds for a 90-second clip. Reach for a managed signage platform only when central scheduling across branches is a hard requirement; a folder you copy, check and re-copy is easier to prove correct in front of a branch manager.

Build and load the menu

1. Make a folder with index.html for the home screen, one page per segment, and videos/ and photos/ subfolders. Link everything with relative paths, so the folder runs from a drive, a card or a share unchanged.
2. Lay out the home screen: one button per segment over the muted attract clip, sized from the grid in the example above.
3. Lay out each segment page as the tile grid, with the back button in the same corner at or above the target floor. A tap on a video tile plays that clip full screen; a tap on a photo tile opens the still full screen.
4. Encode the files to the settings above and drop them into the subfolders. Name files without spaces or accents.
5. Add the idle return with the value worked out above.
6. Point the browser's kiosk mode at the folder: full screen, no address bar, the home page as the only start page.
7. Bench-test the build on a panel at its native resolution, then copy the folder to each branch kiosk and run the checks that follow.

How to check it worked

• Two taps: from a cold start, tap a segment, then a tile. Playback starts within about 2 seconds of the second tap; past 3 seconds, re-encode the clip at a lower bitrate.
• Idle return: stop touching and time it once with a watch. When the idle time is up, the home screen is back with the attract clip running.
• Offline: pull the network cable and tap through every segment. All files are local, so nothing should change.
• Stray taps: tap in the gutter between two tiles. Nothing should fire; if a neighbor reacts, the gutters are too thin.
• Attract loop: leave the home screen alone for a minute. The muted clip plays behind readable buttons.

If a branch only needs the loop

Some locations need no touch: a counter or endcap screen that plays the same reel of clips and stills. Our panel-mount signage displays do that job on their own, playing videos and photos from a card with no subscription to manage. Their HDMI port is an output, so they take no feed from the kiosk computer; the interactive menu needs the touch monitor and its own PC. For those loop screens, size the panel around the content the way a menu board is sized, and see the small retail displays built for counters, endcaps and fitting rooms.

Questions