Design Usability Tips – Taking Into Account the Users Logical Flow

A very basic but extremely vital part to web design is understanding your users’ logical thought process and flow. You want to take this into account as early as possible in your design phase so that you create a very familiar flow to the user.  Putting a link or information in the next logical place makes the process intuitive and thus, more likely will lead the user to convert.   The more familiar the flow, the less they have to figure out where to go which betters their chances of getting from their starting point to your ending point.  The your end-point could be them submitting your form or buying your product.

While missing this boat can make you question “Why isn’t my page converting?”, getting it right can change your page from an occasional “hit-or-miss” to a conversion machine.   In some cases, simply changing your design to make a button or link more intuitively available might end-up increasing your conversion rate by 100’s of percentage points.  That small design update just grew your business astronomically.

There are two main aspects when it comes to understanding logical user-flow:

1. User-interface and page yayout – actual elements of the page that the customer will be interacting with.
2. Site structure and navigation – how your pages are organized.

In this post, I’d like to go through the first item – UI and page layout.

User-Interface and Page Layout

As I said, it’s important to remember the way your user will interact with your page while designing your page layout.  Take into account your users’ natural reading pattern – which in the U.S.A is left to right, then top to bottom. Thus, the top-left-most content will be the first thing they see then and they’ll be moving in an “F” pattern down your page.

Here’s an example of a login form that does poorly at following user-flow:

Can you spot the issue here? ANSWER: The “Login” link is in a bad place (you see it at the top right).

1. A user will go to the “Customer ID” field and enter their ID.
2. Moving left to right, they will move on to enter their password.
3. Resetting now like a type-writer (I don’t know if people still remember those), the user will move to the “Language” field below.
4. Ok, now were ready to login. When I move down and to the left…where the heck did the “login” button go?

The placement of the login button is not in the next logical place, and not only breaks up the user flow, but is also hard to find (aside from the fact that it is not a clear clickable button).

Now this may not seem like a big deal here cause there’s not much going on in this form. But what happens when the form is longer down the page and they have to scroll back up to search for this login/submit link? Should we assume the user knows to do this?

No. You’ll be surprised the percentage of people clicking such a link decreases or increases based on simple logical placement of this button.  Remember, a as surfers, we do not want to think.  We do not want to search.  It is as easy for us to close the page, and move on to the next site in a blink of an eye.

Worse – let’s say this is a “Checkout Now” button and your site makes $10k a month in revenue on this product. If the placement of this button even affects conversion even  by 10%, that’s enough to make a difference.  Larger sites that make significant online revenue a month would be greatly impacted, where even a small percentage of decrease would hurt (or a small increase could pay-off big time).

In the case that you are a smaller/medium size online business, online conversion may be your businesses only means of survival, so a small design detail like this could even make or break your business.