WO2018158588A1

WO2018158588A1 - System and method for creating and using interactive web content

Info

Publication number: WO2018158588A1
Application number: PCT/GB2018/050543
Authority: WO
Inventors: Adam Anderson; Lourens Wals
Original assignee: Interactive Fish Holdings Limited
Priority date: 2017-03-02
Filing date: 2018-03-02
Publication date: 2018-09-07
Also published as: GB201703378D0

Abstract

A system for providing a webpage, the system comprising means for receiving a file which describes a web page, wherein the web page is identified by a single URL and is described by multiple portions of mark-up/rendering language, and wherein each portion of mark¬ up/rendering language describes a displayable element of the webpage to be displayed by a web browser application, wherein each element is configured to be concurrently loaded and rendered by the web browser application, and wherein each element may be selectively made visible or hidden; a web browser application for loading, rendering and displaying an element of the web page, wherein the web browser application is arranged to select, in response to the occurrence of an event associated with a currently displayed element of the webpage, a portion of mark-up/rendering language and to configure the currently displayed element as hidden and the element described by the selected portion of mark-up/rendering language as visible.

Description

System and method for creating and using interactive web content

Technical field The present invention relates to the creation of interactive web content, and more particularly to the creation of layered modules which can be navigated by a user through interaction with content in the layered modules.

Background of the invention

Interactive web content generally refers to web-based media content which can be interacted with by a user. The content is interactive in that the user has the option not only to simply read, view or watch the content but is invited to engage with it. Often such content can take the form of interactive video, whereby a user viewing the video is able to access additional media content via the video by, for example, selecting a user interface object overlaid on images of the video. Selection of the user interface object often causes the opening of a new web page, or the need for a browser to fetch further content. Thus when a user selects a different user interface object there is often a delay as the content associated with the user interface object is obtained.

Text and images can also be interacted with - for example, a portion of text may be hyperlinked. Quizzes and games are another area of expansion for interactive content, and particularly web-based interactive content. The use of interactive content is used significantly in marketing and advertisement due to its ability to not only bring content to the attention of a potential customer/user and personalising the user's experience, but also because of the ability to collect valuable information about the user and the ways in which users engage with the content.

The HTML web markup language provides a framework for the creation of web content. Known techniques for providing interactive content, particularly video- and image- based interactive content, rely on the linking to a new webpage to deliver new content. Such techniques, however, have limitations concerning speed of access to new media content, complex methods to create linked media content and limits concerning the way that new media can be created by content creators.

It is an aim of the present invention to avoid, or at least mitigate, drawbacks and deficiencies of the prior art. Summary of the invention

According to a first aspect of the invention, there is provided a system according to claim 1. According to a second aspect of the invention, there is provided a method according to claim 9. According to a third aspect of the invention, there is provided a system according to claim 14. Preferable features of the invention are defined in the appended dependent claims.

By concurrently rendering the webpage as several layers which can selectively be rendered such that they are visible, or not visible, to the end user, the invention provides a methodology for seamlessly transitioning between content. Advantageously, since the layers are already associated with the webpage, when the web browser loads the webpage the entire content of the webpage (i.e. the content and the layers) are, in the first instance, loaded by the browser. As the user selectively engages with the content, the layers are selectively rendered and displayed to the user (by virtue of being rendered as a visible or transparent layer) thus allowing the web browser to transition between layers without having to wait for each layer to load. In contrast, the prior art is such that when a user selects a link the web browser must fetch and load content from a different URL associated with the link, thereby causing a delay. The present invention, through the use of the selectively displayable layers, allows for the content to be quickly and effectively accessible by the user.

Brief description of the drawings Figure la is a schematic diagram of four layered modules according to an embodiment of the invention;

Figure lb is a further schematic diagram of the four layered modules shown in Figure la; Figure 2 is a flow diagram of the process of selectively rendering portions of a webpage in accordance with an embodiment of the invention;

Figure 3 is a schematic diagram of a connections between modules in accordance with an embodiment of the invention;

Figure 4 is a screen shot of an exemplary user interface showing connections between modules according to an embodiment of the invention. Figures 5a, 5b, 5c, 5d, 5e, 6a and 6b are screen shots of an exemplary user interface for configuring events in modules according to an embodiment of the invention;

Figure 7 is a screen shot of an exemplary user interface showing connections between modules according to an embodiment of the invention;

Figure 8 is a screen shot of an exemplary user interface showing connections between modules according to an embodiment of the invention; Figure 9 is a schematic diagram of an architectural framework according to an embodiment of the invention.

