DDevelopment & Design

Context menu or Action buttons ?

Recently I was drawn into one of those UI “religious” disputes that has no easy answers and usually both sides are right. One of our web developers was trying out new web tech (with pretty rich widget library) and started to question himself about some basic usability decisions. The low level problem in this case is usually brought to “which widget should I use ?”. I’m not fond of bringing the usability problems to questions: Should I use Tabs over Menu ? Or should I use Context menu instead of buttons panel ? But sometimes if time is crucial factor and other usability levels are by default not addressed at all – better developer that asks those basic questions than developer that do not question himself at all.

Recently I was drawn into one of those UI “religious” disputes that has no easy answers and usually both sides are right. One of our web developers was trying out new web tech (with pretty rich widget library) and started to question himself about some basic usability decisions. The low level problem in this case is usually brought to “which widget should I use ?”. I’m not fond of bringing the usability problems to questions: Should I use Tabs over Menu ? Or should I use Context menu instead of buttons panel ? But sometimes if time is crucial factor and other usability levels are by default not addressed at all – better developer that asks those basic questions than developer that do not question himself at all. One of often “problematic” choice that is bring up by web developers is should user launch actions on selected objects (one of many or some of many) by “Context menu” or “Action buttons”. Basic example is shown below and it is usually a table or list of components that has some defined actions (i.e. on table where rows are single orders change status of selected order would be on of possible actions). Of course there are many other solutions that can be implemented (some actions can be handled directly in table row or cell) but narrowing choice to those two was subject of mentioned discussion. During those hot and fast discussions I wasn’t able to point out pros and cons of both solution that’s why I decided to grab them all in this one short post. I hope it will be helpful for same lone developers that thirstily look for best practise or choice while the answer is usually much contextual…

Action button panel

example_view_1

(plus) Pros

  • Clear indication of where and how many actions you can apply to selected row (or other selected object)
  • If action panel is visible all the time theme has expectable behaviour (at least if you are consistent at where you position your action panel)
  • Accessible solution on most mediums (mouse, touch screens, other pointing devices), panel can be bookmarked to be heard on reading devices
  • Action panel can be combined with Details panel (if there is enough space)
  • Actions can be described very precisely

(minus) Cons

  • Space consumption, even if some actions can be hidden under “Advanced” button, this design is always more “stuffed”
  • Can generate (sometimes really long) extra mouse moves and additional clicks
  • Keyboard support may be difficult if rows or selected widgets also use navigations buttons (tab key, arrows etc.)

Context menu

