6

How can I indicate in a web app that you can right click?

over 6 years ago from , Nostalgia Maker

So I'm working on an experimental web app, and it's UI is verry content heavy. Think more like Microsoft word / excel, less like facebook. Almost everything you can read you can edit. It's designed for desktop, so mobile isn't a forethought.

Right clicking is a fantastic UI solution, and works well for my context. However, how can I hint to the user that they can right click, and where they can right click? Web apps have almost never been designed with right click contextual menus in mind.

Current ideas are -

  1. Cover it in the onboarding.
  2. Some sort of alternative cursor style to show that a field has more options. Breaks convention hard, however would be functional.
  3. Just don't tell the user, and hope they find it. It appears google docs / sheets goes for this strategy.

Any other options I have't considered?

11 comments

  • Jack Marks-ThomasJack Marks-Thomas, over 6 years ago

    How about a talking paperclip?

    24 points
  • Nathan GathrightNathan Gathright, over 6 years ago

    Dropbox also has a good solution to this: http://www.nathang.co/2P2i1m423r2P

    They expose the actions another way, (replacing the column headers with the secondary actions when a user selects a row), but also expose them in a right-click context menu for faster access.

    4 points
  • iterati designiterati design, over 6 years ago

    Don't use right-click as the primary way to do things, it can only be considered secondary and as a shortcut.

    What we're talking about here is a contextual-menu, which could be exposed via a dropdown arrow, three-dots (android) or like Nathan showed with Dropbox. Once that works, you could use right-click as a shortcut for power users.

    In practice, though, the number of power-users is relatively small, but that's a topic for a separate discussion.

    1 point
    • Alex HoffmanAlex Hoffman, over 6 years ago

      Agreed, I think one thing about dropbox too is that we as users are already used to being able to right click on folders, depending on what they're right clicking, they may never even consider the possibility

      1 point
    • Eliot SlevinEliot Slevin, over 6 years ago

      Yeah, it wouldn't be the primary way of interacting, definitely for secondary actions.

      Its a system for editing of medical records, to be used by GPs in primary care. So it's used by doctors, who have to use it at least 3 times an hour, 5 days a week, in their office, at their desk - so I feel shortcuts are very appreciated in this case.

      0 points
      • Beni GartenmannBeni Gartenmann, over 6 years ago

        We worked on an app for doctors in my previous company, too. What we learned is, that doctors often are power user. And that it's critical to them to work fast and efficiently. So they preferred keyboard shortcuts, this way they didn't have to reach for the mouse. Maybe this is an alternative to consider? Of course this needs to be explained in a way too. Cover it in onboarding and also provide an in-app "cheatsheet" for keyboard shortcuts could be the best solution for that. Hope this helps!

        1 point
  • Alex Hazel, over 6 years ago

    Online help and onboarding is your best bet here. I have struggled with this same concept in the web app that I have been designing. If your UI is already complex, adding more noise to the screen to indicate a right click isn't the best solution. Right click is a non-standard interaction on the web. Users won't expect it. So I think it really comes down to user education since there is no good standard icon or interaction method that online users understand at a global level.

    Also, right click is only for desktop users. What is your touch screen interaction for the right click going to be? What is the point of being on the web if your app is only targeting the desktop? So make sure to think about touch devices as well!

    1 point
    • Eliot SlevinEliot Slevin, over 6 years ago

      It's for doctors - its a system for editing of medical records. So they're using it like 20 times a working day, in their office, at their desk. It's a web app, but most regular users would actually be using it wrapped up as an electron desktop app - so right click would feel more at home there. But it's still accessible through a web browser, so a UI solution is needed.

      0 points
      • Alex Hazel, over 6 years ago

        I work with physicians almost daily designing medical software for the Ambulatory, Acute, and ED environments. Remember, for doctors, the technology comes second to their practice. Many of them are completely unaware of basic UI paradigms that we take for granted. The more you try to leverage their understanding of technology, the harder it will be for them to understand your software.

        Like I said in my last comment, there is no universally accepted UI treatment to tell users that something has a right click attached to it. So, your visual cue will need to be unique to your software and your users will need to be trained on it. (preferably with some sort of onboarding and if they forget, accessible later through online help)

        And since you are targeting desktop users and don't need to worry about touch devices then I would try to leverage the "hover tooltip" to display helpful contextual information to help them discover the right click functionality (or remind them about it)

        But all solutions should be tested and vetted with real users. Try to get feedback from early adopters or beta users. Only they can tell you if your solution is successful or not. And they will have helpful feedback about changes you can make so that it makes more sense to the way they they think.

        Good luck! And let me know if you come up with something good! Because I have yet to solve this right click problem for our software aside from teaching users about it through training.

        1 point
  • Ale UrrutiaAle Urrutia, over 6 years ago

    You could test a few different options and see the results.

    Right click/context menu is part of the UI of every web browser so won't be strange to your users, the challenge will be to let them know that you will be replacing the browser contextual menu with your own. Dropbox's solution, mentioned by Nathan, is a good way to show an alternative to not visible option.

    Onboarding/tutorial would be my choice.

    0 points