Nothing is for everyone, quit building your product that way
Not everyone buys iPhones, Teslas, or uses Gmail. It gets even more complicated when we build enterprise products that are used by different people for different purposes. While Gmail allows you to read, send, and respond to emails, it does not try to help you edit a spreadsheet. It has a separate product more appropriate for that use.
In product development, we invest a lot of time creating personas. Ignoring the needs of these personas and what they are looking to accomplish with your product can lead to building something that tries to be everything for everyone. It will probably lead to a very complicated feature or product.
If something is for everyone, then it is for no one.
The challenge is to identify when to break up the product or feature into multiple pieces. Anyone who has worked with personas before knows they have different needs. Knowing who is it for is a good place to start. Once we know the needs, we can ask ourselves if it is for them?
When the answer is no, we have found a way to simplify. When we find ourselves answering no more often than not, it might be time to break things up.
It starts with knowing who is it for and what they need.
Disney will not wipeout Netflix and Slack will be OK
Despite the popular belief by short-term investors, Disney will not drive Netflix out of business. Netflix is in the long tail business. Meaning they stream as much content as they can that is no longer popular in today’s week of entertainment, but it still loved. The long tail does not depend on Friends or The Office because most shows that make up the long tail are not producing the same revenue for studios as they were when they were new and fresh.
It cost Netflix an approximate $48 million to make Stranger Things. Disney spent over $300 million to make Avengers End Game. That means that Netflix can retry to find the next Stranger Things about 6 times. Even if they are successful only 50% of the time, that is 3 hit shows or movies. It’s way cheaper to play in the long tail than it is to dominate the blockbuster market.
Neither will Microsoft drive Slack out of business. 20 million users signed up, but it doesn’t mean their teams switched. The evaluation of a new team collaboration tool is not one week for the majority of teams. In the short term Slack’s stock may drop, and so will Netflix. It would be an underestimation of the impact by short-term investors to think it is the end for these companies. Netflix is the company that has innovated and ate its revenue several times by pivoting, not once, not twice, but thrice. From delivering DVDs in the mail to streaming online, to creating it’s on original content. Disney is playing catch up, not innovating.
That means they missed the next wave of innovation by a few years or what Clay Christensen calls, the innovator’s dilemma. They failed to eat their own lunch and missed the next innovation in television content. Although, they are big enough and have enough resources to catch up some.
Netflix is doing fine, they are playing the long-tail game.
Nick Fury knows how to assemble a team
“The idea was to bring together a group of remarkable people, see if they could become something more. See if they could work together when we needed them to fight the battles we never could” -Nick Fury
It starts with people who care, who want to make a difference, people who take the initiative to do the work. No one has to tell them to start the project, they start it and ask others to join.
Then, of those that care, they must possess remarkable potential. Here is a hint, if you care, you are full of potential.
The last ingredient is purpose. Once you care, once the potential is there, then you need purpose. Fury assembled the Avengers to save the world. He gave them an opportunity to channel their extra ordinary potential to do something much bigger than themselves.
They stepped up because they cared, and had potential. They stepped up when someone gave them a purpose beyond themselves.
Nick Fury knows how to assemble a team.
The constraint of quantity over quality in product development
Delivering a feature is not the same as delivering a quality feature. It may do what it is meant to, but most likely it is full of small details that make it hard to use, scale or understand.
The constraint between delivering features constantly because it adds business value “now” is one that teams constantly face. The challenge with delivering earlier by sacrificing quality is that it compounds. This is especially true if multiple teams are adding to the product simultaneously. If everyone sacrifices quality with the mantra “we will fix it later”, it probably won’t be fixed because the team didn’t see value in it in the first place. The business wants the next feature they can sell. Eventually, it adds up and probably will require redesigning the whole feature or product.
The same problem is true for engineering. The challenge with making short term solutions to deliver now is that many short term decisions hurt the long term. It may work for a start-up working on a minimum viable product (MVP), but MVPs don’t sacrifice quality, they sacrifice capability. Don’t hide your willingness to sacrifice quality behind the idea of an MVP. It’s not the same.
If you want to scale your product, you have to consider the long term over the short term benefits. What if you could have the feature 2 weeks later, but increase quality by 10%. What if you did that for every feature? Will 10% accumulate the same way over time?
I always tell co-workers that we are either making our product incrementally better or incrementally worst. It’s never a leap. One compromise is not so bad when you know you are sacrificing the quality for the capability in the short run knowing that the next step is to improve quality. When everyone is compromising quality to deliver early, it adds up.
Are you an engineer? Is your current implementation setting your team up to deliver quality later? Or does it just meet the requirements?
“Our users are old, they are not good with technology”
Said the Product Manager frustrated after hearing about all the support calls from customers with questions about how to use her product. “You haven’t spent time with them as I have” she insisted.
But is it true? Are they incapable of learning how to use a piece of software? Is it better to say that we are bad at empathizing with our users? Is it more probable that we are designing for ourselves rather than the people we are seeking to help? Could it be that we are not good designers, yet?
After all, I have seen many grandparents with smartphones using social media to post a lot of grandchild cuteness. Somehow they figured out how to use a smartphone, download an app, register an account, and post a photo.
It might be a fact that her users are older and less tech-savvy. The goal is to understand their challenges and design for them. It doesn’t matter how I use the app, it’s not for me.
No one buys an ugly car because it’s ugly
Maybe some people like ugly cars, but the rest of us like beautiful cars we can afford. We even like the ones we can’t.
Beautiful things are easier to sell than ugly ones. We maybe overlook aesthetics for performance, but all things being equal, most of us will choose the shiny object.
Of course, beauty is not enough on its own. A beautiful woman and a handsome man must deliver on their promise of being a good partner.
Beautiful apps sell better than ugly ones, but they still need to deliver on their value proposition. They still have to do what they said they would, but all things being equal, it feels good to use a beautifully designed piece of software.
Something to think about the next time developers poke fun at the designer because she makes pretty pictures. All in good fun of course. We all like beautiful things, except when they are not useful.
Developing with accessibility in mind
What is Accessibility?
Accessibility or A11Y for short, in its simplest terms, means making the content and functionality of a website or app available by anyone regardless of disabilities. When most people think of a disability, they think of someone with a permanent medical condition such as blindness or other physical condition that limits their motor or cognitive abilities. While that view is true, there are other types of disabilities that we should consider when creating software products. An individual can have a visual, motor, hearing or cognitive disability. These disabilities can be further categorized into situational, temporary or permanent. When we develop software, we have to consider individuals with permanent disabilities as well as those with temporary ones like a broken arm or situational disabilities like sitting at a café with the sun shining on their screen
Web Content Accessibility Guidelines
The Web Content Accessibility Guidelines (WCAG) was put together by the World Wide Web Consortium(W3C) as a list of best practices to provide a methodical way for developers to implement accessibility on the web. These guidelines were taken by the Web Accessibility in Mind (WebAIM) group and turned into a checklist to use during the development process. WCAG is based on the following four principles:
- Perceivable: Web Content is made available to the senses – sight, hearing, and/or touch.
- Operable: Interface forms, controls, and navigation are operable with different forms of input devices.
- Understandable: Information and the operating of the user interface must be understandable.
- Robust: Content must be robust enough that it can be interpreted by a wide variety of user agents including assistive technologies.
Accessibility during development
Focus
The simplest place to start with accessibility is by looking at an element’s focus state. All interactive elements such as links, buttons and form controls, as well as custom interactive components, should have a focus state. You can see an element’s focus state by using the tab key on the keyboard. Different browsers style the focus state differently. Firefox uses a dotted border while Chrome adds an outline around focusable elements. It is possible to remove the browser’s default focus styles with the outline CSS property, but make sure to always add a custom visual state with the CSS sudo-class :focus when you do so.
Click here then press the tab key to focus on the buttons
Order
Browsers organize elements on a page into the Document Object Model (DOM). The browser takes all the elements rendered on a page and it creates a nested tree-like JavaScript Object, the DOM, in the browser’s memory. This object is used to determine the order in which elements receive focus while using the tab key on the keyboard or other assistive technologies. It is possible to change the visual order of elements with CSS by changing the float property or positioning an element at an absolute location on the page. Keep this in mind when changing the visual order of elements. In the example below the first set of buttons are in the same order as the DOM tree, while the second set uses CSS to change the position of the first button. When developing you want to keep the visual order and the focus order the same to avoid confusing those using the keyboard or other assistive technology to access the application.
Click here then press the tab key to focus on the buttons
Tabindex
The browser provides a default tab order base on the DOM tree for native interactive HTML elements. There are cases when it is desired to change, remove, or prioritize the order. This is useful especially with custom components that may use non-focusable elements in their implementation. For that purpose, the tabindex attribute can be used on any element that otherwise would be ignored by the focus order. Adding tabindex=”0” to any element will cause it to take on the natural focus order in the DOM. tabindex=”-1” removes an element from the natural focus order and causes it to be skipped. Both are useful when creating custom components such as a select menu or a button that uses non-focusable elements like [divs]. It is possible to add a tab index number greater than 0 causing the element to jump to the front of the focus order, but this is considered an anti-pattern and should not be done.
Click here then press the tab key to focus on the buttons
Focus 2 Div with tabindex=”0″Semantics & ARIA
Many elements give meaning to the layout of a page. It is important to use these elements because they help assistive technologies like screen readers communicate to users the structure of the page or the purpose of a piece of content.
Headings
Use the proper hierarchy when using heading tags (H1, H2, H3, H4, H5, H6). Visually making text bold may be helpful for most users, but it provides no meaning to the page. Think about these as a list of related groups like a table of contents. Based on this structure, you should be able to identify sections and sub-sections within the page. Normally there is only one H1 heading on a page and all the sub-sections would follow the perspective hierarchy. Heading on sections of the page help users and screen readers quickly identify the purpose of the section. Studies have shown that people scan a page rather than reading line-by-line. Once they find something of interest, they narrow down the focus to the details of the content. Use headings to identify your sections.
HTML5 Semantic elements
HTML5 introduced a new set of elements that behave exactly like a [div] does. They are block level elements that add no style but introduced meaning to the content they hold. Use these elements instead of a [div] when appropriate to communicate content meaning within a page or components: header, footer, nav, article, section, main, aside.
Examples of using semantic native elements include using tables to display tabular data instead of implementing a layout Use the <p> element for regular body text, an <a> element for links and a <button> element for buttons. Many of these have a special meaning for assistive technologies but also include default accessibility functionality. One simple practice is to never leave an <a> element without the href attribute because it changes how it is accessed with the keyboard. It is a better practice to use a button if there is no link and style the button with CSS if you need it to look different.
Link and button text
The text used for links and buttons should be descriptive to help people with accessibility technologies better understand what they will be doing when they click them. It is clearer for everyone to use the following text for a link; “click here to learn about accessibility” than to simply use “click here to learn about accessibility”. It would be even better to omit the “click here” text altogether and use “learn about accessibility” on its own. A screen reader would not tell a user what to expect if they click the link reading “click me”. You can also use the ARIA specifications to add meaning or change labels for screen readers and other forms of accessibility technology. It is specifically helpful for buttons and other form controls. We will cover this further in a bit.
The Accessibility Tree
Screen readers build an accessibility tree to help users make sense of a web page. The accessibility tree is similar to the DOM tree except that it takes the semantics elements and allows the user to sort, skip, or jump to different elements such as links or buttons on the page. Important elements are also known as landmark elements.
New frameworks like React and Angular have allowed developers to create custom components that don’t have the same semantic meaning as some of the native elements. To solve this problem the Web Accessibility Initiative’s Accessible Rich Internet Applications specification (WAI-ARIA or just ARIA) was created. It allows developers to use a set of predefined attributes that modify the way an element is translated into the accessibility tree. This is great for custom components because developers can use elements without meaning like the [div] to create rich interactive components and still make them accessible through screen readers or other assistive technology. It also allows you to change the meaning or add better descriptions or labels for accessibility tools.
ARIA
The ARIA specification provides a set of attributes that allow developers of accessible rich internet applications to provide screen readers with information so that they can properly interpret the elements. Examples of these include the role and the aria-label attribute. role could be used when creating a custom checkbox, slider or dialog. Assigning the attribute role=”checkbox” would communicate to screen readers the purpose of the component. [aria-label] allows developers to add a string that is used to describe an element but has no visual impact. Think of a button or link with only one word as its label text. aria-label allows you to override the text description for screen readers without changing the visual label. You may have seen these attributes in the source code of component libraries. I will not cover the ARIA specifications here; the basics alone warrant its own article. Be aware that you can use it to add meaning to your application and help make it accessible to users that depend on screen readers.
Styles, Color, and Contrast
When styling elements ensure that all interactive elements have a focus style. If the company’s branding is different from the browser’s default focus styles, ensure that a custom focus style is provided.
Beyond interactive elements do not depend solely on color to communicate element status or purpose. Red text color is great to display an error message to most users, but someone who is colorblind may not know it is an error. The same is true for someone using assistive technology to access the application. The ARIA specification can help you add meaning to these types of components and make the application accessible to a wider range of people.
Similar to color blindness, there is also a part of the population that has low contrast vision. They are not able to easily see elements or text with low contrast. When selecting a color pallet, select colors with enough contrast between the foreground and the background for people with such a condition to see it. Contrast is also an issue depending on lighting conditions. This would be an example of a situational temporary disability. Think of the earlier example of the person sitting next to a sunny window.
Responsive Web Design
Last but not least, there is Responsive Web Design (RWD). HTML5 and CSS3 made it possible to create web pages that resize and adapt the layout based on the size of the screen the user is on. RWD makes applications accessible across different devices without the need for separate source codes. This is great for reducing business costs, improve the user experience, and speed up the delivery of features across multiple devices. Avoid using tables to create the layout. Tables are meant to display tabular data.
Conclusion
Making applications accessible is not a complicated process, but it is one that has to be done with purpose. Accessibly like the user experience, is about empathy for the limitations that users face while using the software we create. Those limitations can be visual, motor, hearing or cognitive and furthermore they can also be situational, temporary or permanent. Accessibility solutions should follow the WCAG list. An interface’s accessibility can be judged by asking if the feature is perceivable, operable, understandable, and robust. These are the four principles WCAG is based on.
When implementing a feature use the following checklist to test it for accessibility:
- Ensure interactive elements are accessible without a mouse and with a screen reader. You can use a screen reader plugin on your browser to get an idea of how someone would be able to use our software with it.
- When an interactive element is in focus, make sure visually the styles change and it is obvious what is in focus.
- Maintain the visual and focus order of elements the same.
- Use native semantic elements for content and use the HTML5 semantic elements where appropriate.
- When creating custom components use the ARIA attributes to make these elements accessible to screen readers.
- Don’t rely solely on color to communicate meaning and make sure that colors have enough contrast.
- Test the application on different screen sizes, make sure that it is still accessible on different devices.
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.