{#Test-Contextmenu}

example_view_2

(plus) Pros

  • If you stick to short action names space consumption is minimal and since it’s used only during action selection it’s also less perceptible
  • Much faster if you use mouse or keyboard (with context menu shortcut / button)
  • Actions can be organised in tree like hierarchy which can be navigated (expanded) with minimal mouse moves and no additional mouse clicks
  • Nicely combines with drag&drop or multi record actions

(minus) Cons

  • Since context menu is invisible until explicitly called some people may not be aware that there are any actions available on selected objects
  • Poor support on some touch pads or touch screens, problematic support on screen readers
  • If used in web applications it overrides default browser context menu which can be a nuisance for some users

Why not both ?

{#Test-Whynotboth%3F}

example_view_3

(plus) Pros

  • Beginners has clear indication of where and what actions are available on selected objects
  • Advanced users can use faster context menu approach, that do not confuse beginners (they still has their action buttons)
  • Action buttons panel can be compressed to minimum, only to show most important actions (other actions can be hidden under “Advanced” button)
  • Action panel can be combined with Details panel, since action buttons would be minimal, there should be more space for details
  • Hide action panel option if workspace size is crucial (i.e. some clients has limited screen size) and users are aware of context menu

(minus) Cons

  • Initially you still loose some fix space
  • Redundancy may be confusing for some users (although this con is questionable – unaware beginners do not see any redundancy, advanced users can hide action panel if it REALLY bothers them)

Summary Choice between Context menu or Action buttons panel is pretty contextual and “right” choice strongly depends on supported media and user group. However there is pretty good “mix” solution that gives more pros than cons (unless redundancy is big problem for you) and will satisfy unaware beginners and users that strives for fast actions. If you come to mentioned choice, always give a chance to “why not both ?” scenario.

— Previous article

Log4j and MDC in Grails

Next article —

Piotr Burdyło o Agile nie tylko w IT

You May Also Like
DDevelopment & Design

OSGi Blueprint visualization

What is blueprint?Blueprint is a dependency injection framework for OSGi bundles. It could be written by hand or generated using Blueprint Maven Plugin. Blueprint file is only an XML describing beans, services and references. Each OSGi bundle could hav...
DDevelopment & Design

Sample for lift-ng: Micro-burn 1.0.0 released

During a last few evenings in my free time I've worked on mini-application called micro-burn. The idea of it appear from work with Agile Jira in our commercial project. This is a great tool for agile projects management. It has inline tasks edition, drag & drop board, reports and many more, but it also have a few drawbacks that turn down our team motivation.

Motivation

From time to time our sprints scope is changing. It is not a big deal because we are trying to be agile :-) but Jira's burndowchart in this situation draw a peek. Because in fact that chart shows scope changes not a real burndown. It means, that chart cannot break down an x-axis if we really do more than we were planned – it always stop on at most zero.

Also for better progress monitoring we've started to split our user stories to technical tasks and estimating them. Original burndowchart doesn't show points from technical tasks. I can find motivation of this – user story almost finished isn't finished at all until user can use it. But in the other hand, if we know which tasks is problematic we can do some teamwork to move it on.

So I realize that it is a good opportunity to try some new approaches and tools.

Tools

I've started with lift framework. In the World of Single Page Applications, this framework has more than simple interface for serving REST services. It comes with awesome Comet support. Comet is a replacement for WebSockets that run on all browsers. It supports long polling and transparent fallback to short polling if limit of client connections exceed. In backend you can handle pushes in CometActor. For further reading take a look at Roundtrip promises

But lift framework is also a kind of framework of frameworks. You can handle own abstraction of CometActors and push to client javascript that shorten up your way from server to client. So it was the trigger for author of lift-ng to make a lift with Angular integration that is build on top of lift. It provides AngularActors from which you can emit/broadcast events to scope of controller. NgModelBinders that synchronize your backend model with client scope in a few lines! I've used them to send project state (all sprints and thier details) to client and notify him about scrum board changes. My actor doing all of this hard work looks pretty small:

Lift-ng also provides factories for creating of Angular services. Services could respond with futures that are transformed to Angular promises in-fly. This is all what was need to serve sprint history:

And on the client side - use of service:


In my opinion this two frameworks gives a huge boost in developing of web applications. You have the power of strongly typing with Scala, you can design your domain on Actors and all of this with simplicity of node.js – lack of json trasforming boilerplate and dynamic application reload.

DDD + Event Sourcing

I've also tried a few fresh approaches to DDD. I've organize domain objects in actors. There are SprintActors with encapsulate sprint aggregate root. Task changes are stored as events which are computed as a difference between two boards states. When it should be provided a history of sprint, next board states are computed from initial state and sequence of events. So I realize that the best way to keep this kind of event sourcing approach tested is to make random tests. This is a test doing random changes at board, calculating events and checking if initial state + events is equals to previously created state:



First look

Screenshot of first version:


If you want to look at this closer, check the source code or download ready to run fatjar on github.During a last few evenings in my free time I've worked on mini-application called micro-burn. The idea of it appear from work with Agile Jira in our commercial project. This is a great tool for agile projects management. It has inline tasks edition, drag & drop board, reports and many more, but it also have a few drawbacks that turn down our team motivation.