Talk About Design
From a human-centered perspective
“This book covers everyday things, focusing on the interplay between technology and people to ensure that the products actually fulfill human needs while being understandable and usable”.
— Don Norman, The Design of Everyday Things
Have you ever used a product you didn’t like or couldn’t quite figure out? How about a product that was so easy to use, you couldn’t imagine anyone having difficulty, yet they still do? We typically blame ourselves and each other for the misuse of a product. The real issue often lies with its design and how it communicates to a user. To illustrate this point it may be necessary to first discuss what makes good design under a critical lens provided by Don Norman in The Design of Everyday Things.
The three areas of focus within design that are relative to this book are Industrial, Interaction (UI) and Experience design (UX). Industrial design concerns itself with form and material, UI with understandability and usability, and UX with emotional impact. Each area of focus has its role in creating great products but more importantly, each has a duty to observe the principles of Human Centered Design (HCD).
HCD provides guidelines for integrating human needs with design process. This is done by utilizing five fundamental principles of psychology as principles of Interaction and Design. They are affordances, signifiers, constraints, mapping and feedback. A full definition for each of these are available in Normans book The Design of Everyday Things. In light of this, brief definitions will have to suffice for now. Affordances are the relationships between a user and product. Signifiers are perceivable cues denoting where these affordances exist. Constraints guide actions and operations by physical or cultural means. Mapping relates to the available controls and relationship to the things being controlled. Feedback refers to any perceived information resulting from performing an action. Together, they create a sixth principle: the conceptual model.
The effectiveness of the conceptual model is then dependent upon its discoverability, which is determined by how well designers implement principles of interaction and design. Although good design is concerned with aesthetics, the following designs ought to be judged less by appearance and more by the application of these design principles, or the lack thereof. Consider the following examples of good design.
Example #1: Amazon.com as a product is designed extremely well. It appears to be optimized for each device and makes great use of affordances, signifiers, constraints, mapping and feedback. A great feature of amazon is that it utilizes product images as signifiers of affordances with a natural mapping. This is especially useful on touch screen devices where the entire surface of the screen affords interaction. Slide the image within its category to see options. Tap the image to see more. Regardless to the device, a user will identify the image of a product as the signifier of an affordance to view or purchase products.
Thanks to feedback, users know when and where these products will be delivered. Most, if not all functional websites and apps provide adequate feedback when interacted with in any capacity. Amazon does this expectedly well with predictive search text, guidance during form filling, and overall perceivable feedback signifiers after each interaction.
This provides an opportunity to discuss the psychology of everyday actions in relation to Amazon. Norman provides an oversimplified model of cognitive and emotional processing which serves a “good enough” purpose for practical application. Human cognition and emotion are processed on three levels; visceral, behavioral and reflective. Feedback processed on the visceral and behavioral level generally involve instantaneous emotions or reactions based on learned skills. Any feedback causing a reflective state occurs at the highest level of cognition and involves slow, critical thinking and analysis which takes time. How might amazon have used knowledge of emotional and cognitive processing?
Consider the buy now / buy with one click button. Amazon is not only capable of learning your shopping habits to cater deals specifically to your preferences, but it also learns a user’s preferred payment method and information. By placing this knowledge out of a user’s mind and into the world they actually save valuable time and effort by not having to re-enter credit card information with every single purchase. Amazon combines shopping preferences with payment options and other algorithms that offer relevant discounts and places them at the home screen. This effectively turns the point of sale into a behavioral response by allowing opportunistic purchases.
The conceptual model (or mental model) created by using the desktop website translates well to other devices, making the overall experience feel familiar across devices. Amazons interface doesn’t change much between devices nor does its mapping. The changes to the interface result from physical device constraints and affordances such as screen size and input method. The constraint of the devices determine how much information can be displayed and whether you must click or tap to interact with the product.
Example #2: Another good design is the standard bicycle. Most of us have knowledge of how to ride a bicycle, even if we don’t have the skill to ride one ourselves. This is due to knowledge obtained from the world and constraints; we often see many people riding bicycles in cities yet some people haven’t learned how to ride bikes.
Those people can at least sit on the seat and grasp the handlebars properly without the skill required to balance it. This is due to the overall mental model. The culmination of all internal and external knowledge, including cultural constraints allow a person to identify the front and back of the bike. The finger groves on some handle bars act as signifiers of an affordance for grasping. Additionally, while grasping the handle bar, one may notice that pivoting the bar affects the steering of the front wheel. The pedals located by the feet suggest that manipulation of the crank and drive train is best done by foot. (If that’s not enough, perhaps they try by hand and find it uncomfortable). A cushioned saddle will likely signify a seat. Although not all bike saddles are cushioned, one might still make an association with sitting due to the physical and logical constraints of the bicycle. Once the handles are gripped and the feet are engaging the pedals, the only logical step that follows is to sit back on the saddle.
Example #3: The constraints of this electric kettle make it such that one doesn’t need to read the instructions to form a functional mental model for appropriate behavior. It comes as two parts; a baseplate which plugs into the outlet, and the kettle itself which has two buttons. The baseplate has a small protrusion which corresponds to an indentation at the bottom of the kettle. This in addition to the fact that the diameter of the baseplate is nearly identical to the diameter of the kettle base act as signifiers that the kettle may rest upon the base. An instantaneous understanding of their relationship is formed.
The two buttons are easy to understand as well with minor labeling thanks to natural mapping. The button to open the lid is attached to the lid in such a way that as you pull the button, you open the lid. Once filled with water and placed atop the baseplate, the only other button/switch that can be pressed is located atop the handle, where ones thumb might rest. It operates in a recognizable on/off binary and once the switch is turned on, feedback is provided in the form of a red light which automatically shuts off once the water is done boiling.
There are many well designed products in the world. Many more exist which are not necessarily poor designs, but which could benefit from additional consideration of HCD principles.
Example #4: New York City’s MTA subway turnstyles do a fair job at keeping riders from jumping over (though it still happens). It’s an improvement from older designs in New York which were only waist high and barely an obstacle for the able-bodied to overcome. The turnstyles pictured above afford passage only once a user payed. Its best signifiers are located at eye-level. Subtle constraints — such as the tilt of the card reader and arrow— provide guidance as to which side you must enter and swipe.
Daily commuters have little issue using these turnstyles. They know exactly how fast to swipe a metro card and they generally have a keen ear for the barely audible click (an accidental but functional signifier resulting from the internal mechanism) that signals riders to pass. Furthermore, they can often distinguish the difference in feedback beeps when the the swipe action succeeded versus when it failed. This level of familiarity comes from over-learning from years of commuting. There is a small screen located below eye-level which notifies the user if the swipe action succeeded, if it failed and why it failed. In an ideal situation, the station is quiet, evenly lit, and allows a user to hear the feedback and address the little text on the tiny screen.
In reality, stations are usually crowded beyond critical mass. This is especially true in touristy areas where performers play music at volumes well above the roar of traveling commuters. Tourists seem to miss the auditory and visual feedback due to external noise and distractions. A potential fix could include more perceptible visual feedback at eye level (such as where the ‘no entry’ and ‘enter left’ signifiers exist) rather than the 1"x3" text strip below the arrow.
Example #5: Don Norman provides ‘norman doors’ as an example of poor design. They’re designed in such a way that any present signifiers indicative of pushing or pulling are ambiguous, causing people to push or pull the wrong side or the wrong door. There are different issues with double doors which Norman didn’t address. Double doors are a great way to afford passage to large crowds going into or out of a building. In many cases, one of the two doors is locked, requiring pedestrians to either force their way through the door two at a time (in different directions), or wait for one group to enter before exiting themselves. This issue seems to stem from the idea that each door needs an individual key lock. Perhaps there are double doors out there, where each set is jointly locked and unlocked by a single mechanism.
Example #6: Zipcar provides a great car rental service. The desktop website works well for renting vehicles and accessing user account information. The mobile app also allows users to rent and reserve cars with ease, but doesn’t provide much account access. For example, a user can’t update credit card information from the mobile app. What if the user finds out last minute that their only card on file expired? Are they expected to access the desktop site on their mobile phone? This is one major pain point with the mobile app. Another pain point lies in opening the rental vehicle. The zipcar user is required to possess a keycard to enter while its competitors allow complete access from the mobile phone. One might say the competitor learned to apply better HCD principles from zipcar’s mistakes.
Human Centered Design is a philosophy which includes Industrial Design, Interaction Design, and User Experience Design. Graphic Design should be mentioned as it’s subject to some HCD principles. When a person picks up a brochure or other piece of marketing collateral, they interact with it. There’s a tactile feel of the paper stock which may imply quality, especially when accompanied by letterpress, embossing or foil stamping. Folding and die-cuts that reveal bits of information out of context signify that information is hidden, yet to be revealed. Constraints such as letter size sheets or magazines suggest how long it might take to read any content contained within. There are many possible applications for HCD principles in both print and digital designs, even if limited to some degree. Graphic design is concerned with making information accessible and doing this means occasionally making compositional choices to guide the readers eye around the white space. While this works well for print mediums, compositional choices like shifting buttons in an app around for the sake of composition may compromise a users understanding of device functionality. One must always consider the implications of their actions.
