Lab 2

Essential Design Principles, Mike Stern

Before I delve into the 11 principles of design that Mike Stern discusses, it is crucial to analyze how much he emphasizes the use of design for humans. It is less of a robotic term and much more realistic to imagine who and what the purpose of the design is for.

Way finding

The first design principle discussed in the video is way finding. This principle is key to letting a person know where they are, what options they have to maneuver around, and what exit routes are available. He discussed this using the example of an airport and navigating your way to your gate. This specific design needs to answer the following questions for the user - Where am I? Where can I go? What will I find when I get there? What’s nearby? How do I get out? With all of these questions a full app can be developed that provides a clear and understandable path for the user to follow throughout the app.

Feedback

The second design principle discussed is feedback. Feedback allows the user to know how they are doing, if their task was completed successfully or not, if there is a warning, and how to fix those warnings so they don’t turn into errors. The questions that need to be answered in this stage are - What can I do? What just happened? What’s happening? What will happen in the future? When thinking about designing an app, thinking about the interactive elements is crucial for the user to feel as if their request is being processed. You want to build an app that makes sense on its own to the user so that the explanation isn’t more clear than the app itself.

Visibility

The third design principle is visibility. Visibility is crucial to the user in understanding what is being done with the app, allowing feedback to be present. The lack of visibility can greatly contribute to the lack of usability. However, as Stern noted, there is a limit to visibility. It can become cluttered if there is too much visibility and it is the user’s first time with the app. Ensuring that there is a good balance of what is necessary and what can be left off are the considerations that need to be kept in mind with this principle.

Consistency

The fourth design principle discussed is consistency. Consistency needs to not only occur on the very surface of your app, but also internally. The icons and terminology used is extremely helpful when getting a user to understand how to use your app. However, having the internal consistency help to provide integrity for the app because it shows a disciplined design that maintains the same fonts, color scheme and design overall. Without having a consistency between icons or other internal designs, it compromises the usability of the product and makes the user not believe that the design choices were thoroughly thought out.

Mental Model

The fifth design principle is the mental model. The mental model is broken up into two types - the system model and the interactivity model. The system model is about how the system works, the interactivity model is about how the user interacts with the system. Even with a new and “improved” design that may fit with your mental model (like what Mortimer did with the faucet), it most likely will not work with the intuitive mental model of others. Having something that is consistent with what users have used in the past and already understand helps the usability of the app greatly.

Proximity

The sixth design principle is proximity. Proximity helps us to understand that with grouping of specific commands or objects, that those will manipulate similar things within that application. Allowing the grouping of similar commands helps the user to understand that one command that manipulates the size of the text may also be in proximity to a command that manipulates the color or font style of the text as well.

Mapping

The seventh design principle is mapping. Mapping helps to understand which design control we are manipulating by the similar appearance to help adjust the object in the way the users are expecting. The order of the controls should relate to the objects they are manipulating, just as the way multiple garage doors and their openers should be related to the order in which the doors will be opened relating to which button is pressed. The best method for mapping is always the most direct mapping.

Affordance

The eighth design principle is affordance. Affordance helps users to know what possibilities are available when interacting with buttons, or switches or other objects on your app. This relates to the users capabilities and varies based on their respective capabilities. Visibility cues allows the users to know how to properly interact with said object. If there is no affordance or cues, the user will not know how to interact with the app leaving it to not be intuitive.

Progressive Disclosure

The ninth design principle is progressive disclosure. It is a necessary technique used primarily in the interaction design context. It allows the user to not see the complexity of the overall goal and simply see small and basic steps to get there to allow the user to not feel overwhelmed. This allows the interface for the user to remain approachable and interactive without being confusing. However, deciding what information to show and to hide leads into the 80/20 rule as sometimes the user would like to know some of the hidden information and sometimes they would not. How we decide this is using the 80/20 rule. Additionally, progressive disclosure helps to limit the confusion of the users and making them change a setting that they don’t understand and getting themselves stuck. Keep things simple.

80/20 Rule

The tenth design principle is the 80/20 rule. The basics of the 80/20 rule is that 80% of the systems effects comes from 20% of its causes. This rule helps to define what the user believes to be basics to the functionality of the system or app, and what is the more complex items that are unnecessary for what the users’ goals are. This ties back into the progressive disclosure as you will be hiding the 80% from the users so that the 20% is easy for them to find to allow navigation of the app to be as simple as possible.

Symmetry

The eleventh and final design principle discussed by Stern is symmetry. Throughout history, humans have been fascinated with symmetry and it helps to define what is beautiful to us and aesthetically pleasing. Most natural and human made objects have some level of symmetry - most commonly reflectional and translational symmetry. The main idea that is key with this principle is that even though there may not be a physical connection to each element, they are perceived as though they are connected.

Examples of Good Apps

Waze - Waze is a navigational app that applies the way finding, affordance, feedback, consistency and mapping the most. It is a very successful app in that the navigational cues are detailed enough for the user to understand where they are and where they are going. There is also always an exit to the use of the app and that is simply by canceling the route. Affordance is used when you want to not have sound, avoid tollways or freeways, and many other switches that you can turn on and off and the color is affected to let you know. Additionally, consistency is used with the icons to let the user understand easily what they are manipulating in the app. The feedback is there very well. If a wrong turn is made, it will reroute you to avoid error immediately and do so in a fashion as to not make the user feel as if they have messed up. The mapping is done well because the buttons for adjusting the route you want to take are all in the same section and the switches for turning off certain aspects in the app is as well.

Calculator - The calculator app is an excellent example of symmetry. There is the symmetry in the buttons on the calculator that allows for an easy and usable experience. It is intuitive as many people have the mental model of a calculator in their mind as well. It would be different if the app used the initial method of a calculator (the slider method) to make a calculator. That is not the mental model that we think of nowadays. We think of buttons and numbers to click that perform mathematical tasks for us.

Microsoft Applications (Word and PowerPoint) / Adobe Cloud Applications - The main design principles that they do exceptionally is proximity, progressive disclosure and the 80/20 rule. In terms of proximity, if you want to edit the text, they are all within the same area in the editing domain. For PowerPoint, editing the slides is under it’s own section, editing the format is under another section. If we are looking for a specific button to manipulate the page, we can look under the sections and make the intuitive assumption that they are within proximity to one another. Additionally, the information that is readily displayed is the most important 20% that most users need for the page. The rest use progressive disclosure to hide the other, more complex 80% from users.

Glympse - This application is great for showing design principles. The app provides real time feedback about where the person is at the given time that has shared their location with you, if the user is watching you after you have sent one, and how long it has been since it has updated. Additionally, the app is great with the visibility principle. What is being shown to the user is what is necessary for them to understand and complete a task, whether that be with sending a Glympse to another person or receiving the Glymse. Furthermore, the app does great with the 80/20 rule in allowing the bare minimum of information to be displayed so it is not confusing for the user, while still portraying enough for them to easily navigate the app.