Seeking Feedback: New Vertical Navigation Menu

Greetings Specificians,

We are engineering a new and improved navigation menu for Specify 7 and we would like to gather the community’s thoughts and opinions before we launch this significant change!

Vertical navigation menus can be more organized and efficient than horizontal menus. With vertical menus, users can easily scan through the menu items and select what they need.

Currently, this implementation would replace the horizontal menu. There would not be a setting to re-enable the previous behavior, but we are looking into the option to put the collapsed sidebar on the top rather than on the left side.

This would be beneficial for Specify databases that have a lot of menu items enabled. As the software continues to evolve, we anticipate adding more navigation items. Currently, we have a large number already placed at the top:

  • Data Entry :data_entry_:
  • Interactions :interactions_:
  • Queries :queries_:
  • Record Sets :record_sets_:
  • Reports :reports_:
  • WorkBench :workbench_:
  • Attachments :attachments_:
  • Statistics* :statistics_:

*In an upcoming release

A vertical menu allows users to quickly find what they are looking for at a glance without occupying a large amount of vertical space. It is less intrusive than the horizontal menu, as it now takes up less space on the page. This can be beneficial for situations where there is a lot of content that needs to be displayed at once such as in queries, forms, WorkBench data sets, and nearly every place in Specify.

16:9 vs 4:3 Apsect Ratio

Aspect Ratios

The 16:9 aspect ratio of today’s monitors is much wider than the 4:3 ratio of older TVs and CRT computer monitors, making the former appear more rectangular while the latter resembles a square. This means that the design used when displays were predominately using a 4:3 aspect ratio should adapt as we move towards wider and wider displays.

Operation

To collapse or expand the side menu, you can click on the narrow orange line on the right of the navigation menu.

  • Navigation menu items show their name (Data Entry, Trees, Queries, etc.) in the tooltip after hovering over an element.
  • The :search_: icon shows a full-screen search page if the sidebar is collapsed.
  • User tools are represented as a :gear_: in a collapsed view
  • The collection switcher is represented as a box which will expand the sidebar to allow switching collections
  • Notifications are shown as a bell icon

Screenshots

You can see with a collapsed sidebar how much more visible area is now seen on a form when vertical screen real estate is at a premium.

This becomes more apparent the narrower the screen width is and the larger the zoom in the browser.

In situations like the WorkBench, you can also unlock quite a bit of new screen real estate vertically at the compromise of a small amount of horizontal working area:

In the Trees, you can see that a large amount of new space is now made visible, enough to show another 5+ nodes. Trees typically need more room vertically than horizontally, so this update allows users more flexibility.

In the query results, you can even see an additional 3 rows that were not visible before.

This has been released as of Specify 7.8.6!

very good idea!
In our experience, vertical space is always limited as we have more subviews (e.g. plus host data, collection object attributes, collection object citations, attachments in icon view etc) than is used in the standard fish-view shown above (which is actually not quite representative of the fields usually needed in museum collections). We thus had to arrange the fields in two columns f(Specify 6).

I really like this! I especially like how when resizing the window to fit two windows side by side on a single display, that the side panel wording transforms into just the icon to maintain functionality. I can’t think of the last time I split a display into bottom half and top half, but left and right definitely happens a lot more frequently and so this improves that workflow greatly.

Great feature that maximizes screen real estate overall. Especially if left banner ca be minimized.
Especially for some uses life data-entering forms.
However, gaining a few lines at the bottom (10-15%?) when you have hundreds or thousands that need to be scrolled though (the case of WBench, query results or tree displays), is in most cases an insignificant contribution if results in sacrificing even a single column/field displayed. This is the case for the WBench example shown: 11 columns. vs. 12 despite gaining 5 lines (13%)n despite how very narrow the left menu band is. In most scenarios, columns, are much fewer than lines, so every single one being vissible matters (every cm in width for a display counts). Besides, scrolling left-to-right is more cumbersome then up-down; especially if a particular column cannot be fixed as “line heading” for reference, the way column headigns are.

I’m sure the width of the left menu can be made extremely narrow. Also, being able to togle between top-menu and left-menu would certainly be wonderful.

New Changes

We have introduced a new visual interface for the new navigation menu!

Customize navigation menu items

Improved User Tools menu

All User Tools menu items can now be added to the navigation menu! With this, we have added icons for all of the tools.

If you were to remove essential items such as Data Entry, Interactions, Queries, or any other default items, they will be accessible from the User Tools menu instead. You can see them under the “Main” subheading.

Change menu position

The new navigation menu can be placed on the left, right, top, or bottom. It can be expanded when it is located on the left (default) or the right.

Try it out

You can try this new side menu at our temporary deployment for your evaluation. This deployment will expire at the end of February so please let us know your feedback!

Demo Link: https://sp7demofish-side-menu.test.specifysystems.org/

Username: sp7demofish
Password: testuser