1

How should I create click to jump to parts of a file in the scrollbar. I have limited space, so I would like to overlay this with the scrollbar.

I was thinking of something like

mockup

download bmml source – Wireframes created with Balsamiq Mockups

It would go in a code editor for relative beginners. The sections are parts of the code. For instance:

E.flagClicked: # section start
    L.think("ladida")
    ...
E.keyPressed("space"): # section start
    M.move(10)
    L.say("Hi")
    ...

EDIT: I know how to implement, I want to know if my mockup makes sense UX wise and how I could improve the UX to make it easier for new users to learn that they can click and jump.

  • I'm voting to close this question as off-topic because, as written, it appears you are seeking help on implementation. If this is the case, stackoverflow.com is the appropriate SE site. – Evil Closet Monkey Jun 8 '15 at 22:55
  • @EvilClosetMonkey Sorry, that would be a clarification error. I know how to implement, I want to know if my mockup makes sense UX wise and how I could improve the UX to make it easier for new users to learn that they can click and jump. – Daniel F Jun 8 '15 at 22:57
  • My mistake. Vote retracted. – Evil Closet Monkey Jun 8 '15 at 22:59
1

It can work but it has some issues

...so make sure there is a tutorial or a label to show the user how this works. For example, if the user hovers over the yellow part, you might include a tooltip that says Jump to code example C, for example.

Note that a similar approach is used in browser and other apps...here is how the Chrome browser handles finding results in page:

enter image description here

However, with Chrome on windows, clicking on a yellow results marked doesn't navigate to the marker. Instead, the scrollbar works as any other Windows scrollbar: clicking on the scroll track navigates down a page, rather than moving to the marker (here's why).

Therefore, your approach can work but keep in mind that users may be accustomed to different scrollbar behavior, so you will need to make sure users are educated on how the jump works for your app.

  • Is it better to keep with the standard of only moving slightly towards the clicked target, or use the more logical option of jumping to the clicked location? – Daniel F Jun 9 '15 at 3:18
  • i would not mess around with the native scrollbar interaction, but instead provide a fixed or floating navbar to allow users to get to different parts of the page, but that is just my preference :-) – tohster Jun 9 '15 at 20:41
  • Sorry, not sure what you mean. Could you make a mockup? – Daniel F Jun 9 '15 at 20:42

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.