5
Submit/response-style interfaces Form-based user interfaces –Paper form metaphor –UI contains forms in which information can be entered –Forms can be decomposed into fields, i.e., designated places where individual values can be entered –Information of form is sent to the system Form-based UIs are often overlooked –They are not sophisticated –There are other fascinating interface metaphors (e.g. desktop metaphor) –BUT: form-based interfaces are very important in practice Submit/response-style UIs are one class of form-based interfaces Submit/response-style UIs have two kinds of interactions –Ephemeral interaction within a page (think of a webpage) –Triggering of page change (“submit”) Submit/response is form-based, but not vice versa –Web interfaces are submit/response-style –Other form-based interfaces are possible E.g. form as a constantly updated view on data: desktop databases (MS Access) –Trade-off: less features, but simple definition

10
System modelling Model: targeted translation of original into a different object that resembles the original in certain aspects Why modelling? –Reduction of complexity: models targeted to describe particular aspects Not interested in all aspects but only those seen as important –Illustration: models try to clarify the aspects they describe Original may not show interesting aspects clearly –Perspective: many models for the same original Different models for different purposes / different people Formal vs. informal models –Informal: often more intuitive (e.g. natural language) but usually ambiguous; no well-defined semantics –Formal: should be unambiguous, but sometimes complicated can easier be translated into other representation (e.g. forward-engineering) Desired properties of models –Easy to comprehend: less complex (abstract), intuitive, clearer than the original –Easy to use: inexpensive, robust, support for decomposition, annotation –Expressive / powerful: allows good prediction of the original’s properties

11
Two-Stage Interaction Ephemeral interaction within a page –Filling out a form (e.g. on a webpage) –Ephemeral: no permanent effect on the system yet Triggering of page change (“submit”) –May irrevocably update the system state –Delivers new system-generated page –DB analogy: like committing a transaction –Programming analogy: like a method call after setting the argument values

13
Dialogue Model When and what can the user submit to the system? When and what can the system show to the user (response)? Not important to model ephemeral interaction Pages: –Shown to the user on the client side –Report information –Offer possibilities of interaction (forms) to the user Screen: how a user sees a page; concrete instance of a page Forms: like paper forms; allow the user to input and submit information to actions Actions: –Active entity on the server side –Is invoked and gets its parameters through a form –Sends a result back to a page Visualized by formcharts: Action 1 Page 1 Page 2

14
Example UI: Seminar Registration System

15
Formchart for the Seminar Registration System Formcharts are state transition diagrams that are… Bipartite: client states (pages) and server states (actions) Typed: a message type for each page and each action Register ConfirmRemove Remove NewReg RemovePage RegPage Seminar server/page transition page/server transition

16
The Layered Data Model in Form-Oriented Analysis Message Model A message type for each page: for the messages sent from server actions to that client page (containing the data represented in the page) A message type for each action: for the messages sent from client pages to that server action (containing arguments for the action) Information Model Types for the information that is kept during a session or persistently in the system (i.e. in memory or a database on the server)

17
Screen diagram Close to a set of screen sketches, but adding formalism Screens are nodes Transitions (arcs) are actions that take us between screens Alternatives are annotated –one default action, unlabeled –Other actions (notably error handling) labeled with condition in curly braces

18
Form Storyboard Each rectangle defines the data type of the record submitted to the server A page image is a subgraph including a form and its accessible server actions (dashed lines) –Note that server actions can be shared (e.g., deleteLink)

20
Summary Formcharts, Form Storyboards and Screen Diagrams give us a variety of formalised views of Form Oriented Systems at different levels of detail All based on the useful division of ephemeral within-page interaction and more significant ‘page change’ interaction –Ubiquitous with Web browsers