UI SIMPLIFIED Exploring the Complexity of Simplicity By Moe Abbott Submitted in partial fulfillment of the requirements of the Bachelor of Fine Art in Graphic Design Program at Art Institute of Seattle. June 5, 2014
TABLE OF CONTENTS Introduction Simplification of UI Habitual UI Design UI for Specific Populations False Simplicity/Oversimplification Conclusion Cited Works Figures
3 4 9 11 12 16 17 18
ACKNOWLEDGEMENTS A multitude of thanks to Ryan Rood, who acted as my alarm clock, barista, personal chef and sounding board, while I dove head first in to this behemoth. A special thank you to my 4-year-old nephew August, for reminding me of how important snuggles are for one’s mental health. Most importantly, thank you to my brother Eli. You are the inspiration for all that I do.
“Keep it simple, Stupid”. Kelly Johnson, mid 1990’s
Communication through technology started as a drop, grew into a trickle and is now a waterfall of digital interfaces and complex functionality. E-mails lead to instant messaging; blogs lead to digital collection boards such as Tumblr and Pinterest; and social networking, such as Facebook and Twitter have sailed from the desktop screen to the mobile interface. [FIGURE 1] There is an overwhelming flow of informational interfaces from many devices broadcasting messages to be decoded, analyzed and retained. These interfaces house increasingly complex functions and offer users some of the most advanced interactive experiences to date. The challenge for user interface (UI) designers comes from having to balance the fields of design and technology to be simple to use and easy to understand (Chicago). How do these designers create an interface that balances simplicity and complexity? According to John Maeda, the former President of the Rhode Island School of Design, a successfully simplified user interface is one created “around the interests, needs, and well-being of the user” (Maeda ii). When users desire simplification, what is it they’re looking for? What makes an interface easy to use, and how does one go about determining what design elements will successfully [FIGURE 1]
3
simplify the user experience? Additionally, how does one design an interface simple enough for anyone to use, without oversimplifying it to the point of being useless? This paper will explore that paradox and issues of simplification in user interface design as a means of establishing what systems of simplification are in use and what possibilities exist for further simplification, via affordances and conventions in intuitive interface design, interface ergonomics, and usability of information technology.
SIMPLIFICATION OF UI A user interface is the space where interaction between humans and devices occur. These devices are anything from a computer screen to the digital interface of a smart watch. Essentially, a UI is “a set of commands or menus through which a user communicates with a program” (“User Interface”). The main aim of user interface design is to make the user’s interaction as simple and efficient as possible, in terms of attaining user goals. Therefore, it is important for a UI designer to understand how and why to simplify an interface. The mantra of User Interface design is one of “clean, easy to use, user-friendly and intuitive necessity” (Tate, “Minimizing Complexity in User Interfaces”). However, creating a userfriendly and simplified interface is harder than it seems. The culprit: complexity. A complex interface can disorient the user in a mild case and completely alienate him or her in an extreme case. With advancing technology, (which is now capable of doing more in one sitting than before), users find themselves caught up in a paradox of simplicity: “wanting something that’s
4
5
doing all the complex things they might ever want it to do” (“Complex Simplicity”). With interface design, this can cause a real challenge, as simplicity is often harder than complexity. However, if designers take measures first to reduce actual complexity and then to minimize perceived complexity, all while maintaining the intent and function of the interface, the user will be rewarded with a gratifying and beneficial experience. [FIGURE 2] Products characterized by Complex Simplicity have “clear and intuitive design, even when what lies beneath is technically advanced” (“Complex Simplicity”). The iPhone is an example of such a product, capable of performing a multitude of tasks, such as messaging, e-mails, schedule keeping, internet browsing, and even listening to music, while presenting an interface designed for managing those tasks with ease and maintaining the original function of the device: making calls. While the iPhone isn’t the most powerful smartphone in the market, or one with the fastest processor or even a hierarchical filing system, it is the most successful. Why is that? Because it’s guiding tenant was simplicity, “not merely the shallow simplicity that comes from an uncluttered look and feel and surface of the product, but the deep simplicity that comes from knowing the essence of every product, the complexities of its engineering and the function of every component” (Issacson, “How Steve Jobs’ Love of Simplicity Fueled A Design Revolution”). However, there are issues in the iPhones interface design that contradict the basics of simplicity. With the more recent
[FIGURE 2]
updates of the operating system, the iPhone now offers users the ability to swipe into view additional UI options from the home screen. If a user swipes up from the bottom of the screen, they will have access to apps and settings already accessible through the home page. While the user would have to take a few more steps to locate and activate these apps and settings from the home screen, the accessible content of the device is redundant, and the interface has become more complicated. This complex simplicity of the interface represents the dilemma designers face when a device, capable of doing so much, needs to be simplified for users. While the same content available through swiping is also available through the home screen, the iPhone interface designers anticipate that users prefer to have specific features accessible faster than others, and in this way they create a perception of simplicity where complexity actually exists. [FIGURE 3 & 4]
[FIGURE 3]
[FIGURE 4]
6
Using the iPhone as a case study, how does one design an interface simple enough to use for such a complex piece of technology? It requires an understanding of not only the basic principles of UI design, but also an understanding of how users think, see and interact with UI (“Ergonomic Guidelines for Interface Design”). The 8 basic principles of UI design are presented in the Universal Principles of Design:
7
VISIBILITY OF SYSTEM STATUS - The usability of a system is improved when it’s status and methods of use are clearly visible. (Lidwell, Holden and Butler 250).
ERROR PREVENTION - Designs should help people avoid errors and minimize the negative consequences of errors when they do occur. (Lidwell, Holden and Butler 104).
ADVANCE ORGANIZER - An instructional technique that helps people understand new information in terms of what they already know. (Lidwell, Holden and Butler 18).
RECOGNITION RATHER THAN RECALL - Memory for recognizing things is better than memory for recalling things. (Lidwell, Holden and Butler 200).
CHUNKING - A technique of combining many units of information into a limited number of units or “chunks” so that the info is easier to process and remember. (Lidwell, Holden and Butler 40).
FLEXIBILITY AND EFFICIENCY OF USE - As the flexibility of a system increases, the usability of the system decreases. (Lidwell, Holden and Butler 102).
MAPPING - A relationship between controls and their movements or effects, resulting in greater ease of use. (Lidwell, Holden and Butler 152).
THE GUTENBERG DIAGRAM - The general pattern followed by the eyes when looking at information. A primary optical area (top left), terminal (bottom right), strong fallow area (top right), and a weak fallow area (bottom left). (Lidwell, Holden and Butler 118).
8
What these 8 rules outline is the necessity for a designer to understand not only the importance of form and functionality in an interface, but also how people are going to interact with it. It’s one thing to design UI that is attractive. People are drawn to things that offer visual pleasure and things in which they find comfort in the aesthetic value. However, aesthetics alone account for only half of the equation. The true success in UI happens when aesthetic value is coupled with the functionality of an interactive component. There needs to be a logical reason for what has been designed, and that element needs to be easy to understand. A good example of this is the “hamburger” navigational icon. Introduced as an alternative to the traditional design of website navigation, particularly for mobile interfaces, these three lines, stacked neatly on top of each other, indicate a hidden list of navigational options. The reason for this design came from the need to simplify interfaces for small mobile screens where space is limited and to breakup information into chunks, making it easier for users to absorb the information and not become overwhelmed (Weinschenk, 48). By hiding all navigation under this icon, designers are able to not only reduce a large amount of space-consuming information, thus uncluttering the screen, they are also able to present an interactive option for viewing that information and for hiding it once it is no longer needed. In this, users gain pleasure from both the look of the navigation and how it functions. Thus complexity becomes a switch users can choose to have active on their own terms, and not by their device’s will (Maeda 6). [FIGURE 5]
[FIGURE 5]
9
HABITUAL UI DESIGN The first time or even the first several times people perform an activity, they do it in a highly controlled and conscious manner, but with practice it becomes more automatic. Examples include peeling an apple, driving a car, juggling balls, riding a bicycle, reading, playing a musical instrument, and even using an app on a mobile phone. Even an activity that might seem to require attention, such as sorting good cherries from bad ones, can become automated to the point that it can be done as a background task, with plenty of cognitive resources left over for having a conversation, watching the news on television, shopping for groceries, etc. Therefore, experience, expectations and perception affect how users interact with a product and influence how interfaces are designed. The hamburger icon, when first introduced, (using the Facebook app as an example), was placed in the upper left hand corner of the screen. This was due to the design standard of placing logos and navigation at the top left of most websites. So frequent has this section of layout been used, that it became automatic for users to look for these elements in that location, and it is an example of the 8th principle of design, the Gutenberg Diagram, which places primary optical information at this location. [FIGURE 6] It is logical that the extension of web interfaces in to mobile apps would echo the same design principles. Despite the mobile interface being smaller, people still automatically look for logo and navigation in the top left corner. Therefore users interact with the hamburger icon by habitual behavior.
[FIGURE 6]
ORGANIZED
LAYERED
ERGONOMIC
SKEUMORPHIC
10
However, in a response to updating their mobile interface with more features, Facebook developers recently relocated the hamburger icon to the bottom right corner, and made their interface a bit more complicated. Beneficial to users is that the navigational hamburger icon is now placed alongside the other navigational elements of the app: News Feed, Requests, Messages and Notifications. All options for navigating throughout the functions of the app are in one place. Furthermore, the word “More� has been added under the icon, to make it clear that users can access further options through it. This resolves the problem of the hamburger icon being too ambiguous for some users to understand its function. The problem with this relocation is that the standard for navigation design has been abandoned. No longer is the user able to automatically find navigation in the top left corner. In fact, if they subconsciously tap that part of the screen, they’d activate the status posting feature, rather than any navigational options. This design change can add complexity to an already complex interface and cause a lack of usability for some people. Additionally, Facebook has introduced a second hamburger icon at the top right corner, which provides a list of all contacts, events, and groups one has on Facebook, relating in no way with the other navigational options of the first hamburger icon. Facebook has taken a component that was designed to simplify and made it harder and more confusing to use. [FIGURE 7 & 8]
[FIGURE 7]
[FIGURE 8]
11
UI FOR SPECIFIC POPULATIONS While the overall goal of simplified UI is to create a balance between simplicity and complexity, the driving component of any interface design is the user. This paper has discussed the importance of designing UI to meet the expectations and perceptions of users, but only in a broad sense of who the user is. There are many populations that need something specific from an interface, and for this the main purpose of a simplified interface is to make easier the tasks those users feel are too complex. An example of this is the interface for the Cellnovo Insulin pump. Traditional insulin pumps utilized a combination of tactile buttons and digital readouts of data. A fairly simple design, these pumps are widely used by all kinds of diabetic patients. Cellnovo recently introduced a new approach to designing these devices that presented the interface more like a mobile app. [FIGURE 9 & 10] The entire interface is digital, with no tactile buttons to push, and rather than black and white informational readouts (much like an older style digital watch), the information is organized by color and icons. This new design utilizes elements that people are familiar with, via their mobile devices, and creates a medical interface that is both familiar and pleasing to use. The functionality of the device remains the same: monitoring insulin levels and providing information for the patient. However, the new design includes features for recording and organizing the information, syncing that information with one’s computer, and
[FIGURE 9]
[FIGURE 10]
options for setting reminders. Furthermore, this interface offers a feature which the other pumps don’t; the ability for physicians to be continuously updated on their patient’s status “with accurate and current information that identifies and addresses problems immediately that, otherwise, might go unnoticed for months, contributing to excess cost and potentially tragic patient complications” (Dolan,”Cellnovo Launches Cellularenabled Insulin Pump, Usability Trial”). This new pump is technologically more complicated than its predecessor, yet its interface is presented in a simplistic form that makes it easy to use and increases its value to a specific user.
FALSE SIMPLICITY/ OVERSIMPLIFICATION It is possible to simplify an interface to the point of being unusable and too ambiguous to understand. This can be as much of a detriment to UI design as making an interface that is too complex for users to interact with. False simplicity is particularly worth paying attention to in the design and conceptualization phase because it often passes for being “simpler” at first glance, when in reality it makes the interface more complicated to use due to 1) loss of context, 2) ambiguousness in the UI, and 3) a mismatch between the UI and task complexity (Holst, “3 Types of False Simplicity”).
12 ?
13
1) LOSS OF CONTEXT One type of false simplicity arises when one simplifies an interface where the user ends up losing context. Such loss of context can happen when one oversimplifies or outright removes UI elements such as “hierarchy indication (indentations, semantic markup, breadcrumbs etc.), navigation history (visited link state), labels, and indication of selections, instructions and so on” (Holst, “3 Types of False Simplicity”). An example of losing context as a result of simplification is forms with labels inside the form fields. Such an implementation can be found during checkout at e-commerce sites. The form fields, while simple in visual appearance, get very difficult to interact with when each field loses its context the second the user starts typing. This not only makes it more difficult to fill in the fields, it also makes it difficult to correct errors in the form since the labels are now missing. [FIGURE 11] When the Baymard Institute conducted a checkout usability study, they observed that “when users had to correct errors in forms designed where fields lose context, they ended up deleting the entire input just to be able to read the label once again – after which they’d have to re-enter the same information again with just a couple of characters changed” (Holst, “3 Types of False Simplicity”). All form fields ultimately look alike. The only thing that separates two text fields is their context, and the field’s label mainly sets this context, so when the label is removed as the customer starts typing, it becomes difficult to differentiate one form field from the other.
[FIGURE 11
14
2) AMBIGUOUS UI Another type of false simplicity happens when one simplifies an interactive UI element to a degree where the user can no longer immediately understand what it does. This can happen when the comprehension of a specific user group varies greatly by previous browsing and computer experience, age, culture, language and so on. But, generally speaking, the further one moves away from a design that follows traditional conventions, the more likely one is to end up with false simplicity. An example of such simplification is the category navigation at SpringWise, a business trend-spotting blog. The category navigation consists of 21 icons located in the sidebar, acting as links to categories with hover titles. This icon deck had a nice and sleek look, but the user had to hover over every single one to know what each of them represented unless the meaning of the icons could be guessed easily. When an interface is used less frequently the scenario changes; the cost of adoption increases greatly as the icons become more difficult to remember when there are weeks between each return encounter and the accompanying behavioral reward for successful use. It would seem that SpringWise was paying attention to how users interact with their interface, and that they noted the complexity presented in their designed simplicity of the icon deck. Currently, the category navigation has been updated with labels under each icon, aiding users in understanding what category each icon represents. [FIGURE 12 & 13]
[FIGURE 12]
[FIGURE 13]
15
3) MISMATCH BETWEEN UI AND TASK COMPLEXITY Another type of false simplicity can happen when the opposite is the case - when a rather complex task is given an interface that’s too simple. Simple tasks are best suited to be matched by a simple user interface, but sometimes to solve an advanced task, an overly simple interface just doesn’t cut it. Sometimes the user needs the reassurance and confirmation of fine details (even if that means a bit of added complexity) to be able to solve the task at hand. An example of such a case is found in OS X Lion when setting the security level for formatting the hard drive. In the recent OS upgrade, the interface went from being a set of radio buttons to a slider. The slider-based dialogue only displays the description for the option currently selected. While this removes a lot of description and clutter from the interface, the user now has to work harder to obtain the important information needed to figure out what options are available and make a selection. Simplifying an “advanced settings” screen this way creates a mismatch between the tasks at hand and the UI. [FIGURE 14]
[FIGURE 14]
CONCLUSION The future of UI design is clear, only in that it will continue to evolve as more and more complexity is introduced to digital devices and the demand for what they can do grows. With every new device and interface developed comes the need to re-examine the success of current interface design. UI design fails, as a result, from a lack of understanding of both the functions of the interface and the user. After all, simplicity is harder to design for successfully than complexity. However, simplicity is possible if actual and perceived complexity can be reduced, while keeping the user’s needs in mind. The overall function of any user interface is to create a balance between complexity and simplicity, all while addressing the interests, needs, and competency of the users, whether the design is for a specific user population or the general public, be it a general population or one more specific.
16
RE-EXAMINE CURRENT DESIGN REDUCE ACTUAL/PERCEIVED COMPLEXITY KNOW THE USER
WORKS CITED Chicago Website Design. Chicago Website Design. Prometheum Technologies, 2014. Web. 3 Jun. 2014. <http://chicagowebsitedesign.biz/>. “Complex Simplicity.” Watson Creative. Watson Creative, 2013. Web. 22 May 2014. < http://watsoncreative. com/Insights/ComplexSimplicity.aspx>. Dolan, Brian. “Cellnovo Launches Cellular-enabled Insulin Pump, Usability Trial.” Mobihealthnews. Chester Street Publishing, Inc., 10 Feb. 2012. Web. 10 May 2014. <http://mobihealthnews.com/16296/cellnovo launches-cellular-enabled-insulin-pump-usability-trial/>.
17 Lidwell, William, Kritina Holden, and Jill Butler. “Universal Principles of Design: 115 Ways to Enhance Usability, Influence Perception, Increase Appeal, Make Better Design Decisions, and Teach through Design.” Minneapolis: Rockport Pub., 2010. Print. Maeda, John. “The Laws of Simplicity.” Cambridge, MA: MIT, 2006. Print.
“Ergonomic Guidelines for Interface Design.” CUergo: Ergonomic Guidelines for Interface Design. Cornell University, n.d. Web. 24 Apr. 2014. <http://ergo. human.cornell.edu/ ahtutorials/interface.html>.
Tate, Tyler. “Minimizing Complexity In User Interfaces.” Smashing Magazine. Smashing Magazine, 7 Oct. 2009. Web. 10 May 2014. <http://www. smashingmagazine.com/2009/10/07/minimizing complexity-in-user-interfaces/>.
Holst, Christian. “3 Types of False Simplicity.” Baymard Institute, 6 June 2012. Web. 10 May 2014. <http://baymard.com/blog/false-simplicity>.
Weinschenk, Susan. “100 Things Every Designer Needs to Know about People.” Berkeley, CA: New Riders, 2011. Print.
Issacson, Walter. “How Steve Jobs’ Love of Simplicity Fueled A Design Revolution.” Smithsonian. Smithsonian Magazine, Sept. 2012. Web. 20 May 2014. <http:// www.smithsonianmag.com/arts-culture/how-steve-jobs love-of-simplicity-fueled-a-design-revolution 23868877/?no-ist>.
FIGURES 1. http://blog.petflow.com/a-man-interviewed-his-guinea-pig/#mLLWXJmFFGCdeh3m.01 2. http://theambitiouslife.com/image/48691036709 3. http://cdn8.staztic.com/app/a/2631/2631721/ios7-iphone-hd-5-in-1-theme-2-0-s-307x512.jpg 4. http://www.appleorbit.com/wp-content/uploads/2014/01/control-center.jpg 5. http://img.gawkerassets.com/img/18nqkefu0jpfrpng/original.png 6. http://uxmovement.com/wp-content/uploads/2011/04/gutenberg-diagram.png 7. http://blog.edeverett.co.uk/wp-content/uploads/2013/02/fb_hamburger1.jpg 8. http://cdn.ndtv.com/tech/images/facebook-ios7-style.jpg 9. http://cdn.medgadget.com/img/65shwf.jpg 10. http://www.qmed.com/files/ck_images/Insulin%20pump.jpg 11. http://baymard.com/checkout-usability/benchmark/top-100/65-rue-la-la 12. http://baymard.com/blog/false-simplicity 13. http://www.springwise.com/ 14. http://baymard.com/blog/false-simplicity
18