Web-based Signage Scenarios and Use Cases

All Signs Point to the Web

Business Group Note Editor's Draft

Editor

Futomi Hatano, Newphoria Corporation

Copyright © 2012 W3C® (MIT, ERCIM, Keio), published by the Web-based Signage Business Group under the W3C Community Contributor License Agreement (CLA). A human-readable summary is available.

Abstract

"Web-based Signage Scenarios and Use Cases" provides scenarios and use cases that indicate what Web-based Signage is.The aim of this document is to clear up how Web-based Signage is used and what kind of functions are needed for Web-based Signage.

This document introduces some scenarios in the form of narratives. Every use case is found in each of the scenarios. Thus you can easily understand the reasons why each use case is required and how important it is.

In the future, this document will show requirements of Web-based Signage that will explain which existing technology is usefull in each use case and what kind of technology or specifications should be developed newly in W3C.

Status of this document

This specification was published by the Web-based Signage Business Group. It is not a W3C Standard nor is it on the W3C Standards Track. Please note that under the W3C Community Contributor License Agreement (CLA) there is a limited opt-out and other conditions apply. Learn more about W3C Community and Business Groups.

Introduction

Nowadays, digital signage is prevalent widely and it is predicted that the market will continue to grow. Furthermore, it is expected that digital signage will have more useful functions, such as interactions between signs and personal devices.

Expanding the roles of digital signage will make it more useful and valuable for all people, and will be more essential for today's information-oriented society.

In the future, digital signage should be:

• make life better for everyone
• be more essential as social infrastructure
• stimulate economies much more, including the following players.
  • electronic manufacturers
  • content creators, holders, aggregators, distributors
  • browser vendors
  • content management system vendors
  • telecoms
  • ad agencies

But the digital signage industry has some problems. Many digital signage systems are built by proprietary technologies. Web technologies are used in some systems, but there are interoperability problems. The systems are very costly now, and creating contents is costly as well. These problems prevent an expansion of the digital signage market.

The industry needs a common, open, cost-effective platform, which is, of course, an Open Web Platform.

If digital signage systems adopt an Open Web Platform, such as HTML5, and the contents of digital signage can be played on ordinary web browsers, then the problems of the industry are expected to be solved. Furthermore, using Open Web Technologies, digital signage could be more functional.

The Web-based Signage Business Group was organized to realize the future digital signage ecosystem using Open Web Technologies. The BG has published this document as a cornerstone for deep and detailed discussions, so that the BG can discuss needed functionalities carefully.

In this document, some narrative scenarios are shown, making it easy to understand how web-based signage will be used and why the functionalities are important, for everyone.

Subsequently, this document shows some use cases that correspond to the scenarios.

Finally, this document lists requirements for Web-based signage and indicates which technologies are adaptable for each requirement and what technologies need to be developed newly.

Terminology

The term terminal means a device or a set of devices composed of a display, a set top box, and so on. A terminal provides a signage service to end-users. A terminal has a kind of a web browser or a web-based application runtime which can render HTML and CSS, and run JavaScript codes.

The term end-user refers to a person who enjoys a signage service. An end-user watches or interacts with a terminal.

The term content means video, audio, image, text or a combination of those that is part of the objects shown to end-users on a terminal.

The term content provider refers to an entity that owns or sells licensed content, such as videos, images, and information.

The term network provider means an organization that provides network connectivity. Network providers include telcos and Internet service providers.

The term service provider means an organization that provides a signage service. A service provider aggregates contents, and in some cases, buys contents, then creates a signage service using the contents and distributes the service to a terminal.

The term developer refers to a person who puts together contents so that they are shown properly on a terminal as a signage service. A developer uses mainly HTML, CSS and JavaScript. Generally, developers work for service providers.

The term ad agency means an organization that aggregates ads and provides them to a service provider. In some cases, an ad agency is a service provider.

The term advertising provider means an organization which pays to an ad agency for ads.

