Aspects of User Interfaces 

Modeled in UMLi

Many aspects of an interactive system can be described by models. Therefore, there are many possible combinations of models that can together describe an interactive system. Despite the fact that these models can be very different from each other, structural and behavioural aspects of systems should be considered if the intension is to build UI models that can be used, for instance, to generate running user interfaces.
  • Structure. Classes and objects are the main structural elements of a system. Relationships between classes and objects, i.e., associations, compositions and generalisations, are also structural elements. Thus, structural models describe properties of classes, objects and their relationships.
    • Presentation (User Interface Diagrams in UMLi). Classes and objects responsible for the visual appearance of user interfaces are structural elements. Interaction objects are usually called widgets. Presentation models are structural models describing properties of widgets and their classes.
    • Domain (Class Diagrams in UMLi). Classes and objects modelling the entities of a system are elements of the domain. Thus, domain models describe properties of classes and objects of the domain.
  • Behavior (Activity Diagrams in UMLi). Dynamic elements used to alter the states of structural elements, i.e., tasks, actions and events, are the behavioural elements of a generic system. Thus, behavioral models describe properties of behavioral elements.
Selecting the icons , and you can visualize a set of UMLi models describing complementary properties of the following user interface:

(1) The Cancel button is a widget. Thus, its structure is modeled in a user interface diagram and its behavior is modeled in an activity diagram.
(2) The List object is also a widget. Thus, it is also described in a user interface diagram and in an activity diagrams
(3) The content of the List component is a database query, which is an object of the domain. Thus, the structure of the query is described in a class diagram. Further, the behaviors of  the query is also described in an activity diagram

email: paulo@psemantica.com.