Touchscreen digital signage

With Play Digital Signage it is possible to create touch-enabled multi level menus without doing any programming at all. In this tutorial we will create a simple quiz to serve as an example for creating touch digital signage that responds to users touching or clicking.

Before we get started, check out the quiz yourself! (you can use mouse to click on the buttons)

Activity diagram

We’ve made a workflow diagram of the quiz to give you better understanding of the possible paths users can take. The rectangles¬†represent slides, the circles represent buttons and arrows point where clicking or touching the button will take the user.

 Workflow diagram

Slides

As seen in the diagram above, the quiz contains 6 different slides:

  1. Landing / start page
  2. First question
  3. Correct answer of the first question
  4. Second question
  5. Correct answer of the second question
  6. Incorrect answer

Creating the slides

When creating touch interfaces, you often don’t have the final picture in your head. I’d recommend creating all the slides before linking them together with click actions, because adding click actions require you to select specific slide. If you don’t have the full picture yet, then the order of your slides might change, therefore it is easier to create all slides first and then wire the click actions.

Adding click actions

You can add click actions to individual elements (such as image, text, rectangle, etc…) or you can use a ‘button’ element. The button element is actually a transparent element that you can position above other elements to react to touch events. In this quiz our buttons are made up of rectangles and text positioned on top of it. Rather than assigning a click action to both the rectangle and text element, we add a button element on top of them and assign a click action to the button element instead.

We position the button element above the button and assign an action to jump to slide 2 when clicked.

Assigning click actions

Now that all slides are created, we go through all buttons and point them to appropriate slide as shown in the workflow diagram. Buttons with incorrect answer point to a slide where “Wrong answer” is shown to the user and they can re-take the quiz. Buttons with correct answer point to a slide where “Correct answer” is shown and they can proceed to the next question.

Reset to landing page

Sometimes users start the quiz, but leave halfway through. We want the quiz to reset to the beginning after some time of inactivity. To do this, we’re going to use the slide duration and a functionality to override which slide is played after.

We’re going to assume that if user has not clicked on a button for 1 minute, then they have left the stand. So, we’re going to set the duration of the slides to 1 minute. Since we want the playlist to reset to first slide, we also set the option “After this slide play slide” to value “Slide 1”, otherwise by default it would play next slide (you can find this option also in slide settings dialog under “Advanced” section).

Setting which slide to play

Once you have changed default behavior (by default it always plays next slide), a small arrow appears in the slide thumbnail. When you mouse over it, it indicates which slide is played after that slide:

Which slide is played next

If you don’t need to reset the playlist back to the initial state, you can simply set all slides to “play forever”.

Get this playlist

You can clone this quiz example to your account to see and change it yourself. To do that, navigate to “Playlists” page on our web portal, click on the “From template” button and find the “Touch” tab. Click on the “Touch Quiz” playlist to clone it to your account.

FAQ

How do I prevent resetting to initial slide while user is interacting with it?

As in this example we want the playlist to reset back to the landing slide after some time of inactivity. A common use-case is to include a web form for users to fill out, but if the user is slow filling out the form, how do we prevent the playlist from resetting back to initial state while user is halfway through filling the form (or interacting with a website)?

There is a setting called “interaction delay” for playlists, you can find it in the playlist settings dialog (where you’d rename the playlist) under “advanced” section. Interaction delay effectively delays the next slide from being played each time user touches / clicks on the screen.

NB! This feature is NOT supported on web preview and Android (including FireTV) players.

Suppose you had a slide with 60 seconds duration – after 60 seconds of inactivity it would reset back to the first slide. Suppose we set interaction delay of the slide to 20 seconds. Now if the user touches/types/clicks on the screen while the slide has less than 20 seconds of play time left, the play time would be set back to 20 seconds on every interaction (and it would start ticking down from 20 seconds again). If user interacts with the slide while it has more than 20 seconds of play time left, the setting has no effect. A good value for interaction delay really depends on how frequently you expect the users to touch the screen.