The term location owner refers to a person or an organization owning a building or a place where terminals are placed.

Scenarios

In this chapter, some scenarios are introduced. These are fictitious narratives. You can understand what is web-based signage and imagine the future of digital signage. Surely you will notice that web-based signage will make life better for everyone.

The stories are set in a fictitious country in the near future. The characters in the stories are listed in the table below.

The profiles of the characters in the stories

Name	Gender	Age	Profile
Monica	Female	21	She is a university student. She takes a bus to go to campus. Sometimes her father drives her. The other people in her family are made up of her father and mother, and her grandmother. They all live in a town near the sea.
Michael	Male	54	Monica's father. He works for a digital signage content studio. He is a developer who makes digital signage contents.
Lily	Female	52	Monica's mother.

Shopping centre

Monica's family often go shopping at the nearby shopping centre. Now Monica is at the shopping centre. There are many displays all around.

Basic advertisement

When Monica arrived at the shopping centre, she saw a big display mounted on the outside wall. Now watching the display closely, she notices that it is transparent. It is a window.

She watches the display for a while. The display shows ads that play for 1 minute each. After 1 minute, a different ad is shown on the display. [Use case: Making contents using a declarative approach]

Some ads show static text and images, some ads show a long video. When the contents are played, captions are shown most of the time. Though the ads are silent, Monica can read the captions to understand the contents in detail. [Use case: Showing a caption]

Getting more information

Watching the big display mounted on the outside wall, she finds an ad introducing an item that she has wanted for a long time. But she didn't know where it was sold. She finds a message on the ad, "Get details using infrared communication". So she runs an infrared communication app on her smartphone, getting the detailed information including the location of a shop selling the product in the shopping centre. [Use case: Communication with a pointed device]

Personal recommendation

Monica arrives at the entrance of the shopping centre. A display welcomes her. The display is tall and life-sized. The display is saying repeatedly:

Welcome to this shopping centre. We have a lot of much-valued items for you today. Please touch here with your smartphone. Thank you.

Touching the display with her smartphone, the web browser starts up, and a lot of information is displayed. [Use case: Communication with a touched device]

She finds a "Recommendation for you" link in the information, so she touchs it. Some items are shown, but they are not a random selection. They are exactly what she wants.

Getting a coupon

Monica arrives at the entrance of the shop which he has been looking for. She finds a display which shows an appealing phrase:

Touch here with your smartphone to get a coupon giving you 20% off all items next time!

Of course, she touches the screen with her smartphone, and she gets a coupon. [Use case: Communication with a touched device]

Wondering if she can get more coupons, she tries again, but is rejected.

Augmented reality

Monica arrives at a boutique. There are many attractive dresses. She sees a display which is tall and life-sized. Standing in front of the display, she puts on a cute virtual dress in the display. [Use case: Capturing an end-user]

Some small pictures of dresses are shown at the bottom of the screen and when Monica touches one, the dress she was wearing changes in the display. All dresses shown in the screen are sold at the boutique.

She chooses her favorite dress from the screen. Though she hadn't planned on purchasing it, she wants it someday. So touching the screen with her smartphone, she gets the detailed information on the dress. [Use case: Communication with a touched device]

Automatic vending machine

Monica becomes tired after walking around for a long time. She finds a drink vending machine. The whole front of the vending machine is covered with a touch display. Touching the screen, she selects a drink and, then touches the side of the screen with her smartphone for payment. [Use case: Communication with a touched device]

Bus stop

Monica always goes to university by bus. One day, she leaves the house, and arrives at the bus stop as usual.

Ads based on a location

There are some displays at the bus stop. One of them always shows ads. All of the ads introduce neighborhood shops, clinics, shopping centres, and so on. [Use case: Identifying-the-location-of-the-terminal]

Monica sees an interesting shop in the display. She wants to visit the shop, but does not have no enough time. Touching the display with her smartphone, she gets detailed information on the shop. [Use case: Communication with a touched device]

