Performance load is the amount of effort required to complete a task. So, if the performance load is high, the task is more likely to take longer and/or fail than if the performance load were low. This seems like common sense that if something is hard to do, that you might take longer to do it or possibly fail, but often this isn’t considered in design. In my experience at work, I’ve found that having a name to describe this really helps make it a legitimate topic to discuss and explore with research.
There are two types of performance load: cognitive load and kinematic load. Cognitive load is the amount of mental effort it takes. For example, remembering a password to log into a website or application is an example of cognitive load. How many times have you been frustrated by that or just given up? Most of the time my laptop remembers my passwords for me so my cognitive load has been reduced. Kinematic load is the amount of physical effort required to complete a task. For example a manual transmission has a higher kinematic load than an automatic due to the effort required to operate the clutch and the gear shift.
Good design can help decrease performance load and increase the likelihood of people accomplishing their goals. Cognitive load can be reduced by organizing layouts, way-finding, and controls in ways that make sense to people. Chunking can also be used to organize information so users can find it more easily and intuitively. By reducing the physical force and number of steps required to accomplish a task, the kinematic load is lessened and people are more likely to complete the task successfully.
Examples from the readings
Examples from our text reductions of performance load. Electronic car keys and electronic slot machines take less effort than manual ones. Computer browsers save bookmarks so users don’t have to remember them or write them down and UPC codes allow cashiers to scan an item versus having to remember and then type in a code.
Examples from the Web
On Apple’s website if you want to download the user guide for your laptop, you need to identify the year it was manufactured. This requires cognitive load because the user has to recall the year. If the computer is several years old, this may be difficult. Image source: Apple Support
Examples from the World
This is our lawnmower. The kinematic load is very high for this machine because a lot of strength is required to pull the cord very quickly to start it.
Works Cited
Lidwell, W., Holden, K., & Butler, J. (2010). Universal principles of design, revised and updated: 125 ways to enhance usability, influence perception, increase appeal, make better design decisions, and teach through design. Rockport Pub. PP. 178-9.
Discoverability refers to how easy it is to determine possible actions, and how to complete those actions when a system or object is unfamiliar. Think about objects you have interacted with for the first time like a coffee maker in a hotel room. Did you know how to use it by looking at it for the first time or did you struggle? Often, people blame themselves when they don’t immediately understand how to use something, but it’s not their fault. If it’s a common object like a phone or coffee maker, it should be intuitive to use, even if it’s the first time. The way to achieve this is to make the actions of the system discoverable.
Discoverability is not a single principle all on its own because depends on several design principles working together: affordances, signifiers, mapping, and conceptual models. Affordances are the relationship between the properties of an something and the ability for the user to determine how to use it. Often, affordances have signifiers that demonstrate how to use it, thus giving the object affordance. Mapping helps the user understand the relationship between different elements, and conceptual models display how a system works. Having a conceptual model of how the system works and being able to see how the various elements connect to each other help the user understand the system and how to operate it. When all of these elements are working properly, the user is able to discover what to do to achieve their goal. It just feels easy and intuitive to use without a lot of effort or understanding.
Example from the readings
Norman and Tognazzini[1] asserted that Apple eliminated discoverability when the moved to gesture-based interfaces because it was no longer apparent to the user how to control the system.
Examples from the Web
2011
In 2011, all of Amazon’s departments were easily discoverable through a persistent menu on the left side of the screen. Image src: Wayback.com
2012
2015
In 2012, the menu was hidden under a “Shop all departments”, reducing the discoverability. Image src: Wayback.com
In 2015, the masthead changed from white to dark blue and a triangle was added next to department to signify there was a menu available, increasing discoverability. Image src: Wayback.com
2017
2018
In 2015, “Shop by” was removed. My guess is that this do not reduce discoverability. Image src: Wayback.com
Currently, the departments are in a hamburger menu next tot he Amazon logo. Image src: Wayback.com
Example from the World
This is the control screen for a coffee maker. To see all of the controls, the screen must be touched to turn on. Even when the screen is off, some of the controls are still visible so the user is still able to discover how to operate the system and what choices are available.
Works Cited
[1]Norman, D., & Tognazzini, B. (2015). How Apple is giving design a bad name. Retrieved from: https://www.fastcompany.com/3053406/how-apple-is-giving-design-a-bad-name
Classical conditioning is a well-known psychological approach that uses positive or negative stimuli to either create an association or influence behavior [1]. The most famous instance of classical conditioning was Ivan Pavlov’s experiments with dogs. He created an association between the sound of a bell (or other stimuli) and the arrival of food, and over time the dogs began salivating every time they heard the bell, whether or not food was present [2]. We can see classical conditioning all around us in marketing and ads, technology, our own behavior, and nature.
Examples from Our Text
1. Olive Garden ad
This TV commercial uses several conditioned associations and emotional reactions to evoke an emotional response from the viewer. The positive stimuli of upbeat music, freshly prepared food, friendly narration, and the inclusion of “real” people enjoying that food and each other’s company all combine to elicit action from potential customers. Ideally, this action results in spending money at Olive Garden in order to experience these stimuli first-hand. [3]
2. Anti-smoking ad I first saw this ad when I was a kid, and even after 20+ years I still remember it clearly. The negative stimulus is so strong, in this instance, that the effect of the ad remains long after the original image is removed from sight. I remember having a very visceral reaction, one that gave me nightmares and permanently deterred me from smoking. (Exactly the type of behavior the ad is intended to trigger.) The image itself is an effective combination of physical deformity suggesting serious illness and text that contextualizes this disturbing image and draws on the power of imagination.
Examples Online
3. Swimwear ad (ModCloth) ModCloth, a women’s clothing company, is a self-described champion of diversity so it’s no surprise than many of their ads feature physically and racially diverse models. This photograph in particular, which appeared in the swimwear section of one of their catalogs, is a great example of positive stimuli. The women in the ad are attractive, happy, and look like they’re having fun in a real-life setting that most customers will be familiar with and relate to.
This is pretty common in advertising, but this ad takes it one step further. The women in the image physically resemble a wide variety of viewers, making them feel represented in an emotionally validating way, and this becomes an even stronger incentive when combined with the other positive stimuli present in the photo. Perhaps the idea of representation also draws its strength by subverting our conditioned expectation that models don’t look like us. That feeling of recognition and empathy is a powerful one, especially when we are expecting the opposite. [5]
4. Notifications Much like Pavlov’s bells and buzzers, interface notifications are undoubtedly a stimulus that triggers a conditioned behavior– opening an app or checking email, for instance. But are they a positive or negative stimulus? While there is nothing inherently negative about a visual or auditory notification alert, we are all conditioned with very specific responses to that notification. Depending on the notification type, that stimulus can trigger stress, excitement, anger, or a wide range of other emotions. Companies like Apple have recently attempted to minimize the potential negative impact of notifications by grouping them together, creating a slightly less emotionally overwhelming experience for the user. [6]5. Slot machines Casinos are full of objects and systems designed to trigger conditioned behavior. In fact, their entire business model relies upon effective conditioning. One example, described in a 2013 study, is a particular feature programmed into slot machines. Most users are accustomed to the auditory and visual feedback that follows a win. The “jubilant” sounds signal triumph and accomplishment to our brains. However, slot machines take it a step further. When a user has a “partial win”, i.e. wins some money back but not all, the slot machine still plays the same triumphant music and sound effects as if it had been an actual win. This positive stimulus triggers that same feeling and often feeds into the addictive nature of the game, causing users to believe they’re doing well as they continue to lose money. [7]
Examples Around Us
6. Smoke detector Everyone is familiar with the irritating chirp of a low-battery smoke detector. The negative stimulus is so loud and annoying that it is impossible to ignore. (My dad once threw a smoke detector out into the snow on Thanksgiving.) Most people, however, take the path of least resistance and exhibit the desired behavior of simply replacing the battery.7. Cheetos Food packaging is full of positive stimuli, often aimed at very specific demographics. This bag of Cheetos has the perfect design to attract children, and through them, parents. The colors are bright and attention-grabbing, and even the chips themselves are an unnatural bright orange with a satisfying auditory and tactile crunch, which entices young consumers. The font is playful and the cheetah mascot is featured prominently both in this packaging and TV commercials, creating a strong association. All of these design choices combine to create a sense of fun and adventure, and they condition these positive emotions wherever the signature colors, images, or orange dust appear.
References:
[1] Lidwell, William, Kritina Holden, and Jill Butler. Universal principles of design, revised and updated: 125 ways to enhance usability, influence perception, increase appeal, make better design decisions, and teach through design. Rockport Pub, 2010. 42-43.
[2] Pavlov, P. Ivan. Conditioned reflexes: an investigation of the physiological activity of the cerebral cortex. 1927. Translated and edited by G. V. Anrep. Dover Publications, 1984.
[3] “Enjoy more of what you love. All day long. At Olive Garden.” YouTube, 8 Jan. 2018, www.youtube.com/watch?v=OkC9U7oEFYg. Accessed 12 Oct. 2018.
Mimicry is the imitation of familiar things in order to take advantage of that familiarity and recognizability. There are three types of mimicry. Surface mimicry is the imitation of visual appearance, including colors, patterns, and/or shapes. Behavioral mimicry is the imitation of an action, usually of a living thing. Functional mimicry is the imitation of a physical process [1]. Mimicry can be used to help people understand and use objects quickly through recognition of these common traits, to elicit a desired emotional reaction, or both. All three types often–but not always–fall under the umbrella of biomimicry, which is the imitation of living things, objects, or phenomena from the natural world [2].
Examples from Our Text
1. Mimic octopus
The mimic octopus imitates both the appearance and behavior of things within its environment. It stays safe by blending into the background or disguising itself as a more dangerous animal. (Surface & behavioral mimicry.) [3]
2. Mac icons, 1984 Since the beginning of graphical user interfaces (GUI), icons have mimicked well-known objects to take advantage of their symbolic meaning. When users immediately recognize icons as familiar objects, they can intuit the meaning of the icon and what function it serves. This icon set has many examples of mimicry, the trash icon being the most notable one. (Surface mimicry.) [4]
Examples Online
3. Instagram weather filters Social media apps like Instagram and Snapchat use photo and video filters to enhance the user experience of capturing and sharing photos. Instagram’s weather filter changes the lighting and adds a sun or cloud to mimic the real-world effect of weather changes. The filter works like an actual ray of sunshine or overcast day, changing the image or video in real-time as if the user were actually in that environment. (Surface & functional mimicry.) [5]
4. “Old Phone” iPhone ringtone
The iPhone’s “old phone” ringtone mimics the sound made by an old fashioned telephone. Though it does not look or function like a mid-20th century phone, the iPhone uses the same ringtone to improve usability. (Behavioral mimicry.) [6]
5. Siri
Siri uses mimicry in a few ways to improve likeability and usability for iPhone users. First, Siri’s voice mimics a human voice, which elicits emotional and empathetic reactions. Second, Siri’s function mimics that of a real-life personal assistant, and this aids discoverability because we have preconceived notions about what a personal assistant should do for us. (Behavioral & functional mimicry.) [7]
Examples Around Us
6. Hummingbird feeder My hummingbird feeders mimic the appearance and function of flowers. Hummingbirds are attracted to both the bright red color and the flower shapes, which mimic real flowers. From the hummingbird’s perspective, the feeder also functions very similarly to a flower. The flower-shaped openings are just the right size for each hummingbird to stick its tiny beak in and drink. (Surface & functional mimicry.)7. Portenzo iPad case I bought this iPad case in 2011 in a fit of nostalgia. Its size, shape, and appearance are very similar to an actual composition notebook, which is a pretty good deterrent for would-be thieves and a lot of fun for composition book lovers. It turned out to be a great talking point, too, since all of my friends wanted to know where they could get cases to disguise their technology as inconspicuous objects. (Surface mimicry.)8. Feathered cat toy This cat toy–essentially a bundle of feathers on a string–has been my cat’s favorite style since he was a kitten. (Anyone who has cats will know that it’s rare for one toy to survive the test of time and boredom.) The key to its long-lasting success, I think, is in its aerodynamics. Although it looks nothing like a real bird, it flutters just like one when waved through the air, triggering a deeply ingrained predator instinct in my cat. (Behavioral mimicry.)
References:
[1] Lidwell, William, Kritina Holden, and Jill Butler. Universal principles of design, revised and updated: 125 ways to enhance usability, influence perception, increase appeal, make better design decisions, and teach through design. Rockport Pub, 2010. 156-157.
[2] Benyus, Janine M. Biomimicry: Innovation inspired by nature. William Morrow, 1997.
“Your game practically changed my life… It was the most fun I had with him since he had been diagnosed… My father passed in the spring of 2012, only a few months after his diagnosis.
Weeks after his death, I could finally return myself to playing video games. I tried to play Journey, and I could barely get past the title screen without breaking down in tears. In my dad’s and in my own experience with Journey, it was about him, and his journey to the ultimate end, and I believe we encountered your game at the most perfect time.
I want to thank you for the for the game that changed my life, the game whose beauty brings tears to my eyes. Journey is quite possibly the best game I have ever played. I continue to play it, always remembering what joy it brought, and the joy it continues to bring.
I am Sophia, I am 15, and your game changed my life for the better.”
Created by thatgamecompany, an indie studio with a handful of employees at the time, Journey is an indie game featuring no dialogue, direction, or goals. It’s easily completable in six hours, yet takes you on a vast trek starting from life to death. The game is simple; explore and unlock the next stage through runed temples.
Yet where the game excels is in emotional design, the three pillars of which are flow, movement, and choice. Katherine Isbister of How Games Move Us detailed that video games are a special medium that requires interaction and elicit strong emotional responses – sometimes negative, sometimes positive. Everything about Journey was designed with emotion in mind – from the color palettes, the smooth physics of movement, even the Grammy-award winning music from Austin Wintory, lent itself to creating an interaction that pushes users to have a “religious experience” by the end.
Jenova wanted to push the boundaries of emotional design in games and started by breaking down what social interaction meant to him, and isolating the interaction one by one – for example, why did social games like World of Warcraft make him feel even more lonely and isolated? He noticed a few key gaming interactions on how players build a connection, two of which are:
The gradual player empowerment, which lends itself to an easy toxic environment and “flaming”, the act of posting insults with profanity as skill and strength begins to divides its players
“Are you a boy or girl? How old are you? The answer is always a sad ending.”
One of Jenova’s design goals then was to eliminate age, gender, skill/strength, and other factors that create chasms between players and their interactions (universal design principle of accessibility here) in order to make make gaming a more healthy medium.
The players in Journey don’t interact until about the midway point where a second player (usually farther along or reached “enlightenment”) is suddenly introduced, and lends itself to the second player “guiding” the first unconditionally and uncommitally. At the very end, the players you played with, where you played together in the game, and where they are from in the world are displayed, and you are able to finally connect to these players.
Jenova’s vision was a game that could affect its players to be better people. Even though it’s been almost six years since I’ve played Journey, I still find myself thinking about the game on a near daily basis. Through careful design, Journey is an example of a product that empowers and enriches its users to be compassionate and empathetic to each other while reminding us what it means to be human.
Jenova Chen’s GDC talk is long, but worth it.
Journey artist Matt Nava is less of a speaker, but still interesting to see the visual design process and tech and product requirements changed the game here, and finally the incredible soundtrack here.
The Toyota Pickup has been for sale in the US since it was first introduced in 1969 as the Toyota Hilux. Even though Toyota had been making 4-wheel drive vehicles since 1941 at the request of the Japanese government, they did not release the “Pickup”, its first 4-wheel drive pickup into the US market until 1979.
Over the years Toyota has evolved the pickup through many different generations and models, with the current model being the third generation Tacoma. Toyota trucks have long been a status symbol of quality and even over time, are very much based in it’s roots of simplicity and functionality over frills and ornamentation. The Toyota Pickup is a symbol of quality for its owner and Toyota understood the value that quality brings to its brand.
I have been a car guy since I could make engine noises and pretend I was shifting from my baby seat in the back of my Mom’s 1969 Volkswagen Beetle. For me, a car is one of the greatest inventions known to man. There are a lot of systems that go into making a car capable of performing its functions and it is supposed to do this while also being safe, user-friendly and many times, a fashion statement. When I think of design, I think of a dashboard and all of its controls, the context of the user (probably driving) and the need to maintain an aesthetic quality driven by brand. All of this, and cars are generational and typically go through major revisions on a regular schedule. Back in the 1970s, Cadillac’s were some of the most ornate cars ever made and yet were completely redesigned almost every year.
For me, the Toyota truck is an icon of capability and ruggedness built on a foundation of reliability. I have used my trucks to travel, work as a carpenter, go camping, off-roading and to take someone special on a first date. When I think of the Toyota pickup, it’s the older trucks that come to mind. I think the of the trucks I have owned in the past and all of the adventures they have allowed me to have that wouldn’t have been possible in a car. It’s incredible how different a truck is in comparison to a car just in terms of capability and how limiting a car can feel.
A design principle I apply to the Toyota Pickup would be Form Follows Function. In fact I see that principle in how Toyota presented itself within the market; as a high-quality, high-capability, low frills vehicle that performs its function while asking little from the user.
The design principle of Form Follows Function as presented within the Universal Principles of Design employs the two interpretations of descriptive and prescriptive. Descriptive is presented as “beauty results from purity of function” and prescriptive described as “aesthetic considerations in design should be secondary to functional considerations”.Interestingly the example in the book for Form Follows Function presents the H1 Humvee Military vehicle along with its commercially available offspring the H2 and H3 by Hummer.
The Toyota Pickup truck maintains aesthetic qualities beyond those that are more functional as they are within the design of the Hummer. However, it is simplicity of its form, with a high-focus on capability and function that makes the Toyota a truck that many users enjoy.
Looking at the object below, you may not see something incredibly beautiful or innovative, but I do. The image above is a saddle I use on my horses. Saddles have been around for hundreds of years and while there has been some advancement in the design as technology has progressed, it has been fairly minimal. The design aspect of this saddle that I find so beautiful and inspiring is the piece in the rear that is circled.
But why is this so innovative? Most saddles up until this one did not have nearly as much cushioning, known as flocking in the saddle world, in this part of the saddle. This meant that when you landed heavily or moved a lot, the horse easily felt it and often caused pain for their back. In addition, it did not really provide any support for the rider’s back as well. What is so great about this design is that the flocking in the rear reaches a bit out past the actual end of the saddle but is not obvious. Horse showing and horseback riding are heavily focused on tradition, so this saddle is able to combine modern technology and innovation with a design that still looks clean and classic. This saddle not only provides comfort to horse and rider, but also still looks low profile and classic enough for the high-level show ring.
A classic French saddle without the rear padding
To me, this saddle is the epitome of good design because you hardly even notice it. Even an experienced rider would have a hard time pointing out exactly what is different from a more traditional saddle, but as soon as you sit in it, both horse and rider feel the difference. The positive impact this design is able to provide has been immensely appreciated by everyone from Olympians to every day riders such as myself.
The Barns & Noble Classics collection was designed by American letterer, type designer, and illustrator Jessica Hische. The books are leather bound and foil stamped, each using one metallic and one non-metallic stamp. These vintage-inspired book covers, primarily focus on lettering while achieving an elegance and cohesion that spans the entire series; it includes titles by classic authors such as Mark Twain, Jane Austen, Oscar Wilde, and other beloved novelists.
The primary focus of the cover designs is the lettering. Lettering on each book is unique to that novel and portrays a style corresponding with the theme of the book. For example, Pride and Prejudice by Jane Austen displays a soft, flowing script lettering that reflects the romantic nature of the novel. In contrast, the Gothic horror novel Dracula by author Bram Stoker uses the lettering style blackletter, sometimes referred to as Gothic script to portray the dark, Gothic plot of the novel. Despite utilizing a variety of lettering styles, Hische achieves a high level of legibility in the text and a sense of consistency between the novels.
Hische uses lettering, color, and iconic representation to inform the reader of the tone and plot of each novel. The joyful, romantic blue of Pride and Prejudice, the rich, blood red of Dracula, and the natural, countryside brown of The Adventures of Huckleberry Finn set the tone of each novel before a reader even opens the book. Each cover is decorated with subtle iconic representations of the plot in a beautiful rotating and reflecting design. The cover of Dracula depicts ivy dripping blood and leaves which morph into bat wings; subtly cluing the reader into the vampiric plot of the novel. The Adventures of Huckleberry Finn is decorated in cattails and ship’s wheels reminiscent of a Mississippi riverboat’s wheel, depicting the setting of the novel in southern antebellum society along the Mississippi River.
The decorative symmetry of each cover along with the alignment of the titles and authors on each bookend aid in the aesthetic consistency of the collection. Hische successfully turns a series of seemingly unrelated classic novels into a cohesive collection. These novels compliment any bookshelf and bring new interest to some of the best known and most beloved classics.
After years of tossing my spare change into zip-loc bags, mugs, and countertops, I finally came across this elegant product. It’s the Coink Piggy Bank, designed by Scott Henderson.
There’s much to like about this design: its sleek white porcelain form, the witty design flourishes—it has a money sign for a tail. But what I like most of all is its funnel. Whereas most piggy banks have a narrow coin slot forcing users to deposit coins one at a time, this bank allows for a handful at once. At the end of the day, I just want to reach into my pocket and toss down one big clump of change. And the funnel design lets me do that.
An emotional component
The Coink Piggy Bank was designed for MINT, a New York City-based design collective founded by Scott Henderson, Anthony Baxter, and Alberto Mantilla. Their product line represents what I love about the Coink piggy bank: a blend of modern minimalism with humanist, emotional touches.
In a September 2008 interview with the Design Glut blog, Henderson spoke about this design aesthetic when describing one of their most famous products, ‘The Hug’ salt and pepper shakers, designed by Alberto Mantilla:
The Hug salt and pepper shakers. Credit: Yanko Design
“The people who are experts in design seem to hold onto this idea of modernism– that things have to be austere and minimal, and that form follows function. The Hug salt and pepper shakers don’t really adhere to that. They’ve got this emotional component. It’s not austere, it’s not about minimalism, because it goes to another level with these black and white forms hugging each other. It’s a statement, and it’s romantic. It has all these emotional connotations that are totally unrelated to modernism. And it appeals to people who aren’t design experts. It appeals universally.”
These designs inspire me to strive for warmth and humanity in design and to always be on the lookout for ways to combine the lessons of disparate design philosophies.
Image Macy’s.com: Good Girl Perfume by Carolina Herrera
There are perfume bottles and then there are iconic perfume bottles that are distinct, classic and instantly become a collector’s item. Such is the case with the Good Girl fragrance bottle by Carolina Herrara. The midnight blue 2.7 oz tall stiletto with the gold accented heal adds so much femininity and strength to a bathroom or vanity counter. Also, the fragrance itself is incredible and provides a delightfully pleasant scent experience. When I first laid eyes on the bottle I was immediately intrigued. The deep rich mysterious blue color, the elegance, and seduction of a tall sleek heal had me captivated. Even before smelling the fragrance, I was already sold. I could envision this beautiful bottle on my own vanity, standing tall and out amongst my other fragrances. There is a presence. It’s bold, it’s edgy and the design helps tells a story. Who is this woman? She’s a Good Girl but also, a Bad Ass! Upon close examination, one can appreciate the smooth curves and overall shape and soft feel of the bottle that gives it an effortless appeal while balancing perfectly. The design so inspired me, I ended up buying two bottles because I wanted a “pair” of heels. I had become so engulfed in the design, I applied a real-life attribute to the bottle and began to see myself embodied in the fragrance and the design; powerful and bold, exciting and pleasant all at the same time.
“It represents the duality of a woman…We can be both good and naughty, ” – (Catherine Herrara Beaz, Creative Director; Carolina Herrara. Womens Wear Daily).
Image Macy’s.com: Special Edition Red Velvet Good Girl Perfume by Carolina Herrera
“The people who design our world have a lot to learn from the natural world — all they have to do is take a look.”
This was Kurt Kohlstedt’s closing statement on his 99PI article exploring Biomimicry. As someone who is generally resistant against non-linear design without good reason, I can definitely get onboard with this design principle. If you think about it, life takes form in ways that have been developed over billions of years on Earth. There are evolutionary reasons for everything and why living things look the way they do. It works!
Biomimicry is what many engineers use to design our material world in order to mimic the talents of the natural world. For example, the famous Japanese bullet train, Shinkansen, was re-engineered to optimize speed, silence, stability, and efficiency based on the anatomy of birds. This was done by a team of brilliant engineers. Recently, Autodesk has also created a top-down CAD program called Dreamcatcher that will automatically generate the optimal organic structure based on your priorities and constraints while minimizing material, mass, and volume. This is another way of approaching organic designs for functionality. Meanwhile in other cases, there is a novelty factor in reverse engineering organic forms to create mechanical replicas.
A few years ago at a Maker Faire, I came across a company called Les Machines de L’ile, who specializes in creating massive mechanical animals that can be maneuvered by human drivers. I instantly recognized the schematics and sketches as being reminiscent of Leonardo da Vinci’s The Vitruvian Man and other biomorphic studies for planes and such. This led me to attend Burning Man that year to see more of their fire-breathing kinetic sculptures. It is utterly amazing what these guys can do combining their knowledge of animal physiology and mechanical engineering.
Although the feat of recreating natural animal abilities and movement is impressive on its own, the main reason why this type of design in particular inspires me is because it takes my distaste for organic forms and makes it much more pleasurable. There are undoubtedly many functional benefits in mimicking animals. But while designers can easily dissect their physical traits and embed them in unrecognizable ways, this group retained the familiarity of the overall form, it becomes amusing and relatable. Designs like these motivate me to be more flexible and creative, while designs like the bullet train motivate me to research, integrate, and repurpose my findings. Both are personal reminders to take a step back and see the world from a different perspective because inspiration can be found everywhere.
The Rietveld Schröder House in Utrecht, Netherlands is a custom made residence designed and built by furniture designer Gerrit Rietveld. Rietveld was influenced by the Dutch style of art and design called De Stijl popular during the time in 1924, which featured “clean horizontal and vertical lines and the use of all primary colors, alongside white, grey and black.”
Rietveld designed the house for one specific family. Truus Schröder and her three children wanted a simple and unique home with a relationship with the surrounding nature. Schröder worked closely with Rietveld during the design process.
I was lucky enough to visit the house, now a museum, back in 2012. One feature that stood out to me most is that the house is highly customizable. Many of the walls in the house can be moved like sliding doors to create a room/space or have an open layout. This video illustrates this feature best.
Another design feature that I vividly recall is the corner window. “Both the large window and the small one perpendicular to it swing open, dissolving the corner to make it feel like one is outdoors.” With no obstructing structural element, the window gives an excellent view of the surrounding nature. This second video illustrates this best.
Schröder lived in the home until 1985, and it was turned into a museum after. No other family lived in the house, therefore the design elements were intentional and specific for Schröder and her family’s needs. Learn more about the Rietveld Schröder House.
“Nudge” is the technique of using gentle reminders or instruction to lead a user to a desired action. Common nudging techniques include defaults, feedback, incentives, structured choices, and visible goals. Desired actions are reinforced by providing positive feedback and reducing friction. A nudge would ideally be used to benefit all the stakeholders involved but can be strategically used to advance business goals.
Example 1 – Original Source
Urinals with an image of a fly etched into it help people aim.
Source: Universal Principles of Design by William Lidwell, Kritina Holden, Jill Butler (2010).
Example 2 – Online
Most registration forms on websites will have the option to subscribe to newsletters checkmarked by default to encourage subscriptions.
Source: www.modcloth.com
Example 3 – In Person Stamp cards incentivize people to keep returning to businesses in hopes of reaching a point of receiving a freebie.
“Stickiness” is a principle that refers to the virality of certain ideas. The six variables that can cultivate stickiness are simplicity, surprise, concreteness, credibility, emotion, and story. When the idea has one or more of these variables initially, it can gain traction within society and build upon itself. This snowball effect can further increase an idea’s stickiness and persistence causing it to become a cultural phenomenon.
Example 1 – Original Source This poster in support of Obama became a symbol for his campaign and the change he would bring if elected.
Source: Universal Principles of Design by William Lidwell, Kritina Holden, Jill Butler (2010).
Example 2 – Online Memes are perfect examples of stickiness. Even when someone does not know the origin of the image, if it enters the cultural consciousness, almost everyone will recognize it.
Source: https://www.thoughtco.com/science-of-memes-4147457
Example 3 – In Person
This is a link to the Friends intro song. Similarly commercial jingles and slogans are examples of sticky ideas.
“Figure-ground relationship” is a Gestalt principle that addresses the separation between the visual focus and the rest of the visual field. The relationship between figure and ground can be manipulated to either contrast the figure from the ground, or leave the focus up to the viewer’s interpretation. It is used in modern-day design to emphasize affordances or a call to action.
Example 1 – Original Source
The Rubin Vase shows an ambiguous subject using the design principle of figure-ground relationship. Either a vase, or 2 faces can easily be the subject with the other being the background.
Source: Universal Principles of Design by William Lidwell, Kritina Holden, Jill Butler (2010).
Example 2 – Online
Helvetica, as explained in the documentary, is an example of using the figure-ground relationship principle to become such an iconic and commonly used font.
Source: https://creativepro.com/typetalk-good-looking-helvetica-size/
Example 3 – In Person
This is a fake speed bump that is painted on a flat road to trick people into slowing down.
“Recognition over recall” is a principle that induces a sense of familiarity in design to reduce the cognitive load required to accomplish a goal. Recognition memory relies on cues whereas recall memory requires more cognitive effort. Since recall memory is not always accurate, designing to take advantage of recognition and familiarity of certain objects can cue a person to take an action.
Example 1 – Original Source This difference in the command line interface vs graphical user interface shows the ease of use between recognition amongst presented options and recalling naturally.
Source: Universal Principles of Design by William Lidwell, Kritina Holden, Jill Butler (2010).
Example 2 – Online
This is how Google’s autocomplete function provides recognition cues to help people after the first recall word.
Source: www.Google.com
Example 3 – In Person
This is a voting ballot with the names of the candidates written for the ease of recognition as opposed to recalling the names naturally.
“Proximity” is a Gestalt principle that explains how distance affects a person’s instinct to group objects together. Less distance between objects suggest a relationship between them, compared to objects that are further apart. People’s ability organize groups using proximity is inherently ingrained and is not part of a conscious thought process.
Example 1 – Original Source
The spacing between the words on the Big Bend National Park sign imply that they are separate words/phrases.
Example 2 – Online
The spacing between words are how we recognize words as words and not one single long sequence of letters.
Example 3 – In Person
Remote controls often group buttons using proximity. For example, +/- Volume is usually grouped together but away from +/- Channel buttons.
References: -Universal Principles of Design by William Lidwell, Kritina Holden, Jill Butler (2010)
-https://medium.com/logomachine/the-proximity-principle-the-main-rule-of-design-which-makes-it-loud-and-simple-9a8e59f13f7b
The “cathedral effect” is a spatial principle pertaining to the influence of ceiling height on people. Close proximity to the physical features that define the space can affect people’s focus and behavior by generating feelings of confinement or freedom. Smaller spaces can cause people to feel a sense of urgency to complete the task at hand, while larger spaces encourage more creative and theoretical thinking.
Example 1 – Original Source This image shows the effect of the ceiling height on a person’s creativity versus focus. Source: Universal Principles of Design by William Lidwell, Kritina Holden, Jill Butler (2010).
Example 2 – Online
This is an section of a space that changes in ceiling heights to reflect the programs and need for creativity/focus.
Source: https://quininedesign.com/perspectives/design-principles-cathedral-effect
Example 3 – In Person
This is an example of an escape room, which are designed to be small and confined. It stimulates focus, interaction with surroundings, and sense of urgency to get out.
Source: https://nmescaperoom.com/scenarios/
Located in the city center of Rotterdam in the Netherlands, the Markthal building is the country’s first covered marketplace. It was designed by dutch architectural firm MVRDV in response to the city’s competition in 2004 for a market hall that would double as a residential space. Completed in October of 2014, it’s arch stands at 40 meters tall and comprises of 228 apartments ranging from two to five bedrooms. Below, the open space consists of 96 stalls for food and produce, 20 units for retail shops, and an underground parking garage. The designers utilized the space above the stalls by adding space to eat, lounge, and grow plants. Printed on perforated panels of the curved internal arch is a large mural of produce and flowers by artists Arno Coenen and Iris Roskam. This is one of the largest murals to date, as it covers 11,000 square meters of surface. This multi-functional space combines all of these different elements to be considered a frequented urban architectural landmark in Rotterdam.
Why I love it
If you know nothing about the history of Rotterdam, it is quite fascinating. Most of the city was bombed during World War II, and since has rebuilt itself with loads of culture and modern architecture galore. I first saw and got to experience this massive building after exiting the Blaak train station walking towards my hostel for the weekend. This building affords to walk through it, as any other massive piece of architecture might. The glass facade affords translucency so that people know they can explore inside but the grid of stainless steel cables and glass panels are an anti-affordance to the outside elements. Not to mention, the building is sustainable and practices methods to reduce environmental impact. Locals think it is an eye sore, but its uniqueness caught me off-guard. From a design standpoint, the space is highly functional and caters to the urban citizen.
The first time I went to Japan a couple of years ago, my local friend took me to one of his favorite ramen shops. It fascinated me to see a wide variety of ramen restaurants that have adopted the use of vending machines are the primary ordering system. This approach is a revolutionary because it changes the way we order our food. We Americans can realize many benefits in if we embrace this new paradigm.
How does it work?
You choose the ramen with any side dish you want based on the picture on the screen, then put in the money, and take the ticket or any change. Then one person will pick up your ticket, and sit you down. After finishing your food, you are welcome to leave. There is no reason to wave at the waiter in order for them to bring the check afterward.
Any wide idea could be successful if it truly meets the need of the users.
It is not a surprise Japan is the root of many innovative products. The concept of vending systems is one. According to www. jnto.go.jp, Japan has over 5 million vending machines.
When taking a closer look at their designs, you may notice they are outdated. However, they are still widely used, due to the fact that it serves the purpose of improving things by making them more efficient. The combination of the ease of use and convenience has led to the wide adoption of those vending machine designs. These small simple machines are high accessibility as you can buy the food by looking at the photo and order without knowing the local language.
The machine inspires me to think of what needs to be considered when designing a product. There are so many wonderful pre-existing design ideas already been out there. Regardless, some of them can be redesign in the way which benefits our lives.
“Keep your favorite coffee at the perfect temperature until you’ve had the last drop”
This smart and high-tech mug is ideal for a coffee or tea lover. You can simply control the temperature of your drink at the perfect temperature for as long as you like. It has LED display lights and touchscreen buttons to control temperature. It can be charged on the charging base and the battery holds a charge for about 5 hours. It also includes a coaster that fits into most standard cup holders and is powered with a USB adapter; so, you can easily charge the mug in the car as well. It is convenient, efficient and easy to use anytime, everywhere!
The innovative technique, practicality, and simplicity of this product give me a lot of design inspirations. Most people do not know exactly what techniques and methods are used to build this smart heating travel mug. However, the concept of this product is a common idea that people can often imagine in their daily lives. It is amazing that the designs of things I’ve imagined were created and are used in reality.
“Beauty and brains, pleasure and usability – they should go hand in hand.” (Donald A. Norman)
This mug delivers not only high-quality tech solutions with great functionality, but also is visually eye-catching and achieves simplicity. Black is a color that both males and females generally like and makes the mug look more attractive and intelligent.
It’s extremely easy to be mesmerized by the stunning visuals and elaborate choreography of Bot & Dolly’s aptly-named “Box.” The moniker evokes a simplistic object, one in which things may be placed and from which things may be taken. But these actions are highly constrained by the properties of each object in the process – “Box” artfully considers this notion and then obliterates it in a matter of minutes through their mastery of projection mapping.
At its core, this performance transforms our very ideas of a box from something constrained and humble to something infinite and all-encompassing. The ‘box’ in this instance hides boundless patterns and geometry, and is ever-changing in both makeup and content. The universes held inside are shifted, split, and reorganized, all while being affected by the placement and interaction of their pieces. Our very understanding of the box is toyed with as the camera playfully glides from one side to the next, changing both our perception and the outcome of each canvas.
Yet, as viewers, we’re still tethered throughout the performance by a single, simply dressed participant – a deft partner in this elaborate dance. As this person pushes and pulls the canvases, we’re brought back to the constraints of reality, of something human and finite. But this is shattered once again as we are urged to question whether they are operating on the piece, or if it is operating on them.
– 2 –
Levitation
In every sense of the word, Bot & Dolly have elevated design and entertainment in creating this piece. Completed in 2013, “Box” was a clarion call towards greater interactivity between technology, art, and design in ways unseen prior. Not only a collaboration between video, sound, and performance, this piece married robotics and entertainment into a new standard; since purchasing Bot & Dolly, Google has leveraged the robotics for use in contemporary film, including 2013’s “Gravity.” Just as practical effects became (almost) overshadowed in use by computer-generated imagery (CGI), Google’s ‘Iris’ technology might hearken a return to more physical means of capture that is complimented by digital means, similar to what we see in “Box.” Echoing the canvases throughout the piece, this technology has completely transformed the industry in which lives.
– 3 –
Intersection
The intersection of humanity and technology is extremely tense at times, especially regarding robotics. Often-heard threats of outsourcing and layoffs seem to follow this field closely, and can be paralyzing to the industry as a whole. More recent examples like Amazon’s automated warehouses spark debate over the validity of human staffing in the future, but this is a key opportunity for new industries and opportunities to open. Circling back to “Box,” this work did not create itself. Human minds had to conceptualize, construct, test, choreograph, and output every aspect of the piece. This technology might be more efficient and less error-prone, but it cannot exist within a vacuum. This notion is perfectly visualized throughout “Box,” as robot and human merge into a compelling visual odyssey.
– 4 –
Teleportation
As the introduction to “Box” playfully notes,
“Any sufficiently advanced technology is indistinguishable from magic.”
–Arthur C. Clarke
Go see for yourself or click any image above to be transported by the magic Bot & Dolly have created in their masterpiece, “Box.”
Jesse’s note: I’m making this post “sticky” so that it’s top of mind as you make your Project 1: Principles posts. Thank you, Serena, for putting this material together.
—
Hey all! Since we’ll be using this WordPress site for many of our assignments this quarter, I thought it might be helpful to talk briefly about accessibility within WordPress.
Here are some basic best practices you can follow if you want to ensure that your posts are accessible:
Alt text
People who are blind or have visual impairments often use screen readers to access content, so it’s important to provide alt text describing each image you post. Here’s how…
When adding a new image: After uploading, you’ll see some options on the right side, below the image title. Be sure the alt text field is filled out with a brief but accurate description of the image’s content.
Add to an existing image: You can click on the image itself, then the edit button, OR go to Media in the left menu to access older images. Fill in the alt text field.
Headings
Headings are used to tell screen reading software how to navigate a website. Make sure you are only using headings in a post to indicate hierarchy. Never use headings for visual effects, because screen reading software will assume it’s the next organizational section of the webpage.
If you need to make text bold or enlarge it, add pull quotes, etc, you can do it by clicking on the “text” tab and manually writing inline CSS.
The blockquote function (quotation mark icon in your rich text editor) is a great alternative.
You can also take advantage of post formats. In the currently used theme (Twenty Seventeen), there are eight different post formats that provide different styling options. You can view them here by clicking on “Open Live Demo” and then “News”.
Carousels
Avoid carousels (also called sliders or slideshows) to display images. Most are awful for accessibility and fail to increase engagement with content. Consider an image gallery or use images within/between text paragraphs instead. Learn more at shouldiuseacarousel.com.
Disclaimer: I don’t normally provide examples, but I’ve been sharing this one for a while because it illustrates how you might work some of your new vocabulary into prose. And because it amuses me: admittedly it’s been a while since I’ve used this phone. I hope you find it illustrative and amusing too.
An object I love is my STAEDTLER Mars technico 780 C lead holder. I have 4 of them. One I’ve had since 1996, and the rest I’ve acquired later. In each, I keep a different weight of lead: 6H, 4H, 2H and HB.
Affordances are subtle yet clear. The knurled end gives a tactile indication of where to best hold the lead holder; the clip keeps it secure in my pocket protector (ha, ha). As we expect, the end serves as a push-button to advance the lead. More unusually, it also serves as a sharpener, a possibility subtly suggested by its size (the same as the lead) and clarified by a diagram on the Staedtler website.
When the end is depressed, the lead advances. One problematic aspect of the design is that unlike most lead holders, the lead doesn’t advance incrementally. Instead, the push-button opens the jaws at the end that grip the lead, potentially allowing the lead to fall out of the pencil – an expensive error at 2 bucks a lead. Once learned, it becomes natural to guard against this with your other hand when advancing a lead, and the infinite adjustability permits the lead to be sharpened to either a sharp or a rounded tip, but perhaps a physical constraint could be introduced that prevents the lead from falling out completely.
There’s no way to automatically differentiate between the different weights of lead, as the only available colour is blue. I’ve added a label made of masking tape to each, which provides some visible feedback, but it’s a crude solution at best.
[Disclaimer: I’ll concede that I don’t actually use a lead-holder much anymore. So perhaps there’s some wistful nostalgia in my praise.]
An object I hate is my (now historic) Sony Ericsson W810i mobile phone. It seemed clever, at first: I’m impressed with the fact that the camera elements are mapped from a conventional camera. To operate the camera, you turn the phone sideways, which places the shutter button exactly where you expect it to be. By taking advantage of my existing camera interaction model, Sony has made it easier to take pictures. . . if only I could figure out how to turn the camera on.
There are also no physical constraints to keep me from pressing the buttons when the phone is in my pocket, and these affordances are way too small in the first place: I’m forever turning the walkman on when I want to answer a call, as the buttons for these functions are right beside each other.
Moreover, the audible feedback is excruciating: why can’t mobile phones come with a normal ring tone? Why does my phone have to sound like a cat? I know, I know, I can download new ring tones – perhaps one of you can show me how?
Simply put, Attractiveness Bias is the tendency to find people who are physically attractive to be more intelligent, trustworthy, and competent than unattractive people. In the real world, for those who are considered attractive, attractiveness bias can lead to preference in hiring, more leniency during sentencing, and more being paid more for the same work. It is thought that the roots of attractiveness bias lie in biology and evolution, where a healthy and fertile person is seen as attractive because they will be able to provide stronger offspring to continue the species. There are certain aspects that make a person “attractive”, including symmetrical facial features and a desirable waist-to-hip ratio, which is .70 for women and .90 for men.
One example given in Universal Principles of Design is the presidential debate between Richard Nixon and John Kennedy, pictured below. Nixon appeared ill, pale, and tired during the debate while Kennedy was tan, well-rested, and believed to be better prepared. Those who watched the debate thought Kennedy had won whereas those who only heard the debate believed Nixon to have won.
The 1960 Presidential Debate – Kennedy vs Nixon (link )
Another example, the image below shows a man’s face that is symmetrical (a) and has been manipulated to be more asymmetrical (b). Image B is found to be less attractive because of the lack of symmetry that humans normally attribute to being attractive or beautiful.
Attractiveness Bias as it pertains to facial symmetry (link)
Finally, an example from the “real world”. Below is a package of Mr Clean Magic Erasers. Note the symmetry displayed for Mr Clean’s face and the muscles clearly visible that display strength and good health. While perhaps not what you would immediately think of as “beautiful”, Mr Clean certainly applies the principles of Attractiveness Bias in order to entice customers.
Symmetrical face, big muscles, and he cleans? Sign me up!
References
Lidwell, William, Kritina Holden, and Jill Butler. 2010. Universal Principles of Design. Rockport.
Talamas, Sean N, Kenneth I Mayor, and David I Perrett. 2016. “Blinded by Beauty: Attractiveness Bias and Accurate Perceptions of Academic Performance.” PLOS.
The Law of Pragnanz refers to how humans tend to recognize complex shapes in as simple of terms as possible. That is, the human mind recognizes pieces as a whole in order to better understand them. The mind is able to connect unseen parts with the rest of the object in order to create a “whole” view, which is how we are able to perceive the wholeness of an object while it is partially blocked by another object. The Law of Pragnanz also explains what happens when we look at several shapes overlapping one another, our brain looks and sees those whole and complete simple shapes instead of seeing a bunch of different lines that intersect, as shown below.
The above is seen as simple overlapping shapes instead of different lines (link)
Similarly, the image below of the Olympic rings shows 5 overlapping circles – or at least that is what the brain perceives it as instead of multiple curved lines intersecting.
Finally, pictured is a backpack from my home with an equestrian company’s logo on it. When looked at, the lines in the middle are seen as overlapping horse shoes instead of curved lines that intersect because that is simpler and easier for the brain to understand.
The Ariat logo shows three overlapping horse shoes – or at least that is how the brain perceives it
References
Kerti, Erkan. 2018. The Designer’s Guide to the Law of Prägnanz. April 10. Accessed October 15, 2018. https://blog.prototypr.io/law-of-pr%C3%A4gnanz-bdb2fcf349b8.
n.d. Pragnanz. Accessed October 15, 2018. http://changingminds.org/explanations/perception/gestalt/pragnanz.htm.
In my opinion, these three familiar-sounding nouns aren’t anything truly remarkable on their own. However, when combined, they become something incredible. One of these magical things is located in a gorgeous shopping center called Shibuya Hikarie (built in 2012) of Tokyo, Japan.
Imagine you’ve just had some delicious Korean barbecue in Shibuya, Tokyo and you don’t realize how much you smell until you step out of the restaurant. You’re about to meet someone for drinks but the barbecue smell is way too strong. What to do?
Fear not.
Because bathroom air showers.
Now I’ve never stepped inside the men’s room so I can’t say if the men’s restroom has one but on the 3rd floor of Hikarie, there is one inside the “gallery-themed”women’s bathroom.
You step in and you can choose to smell like nothing (an actual option), fresh soap, or something floral. The air shower also removes dust particles and pet hair if you are concerned about them appearing on dark clothing.
Air showers may normally be known as cleanroom air showers or laboratory air showers for the purpose of reducing particle contamination. It truly amazes me that these things are readily available in a public bathroom. Since everything is within walking distance and one can basically do and find anything in Shibuya, I wouldn’t be surprised if people just went to mall just for the bathrooms.
It’s just that great.
Here are just all the bathrooms in Hikarie. Clean bathrooms are not a “nice-to-have” in Japan but a standard. Even toilets in personal homes almost all have a bidet. I’ve visited this country once every year and it’s hard not to notice how important hygienic care is to the culture. This phenomenon translates to food preparation, scented products, indoor shoes, and even bathrooms where there is casually an air shower room.
This link will bring you to one of my favorite websites: Origami Me. The website posts a rich content of what you need to know about Origami.
Origami is the art of paper folding. The creation of Origami dates one thousand years ago, and yet is still well recognized in the society of modern arts. The fascinating part of Origami is that its output of all folds is extremely symmetric which has taught the folders the importance of learning the geometric principles and shapes.
Origami. me created a neat online community for their fans to exchange ideas and showcase their crafts. This site is artistically designed, yet still keeps the fundamental features of being an open channel to provide people with the wide variety of resources. Their goal is to provide the support for their members and at the same time to help to promote the artists by showing their great creations.You will also find many video tutorials on the website to learn the paper folding and become a master folder.
If you go to look at their collections under the Blog, some masterpieces are so amazing and could take your breath away. Because of the complexity of the folding techniques, most items require a designer and a master folder.
“Origami is a branch of art that only uses geometry, which is the same base for mechanical structures.” – Soroush Kamrava
Soroush has spoken the truth: Origami is the perfect coalition of art and engineering.
The von Restorff Effect is basically the increased recognition and recollection of things that are different. This can be both something you see, or something you do. It is why we remember those old spice commercials, or why red cars get pulled over more often. Because they stand out, they are remembered.
Example #1: Chick-Fil-A Billboard
von Restorff Effect Billboard
This billboard accurately depicts the von Restorff effect, because its striking, has actual 3D models of cows, and is amusing which helps it draw attention in visually noisy environments.
The circle stands out and is easy to remember because it is the only one in a field of squares.
Example #3: This bottle
Look a bottle.
Even obscured, the difference stands out and draws attention. When thinking back to the picture of all of the bottles on my counter top, will you remember “he had this blue one” or will you just remember a lot of empty tea bottles?
Sources:
Chick-Fil-A example:
Lidwell, William, et al. Universal Principles of Design. Rockport, 2010.
The Veblen Effect is an interesting inversion of supply and demand, where instead of demand driving the price, the price drives the demand. Intentionally making something more expensive and therefore more exclusive drives the demand of the product. There is even an entire category to these products, called “Veblen Goods”
Example #1: Tesla Roadster
2008 Tesla Roadster
The Tesla Roadster was the first highway legal all electric car to use lithium-ion battery cells, and its high price and limited availability drove its demand. Once the concept of the Tesla all electric vehicle took off, they expanded their product line to include lower priced models.
Example #2: Johnnie Walker Blue Label
Johnny Walker Blue Label
Johnnie Walker Blue Label. At over $150 a bottle, this whisky is supposed to be “an unrivaled masterpiece – an exquisite combination of Scotland’s rarest and most exceptional whiskies. Only one in every ten thousand casks has the elusive quality, character and flavor to deliver the remarkable signature taste.” Honestly to me, it tastes the same as the Black Label for 10 times the price.
Example #3: Oakley Sunglasses
Oakley Vs. piRanha
Compare the two sunglasses here, one is clearly superior, no? Oakley has built a brand as a luxury sunglasses and other sporting goods brand, and is generally associated with a certain status.
The principle of visibility relates to a system’s improved usability when its function, status, and feedback is clearly indicated for the user (Lidwell 250). This provides queues to the user (whose memory is limited) to help them complete tasks. Visibility to only essential information is important as providing every condition, control, etc. of a complex system can be overwhelming to the user.
Example 1: Three Mile Island Nuclear System
There was little visibility to critical parts of the system that regulated water flow at Three Mile Island Nuclear Generating Station (Lidwell 251). As a result, operators were unaware of the status of problematic areas which led to the most significant nuclear accident in United States history.
Example 2: Instagram vs. Snapchat
The design differences between Instagram and Snapchat highlight the importance of visibility as a strategic factor for mobile applications. Instagram’s user interface provides visibility to most features on the main screen. It does this through the use of understandable icons, attention-grabbing notification badges, and expanded detail on the most important feature of the app– the feed.
Snapchat on the other hand drops users straight into a camera view to share, but does not make any other features notably visible. The feed for user content and news are hidden on separate screens under ambiguous icons. Additionally, certain features are not discoverable on first sight at all and require gestures to access. Most notably the map feature requires a pinch gesture to view it; however, there is not indication in the UI on how to access this feature.
One may argue that Instagram’s ability to make the most important features visible has made it a superior app over Snapchat in the marketplace.
Example 3: Massage Chair Remote
This remote control provides visibility to all functions and status of a massage chair. Text provides an simple understanding of functions. The icons are clear signifiers of position, massage technique, recline, and adjustment of the massage “spot”. Raised buttons indicate that they can be pressed for said functions and lights next to the icon indicate what is currently selected. A large red “stop” button makes it easy to turn off the system.
Sources:
Lidwell, William, et al. Universal Principles of Design. Rockport, 2010.
The principle of Immersion refers to a mental state where an individual loses sense of the world and experiences “joy and satisfaction” from the environment or activities in which they participate (Lidwell 134). Perception and cognition is at a level in which the individual is neither overtaxed nor undertaxed, so that they don’t lose interest or experience frustration. As a result, the user is more susceptible to enjoying and getting lost in the experience.
Example 1: Titanic Museum Exhibit
The R.M.S. Titanic museum exhibit employs immersion by putting visitors into the story of the Titanic’s maiden voyage (Lidwell 135). From the excitement of its departure to the tragedy of its sinking, visitors guide themselves through a self-guided exploration of the exhibit. They receive identities as either high, middle, or lower class passengers/crewmen and given a boarding pass for one of these individuals at the beginning. Throughout the exhibit reality slips away as visitors envision themselves on certain locations and stories aboard the Titanic. Highlights include true-to-life sets of areas on the ship, real artifacts from the wreckage, and a giant iceberg that visitors can touch.
Example 2: Pokemon Go
Pokemon Go uses augmented reality to simulate a hunt for Pokemon in real world locations. Immersion was employed skillfully and users rushed to locations to find rare Pokemon. However, designers did not take into account negative outcomes due to immersion. There have been reports of traffic accidents due to users being distracted while playing the game. For instance, a study performed by Purdue University’s Krannert School of Management, accidents in Indiana’s Tippecanoe County increased 26.5% at Pokestops (hubs where pokemon can be caught) (Faccio).
Example 3: Old Navy HQ Mock Store
Old Navy HQ uses a mock store to immerse employees in an experience to understand what future seasons’ assortments and store layouts will look like. Merchandising, design, production, store operations, marketing, and strategy teams are involved with preseason planning and must understand if the assortment will make things easy for the customer to find, be visually appealing, and tell a cohesive story. The mock store allows them to put themselves in the shoes of a customer. It simulates a real Old Navy store experience, complete with mannequins wearing clothes, dedicated sections for the family, and signage and decorations.
Sources:
Lidwell, William, et al. Universal Principles of Design. Rockport, 2010.
Faccio, Mara, and John J. McConnell. Death by Pokémon GO: The Economic and Human Cost of Using Apps While Driving. 21 Nov. 2017, ssrn.com/abstract=3073723.
Cultural and other unconscious biases that have been embedded into us over time. In some way, they are a shorthand to many social realities we live with. They also help us in making sense of things around us.
Note: Sometimes this principle can intersect with other principles like stereotypes and concepts like learned conventions.
Example from Universal Principles of Design (my source):
Harley Davidson motorcycles. The motorbike designs and positions its motorcycles as an outlaw, living outside the society. They have even built a community around the outlaw archetype.
Apple used archetypes again in early 2000s in its famous “I’m Mac and I’m a PC.” The brand highlighted its personality by contrasting itself against the dullness of a generic Microsoft PC.
Mac showcased itself as an individualist, easy going and a symbol of openness and self-expression. It was not a rebel anymore but it sure was not the establishment.
This subtle but important change in stance might have had to do with the fact that Apple was not as small as it was back in 1984 and thus it had to evolve its image accordingly.
Example of archetype from everyday life:
Land Rover Discovery – the explorer archetype
Land Rover Discovery and Range Rovers is an example of an explorer archetype in action. The car is designed to explore, and it connects with the explorer in all of us. Its high ground clearance, four-wheel drive, powerful engine, head lamp vipers are just some of the many features that are designed to help it wade through water, drive through deep snow and climb a sand dune in the middle of a desert. All this so that it can enable you to explore freely. (Jeep’s Wrangler does this too, for much less).
Designing in a way that the product/artefact can be used by all without a need for modification.
(This includes product’s usability among people with limited sensory abilities, limited physical abilities, people with limited or no experience of having used the product or people who make mistakes while using the product.)
Example from Universal Principles of Design (my source):
Position of buttons in an elevator for wheelchair access
When applied, propositional density is the notion that objects and environments with multiple meanings can be more interesting and memorable. The more deep meanings relative to the number of elements is what contributes to higher propositional density. We’ll use two examples below to illustrate. The equation used to calculate propositional density is as follows:
Propositional density (PD) = count of deep propositions / count of surface propositions
To calculate PD above requires understanding propositions. In this context proposition is an element that can’t be further broken down. As seen above there are two types. A surface proposition is often tenable and perceptible. A deep proposition is subtle or even hidden. For example in the US a stop sign has red, stop, and an octagon as surface propositions.1 These elements can no longer be broken down into meaningful parts. The stop sign’s only deeper proposition, however, is stop. It’s PD ratio of 1:3 implies a low propositional density which helps it achieve the goal of getting you to stop in your tracks. However, PD can also be applied to evaluate simply a sentence. Consider the following phrase highlighted by blogger Curtis Newbold in a blog post: “If gas pains persist, try Volkswagen.” The sentence as it is used in an old advertisement can be found here. The sentence cannot be broken down further into a logical element. There is merely one surface proposition which is Volkswagen suggesting it might be able to offer you better gas mileage. Digging deeper reveals its high propositional density as it has more than one deep propositions. These include alluding to the brand being a source of relief as well as using medical references to imply it can be a cure to one’s ailing gas problems.2
WV ad depicting the slogan
Example of the principle cited by one of my sources: Volkswagen slogan “If gas pains persist, try Volkswagen” as I have outlined above.3
Nike swoosh logo
Example of the principle not cited by one of my sources: Nike’s logo can be regarded as having high propositional density. On the surface it is two element: black in the color of a swoosh/checkmark. However it’s deep propositions include completing a task and marking it with a checkmark, wings on the shoes of the god Hermes who was swift and fast, victory, and progress which is generally regarded as up and to the right which is also the general direction pointed to by the Nike logo.4
Oakley store in San Francisco
Example of the principle not cited by one of my sources and not located online: To try and find a “real life” example I thought it would be good to walk along the tourist area of Market Street in San Francisco. As my eyes skimmed the numerous shops and restaurants, I found myself fixated on the simplicity of Oakley’s company logo. The distinctly flattened and stretched shape of the “O” makes it easily identifiable from other letter “Os.” Oakley, a well known brand in California, is of course in the business of making eyewear. It occurred to me that this shape was intentional and aligns with the fact human eyes are drawn as ovals that are wider than they are tall. Deep propositions of this logo include alluding to Oakley’s focus on eyes and a reference to the circular shape of one a primary courtyard and building at the Foothill Ranch headquarters in Southern California.5 Within the industry, Oakley is also known for eyewear innovations and generally align new product announcements and innovations together.6 I believe a third deep meaning for the “O” could be in reference to this iterative cycle of new innovations and subsequently bringing them to the consumer via eyewear.
The principle requires us to recognize and to take into consideration that to be human is to be fallible. When applied by designers, the forgiveness principle can be expressed in two complementary ways. The first is that design should have good affordances to help users avoid making errors. The second is to help users minimize unintended consequences or better yet fully recover from errors when they occur.
An illustrative example of this comes from Bruce Tognazzini, editor of the first eight Apple Human Interface Guidelines. When designing new and exploratory interfaces, he argues strongly for incorporating forgiveness and highlights three of his own principles. These include providing users reversible actions, an escape hatch out of the current path, and a sufficient amount of guidance while remaining out of the way.1 His guidelines have been shown to withstand the test of time. The iPhone for examples demonstrates these qualities despite launching nearly three decades after Bruce’s departure from Apple. In the iPhone interface, even the most complex settings are simplified down to a toggle or menu selection that users can dynamically change anytime. One can always return to the home screen with a single button press or in the latest models a single swipe. And knowing it’s easy to “go home” fostered a willingness to explore and learn the new design which included the new smartphone gesture of pinch-to-zoom.
Printer icon in bottom right
Example of the principle cited by one of my sources: Bruce highlights a funny story in retrospect about Xerox Star, a desktop GUI in the early 1980s. At the time dragging a document icon onto the printer would initiate printing out the document. However, once printed this single action also permanently erased the file from the computer. Engineers rationalized this by claiming the document was now in physical form and hence the electronic file no longer served a useful purpose. Designers ultimately advocated different and won the argument and today these two intents, printing and file deletion, have been separated into two distinct actions.2
Sample of Nike iD website
Example of the principle not cited by one of my sources: In a Medium article Anton Nikolov provides us with an example of the forgiveness principle applied to physical goods. He highlights NikeiD, an online shopping experience that lets you customize colors and graphics on shoes for preview before placing a direct order with Nike.3 While there are no returns on customized shoes and thus no ability to recover from an error, the online experience allows previewing to help minimize potential errors in the first place.
Building call box
Example of the principle not cited by one of my sources and not located online. I found that my building’s telephone entry system incorporated the forgiveness principle in multiple ways. Known more commonly as a call box, it allows visitors to call residents who can remotely unlock the main building door. Upon approaching the box, visitors are immediately greeted with instructions to scroll and locate the intended callee. While it doesn’t explicitly mention the up and down arrows, there aren’t many other keypad buttons that suggest a scrolling action. Once scrolling is initiated, building residents are listed in alphabetical order by last name and first initial. This aids in identifying the correct individual. The “CLR” button can be used to immediately terminate a call should the wrong resident be dialed. Lastly, though not apparent residents can use the call box to let themselves in if set to ring their mobile number. The first two items, a welcome instruction message and listing residents by last name, serve as good affordances to help visitors perform a desired action: calling the right resident. The later two, a CLR button and dialing oneself, provide a safety net to help mitigate unintended consequences.
Although I absolutely love living in urban environments, this city gal misses greenery and often yearns for the smell, shade, protection, and relaxing vibes of nature. I’m absolutely mesmerized by Stefano Boeri’s Vertical Forest in Milan, Italy. The two residential towers fully embody the dichotomy of my two opposing needs. The mixture of modern, clean, and industrial lines blended with lush, vibrant, and wild greenery, is truly stunning.
The architectural beauty, inaugurated in 2014, serves as a prototype for Boeri’s sustainable “Vertical Forest” model. While Frank Lloyd Wright designed buildings that were harmoniously integrated into nature, Stefano introduces nature into the concrete jungle. The Vertical Forest creates a unique biodiversity within the urban ecosystem to help lower air and noise pollution, welcome wildlife, and offer shade.
The success of The Vertical Forest has made Boeri a highly sought after architect and urban planner. Since its unveiling, Boeri has been commissioned to create much larger scale projects – including vertical forest cities! I’m extremely excited to see how his Liuzhou Forest City will turn out. It’s expected to feature “40,000 trees and almost one million plants, comprising 100 different species.” (Gibson, Dezeen.com)
When I was little, I always liked to take apart machines and just take a look at what was inside. I always liked to pull off the cases and unscrew all the little screws, but the one thing my parents never let me open up was their computer. Continue reading “Histories: Greg Puett”
Inverted Pyramid (Lidwell et al. 2010, 140-141) refers to a way information can be presented so that critical information can be presented first followed by additional information in “descending order of importance.” The inverted pyramid is composed of the critical, or lead, information and the elaborative, or body, information. News articles may only have the key paragraph showing on the first page with the body (the elaborative information) available if requested. Although important information may be presented first, since presentation of information is be descending order of importance, the lack of excitement build-up can allow the presentation to be “perceived as uninteresting.”
Example of Inverted Pyramid from Universal principles of design:
Online example of Inverted Pyramid:
Important headlines and critical information is shown first and people can click further into the links to read more details. This is a screenshot of the front page of https://www.nytimes.com/ taken on October 4th 2018.
Examples of Inverted Pyramid found in the wild:
The most critical information is presented first in this bathroom located at Hakata Station in Japan. We know here that it is a bathroom for females but we can also see that there are facilities for changing diapers etc.
This is a chart of the pickup dates for certain types of trashes located in Kumamoto, Japan. The most commonly thrown out garbage, landfill, is presented first followed by paper, recyclables, compost, etc. The smaller details post times of pickup.
References:
Lidwell, William, Kritina Holden, and Jill Butler. Universal principles of design, revised and updated: 125 ways to enhance usability, influence perception, increase appeal, make better design decisions, and teach through design. Rockport Pub, 2010.
Five Hat Racks (Lidwell et al. 2010, 100-101) refers to the five methods that can be used to organize information: categorically, through time, through location, alphabetically, and through a continuum.
Categorical organization refers to organization by clustering similarity. For example, cameras and laptops can be categorized under electronic appliances but if all laptops are being organized by category, Macbooks can be categorized under Apple Laptops while Chromebooks can be categorized under Google Laptops.
Organization by time refers to grouping by chronological order. Timelines or television schedules follow this method of organization, which can be used for comparing events or showcasing a sequence of step-by-step procedures.
Location-based categorization is organization by “geographical or spatial reference” and is used for emergency exit maps or travel guides. This method can effectively convey organized information if the exact location or orientation is important for the information to be communicated clearly.
Alphabetical organization refers to objects that follow an alphabetical sequence. Dictionaries and encyclopedias are the most obvious examples.
Organization by continuum refers to how things can be organized by magnitude such as highest to lowest or best to worst.
Example of Five Hat Racks from Universal principles of design:
Online examples of Five Hat Racks:
Since the iPhone XR is smaller than the iPhone XS Max but bigger than the iPhone XS, these devices were not organized by continuum but by category. The “XS” devices are clustered together. The link to this image can be found here: https://www.apple.com/lae/iphone/compare/
This showcases the evolution of Nintendo consoles as well as the items need to save a game and follows the organization through time.
This brochure about Universal Studios’ Harry Potter World organizes the attractions through location. Theme Parks and malls often showcase a map on their directory.
This is a guidebook for a fancy train tour that my grandmother will attend in November. She will have to prepare outfits for “sightseeing,” “business-casual,” and “semi-formal.” The outfit examples are clustered and organized by category of the outfit type.
References:
Lidwell, William, Kritina Holden, and Jill Butler. Universal principles of design, revised and updated: 125 ways to enhance usability, influence perception, increase appeal, make better design decisions, and teach through design. Rockport Pub, 2010.
Self-Similarity is a property in which individual pieces are similar in composition to the sum of the pieces. Think of it as Russian matryoshka dolls where each piece is buried within one another (Agnati et al, 2009). Self-Similarity is a “meta” property and can be seen in nature as the result of recursion. Recursion is the process in which a system takes the input it receives, changes it a little and feeds it back out. Examples of this in nature are coastlines, Romanesco Broccoli and Peacock feathers. Self-similarity in nature suggests an underlying tool that humans can use for structuring, modeling and improving man made pieces (Lidwell, 2010).
Example 1 (UPD Source): Valley of Seahorse, Smaller and Smaller, & Mona Lisa Mosaic
This is the example provided in Universal Principles of Design. They include images of the Valley of Seahorses, artwork by M.C. Escher and a photomosaic by Robert Silvers.The Valley of Seahorses are a region of the Mandelbrot Set that shows self-similarity on every level.The artwork titled Smaller and Smaller by M.C. Escher is comprised of reptilian forms pieced together to create a tunnel. The photomosaic by Robert Silvers uses 800 classic art images to create a larger image of the Mona Lisa.
Example 2 (Internet Source): Internet Traffic
Internet or WWW traffic itself exhibits behaviors consistent with self-similarity (Crovella and Bestavros, 1996). This image represents internet traffic in a fractal model where hubs or websites are represented. The larger hubs represent the popular websites and the smaller ones represent the less tess traveled sites (Nucilli, www.ranker.com). Each large hub is made up of smaller hubs thus graphically, the traffic produced by internet traffic is an example of Self-similarity.
Example 3 (Non-Internet Source): Leaf from fern tree
This is a fern leaf I found in the backyard of my house. It is an example of self-similarity through the recursion process in nature. Each leaf is composed of smaller but similar leafs which in turns makes a larger leaf.
References
Agnati, Luigi F., et al. “Mosaic, Self-Similarity Logic and Biological Attraction Principles.” Communicative & Integrative Biology, vol. 2, no. 6, 2009, pp. 552–563., doi:10.4161/cib.2.6.9644.
Lidwell, William, et al. Universal Principles of Design 125 Ways to Enhance Usability, Influence Perception, Increase Appeal, Make Better Design Decisions, and Teach through Design. Rockport, 2010.
Crovella, Mark E., and Azer Bestavros. “Self-Similarity in World Wide Web Traffic.” Proceedings of the 1996 ACM SIGMETRICS International Conference on Measurement and Modeling of Computer Systems – SIGMETRICS 96, 1996, doi:10.1145/233013.233038.
Mnemonic devices are used to make information more simple or meaningful so that they are more easily remembered. They beneficial because they serve as learning strategies that enhance and help with recall of information (Bellezza, 1981). This can be done through imagery or words to connect something unfamiliar to something that is familiar (Lidwell, 2010). Mnemonic learning uses the following three memory processes: symbolizing, organizing and associating (Bellezza and McDaniel, 2004). Examples of mnemonic devices include Keyword, Rhyme, Feature-Name and First Letter. Keyword is using similar words or phrases to associate with the original. Rhyme is when phrases are linked through rhyming schemes to help with recall. Feature-Name is a word that is related to one of the features linked to the original. First-Letter is when the first letter of the items form a meaningful phrase. (Lidwell, 2010)
Example 1 (UPD Source): Logos
In Universal Principles of Design, examples of Mnemonic Device were shown in form of clever logos that use different mnemonic devices to make them more memorable. This included logos from Hip Dance Studio, Ram Memory, Treehouse Lofts, Community Police and Vine Wines. Each logo used images to keywords or feature-names to help with memory recall.
Example 2 (Internet Source): The Onion
The Onion is a digital media company that publishes satire news based on current events and both international and national news. Their logo is a image of a onion next to their company name The Onion. Using imagery to leverage familiar concepts makes the logo more memorable.
Example 3 (Non-Internet Source): ROY G. BIV
ROY G. BIV is a mnemonic device taught and used by many to remember the color and order of the rainbow. Each letter of ROY G. BIV stands for a color: Red, Orange, Yellow, Green, Blue, Indigo and Violet. It is still used to this day to help children recall the order and colors of the rainbow.R
References
Bellezza, Francis S. “Mnemonic Devices: Classification, Characteristics, and Criteria.” Review of Educational Research, vol. 51, no. 2, 1981, p. 247., doi:10.2307/1170198.
Bellezza, Francis S., and Mark A. McDaniel. “Mnemonic Devices.” Learning and Memory, edited by John H. Byrne, 2nd ed., Macmillan Reference USA, 2004, pp. 393-395. Gale Virtual Reference Library, http://link.galegroup.com/apps/doc/CX3407100140/GVRL?u=univca20&sid=GVRL&xid=83c4068a. Accessed 12 Oct. 2018.
Lidwell, William, et al. Universal Principles of Design 125 Ways to Enhance Usability, Influence Perception, Increase Appeal, Make Better Design Decisions, and Teach through Design. Rockport, 2010.
“Mnemonic Device for the Order and the Colors of the Rainbow.” Mnemonic Devices Memory Tools, www.mnemonic-device.com/weather/roy-g-biv/.
Hick’s Law describes the relationship between response time and the number of choices available. This principle states that the more choices available the longer it will take the user to decide. It best relates to situations where there are a set of available responses to a specific event. An event happens, it takes the user (a) amount of time to decide what the event means and that they need or want to act. They are presented with (n) number of possible options to take in response to the event. This relationship only applies to simple decision making and not complex interactions, such as requiring analysis or extensive reading. In order to ensure that this principle is used correctly, avoid using it for situations where complex decision making processes are required (Lidwell).
Hick’s Law doesn’t speak to how complexity is hidden away. It looks at the relationship between the number of options available and the response time to make a decision. This is assuming that one of the options available is relevant to the current situation(Lidwell).
Hick’s Law can be represented as the following equation:
RT = a + b log2(n) (Lidwell)
Where:
RT = response time
a = time not related to decision making
b = constant (.155 seconds)
n = equally probable alternatives (Lidwell)
Example of the principle cited by original sources
“The time for a person to press the correct button (R,G, or B) depending on the color of the light (red, green, or blue) increases with the number of possible colors” (Lidwell).
RGB Buttons (Lidwell)
Example of the principle not cited by original sources and located online
One application of Hick’s Law is in remote controls. Numerous buttons, many that were never used by users plague these remotes. Response times for these devices would be much slower than newer alternatives. New remotes for Roku devices and Apple TVs have far fewer buttons, thus increasing response time.
TV Remote (Nikolov)
Example of the principle not cited by original sources and not located online
Consider two different household projectors, one with two controls (LG) and one with ten (Optima). The LG projector has a single power button and a control for focus. The Optima projector has eight buttons, and two different adjustment controls. The user decides they want to turn on the projector. The decision-making process does not require any deep analysis or heavy reading, so Hick’s Law is applicable. The black projector has simply more buttons, and thus increases user response time.
Home mini LG Projector (Image by Joe Davis)Optima Home Projector (Image by Joe Davis)
References:
Lidwell, William, et al. Universal Principles of Design. 2010. Accessed 2018.
Affordances describe the relationship between a person and an object. The properties of the object and the abilities of the person or agent acting on the object determine whether the object affords or “is for” a purpose (Norman). This means that the object has a property, the person can perceive this property, and the person has the ability to take an action as a result of perceiving it. Affordances help us understand how to use an object before we begin to interact with it.
It is important to consider the entire equation when examining affordances. If the person, or “agent” as Norman puts it, does not have the ability to act, then the object does not afford that purpose. Stairs afford climbing up and down for those who are agile and can walk. However, stairs do not afford climbing for individuals in wheelchairs or who do not have the strength or ability to climb. In this example, the relationship between the properties of the stairs and the capabilities of the individual determined whether the stairs afford (are for) climbing. Conversely, if the stairs did not actually have the property of steps, they also would not afford climbing (Norman).
Choosing to look at affordances as a relationship may help in a better understanding of the principle. This idea is presented in Don Norman’s Design of Everyday Things. Universal Principles of Design describes the principle as objects being able to afford better or worse than others or to even negatively afford some action (Lidwell). Understanding affordances as a property in this context may add confusion to the overarching idea behind their use and purpose, which is why Norman’s definition was used as a source for this exercise (Norman).
Example of the principle cited by original sources
The door on the left has a handle that appears to afford pulling, even though a sign indicates otherwise. This affordance breaks the design because it falsely suggests how to use the door. The handle affords grasping and pulling; however, the door does not have the physical property of swinging out that direction. The flat plate on the second door, to the right, is an affordance that affords pushing. A property of the door to be pushed open matches, thus this door would allow us to understand how to use it with ease.
Handles and plates as affordances (Lidwell)
Example of the principle not cited by original sources and located online
An affordance of these scissors are the holes in the handle. These holes afford inserting something into them such as your fingers. This affordance helps us understand how to use the product with out actually picking it up. Physical constraints and natural mappings make this an excellent design (Scissors).
Scissors (Scissors)
Example of the principle not cited by original sources and not located online
The ball and chain on this lamp are affordances that allow us to understand how to use the lamp, even if this is our first interaction. The metal ball is easily grasped and the pair affords pulling.
Home office lamp (Image by Joe Davis)
References:
Lidwell, William, et al. Universal Principles of Design. 2010. Accessed 2018.
Norman, D.A. (1988) The Design of Everyday Things. New York: Basic Books
The technology used in Prada retail store in New York is inspiring. Specially using a magic mirror in their fitting room. There is a display in the mirror that has a 3 second delay so people can see how the clothes look like form the back. Continue reading “Histories: Sahar Abdizadeh”
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.
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.
