UML and Exploratory Prototyping for Developing Interactive Applications

1
UML and Exploratory Prototyping forDeveloping
Interactive Applications

• Marc Bülow, Jochen Bürger, Lars Hagge, Salvatore
  Pantó
• Deutsches Elektronen-Synchrotron,
  HamburgInformationsmanagement, Prozesse,
  Projekte (IPP)
• Presentation for theInternational Conference on
  Computing in High Energy PhysicsCHEP 2003, San
  Diego

2
Agenda

• Introduction
• Case Studya new Web-Client for a PDM system
• Building the UML Business Model
• Building the Exploratory Prototype
• Results and Experience

3
Agenda

• Introduction
• Case Studya new Web-Client for a PDM system
• Building the UML Business Model
• Building the Exploratory Prototype
• Results and Experience

4
Goals

• involve users early in specification and
  evolution of interactive software systems
• establish software engineering process which
  enables incremental development / delivery
• develop and share common vision of users and
  developers
• common source for analysis, development,
  documentation, training

5
Key Concepts

• Interactive Systems
• require humans-in-the-loop, as in e.g.
• information systems, design and simulation tools,
  virtual environments, ...
• strong focus on intelligent and ergonomic human
  computer interfaces
• generally includes software systems, robotics,
  machines, ...
• in this presentation information systems
• Prototypes
• partial implementation of a system which allows
  to investigate and decide design alternatives,
  e.g.
• acceptance, technical feasibility, performance,
  ...

6
Prototypes

• are to be thrown away
• follow different goals, e.g.
• exploratory prototype helps developing common
  vision and elicitating user requirements
• evolutionary prototoype supports building the
  system architecture
• experimental prototype enables feasibility studies

• are of different types, e.g.
• mock-up is a facade of the human computer
  interface without any functionality
• functional prototype is an implementation of a
  partial system without customizing
• pilot system is a system with limited
  functionality (use cases)
• built with different tools
• e.g. presentation tools, interface builders, 4GL
  environments, ...

7
Working with a Prototype

• create a UML model which captures the system
  usage from a users perspective
• create prototype interactive views (forms) with
  PowerPoint (or HTML, ...) which can animate the
  main usage scenarios
• evaluate and improve the prototype with different
  user groups
• evolve the UML model to provide the design
  specification, documentation, system test cases
  and tutorial material

8
Agenda

• Introduction
• Case Studya new Web-Client for a PDM system
• Building the UML Business Model
• Building the Exploratory Prototype
• Results and Experience

9
A new PDMS Web Client

• Product Data Mgmt supports
• development of (accelerator, experiment etc.)
  components
• management of documents
• PDMS components include
• repository for parts/doc. mgmt.
• workflow engine
• data converters and im-/export
• user interface for exploration, naviagation,
  viewing
• user interface
• always offers full functionality
• reflects DB structure in e.g. search forms, list
  outputs etc.
• goal use case driven, HTML

Please visit poster P37
10
Setting the Scope

• create process map to show entire functionality
• parts, document, workflow, configuration, user
  ... mgmt.
• create process hierarchy
• uses (includes) hierarchy -no functional
  decomposition
• prioritize use cases and select small initial
  scope
• here retrieve document for viewing (view
  document)

11
Agenda

• Introduction
• Case Studya new Web-Client for a PDM system
• Building the UML Business Model
• Building the Exploratory Prototype
• Results and Experience

12
1. Identify Key Tasks

• create work breakdown structure (WBS)
• show use case for each task
• contains task description
• defined result, i.e. output worth communicating
• triggered by external actor
• create include and extend relations from superior
  task
• show triggering and contributing actors
• balance use case scope

13
2. Define the Workflow

• create process diagram
• for every use case, show corresponding activity
• on entry execute equally named use case
• for each activity, determine possible
  predecessors and successors
• for each activity, define required and resulting
  information objects
• special focus on forms (GUI)
• balance with correspon-ding use case diagram

