The World is Flat: Reasons for Incorporating Flat Design into the Versioning Machine

As a part of my studies in Digital Humanities, I am taking part in a Practicum involving the Versioning Machine, a text-comparison platform developed by Susan Schreibman. The interface allows for multiple versions of a TEI-encoded text to be displayed side by side, facilitating analysis and editing. While samples of the versioning machine at work can be viewed on the web, it is designed to be downloadable and functional in an offline environment, with its modular nature making its backend amenable to modification and customization. The frontend, however, is starting to show its age, and thus my role in the practicum: I am to help with design and outreach, updating the look and functionality of the UI and then letting our users know about the new and improved Versioning Machine 5.0.

When redesigning the look of the Versioning Machine, I decided to make use of what is known as “flat” design. The concept of flat design is, in essence, exactly what the name suggests: it involves minimizing the artificially three-dimensional elements presented to the user, thereby “flattening” the display (which is, after all, only two-dimensional to begin with).

There is more to flat design than simple aesthetics, however—although, as with any kind of design, aesthetic considerations do certainly come into play to some degree. Flat design is a reaction to skeuomorphism, which is a design philosophy centred around replicating the look and/or feel of an object in a different medium into the medium being designed. The “book metaphor” that many digital humanists struggle so hard to escape from is an example of this: when the Amazon Kindle originally launched and tried so hard to capture the look of printed paper (“Introducing Amazon Kindle”), it was a skeuomorphic design choice. An analogue clock on a computer screen is another very common example, as Luke Clum illustrates in his article “A Look at Flat Design and Why It’s Significant” by using Apple’s dashboard as an exemplar. Apple is not the only company making these choices, either: Microsoft, whose Windows 8 line of operating systems is a very clear example of flat design, displays an analogue clock when a user clicks on the time and date on the lower right corner of the desktop.

What made Skeuomorphism so popular in computing? I believe that it was because these new products and operating systems were bringing technology to a new, wider audience. When something is new, people require a frame of reference: we experience new things in relation to our previous experiences, after all. Look at the conversations that happened in 2011 and 2012 when the Amazon Kindle was gaining widespread traction in the consumer market. The concept of an e-reader met with some resistance because people wanted to read the way they were used to: on paper, in printed books and magazines. Articles like Sara Barbour’s in the Los Angeles Times and Andrew Blackman’s on his blog argue that e-readers just aren’t the same as good old-fashioned books. The conversation across Amazon’s own customer forums, sparked by a user with the appropriate username of “lovetoread”, focused on customers weighing the new technology against the traditional books they knew and loved. They key point that the printed book lovers made in all of these discussions was that they missed the traditional “feel” of paper books. The new technology, with all its conveniences, just wasn’t as comfortable and familiar as what readers were used to. Amazon’s decision to replicate printed material as closely as possible with their first generation of e-readers wasn’t laziness, therefore: it was good marketing—a way of providing people as familiar an experience as possible in new technology. And that’s what skeuomorphism is all about: using familiar, established objects and concepts as metaphors for functions and features in a new medium or technology.

But now, all of that is falling out of favour, and flat design is in. Why? I think it has a lot to do with the penetration of these ‘new’ technologies in our everyday lives. Phil Goldstein reports on FierceWireless that various research firms reported smartphone penetration in the United States being as high as 61% in 2013, with global penetration increasing rapidly. New generations of children are growing up with these new technologies; digital downloads are becoming the norm while CDs, DVDs, and even printed books and magazines are finding less and less circulation. Regardless of whether this is perceived as a great leap forward in how we conduct our everyday lives or a lamentable dying out of traditional media, one thing remains certain—our metaphors are changing.

Perhaps, in fact, the metaphors are simplifying: the learning curve for touch-based interfaces is remarkably low, especially for individuals who have not been weaned on other media: look at infants who, long before they could hope to navigate a printed magazine or even a mouse-based operating system, are able to navigate touch-enabled tablets and open apps before they can even speak (Chang, Rakowsky, and Clark).

Similarly, researchers Harini Sampath, Bipin Indurkhya, and Jayanthi Sivaswamy at the International Institute of Information Technology in Hyderabad, India have developed a system called AutVisComm, whereby children with autism spectrum disorder, even those who have trouble verbally communicating, can benefit greatly from work with smartphone-style devices, sometimes even bridging communication gaps that were previously insurmountable. These devices are touching upon a kind of interaction that is much simpler and more fundamental than what humans have been used to over the past century, built upon “the concept that a visual system might be structured like a language” (Drucker 25).

And now, since our interfaces have become so intuitive and natural, those skeuomorphic metaphors have become more complicated than the technologies they are supposed to facilitate. What once provided critical experiential analogies linking the familiar to the foreign is now an obstacle to usability, an extraneous set of facilitators that complicate rather than simplify. The end result is more than just what Luke Clum describes as being inconsistent and functionless, it actually causes interference with usability.

