Banking Web Application - GUI Design Sample

Overview

This sample provides a near complete example of an Internet Banking application that has been inspired by a couple of superb UK banks with great user interfaces.

It demonstrates the use of common masters or components that appear on almost every page but need to have local changes made on each page. It also shows on-page dynamic behaviour including an expanding panel and mouse-over pop-up window.

Most of the pages have design documentation added to demonstrate the appearance of annotation pop-up tool-tips and generated documentation.

Navigation Menus And Overrides

This is the design master for the main navigation menu that appears on practically every page:

It's fairly easy to see what links have been hooked up to pages. All links use the "Replace Top Window" navigation type so no matter where this component is used, the link will jump to that top-level page.

Note that none of the menu link items have been highlighted because this is the basic master. But if you have a magnifying glass handy (or have super-vision), you might notice that the menus on all of the page thumbnails do have highlighted menu items.

Here's one in more detail:

This is acheived very simply by selecting the component menu item on each page and changing its text and background colour properties. You can change any item properties in this way.

Dynamic Panels

The "LogIn" page demonstrates one example of dynamic page content, with the display of a "failed login" message panel. This also shows the use of scenario or condition boxes containing business logic.

Perhaps a more interesting example appears on the "Statement" page which has an expanding panel to show or hide advanced range options:

There are a few ways to achieve this but we chose the simplest option. Two component panel designs were created: one for the normal case and the other for the expanded "Advanced Options" case. Each of these, in turn, shared a further component for common elements - the bulk of the actual statement.

The Web page was created with the normal panel in place and enough space to accommodate the larger, advanced panel. The "Show" link then simply places the advanced panel over the first panel, anchored to the top-left corner. The "Hide" link then simply closes the advanced panel.

It's probably easier to see on the design than to understand this explanation in words!

Pop-up Window Component

We wanted to demonstrate mouse-overs and have an informational pop-up window appear when hovering over an "information" icon:

Having done this once, we realised we wanted to add this on lots of pages; wherever account balance information is displayed. So we wrapped it up into a component design:

Note how the Anchor provides positioning for the pop-up window relative to the icon wherever this is used.

This is quite a cool little component because it has the footprint of a tiny icon but has expanded functionality behind it. You can use this technique to open dialogs, jump to different pages or do anything where the behaviour is self-contained.

Other Things to note

1. To produce basic consistency between pages, a "_BLANK.gui" template design was created first. The "Duplicate Design" command was then used to create each individual page which could then be resized if necessary and have content added.
2. Although a "Master" page could have been used as a background component for each page, it is more flexible to use masters for common sub-elements such as headers, footers and navigation bars. This allows individual pages to be changed and resized much more easily once an overall layout has been established.
3. All page-to-page navigations are made using a "Replace Top Window" link. Not only is this the best way to link from anywhere to a new page (or screen), it also supports "Back" and "Forward" navigation.
4. In some cases, such as the "Log Out Confirmation" page, buttons are linked to a "Back" box to take advantage of this and link back to whatever the previous page was.
5. A condition box is used to handle an error condition during "Log-In". You can add as many scenario conditions as you like at any point in a design. For example, it would be interesting to expand the design to cover the case where the user has tried too many unsuccessful log-in attempts.
6. The many Tables are created with the standard Table element and styles changed to provide a flat appearance and high rows. To make things easier, having created a basic table, this was added to a "scratch pad" template design file for copying and pasting into various page designs.
7. Version 2.4 (used to create this design) does not support text wrapping in Table cells or headers so, where this was needed, the cell's data was left blank and Static Text or Hyperlink text elements were placed on top.