DesignSuccessful UX Design — A short overview

• DesignSuccessful UX Design — A short overview

Users expect an optimized user experience as a basic requirement, and it’s now become a prerequisite implementation strategy across all platforms and devices. There are countless UX strategies and principles, so I picked my favorite five. I find them the most effective and the most important.

1. Progressive disclosure

Progressive disclosure is an interaction design technique often used to help maintain the focus of a user. This technique improves user experience by reducing clutter, confusion and cognitive workload.

Why is this important?

According to Microsoft, people now generally lose focus after eight seconds, due to effects of highly digitalized lifestyle. As a reference, the average attention span for the notoriously ill-focused goldfish is nine seconds. So…

You Now Have a Shorter Attention Span Than a Goldfish!

The designer’s dilemma

Users want both complexity (more features) and simplicity. These two requirements don’t really get along. So in order to achieve both of them, a compromise has to be made. Cool, compromises are part of our everyday life, but they usually make things worse. Watered-down solutions bring neither complexity or simplicity. The best way to satisfy both needs is by using progressive disclosure.

Simple as the concept may seem, there are two things you must get right when designing for progressive disclosure:

• Make the right split between initial and secondary features. You have to reveal everything that users frequently want to see up front. In newspaper terminology, this is the content “above the fold”, the kind of content that sells (or is the most important and most interesting to the reader/user). Secondary features should be displayed only on user’s demand. If split right, the user will have to progress to the secondary display only on rare occasions. Note that the primary list shouldn’t contain too many features because you’ll fail to focus users’ attention on truly important issues.

Initial features clearly outlined, without the content of the secondary features. The view is decluttered and the progress to the secondary disclosure level is obviously labeled and visualized. Simplicity is granted and complexity is still available on-demand.

• Make it obvious how to progress to the secondary disclosure levels. If the user has the need for more detailed information or advanced features, secondary disclosure levels should be easily accessible. Advanced features button or accordion label should be clearly visible. Have in mind that the secondary disclosure levels should be hidden but not completely unreachable (think of those hidden library doors behind the bookshelf — avoid that design because even you will forget where they are). Buttons or links which lead to advanced feature reveal should be labeled in a way that sets clear expectations for what users will find when they advance to the next level. If the user knows what to expect behind the closed door, there is no room for surprises, and the usability just flows smoothly.

Advanced features are presented on users request. Imagine that the initial view was expanded by default — too much information for initial view.

Benefits

Using progressive disclosure technique makes your product more attractive to new users since they are not faced with the complexity the minute they start using it. On the other hand, advanced users don’t lack the desired complexity since all the features are present, on demand. So the technique is ideal for the users who want the complexity and simplicity at the same time.

In theory, there is no limit to the number of disclosure layers. The more features you can defer, the simpler your design. But if you divide the task into too many steps, users will get bogged down by excess navigation. Just remember the goldfish…

2. Gestalt principle

When we design our applications, we use table borders or groupboxes to outline a group of information as a whole. But what if I tell you that you’re able to group information with an empty space? Well, this principle describes how to get it done. Gestalt is a psychology term which means “unified whole”. The principle attempts to describe how people tend to organize visual elements into groups or unified wholes when certain principles are applied. These principles can be organized into three categories: Proximity, Similarity, Continuity.

Proximity

Proximity occurs when elements are placed close to each other, relative to the surroundings. When placed close, they tend to be perceived as a group. Even if the information is different by nature, or different by shape, if placed close to each other, they will appear as a group. Proximity principle is also called grouping since smaller chunks of information are assembled in a composition.

Group elements with empty space and proximity principle. It declutters the view and gives more natural grouping.

Similarity

Similarity occurs when objects look similar to one another. This principle allows for people to distinguish between adjacent and overlapping objects based on their visual texture and resemblance. You can use shapes, colors or size to emphasize and group similar objects. For example, in the grid below, the similarity principle dominates the proximity principle and you probably see rows before you see columns.

Rows noticed before columns

When similarity occurs, an object can be emphasized by breaking the pattern. Make an important object dissimilar, and it will pop out and grab users attention. This is called anomaly.

Make an important object dissimilar and it will pop out and grab attention

Continuity

Continuity occurs when the eye is compelled to move through one object and continue to another object. We have a tendency to group and organize lines or curves that follow an established direction over those defined by sharp and abrupt changes in direction.

The viewer naturally follows an established direction (green arch) even though g1,g2 and g3 are grouped by using proximity principle. Continuity principle overrides proximity since the natural flow is stronger than abrupt changes in direction.

Besides these three, there are closure and common fate principles. I find them less effective for application design purpose, so they are left out from this article, but feel free to explore them as well.

3. Perceived affordance

Perceived affordance is a term coined by Donald Norman as an uncountable noun, referring to the easy discoverability of an object or system’s action possibilities, as in “this button has good affordance”. Affordance of a physical product is easier to perceive, since you can see a physical button, different material, elevation, cutout or a knob. On the other hand, digital products are presented on the screen and each pixel is clickable. This means that the designers of the digital product have to make a clear difference between actual and perceived affordance i.e. the difference between what does it really do vs. what does it look like it can do.

