The development of a moving user interface

As hardware progresses, the importance of presenting a user interface whose design is both functional and pleasing to the eye is taken as more of a given. In this environment, in order to capitalize on the user interface as a method of adding some personality, of impressing the person using the device, and of bestowing a sense of superiority upon the app, we have taken the lead in development and focused on the creation of a “moving user interface.” By adding movement and action to the operation of the user interface, it is possible to imbue said interface with a variety of apparent sensations: the sense that the user is touching soft, squishy buttons, say—or, in contrast, touching hard-edged, sharp buttons. However, the hurdles this “moving user interface” represents—how it lengthens development time and slows down device load times—in most all cases had limited the motion to simple movements or caused it not to be implemented at all. Therefore, to clear the “lengthened development time” hurdle, we went ahead and developed a “moving user interface” library unique to WOW and offered appropriate support to our clients. As for the “slow load time” hurdle, we gather this will be cleared in upcoming years thanks to improvements in hardware performance.

In this column, we will be making our development studies regarding our moving user interfaces for smartphones available to the public. In the future, we plan to take our development studies for automobiles and appliances public, also.

Purutto Design


In the study presented below, in addition to the standards of “ease of use” and “beauty,” it is suggested that we perhaps could add a sense-based component called “attachment.” Users can get a sense of cuteness and playfulness from the behavior of the app, and thereby become more attached to the app and more aware of the product’s potential. In this column, we will focus on studying the action of these sensations—of what we might call “jiggliness” and “springiness.” If we could refer to “jiggly design” and “springy design,” we’d be very happy ;)

Side menus

This is a study of model side menus for smartphones. When the menu at the upper-left of the screen is tapped, a side menu will squeeze out. The action looks jiggly, like that of jelly or gum.

Here we have a drawer type of side menu, seen in apps such as curation menus with a long screen scroll. The menu springs out a certain distance and in again by pulling a tab on the left side of the screen.

With moving user interfaces, all sorts of parameters are established, and certain interactions (speed of movement, ease of changing or switching between elements) are designed to suit the actions they accompany. In this study, the changes in actions from interaction are not visible due to the limitations of the visualization process.

Lists, icons, buttons

This study examines switching between lists via the main menu. When an icon is tapped, the list currently being displayed is pushed aside to make way for the next list. Also, notice how the menu icon has an animation when tapped. We are moving forward with a special study on moving icons.

This study examines the vertical scrolling of lists. A soft vertical shaking accompanies the user’s movements.

This study takes a look at the buttons seen in sports apps & elsewhere. Tap it, and the button is depressed, then springs back.


This is a study of the card-type thumbnail displays seen in camera apps. When the screen beneath the plus button is tapped, the current card falls down with a thump, and the new card is thrown on the screen, creating strong emphasis for these movements.

This study examines thumbnail deletion. After the X button is tapped, the thumbnails disappear as if they are being swallowed down a drain.

A study of image slide-ins.  When the image smacks into the ceiling area, the whole screen element itself shakes.