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.
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.
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!
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.