Albert Einstein said that it takes very smart people to solve problems, but it takes wise people to prevent them.
How do we prevent users errors?
Performing a Task Analysis or Cognitive Walkthrough to identify possible challenges could be a good starting point.
Is there any problem with the following flow?
So? Did you find anything wrong? Let’s analyze the task and do a sort of cognitive walkthrough:
Hundreds if not thousands of ATM users forget their credit cards at the ATMs in Argentina. Why? Because they were there to get the cash, once they got it, they are done. They need to remember their credit card is still in the ATM. If the users are concerned about other issues such as their kids waiting in the car or being late to the movies, they will easily take the money and leave.
How could we solve this problem? How could we prevent the users from committing this mistake? Let’s take a look at the flow in the Israelies ATMs:
In Israel the ATMs give you the credit card FIRST and THEN the money. It’s like they know you are waiting for the money and won’t leave until you get it.
A simple change in the flow saved millions of dollars in all the work related to lost credit cards. The following illustration shows the change in the flow:
You cannot forget your credit card in the states (since the ATM doesn’t hold it) but stolen credit cards won’t be kept by the ATM either. The business requirements are different.
My humble recommendation: Analyze the task, its steps, and try to identify possible challenges the user could face. As usual, test it with users as well to make sure it make sense.
Thanks for reading!
Please take a look at the following security gate:
What’s the message you get from it? Are they inviting you to pass through or to stop and identify yourself?
The security personnel managing this security gate decided to have some fun at our expense raising the arms, flashing red lights and playing an annoying sound when you try to pass through unidentified. This looks exactly like fishing. They are waiting for your move and then SLAP!.
There is a huge contradiction between the signifier/message that is actually transmitted by the gate and the optimal/desired one.
Actual Signifier: The arm is down, the gate is open, you can pass.
Desired Signifier: You can not pass until you identify yourself, using your electronic badge.
I found a very similar gate in another building, working as expected by our mental model: the security arms are up indicating you can’t pass.
As creators of interactions we must be aware of the affordances (Don Norman called them Signifiers) our products signify to the users and make sure they are consistent with the users’ mental model.
Is your confirmation/feedback message transmitting the desired message?
Are all the message’s components working together to deliver a coherent and easy-to-understand message?
I put together 4 reasons to give positive feedback in green and negative feedback in red.
1. Common Sense
Both Content and Format have a meaning:
Content: It’s the text you write. The meaning of a text is hidden in its words and it’s not perceived by the user until she deciphers it. As you can see from the example below, the user needs to read the message to get it’s meaning, to understand if it’s a positive or negative feedback.
Example 1: “Your file has been updated successfully”
Example 2: “Your file format is not valid, we only accept .png or .jpg”
Format: It’s the way you show the message. Meaning can also be transmitted by shapes, colors and sounds. We all can recall annoying sounds used to give us negative feedbacks in order to correct our behavior. The same can be argued about colors. A hardly-arguable universal truth about the colors Green and Red is that Green means good and Red means bad. You don’t need to be a DaVinci to know or apply this principle. As you can see from the following example, you can easily identify the positive feedback from the negative one.
Example 1: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod.
Example 2: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod.
Conclusion: Make sure you are not causing an unnecessary dissonance/conflict between the meaning rapidly triggered by the format and the meaning delivered by the message’s content. There is no reason to show a green-colored negative message or a red-colored positive one. In addition, if you use the same color for both, you’ll be forcing the user to read them to understand their meaning. And we know how much users like to read online…
2. Semiotics Theories and Users Mental Model
Ferdinand de Saussure popularized the idea of a signifier and signified.
A Signifier is a sign which conveys meaning (source).
Signified is the way in which a word, expression or situation can be interpreted as distinguished from the sign through which it is communicated (source 1, source 2).
For example:
Signifier: Tree. Signified: the mental image of a tree.
Signifier: red text. Signified: something is wrong (we don’t need a scientific empirical research to prove the red color trigers the concept of “caution/problem/error” in our minds, right?)
Conclusion: Nothing new. Make sure the Signifier triggers the intended Signified (User’s Mental Model).
3. Mass Communication
Marshall McLuhan coined the phrase ”The medium is the message“, meaning that the form of a medium embeds itself in the message, creating a symbiotic relationship by which the medium influences how the message is perceived.
Conclusion: The message of a green message is something like: “We did it, everything is fine, you don’t even need to read me”.
4. Cognitive Psychology – Interference Effects
The book “Universal Principles of Design” describes these effects as: ” A phenomenon in which mental processing is made slower and less accurate by competing mental processes”.
I couldn’t write it simpler, so I’ll quote the book:
“Interference effects occur when two or more perceptual or cognitive processes are in conflict. Human perception and cognition involve many different mental systems that parse and process information independently of one other. The outputs of these systems are communicated to working memory, where they are interpreted. When the outputs are congruent, the process of interpretation occurs quickly and performance is optimal. When outputs are incongruent, interference occurs and additional processing is needed to resolve the conflict. The additional time required to resolve such conflicts has a negative impact on performance.”
For example, in populations that have learned that greens means go and red stop, the incongruence between the color and the label-icon results in interference. In addition, colors and shapes are processed faster then sentences. In the case of the positive red feedback, the message is saying: “something is wrong, oh wait, no, everything is fine”.
It’s like moving your head to the sides (meaning NO) and simultaneously saying verbally “YES”. It’s confusing, right?
Or something like this:
Conclusion: The message’s elements will be processed independently. Make sure all the elements are triggering the same meaning, otherwise they’ll be competing against each other, causing slower and less accurate decisions.
So why would someone “mess” with this simple stuff? Who knows… 
C’mon guys (and girls), green is good and red is bad!
What’s the difference between an Information Architecture and a Site Map? I had an interesting conversation with a colleague regarding this issue, whose insights I would like to share with you.
Simple and incomplete definitions:
The Information Architect (IA) could be thought as the content’s mapping and the (sometimes hierarchical) relationship between those pieces of information.
Example of a simple IA from a small website (AcornMarketing):
The Site Map could be thought as the visual representation or reflection of that underlying content’s mapping (of the IA).
A definition from one of Jakob Nielsen’s articles, Site Map Usability:
One of the oldest hypertext usability principles is to offer a visual representation of the information space in order to help users understand where they can go. Site maps can provide such a visualization, offering a useful supplement to the primary navigation features on a website or intranet.
A site map’s main benefit is to give users an overview of the site’s areas in a single glance. It does this by dedicating an entire page to a visualization of the information architecture (IA). If designed well, this overview can include several levels of hierarchy, and yet not be so big that users lose their grasp of the map as a whole.
We define a site map as a special page intended to act as a website guide. The site maps we studied took a variety of forms, including alphabetical site indexes, dynamic diagrams, and two-dimensional lists. The term “site map” here thus encompasses a wide array of features, appearances, and names, including “guide,” “overview,” “index,” and “directory.”
Example of a Site Map from Oracle:
If it helps, think about this relationship as the Genotype-Phenotype distinction. The Genotype is your DNA information (in the case of your eyes, you could have a dominant brown-color gen and a second recessive blue) while the Phenotype is the expression of that information (in your case, you’ll only show brown eyes). Something like this:
Meaning, the Site Map is one reflection (of many possible) of the IA (your content).
Yes, sometimes both the IA and the Site Map will be identical. Check out the first example I used for the IA pic (AcornMarketing Site Map) and you’ll see they used the IA as the Site Map.
However, sometimes they won’t be equivalent. For instance, you may want to show a brief expression of your IA in the footer of your website or dedicate a full page to reflect the whole IA.
It’s your call. Review what the users need and make them happy.
A picture is worth a thousand words…
Hi, I’m not a dog, I’m Darth Vader!! Luke, I am your father!
I’m not a dog either, I’m Yoda! May the force be with you.
Hi, I’m not a pop-up, I’m a modal window!
Me too, I’m not a pop-up! that’s so ’90′s…
Disclaimer: I know they are not the same and I’m not saying modal windows are bad. I’m just having fun. I hope you enjoyed and laughed as I did.
Update:
Two weeks after I’ve written this joke about pop-ups and modals, Jakob Nielsen published an article mentioning users aren’t silly and still hate when modals are used as the old pop-ups.
Following is the quote and image from his article:
Although implemented differently, this is no better than a pop-up, which is the #1 most hated advertising design.
I found a great example to illustrate what a users’ mental models is and why it’s so important to address them in the design process.
Context: You are in your company’s cafeteria and want to buy a snickers bar. The vending machine has the standard keyboard, i.e. letters and numbers. The snickers bar is placed in the location B10.
Task: What keys would you press in the machine keypad to get it?
Think about it. Probably your answer is: dah, the letter B, the number 1 and then the number zero.
Ok, the concept you have about the way the vending machine works is your mental model. You already know that if there is a keyboard you’ll have to press the letters and the numbers. For example you don’t expect to find a “B10″ button.
Well, if you try to apply your mental model to use the following vending machine, you’ll be very mad. Please take a look at the keypad, especially the numbers.
Did you see it?
Since this machine has a “10″ key, when you’ll try to enter your “B”, “1″ and “0″, it will not let you. It will stop accepting key strokes after the “1″. You’ll get the salty crackers from B1 instead of your snickers bar…
The design of this machine doesn’t fit the users’ mental model, creating only confusion and frustration (Another example of designs ignoring the user’s mental model: The Message’s Message).
To operate this machine successfully the user will need to relearn, update and expand his/her mental model about vending machines’ keypads; We could have saved them time and energy.
This relearning process may be positive even necessary for new valuable and engaging features. But here? Why not just use the standard keypad with a zero?
For us, UX professionals, the interface is the center of the universe. We live in a UI-centric world. However, does the user care about the interface? Does he know what an interface is?
Did the users come to us to watch the interface? Probably not. They came to USE it. The interface is a MEDIUM to achieve a goal. This is true for users and for business. The interface should be invisible, allowing users to intuitively perform their tasks and the marketing department to achieve its goals.
When do the users usually notice the interface? When it stands between them and their desired goal, even though it is beautifully designed. Something like this:
Naturally, sexy and elegant interfaces will increase the users’ engagement while poorly designed ones will negatively affect the company’s branding. I’m not encouraging ugly screens. This graphic style could be defined as part of the business goals mentioned in the graph.
Yes, user experience is much more than being able to perform a task easily. And yes, you don’t want your web to pass unnoticed. But if the task is not performed easily, all the experience around it will collapse. It’s a pyramid where answering the users needs (whatever they are) come first (like Maslow’s hierarchy of needs).
What I’m trying to say is: Effective interfaces are so easy to use that the users don’t even notice they are there. They are invisible.
Two weeks ago I attended Edward Tufte’s one-day course ”Presenting Data and Information”. I enjoyed it. The following are some highlights and personal comments.
The course opened with a brilliant music visualization by Stephen Malinowski, where you could actually see the music before hearing it. You can see its future, its past and its sounding present. This is one of the series, presenting Bach’s Toccata and Fugue, Enjoy:
Well, there were some design principles which could be found in his books (as direct annotation, reuse of graphic code, content-driven graphs, etc.) and some interesting quotes:
- “There is no information overload, only bad design”
- “The Information does not care about the design”
- “If Ford would have had to build a car based on Focus Groups, he would have built a really fast horse”
- “What format to utilize to show a graph? Whatever it takes…”
There are two concepts from Cognitive Psychology I would like to clarify:
1. The famous misused concept of the 7+-2. You were talking about newspaper’s websites and mentioned:
“Psychologists would have prohibited us to show more than 7 links, and today we can find home-pages with more than 300.”
The scientific discovery is about Memory and not about Perception. Human beings have a short-term memory limitation of 7+-2 items. Meaning, we can retain just a few items before they vanish or are moved to the long-term memory.
Now, transferring this concept about memory to perception would be incorrect, since our users aren’t memorizing the options. They are there for them as long as they want. This leads me to Jakob Nielsen Heuristic of “Recognition rather than recall”, which I’ll leave for future posts.
2. I laughed, as everybody else did, when you rhetorically asked us:
“Why do we show at our meetings simple graphs composed only by 4 numbers? Do we become stupid at work? We can show much more interesting information…”
It was funny, I have to admit it, but then you added the following statement:
“A study showed that each eye can process 10 mega-pixels per millisecond! Meaning, we can process 20 mega-pixels of information and we are still showing a pie graph with only 4 numbers…”
I like your approach, but (and you know it) it’s not about the eye. It’s about our brain. It’s not about our retina and visual processing capabilities, but about our pre-frontal cortex and our cognitive processing limitations. Not by pushing more information into our users’ eyes (A Clorkwork Orange style) it will be better processed and understood.
And, of course, it’s not just about the viewer. It’s also about the designer and the creative work of bringing a multi-variate, content-driven problem to a simple and clear presentation, as you effectively reminded us.
Since July 2008 more than 100,000 applications were developed and are available nowadays at the App Store. This means a large quantity of developers are working at a intensely fast pace trying not to miss the momentum. Let’s see some results:
1. Screenshot of the settings to select the text size you’ll be happy with:
Is there anything missing? Yes, the page you were trying to read. This option should be presented in context. If for any reason this cannot be done, at least a feedback to the user about his/her action should be shown. How would the user know what size best answers his/her needs? How should the user make a decision? Based on how much the slider was horizontally moved?
Following are two examples from iTranslate and Forbes that work better. Actually they work. However, Do the iPhone and iPad users really need an extra mechanism to change the font size?:
2. Try to quickly understand the following sentence: “If you do not want to not read this post please proceed reading it…” (source).
In Shakespeare’s day, double negatives were considered emphatic, but today, they are considered grammatical mistakes (source).
In a Jakob Nielsen’s article about Web writing: “it’s usually better to write a positive statement (“do X”) than a negative statement (“avoid Y”), and it’s almost always horrible to use double negatives (“avoid not doing X”)”.
After this brief introduction, try to find the black sheep:
When the option “Hide Tech Ticker” is OFF, something is ON… Why not simply write “Show Tech Ticker”? Are they trying to trick us? I don’t think so, I believe the functionality is offered ON by default and they thought that could be useful to offer the possibility to hide it from the settings page. And they did it…
Another example:
An example of this double negatives from the Spanish government website (“The field Address [...] can not contain non-numeric characters“):
3. Some help will be helpful…
“Reset Facebook”??? from the settings of the Eurosport app? What are they talking about?
Sometimes testing it with 3 friends (not co-workers) will do the job. If there are some options/statements that could be difficult to understand, add a short contextual help and you’ll make some users happy (or at least you won’t make them angry). A short grey sentence below the question could make the difference.
“See you” in the next post!
