User interface modeling

Last updated March 25, 2023

User interface modeling is a development technique used by computer application programmers. Today's user interfaces (UIs) are complex software components, which play an essential role in the usability of an application. The development of UIs requires therefore, not only guidelines and best practice reports, but also a development process including the elaboration of visual models and a standardized notation for this visualization.

The term user interface modeling is mostly used in an information technology context. A user interface model is a representation of how the end user(s) interact with a computer program or another device and also how the system responds. The modeling task is then to show all the "directly experienced aspects of a thing or device" [Trætteberg2002].

Modeling user interfaces is a well-established discipline in its own right. For example, modeling techniques can describe interaction objects, tasks, and lower-level dialogs in user interfaces. Using models as part of user interface development can help capture user requirements, avoid premature commitment to specific layouts and widgets, and make the relationships between an interface's different parts and their roles explicit. [SilvaPaton2003].

Languages

MARIA

MARIA XML (Model-based lAnguage foR Interactive Applications) is a universal, declarative, multiple abstraction level, XML-based user interface markup language for modelling interactive applications in ubiquitous environments.

UML

Some aspects of user interface modeling can be realized using UML. However, the language is not mainly intended for this kind of modeling, which may render the models somewhat synthetic.

UMLi

UMLi is an extension of UML, and adds support for representation commonly occurring in user interfaces.

Because application models in UML describe few aspects of user interfaces, and because the model-based user interface development environments (MB-UIDE) lack ability for modeling applications, the University of Manchester started the research project UMLi in 1998. UMLi aims to address this problem of designing and implementing user interfaces using a combination of UML and MB-UIDE.

UsiXML

UsiXML (USer Interface eXtensible Markup Language) is an XML-based specification language for user interface design. It supports the description of UI for multiple contexts of use such as Character User Interfaces (CUIs), Graphical User Interfaces (GUIs), Auditory User Interfaces, and Multimodal User Interfaces.

DiaMODL

DiaMODL combines a dataflow-oriented language (Pisa interactor abstraction) with UML Statecharts which has focus on behavior. It is capable of modeling the dataflow as well as the behavior of interaction objects. It may be used for documenting the function and structure of concrete user interfaces.

Himalia

Himalia combines the Hypermedia Models with the control/composite paradigm. It is a full user interface language, it may be used for specifying but also for running it, because of this the designer tool can categorized as a guilder.

Model types

The different aspects of a user interface requires different model types. Some of the models that may be considered for UI-modeling are:

Domain model, including data model (defines the objects that a user can view, access and manipulate through the user interface)
Navigation model, defines how the objects that a user view could be navigated through the user interface
Task model. (describes the tasks an end user performs and dictates what interaction capabilities must be designed)
User model (represents the different characteristics of end users and the roles they are playing within the organization)
Platform model (used to model the physical devices that are intended to host the application and how they interact with each other)
Dialogue model (how users can interact with the objects presentation (as push buttons, commands, etc.), with interaction media (as voice input, touch screen, etc.) and the reactions that the user interface communicates via these objects)
Presentation model (application appearance, representation of the visual, haptic and auditory elements that the user interface offers to its users)
Application model (commands and data the application provides)

UML can be used for several of the models mentioned above with varying degree of success, but it lacks support for user modeling, platform modeling and presentation model.

Approaches

There exist several approaches to modeling a user interface.

Usage-centered design

In usage-centered design, the modeling task is to show how the actual presentation of a planned system and how the user interaction is supposed to happen. This is probably the most praised approach, and it has been used successfully on a variety of small and large-scale projects. Its strengths are in complex problems.

Alternative approaches to model-based UIs

The known issues of model-based approaches include information restatement and lack of mechanisms to effectively to solve cross-cutting concerns [Cerny2013]. Model-based solutions can work well on their own, but integration with alternative approaches brings complexity in development and maintenance efforts.

Code-inspection based

These approaches are based on existing general purpose language (GPL) code bases [Cerny2012]. They inspect the code through meta-programming and assemble a structural model that is transformed to the UI. This approach addresses information restatement. These approaches does not fit to adaptive and context-aware UIs.

Generative programming

