A tangible user interface for webdesign

Why

TangiWeb was developed as to explore how interactive technologies can teach children about coding and design, as well as inspire them to pursue future careers in this domain.

How

By creating a fun way for kids to build their own website with the help of tangible blocks, the user can explore the concept of web design. The blocks, containing different content, are placed on a table surface and can be arranged in any way the user wants to. When the designer is happy with the result, the site is published and the user can visit it anytime and share it with friends.

Concept

TangiWeb features one desk and one information display. Blocks are placed in order to manipulate HTML code which in turn is used to create a website. The blocks can also be scanned in order to learn more about the underlying code.

The interaction at the desk starts with selecting three themes which decide the content for the website. The theme blocks are placed in three specific compartments on the desktop surface which have colors assigned to them; red, blue, and yellow. These colors represent the colors of the building blocks used to arrange the website content. For example, by placing the theme “rainforest” in the blue compartment, all the digital content for the blue building blocks will be about the rainforest. The user then selects the background color of the website by placing a background color block in the compartment below the three theme compartments.

The actual building and arranging of the website content then begins. The user can choose between different types of building blocks as well as sizes of these blocks and place them on the main surface. The blocks are sized to fit within a grid and contain different content such as videos, images and text.

As the user places different building blocks on the desk, a display which is positioned above the desk shows the current layout as an actual website. When a block is moved, it moves the digital object in real time so that the user recieved feedback on what is happening. When the user is done with the website layout, a button on the desk is pressed which publishes the website. In addition to this, a business card is printed with the link to the website. In this way, the user can visit and explore their very own website as well as share it with others.

TangiWeb
station

Information
display

Blocks

Three types of blocks are used to control the content of the website. Color blocks determine the background color for the website. Theme blocks control what predefined content the building blocks should show. Building blocks have three different colors which are connected to what themes have been selected. By choosing and placing building blocks the different types of content will be generated on the website. Below you find example of blocks:

Text block

Video block

Image + audio block

Background color block

Theme block

After the website has been created, a business card with the link to the website is printed and given to the web designer to be.