Storyboards and Prototyping

The aim of the storyboarding session was to create a logical design for the user interface. User interface elements required by each actor for each use case were identified and organized to ensure each use case was accessible through user interface elements in a well-integrated, easy to use and consistent manner.

Screen layouts were sketched and labelled. All screen elements were also labelled. Once the screen sketches for a use cases were complete the project team walked through the use case using the sketched screens to check for missing elements and consider navigation and usability issues.

The designs of the UI screens were captured on flipcharts and then photographed with a digital camera for quick and easy inclusion in electronic documents. The storyboarding session was written up with notes about each screen and the photographs included and this document was circulated to the project team. This document was the starting point for the prototype screens. Example user interface sketches from the session are shown below:

View Module List, Module Information and E-Resources Use Case

To get a more realistic view of the channel screens as they would appear in uPortal, mock versions of the screens were created. The creation of the mock screens was a different step to that in the NIIMLE development process. The NIIMLE team created Photoshop images of the channel screens but the SUNIWE approach was worthwhile because the HTML of the screens formed an ideal starting point for the creation of the XSL files later in the development process. The mock screens also allowed the development team to become familiar with the uPortal styling mark-up and work on the HTML styling issues separately from the transformations.

The mock screens were created in XHTML and the CSS file from one of the uPortal themes was referenced in the HTML to allow uPortal styles to be used. This ensured that the XHTML of each screen was exactly what the channel needed to output to render the screen and this XHTML could be used as the target for the XSL development work. An example screen is shown below:

Figure 1: Mock Channel Screen

The mock screens showed exactly what the screens would look like in a uPortal channel. Hyperlinks to other screens were used to simulate channel behaviour. This helped with reviewing the screens to ensure a consistent look and feel and way of working across the entire portal.