Header Tab Updates about ui_alchemy-rails HOT 12 CLOSED

http://codepen.io/andyfitz/full/tvahJ

from ui_alchemy-rails.

Side question: Matt and I have been discussion what Conductor navigation will look like in the new world, and in general, we agree that it'll be three-tiered - for example:

First Tier - Environments
Second Tier - Pools, Catalogs
Third Tier - Details of any particular pool or catalog; for example, a specific pool might have a tab for related deployments, another tab for related instances, etc

This isn't finalized, of course, but Matt and I agree that three tiers will almost definitely be necessary, as the second tier consists of roughly 15 sections, meaning it won't fit into a header nav.

My understanding is that, as currently designed, the first tier would be these header tabs. How would the second and third tier fit? You mentioned tabs before for the second tier, but that would result in tabs-within-tabs when combining the second and third tier, which I'm not sure is optional (it might be, I honestly don't know).

I thought I'd ask this question now, just to make sure the end result is a navigation design that fulfil Conductor requirements.

from ui_alchemy-rails.

Thanks for asking @tzumainn http://codepen.io/andyfitz/full/fGCBk is what I imagine you are talking about (minus the third tier of course which will be covered later )

from ui_alchemy-rails.

Oh, nice. I know Katello has a left nav on some of their pages; would the preference be for both Katello and Conductor to move to the above. . . ?

from ui_alchemy-rails.

@tzumainn - Im pretty sure katello does not have any left hand nav.

from ui_alchemy-rails.

@kylebaker - ah, you're right; I was thinking of this:

https://ktdemo.usersys.redhat.com/katello/users?id=1&only=true#panel=user_1

That looks like User (header?) > Specified user (left nav) > User associations (middle/tabs)

@andyfitz - given that, your design looks fine to my eyes, but I'm not ui-experienced in any way shape or form, so others might have a stronger opinion.

from ui_alchemy-rails.

@tzumainn what we do have is that second tier of navigation links that by the sounds of it conductor would begin to use as well. Which would help the cohesiveness of the two applications going forward.

@andyfitz Apologies if it's too early in your design to pick at things. The overall height of the header seems incredibly tall on the computer I am currently viewing it on. I like the look and feel of the second tier navigation in terms of the blue underline with the small arrow, but I am torn by how much space there is between the tabs and the second tier navigation. Feels like there is a disconnect with the way they sit inside that stripe. Completely digging the go with you header! Feels nice and responsive as I go up and down while being minimal and allowing me to still navigate/switch orgs and view notifications.

from ui_alchemy-rails.

@andyfitz: actually - so if I understand correctly, the idea is that for Conductor, the first tier of navigation is the header tabs, the second tier is the new tabs below that in the mockup, and the third tier would be another set of tabs? Would that seem overcrowded, or would you suggest a different option for the third tier?

from ui_alchemy-rails.

Agree with @ehelms on the height.

@tzumainn Mind posting an image of the site map? That might help us design a navigation structure. Perhaps tabs might not be the right method.

from ui_alchemy-rails.

@jrist Hah, such a thing doesn't exist, and there are many people with opinions on how the Conducutor navigation re-design should go; if I remember correctly, Jaromir had a pretty detailed view in mind.

I think it's been generally agreed that we want each entity section (instances, deployments, providers, etc) to be able to operate on their own. There are roughly 15 of them, so they won't all fit in the main header; instead, the header will need to categorize them. For example, we might put Providers, Provider Accounts, and Config Servers into the Provider category.

Within each entity section, there'll be the standard index/edit/view. When viewing a particular entity, we currently view associations through tabs; so a Pool entity will have a tab for deployments and another tab for instances.

Finally, we plan on eventually having a main dashboard page that will list entities of direct interest to the user (his deployments, etc), and bypass the header navigation and lead directly into various entity pages.

If we put that all together, we actually end up with something pretty generic and straightforward:

1st) Entity Categories (header nav)
2nd) Entity Sections within Category (secondary nav)
3rd) Entity Association (tertiary nav; in Conductor, this is currently tabs)

With a main dashboard page that bypasses the above and leads to key entities.

Jirka/Jaromir/Matt/anyone else, feel free to correct my understanding

from ui_alchemy-rails.

I realize that I've listed requirements without any suggestions, for which I apologize - I'm historically terrible with UI. That being said, here's my suggestion:

1st) Entity Categories -> Header Nav
2nd) Entity Sections -> Left side nav, similar to what katello does here: https://ktdemo.usersys.redhat.com/katello/users?id=1&only=true#panel=user_1
3rd) Entity Associations -> internal tabs

from ui_alchemy-rails.

Agree with @ehelms on the height.

@tzumainn: I am really not sure about the structure. It was just idea, which I was creating on the fly. I will be working on that. I have some ideas, I just need to put them on the paper.

from ui_alchemy-rails.