• About
  • Page Transition: Type on Screen

    August, 2011
    The Center for Design Thinking
    Ellen Lupton

    Before the beginning of the Hairspray show in Broadway, all doors were closed and all stage lights were turned off. The auditorium turned to absolute darkness and the opening stage curtain made a sort of rolling sound. Some tension and a feeling of expectancy for the musical opening arose for an abnormally long moment. Suddenly, the colorful stage popped up with bright lights and rhythmical music was played. The audience finally released their breath. The transition from the waiting time redounded to the impression of the show. It was the moment of realizing the practical aspect of visual transition techniques and the darkness.

    Transition in graphic design is a solution that switches one visual information to the other. The method not only connects the two, but also adds another type of information as if a blank front page of a chapter in a book gives some impression of the upcoming content. Also, it is the way how a machine responds to input. For example, a television screen, not of all models, momentarily shows a black screen when we push a channel button. The null response is the information saying that it is in the process of the input.

    Before the digital video editing technology enabled many different actions between frames, only few page alterations existed, which are fading and rotating. In a movie, the classic transitions were occasionally used for a scene transition. Fading out effect with harpsichord sound, for example, naturally leads the viewers to flashback scene. Transition helps watchers to understand the connected information if it is used properly. Otherwise, it is just uninteresting graphic jargons; the face change in Chinese Sichuan Opera is even more interesting. Video editors, computer programers, movie directors, and graphic designers have been oblivious of the possibility of page transition on screen until the first Macintosh was introduced in 1984.

    The Macintosh was the first successful personal computer featuring a mouse and a graphic user interface. Although Douglas Engelbart in the Stanford Research Institute had already invented the early version of mouse and graphic user interface in 1963, I would cite the Mac example for this time because it led the technology to the next level. A mouse, a two-dimensional motion detector, fascinated computer users because the device allowed them to freely move the cursor on screen by moving their hand. Command line interface limited approachability because the language was hard to learn. However, a mouse was accessible and easy to learn. Browser view moves down as we move our cursor (hand on mouse) down on the scroll bar; the hand cursor icon is a brilliant idea. As the cursor on the screen and the mouse are indirectly but strongly connected, using animated graphic is inevitable because of the hand motion. Thus, animated graphics unlocked many different page transitions. Later on, many script languages gave body to many (unnecessarily many) types of page transitions.

    From a graphic design perspective, selecting appropriate page transition is more important than having many options because it strongly affects how we understand the content. Presentation slides are one of the popular methods to share an idea. It should articulate contents and convey without misapprehension. So we can learn the helpful page transition from a presentation software. Keynote, the most popular presentation software for Mac users, has provided various graphic effects. Animated transition enhances the presentation quality. Although there has been many upgrades, the number of Keynote's transition has not increased since it was released in 2003. The Keynote example proves that the diversity of transitions is not critical.

    One day, my computer had a malicious virus. It showed all graphics in the opposite way of the mouse direction; the arrow cursor moved to the left when the mouse moved to the right. The relationship between the mouse and the computer was distorted by the virus, and affected my user experience in a negative way. I realized that the user experience is not always defined by computer's sensitivity to our input.

    User experience becomes a major concern for page transition. As the sensor technology improves, computers gain a better sense of human gesture. The multi touch technology requires multi-touch gestures using their fingers like swiping, pinching, shaking, and twisting. And the gestures strongly relate to the behavior of transition. The page on screen moves to the direction of swiping and rotates to the direction of twisting. Basically, the manner of the page transition follows the motion of hand. Keynote's page transition has been reorganized by the principle since 2008; the first iPhone with a multi-touch screen was unveiled in 2007. Color Planes and Fall effects in 08 version were removed in 09 version. It is not surprising that they did not have a strong interrelationship with finger gestures. Eventually, gesture-based page transition will be remained.

    Page transition is not decorating. It should help users to understand the relationship between contents. Computers will gain a better sense of human intention through sensors; three dimensional input devices are already commercialized in the game industry like the Wii Remote and the Kinetic for Xbox. And computers will react more sensitively to our physical motions via sensors. Developing expeditious page transition should strongly relate to the study of human gestures. Although many different graphic elements have been developed for transition effects, there are still some graphic elements that do not concern their users. I expect to see better and natural page transitions on screen in the near future.