1

I have a question regarding a quick help access. We are implementing an onboarding tool in a desktop (cloud based) app we have. This tool needs to have a quick help access in each page (help in context depending where you ate in the app). Now the usual position for that kind of help button is either a floating button or a tab stickes the the left side of the page, at the bottom right of the content.

We have old controls that we need to redesign as well including tables of 5 items with a scroll bar inside (I know it's aweful, I'm planning to implement something with a min of 10 option ans "next and previous" arrows to change pages) but in the meanwhile, that help hint button is covering some scrolls inside those tables.

Now first of all we transformed that tab into only a square with a question mark in the middle

So, few possibilities I would like to get feedback in: - we work with transparencies like 40% most of the time and have it only showing up 100% opacity when the mouse hovers it - or we have that tab showing up for fee sec each time the page is loaded and disappear on the side of the screen only showing a line and when the section is hovered it pops back in place so you can click it.

Thanks! the way it was

the way it is now but now so far

Improve this question
2
  • I don't quite understand, if you use 40% transparency for the button it still overlay the scrollbar right? So you can't use the scrollbar since the z-index is below the help button? If this button is a very important element in your app/page why don't you put it as a fixed element that doesn't affect any other element (e.g. material design circle button at bottom-left OR like tiny chat button like this )?
    – Dolorosa
    Jan 24, 2017 at 19:54
  • At the bottom left we have a left nav, can't put anything in there. The transparency is to get more the "floating button" effect without interfering too much with the content behind.
    – CDej
    Jan 24, 2017 at 19:57

1 Answer 1

Reset to default
1

I think the first option is better since a line (if you don't use icon or anything at collapsed state) can't represent a button or some section to be hovered at. If initially you show a small square button with icon like that, I think it looks kinda strange especially if you use larger screen, since fixed/floating button is usually larger to be a focus of a page or in a group like this.

Another visually simpler approach is you can hide the button if you are focusing on the scrolling element, and show it if you aren't. You don't have to use transparency on it. This method works best if the button never overlays the content (text) of the scrolling element.

Btw I think you use incorrect direction for vertical text, it is better if you use counter-clockwise direction. Check this out.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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