Neighborhood map

At the bus stop, there is also a big touch display that anyone can interact with. The display shows the time table, a neighborhood map, a list of neighborhood shops, and so on.

Monica's family has recently moved to the town, so she isn't familiar with it. Touching the display with her smartphone, she gets the all information shown on the display. Now she can interact with the application on her smartphone in same form as the display at the bus stop. [Use case: Communication with a touched device]

School

Monica is in her classroom. Her teacher starts the class. A big touch display is equipped in every class room at her university. Her teacher always uses the display, all the students have their own tablet, which they use in the classrooms.

Watching course materials on a tablet

The class begins. The teacher says in front of the big display:

Everyone, please get the material in your tablet.

In the display, the title of the material is shown: "The theory of relativity".

All the students activate an app. Some titles are listed in the app. When Monica selects the same title as that shown on the big classroom display, the material is shown in her tablet. [Use case: Being discovered by personal devices]

The teacher starts to explain the theory of relativity, touching the big display. Monica is looking at the material on her tablet. When the teacher interacts with the material, the same visual is shown on the student's tablets simultaneously. [Use case: Synchronizing contents]

Station

Michael always goes to work by train. One day, he leaves the house, and arrives at the station as usual.

Kiosk

Michael often reads the newspaper in the morning not at home, but at the station or in a train on his smartphone. He purchases the newpaper only when he wants to read it, so he goes to the kiosk to check the newspapers as usual.

Newspapers are sold on the kiosk terminal device. Today's hot headlines are shown on the screen of the kiosk terminal. Michael finds some interesting news on the screen, so he purchases a digital newspaper by touching the screen with his smartphone. [Use case: Communication with a touched device]

Notice board

The station platform is more crowded than usual. Michael looks at the notice board. Usually, the time when the next train will come and some ads are shown on the notice board. But now, emergency information is displayed in a different form than usual. He notices that an accident has happened, causing delays in time schedules. [Use case: Getting information in real time]

Thanks to the information, he can tel his boss via e-mail that he will be late to work.

Train

Michael finishes the newspaper in the train. There is still much time until he arrives at the destination.

Ads in train

There are many displays in the train. Michael watches one of them for a while. It is showing ads all the time. He notices that the ads support infrared communication. Pointing his smartphone to the display, he gets the detailed information related to the ad. [Use case: Communication with a pointed device]

Network trouble

Michael is using his PC at the office, but a problem with his Internet connection occurs suddenly. After a long time, he is informed that the optical fibres were cut because of road repair. All connectivity to the Internet around his office is completely lost.

He decides to go out to lunch.

Playing saved contents

Michael is a developer of digital signage. He set up many digital signage terminals around his office.

He knows that all the terminals worked well despite of losing their connection to the Internet. Every terminal always saves the contents it shows. The Internet connection was lost, but the terminals are playing the saved contents temporarily. That's why people passing by the terminals don't notice that the terminals have a network connection problem. [Use case: Saving contents and playing saved contents]

Disaster

The town where Monica's family lives in, has constructed a disaster warning infrastructure that notifies citizens of emergency information using digital signage terminals.

People near a digital signage terminal get to know what is happening so that they can avoid troubles caused by disasters.

Fire

Lily is walking in an underground shopping arcade. Many signage terminals are showing ads as usually. Suddenly, all terminals stop showing ads. They start to show a warning message with an arrow and are beeping loudly. [Use case: Getting information in real time]

There is a fire! Go outside! The nearest exit is this way!

Following the instruction, Lily goes outside.

Earthquake

Monica is walking in a shopping centre building. Many signage terminals show ads as usual. Suddenly, all the terminals stop showing ads, and start showing a warning message and beeping loudly.

Earthquake! Watch out!

In this country, the Urgent Earthquake Detection and Alarm System is deployed. The system noticed a warning before the quake arrives. [Use case: Getting information in real time, Identifying the location of the terminal]

