Visual readability of sidebar tabs
sodapopcan opened this issue · 19 comments
Hello ExDoc team!
I've always had a bit of trouble with the visual readability of the sidebar tabs. It actually took me an embarrassingly long time to figure out that they were even there (I've known about them for a while now 😅). My issue is with how they are visually grouped with the project info as opposed to with the content they are link to. There have several posts on Elixir Forums lately that seem to suggest newbies don't realize that the docs also contain guides. It's my hypothesis that this may have something to do with it.
Now, of course I am a sample size of one don't have much of a clue if anyone else feels this way. I was going to post on Elixir Forum but wanted to post here first as I actually have a quick little prototype to show and feel like sharing a visual design in a larger public forum can be asking for a headache 😅 I figured I'd share here first and if you don't immediately veto, I could ask for further feedback if necessary. Otherwise, I'm happy to incorporate feedback, polish, and make a PR.
So here's my prototype:
Just classic tabs! I did this very quickly and have a slightly smoother version in mind, but I'm ultimately going for "utilitarian while still visually pleasing enough." I feel this does a better of saying, "Hey, there is more interesting stuff over here!" as it ties the tabs to their content.
No worries if you're not a fan but I wanted to share.
✌️
I will leave it open for feedback but I recommend trying on an expanded sidebar so there is a scrollbar appearing. IIRC, one of the main reasons for having the spacing around the title-box/sidebar-header was so the scrollbar "disappears". You can see this happening if I remove the margin from the current layout:
It now feels the scrollbar is encroaching. :)
It would have probably been a good idea to post a screenshot with the scrollbar, eh? I did check it and actually made it touch the top like that as I thought it was nicer 😅 Though I have no strong feelings there. I'm one of those "hide scrollbars when no in use"-type people.
Here's one with scrollbars set to "always show" and some padding at the top (this is scrolled all the way up):
Not sure how this would look in Linux or Windows, of course.
To be clear, I'm not married to these tabs or anything. My issue is with the current design and wanted to offer one solution as opposed to just complaining 😅 And of course if no one agrees with me that's fine too! ❤️
I don't have a problem seeing/remembering the tabs in the sidebar, but I can see how they could be missed at first.
With a view to consistency, you might like to try a condensed version of the tabs from the content/generated tabsets?
I don't have a problem seeing/remembering the tabs in the sidebar, but I can see how they could be missed at first.
Yep, I have a bit of a problem expressing myself but I'm talking about drawing the attention of new-comers. I'm not quite sure how to go about getting feedback on this as it's very hard for those already familiar with the navigation not to "unsee" it. I'm in that position myself a bit, however, I do remember the feeling of disregarding them quite well. But I have no idea if I'm in a minority or not.
The over-arching issue I'm trying to help address is newcomers not realizing the docs also contain guides. Perhaps this isn't the way, it's just one that stood out to me.
I can absolutely implement a condensed version of the style you linked if there is any interest at all in moving forward with this (even if it doesn't go through).
EDIT: I'll mock it up anyway in that style and see what you all think, I just don't have time to tonight!
Better? Worse? Meh?
HexDocsTabs.mov
Looks better to me. :)
As an aside, as the tab labels are all-caps, I think they could do with a smidge of letterspacing.
Edit: even letter spacing as subtle as .02em makes an appreciable difference.
Agreed with letter spacing. Added tracking is always best on all caps for non-display fonts!
I'm actually quite into these tabs now, though once again I want to stress that I'm not pushing hard for this change! I think it will help based on my own experience but of course I don't have the capacity to do any solid user-testing.
I'll wait for more feedback and create a PR if you guys want to proceed.
Thanks!
I am not sure about the rounded corners around tabs. They make sense in tabsets because we round everything in the body, but there is nothing rounded on the sidebar anymore. I would also remove the thick border for the unfocused tabs (we can also do it for regular tabsets, wdyt @DavidOliver?):
Other than that, I think the sidebar is cleanly solved, My only additional comment is to move the hamburger icon to the right, so the text and the icon are padded by the same amount from their respective sides.
Here's with José's changes and a couple of different versions.
I gave a the hover a background as it looks odd when just a bar appears. The other option would be too just leave the hover as the text getting whiter.
I can fix the hamburger. It's a bit weird since it's the same element in both closed and open states, so "moving" it to the right make it look odd when open, but I can fix it.
Thanks for all your feedback!
I'm happy to wait to hear from others too, I'm in no rush here.
Apparently I can't attach images with this much text or I'm at a limit or something? I'll try in a new message.
Ya, either github is having issues or I'm being rate-limited for posting too many photos. I'm unable to post screencaps at this time.
I would also remove the thick border for the unfocused tabs
I think I actually prefer the inactive tabs with the border-top as it feels to me just a little too "empty" without. But I don't have strong opinions about this or the other points raised.
Added tracking is always best on all caps for non-display fonts!
😃 👍
Github is definitely having issues. All repos were 404 for me just now.
Ha, yup! I thought you guys kicked me out 😅
@sodapopcan can we try your original submission but without the thick border top and without rounding? In order words, the first image that you posted, but still with some thin borders around the other tabs. :)
I wasn't sure if you wanted them rounded or not so the video is with rounded. To make it look decent without the rounding I'd have to do to some fenangling so that it doesn't get the, uh, the beveling thing happening.
This is actually the first thing I was happy with but added the thick border before originally posting! I'm not actually sure if you were thinking the thin outline would line up with the top or bottom of the "selected" border but I really like it this way and I think it makes the hovers look quite nice.
HexDocTabs-rounded.mov
Here is what it looks like not-rounded with the "beveling" (I know it's not beveling it just escapes me what to call it right now... the pointy ends)
EDIT: I haven't fixed the burger yet, but I will.
Thank you. From all of the above, this is the cleanest to me:
And we can add the hover style too, which looked pretty neat. Do you think this is enough to avoid confusion in the future? If so, that's my vote. Thank you!
I'm happy with any of these though yes, that and the last video I posted are my favourites. I'm mostly concerned with the utility of it. I was hoping maybe a few other people would chime in as I'm not a UI expert but I think connecting tabs to their content is usually a good idea. If it doesn't work and people hate it it can always be reverted, though people usually get used to anything (I did like the rounded inset and I will miss that 😅 but I couldn't figure out how to keep it)
@sodapopcan you can keep it rounded if you want based on the last version i posted above. FWIW, i think the version above is also the most similar to the current implementation, so I think it will be less disruptive while bringing clarity.
PR created. I thought the non-rounded "current section" markers looked better with your preferred tab style. I can always round them if that is the overall preference, of course.
Thanks David and José!
closing in favor of the PR