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 toolboxes 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 a toolbox 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
	Packages are used to organize your project contents, but when added onto a diagram they can be use for structural or relational depictions.	Package
	A Screen element is used to prototype a User Interface screen flow.	Screen
	A UI Control element represents a user interface control element (such as an edit box).	UI Control
	An Object is a particular instance of a Class at run time.	Object

User Interface Diagram Connector Toolbox Icons

Icon	Description	See also
	An Association implies that two model elements have a relationship, usually implemented as an instance variable in one or both Classes.	Associate
	An Aggregation connector is a type of association that shows that an element contains or is composed of other elements.	Aggregate
	A Generalization is used to indicate inheritance.	Generalize
	A Realizes connector represents that the source object implements or Realizes its destination object.	Realize

Notes

Using stereotyped Classes, you can model the design of a web page user interface
The Enterprise Architect Professional, Corporate and Suite 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