The earthquake is a big one. After a little while, all signage terminals display a tsunami.

Tsunami approaching. Hurry upstairs!

Monica hurries upstairs. Many people are there. After a while, all terminals notice that the alarm has been called off. A tsunami actually didn't come, fortunately. [Use case: Getting information in real time, Identifying the location of the terminal]

Preparing contents

Michael is a developer of digital signage. His team creates digital signage contents using web technologies.

Authoring tool

Michael's team uses a content management system (CMS). They can create and deploy contents quickly with the aid of the CMS.

The CMS includes a content authoring tool. The tool allows developers to create basic views without scripting. They only put images, texts and video on a canvas, adjust the locations, and input some parameters, such as duration to show the view, and so on. [Use case: Making contents using a declarative approach]

Showing licensed videos

Some content providers that provide videos force Michael's team to prevent them from being stolen. Some videos show celebrities. Such content providers don't permit use of the videos for digital signage systems without a content protection mechanism. [Use case: Protecting video contents]

Effect measurement of ads

Michael's company is a service provider and an ad agency. The company provides some effect measurement reports to advertising providers.

Live monitoring

Service providers have to always monitor whether their terminals are working well or not. Michael's company utilizes a monitoring system. When a terminal is down, the system reports an alert in real time. [Use case: Real-time communication to servers]

Measurement of display time for each content

The digital signage system always measures display time for each content. Ad agencies can see how long and when each of the contents had been shown. Even though the network is down, they can see the measuring result later. The terminal usually uploads the measuring result to the server in real time. When the network is down, the terminal starts to save the measuring results in itself. When the terminal detects a recovery of the network, it sends all the saved data to the server. [Use case: Saving log data, Real-time communication to servers]

Measurement of people passing by

The digital signage system has the ability to analyze people passing by. A camera is equipped in the terminals. The terminals always watch people who pass by it. Furthermore, they measure how long each person stays in front of them. [Use case: Capturing an end-user]

Use cases

Each use case is written according to the following template:

Ux. <TITLE>

Use case title

Description

Detailed description/overview of the goals of the use case

Schematic illustration (devices involved, work flows, etc.) (Optional)

Motivation

Explanation of the benefit to the ecosystem

Gap analysis

Related existing standards

Considerations about the possibility of the requirement using existing standards

Necessity to develop new standards, if existing standards don't accomplish the requirement

Requirements

List of requirements implied by this use case, if existing standards don't accomplish the requirement

U1. Making contents using a declarative approach

The declarative approach means a mark-up based control of contents. Information for playing contents is annotated in HTML tags.

Description

Some beheviors are annotated in HTML tags.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<link href="style.css" rel="stylesheet">
<script src="signage-player.js"></script>
</head>
<body data-wbs-loop="true">
<header data-wbs-type="page" data-wbs-duration="5s">
<!-- a splash screen for the initiation -->
<h1>Welcome!</h1>
</header>
<article data-wbs-type="page" data-wbs-duration="60s">
  <!-- Ad1 -->
  <video src="v.mp4"></video>
</article>
<article data-wbs-type="page" data-wbs-duration="60s">
  <!-- Ad2 -->
  <img src="v.png">
</article>
...
</body>
</html>

The annotations in tags are parsed in a JavaScript library. JavaScript libraries handle annotated contents followed by the annotations.

Motivation

A declarative approach is useful for not only developers but also vendors of authoring tools.

If the annotation format were standardized, anyone could develop JavaScript libraries for playing web-based signage contents.

This means that the declarative approach could make signage operations more cost-effective. Furthermore, this could achieve interoperability among terminals using ordinary web browser.

Gap analysis

As you can see in the HTML code snippet above, we can use data-* attributes specified in HTML5 specification.The greatest benefit of data-* attributes is that there is a lot of flexibility. [HTML5]

Requirements

