Restructure application navigation #3210
Conversation
|
|
casperboone
force-pushed
the
menu-restructure
branch
from
4196c83 to
fc2bf46
Compare
|
I'm not particularly a fan of this change, as the side bar and the various tabs are 2 completely different contexts, with the side bar being links to external content (with the exception of the configuration wizard), where as the tabs are for direct control of setting up managing Companion itself. With the side bar being able to be minimized it meant those infrequently used links could be hidden quite easily. Moving links to a footer I think would be bad UX, as people are used to experiencing the foot being links to ToS, Privacy Policy, legal agreements, perhaps a contact link, and things of that nature. Because of this footers experience significantly less traffic and are often completely overlooked by users, which is particularly unhelpful in this situation as we don't want things like the Getting Started link hard to find (especially as historical messages on various community platforms have referenced the Getting Started link being in the sidebar, so changing that would also have a negative impact on people who google for support and find messages saying to click the Getting Started link in the side bar and it's not there). I definitely think there is room for improvement in the UI, and discussion should be had on the best way about it, but in my opinion it's not ready for a PR. |
|
Conceptually, I'm OK with this approach. I started looking at the problem of too many tabs at some point last year. My issue with what you're done is that the majority of the existing links on the left are no longer present. We might need a "Home" tab similar to what Buttons does to provide those. |
|
@thedist Thank your for your quick and detailed feedback!
I agree that they currently represent two different contexts and that is proposal is a big change to that concept. However, when you look at many other web applications the primary navigation of those applications is in a sidebar very similar to the sidebar in companion. Some applications have tabs as a secondary navigation level. However, in the case of companion the tabs currently represent the primary navigation level. Therefore, the primary navigation in companion feels somewhat awkwardly placed on a seemingly secondary level (in my perception, of course), and the prominent sidebar level suggests a higher hierarchical navigation level but actually provides helpful links.
I very much agree, and for me the Facebook, Slack, bug report, etc links fell exactly in that category. The getting started link, however, may deserve a better location indeed. |
@krocheck They are still present at the bottom of the page 😊. Such a home or “about” page could also be a good idea indeed. |
|
Perhaps one option could be to keep things like facebook, slack, bugs & features, in the side bar, but in a sub-menu of 'Commnity & Support' or something along those lines, just like you have that controls sub menu, and Getting Started could remain its own thing in the menu. This way the footer could be removed so that if in the future Companion does need to put links to legal docs it'll still have all of that room available without other links cluttering it. |
That’s definitely something I’ll give a try! Another option I’m considering (hearing your feedback regarding the footer) to try is to move “Getting Started” + a “Community & Support” dropdown to the red top bar on the top right. Then it’s still prominently present but not mixed in with the application navigation. I feel like something like a “help” button (in our case this would be support) on the top right of a web application is a pattern present in other applications as well. |
|
Yeah, I haven't been a fan of the nested tabs for quite a while, but haven't gotten to doing this to improve it. I agree that a “Community & Support” section would be good instead of the footer, I too did not notice that. But I think that most of it could be a grouping/submenu on the left rather than at the top. I'm not keen on the name of the "Controls" section, we use that name internally instead of "Buttons" in newer code and I expect that will surface to users at some point as we support non-button inputs better. Part of me wonders if they should be under a section like that or be at the top level? We currently have an ugly emulator selector page, which could be replaced by having an emulators grouping here? (Not for this PR unless you really want to do it) Maybe the config wizard should be removed from this sidebar entirely? Make it be a button or something inside the settings tab? I think we should land this in 3.6 (aka the betas once 3.5 is released), I worry that doing it now won't give time to get feedback from the beta users before release of 3.5 (which I need to start the process for) |
|
I want to throw in the good old #2387 |
|
Moved everything to the sidebar menu on the left. Help & community is a dropdown with the links that were previously in the sidebar. The setup wizard button is now on the settings page. Overview Help & Community expanded Configuration wizard on the settings page
Makes a ton of sense! This change has impact on everybody's workflow, so good to have it in beta for a while. |
|
I pulled the branch down and played with this. I like it except for "Interactive". I don't like that it uses the same icon and "Surfaces" and I think it would make more sense as an expansion of "Surfaces" instead of its own. OR we just put two buttons in the top right of the header. |
casperboone
force-pushed
the
menu-restructure
branch
from
2d4ebb6 to
8694a88
Compare
You're right, the same icon wasn't really on purpose (just using the old ones) so I've chosen a new icon (updated the screenshots). I'm also not a huge fan of the (now) "Interactive Buttons" menu section. Let's hear what others think about it 😊 |
|
I also will voice my support of this, in testing it makes each section feel more focused than before. It also makes use of the sidebar which I very rarely used before. One note, I'm noticing on the Logs tab, the logs only go down about 1/3 of the page for me now, instead of the full page. I tried in Safari and Chrome with the same result. 
|
(Pardon this observation from an interested bystander). If it were to remain as a top-level item in the sidebar, "Web Control" is what suggests itself to me. Essentially, trying to convey "control" as a verb, rather than using a noun here. But yes, it could also belong under Surfaces or in the header. |
|
I want to pitch again that maybe emulator and web buttons should be at the root level here. As I see that they could both get their own children later, and it ensures that users won't get confused being unable to find them because everything has moved. But whatever we do here can be easily changed later. |
Hi!
The sidebar in companion has a very prominent presence and has a format that resembles a navigational ux pattern in other applications. At the same time, the tab bar is currently the main form of navigation between the important pages in Companion. The tab bar, however, feels much less significant. It isn't used to toggle between subsets of smaller features, like in other places in Companion, but actually to switch between the major features of Companion.
I would like to propose a restructure of the navigation. Moving the main navigational items to the sidebar menu puts them at the right hierarchical level. Whereas the items that used to be in the sidebar (support, facebook, slack, etc.) can be given a bit less presence and, to me, make sense in a footer like style. This also reduces visual distractions (the tab bar) from the "major feature" pages (buttons, connections, etc.). Finally, it makes the general application navigation more intuitive by using UX patterns users know from other applciations.
I don't do a lot of react dev, so definitely let me know if things can be improved code-wise. However, more importantly, I'm very curious to hear your opinions on this proposal.