Action Bar Design

The Action Bar facilitates the user 3 main functions:

1. Display the current location in the application or flow
2. Navigate "back" when entering into object details, from a Collection
3. Perform global Actions for the object the page is representing

Action Bar main Elements

The Action Bar Is located at the top of the page. It shows the user the present location on the Location Element. Serves as a navigation element with the Back Button. Can have Actions on the Page, that perform over the whole content of the page, the Actions Element

Element	Description
Back Button	Navigate the user back to the previous screen/step in the navigation hierarchy
Location Element	Display the Current location in form of a Page title. Can display Steps in a Step-flow
Actions Element	Display Actions that perform an action on the object the page is representing. Can display also "Save/Cancel" actions when content of the page is modified

Mobile use case and behaviour

The Tablet inflection stays the same as desktop.

For Mobile phones:

The Action Bar will be divided in two: - Top part: containing Back Button and Location Element - Bottom part: containing the Action Element

Back Button Behaviour

The Back Button is only used, in the case where the user navigates from a Collection on screen to the Object Details page; in this case there is no option on any other Navigation Component to go Back to the Collection. That's why the Back Button is needed. Exemplified on the next wireframe

Uses cases and UX Elements behaviour

1. Only display the Page Title. The page title will be present at all times.

2. Display the Back button and the Page title

3. The page can have Actions that operates on the object the page is representing. There is a max of 4 actions to be shown. If the page have more use next case

   Also can be combined with the back button

4. The page have 5 or more actions. In this case the actions will be put under a "..." action that will display a Actions Menu with the list of the actions.

   

   Also can be combined with the back button

5. Form. When the page presents a form. As soon as the user modifies any form field the options on the page will be switched by only Cancel and Save Buttons. After trigering one of the actions Save or Cancel the Action bar return to the original state.

6. Flow / Steps When the user is required to navigate multiple screen in a defined order. The Location element can display: how many steps the flow have; the current step with Page Title for that step.

   First step

   The Previous action is disabled. The Save action is disabled when the flow goal is to create a new object. But when editing an object the Save action stays enabled at any step.

   

   Intermediate step

   Previous and Next actions are enabled. Save behavior is the same as on First Step

   

   Final step

   Next action is disabled. Save action is active.

   

   The Steps indicators on the Location element link to the corresponding screen.

   When validation is needed a particular step, before advancing to the next step: the Next action and the subsequent Steps indicators are disabled.

   

   When the screen is validated and the user can continue to the next step: the Next action and corresponding Step indicator are enabled.

   

   Prototype Video for the flow behaviour: techne-action-bar.mp4.zip

   Note: When the Location text is longer as the space given, it will be truncated as follows

   

Mobile use cases

Wireframe	Wireframe
1	2
3	4
5	6