These approaches connect domain methods with GPL [Generative programming]. Cross-cutting concerns are addressed at compile-time, which does not directly accommodate future adaptive UIs needing runtime information.

Aspect-based UIs

Aspect-based solution suggested by [Cerny2013][Cerny2013a][AspectFaces] integrates advantages of code-inspection based and generative programming approaches. It inspects existing code and applies aspect oriented methods to address cross-cutting concerns. It works at runtime, reduces information restatement and at the same time separates UI concerns which allows to reuse each independent of others. In the study at [Cerny2013] authors reduce UI code by 32% through aspect-based UI approach applied to a production system. Main advantages are templating for adjusting the presentation, separate definitions of concerns and mostly generic transformation rules applicable across various data.

Content models

Models of this kind show the contents of a user interface and its different components. Aesthetics and behavior details are not included in this kind of model as it is a form of usage-centered design model.

Related Research Articles

In the industrial design field of human–computer interaction, a user interface (UI) is the space where interactions between humans and machines occur. The goal of this interaction is to allow effective operation and control of the machine from the human end, while the machine simultaneously feeds back information that aids the operators' decision-making process. Examples of this broad concept of user interfaces include the interactive aspects of computer operating systems, hand tools, heavy machinery operator controls and process controls. The design considerations applicable when creating user interfaces are related to, or involve such disciplines as, ergonomics and psychology.

In software and systems engineering, the phrase use case is a polyseme with two senses:

A usage scenario for a piece of software; often used in the plural to suggest situations where a piece of software may be useful.
A potential scenario in which a system receives an external request and responds to it.

In computing, a visual programming language or block coding is a programming language that lets users create programs by manipulating program elements graphically rather than by specifying them textually. A VPL allows programming with visual expressions, spatial arrangements of text and graphic symbols, used either as elements of syntax or secondary notation. For example, many VPLs are based on the idea of "boxes and arrows", where boxes or other screen objects are treated as entities, connected by arrows, lines or arcs which represent relations.

Extensible Application Markup Language is a declarative XML-based language developed by Microsoft for initializing structured values and objects. It is available under Microsoft's Open Specification Promise.

A user interface markup language is a markup language that renders and describes graphical user interfaces and controls. Many of these markup languages are dialects of XML and are dependent upon a pre-existing scripting language engine, usually a JavaScript engine, for rendering of controls and extra scriptability.

Windows Presentation Foundation (WPF) is a free and open-source graphical subsystem originally developed by Microsoft for rendering user interfaces in Windows-based applications. WPF, previously known as "Avalon", was initially released as part of .NET Framework 3.0 in 2006. WPF uses DirectX and attempts to provide a consistent programming model for building applications. It separates the user interface from business logic, and resembles similar XML-oriented object models, such as those implemented in XUL and SVG.

Domain-specific modeling (DSM) is a software engineering methodology for designing and developing systems, such as computer software. It involves systematic use of a domain-specific language to represent the various facets of a system.

User interface (UI) design or user interface engineering is the design of user interfaces for machines and software, such as computers, home appliances, mobile devices, and other electronic devices, with the focus on maximizing usability and the user experience. In computer or software design, user interface (UI) design primarily focuses on information architecture. It is the process of building interfaces that clearly communicates to the user what's important. UI design refers to graphical user interfaces and other forms of interface design. The goal of user interface design is to make the user's interaction as simple and efficient as possible, in terms of accomplishing user goals.

Object-oriented analysis and design (OOAD) is a technical approach for analyzing and designing an application, system, or business by applying object-oriented programming, as well as using visual modeling throughout the software development process to guide stakeholder communication and product quality.

WebML is a visual notation and a methodology for designing complex data-intensive Web applications. It provides graphical, yet formal, specifications, embodied in a complete design process, which can be assisted by visual design tools.

Object-oriented design (OOD) is the process of planning a system of interacting objects for the purpose of solving a software problem. It is one approach to software design.

The DASL Programming Language is a high-level, strongly typed programming language originally developed at Sun Microsystems Laboratories between 1999 and 2003 as part of the Ace Project. The goals of the project were to enable rapid development of web-based applications based on Sun's J2EE architecture, and to eliminate the steep learning curve of platform-specific details.

