UX

If you’ve ever worked with other declarative UI technologies like HTML and XAML, they often take a parent/child approach to UI, that is, there is a parent or root view that is ever present and contains global functionality, such as top-level navigation. It then has dynamic content or child views, which switch in and out as needed and present context sensitive commands where necessary.

We will take the same approach, with our MasterView being the root of our UI. We will add a global navigation bar and a content pane where we can add and remove content as needed. Child views will optionally present a command bar for performing actions, for example, saving a record to a database.

Let’s take a look at the basic layout we are aiming for:

The Navigation Bar (1) will be ever present and contain buttons that will navigate the user to key areas within the application. By default, the bar will be narrow and the commands associated with the buttons will be represented by icons; however, pressing a toggle button will expand the bar to display accompanying descriptive text for each button.

The Content Pane (2) will be a stack of child views. Navigating to different areas of the application will be achieved by replacing the child view in the content pane. For example, if we add a New Client button on the navigation bar and press it, we will push the New Client View onto the content frame stack.

The Command Bar (3) is an optional element that will be used to present further command buttons to the user. The key difference to the navigation bar is that these commands will be context sensitive relating to the current view. For example, when creating a new client, we will need a Save button, but when we are searching for clients, a Save button makes no sense. Each child view will optionally present its own command bar. The commands will be presented by icons with a short description underneath.

Now let’s plan the flow of screens, or views as we’ll call them: