Make the left-side menu navigation offer proper links for copying or opening in a new window

[erikeckhardt]

Once I learned that my code would be lost if I navigated to another lesson and back, a couple of times I wanted to open an old lesson I'd already passed through in order to refresh my memory of how to do something. Unfortunately, since the links contain no actual URL, right-clicking offered no "open in new tab" option, and Ctrl-clicking also didn't open a new tab/window. For greatest accessibility and use to those using the tutorial, and for the least amount of annoyance to more advanced users who like to work with multiple tabs, consider making the navigation work as standard links for these uses (though staying in-page without reloading when a simple click occurs). (It might also be worth considering how tabbing with the tab key and pressing Enter or Ctrl+Enter behaves.)

[levibotelho]

The top-level links just open the accordion and don't lead to any lesson if you click on them. However the sub-links which actually open lessons are real links. Clicking on the top level links shouldn't open a new lesson because people might want to browse the different lessons without leaving the current one. So I don't really see the point of this. Am I missing something?

[erikeckhardt]

I agree that clicking on the top level links shouldn't open a lesson in the current page! But if you hold down Ctrl before clicking then on the group header then it should open the first lesson in that group in a new page. Similarly, right-clicking on the group header should also allow a context menu item of opening the first lesson in that group in a new page.

I recognize that from your perspective as the page designer, the grouping itself has no content, but to people using the site and from a UX perspective, the grouping contains all of the lessons inside that group, thus clicking on the group IS clicking on content, and the start of that content is the start of the first lesson within.

Think about dropdown menus in a web site's menu bar. If someone hovers, sure, the menu is unrolled, but what if they click on the item without selecting an item from the just-appearing menu? There should still be a default action to take them to either the first menu item or to a page that functions as a jump-off point to all the same menu items that were in the menu (though expanded in size and description). For example, go to http://www.osf.com/ and hover over Menus, but click on the word "Menus" anyway--the group header still navigated to a sensible place instead of being dead.

Yes, other sites such as target.com's left side menu don't allow you to navigate anywhere when you click them, but I think that is poor UX, plus it is different in some ways: 1) hovering/clicking takes you to a much bigger and deeper set of options presented in a much larger area, so that you are already getting what the secondary page might have displayed rather than a summary of the already-offered options (as in the OSF Menus link); 2) The menu items are separated from the content they reveal in a way that makes them semantically different items.

Finally, the hover state of your sections is to display an underline, strongly suggesting to the user that it IS a clickable link (and should function like most clickable links do by allowing opening in a new window!). Last, the hand cursor is displayed when hovering, again suggesting that it is truly a link.

[levibotelho]

I see what you're saying. I want to give the implementation a bit more thought but definitely a good idea and you make valid points.