Tuesday, 10 February 2015 22:26

Enterprise Architect 12 Wireframing preview

Written by
Rate this item
(4 votes)

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.

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 built e.g. to specify the navigation from the login screen to the account summary screen via a “submit” user action.

Wireframing is intended to define User Interface diagrams that focus on functionality and help to obtain business validation upfront. Wireframing do 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 Models 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 with 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 following Enterprise Architect project structure.

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 make it possible to looks for the use cases where a screen is used, or to carry an impact analysis on the UI model when making modifications in 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.

Read 12065 times Last modified on Thursday, 12 February 2015 21:08
Guillaume

Guillaume Finance

VISEO (Sparx EA Expert, OMG OCSMP Model User certified)
 
Modelling consultant and expert on Sparx Systems Enterprise Architect modelling tool and solution, I'm helping clients with the model-based approach using standards for a number of contexts including:
- Software analysis, design and architecture with UML.
- Systems Engineering and MBSE with SysML.
- Enterprise Architecture, IT landscape with UML or ArchiMate.
- Business processes with BPMN.
My other activities include:
- Defining and maintaining the model repository including requirements, analysis and design for software projects.
- Remote support and expertise on Sparx Enterprise Architect modelling.
- Running training sessions on UML or SysML with Sparx Systems Enterprise Architect.
- Installation and configuration of Prolaborate web solution for Sparx EA.
 
I publish articles and news about modelling languages and Enterprise Architect on my blog www.umlchannel.com, maintain eaUtils free addin: www.eautils.com, and I participate in the European EA User Group events www.eausergroup.com
Contact details: guillaume[at]umlchannel.com

www.umlchannel.com

3 comments

Login to post comments