Adobe Flash Catalyst is a designers' tool for creating the user interface for rich web applications.

A single-page application (SPA) is a web application or website that interacts with the user by dynamically rewriting the current web page with new data from the web server, instead of the default method of a web browser loading entire new pages. The goal is faster transitions that make the website feel more like a native app.

ZK is an open-source Ajax Web application framework, written in Java, that enables creation of graphical user interfaces for Web applications with little required programming knowledge.

MARIA is a universal, declarative, multiple abstraction level, XML-based user interface markup language for modelling interactive applications in ubiquitous environments.

UML is a modeling language used by software developers. UML can be used to develop diagrams and provide users (programmers) with ready-to-use, expressive modeling examples. Some UML tools generate program language code from UML. UML can be used for modeling a system independent of a platform language. UML is a graphical language for visualizing, specifying, constructing, and documenting information about software-intensive systems. UML gives a standard way to write a system model, covering conceptual ideas. With an understanding of modeling, the use and application of UML can make the software development process more efficient.

The Unified Modeling Language for Interactive Systems (UMLi) is a conservative extension of the Unified Modeling Language for user interface design. UMLi was developed in the period between 1998 and 2002 as part of Paulo Pinheiro's Ph.D. Thesis at the University of Manchester. UMLi is based on model-based user interface development environments (MB-UIDEs), which provide the capability to design and implement user interfaces in a declarative and systematic way.

<span class="mw-page-title-main">Interaction Flow Modeling Language</span>

The Interaction Flow Modeling Language (IFML) is a standardized modeling language in the field of software engineering. IFML includes a set of graphic notations to create visual models of user interactions and front-end behavior in software systems.

Sparx Systems Enterprise Architect is a visual modeling and design tool based on the OMG UML. The platform supports: the design and construction of software systems; modeling business processes; and modeling industry based domains. It is used by businesses and organizations to not only model the architecture of their systems, but to process the implementation of these models across the full application development life-cycle.

References

[Paternò 2005] – F Paternò, Model-based tools for pervasive usability, Interacting with Computers 17 (3), 291-315
[Trætteberg2002] – H. Trætteberg, Model-based User Interface Design, Doctoral thesis, Norwegian University of Science and Technology, 2002
[SilvaPaton2003] – P. Pinheiro da Silva, N. W. Paton, User Interface Modeling in UMLi, Stanford University / University of Manchester, 2003
[Markopoulos1997] – P. Markopoulos, A compositional model for the formal specification of user interface software, Doctoral thesis, Queen Mary and Westfield College University of London, 1997
[Trevisan2003] – D. Trevisan, J. Vanderdonck, B. Macq, Model-Based Approach and Augmented Reality Systems, Université catholique de Louvain, 1348 Louvain-la-Neuve, Belgium, 2003
[wwwUMLi] – The Unified Modeling Language for Interactive Applications
[Cerny2013] – Černý, T. - Čemus, K. - Donahoo, M.J. - Song, M.J.: Aspect-driven, Data-reflective and Context-aware User Interfaces Design (page 53). In: ACM SIGAPP Applied Computing Review [online, 2013, vol. 13, no. 4, p. 53-65, ISSN 1559-6915.
[Cerny2013a] – Černý, T. - Donahoo, M.J. - Song, E.: Towards Effective Adaptive User Interfaces Design, Proceedings of the 2013 Research in Applied Computation Symposium (RACS 2013), Montreal: ACM, 2013, ISBN 978-1-4503-2348-2.
[AspectFaces] – "AspectFaces". Coding Crayons s.r.o. Archived from the original on 2 Feb 2019.{{cite web}}: CS1 maint: unfit URL (link)
[Cerny2012] – T. Cerny and E. Song. Model-driven Rich Form Generation. Information: An International Interdisciplinary Journal, 15(7, SI):2695–2714, JUL 2012.
[Generative programming] – Krzysztof Czarnecki and Ulrich W. Eisenecker. 2000. Generative Programming: Methods, Tools, and Applications. ACM Press/Addison-Wesley Publ. Co., New York, NY, USA.

This page is based on this Wikipedia article
Text is available under the CC BY-SA 4.0 license; additional terms may apply.
Images, videos and audio are available under their respective licenses.