User Tools

Site Tools


A3: User Interface Prototype

This user interfaces prototype (or horizontal prototype) has the following goals:

  1. Help to identify and describe the user requirements, and raise new ones;
  2. Preview and empirically test the user interface of the product to be developed;
  3. Enable quick and multiple iterations on the design of the user interface.

This artefact includes three elements:

  1. Overview of the interface elements and features common to all pages;
  2. Overview of the information system from the viewpoint of the users (sitemap); and
  3. Identification and description of the main interactions with the system (at least two), organized as sequences of screens (storyboards).

The interface's descriptions are presented on the end of the document.

1. Interface and common features

MediaLibrary is a web application based on HTML5, JavaScript and CSS. The user interface was implemented using the Bootstrap framework.

  1. Logo
  2. Navbar
  3. Content
  4. Footer

Figure 1: Interface's guidelines.

In this figure some characteristics common to all the pages are highlighted:

  • We opted for a "net design" to have a flowing web page layout that suits various screen sizes, from desktop 19" or more, to 11" tablets, or even to 4" smartphones.
  • It was decided to stay within web conventions and use the default dark blue color for all links between interface pages.
  • The common links to the various pages maintain their position to make the user experience consistent.
  • Different sections have clearly distinct styles in order to highlight distinct hierarchies of information, and assist with the visual flow.

2. Sitemap

A sitemap is a visual representation of the relationship between the different pages of a website that shows how all the information fits together 1).

The sitemap gives the project team an idea of how the website is going to be build by helping to clarify the information hierarchy. [Brown10] .

Figure 2: Sitemap.

3. Storyboards

Storyboards are presented to represent some of the main interactions with the system using a sequence of interfaces and explaining how navigation is done between them.

Figure 3: Wireflow centered on the user's options.

Figure 4: Wireflow centered on the reader's options.

Figure 5: Wireflow for the sign-in and sign-up interaction.

4. Interfaces

The following interfaces describe the main content of the web pages and their relative priority and help the project team previewing the features and behaviour of the final product's different screens, both their desktop (left) and mobile (right) versions.

UI01: Home

Figure 6: Home page.

UI02: About

Figure 7: About page.

UI03: Services

Figure 8: Services page.


Figure 9: FAQ page.

UI05: Contact

Figure 10: Contact page.

UI06: Log in

Figure 11: Log in page.

UI07: Sign up

Figure 12: Sign up page.

UI09: Error

Figure 13: Error page.

UI10: Items

Figure 14: Items page.

UI11: Item

Figure 15: Item page.

UI12: Search

Figure 16: Search page.

UI13: Add item

Figure 17: Add item page.

UI14: Profile

Figure 18: Profile page.

UI15: Administration

Figure 19: Administration page.



"Tip: Three Levels Maximum – If you need to communicate more than three levels of structure, consider breaking the site map up into several diagrams. While you might be able to show four levels in a pinch, anything more than that will be difficult to communicate effectively on a single page." [Brown10]
teach/lbaw/medialib/a03.txt · Last modified: 26/02/2020 10:31 by Correia Lopes