Hover action on “Products” brings a menu with a list of options

Anger. Frustration. Confusion. The unavoidable outcome of a failed experience. One so easily prevented by the addition of a simple element: communication. Enter Jakob Nielsen’s first principle.

The premise of this principle is quite simple: for each change on the , an appropriate feedback should be given within a reasonable timeframe. What can trigger a change in the system then? It can be a few things: a user interaction with the system or an internal change within the backend system.

Basic User Interactions

The most common user interactions with an interface are mouse click and mouse hover. Through immediate feedback upon those actions, a user will feel more in control of the system. Knowing that it is indeed working will ultimately steer him in the right direction to accomplish its goal.

A working system can leave such feedback in many forms ranging from a success/failure message after a form submission to a color change when the mouse is hover a clickable element.

Many times this last one, but nonetheless important interaction is left forgotten. How often are you left to wonder what is the clickable area or if you’re hovering the right element? Some kind of visual feedback is especially important if you have elements close to each other and you want to make sure you will be clicking the right one.

Take the google page screenshot below as an example. Each time you hover the “Search” or “Feeling Lucky” buttons, you can immediately tell which button are you hovering over and its clickable area through a change in its visual display and text. The same happens when your mouse goes over the search field. It clearly displays that you are hovering it by seeming to “pop” more on the page.

As such, the lesson to take on this: for each clickable element add some kind of feedback on its hover state. Users will certainly appreciate it.

Now with a grasp on the basic concepts that involve the of system status, let’s try to use an existing website as a simple case study.

The Toy Store

Searching google for an example, I’ve used ‘toy store’ as the keyword and the second link on google’s results list brought me to this website. It turned out to be an appropriate case study since currently there’s no information to be found on the availability of each item they sell.

List of action figure toys — no reference to the availability of each toy.
Details on Dino Hunt Target Shooting Set — again, no signs of the availability of the item.

In my opinion, the availability of each item should be displayed right on the corresponding card on the list of results. That would avoid additional clicks, reducing the interaction cost and frustration levels for the user.

To wrap it up: lets be good to the user by informing him about the things he should know and spare him some unnecessary, additional mental effort.



Source link https://uxplanet.org/-usability--for--ux-1-visibility-of-system-status-ed04199df03f?source=rss—-819cc2aaeee0—4

LEAVE A REPLY

Please enter your comment!
Please enter your name here