Behind the scenes: RSuite 4’s Action-based Interface

Posted by Christopher Hill on Jan 9, 2014 9:00:00 AM

In the coming months, I’ll periodically be writing a bit about the design of RSuite 4. It has been very exciting to see the effort and thought we put in to the user experience translating into a much improved experience for our users.  

RSuite 4: Unnaturally Natural By Design

Many of our new customers starting out with RSuite 4 may not be aware of the effort required to put together such a natural design. It’s easy to forget that thousands of hours of thought, design, and refinement by many people are usually behind those interfaces that seem so effortless. Starting now and for several months I will be periodically posting this series of behind-the-scenes discussion of RSuite 4. Along the way you will have the opportunity to get a taste of some of the major challenges and opportunities when designing software user interfaces.

Indirect Action Traps Unsuspecting Users

Traditional content and asset management users might click on an image then scoot up to a toolbar or some menu to conduct an action.  You might find the preview button on the toolbar. Click it and the selected image is previewed for you.

This works fine if users operate with a clear understanding of what item they have selected as well as an action’s area of effect. Accidentally clicking the mouse or forgetting about a change of selection and users may find they've acted on the wrong item. With each mistake an inexperienced user’s confidence is eroded, often snowballing into more errors. Not only are inexperienced users struggling to get their work done, now they have to undo their mistakes. If they can find them...

Look at the RSuite 3 screenshot. The selected item is clearly identified with the orange highlighting. Bump the scroller on your mouse, however, and that orange item can slide out of view. The toolbar, though, remains visible and is still ready to act on the now-unseen item. If you are sure that the now-hidden item you want to act on is still selected then you can click the toolbar. Most users lack this surety and instead have to scroll around until they can double-check that the right item is still selected. 

RSuite 3 - a traditional design

After observing many types of users repeat such behaviors in a wide range of software applications, I suspect that users have become resigned to these error-prone designs. They aren't aware that this checking and double-checking is time consuming and directly impeding their ability to get work done.

Context Menus: A Step In The Right Direction

In the mid-90s mainstream computer software adopted context menus, menus accessed by right-clicking an item and selecting an action to take from a flat list of menu items. Context menus had the advantage of providing users a direct action interface. Right click an item and a list of actions relevant to that item are displayed. It was definitely a step in the right direction. Web applications like RSuite 3 typically offer context menus.

Context menus were great for users who figured out how to right-click something provided the action you wanted to take was present in the menu that appeared. But the flat menu design of context menus generally lacks the density of functionality of buttons on a toolbar. So the compromise of context menus is that some subset of available actions appear in the context menu.

A Context Menu or Scavanger Hunt

Most interfaces ended up with many actions available only in the toolbar or some traditional menu structure. It is common to also find a few actions that are only available in the context menu. There also might be additional menus hiding somewhere with the action we need. Inexperienced users struggle to memorize the interface or become a highly practiced scavenger hunters as they try to get their work done.

A careful UI designer will go to great lengths to design some logic into the interface to explain why some actions are in toolbars, others menus and still other in context menus. Unfortunately understanding the design logic usually requires a solid understanding of the application. So users who could be greatly helped if they could more easily act within the application lack the level of understanding of the software needed to interpret the design logic. 

Extensibility Is A Design Challenge

RSuite’s renowned extensibility usually requires integrators find places to extend the UI in order to interact with the user. Should I put a new button in the toolbar? In the context menu? Add to some existing menu? Or look somewhere else? Or maybe put it everywhere? Instead of focusing on the actual business goals, most traditional UI designs bog integrators down in decision-making, UI coding activities and design tasks that are not productive or efficient uses of their time.

In spite of an integrator’s best intention and effort, traditional integration projects can end up producing customized applications that feel more like trying to land a 1974 jumbo jet for the first time rather than doing my actual job. While it is easy to blame the integration team, sometimes you might find that traditional software design and integration points are complicit in the ineffective result.

747 cockpit

RSuite 4: Consistent, Direct, Logical

RSuite 4 uses a direct action-based interface revealed by left-clicking on an item. Long toolbars filled with inscrutable icons are no longer present. Traditional menus are reserved for a few special cases. If a user wants to know what actions are available on any item in RSuite 4, just click it. Every available action for the item they click on is displayed clearly in an action menu.

RSuite 4 interface example resized 600

Want to act on an image? Click it. A menu with icons and text clearly communicate all of the actions you can take. This simple approach means that no experience is necessary to discover what actions are available. Over time, as your implementation changes, users only have to understand the changes to the business-specific actions available. The UI remans consistent. 

Integrators have a clear, consistent design language for any extensions they care to add to RSuite. The application’s logical design greatly reduces the effort required for most common integration tasks. Adding to or removing from an action menu doesn't require any complex Javascript or other UI coding.

Would You Like To Know More?

With RSuite 4 we have worked hard to remove barriers that are still far too common in business applications. If your interested in seeing more check out our online video tour or visit our website to contact us for a demonstration.

Topics: RSuite 4, software design, behind the scenes

Comment below