UML & SysML modelling languages

Expertise and blog articles on UML, SysML, and Enterprise Architect modelling tool

version francaiseTwitterVideos UMLChannel SparxSystems EA YouTubeLinkedIn
Tuesday, 10 February 2015 22:36

Enterprise Architect 12 Wireframing preview

Written by
Rate this item
(2 votes)

sparx systems enterprise architect 12

enterprise architect 12 wireframing example iphone

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:

Sparx enterprise architect 12 Wireframing new diagram

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.

Sparx enterprise architect 12 Wireframing toolbox

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

iphone 5s sparx enterprise architect wireframing pattern

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:

screen portrait landscape

portrait landscape wireframing enterprise architect 12

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.

enterprise architect project browser traceability

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

use case diagram enterprise architect 12

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.

Place an Order use case scenario BPMN2 diagram enterprise architect

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

purchase UI screen wireframe enterprise architect 12

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.

wireframing enterprise archiect 12 navigation

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.