Give Me Space (and quit moving)

Have you ever tried to thread string through the eye of a needle without using one of the needle threader tools? After getting the right color thread and a needle appropriate for the fabric, you try to get that little piece of thread through that tiny eye. There are many variables that seem to stack up against you when trying to accomplish this. 

You prepare the end of the thread. Getting it slightly wet so that it will be stiffer than it's dry state. In one hand, you have pinched the thread between two fingers near its end. The other hand holding the needle with the eye primed in the position to insert the thread. You move your thread hand closer to the eye. Aiming to get the small tip to line up with the eye. As the thread approaches, fractions of an inch away, the thread bends as is by some invisible force field blocking entry into the needles eye. You bring the end of the thread closer to your eye only to see a small errant fiber attached. You again re-wet the end of the thread squeezing the end to try to make it straight hopefully removing the errant fiber in the process.  You try again only to find the angle of entry was off as the thread was not approaching the eye opening at a perpendicular angle. Restarting the process, you try not to get frustrated. After repeated attempts you get that needle threaded.

Now, imagine what that would be like if you didn't have clearest vision. Or, your hands were shaky and did not have great fine motor control. Parallels between threading a needle and website usability can easily be made.

Motor Control Challenges

If somebody has motor control challenges they can find it difficult to be able to use certain form controls such as clicking check boxes, getting a slider to the correct position, or making a selection from a group of radio buttons.  Outside of forms, elements like buttons may be too small to easily click on. 

One of my pet peeves is navigation controls that automatically expand or contract based on the position of the mouse pointer. If the mouse is over the menu item, it expands. If you move the mouse off the control, it goes away. As a user who does not have motor control challenges, I find this particularly frustrating when there are multiple levels to the navigation control. It can be even more frustrating for users who have those challenges. Some navigation controls are so inaccessible, they effectively put up a barrier that prevents users from accessing the content. Which is totally contradictory to what navigation controls are intended to accomplish.

How to fix

There are a few things that can be done to make sure the content is accessible to users of your website - regardless of ability.

Form Fixes

Sizing

One of the first things to do is ensure that the form elements you have are of sufficient size where precision of mouse movement is not required. The form elements do not need to be tiny. Not only from an accessibility standpoint but a usability standpoint as well.  Forms that have elements that are larger are typically more inviting for users to complete than the forms where the fields are small.

Spacing

Give your form elements some breathing room.  Check boxes and radio buttons should not be stacked where they are touching each other. Drop-down menus should have sufficient padding around them to prevent miss-clicks into other elements. Like noted above, forms that have a balanced use of white space are more usable than compacted forms.

Alternate Entry

Some form fields - range sliders, particularly - should have a corresponding text box that accepts entry of a value in addition to the value that would be assigned by the sliding of the control.  How many times have you seen a slider where you were trying to get a particular value, say 60, and you get that value to show up but as soon as you release the mouse button, the value changes to 61. Trying again, you end up with 59. Uggh! Make sure users can either type or dictate with their voice the precise value. Alternatively, if precision is not required, consider a Likert scale instead.

Navigation Menus

How your website navigation is, in part, dictated by your website structure. If you have a website structure with a lot of depth or a wide breadth of topic areas, you need to ensure users can get to the right information quickly. Therefore, you need an efficient navigation structure.

Within three or four clicks

Many subscribe to the principle that, once a user comes to your home page, they should be able to get to the content they are looking for within three or four clicks. Some web designers have taken this a step further where a user can get to the content they are looking for within three or four clicks regardless of the page the enter your site on. Some web designers have adopted the use of multi-level drop-down navigation menus to achieve this principle.

Multi-level drop-down navigation

If this is the type of navigation you are considering to add to your website, the first suggestion would be to reconsider. Unless your website has the breadth and depth of Amazon, you could likely simplify the navigation structure and still achieve the three to four click principle. 

A side note... Consider studying the navigation of sites such as Amazon or Apple.  Both of these companies follow very closely the three to four click principle. The primary navigation at the top of the page takes you to specific areas where you can branch out further.  From their respective home pages, you can, for example, get to the product page to purchase a pair of Apple AirPods Pro in three to four clicks.

If you decide to use a multi-level drop-down type navigation, be sure to have the navigation appear or disappear based on click events. All users benefit from these types of menus that do not appear/disappear based on the position of the mouse. For all users, the slightest movement off the menu area can put them in a position of having to start again to get back to the link they are trying to click on. If a user has motor control issues, menus that appear/disappear based on mouse movement can be a barrier to accessing the content.

Primary vs Subsequent Navigation

Another thing to take into consideration is only having those navigation areas that are the primary focus of site users to be at the top of the page and all other non-primary navigation to be placed in the footer of the page. You can repeat the primary navigation links in the footer as well as the non-primary links. The links that are found in the footer should be grouped into logical areas. Again, refer to Amazon or Apple and scroll down to the bottom of the page to see examples.

In Summary

Overall, the idea is to make it so your website is usable by visitors. Use white space to give the elements on your page some breathing room. Keep navigation simplified and click-based instead of relying on mouse position to display or hide menus. Users who have motor control challenges will be appreciative that your site was designed to be usable. Additionally, users who may not have the same challenges will appreciate improving the usability of your site.