Detailed description The structure of a typical webpage is described by HyperText Markup Language (HTML) script. JavaScript code provides the instructions for what to display and how to display it, including object areas, links and menus. When a link or menu option is selected (with the intention of accessing a new, but linked, content page) a new HTML page is loaded, and similarly JavaScript defines the characteristics of the page. Whilst the new page may share many similarities to the previous page, the new page has its own universal resource locator (URL) - i.e. its own unique address. For a series of connected webpages (for example, those belonging to the same host), the hostname will be included in the URL of each webpage, but the filename will be different, and therefore each of the webpages has a different, albeit related, URL. Loading a connected webpage therefore requires the fetching of new JavaScript, which requires bandwidth resource, and therefore time. Known implementations of interactive content are similar - an interactive element in video, images or text, for example, causes the opening of a new webpage (having a new, different URL) when selected or otherwise interacted with by a user. In accordance with the framework of the present invention, and in contrast to known implementations of interactive content, a single webpage (i.e. a webpage having a single address) can be thought of as comprising one or more layers, or modules. The following description is described with specific reference to JavaScript. However, the skilled person will appreciate that the invention described herein is not solely limited to the use of JavaScript and may be implemented in other languages. In a preferred embodiment, the JavaScript description of each layer is included in the complete HTML (such as HTML5) representation of the single webpage, but only a part of the JavaScript (where each JavaScript part represents a layer of the webpage) is used at any one time. Thus only one layer is displayed at any one time (regardless of whether or not the user needs to scroll in order to physically view a remaining portion of the view on their display device). Preferably, the other layers are set to be rendered, or 'displayed', as transparent. Therefore, whilst such layers exist, they are not visible to the end user, nor is the user able to interact with the layer. A different layer is displayed when the actions of a user (for example, selecting an icon during video playback) instruct the use of a different portion of JavaScript.

Each layer (also referred to in the description that follows as a module or view) can contain different content types or a combination of different content types, such as, for example, text, video, images, games, and quizzes/questionnaires. Accordingly a user may, whilst still on a single webpage, navigate among different layers in the stack of layers. This is shown conceptually in Figures la and lb. Here four different layers/modules are shown - (1) simple HTML (text, images, etc), (2) Video (i.e. video embedded in the layer), (3) Game, (4) Quiz.

Figure 2 shows steps of the main process. After the loading and rendering of all layers of the webpage in a web browser (step 200) and displaying a first layer (step 210), a user may select a specific area of the first layer (which could be the selection of a user interface element such as a button) which causes a different layer to be displayed (steps 220 and 230). For each layer, user interface elements which cause the display of a different layer when selected (herein also referred to as interactive elements) can be thought of conceptually as lying on the surface of each layer. As described above, when an instruction is received to display a new layer (for example a user selects an interactive element in a video player), that new layer (for example, a text/image layer) is selectively set to be rendered on the screen such that it becomes visible to the end user. Conceptually the other layers (in the example given, the video layer) are also present on the webpage but they are now set as invisible, such that the end user is neither able to view or interact with those layers (step 240). The user is able to interact with the webpage in the known manner. In the example given the video layer may be selectively rendered and presented to the end user by default. Upon a user interaction event, for example the selection of button, the video layer is selectively changed from a visible to a not visible layer (i.e. the user is no longer able to view or interact with the video) and the new layer (e.g. the text/image layer) is rendered as visible. As the layers are already present on the webpage (in that they are present but not rendered so as to be visible on the web browser to an end user) the transition between layers is seamless as there is no requirement to load the layer. As an example of the layering of modules in a single webpage, a company may choose to advertise various products by creating a video incorporating the products. Interactive elements can be created and configured such that they are positioned over particular products during video playback. This typically involves visual motion tracking of the products within the video and mapping the motion to the interactive elements. When interactive elements are displayed and a user clicks on one of the interactive elements during playback of the video, playback of the video is paused and a new view (being a different layer or module) is displayed to the user. The content in this layer may provide further information about the product, and perhaps a link to an online store to enable the user to purchase the product. Roll-over' of a user's cursor (in a desktop environment) or selection of a pause command causes the video to pause. In this example, a single webpage having a single URL comprises one video layer and multiple HTML text/image layers. A second example involves multiple videos. A 'top' layer of the webpage (i.e. the layer that by default is displayed - for example a splashpage or landing page) contains an embedded video that may auto play once the page has loaded or alternatively may be user-controlled. The video attempts to market various services and products that a business wishes to sell. The layer/module may be configured such that playback of the video is paused at one or more predetermined times and an interactive element is displayed within the area of the video player while the video is paused, or that another module is shown and the video player is hidden. If the interactive element is not selected within a predetermined period of time, playback of the video is resumed, or, if transition to another module has occurred, failure to receive selection of one or more predetermined elements displayed within a predefined time period causes transition back to the video module . The interactive element may include text/images relating to a particular product or service. The particular interactive element (and thus the particular layer/ module that is displayed if it is selected) that is displayed may differ depending on the time during playback of the video. If a user clicks on the interactive element, a new layer/module is displayed which includes text/images relating to a product or service as well as a further embedded video, which may relate in particular to the particular product or service.

