The phrase “in your own backyard” has changed
Geographically, it used to mean something near you and accessible within a short travel distance. Modern transportation changed that. It used to mean your own, neighborhood, town, city or state, then the car came along and it expanded the borders of what “in your own backyard” means.
In communications, it meant we connected with anyone we could walk or travel to within a short time period. The telegraph came along and expanded the meaning. Then came the telephone, the radio, television, and the internet. In the world of communications, “in your own backyard”, is now the world.
There was a time that selling as a business meant finding customers who were geographically nearby. Then came the motor vehicle, roads, trains, plains, and eventually the internet, and it opened up the entire country, then the continent, and finally the world. Everyone’s backyard expanded and now you can reach people across the oceans and timezones in real-time.
We use to explore only the seas, jungles, and new continents. Then the backyard borders changed and today humans explore the solar system through robots and satellites.
Our backyard is not as small as we thought it was and it’s still expanding.
Cognitive overload
The human brain is an amazingly complex system. It has the capacity to store tons of data. Some neuroscientists estimate that it can store somewhere between 10 to 100 terabytes and others as high as 2.5 petabytes. One terabyte holds roughly 1000 gigabytes and one petabyte 1000 terabytes. To put this in perspective, 2.5 petabytes can hold up to three million hours of video, enough to watch for 300 plus years, non-stop. While these are estimates, they give us a perspective of how much information the brain can store.
Despite the brain’s capacity to store information, it is limited to how much it can hold in Short Term Memory (STM). Research suggests that it can store 4 (plus/minus 1) units of information in STM. Maxing out this capacity is known as cognitive overload. It happens when a person is given too much information and they are unable to process it, causing a feeling of distress. For users, this means abandoning a page or making the completion of a task a frustrating one.
Cognitive overload is one of the many pitfalls designers look to avoid. It is a common mistake to try and show everything in an attempt to cover the many scenarios and workflows in a complex product. Given too much data, humans become frustrated and abandon a website. This event is known as dropping off and it is measured in analytic tools as the drop off rate of a page. It is an important metric because it is closely related to e-commerce sales.
In web applications, users may not drop off because they need to complete a task despite the frustrating experience. Eventually, when a better alternative comes around, users will jump ship as quickly as they can. In today’s market when there are usually several alternatives to every product or service, good user experience is a must. It is the one thing that companies cannot afford to neglect to stay competitive in the long run.
Preventing cognitive overload
Cognitive overload can be prevented by following a few design principles and best practices. This is true even for complex products.
The primary goal
Every feature in a product should have an intended primary purpose. The first step of an effective design process is to identify the primary problem it’s solving. That is not to say that design can’t accomplish several tasks, but understanding the user’s primary needs when using a product will help prioritize the design and give it focus. A feature may be compromised of several views that make up a workflow in a multi-step process. When that is the case, think about why each of those views exists. What is the primary purpose of each view?
To prevent cognitive overload, spend time identifying what data and actions should be available and get rid of unnecessary ones. A danger many designs run into is trying to be everything for everyone. It would be nice if a design allowed you to do everything, but it’s not practical. Protect the user from themselves. They may think they want to see everything, but the way our brains work disagrees. The next step is to organize information in a meaningful way.
Information hierarchy
All information is important but not all information is of equal importance. The levels of importance are described as information hierarchy (IH). IH helps direct users to what they should pay attention to first. The same is true for elements and actions. There are commonly three levels in a hierarchy: primary, secondary and tertiary. To establish a visual hierarchy, designers combine the use of size, scale, contrast, color, space, proximity, and alignment.
Classify data with the level of importance for the primary purpose of the page. When there is data or an action that can be helpful in some cases, a useful technique to use is to make the data available on-demand or just-in-time. This type of data can be displayed on demand at the time it is needed by using a mechanism such as a mouse hover over or a toggle to show/hide other information.
Hierarchy case study
The following example uses font size, color, contrast, and proximity to bring attention to the subject ID, variable and verbatim term name. Larger font with high contrast between the white background and black text is used to make them stand out more than lighter text. They are grouped with other information to make the group visually weighs more than the rest of the data. This is known as information chunking. Which is easier to remember, FBINSACIA or FBI NSA CIA? Within the group, there are three levels of hierarchy but the proximity to each other implies a close relationship. Through color, we identify the clickable text as well as the status of a term. Tertiary data, while still important, is smaller or lighter, or both.
Repeating schemas
An effective way to help reduce cognitive overload is to use known schemas or patterns. Repetition helps the brain recognize previously encountered metaphors that it has gathered over years of experience. Once recognized, the brain ignores what it already knows and moves on to process other pieces of information. Common examples include buttons or color for hyperlinked text. Our brains recognize the schemas and know how to interact with them because it has encountered them before.
Use commonly known schemas as much as possible. If you need to create your own for a specific need, use a reusable component library to help establish these patterns across a product.
Conclusion
The understanding of cognitive load will help minimize the amount of effort it takes to use a product. I would encourage you to dig deeper into this subject. If you have ever encountered a design that frustrated you with too many distractions and didn’t know why it is most likely due to your brain being overloaded by information.
In the words of the great philosopher Notorious BIG, “And if you don’t know, now you know…”
Gestalt laws of grouping
The Gestalt laws of grouping are a set of psychological principles that came out of the work of German psychologists Max Wertheimer, Kurt Koffka and Wolfgang Kohler in the early 20th century. They set out to understand how humans gain meaningful perceptions between objects from the world around them. Humans naturally perceive things as organized patterns and objects.
The word Gestalt is German for form or shape and it is defined by the Merriam Webster dictionary as:
Something that is made of many parts and yet is somehow more than or different from the combination of its parts.
Why the Gestalt principles are important in product development
Psychology plays a huge role in visual perception. When users see our software interface, they are looking for ways to add meaning to the elements in front of them. Knowing how our minds help us find meaning and attribute relationships in the world around us can help us create better products. Applying these principles can be compared to swimming in a river. When you violate these principles, you are swimming upstream against the current of human cognitive power. When they are followed, you are swimming with the current and facing little to no cognitive resistance from the stream.
The Principles
Proximity
Objects or shapes that are close to one another appear to form groups. The further apart objects are, the weaker the relationship between them becomes. It is a powerful principle that it overcomes other differences and similarities in the same group such as shape or color. In the example below, we see three groups with different shapes and colors. Before identifying differences within each group, proximity helps us identify them as related despite the differences within.
Similarity
All else being equal, our perception lends itself to see things that physically resemble each other as part of the same object or group. Things that affect how we assign a relationship between objects are size, color, and shape. In the example below, our minds assign a relationship between each type of shape and color even though they are not next to each other. There is a relationship created between the shape and colors.
Closure
The mind has a tendency to see complete figures or forms even if the picture is partially hidden, incomplete, or part of the information needed to make a complete picture lives in our memory. In the example below, our minds complete each shape to be perceived as a square, circle, and triangle even though the lines are not closed. The mere shape of the line is enough to allow us to perceive it as the shape itself.
Symmetry
The law of symmetry states that elements that are symmetrical to each other are perceived as belonging together regardless of their distance. Symmetric objects are perceived as stable and balanced. In the example below, even though we have two different triangles they are perceived as belonging together because of their symmetry to each other. Balance creates a perception of a relationship.
Common Fate
When visual elements are seen moving in the same direction at the same rate, our perception associates the movement as part of the same stimulus. A group of jets flying in formation is perceived to have a stronger relationship than if they were all flying in the same direction at different speeds.
Continuity
Lines are seen as following the smoothest path. When there is an intersection between two or more objects, our minds tend to perceive them as a single uninterrupted object. In the example below, the relationship between the blue curved line and the dark gray curved line is stronger than it is to the straight blue line. Even though the color shows the change in direction, the smoothest path for our mind is to follow the curved line.
Good Gestalt (Good form)
Objects are grouped together by our minds if they form a common, and simple pattern. This is our mind’s efficiency in simplifying shapes into simpler concepts in an attempt to make sense of what we are looking at. Our mind’s ability to reduce extraneous stimuli helps it create meaning in chaos to reduce cognitive overload. In the common example bellow, the mind reduces the complexity of the Olympics’ logo into five circles. Even though there is nothing separating them as circles, our brain can process them into simpler shapes to make it easier to understand the relationship.
Law of Past Experience
This law states that sometimes people use their past experience to add meaning and attribute relationship to objects. A common example is how we perceive letters. When a letter is missing, replaced or reordered, our minds help us fill in the gaps to add meaning to what we are looking at.
7H1S M355AGE C4N B3 R34D BY YU0
Applying the principles in design
In design, we can use these principles to communicate relationships or the lack of between different elements. We use principles such as proximity to create a relationship between elements such as an image, text, and a button. We add symmetric objects to the page to give a feeling of calmness and balance to a user interface. Continuity helps display a group of elements such as lists to communicate a relationship between each item as part of a bigger group even though each is considered its own entity. Together they flow in a similar direction as if they were one. Combined together these principles help us create interfaces that are easier to learn, pleasant to look at, and more delightful to use.
Creating Angular 1 components in ES2015 syntax
Recently I have been working on transitioning my company’s Angular 1x Single Page Application(SAP) to ES2015 to prepare us to update to Angular 2 in the feature. At work we are using Webpack as our bundler with the Babel 6 loader to transpile our code back to ES5.
Note that the following code assumes that you are using a bundler like Webpack with the appropriate loaders. I will not post my Webpack configuration since you can easily find that information on their site as well as Babel’s. The modules are written in a way that you can easily swap the bundler or transpiler with little modifications to your code.
Creating an Angular controller in ES2015 syntax
export default class SomeController {
constructor(someDependency) {
this.someDependency = someDependency;
this.title = 'The component title';
}
someMethod() {
}
}
SomeController.$inject = ['someDependency'];
Notice how dependencies are being inject through the constructor method and using $inject. I am exposing the dependency by reassigning it to a property with the same name to the this object. That will make accessible in any of the methods using the this keyword.
Creating a component in ES2015 syntax
import SomeController from './somecontroller.ctrl';
const SomeController {
template: "<h1>{{vm.title}}</h1>",
controller: SomeController,
controllerAs: 'vm'
}
Creating an Angular module as a ES2015 Module
import SomeComponent from './some-component.component';
const SomeModule = angular
.module('someModule', [])
.component('someComponent', SomeComponent);
export default SomeModule;
The module becomes the single source where everything that belongs to it is declared using Angular’s interface. It also includes any type of providers or services and will make it much easier to upgrade to Angular 2 because you are creating native classes and object literals when declaring each peace.
One caveat is that the new syntax favors services over factories. You may recall that one of the differences in how they are declared is that factories return an object where services are constructor functions.
Using HTML5 validation to validate URLs
Recently I came across Raymond Camden’s blog post on how to use HTML5 form validation with pure JavaScript. I thought I would write the URL version. I know, I’m totally stealing his code.
Validate URL:
function isValidUrl(s) {
var elm = document.createElement('input');
elm.setAttribute('type', 'url');
elm.value = s;
return elm.validity.valid;
}
isValidUrl('http://www.thewaymultimedia.com/'); //true
isValidUrl('www.thewaymultimedia.com/'); // false
isValidUrl('thewaymultimedia'); //false
Sweet, that is pretty simple. Thanks Raymond. Make sure to read Raymond’s blog post, since that’s where I stole the code from. Here is the list of data types you can implement this method for:
- color
- date
- datetime
- datetime-local
- month
- number
- range
- search
- tel
- time
- url
- week
Of course, it will only work with modern browsers and not all types are supported across the different browser vendors.
Configure npm to use exact module version and save change to package.json
When you are using NPM it is important to make sure that you install an exact version of a package/module you are using. Not doing so may lead to headaches when the developers maintaining the module make an update with breaking changes, but do not tag the version correctly.
To do so, simply run npm config set save-exact true
It is that simple. you can also configure NPM to always save any changes to your package.json file.
To do so run: npm config set save-exact true