EMIL - An Authoring Environment for the Prototyping of User Interfaces on Interactive Surfaces - Lake Harding Association

EMIL – An Authoring Environment for the Prototyping of User Interfaces on Interactive Surfaces

EMIL – An Authoring Environment for the Prototyping of User Interfaces on Interactive Surfaces

By Micah Moen 1 Comment October 15, 2019

Two designers want to build an interactive surface application. This application will be used on a multi-touch table. It would be great if there was a possibility to combine design and programming. The authoring environment EMIL allows doing that. Building software prototypes for interactive surfaces, quick and easy. EMIL defines a design process and
supports the creation of interactive prototypes. In this process, designers prepare graphical resources like picture and photoshop files on their own computers… … and provide them for prototyping by putting the files in the Dropbox. Co-working in the team using own computers and the interactive surface is hereby combined in an intertwined process… … without the need for programming. The authoring application on the interactive surface
allows accessing the prototypes. The menus provide multiple building bricks for the
creation of interactive elements. EMIL also supports, for instance, Photoshop. Because of this, the designer can work in the usual environment without having to learn a new design application. By using the Dropbox, the designs are automatically
synchronized with the authoring application. On the multi-touch table, designing is instantly
continued by using the Photoshop file. The layer structure is opened and design elements can be simply dragged out of the layer structure. Further formats, like an image of a logo, can be
dragged directly out of the Dropbox menu. Using hand gestures, all elements can be
positioned, rotated and scaled. As soon as they are in the dedicated position, they are
locked into position using an authoring menu. Another handy kind of building bricks are so-called behaviors: A combination of interaction and action. In combination with behaviors, graphical elements
become interactive components, like the document storage in this example. EMIL also supports interaction with tangible objects. As soon as the small physical objects are touching the
surface, they can be combined with behaviors. In our example, we bind a graphic to the tangible. This graphic automatically follows the tangible and can be rotated. To position the graphic relative to the tangible,
the authoring menu helps again… … that shows a virtual a keyboard if necessary. After exiting the editing mode, the tangible always
triggers the displaying of the graphic element… … that always follows the tangible’s motions on the
surface and can therefore be positioned easily. The workspaces in EMIL are called ‘views’. Similar to a website, on a view all kinds of
components and media can be used. And similar to a website, with EMIL multiple views
can be created to present complex information. In the example, next to the first, active view a second view
is created that should display product information videos. For this purpose, at first a new view is generated
by dragging it from the component list onto the view list. At next, the navigation is created using a
graphic and the ‘NavigateToView’ behavior. Afterwards, the view is renamed appropriately. Subsequently
the navigation graphic is linked to the new view. On the new view, at first the return navigation is created, afterwards
the background and eventually the favored videos are positioned. EMIL includes a video player. Similar to static graphics, videos can be freely
arranged by rotating, scaling or moving them. The use of such application prototypes: Better acquisition Easy formulation of specifications for customers And enabling user-centered design

1 Comment found


Jackson Teo

What is the small device that put on top of the screen and can interact with the screen? Using what kind of technology ? AR, RFID or others ?


Add Comment

Your email address will not be published. Required fields are marked *