Let me warn you that this article is quite long but contains some valuable information, so ill ask that you hang in there with me : )
Design is a useful skill for any profession. We all use design all the time — creating a presentation; arranging the furniture in your living room; formatting your resume; coming up with an architecture for a software,etc. Design is basically how you present information so other people can understand and intuitively use it.
Product design is how both the interface and functionalities work to solve the user’s problem and the experience they get from using it. It’s not just how the product looks but how the product works. And from the customer’s perspective, the interface of the product is the product!
For instance, for someone browsing the web, Google is a text box and a page of results, and not the bots that crawl the web or the intelligent algorithm that rank pages.
To a customer, the design of the product is all that matters. It seems we are all hardwired to judge a book by its cover. When users see a user interface that looks shitty, they assume everything about the product is terrible.
This is why apple invests so much into design
“Most people make the mistake of thinking design is what it looks like. People think it’s this veneer — that the designers are handed this box and told, Make it look good! That’s not what we think design is. It’s not just what it looks like and feels like. Design is how it works.”
— Steve Jobs
Design is a skill that can be learned and developed through an iterative process though. Your first design works will most likely be trash, but the only way to come up with a good design, is to keep iterating.
To get better at design, you need to try to consciously understand why some designs work and why others don’t. Next time you marvel at how simple it is to use an app, a device or software, pause and ask yourself — What is it about its design that makes it simple enough that almost anyone can use it, from a non-tech savvy person to a two year old? And note down your findings.
While a nice UI is considerable, it’s even more important to recognize that design is about helping people achieve their goals. It’s not about features but rather about people and goals. Therefore, every design needs to start with an understanding of the user — user-centered design.
User centered design
This is designing with the user in mind. Unwittingly, developers tend to build things that are “cool” rather than what users actually need. They fail to realize that you can’t successfully add a “design” or UI onto a product after the engineering and product work. The product will most likely not do well. Design is the product. It has to be part of your process from day one.
Five tools for user centered design
1.User stories: These are short descriptions of what you’re building from the perspective of the user. It should answer three questions:
Who is the user? If you’re a developer, understanding your users is even harder. Everyone forms a conceptual model in their head of how a product works. While a developer’s model is usually very detailed, often at the level of interfaces, events, APIs, network protocols, and data storage, the typical user’s model is usually less detailed and inaccurate. This makes it difficult for a developer to communicate with a user. The developer wants the construction process to be smooth and easy. The user wants the interaction with the product to be smooth and easy. These two objectives almost never result in the same thing. And you can’t rely on filling the gaps with documentation or training because 90% of the time, users don’t read them. Your only option for building a successful product is to have empathy, and to silence many of your instincts as a developer
What is the goal of the user? One of the most common design mistakes is to confuse a user’s goals (what they want to accomplish) with tasks (how they can accomplish it).
A classic example comes from the space race during the cold war. NASA scientists realized that pens could not work in the micro-gravity of space, so they spent millions of dollars developing a pen with a pressurized ink cartridge that could write in zero gravity, upside down, underwater, and in a huge range of temperatures. The Soviets, just used a pencil.
This is an illustration of what happens when you lose sight of the underlying goal and become overly focused on a particular way of doing things.
The best ways to tell tasks apart from goals is to use the 5 why’s technique or first principles thinking. Look it up.
Why does the user need it? This is to force you to justify why you’re building what you’re building. If this product or feature isn’t solving an important problem for a real user, you shouldn’t be wasting your time building it.
You should always take the time to answer all three user story questions in writing before you start designing the product.
2. Persona: A Persona is a fictional character that represents a real user of your product who has specific goals, traits, and desires. It’s one of the quickest ways to significantly improve product design. Each persona should include a name, age, short bio, work history, and a set of skills, beliefs, goals, and any other details relevant to your product. To make it seem even more like a real person, it’s a good idea to add a photograph or an avatar to each persona.
Once you have defined personas for your product, never mention the word “average user” again, either in user stories or in conversations. Don’t let your team argue over whether the “average user” would prefer a particular feature or not, as everyone will have a different understanding of what is “average”.
If you’re designing for average, you are designing for no one. But you can make an educated guess on if a tool or feature will be useful for a persona.
Personas should be based on your market research and customer interviews. The reason personas are such a powerful design tool is that they force you to think about real people and to take into account their wants, limitations, personalities, and most importantly, their emotions.
The goal is to identify a small number of personas whose goals must be fulfilled or the entire product is a failure. 3 personas is enough
“The broader a target you aim for, the more certainty you have of missing the bull’s-eye. If you want to achieve a product-satisfaction level of 50%, you cannot do it by making a large population 50% happy with your product. You can only accomplish it by singling out 50% of the people and striving to make them 100% happy. It goes further than that. You can create an even bigger success by targeting 10% of your market and working to make them 100% ecstatic. It might seem counter-intuitive, but designing for a single user is the most effective way to satisfy a broad population”
— Alan Cooper, THE INMATES ARE RUNNING THE ASYLUM
3. Emotional Design: Emotional design strives to create products that trigger appropriate emotions, in order to create a positive experience for the user. To do so, you need to consider the connections that can form between users and the products they use, and the emotions that can arise from them. The emotions a product triggers can strongly influence users’ perceptions of it.
Studies have shown that people interact with computers and software much like they would with another human. They react differently to computers with female voices than those with male voices. In the right scenario, people think of computers as team members or even friends.
Have you ever begged and pleaded with your computer that it didn’t lose your Word Document after a crash? Whether you realize it or not, every product makes you feel something.
This is why the best designs always have an aspect of humanity and emotion in them. For example, Google has many hidden Easter eggs.
Try Googling “recursion”, “askew”, or “Google in 1998”.
During avengers endgame google implemented the Thanos snap in the search results for the search query — “thanos”.
Mailchimp includes its mascot, a monkey dressed as a mailman, on almost every page.
Tumblr’s downtime page used to show magical “tumblebeasts” wreaking havoc in their server room.
Emotional aspects of a design are as important to users as the functional aspects.
Try to design software that acts like a considerate human being. For instance, If you recently changed your password and you try to login with the old one by accident, instead of the standard “invalid password” error message, Google shows you a reminder that “your password was changed 12 days ago.
A good design is also responsive to the user’s needs. For example, if it will take time to process a click, show an indication that there is work going on in the background, like a progress bar or something better. We often overlook this as developers because in local testing, the processing happens on our own computer, so it’s almost instantaneous. In the real world, the processing may happen on a busy server, thousands of miles away, resulting in a considerable lag. If the user interface doesn’t show feedback, the user won’t know if the click went through, and will either jam the button down 10 more times, or will lose confidence and give up entirely.
People make mistakes. Design your software to anticipate and tolerate mistakes the user could make. For example, when you try to send an email in Gmail, it scans the text you wrote for the word “attachment”, and if you forgot to attach something, it’ll pop up a confirmation dialog to check if that was intentional. Gmail also gives you several seconds to “undo” the operation, in case you change your mind or forgot some important details.
“Eliminate the term human error. Instead, talk about communication and interaction: what we call an error is usually bad communication or interaction. When people collaborate with one another, the word error is never used to characterize another person’s utterance. That’s because each person is trying to understand and respond to the other, and when something is not understood or seems inappropriate, it is questioned, clarified, and the collaboration continues. Why can’t the interaction between a person and a machine be thought of as collaboration?”
— Don Norman, THE DESIGN OF EVERYDAY THINGS
Useful tips
Users don’t want to feel like the error is their fault. Avoid words like “Error”, “Failed”, “Problem”, “Invalid”, and “Wrong” and instead, explain what kind of input you’re looking for and how the user’s input differs.
Check the user’s input while the user is typing (not after a page submission) and show feedback, both positive and negative, right next to where the user is looking (not at the top of the page).
Never lose the user’s work.
The golden rule is to make errors more or less impossible.
4. Simplicity: Think of simplicity as the one thing that your product needs to do. Counter-intuitively, making things that are simple is not that simple. Managing complexity is the most important technical topic in software design and development, because projects don’t start with a blank slate, but with a vast amount of information, knowledge, and ideas all mixed together. You keep removing things like extraneous features or extra code from a piece of software, until you are left with the very core of the design, and nothing else.
Ask yourself — What is the one thing your product needs to do? What things should your product not do? What is the one thing your design must communicate to the user? Does the product you designed do that one thing?
You have to limit the amount of information in any design (less text, fewer buttons, fewer settings) and the number of features in any product. If you cram too many things into a design, it will quickly exceed the limits of human memory, and the user will find the product overwhelming and unusable.
The goal is to make the user’s life simple
5 .Usability testing: No matter how good you become at user-centered design, some of your design ideas will not work, some of your assumptions will still be wrong. The solution is to put the design in front of real users in the form of a usability test. The goal of usability testing is to see how people use your actual product to accomplish specific tasks.
Here is a simple process you can use
- Bring a small number of users (3–5) into your office.
- Setup recording equipment (e.g. iPhone on a tripod, screen recording).
- Record the users while they perform a list of tasks with your product.
- Have your team watch the recording.
- Decide what actions to take based on what you learn.
- Repeat this periodically
Do not help them use the product, especially if they make a mistake. The user may get frustrated, but the whole point of usability testing is to find these mistakes and frustrations so you can fix them.
Another option is to build a mechanism directly into your product that makes it easy to send you feedback, such as a feedback form. Only a small number of users will take the time to send you feedback, but it’s a valuable information when they do.
You can also conduct usability surveys, periodically. It’s like sending a feedback form directly to each user’s inbox.
Visual Design
This is the visual aspects of your product. It is the use of imagery, colors, shape, typography and form to enhance usability and improve user experience.
The basic visual design skills and techniques are:
1. Copy-writing: The core of almost all software design is actually the text. Most of the information that a user needs in a software product is in the titles, headers, body paragraphs, menus, and links, so even when doing visual design, your first priority should always be copy-writing.
Have you noticed that when you’re flipping through a magazine, a newspaper, or a journal, you only read some of the articles? Have you ever stopped to consider why you read those articles and not the other ones.
2. Design reuse: If you’re new to design, or almost any discipline, the best way to get started is to copy others. Don’t reinvent the wheel. When you copy others, you save time, you learn, and you get access to high quality and tested work. For example, there are thousands of UI templates or libraries that you can use or build upon instead of coming up with a design from scratch
3. Layout: A good layout arranges the elements on the screen so that you can infer a lot of information based on their positions relative to each other. One aspect of layout is proximity. The proximity between elements indicates if they are logically connected or not. Items that are logically connected should be closer together. Items that are not connected should be further apart.
Try to balance the close proximity of related elements with lots of white-space between unrelated elements. The human mind is limited in how much information it can process at a time, so a key aspect of readability is putting lots of white-space between elements so that you can focus on just one thing at a time. Medium, is known for its beautiful design — an inspiring example of how much you can do with white-space and typography.
Another critical aspect of layout is alignment. Alignment allows you to communicate that there is a relationship between elements, not by moving them closer together or further apart (as with proximity), but by positioning them along common lines.
The golden rule is: Nothing should be placed on the page arbitrarily. Every element should have some visual connection with another element on the page
4. Typography: Typography is the art and science of arranging text so that it is readable and beautiful. Important aspects of typography are: measure, leading, typeface, and style.
Measure is the length of each line. If lines are too short, the reader will be interrupted too frequently. If lines are too long, the reader will get impatient waiting to reach the end of a line.
Leading is the amount of vertical space between lines. As with measure, if you have too little or too much leading, the text becomes hard to read.
Typeface is the design of the letters. At a high level, all typefaces can be grouped into 5 classifications, as explained below.
Serif typefaces have small lines called serifs at the end of a stroke on each letter or symbol.
They letters look more distinct, which helps reading speed, especially for large amounts of text. You can also use serif typefaces in headers when you want a “classical” look.
Sans Serif typefaces are those without serifs. “Sans” is a French word that means without.
Sans serif typefaces also tend to have a more uniform stroke thickness throughout the letter.
Because sans serif typefaces have a simple and uniform appearance, they aren’t as good as serif typefaces for large amounts of medium-sized body text, but they are typically better at extreme sizes, such as large headers and small helper text. In fact, the tiny details of a serif typeface may look blurry if the letters are too small or you’re viewing them on low resolution screen so sans serif typefaces are very popular in digital mediums.
Decorative typefaces are used as decoration or accents.
These typefaces are distinct, fun, and highly varied, which is great when you need some text to really stand out. However, they tend to be hard to read, so you will typically want to limit their use to a few words in a title or subtitle.
Script typefaces look like handwriting, cursive, or calligraphy.
Similar to decorative typefaces, they are a great way to add an accent to a page, but don’t use them for more than a few words or letters, as script typefaces are hard to read.
Monospace typeface have each letter taking the same amount of space.
This is when displaying snippets of code. That’s why all terminals, text editors, and IDEs use monospace typefaces as well as text that needs to look like it came from a typewriter.
There are many styles that you can apply to a typeface to change how it looks, including text size, text thickness (i.e. bold or thin), text obliqueness (i.e. italics), letter spacing, underline, and capitalization
A font is a combination of a typeface and styles. Each font in your design should serve a specific purpose. It takes a bit of experimentation and experience to find several typefaces that look good together. If you Google “font pairings”, you will find dozens of websites that will give you good ideas.
5. Contrast and repetition: Contrast is used to make it clear that two parts of the design are different. Once you’ve defined a purpose for some element in your design, whether that’s a font choice, or a logo in the corner, or the way elements are aligned, you should repeat it everywhere. This repetition or consistency becomes your brand. If it’s distinct enough, users will be able to recognize your style anywhere
Useful tip
Every screen or page should have one central thing that it’s trying to get the user to do. This is known as the call to action (CTA) — mostly in the form of a button that stands out.
6. Colors: Color theory is more complicated than typography. To do it well, you have to take into account the following
- Physiology — Example, putting red text on a blue background can create an effect known as chromostereopsis, which causes the text to be fuzzy, making reading difficult and even painful.
- Biology — Example, about 8% of men have color deficiency while 2–3% of women may have extra color sensors and see more colors than average
- Psychology — Example, each color comes with a number of associations and can have a significant effect on mood
- Technology — Example, digital displays use the RGB color model, while most print devices use CYMK color model.
- Sense of art — Example, some colors go together in a harmonious fashion, others do not.
- Physics and mechanics of colors — Example, the color wheel, primary, secondary, and tertiary colors, color mixing, hue, saturation, lightness, tints, and shades.
Useful tips
Do all of your design work first and add color last. Figure out the copywriting, layout, and typography, and make the design work without any color. At the very end, when everything else is in place, you can add in some color, and even then, only with purpose.
You can use palettes put together by professionals instead, to come up with your own. Lookup color schemes and pallets.
You can also copy the color schemes used on your favorite websites.
“Good design is actually a lot harder to notice than poor design, in part because good designs fit our needs so well that the design is invisible, serving us without drawing attention to itself. Bad design, on the other hand, screams out its inadequacies, making itself very noticeable.”
— Don Norman
Thanks for reading : )
Checkout these resources
- The design of everyday things by Don Norman
- Hello Startup by Yevgeniy Brikman
