Zoho CRM User Experience & Interaction Design Blog

Generally I feel that deciding goals like “minimum mouse clicks” or “optimal mouse clicks” relates to the user base. Novice and Experts. Adhering strictly to minimum mouse clicks may sometime back-fire, when the intended users are beginners or novices. Here is my theory about when to opt Minimum mouse clicks / optimum mouse clicks.

In Navigation: When do you navigate? To reach a particular destination. In software, you navigate to reach a particular screen / user interface. A long or time-consuming navigation irritates the user. Critical applications like network monitoring apps, helpdesk apps or security apps should feature navigation which helps the user to reach any user interface within a few clicks. So for navigation you should set the goal for minimum clicks.

In Tasks : Doing a task involves little care, so that you can avoid mistakes or confusions. You can find some User interfaces which throws all options and information in a single page claiming that it is “usable” or adheres to usability. It is agreeable, for experts. But for novices? No they will feel they are bombarded or they will get scared looking at so much settings/options/information within a single page.

Performing a task should have two type of navigations. Expert mode and Novice mode.

In expert mode, all options/settings/information can be dumped in single page/user interface. Because experts are experts.. they hate wasting time navigating through pages.

In Novice mode, the options should be categorized and presented in a few screens/user interface which is generally called as “Wizard” UI. New users always love if they get some help when doing the tasks. Wizard UIs help in such cases. So to perform tasks, opt for the Optimal mouse click goal for novice mode, and opt for the Minimum mouse click goal for expert mode .

- Rajesh Sundaram

Wide Screen Monitors are gaining more and more penetration and popularity. Websites, once sticked to the golden mean ratio (4:3) are now tweaking their UI, such that the site looks best in wide screen ratios as well. Designing a UI for wide screen monitor requires careful analysis. The simple rule of thumb is position your entire UI to the center . If possible fill the background with a texture or a very light color. Some designers perfer to leave it as it is.

Liquid Layout
(a.k.a Flexi-layout a.k.a Elastic Layout)

Liquid Layout may fit good for resolutions less than 1200px width. But beyond that, it will create accessibility problems. If you position a “Save” button to the right, then in the wide screen liquid layout, the “Save” button will appear to the extreme right creating accessibility problem. The better solution is… move all your frequently accessed UI elements to the middle-left or center. Placing the buttons should be carefully decided based upon the interaction with the UI.

Liquid Layout in a Wide Screen display

Compact-Widescreen Layout in a widescreen display

This is one solution for wide-screen layout problems. The image is self-explanatory. The idea is to fix the interacting user interface with a fixed width or proportionate width to the center or off-center (depending on your layout).  Place the buttons to the middle.

As told, there are no rules. Deciding the best layout depends on the UI and the interaction required. Try two or three layouts and find out the best result.

More on this topic later..

- Rajesh Sundaram