Embodiments of the invention allow a user to create interactive web experiences quickly and easily and without requiring specialist and in-depth knowledge. Creation of interactive web experiences as described below can be incorporated into existing webpages with the provision of a base URL and the layers incorporated into the existing webpage, or alternatively a new base URL can be created. To create interactive web experiences, a content author accesses a user portal according to an embodiment of the invention. The author firstly creates an account on a hosted service in order to access a user portal (a secure area on a host's webserver, for example, Apache) within which the functionality described above can be created. The setting up of an account for access to a secure server will be known by those skilled in the art.

Once a user has access to their account, they can access a template library and choose or edit a theme relating to the arrangement and connection between content modules, access and edit profile information, training information and live support. The author/user is able to view and edit projects, if any, that are currently in progress. In this context, a project is an interactive web experience and typically comprises a single arrangement of two or more layers/modules, as discussed above. Projects can be created, edited and deleted as necessary. Reports can also be generated which provide a user/content author with information about the use of a interactive web experiences, as will be described in further detail below. For the layers/modules that a user may which to create which are to be accessed via interactive elements, the content to be used (i.e. the video(s), image(s), text, etc.) for that new layer are uploaded by the user. The user can also, at this stage, choose various options relating to themes, colours, button types, etc., or proceed with default options.

Figure 3 illustrates connections that can be made between modules and Figure 4 shows an example of an interface for arranging layers/modules and establishing connections between them. The icons shown at the bottom of the interface shown in Figure 4 can dragged into the main area of the interface. The video module represents a layer comprising an embedded video, the HTML module represents any HTML functionality that works in a browser, the HTML gallery module represents an HTML horizontal slider, the quiz module represents any quiz type (including drag and drop, Q and A, tracking, feedback, integrated video tutorial and click and go), the 3D module represents any 3D construct and the games module represents any non-flash games which work in a browser. The user is able to conceptually configure the connections between various modules by use of a specific user interface tool (not shown). Any number of modules can be added to the main interface area. In practice, the number of modules may be limited by the time taken for the final webpage (which contains the layer and interactive elements created by the described process) to load.

The user/author can configure each module by selecting/clicking on one of the icons which represent the layers/modules. An example of an interface for configuring a video module is shown in Figure 5a. For a video layer, the user specifies the particular video to be used (if there are multiple videos that have been uploaded for multiple video layers), the video format and is able to configure various settings such as autoplay, roll-over to pause, whether the end of the video causes a transition to a different layer. The left hand portion of the interface ('Connection area') allows the user/author to configure the connections between each of the layers. Figure 5b shows an interface for configuring user controls.

An interface for configuring player events is shown in Figure 5c. A user/author can configure one or more events that occur when the video is played from the start such as the display of a skip button and can configure characteristics of the event. For the interactive elements, a user may choose to set them to be visible and selectable at particular times during playback of the video (a timed event). The configuration of a timed event is shown in Figure 5d. Configuring a new event comprises dragging the scrubber to the event start time or otherwise specifying the start time, selecting the type of event, specifying the transition (i.e. the layer which will be displayed when the event occurs), the position of the interactive element, and the event end time (for example, when the interactive element ceases to be displayed). An object area as shown in the video area of figure 5d denotes the area representing a specified object that will be tracked and is created by specifying a plurality of points defined by time and location (within the video area) for a button and then, where necessary, 'tweening' the points for the button to create smooth motion of the button. In some embodiments, object recognition techniques can be employed to identify different objects in the video. The motion tracked sequence is shown in Figure 5e. This can be edited by the user. A 'click action' option (not shown in Figure 5e) allows the user to specify the destination layer - i.e. the layer that will be displayed when the interactive element is selected.

For an HTML text/image layer (as shown in Figure 6a), the user can configure a static event such as the displaying of an interactive element and/or an image after a set time has passed. As before, the 'click action' is configured (see Figure 6b) which establishes the connection between the current HTML module and another module. At any point during configuration of a module/layer, the user/author is able to return to the main interface showing the arrangements of the modules (examples of which are shown in Figures 7 and 8). If connections between modules are not complete, the lines connecting those modules may be dotted. Complete connections may be shown by solid black lines (as can be seen in Figures 7 and 8) or a particular colour. Modules may be configured to include links to new webpages and such links will also be denoted on the main user interface (shown in Figures 7 and 8). Once the user has completed all modules and connections for a particular project, the user can preview the project before selecting an option for rendering the content. Selection of this option automatically generates the code necessary for the user current to be implemented and functional.

The example shown in Figure 7 corresponds to the first example discussed above, whereby interactive elements are visually overlaid over different products shown in a video. Selection of interactive elements in the video of the video layer cause display of one of modules A3 to A16. The example shown in Figure 8 corresponds to the second example discussed above, whereby interactive elements appear during playback of a video and selection of the elements cause the display of a new video layer.

An example of an architectural framework for implementation of embodiments of the invention will be described with reference to Figure 9. A content author creates interactive content (as described above) via a secure portal on a hosted cloud server. The secure portal is linked to a session database which stores session data. The database is accessed by an application programming interface (API) in order to make accessible the interactive content over the web via any browser. The session database collects data relating to use of the interactive content (e.g. frequency of use, timing, patterns, etc.) and which data is used by a reporting system to provide usage reports. A content management system, accessed by the web browser, is connected to a content database which stores the interactive content after rendering/publishing and which is also accessed by the API.

Claims

1. A system for providing a webpage, the system comprising

means for receiving a file which describes a web page,

wherein the web page is identified by a single URL and is described by multiple portions of mark-up/rendering language, and wherein each portion of markup/rendering language describes a displayable element of the webpage to be displayed by a web browser application, wherein each element is configured to be concurrently loaded and rendered by the web browser application, and wherein each element may be selectively made visible or hidden;

a web browser application for loading, rendering and displaying an element of the web page,

wherein the web browser application is arranged to select, in response to the occurrence of an event associated with a currently displayed element of the webpage, a portion of mark-up/rendering language and to configure the currently displayed element as hidden and the element described by the selected portion of markup/rendering language as visible.

2. The system of claim 1, wherein the event is defined by the portion of mark- up/rendering language which describes the currently displayed element of the webpage.

3. The system of claim 1, wherein the event comprises selection of a user interface object within the currently displayed element of the webpage. 4. The system of claim 1, wherein the event comprises the elapsing of a timer.

5. The system of claim 1, wherein at least one of the portions of markup/rendering language describe an element having an embedded video, and wherein the event comprises selection of a user interface object positioned within the area of the video player.

6. The system of claim 4, wherein the user interface object is configured to be displayed after a predefined amount of playback of the video. 7. The system of claim 5, wherein the user interface object is configured to be positioned within a predefined area of the video player, wherein the predefined area is configured to track the movement of an identifiable object within the video.

8. The system of claim 1, wherein at least one of the portions of Javascript describe a view having HTML text and/or images, and wherein the event comprises selection of a user interface object positioned within the area of the text and/or images.

9. A method for presenting a first web page defined by a single URL and described by multiple portions of mark-up/rendering language, wherein each portion of markup/rendering language describes a displayable element of the webpage, wherein the method comprises the steps:

concurrently loading and rendering every element of the webpage,

displaying, in a web browser, a first element of the web page,

in response to the occurrence of an event associated with the first element of the web page, receiving an instruction to display a second element of the web page,

selecting the portion of mark-up/rendering language which describes the second element of the web page, and

replacing display of the first element of the web page with display of the second element of the web page and hiding the first element of the web page.

11. The method of claim 10, further comprising :

in response to the occurrence of an event associated with the second element of the web page, receiving an instruction to display a third element of the web page,

selecting the portion of mark-up/rendering language which describes the third element of the web page, and

replacing display of the second element of the web page with display of the third element of the web page and hiding the first element of the web page.

12. The method of claim 11, further comprising :

in response to the occurrence of an event associated with the third element of the web page, receiving an instruction to load a second web page having a different URL to the first webpage.

13. A computer readable medium comprising executable instructions which, when executed by a processor, cause the method of claim 9 to be performed.

14. A system for creating interactive web content, comprising

a server accessible by one or more content authors;

one or more user portals of the server, wherein each of the one or more user portals are configured to display a user interface, means for creating instructions which describe the loading and rendering by a web browser of two or more layers of a web page having a single URL, wherein the instructions further define one or more events which are configured to cause a web browser application to transition display of one layer of the web page to a different layer of the web page.

15. The system of claim 14, wherein the server is a webserver or a cloud server.

16. The system of claim 14 or claim 15, further comprising storage for storing the instructions.

17. The system of claim 14, further comprising an application programming interface, wherein the application programming interface facilitates access of the webpage via a web browser.

18. The system of claim 14, further comprising storage for storing data relating to usage of the interactive web content and a reporting module, wherein the reporting module is configured to generate content usage reports relating to use of the webpage.