The Evolution of Motion Interface Design on Computer and Smartphone
Yingshan Wu, Rochester Institute of Technology
11.14.2017
The motion interface design probably has two functions which can connect the interaction design and interface design to explain the system or calculation of tech-products, the final effects should be implemented by programming; A complete motion interface design also should be considered the feature of the equipment, variation of colours and interactive implication. In the digital media entertainment field, it can combine the traditional motion graphic design, animation design to create the conceptual interface in technical circumstances such as science fiction film, animation or electronic equipment advertisements; However, many designers and researchers generally would like to classify this design skills to motion graphic design. Although the motion interface design should show the unique power in conceptual interface visualization, it possibly has different characteristics compared with motion graphic design.
Motion graphic design is one individual stage in the visual communication area. It has own genre and can be distinguished with animation or film; However, The history of motion graphic usually connected with film and animation because the root of those three different arts all based on the moving images. In “Motion graphic design: applied history and aesthetics” this book, the author, Krasner(2008) made the definition of motion graphic that “The moving image in cinema occupies a unique niche in the history of twentieth-century art. Experimental film pioneers of the 1920s exerted a tremendous influence on succeeding generations of animators and graphic designers. In the motion picture film industry, the development of animated film titles in 1950 established a new form of graphic design called motion graphics.”
In the animation field, probably one of the famous explanation of early motion design is the theory of Thomas(1958), who believe that “Early examples of attempts to capture the phenomenon of motion into a still drawing can be found in paleolithic cave paintings, where animals are often depicted with multiple legs in superimposed positions, clearly attempting to convey the perception of motion.”
Not only animation or film field use motion graphic design skills to create the majority of fantastic motion effect but also many television stations have developed the outstanding way to use the motion graphic design to create the unique impression for advertising the brand or the show. One of general utilization is that designers would create or redesign the logo of certain brands, then use the motion design skills to improve the graphic visual meaning or the visual effect of this brand. During 1950, John Whitney, Sr. created the title sequences for television ident and the advertisements via using the technical animation. Also, Krasner(2008) described one important logo motion graphics design processing in television that “By the late 1960s, Harry Marks, Who was working for ABC, conceived the idea of moving logo and hired Douglas Trumbull, who pioneered the special effects in the film 2001: A Space Odyssey(1968), to assist him in his endeavors. Trumbull’s slit-scan camera, which he had developed as an extension of John Whitney’s work, was mounted on a track and moved toward artwork that was illuminated on a table. In front of art, an opaque screen with a thin vertical slit restricted the field of view of the camera to narrow horizontal angle.” This method coheres the camera’s utilization in the motion graphic design.
Although this method was experimental and expensive, it brought many possibilities into the motion graphic design world. Since the personal computer and camera can be used to created motion graphic design for demonstrating the aesthetic feeling of Arts, motion interface design base on the technology and user experience design to guide the user to use the high-tech product more quickly, more efficiently.
While motion interface design has not been cared or valued for a long time, it appeared before the personal computer becomes the main force in animation, film and motion. For example, released one of electronic product, the oscilloscope showed the wave of sound on the screen to the public in 1950. The scientists and engineers can clearly observe the shape of a signal are moved on the screen. This moved interface showing people that the dynamic shapes of a signal. Other example shows the function of motion interface is that in 1961, the engineers can sketch on the computer via using sketchpad which was created in MIT. The users can use the light pen to draw the lines to create the shape, and if they need to revise the direction of the lines, they also can use the pen to tap the screen, then the lines would change the direction automatically. Moved lines, this processing demonstrated the interaction between the human and machine which was the user released the instruction by the light pen and screen to the system, then the system gave the feedback that the lines move to different position.
In addition, a representative, simple and ordinary motion interface was designed by engineers in 1973, the “Xerox Alto” is invented. It was based on a graphical user interface using windows, icons, and a mouse, and worked together with other Altos over a local area network(Hiltzik, 1999). After the programming in this personal computer released in this world, two basic and essential motion effects on an interface are important to the users. First, the blinking cursor. It gives feedback to the users when the users are typing so that they not only know the place where the texts will appear but also understand computer accepted each letter then show the texts on screen. Second, the operation of the mouse. When user uses the mouse to release the command to the computer, such as click the options of the menu, selected option will change the colour; Using the mouse to draw one picture, the lines would be following the moving arrow cursor. Those all showing the feedback on the interface towards human manipulation through moving images by programming. “Xerox Alto” has influenced the development of individual computers.
Regrettably, it is hard to find sufficient literature on the evolution of motion interface design between the 1973 and 1985 in personal computers. Since in that time, the technology still in the step of making functions of individual computers more available to non-technical hands-on users. People focus on the improve the functions of the computer, reducing the price and the hardware better changing.
The view of Grudin(2017) opinion in Human-Computer Interaction history supported that "Personal and small business use of computers was held back by (i) the high cost of displays, which led to the awkward solution of hooking computers up to televisions, and (ii) printers, which were expensive and/or noisy and required maintenance.”
After the 12 years, from 1985 to 1995, the graphical user interface just start developing. Certainly, This evolution is a part of business development. Colourful interfaces attractive to users who are not in the technical field but should use the computer every day. Grudin(2017) believe that “In the late 1980s, the CHI community enjoyed an influx of computer scientists focused on interactive graphics, software engineers interested in interaction, and a few AI researchers working on speech recognition, language understanding, and expert systems. ”
And he thinks the Apple company created the standard of the interface that “Following Jobs’ departure, Larry Tesler built a group at Apple that focused on user studies and interface design to refine the key GUI concepts that he and others had pioneered at PARC. The Apple Human Interface Guidelines, published in 1987, sought to bring internal and external application developers to a common look and feel.” But in that time in the Apple company, motion interface design probably was the empty page.
In comparison with the development of computers, development of smartphone from 1993, “IBM Simon” released by International Business Machines Corp. This was the first smartphone in this world. The colour of the interface was black, and the motion interface based on windows system. For instance, “loading” icon was the sandglass, the motion design was that the sandglass would rotate when the sand from the upper bulb move to the lower one. It exhibited that the computer is processing user instructions. From 1995 to 2005, online activity becomes an international phenomenon. People gradually accept computers and mobile phones as everyday necessities. Although motion interface at that time also similar to the ancestral moving on screen, It was showing the potential and can be changing.
From 2010 to 2017, the motion interface design is flourished development. Although the time is really short, the changing much faster than acceptation of computers and mobile phones to the public. The reasons possibly are that first, the current interfaces and utilization of computer and smartphone have been unable to satisfy people's requirement of aesthetic. Second, the user experience design already has the standards and methods to guide the engineers and designers. Cooper(2014) clearly explains the interaction design details and user experience design processing in his book which named as “About Face: The Essentials of Interaction Design.” 4th ed. In China, from 2010, the principles of motion interface design is gradually forming. Motion interface designers of Lenovo company are following the animation design rules “The 12 basic principles of animation”(Thomas,1995) to create the videos, interactive prototype and then connect specification to guide the engineers before the engineers to programming. Third, competition intensifies, each tech-product company wants to impress in the minds of users. In addition, the design of Apple company changes the world again. In 2013, the interface of the iPhone from quasi-materialization to flattening, there is need one visual design to supplement visual deficiencies. One obvious example is that the Motion interface of the Siri in iOS 6 system and iOS 7 system totally different. In the iOS 6 system, after user speaks to the microphone, the microphone icon on the screen shows that the light is rotating for explaining the processing of the iPhone. But in the iOS 7 system, the interface change to more colourful sound wave. The apple company’s design on Siri, using the image to mimic the real product then change to use the dynamic imaging to improve the sense of visualization. Although the sound wave was released in 1950, the motion interface design brings the beautiful re-designed sound wave again in front of users.
In General, the engineers, scientists and designers spend a long time on changing the technology to realize the conceptual future. Meanwhile, the history of technology offers the new inspiration to trigger the original innovation, and then change our way of looking at the world.
References
1.Krasner, Jon. 2008. “Motion Graphic Design Applied History and Aesthetics”. 2nd ed. Burlington: Focal Press. ISBN-10: 0240809890
2. Hiltzik, Michael A. 1999. “Dealers of Lightning: Xerox PARC and the Dawn of the Computer Age”. New York: HarperCollins. ISBN 0-88730-891-0.2.
3.Grudin, Jonathan.2017. “From Tool to Partner: The Evolution of Human-Computer Interaction”. Editor: John M. Carroll. Publishers: Morgan & Claypool. ISBN-10: 1627059636. P
4.Alan Cooper, Robert Reimann, David Cronin, Christopher Noessel, Jason Csizmadi, and Doug LeMoine. 2014. “About Face: The Essentials of Interaction Design”. 4th ed. Published by John Wiley & Sons, Inc., Canada. ISBN: 978-1-118-76657-6
5.Thomas, Frank, and Johnston, Ollie. 1995. “The Illusion of Life: Disney Animation”. 1st ed. New York: Disney Editions. Rev Sub edition. ISBN-10: 0786860707