Book a Demo
Prev Next

User Interface Diagrams

User experience and user interface design have traditionally been modeled in a variety of tools that are separate from other disciplines, leading to a disconnect between these models and the other analysis and technology models.

Enterprise Architect allows you to model a wide range of user interfaces and platforms, including client software, web sites and pages, and mobile devices such as phones and tablets. It uses compelling representations of the physical devices and the platforms to make these models appealing and useful for walks-through with users. The elements in these models can also be traced to other elements in the repository, including design principles, requirements, use cases and user stories, stakeholders' concerns, information models, architecture and design models. StateMachine diagrams can also be created to represent the important states of the user interface, and these can be traced to testing models.

The User Interface diagram is an extended diagram type that provides a set of wire framing Toolbox pages with a rich palette of user interface elements for Android and Apple devices, as well as for web pages and dialogs. There is also a facility for modeling Win32® user interfaces, with Toolbox pages containing a wide range of controls such as Check Boxes, Spin Controls, Tree Controls and many more.

Example Diagram

Example User Interface Diagram

User Interface Diagram Element Toolbox Icons

Icon

Description

See also

Package element

Packages are used to organize your project contents, but when added onto a diagram they can be used to depict the structure and relationships of your model.

Package
Screen element

A Screen element is used to prototype a User Interface screen flow.

Screen
User interface control element

A UI Control element represents a user interface control element (such as an edit box).

UI Control Elements
Object element

An Object is a particular instance of a Class at run time.

Object

User Interface Diagram Connector Toolbox Icons

Icon

Description

See also

Association connector

An Association implies that two model elements have a relationship, usually implemented as an instance variable in one or both Classes.

Association
Aggregation connector

An Aggregation connector is a type of association that shows that an element contains or is composed of other elements.

Aggregation
Generalization connector

A Generalization is used to indicate inheritance.

Generalization
Realization connector

A Realizes connector represents that the source object implements or Realizes its destination object.

Realization

Notes

  • Using stereotyped Classes, you can model the design of a web page user interface
  • The Enterprise Architect Professional, Corporate, unified and Ultimate editions also include the MDG Win32 UI Technology, with which you can design user interface components that render more precisely as Win32 ® User Interface elements

Learn more