R1. Markup annotation vocabulary for playing contents

U2. Showing a caption

A caption means words that are shown underneath the display of a terminal.

Description

The words convey important points to end-users. Reading the text, they can understand the important points, even if they don't watch any remaining thing to be shown in the display.

Motivation

Digital signage terminals outside are normally in a noisy environment. Even if the terminals support a speech function, people passing by can't hear the speech. Furthermore, the speech could be annoying for people who aren't interested in the content shown by the terminal. So captioning contents is essential for digital signage systems.

If the captions consist of text data, they can be useful in other scenarios. If personal devices such as smartphones are able to communicate with a digital signage terminal, they could get the captions in real time. That means that people can read or listen to captions using their smartphone. This is beneficial for visually impaired persons as well.

Gap analysis

For video content, the track element and the text track API specified in HTML5 specification are applicable. [HTML5]

The format of captions is necessary too. WebVTT is applicable for the format. [WEBVTT]

There is no mechanism for non-video contents. But WebVTT format is very simple, so it could be handled by JavaScript codes easily. The HTML markup could be like this.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<link href="style.css" rel="stylesheet">
<script src="signage-player.js"></script>
</head>
<body data-wbs-loop="true">
<header data-wbs-type="page" data-wbs-duration="5s"
   data-wbs-track-src="ad2.vtt">
<!-- a splash screen for the initiation -->
<h1>Welcome!</h1>
</header>
<article data-wbs-type="page" data-wbs-duration="60s">
  <!-- Ad1 -->
  <video src="ad1.mp4">
    <track kind="captions" src="ad1.vtt">
  </video>
</article>
<article data-wbs-type="page" data-wbs-duration="60s"
  data-wbs-track-src="ad2.vtt">
  <!-- Ad2 -->
  <img src="v.png">
</article>
...
</body>
</html>

The JavaScript library parses data-web-track-src attributes in the HTML markup, fetches WebVTT files, parses the WebVTT data, and shows captions at an appropriate position with proper timing.

If we adopt WebVTT as a caption format for non-video content, we need to define markup annotation vocabulary.

Requirements

R1. Markup annotation vocabulary for playing contents

U3. Communication with a touched device

...

U4. Communication with a pointed device

...

U5. Being discovered by personal devices

...

U6. Capturing an end-user

...

U7. Getting information in real time

...

U8. Identifying the location of the terminal

...

U9. Synchronizing contents

...

U10. Saving contents and playing saved contents

...

U11. Protecting video contents

...

U12. Saving log data

...

U13. Real-time communication to servers

...

U14. Very simple signage that just loops simple content

This is like a DVD player. Useful for own-brand product/service promotion with short dwell time

U15. Day-parted playlists for venues with scheduled events

e.g., restaurants, conference venues

U16. Ad-based playlists requiring accurate timing (time is money!) and billing reports

Users specify number of repeats per time range and playlist is auto-generated based on the criteria

U17. Digital signage that caters to the need of sub-organizations by providing access control over sub-playlists

Useful for large chain stores and MNCs

U18. Digital signage for the purpose of creating in-venue atmosphere

Often content here have no specific purpose (e.g., showing bubbling seawater in a high-end apparel store). Auto shuffling may be needed to avoid content repetition. Also applies to audio-only applications

U19. Interactive signage that allows external triggers

This category covers emergency alerts.

Requirements

This section lists requirements which existing standards can't achieve.

R1. Markup annotation vocabulary for playing contents

Web-based signage requires a standard for a markup annotation vocabulary.

References

[HTML5]

HTML5, I. Hickson. W3C.

[WEBVTT]

WebVTT, I. Hickson. W3C.

Acknowledgements

Thanks to all the participants of the Web-based Signage Workshop held at Makuhari, Chiba, Japan in 14 - 15 June 2012; they provided many insights, opinions, and suggestions.

Thanks also to everyone who has ever posted to the Web-based Signage BG mailing list.