Search buttons, action bars, and popup menus

From CTRNet Wiki
Jump to: navigation, search

These are proposed updates to the action bar, specifically about collapsable buttons/menus...

Contents

Current Clinical Annotation Action Bar

This screenshot shows the Clinical Annotation search results screen, with it's current action bar button set...

Action bar change 00.png

The main issue with this action bar is that there are *three* search related buttons, one of which (the "New Search Type" on the far right) it has a popup menu of multiple search options. This is a perfect example of a series of user-interface decisions that, individually, seemed logical. However when these elements are now viewed as a whole, it is confusing and borderline ridiculous.

Proposed Clinical Annotation Action Bar

This screenshot shows a proposed change to action bars in general, specifically in regards to search buttons...

Action bar change 01.png

This suggestion is to take *all* plugin based search action buttons, and collapse them into a popup-menu button on the left side (simply labelled "Search" in this image). The original smaller button in the same place in the first screenshot was originally meant to be a constant within a plugin, allowing users to jump back to search results easily. The idea here is to expand the functionality of that existing button, removing any extraneous search action buttons from everywhere within the plugin.

Proposed, with popup menu

This screenshot shows a proposed change to action bar buttons that have popup menus...

Action bar change 02.png

This is a general example for how a popup menu in the action bar would appear with the proposed change. It is using generic labels at the moment (not what would really appear in the Search button as options).

The popup menu appear *above and to the right* of the button, with an arrow "linking" it to the user's click/hover source. This keeps the popup menu within the current viewing area, but leaves any other action bar buttons (that would sit beside the currently clicked/hovered button) easily accessible and unobscured. Naturally, action bar buttons on the right would have the popup menus appear *above and to the left* instead.

The max amount of popup items would be approx five, with a clear "scrolling hover area" above and below them (indicated by the darker colour and double arrows). If the list has more than five items, the *bottom five* items would be listed, with the rest accessible by hovering "up". We chose the bottom five because that would prevent any sudden/accidently scrolling when a user moves his mouse from the button to the menu (crossing the "scroll down" hover area).

Finally, when an action bar popup menu is open, everything else gets a 50% opaque white overlay. This brings more focus to the menu, where the user's attention should be, and makes everything else a little lighter, so that items "behind" the menu do not blend it or visually conflict. The opacity is not overdone, as all the text and labels are still easily readable.

Proposed, applied to summary tab

This screenshot shows the same proposed change, applied to the pulldown summary menu...

Summary pulldown update 00.png

This allows summaries to have more relevant information without worry of being too long. Another proposed change is to make each summary section have a clickable link, so when a user is reviewing summary info, they can jump directly to it if they wish...

Summary pulldown update 01.png

Update on April 21st: please note the minor summary tab change noted on the modal popup windows and auditing history page.

Personal tools