Researchers Paul Chandler and John Sweller found that, in printed materials, images and text can work at cross-purposes, even if they say the same thing. Put simply, the more information that needs to be processed in order to understand a single concept, the harder it is for leaning to occur. I have written more about this phenomenon (called “cognitive load”) in my essay “Digital Overload: Cognitive Load Theory and Digital Scholarly Editions”, which I wrote during my first semester at Maynooth University and which is available upon request.

But how does that fleeing from skeuomorphism play into our design choices for the Versioning Machine? Simply put, it means removing unnecessary mental processing from the interface. Look at these two “close” buttons, for example: one old, and one new:

Versioning Machine Close Buttons

Versioning Machine Close Buttons

What was wrong with the old “close” button? Nothing really, except that the faux three-dimensional aspect is unnecessary. A few years ago, the visual representation of a red button that could be pressed was important as a cue to users that the “×” could be clicked on; now, however, people are now accustomed to the concept of an “×” in the corner of the screen meaning “close,” and so it is no longer necessary to make it stand out as a big red button.

Similarly, look at these two buttons, one old and one new, used to bring up an image of the text being examined:

Versioning Machine Picture Buttons

Versioning Machine Picture Buttons

The old button, whatever it was supposed to represent skeuomorphically, is almost indecipherable in its small pixel size. A simpler, more abstract button can now fill its function satisfactorily. The new button, while very abstract (and still somewhat skeuomorphic in that it uses simple shapes to suggest a landscape, and thus an image), is nonetheless sufficient to convey from the context of the page that it will bring up a picture.

The design choices go further than that, however. By reducing the number of colours on the page, the design is not only unified, but it also introduces a smaller variety of stimuli, making processing the page much simpler. The removal of black borders not only pulls the design together in line with modern aesthetics, it also ensures that nothing on the page is more saturated and has higher contrast than the black version text of the versions themselves in their white windows, thus emphasizing the text on the page, which is, after all, what the Versioning Machine is all about.

Thus, the interface has been flattened as a part of its new round of modernization. And while aesthetic considerations have, of course, influenced the design choices—it is important for the product to look good, after all—the main reason behind the change in the user interface was to improve the user experience and make the platform as intuitive as possible, resulting in a polished, well-oiled Versioning Machine.

References and Further Reading:

Barbour, Sara. “Kindle vs. Books: The Dead Trees Society.” Lost Angeles Times. 17 June 2011. Web. 20 March 2015. <http://articles.latimes.com/2011/jun/17/opinion/la-oe-barbour-kindles-20110617>

Blackman, Andrew. “The Kindle Report: Does it Beat Paper?” 4 December 2012. Web. 20 March 2015. <http://andrewblackman.net/2012/12/the-kindle-report-does-it-beat-paper/>

Chandler, Paul and John Sweller. “Cognitive Load Theory and the Format of Instruction.” Cognition and Instruction 8.4 (1991): 293-332. Web. Accessed 7 January 2015. <http://visuallearningresearch.wiki.educ.msu.edu/file/view/Chandler+%26+Sweller+%281991%29.pdf/47276877/Chandler%20%26%20Sweller%20%281991%29.pdf>

Chang, Juju, Christine Rakowsky, and Daniel Clark. “Toddlers and Tablets: The Way of the Future?” abcNEWS. 5 June 2013. Web. 20 March 2015. <http://abcnews.go.com/Technology/toddlers-tablets-future/story?id=19332916>

Clum, Luke. “A Look at Flat Design and Why It’s Significant.” UX Magazine. 13 May 2013. Web. 19 March 2015. <http://uxmag.com/articles/a-look-at-flat-design-and-why-its-significant>

Drucker, Johanna. Graphesis: Visual Forms of Knowledge Production. Cambridge, MA: Harvard University Press, 2014. Print.

Goldstein, Phil. “Report: Global Smartphone Penetration to Jump 25% in 2014, Led by Asia-Pacific.” FierceWireless. 11 June 2014. Web. 20 March 2014. <http://www.fiercewireless.com/story/report-global-smartphone-penetration-jump-25-2014-led-asia-pacific/2014-06-11>

“Introducing Amazon Kindle.” Amazon Media Room. 19 November 2007. Web. 20 March 2015. <http://phx.corporate-ir.net/phoenix.zhtml?c=176060&p=irol-newsArticle&ID=1079388>

lovetoread. “Kindle v Books.” 16 AUGUST 2011. Amazon.co.uk, Online Posting to Fiction Discussion Forum. Web. 20 Mar. 2015. <http://www.amazon.co.uk/forum/fiction?_encoding=UTF8&cdForum=Fx35L6AIBJFGDP0&cdThread=Tx2QRDD5DISULK9>

Sampath, Harini, Bipin Indurkhya, and Jayanthi Sivaswamy. “A Communication System on Smart Phones and Tablets for Non-verbal Children with Autism.” International Institute of Information Technology in Hyderabad, India. <http://web2py.iiit.ac.in/research_centres/publications/download/inproceedings.pdf.a4cc00a72ef15620.49434348502e706466.pdf>

This entry was posted in Versioning Machine and tagged , , , . Bookmark the permalink.

Comments are closed.