Expressing User Interface Behavior with States and Constraints

Abstract:
Creating a good Graphical User Interface (GUI) requires more than carefully arranging the graphical elements that define its appearance; it also requires defining the interface's behavior. A GUI's behavior consists of the dynamic parts of an interface; how it changes in response to user inputs and other stimuli. It is made up of smaller interactive behaviors, which describe the behavior of specific interface components. An interactive behavior might determine how a button reacts when a user's mouse cursor hovers over and presses it or how a sliding menu appears on a touchscreen when a user swipes their finger.

In this talk, I will introduce a framework for defining interactive behaviors. This framework defines interactive behaviors using a combination of state machines and constraints. The constraints maintain relationships that specify how the user interface should look and the state machines allow the constraints' relationships to vary by the user interface state.

I will describe this framework in the context of two systems: a library for Web developers (ConstraintJS) and an interactive graphical language (InterState). In controlled laboratory experiments, the interactive language significantly improved developers' ability to write user interface code.

Bio:
Stephen Oney is a doctoral candidate at Carnegie Mellon University advised by Professor Brad Myers. His dissertation research focuses on applying Human-Computer Interaction (HCI) techniques to software development tools. Stephen completed a BS in Computer Science and Mathematics and an MEng in Computer Science at the Massachusetts Institute of Technology.