Design and Development of Multidevice User Interfaces through Multiple Logical Descriptions

1
Design and Development of Multidevice User
Interfaces through Multiple Logical Descriptions

• Jonathan Woodbridge

Mori G., Paternò F., Santoro C. "Design and
Development of Multidevice User Interfaces
through Multiple Logical Descriptions" IEEE
Transactions on Software Engineering, V.30 n.8,
p.507-520, August 2004
2
References

• Paternò F., Mancini C., Meniconi S.
  ConcurTaskTrees A Diagrammatic Notation for
  Specifying Task Models" Proceedings of the IFIP
  TC13 Sixth International Conference on
  Human-Computer Interaction, pp. 362369, July
  14-18, 1997

3
Outline

• What is a multi-platform (nomadic) application?
• What issues do we face when integrating user
  interfaces with large scale multi-platform
  applications?
• Proposed solution
• Tools
• Results
• Conclusions

4
What is a multi-platform Application?

• A multi-platform (or nomadic) application, is one
  that runs on several different types of target
  devices such as
• PCs
• Cell Phones
• PDAs
• Vocal Systems
• Etc...
• For example, TiVo can be configured through your
  TV, PC, and your computer.

5
But why is integration so hard for multi-platform
applications?

• Defining an integration point between a system
  and UI for several platforms is difficult at best
• Different platforms offer different attributes
  and restraints.
• Developing one user interface that fits the need
  for all platforms is impossible
• Since multiple UIs are required, multi-platform
  applications become very complex and contain a
  plethora of tasks
• Tasks-to-platforms are many-to-many
• Not all tasks can be done on all platforms (or in
  the same way)?

6
Other Solutions

• Create a user interface for each platform
• High development and maintenance costs
• Perform auto transformations of a user interface
  from one platform to another
• Low cost and less human error, but a poor user
  experience
• Style sheets
• Similar to above, but assumes the same tasks for
  each platform

7
Proposed Solution

• Take a model based approach based on several
  abstractions
• Hide low level details through these abstractions
  to ease integration woes
• One model, many interfaces

Taken from Mori G., Paternò F., Santoro C.
"Design and Development of Multidevice User
Interfaces through Multiple Logical Descriptions"
IEEE Transactions on Software Engineering, V.30
n.8, p.507-520, August 2004
8
The Method
Taken from Mori G., Paternò F., Santoro C.
"Design and Development of Multidevice User
Interfaces through Multiple Logical Descriptions"
IEEE Transactions on Software Engineering, V.30
n.8, p.507-520, August 2004
9
But how do we apply this model to multiple
platforms?

• They observed that it is not possible nor
  desirable to perform the same tasks on all
  platforms
• Create a taxonomy of the relations between tasks
  and platforms
• Each family of devices should be bound to certain
  types of tasks and interface objects

10
Taxonomy of Devices and Tasks

• Same task on multiple devices in the same manner
• Task only meaningful on one platform
• Tasks on one platform enable features on another
• Same tasks on many platforms, but performed in a
  different way

11
Example of same tasks through multiple interfaces
Taken from Mori G., Paternò F., Santoro C.
"Design and Development of Multidevice User
Interfaces through Multiple Logical Descriptions"
IEEE Transactions on Software Engineering, V.30
n.8, p.507-520, August 2004
12
Tools

• ConcurTaskTrees Environment (CTTE)
• TERESA

13
ConcurTaskTrees Environment

• Creates a hierarchical description of task models
  as well as specifies relations among them
• Such as enabling, disabling, concurrency, order
  etc...
• Identification of objects bound to tasks and how
  they communicate (interface)
• Create a platform attribute that specifies each
  task's relevant platforms

14
Types of Tasks
Paternò F., Mancini C., Meniconi S.
ConcurTaskTrees A Diagrammatic Notation for
Specifying Task Models" Proceedings of the IFIP
TC13 Sixth International Conference on
Human-Computer Interaction, pp. 362369, July
14-18, 1997
15
ConcurTaskTrees Environment
Paternò F., Mancini C., Meniconi S.
ConcurTaskTrees A Diagrammatic Notation for
Specifying Task Models" Proceedings of the IFIP
TC13 Sixth International Conference on
Human-Computer Interaction, pp. 362369, July
14-18, 1997
16
Defining Objects

• Two types of objects are defined
• Perceivable Interacts with the UI
• Application Interacts with the Core

17
ConcurTaskTrees Environment

• Simplifies system's UI interface by
• Filtering tasks for each type of platform
• Giving a higher meaning to the systems interface
• Maps tasks to objects and defines their
  communication
• A key integration point between system and UI

18
TERESA

• TERESA is an automation tool that takes tasks
  defined by CTTE and auto generates UIs
• Allows for differing levels of input by the user
• Uses XML to produce several logical levels
• Currently web oriented, but should work on other
  languages such as JAVA

19
TERESA

• TERESA first creates Presentation Task Sets
  (PTSs)
• These are a set of tasks performed during the
  same period of time.
• And transitions from one PTS to another

20
PTSs

• The TERESA tool runs a number of heuristics on
  CTTE output to optimize UIs
• Attempts to merge PTSs and minimize transitions
• Of course, these heuristics are applied less as
  the platforms become more restrained
• Compare PCs to Cell Phones

21
PTSs
Taken from Mori G., Paternò F., Santoro C.
"Design and Development of Multidevice User
Interfaces through Multiple Logical Descriptions"
IEEE Transactions on Software Engineering, V.30
n.8, p.507-520, August 2004
22
TERESA

• Next TERESA maps the PTSs to abstract UIs
• For example, an area (such as a web page) may
  consist of five entry interactors and a
  submission trigger
• Of course, this depends on the platform.
• For example, vocal systems can only have one
  input at a time

23
Abstract Interfaces

• Each presentation is represented by one PTS
• We must map each task into abstract
  interactors
• Such as input, output, input/output
• Next, we add sequencing and hierarchy of tasks
• For example, more important tasks may be more
  visible to the user

24
TERESA

• Next, TERESA maps the abstract UI to concrete
  interfaces
• For example, entry interactor-gttext entry
• Finally, this concrete representation is used to
  automatically generate the UI source code

25
Automation

• Teresa was designed to allow as much or as little
  automation in the design process
• Attributes, such as PTSs, hierarchy, volume,
  etc, are all configurable by the developer

26
Results

• Held experiment where several developers were
  tasked to create a simple e-agenda application
  for both a PC and mobile device
• Several metrics were collected to evaluate
  efficiency
• Tool was very effective for prototyping, but was
  still work for commercial quality UIs
• Developers were able to create and integrate UIs
  in extremely short times

27
Conclusions

• This method offers a way to model system tasks to
  simplify the development and integration of
  multi-platform UIs
• Platforms are also modeled (through a taxonomy)
  to find relevance between task and platform
• By applying meaning to system tasks and
  platforms, the program was able to make
  intelligent choices on how UIs should be developed