14
3. Derive Scenarios

• create scenario for each path
• draw message for every activity
• show initiator and executor
• add dialog triggers if required
• e.g. PDMS tells user to enter search criteria
• classify every object

15
3a. Add Details to Scenarios

• add objects from process diagram to scenario
• as instantiated objects
• GUI elements form, view, list, ...
• resources archive, ...
• as parameters of methods
• intermediate information, e.g. search criteria,
  ...
• classify all objects
• balance sequence and object flow diagrams

16
4. Fix Concept Definitions

• show every class on at least one class diagram
• create relations between classes which
  communicate in sequence diagrams
• add multiplicities where necessary
• balance class and sequence diagrams

17
SummaryUML Business Model
use case diagram work breakdown structure
object flow diagram workflow info-flow
sequence diagram forms and dialogs
class diagram key concepts and terms
18
Connected Views

• diagrams connected with naming conventions
• not UML standard
• naming convention for activities use cases and
  messages
• naming convention for classes on different
  diagrams
• separate viewpoints on separate diagrams
• all diagrams are to be developed in parallel

19
Agenda

• Introduction
• Case Studya new Web-Client for a PDM system
• Building the UML Business Model
• Building the Exploratory Prototype
• Results and Experience

20
Designing the GUI Forms

• business model delivers required UI
  functionality
• functionality collection of all incoming
  messages
• create visual mock-up
• use presentation tools for graphical UI design
• create a button, field, combo box or similar
  element for every method

select (d Document)
21
Animating the GUI
22
Further Modeling

• include mock-up into process model
• e.g. file attached to class
• generate documentation for selected purpose, e.g
• tutorial sequence of screenshots with
  descriptions from scenario diagramm
• test sequence numbered list of outgoing and
  incoming messages from user

23
Tools for Prototype Building

• HTML or PowerPoint for GUI mock-up
• demonstrate look feel and dialog sequence to
  users
• no system functionality provided / needed
• CASE tool for business model useful
• catches class methods from sequence diagrams
• helps maintaining consistency of diagrams
• afterwards documentation generator
• for creating e.g. process descriptions,
  tutorials, ...
• generate XML output from model
• create XSL stylesheets tuned to the different
  purposes

24
Agenda

• Introduction
• Case Studya new Web-Client for a PDM system
• Building the UML Business Model
• Building the Exploratory Prototype
• Results and Experience

25
Protoype and Resulting GUI

• prototype successfully built for PDMS
• comparable look feel
• initial effort 2 FTE for six weeks
• for creating the business model and the prototype
• including agreement on and implementation of
  method

prototype
PDMS
26
Experience

• early and useful feedback
• share vision, set priorities, prevent
  misunderstandings, ...
• basis to negotiate
• functionality, cost, time of delivery, ...
• wishes vs. necessities
• improved user acceptance
• users identify themselves with the evolving
  system
• improve learning curve
• balance prototype capabilites and technical
  constraints
• model and prototype need to be frequently
  synchronized

prototype (wish)
prototype (agreed)
27
Further ApplicationsProcess Definition

• process definition in small working group
• user support, i.e. operate hotline, perform
  system and application support, ...
• use existing trouble ticketing tool (Request
  Tracker) for internal communication
• method applied on existing system (screenshots)
• helpful for defining rules for common system
  usage

28
Further ApplicationsSystem Re-Engineering

• review of existing run control panel
• create seqeunce diagram from run coordinators
  way of working
• room for improvement rapidly identified
• helpful for software maintenance/improvement
• handle for prioritizing and coordinating changes

29
Conclusion

• exploratory prototypes are a powerful tool for
  the design of interactive systems
• early user involvment with high acceptance
• straight-forward, easy-to-teach method
• UML is an efficient modeling language
• naming conventions for connecting diagrams
• sound model architecture enables modeling for
  different goals
• visualization, software design, test, training,
  documentation, ...