Don Norman says the difference between good and bad design falls upon the concepts of discoverability and understanding. Good designs bridge the gap between user and the product and make communication between the two easier and efficient. Bad designs cause confusion and frustration and complicate the user’s experience with the product. As a design major interested in interactive media development, I agree with Norman’s analysis of why human interactive design is very important, even when it is often neglected due to time and cost.  In my own experiences I have shared the frustrations of bad design. I have experienced apps that were confusing to navigate and websites that were poorly designed which made it difficult to find information I needed. Like Norman, I understand the need for manuals or instructions with complex designs, but for design products meant to make life easier, often human experience is forgotten about in the creation process, leading the user to struggle unnecessarily.

Fundamental Principles of Interaction

Affordance

Norman defines affordances as the relationship between the capabilities of the user to figure out how the design is used and the properties of the product. A real-world example of an affordance is a mug. Mugs afford the ability to hold liquids or objects and their size and handles also afford portability. Mugs have another affordance in the types of material used to construct them because it affords the user to fill them with both cold and hot liquids without them becoming damaged.

In web design hyperlinks are a form of affordance. They afford the user to click on them for more information and send the user to new pages or sites for that information. Links afford discoverability because they are often underlined or a different color which helps them stand out from the rest of the text, so the user can find them easier. Users without a mouse can easily find links and select them by using the Tab key when these links are formatted consistently and stand out from the normal web page text.

Hyperlinks are designed to be easily noticeable to afford discoverability to the user. Source: Webfx.com

Signifier

According to Norman, signifiers act as signs to communicate to the user what actions are possible. A common signifier we often see are the crosswalk lights. Crosswalks rely on icons to signify when it is safe (or unsafe) to cross an intersection. Because red is a color common on danger or warning labels, the red hand held up (also signifying a stop) tells the user it is not yet safe to cross because it is “dangerous,” so they must stop walking. When safe to cross, the crosswalk changes to an icon of a human walking. Crosswalks also use signs near their buttons, so the user knows which button corresponds to which cross walk path.

In web design, icons are also frequently used to show what actions a user can take with a particular button. On Google Chrome there is an arrow icon that appears to circle back on itself representing the ability to refresh the page. If the user hovers over the icon, a small popup appears next to the cursor with the words “Reload this Page.” The pop up acts as a sign that signifies to the user that if this icon is pressed it will reload the current page.

Signs are common signifiers that provide more information about web icons for users.

Mapping

An example of mapping are virtual reality game devices such as Oculus. These devices track which hand the player uses so they control characters on screen. This form of mapping means when a player moves their left hand the character also moves their left in the same movement. Depending on the game if a player makes a slash motion left to right the character will make the same motion in the same direction.

A form of mapping in apps is menus. On a smartphone when the call icon is pressed, the app brings up the call log with another button representing the number pad near the bottom. Application mapping groups related actions together but minimizes them to prevent cluttering the screen. The user can then decide whether they want their recent call list, their contact list, the number pad, or make a call options all within the original phone icon on their home screen. No matter which option the user clicks all these different actions relate to calling and control the smartphone’s ability to make a phone call.

App mapping on smart phones keeps related functions together.

Feedback

An old form of feedback is the dial up connection sound. The sound provided the user an audible response to them clicking the connect to internet button from their computer. This sound was useful to not just the user, but to others who may wish to use the phone for a call and alert them that someone was logging online.

Download bars are examples of feedback because they show the user that their action of clicking on a button has worked. Users are presented with a download arrow or bar at the bottom of their browser with an estimated time to show that their software or app is being sent to their device. Without this visual feedback the user may continue to click the download button or become frustrated because they have no indicator that their clicking resulted in the desired action.

Visual feedback in the form of download bars alert users that their action was successful.