meteor/guide

About the guide's usability.

Closed this issue · 9 comments

7ammer commented

I'm really excited about the guide :) It seems to be getting lots of updates and now has some really great tips and examples in there! Thank you sooo much guys! :)

That said it is starting to get quite hard to read the pages and effectively navigate the sidebar as more and more topics and sub topics are added and each page is getting longer and longer.

I had a few UX/UI and style ideas that may help below:

Sidebar

  • The old guide's sidebar highlighted the active heading that the user was currently looking at. It would be great to have this back again as it was really helpful for navigating through a long page.
  • More padding above and below subsections might help the sidebar visually.
  • Perhaps moving the sub levels of the sidebar to the top of the relevant page would be easier for the user to navigate?

Pages

  • The page titles could do with either being LARGER or bolder, especially for h3 titles. The hairline font currently "disappears" if the user is scanning and scrolling the page while trying to quickly find a section.
  • More spacing above h2 titles could help to define a new section better for the user.
  • Making the left anchor icon red next to each h2 heading would help users quickly identify the different sections while scrolling down the page.

Just some thoughts,
Thanks for reading :)

tmeasday commented

Should we move this to hexo-theme-meteor?

tmeasday commented

I think the first point is actually a bug, looking at it now.

lorensr commented

Active highlighting is dup of meteor/meteor-theme-hexo#10

Unless it's hard for you/dom to track, I'd prefer just pointing in the readme to hexo-theme, but not going through the hassle of moving the issues that get submitted here/docs anyway. But if you'd like, I can start doing that.

7ammer commented

Sorry guys, didn't know about the hexo-theme-meteor repo.

tmeasday commented

@7immy - why would you? :)

7ammer commented

Good point :)

lorensr commented

Thanks @7immy for the suggestions :) Here are my thoughts on two of them:

Page ToC

Perhaps moving the sub levels of the sidebar to the top of the relevant page would be easier for the user to navigate?
see here for an example: https://laravel.com/docs/5.1

On mobile, since the menu is hidden, I would like to see the page's ToC duplicated at the top of the page.

You think it's important on desktop as well? I can see the ToC fine in the menu:

image

Scrolling down pages

I identify with the difficulty in scrolling down a page scanning headers. Especially looking for an API function. If I start at the top of

http://docs.meteor.com/api/collections.html

and start scrolling down looking for insert, it doesn't pop out at me:

image

Partially because it's in the middle of Mongo.Collection#insert(doc, [callback]) and partially because it's inside the api block, which feels to me similar to a snippet or an aside, whereas I'm looking for something more like a normal <h#>, like Match Patterns:

image

Making the left anchor icon red next to each h2 heading would help users quickly identify the different sections while scrolling down the page.

At one point all the header anchor icons were red, and I didn't like it on pages like this with a few headers in view at once:

image

I think a darker gray or red just on the h2s would help me have a sense of structure level.

domyen commented

Cheers @7immy for the collated feedback it really does help us move quickly on improvements. Thank you!

These are done:

  • The old guide's sidebar highlighted the active heading that the user was currently looking at. It would be great to have this back again as it was really helpful for navigating through a long page. meteor/meteor-theme-hexo@16447a2
  • The page titles could do with either being LARGER or bolder, especially for h3 titles. The hairline font currently "disappears" if the user is scanning and scrolling the page while trying to quickly find a section. (made headings larger)
  • More spacing above h2 titles could help to define a new section better for the user.
  • Making the left anchor icon red next to each h2 heading would help users quickly identify the different sections while scrolling down the page. (made it darker grey per @lorensr suggestion)
  • More padding above and below subsections might help the sidebar visually. (changed color of subheadings to clearly distinguish between sections)

This one is a bit more complex:

Perhaps moving the sub levels of the sidebar to the top of the relevant page would be easier for the user to navigate?

I'm wary that such a change pushes the content too far down the page. It's great for the shape of laravel content, however when presented with many headings and subheadings e.g., package.js it gets out of hand. If this is a pressing issue, I'd suggest creating a ticket in the Meteor hexo theme repo to discuss it further.

domyen commented

Closing to keep things tidy. Please open new issues for further improvements!