Successful UX Design — A short overview Design 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 technique often used to help maintain the focus of a user. This technique improves by reducing clutter, confusion and cognitive workload. design user experience Why is this important? According to Microsoft, people now generally , due to effects of highly digitalized lifestyle. As a reference, the average attention span for the notoriously ill-focused goldfish is nine seconds. So… lose focus after eight seconds You Now Have a Shorter Attention Span Than a Goldfish! The designer’s dilemma Users want both (more features) and . 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. complexity simplicity Simple as the concept may seem, there are when designing for progressive disclosure: two things you must get right . 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 . 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. Make the right split between initial and secondary features only on user’s demand 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. 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 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. Make it obvious how to progress to the secondary disclosure levels. expectations 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. is a psychology term which means “unified whole”. The principle attempts to describe how people tend to organize visual elements into or when certain principles are applied. These principles can be organized into three categories: Proximity, Similarity, Continuity. Gestalt groups unified wholes Proximity occurs when elements are , 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. Proximity placed close to each other Group elements with empty space and proximity principle. It declutters the view and gives more natural grouping. Similarity occurs when 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. Similarity objects look similar 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 occurs when the eye is compelled to one object and 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. Continuity move through continue 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 and 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. closure common fate 3. Perceived affordance is a term coined by Donald Norman as an uncountable noun, referring to the an object or system’s action , 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 vs. . Perceived affordance easy discoverability of possibilities what does it really do 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 vs. . what does it really do 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 the interactive elements on a screen, and the results of their interactions, . These expectations are based on 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. identify accurately predict the interface must work according to their expectations prior experience 4. 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. Call to action 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. _Humans are visual creatures -- so visual, in fact, that color plays a much bigger role in influencing what we purchase…_blog.hubspot.com Color Psychology in Marketing [Infographic] 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: and . In more details, users behavior can be summarized in these seven stages of action: execution evaluation Forming the goal Forming the intention Specifying an action Executing the action Perceiving the state of the system Interpreting the state of the system 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 . 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! effortlessly 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 for you. The entire process is boiled down to its essentials, making the steps simple and easy to understand. business plan 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 _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 Treasure Roadmap — How to turn your idea into a successful business — Best Books For Entrepreneurs… Get your free book summary by clicking on the image below:

Flow

Instantly

Microsoft

Progressive

How to validate an idea before you get emotionally attached to it?

Effective meetings. A myth or a reality?

Check out my productivity tools

Nominated for 2022 - HackerNoon Contributor of the Year - Agile Software Development

Nominated for 2022 - HackerNoon Contributor of the Year - Freelancing

Nominated for 2022 - HackerNoon Contributor of the Year - Project Management

Nominated for 2022 - HackerNoon Contributor of the Year - Communication

Nominated for 2022 - HackerNoon Contributor of the Year - Product Development

Too Long; Didn't Read

Boost your HackerNoon story @ $159.99! 🚀

DesignSuccessful UX Design — A short overview

DesignSuccessful UX Design — A short overview

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Agile35 cards which will improve your backlog refinement process and engage every team member

The 💩 Poop Emoji's 10th Anniversary

10 Year Challenge — How Popular Websites Have Changed In China.

10 ways how designing a chat bot is different from designing an app

10 Ways To Make Your Innovative, Game-Changing, Synergistic Website Stand Out In 2018

10 UX Tips To Create High-Performing Landing Pages

Agile35 cards which will improve your backlog refinement process and engage every team member

The 💩 Poop Emoji's 10th Anniversary

10 Year Challenge — How Popular Websites Have Changed In China.

10 ways how designing a chat bot is different from designing an app

10 Ways To Make Your Innovative, Game-Changing, Synergistic Website Stand Out In 2018

10 UX Tips To Create High-Performing Landing Pages

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps