2

Current Situation:
In our SaaS solution for portfolio management we have several actions that are context dependent, e.g. delete a project. Those actions can be found on the element itself, e.g. the project in the projectlist on the left.
At the moment all context dependent actions can be accessed with a right click.

Problem:
The user doesn't see that there are actions due to the missing affordance. Furthermore, a rightclick is very unusual for web applications.

Therefore I want to use a visual indicator, e.g. the well known three dots for "more". But do you have any idea how to indicate the action menu on items like the gantt bar?
The challenge: the action menu is sensible to the mouse cursor.

For further explanation, see my attached image. enter image description here

1

You're right in saying the right click is unusual for web applications, although they are becoming more common. The lack of affordance would be a worry.

At this time, does the gantt bar have a left click state? It's difficult to plainly point to a single solution, because there are no clear conventions when it comes to these kinds of charts in a web environment.

There are some interesting articles with solutions for designing better data tables that might inspire you:
https://uxdesign.cc/design-better-data-tables-4ecc99d23356

I'm sure you've already implemented some of these solutions, but it might be worth considering things like the hover actions that they mention:

Hover Actions

enter image description here

Presenting additional action when a user hovers reduces visual clutter. However, it can cause discoverability issues because the user needs to interact with the table to expose the presentation of actions.


Data and tables (especially high density ones like gantt charts) are tough UX. It might just be best to try multiple options and split test them.

  • This gif is a good inspiration, it would also be possible for OP to make just the 3 dots appear on hover instead of the single actions (because there are more than 3) – Big_Chair Jan 29 '18 at 13:56
  • You absolutely can. That way you would make sure to get a good real-estate/affordance ratio, since you'd still be following conventions. – kn03i Jan 29 '18 at 14:27
  • Thanks for your answers. We already use hover states for context dependent actions, e.g. in the project list on the left. The gantt chart has an action on the left click state, that is selection. But I don't get it how to use this on gantt charts...Where should I place the hover item? To clarify: the gantt chart can also include milestones on the chart. – sli Jan 29 '18 at 14:54
0

See the example with the hover "more"-element that you suggested enter image description here

0

I am thinking of Inkscape here, but there are other examples, like a file explorer.

The basic idea is that selecting (clicking on) an element in a ‘working area’ (shapes in a drawing, bars in a chart) does two things:

  1. It selects the element
  2. It shows or populates a menu somewhere outside the chart/drawing/list

The menu might be a toolbar, or a horizontal list of actions. And it does not clutter the chart, or show things that you do not want to see when all you want to do is select a bar.

In your situation, you might want to show the location of the click with a little arrow (which is draggable?) - if I understand the Split here action correctly.

Also, a click instead of a hover has the advantage of working the same way on a touch screen.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.