Negative vs Positive Actions

One of the most confusing and mind-boggling tasks when infusing your UI design with UX concepts is understanding the distribution of elements on your screens. It is not as easy as just stacking things one after another. This becomes even more daunting when deciding where buttons should be placed and how to group them together. This varies for many designs when left-aligning, right-aligning, or centering the button area. And this causes no positive or negative effect on user experience. It is the individual buttons that you need to worry about.

Here are some examples of the alignment I am referring to.

Neither of the examples above is inherently right or wrong. The grouping is a design preference that usually would have to be determined by the rest of the design and consistency in mind. However, if you pay close attention, all examples above follow a couple of rules that are crucial to user experience and minimizing accidental clicks or user error. Let's dig into that a little more.

Color

Colors have more meaning and use that one is willing to believe. These colors are: primary, secondary, green, yellow, and red. The primary and secondary colors are previously set by the design, and they are used ambiguously to defer importance to an action that is neither positive nor negative. In other words, neither one of the buttons would destroy any data, but utilizing the primary and secondary color adds aesthetics to the design and separation of concerns when interacting with the UI. Let's examine the following example.

Neither the “view” nor “open” button destroy, produce, or modify any data in the UI. They are essentially harmless actions. The difference in color helps the user, intuitively, detect separate actions that could happen depending on which button is clicked or tapped.

Moreover, the green, yellow, and red colors have a bit more meaning behind them. Most of these uses are Green for success, Yellow for warnings, and Red for dangerous actions. I believe it is important to make these distinctions very clear and evident to the users so that their brain responds to the colors before they even click on it and an alert message is provided to tell them they are doing something good or bad. It saves them the trouble to have to deal with an alert and act more preemptively with the UI. A good rule of thumb is to assign red to all destructive actions and green to all actions that have produced a successful submission to the server (i.e. email, item added, purchase completed, payment sent, etc.)

Action Distribution

And this is where it gets tricky. As a user experience designer, your job is to hack the mind of a user. This means you must understand the natural behaviors and expectations of each persona and environment the application will be used in. For example, let’s say your client is hiring you to build an application that will be used for data entry. Some things will be reviewed, some will be added, and some will be removed. It will be almost catastrophic to mix those actions and consequently, add more workload for the user. It is important to separate these actions so that the user would have to intentionally choose one or the other, not by accident, but by complete awareness of what they are trying to achieve. Because of this, I tend to use the alignment example #3 listed above. Certainly, you are free to use whichever design you prefer, but the reason I use #3 is mouse travel. By forcing the user to travel across the screen to select one action or the other, I am preserving the integrity of the data and adding more meaning to the click. It reduces the chances of a user accidentally clicking on the wrong button because they were too close.

As a personal rule, I group all the negative actions on the left side of the screen and all the positive actions on the right side. If you need a list of what these actions are or can be, these are some I can think of and are used most often.

Negative Actions* - Cancel, Delete, Remove, Back/Previous, Close, Deactivate

Positive Actions - Enter, Submit, Add, Next, Open, Activate

*Note: Not every negative action has to be a red or yellow color. If they do not destruct data, they can simply use a secondary color instead

Conclusion

To conclude, assume your users are not familiar with your UI and actions that need to take place. Assume your user is distracted or tired. Whenever you are designing with UX in mind, you must reduce the amount of thinking your users will have to do to interact with your design. The last thing you probably want to allow or facilitate is the ability for a tired user on his first cup of coffee on Monday morning to click on Add, Add, Add, and an accidental Remove. These two actions should never be in the same place the mouse is when the screen changes. In fact, they should be as far as possible from each other. Requiring the user to travel the mouse to an area to remove or destruct data is a great way to make sure the user meant to do just that!