Introduction

Enterprise Architect 12 is due to be released this year, with the RC2 currently available to download and test. Amongst its enhancements, I came across the new User Interface Wireframing support. Update 12/02/2015: the first official build 1207 of EA 12 has just been released. 

Wireframing lets you define a visual representation of a screen with its interface elements such as labels, fields, and buttons. Having defined several screens, a navigation model can be built e.g. to specify the navigation from the login to the account summary screen via a “submit” user action.

Wireframing is intended to define User Interface diagrams that focus on functionality and help obtaining business validation upfront. Wireframing does not address rendering styles, colours, or graphics.

Enterprise Architect 12 Wireframing supports several mobile devices, such as iPhone smartphones, iPad tablets, and Android devices. Web site design is also supported.

Up to version 12, Enterprise Architect UI diagram involves an XP windows style which can be useful to provide UI illustrations. It is very good news that the next version of Enterprise Architect supports User Interface modelling for mobile and web applications.

Wireframing diagram

The screenshot below shows the available Wireframing diagram types:

Note: “XP style” UI diagrams are still available from Extended > User Interface diagram type.

Below is an example of the Apple wireframing diagram toolbox, including most iPhone and iPad models (see screen types), as well as UI controls to create labels, fields, checkboxes, keyboard, switch, tab bar, etc.

The toolbox also includes Patterns to create screens with a predefined set of controls, such as the one illustrated below for an iPhone 5s:

When creating a new screen from the toolbox, Enterprise Architect lets you choose between the portrait and landscape mode, as illustrated below for an Android smartphone:

Traceability

So, why should you use Enterprise Architect to define your web or mobile app screens where there are plenty of UI design and prototyping tools out there? The answer is traceability; Enterprise Architect Wireframing diagrams let you build your User Interface model alongside requirements, analysis, design, data and other models. Associations can be created and maintained between UI widgets and requirements, use cases, classes, DB table columns, etc.

A mobile application for an online retailer has been used to produce the examples provided in this article, based on the Enterprise Architect project structure shown below.

The following use case diagram shows traceability between the analysis and requirements models (a use case realizes a requirement).

The following BPMN2.0 diagram has been created under the “Place an order” use case to specify its scenario. Each step (actor or system) is defined as an activity, some of which are linked to an active screen from the UI model.

These links can be used by a team to look for the use cases involving a given screen, or to carry an impact analysis on the UI model when modifications are being applied on a use case.

The following diagram illustrates the links from a wireframing UI screen to the analysis and implementation models.

In this example, the screen:

• is involved in the “Place an order” use case;
• fulfils the “REQ-001” requirement;
• has fields which value is traced to business classes, including direct links to attributes (e.g. Post code is associated with Address.postCode business class);
• has a Continue button which executes InvoiceService.submitInvoice interface method. 

This traceability enables a team to verify the impact in the design model when altering a business class, or a list of screen actions invoking a specific UI service implemented in a Java interface.

Navigation

Wireframing user interface diagrams can be used to specify navigation between the screens of an application or website.

Conclusion

The wireframing user interface diagrams delivered in Sparx Systems Enterprise Architect 12 are very easy to use and fulfil most UI specification needs for a web site or mobile application.

Wireframing can be applied before the implementation stage to obtain validation from the stakeholders. It can also be used to define the User Interface model and traceability links with other modelling elements, enabling the Project Manager and the entire team to control the impact between UI, business, functional, and design aspects of the project.