Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Needs design analysis: can we improve highlighting in category bar? #89

Open
cellio opened this issue May 12, 2023 · 3 comments
Open

Needs design analysis: can we improve highlighting in category bar? #89

cellio opened this issue May 12, 2023 · 3 comments

Comments

@cellio
Copy link
Member

cellio commented May 12, 2023

https://meta.codidact.com/posts/287669

In the category-specific bar, one of "posts", "tags", or "edits" is highlighted, depending on where you are. The changed rendering tells you at a glance where you are. However, "Create Post" also has the same highlighting, presumably because it's a button not a section.

Especially on a narrow screen this looks kind of confusing:

screenshot

Can we figure out a way to visually distinguish section highlighting from button highlighting? We're not using the regular button highlighting there (if you start to create a post, the button at the bottom there is different). I don't think we want that bright blue of other buttons in the header bar, which I assume is why we changed it, but instead of changing it to the section styling, can we think of a third thing? Just an idea -- I am not a graphic designer -- but would it work to use the lighter color from the upper part of the banner, sort of like this? Or is this also confusing?

mockup

Please, please, somebody with actual design clues, please suggest something less ugly than that and still workable with the color theming CoDesign has.

@trichoplax
Copy link

Having thought about this more, I can't see a reason why anything in this row needs to be a button (or look like one). Treating "Ask Question" as if it is different from "Posts", "Tags", or "Edits" introduces a design challenge that we don't need to solve.

To a user, clicking on any of the 4 items results in the page below changing to match. Making all 4 items into tabs means less visual clutter for the user, with no change in behaviour.

I've added screenshots of roughly what this might look like to the Meta post as 2 separate answers so people can vote on whether they prefer changing only the first 3 items to be styled as tabs, or changing "Ask Question" to be styled as a tab too.

@cellio
Copy link
Member Author

cellio commented May 14, 2023

That's a very good point. The four items all change what you see and what you can do; I agree that logically they're all the same kind of thing.

@trichoplax
Copy link

I was surprised to see that there is already conflict in the voting for the two options I posted on Meta. Hopefully someone will post their reasons for preferring the button approach.

The only thing I can think of myself is that the button makes "Ask Question" stand out to new users unfamiliar with the layout. If that is the reason for objecting to 4 tabs, then perhaps it could be mitigated by having "Ask Question" be a tab title but in bold to distinguish it from the others. Personally I feel that it would be sufficiently discoverable without that, but I'm biased since I've been focusing on it (and I'm already familiar with the site).

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants