Definition: (Full disclosure, this is a made up word — but so worth defining) — The organic structure that emerges from an unwillingness to think about how to structure something.
Origin: This word was made up by foremost information architecture expert, Abby Covert. It emerged from her frustration with designers lack of emphasis on how products are organized.
Thoughts: I felt that this word was important to define because any UXer worth her salt should understand the importance of information architecture and how organization impacts all aspects of design and ultimately a product’s success.
Covert recently wrote an article on this very topic for the blog, A List Apart, and states,
We need to teach people that information architecture (IA) decisions are just as important as the look and feel of technology stack choices.
PSA: Don’t ever fall into a lacksonomy and forget that there is always a better and more succinct way to organize information. Your users will thank you for this; I promise.
Word: Skeleton Screens
Definition: A blank version of the page currently loading. Users generally see gray boxes where images will soon appear alongside gray lines denoting areas where text will load.
Thoughts: This is a common user experience technique is used as a page load distraction device. It is a common alternative to the loading spinners, beachballs of death, and agonizing progress bars.
By displaying skeleton content, it gives the user the illusion that things are happening immediately. When the user sees something, anything, appear on screen, she tends to be less impatient knowing that her command has been heard and action is taking place.
Reference: I first came upon this term reading Luke Wroblewski‘s blog in reference to his mobile app Polar, which utilizes the technique.
Skeleton screens can be seen all over the web and on mobile. Pay attention next time you’re waiting for a Medium article to load or you’re opening up your LinkedIn app.
Definition: A design style that mimics physical items or textures for aesthetic appeal and effect.
Thoughts: While this might seem like a ridiculously easy term for me to be defining, it’s actually important because realism is often confused with skeumorphism. Realism is used purely for stylistic reasons while skeumorphism is about using metaphors as affordances and supports in order to teach users how to interact with and understand an interface.
Examples: Below are a couple examples to illustrate. Keep in mind how these designs are focused on realistic aesthetics and textures that mimic the real world but the visual does not provide clues as to how you should interact with the UI.
For fun: If you’ve scrolled down this far you deserve a final prize! Check out this amazing website that pits Flat Design vs. Realism!
Realism and flat design represent extremely different visual design choices and you will find most people have a strong preference for one over the other.
Word: Interaction Cost
Definition: An interaction cost is equal to the physical effort plus the mental effort exuded by the user per a given task.
In a perfect world, the interaction cost would be zero, in that the user would know exactly what she has to do and how she can accomplish her goals, all without any effort or strain. However, we know that this is an impossible standard to attain, so the point is to get close!
Reference: This term comes from the early days of Human Computer Interaction and is used to evaluate a product’s usability. Tools such as heuristic evaluations directly influence and ultimately minimize the interaction cost for the user.
Thoughts: Examples of efforts that can be minimized and ultimately lower the interaction cost are:
- Page loading
Now let’s reduce the abstraction and look at a very basic example! Image you are filling out a form on a mobile app. You are exerting effort every time you read a form field label, click into the field, type a value into that field, and then finally submit the value. When broken down in this manner, that is a lot of effort!
Think about the small things that we can do as UX designers that will help lower this effort. We can automatically display the numerical keyboard on a phone number or zip code fields. We can allow the user to tab from one field to the next without exiting the keyboard display. We can display shortcuts to various form field sections for easy access. The possibilities are endless!
These may seem like small interactions and mundane examples but it is through such details that the larger interaction cost is reduced and the usability of a product ultimately increases.
Word: Change Blindness
Definition: A perceptual phenomenon in which an observer does not notice the introduction of visual changes to an existing image.
Reference: Think about the games you played as a kid that flashed the same image twice but the second time something was different and you had to figure out what that was. This is surprisingly difficult! It is difficult because there is an interruption in our visual perception and because of the speed in which this happens, our eyes have a difficult time fixating on those changes and interpreting them.
Thoughts: Now think about a time you submitted a form only to see an error message. Then you have to identify which form field the error occurred in. Why is it so hard to find the form field with the small red “x” next to it? Change blindness, that’s why! The subtle change between the form pages is not enough to easily identify the problem and therefore we become a frustrated user as we search for the erred field. This is just one of many examples of how change blindness can effect user experience. It is important to think about this while designing subtle interactions.
Word: Adaptive hierarchy
Definition: The flexible design model in which product layouts change, affording priority for elements based on a user’s action at a given time within a given context
Reference: I first heard of adaptive hierarchy from an ustwo blog post in which they reimagine a car interior dashboard that provides a user with different options and views depending on context (car is on, car is in motion, roadway conditions, etc).
In adaptive hierarchy, context is key because it is context that can support more empathetic and appropriate options to the user based on the user’s actions in a particular moment.
Question: Does adaptive hierarchy build on the “slippy ux” model? Is there a point where automation goes too far and we lose user empowerment altogether?
Word: Double diamond process model
Definition: A graphical representation of the design process by breaking it into phases (discover, define, develop, and deliver). Each mode of thinking is displayed through diverging and converging paths.
Reference: The model was developed by the UK Design Council in 2005 to simplify the mapping of the design process.
Thoughts: Yes, I know it kind of looks like a maze, but let’s play follow the leader. The discovery portion typically includes a variety of research methodologies to better understand user needs. Next is the define phase is when the discoveries are aligned with business needs. This is followed by development where design solutions are developed and tested. And finally, the double diamond concludes with delivery, which includes final testing phases, approval and product launch. Don’t forget, that the beauty of this method is the diverging and converging of phases. Make sure not to slip down the waterfall.
Word: Ockham’s Razor (sometimes Occam’s Razor)
Definition: A philosophical rule about simplicity. The theory states that when choosing between multiple options, the simpler choice should be selected.
Reference: The theory is named for 14th-century theologian, William of Ockham and is used as a problem solving device.
Ockham’s Razor helps justify and support design decisions. Jason Fried and David Heinemeier Hanson, the duo behind such software as Basecamp, utilize this principle in their work. They have been quoted saying,
“We design [our applications] to be simple because we believe most software is too complex: too many features, too many buttons, too much confusion.”
While a simplistic feature set is not the solution to all design problems, it does not hurt to keep Ockham’s razor in the back of your mind, especially when determining a feature set and product scope.
Question: How do you feel about simplistic design and utilizing such theories in UX practice? Where are the exceptions? What are the pitfalls?
Definition: The avoidance of work and that feeling of “I don’t care.” Essentially, the idea that people only want to put in the most minimal amount of effort in order to achieve desired outcomes online.
Thoughts: The discussion here does not revolve around whether people are inherently lazy and instead speaks to how users feel about online tasks. Users are becoming more accustomed to great user experiences and are demanding easy-to-use, intuitive interfaces as a result. Steve Krug hit the nail on the head in his classic UX book Don’t Make Me Think. If there is an established way of completing certain tasks online, users will likely become agitated or simply not complete the task if it is made to seem too difficult. It all comes back to the user experience! When unnecessary effort is exhorted, putting laziness aside, the user is now in a new headset and this new frame of mind can negatively impact the experience as a whole.
Question: In what situations is it okay to push the user to exhort more effort? In these cases, what, if any, are the positive effects this can have on the user experience?
Word: Gestalt laws of grouping
Definition: A principle taken from psychology to understand how people naturally observe and perceive object groupings. Gestalt psychologists believe that humans are predisposed into making sense of groupings in logical ways. The principles include perceived patterns like proximity, similarity, closure, continuity, and common fate.
Reference: Gestalt is a German word roughly meaning “shape”, “form”, “essence”, or “whole”. Gestalt thinking gives people a lot of credit and theorizes that the human mind seeks to find structure and order in the world around it.
Take a look at the image below. What shape(s) do you see? Did you say, circles and a triangle? Why did you say that when there is obviously not really a triangle or a full circle present in the image? That, ladies and gentleman, is your mind working to make sense of an unknown grouping by referencing the known and understood. For further reference, the image is utilizing the principle of “closure”.
Thoughts/Questions: Understanding how people perceive and react to groupings of objects helps designers create layouts that are easily interpreted from user to user.