Minimize the "Hand Energy"

Throughout the years, the trends for UI/UX designs kept changing. But there’s one thing that you should remember when it comes to UI/UX design - the principles behind it never change despite the current trend. These principles are timeless and everlasting so you must always remember why you do what you do in UI/UX design.

The goal of UI/UX design is to identify and fulfill the user's needs, wants, pain points, values, background, goals, and limitations. In this lesson, you will learn about the three of the most important laws of UI/UX design and the different techniques on how to apply them to follow the eternal principles of UI/UX design.

One of the most important principles of UI/UX design is to focus on the user. That said, you don't want your users to feel lost, confused, anxious, impatient, or frustrated while they're on your website. You don’t want to make them feel that they’ve wasted their time. You want them to know that you have what they’re looking for and that they can get it easily and quickly. One of the ways you can achieve that is to minimize what we call the “hand energy”.

What is “hand energy”?

Aside from minimizing clicks, minimizing hand energy also means to minimize the number of keyboard strokes and reducing the amount the users need to move their mouse to complete an action on your page. There are two techniques that we will teach you to minimize the hand energy: Less Clicks, and Hierarchy and Clustering of Elements.

1. Less Clicks

When it comes to user experience, you have to remember that every click matters. As a designer, you want your intentions and instructions to be simple, direct, and clear. You don’t want your users to think what their next step should be or where they should go next. You should lead them directly to the page they want to go.

Think about it this way. Imagine going to an unfamiliar place with no map and all you can see are road signs that say this way, that way, and another way without knowing where it would lead you. You try following one road and find out later it’s the wrong way and you have to go back to try the other roads. How would you feel?

It’s the same when it comes to user experience. You make sure that you are guiding them in the right direction so they won’t feel lost and confused.

So here’s an example of a sign up form. In order to sign up, the user has to move their mouse, click on the CTA to sign up from the webpage and then once the sign up form is displayed, the user has to move the mouse again to click on the First Name field, type the name, click on the Last name field, type the name, and then click every textbox to progress. Pressing the ‘tab’ key doesn’t allow the user to move from one field to the next and pressing ‘Enter’ doesn’t automatically submit the form. Then, they also have to click on the Sign Up CTA in order to complete the registration. Too much work, right? So, what are we going to do to make it easier for the user?

Here’s what we can do to improve the UX. Once the signup page is displayed, the first name textbox should be automatically selected so the user doesn’t have to move the mouse and click but simply type right away. Make it so the user can just press the ‘Tab’ key to proceed from one field to the next and then finally press ‘Enter’ to automatically submit the form to complete the registration. See how much easier it would be for the user to complete registration?

Now, contemplate how and why the second example is much better than the first one. What made the difference? To do this, compare the amount of effort needed (hand energy) to do the desired action of the user.

Again, you should always remember that you don’t only want to lessen the click but also the amount of time the users have to move their mouse and keyboard stroke. Think of ways on how to make the experience easier for the users. Positive user experience is equal to loyal users.

2. Hierarchy & Clustering of Elements Hierarchy

Hierarchy and clustering of elements refers to identifying connected/related features and organizing their elements according to their hierarchy. It plays a key role in helping users to easily navigate through your webpage as it can drastically reduce the amount of energy(both hand and eye energy) needed to engage with your product. UX design is about consistently enhancing usability for your product and removing friction. Paying attention to hierarchy and clustering of elements is the best way to do this.

Your aim should be for harmony and simplicity. You want to simplify the user's perception. You need to group things and categorize elements in order for the users to be able to see the big picture.

Below are some good and bad examples of Hierarchy and Clustering of Elements.

1. Continuity

Overlap a design element to emphasize continuity so users know these elements are related/connected to each other.

2. Single-column Layout

A single-column layout helps users keep their focus on the important elements and avoid distraction.

3. Categorization

Determine and hide infrequent but necessary settings, features, and information to avoid overwhelming the users.

4. Proximity

If you are creating a webpage for online shopping, always include important data on product listing pages.

When it comes to hierarchy and clustering of elements, always remember that your goal is to establish what are the most important elements in your design to help users see them immediately, thus helping them to take the required course of action.