designers of the digital product have to make a clear difference between actual and perceived affordance i.e. the difference between what does it really do vs. what does it look like it can do.

In software development, this is pretty much resolved by using standard UI frameworks (e.g. Bootstrap — undisputed champion of front-end frameworks). Users are familiar with these controls (buttons, checkboxes, accordions) and they already learned the affordance of each visual element. If users are to instantly identify the interactive elements on a screen, and accurately predict the results of their interactions, the interface must work according to their expectations. These expectations are based on prior experience with other products. By conforming to the design traditions, such as those mentioned above, the user is able to apply knowledge from one interface to another. Conversely, inconsistencies will more than likely lead to inaccurate predictions and errors as a direct result.

4. Call to action

Call to action (or CTA) is aimed to navigate us through content or application. In general, software is designed to help us with our tasks. Most of the time, we’re using software with the end goal in mind. We form the goal and the intention, whereas an application should lead us to that end goal effortlessly. The absence of CTA will make the user think hard about the next step, talking to the computer: “wait, isn’t it your job to lead me to my objective?”. This results in bad user experience and a frustrated user.

Placement is important

By putting our call to action in the correct place, users understand its meaning and use. There is a lot we can do to subconsciously draw attention to our call to action. One of the patterns is the Gutenberg Diagram. It describes a general pattern our eyes follow when interacting with our application or content. The pattern suggests our eyes will sweep across and down the page in a series of horizontal movements. Each sweep starts a little further from the left edge and moves a little closer to the right edge. The overall movement is for the eye to travel from the primary area to the terminal area. This path is referred to as ‘Reading Gravity’.

This path is referred to as ‘Reading Gravity’

Important elements should be placed along the reading gravity’s path. The most important information should be placed in Primary Optical Area. Strong Follow Area should contain useful data as well so that the user maintains focus. The terminal area is usually reserved for a CTA — where attention is focused.

Don’t forget the color psychology

The color of CTA is equally important as placement is. It has the power to calm us and alert us. Through making these subconscious associations, we tell our visitors what that call to action will do, even before they read it.

Color Psychology in Marketing [Infographic]_Humans are visual creatures -- so visual, in fact, that color plays a much bigger role in influencing what we purchase…_blog.hubspot.com

5. Feedback

In the context of interaction design, feedback means sending the information back to the user. The information is about what action has been done or what result has been accomplished. When you use a pencil to write something, it gives you feedback by leaving a mark on a paper. So pencils provide a good feedback to the user. Imagine writing with invisible ink — a bad experience.

Pencils are cool

Software should act more like a pencil — tell your user about the actions taken, results achieved or the number steps left to the end goal. Feedback could be grouped into three categories:

Responsiveness

If the button is clicked, it should visually change its state, as an indication that the action is acknowledged by the system. This gives a good feedback and prevents stacking of the same action repeatedly. And it’s not just buttons, any CTA-related action should be responsive.

Engagement

The visual effect engages the attention. It gives life to the static elements on the screen. A good example would be an animated chart change (when the data changes) or a button which is pulsing as an indication that the next step is unlocked.

Activity

Visual changes indicate that the underlying system is changing. Animation for its own sake can distract, but as part of the visual feedback can help explain how the system works. For example, loading wheel should be presented to the user while waiting, as an indication that something is happening. If the delay is longer than a couple of seconds, a progress bar is more effective, since the user would like to know how long will the action take.

Seven stages of action

As I said, software users expect some sort of help from the system. Human-computer interaction (HCI) has two aspects: execution and evaluation. In more details, users behavior can be summarized in these seven stages of action:

1. Forming the goal
2. Forming the intention
3. Specifying an action
4. Executing the action
5. Perceiving the state of the system
6. Interpreting the state of the system
7. Evaluating the outcome

Human-Computer Interaction

The techniques I’ve described here are tools which will help you design your software so that it navigates the user through these steps effortlessly. If you invest some time in thinking about the ways to apply these techniques to your software and information organization, I’m sure you’ll make a kick-ass product. Experiment, ask for feedback, do some A/B testing and have fun!

If you clap for a story once in a blue moon, consider clapping for this one.

Want to learn more?

Learn how to turn your idea into a successful business today.

This book offers you a comprehensive guide through the entire process of creating a successful business. It is designed to make your start much easier by laying out the entire business plan for you. The entire process is boiled down to its essentials, making the steps simple and easy to understand.

If you follow the formula which I reveal in this book, it’s very possible you can make a living by turning an idea into a successful business.

Treasure Roadmap — How to turn your idea into a successful business — Best Books For Entrepreneurs…_If you choose to follow the formula which I reveal in this book, it’s very possible you can make a living by turning an…_treasureroadmap.com

Get your free book summary by clicking on the image below: