Team 1 Principle #4: Feedback

Feedback, as defined by Don Norman in The Design of Everyday Things, is any means of “communicating the results of an action” to the user. Norman goes further by defining a set of standards that all feedback should meet; it should be immediate, proportionate, well-designed, planned, and prioritized. Feedback has grown much broader as our scope of technology has expanded, including haptic vibrations, vocal response, various interface states, and so on. In essence, Norman’s original definition still holds true, but has expanded beyond his original examples of simple flashing lights and beeps. In our current era of technology, interfacing might contain numerous forms of feedback to accommodate a slew of user needs for a single button press.

Example 1 – Dishwashers

One of Norman’s key gripes about poor feedback was the beeping of his dishwasher in the early morning. He felt that, rather than meaningful interfaces, cost-cutting systems held precedence in the design of the device, thus resulting in an annoying, meaningless beep when the dishwasher’s cycle had finished. As his typical use of the machine occurred late at night, he was often woken up by this beeping. Unfortunately, this type of feedback still exists in current models, although some allow you to configure the beeping volume, or even turn it off. In other ways, however, dishwashers have gained new types of feedback. Newer models show clocks and timers which may be edited on the fly, and some even show timelines of the current cycle and the system as a whole. Pressing a button shines an indicator light, as well as changing the digital display accordingly. These changes have improved feedback on these machines, but there is still much left to be desired in that realm.

Example 2: Google Material Design

Google’s ambitious Material Design for Android has become a standard in application and mobile development, and has easily branched out into the world of web and interface design. This is largely due to their focus on accessibility in design, much of which is echoed throughout the feedback of each component. Material Design standardizes innumerablew types of interactions and the states associated with them, as well as the feedback tied to each through multiple means – including haptic, visual, and auditory responses. One clear example of this is the button states laid out in this design system.

Each state of a button shows clear feedback to the user of when the button is held, pressed, or dragged, and this feedback has been carefully engineered to be shown around a finger press or mouse click. For example, the purple button on the bottom-right shows the beginning of a circle protruding around where the user has touched, giving a visual indication of interaction with that space. Similarly, the selected line item in the middle-top shows a clear color change and filled check box upon selection, giving the user an immediate notification that their action was input. These visual indicators are just one factor Google focuses on, and might be complimented with vibrations and sounds matching the direction and intensity of the action.

Example 3:  Instagram Photo Editing

Instagram does a fantastic job of giving immediate visual feedback to the user in multiple ways, including both a comprehensive “end-product” view of their photo, as well as clear selection states similar to my previous example.

   

In the above example, editing a photo of my dog allows me numerous options, including a choice of filter and the ability to fine-tune setting such as saturation and brightness. In the filter selection, I am given a small thumbnail previewing each effect, as well as a larger version of my current image with all edits being made. Not only is the selected filter popped out more than the others, but its title is much darker, showing me that I’ve clearly selected that option. Further, I am able to select each one and see it’s effect without finalizing anything. This feedback is immediate, changing the image right before my eyes. Once I go into more detailed editing of the photo, I am also able to manipulate a slider, which dynamically changes the image in front of me. I’m not given only a before/after, but rather I can see my image change in degrees as soon as I begin moving the slider with the finger. Small percentages of change are visible to the user on the fly, giving immediate feedback to every change I want to make. This is an excellent example of visual feedback at work.