Ubiquitous Web Applications
A design perspective
Franca Garzotto
HOC- Hypermedia Open Center
Politecnico di Milano, Italy
garzotto@elet.polimi.it
Outline
•
•
•
•
•
•
UWA definition
Enabling Technologies (A touch of)
Examples of UWA applications
Our focus: designing UWA’s
Conclusions
Q&A
Outline
• UWA definition
– the evolution of the web from an application view point
– UWA and the convergence of application paradigms
•
•
•
•
•
Enabling Technologies (A touch of)
Examples of UWA applications
Our focus: designing UWA’s
Conclusions
Q&A
The Evolution
• from web based hypertexts to web based hypermedia
• from read-only web sites to web applications
(navigation + operations)
• from a single delivery channel (i.e., the PC) to
multiple delivery channels (PDA, WAP, WebTV, ….)
• from static delivery devices to mobile delivery
devices
• from one-size-fit-all web sites to adaptive or
adaptable web sites or apps
• from profile-aware web applications to contextaware web applications
Ubiquitous Web Applications (UWAs):
A new class of applications that:
make (a large amount of) multimedia
accessible to the users
information
provide “operational” services
support some form of transactional behavior
provide a variety of interaction paradigms (e.g.
navigation, query, search, operation invocation, etc.)
Ubiquitous Web Applications (UWAs):
A new class of applications that:
 are multi-channel, in the sense that they are
available on a variety of different devices, using
different connection infrastructures
 are ubiquitous, in the sense that they “would like”
to be accessible anywhere at anytime.
 are used by different categories of users (each
one with different characteristics and needs) in
different situations of use
The convergency ...
Hypertextual
Navigation
Context
Awareness
Multimedia data
UWA
User based
adaptivity (user
profile awareness)
Operations &
Transactions
Mobility &
Ubiquity
Multiple delivery
channels
Outline
• UWA definition
• Enabling Technologies (A touch of)
– mobility
– wireless communication
– mobile divices
•
•
•
•
Examples of UWA applications
Our focus: UWA design
Conclusions
Q&A
Enabling Technologies
• the web
• new architecture and programming paradigms for web
based application execution
– data base driven sw architectures
– Java technology
– ….
• Mobile technology
Enabling Technologies: mobility
Today, technological advances are
shaping a new computing environment
where the user is free from the need to
work with the computer sources at a
specific location, and is even enabled to
work while on the move
Courtesy: Patricia Marti - HIPS project (Univ. Of Siena)
Courtesy: XEROX PARC
Mobility: a New Paradigm...
often called also mobile computing
– Enabled by
• advances in wireless communications,
• the increasing availability, miniaturization, and
affordability of portable devices
– Motivated by
• increasing demand for mobile communication, as
witnessed by the pervasiveness of cellphones
– Accomplished through
• a wide range of enabling technologies and possible
modes of operations, still to be shaped by products
Different Kinds of Mobility
Mobility means different things to different people:
• personal mobility
– the ability of a user to move from one terminal to
another without experiencing service disruption, and/or
without perceiving a change in the application context
(the application “follows” the user)
• logical mobility
– the ability of software programs to migrate across the
hosts of a computer network (mobile code or mobile
agents)
• physical mobility
Physical mobility
• the ability for the user to move from one
device to another, or to move with his/her
own device without perceiving a change in
the application context
• achieved by three main “technological
paradigms”:
–nomadic computing
–base station mobility
–ad hoc networking
Nomadic Computing
• Users connect to the
network from arbitrary
and changing locations,
• … are not permanently
connected, and …
• … do not necessarily
benefit of wireless links:
they carry out most
network-related
functions at a fixed
location
Base Station Mobility
• Users move from site to
site while retaining
connectivity (and identity)
during movements, and
• … exploit wireless links
to connect to a wired
infrastructure, that
carries out most of the
computation and
communication (typically
including routing)
• Mobile nodes act as the
leaves of the architecture
Ad-Hoc Networking
• It is the most radical
scenario for mobility,
where no wired
infrastructure is available:
communication takes place
entirely through the
wireless network
Wireless Communication
Wireless communication is enabled by
essentially two media:
• radio
• infrared
Wireless Infrared Communication
In general, infrared technology is
– restricted to very short distances
– subject to line-of-sight limitation
– is now of common use for :
• interconnecting devices and peripherals (e.g., PC with
PDA, printer, or cellphone)
• mobile applications where short range is actually
desirable (E.g., experimental museum walkthroughs
where people standing in front of a painting get
information about it automatically fetched on their
PDA)
Wireless Radio Communication
• Used by the majority of mobile wireless
technology
• Impredictable impairment effects caused by:
– waves reflected by ground and obstacles arrive to
the receiver out of phase, and summed to the direct
signal;
– Transmitters transmitting too close, or with a signal
too powerful, or on the same frequency
– Background noise (e.g., thermal) depending on the
receiver sensitivity
– Atmospheric noise (e.g., caused by storms) can
scramble the signal
– Industrial noise: generated by all electric equipment
Wireless Networks
Typically, wireless networks are conceived as
a replacement of conventional technologies
for the traditional kinds of networks:
– Wide area networks (WAN)
• Cellular phones, satellites
– Local-area networks (LAN)
• 802.11, HiperLAN
– Metropolitan/Campus-wide area networks (MAN):
• Wireless routers, Wireless Local Loop
– Personal area networks (PAN):
• seamless interconnection of a user’s device with other
devices in the immediate surroundings
• Bluetooth
Satellite-based Wireless WAN
• The use of small satellites to create a WAN
infrastructure connecting several geographically
dispersed LANs has become a standard option
for large organizations
– Easy to support mobile workers, e.g., truck drivers
• Satellites support also the Global Positioning
System (GPS)
Master
Station
Web
servers
ISP
Internet
Bluetooth
• Developed by a consortium established in 1998
by Ericsson, Nokia, IBM, Toshiba, Intel
– The main objective is to enable straightforward
connectivity among a user’s devices like PDA,
cellphone, laptop, avoiding cumbersome cable
connections and configuration procedures, with a
low-cost, single-chip solution
– The Bluetooth 1.1 specifications were released in
February 2001, the first products are appearing
Mobile Devices
• Labtops
• PDA (Personal Digital Assistant)
– Emerged in 1993 as a data organization and
communication devices, with specialized OS and
GUI, and handwriting recognition. The initial
products fell short of expectations, and suffered
from the rapid growth of the laptop market
– Modern PDAs benefit of the technological
advances of wireless communication (but energy
supply is still a major bottleneck)
– Thee main PDA classes
• palmtops
• hadheld
• communicators
Palmtop Devices
• typically very small (to fit in a pocket)
• a pen-based user interface , no keyboard
• Expansions for wired and wireless LAN and
modems, cellular telephony, and GPS are available
• a rechargeable battery (or common AA batteries)
Handheld Devices
• bigger in size
• with a wider screen
and keyboard (+
pen-based
interfaces - usually)
Communicators
• an attempt at combining the
concept of PDA with a
cellular phone, thus reducing
the number of devices and
providing the PDA with
ubiquitous connectivity
• They typically support WAP
Some Fancier Portable
Appliances
New Frontiers: Wearable Computing
• “a computer that is always with you,
is comfortable, and easy to keep and
use, and unobtrusive as clothing”
• Prototypes typically include a seethrough head-mounted displays,
showing information superimposed
with real-world (augmented reality)
– Ideally, they should allow handsfree operation, employing voice
recognition techniques
• Main applications: military and
industrial environments
Issues in Mobility_1
• Quality of service and performance in general
is impacted by
– Dynamic topology causes instability disconnections are frequent
– Links are bandwidth-constrained, of variable
capacity, interference-prone, and possibly
asymmetric
• Energy-constraints
– Portable devices are operated with batteries, and
often disconnection is forced by the user to
increase autonomy
• Wireless vulnerability and limited security
– The ease of setting up and joining a wireless
network is at the same time a vulnerability of the
overall system
Issues in Mobility_2: Applications
Hardware, communication technology,
infrastructures, is evolving at a very fast pace,
pushed by market demands
BUT
which applications?
The potential coming from mobile technology is
still largely to be explored
Outline
•
•
•
•
•
•
UWA definition
Enabling Technologies (A touch of)
Examples of UWA applications
Our focus: designing UWA’s
Conclusions
Q&A
UWA examples
• mobile application on PDA
– Xerox PARC: PDA Electronic Guidebook for
Filoli Historic House
• adaptive/context aware mobile application on
PDA
– HIP project - University of Siena : Civic
Museum Touristic Guide
• multi-devices web application (PDA, PC,
– S. Francisco MOMA “Point of Departure”
• context-aware mobile web application
– CNR MUSE project
The Xerox PARC Electronic Guidebook
Courtesy:
The Xerox PARC Electronic
Guidebook
• Handheld color PDA
• Pictures of objects
• Tap on objects to get
short descriptions
– Audio or text option
– If miss, outlines
appear
• Press button to
change viewing
perspective
Context Aware Adaptive
Application:
The
Tourist
Guide at
the Civic
Museum
in Siena
Courtesy: Patricia Marti HIPS project (Univ. Of Siena)
Listening, Watching, and
Reading...
Courtesy: Patricia Marti HIPS project (Univ. Of Siena)
Different visitor profiles induce different
forms of adaptivity
The Ant Visitor
The Fish Visitor
The Grassoper Visitor
The Butterfly Visitor
Multi-channel Web Application: The
SF Moma “Points of Departure”
Making Sense
of Modern Art:
Points of Departure
section
Courtesy: Peter Samis - SF MOMA
The SF Moma
“Points of Departure”
IPAQ Gallery Explorer: Visitor
watches artist Gerhard Richter on
a Gallery Explorer while standing
before a Richter seascape
IPAQ Gallery Explorer:
Artist Robert Rauschenberg narrates the story
of his Erased de Kooning Drawing
Courtesy: Peter Samis - SF MOMA
Context Aware Mobile WEB
Application: The MUSE
system
MUSE (Museums and
Sites Explorer) project
A project of the CNR National Research Program
on Cultural al Heritage
“PARNASO” (2000-’03)
Courtesy: T.Simon Cinotti - MUSE
Project, Univ. Of Bologna
Università di Bologna, Cineca, Public Cultural
Heritage institutions, Private companies
The Mobile Interactive Multimedia
Illustrator
Barracuda tablets (Intel Labs prototype)
Weared with
a shoulder
strap like a
Radio
connected
a site
server
camera
Courtesy: T.Simon Cinotti - MUSE
Project, Univ. Of Bologna
MUSE: Navigating Virtual
Pompei
Courtesy: T.Simon Cinotti - MUSE
Project, Univ. Of Bologna
MUSE: Basic topology
Proxy Server
M.U.S.E.
Services
MUSE Network
INTERNET
Router
Firewall
SRB
SRB
Site
Services
Site Network
Courtesy: T.Simon Cinotti - MUSE
Project, Univ. Of Bologna
MUSE: Main services
Administration
Terminal
Application
server
DB server
SRB
Multimedia
server
Cd server
&
accounting unit
Mail
server
Servers
may be
located on
one or
more
machines
SRB
RSA1
RSA1
RSA2
RSA2
Courtesy: T.Simon Cinotti - MUSE
Project, Univ. Of Bologna
MUSE: Two fruition
modes
SITE
SERVER
basic
RBS
HIGH
PERFORMANCE
GRAPHICS
PANEL
enhanced
MULTIMEDIA
MOBILE
TERMINAL
Courtesy: T.Simon Cinotti - MUSE
Project, Univ. Of Bologna
Outline
•
•
•
•
UWA definition
Examples of UWA applications
Enabling Technologies (a touch of)
Design Issues
– motivations
– integrating navigation & operations
– customization
• Conclusions
• Q&E
Motivations for “investing” on
design
Assuming we have the “perfect” technology:
– The effectiveness and quality of WAs depends, to a large
extent, upon the quality of the requirements-design process
– The quality, effectiveness, and efficiency of the design
process depend, at large, upon the design methodology ant
the corresponding design tools
– The effectiveness and the efficiency of the developmentmaintenance cycle of WAs depend, at large, upon the quality
of the design.
Our approach to UWA design
• User-Oriented
– designing UWAs properties in the user perspective, i.e.,
modeling aspects that are directly perceived by end
users
– see conceptual design in DBs
• System-oriented
– designing UWAs properties in the system perspective,
i.e., modeling aspects that are of interest from an
implementor’s perspective
UWA: novel design issues
….w.r.t. traditional web site design or
traditional application design?
• Integrating “operations” and navigation
• implications of mobility and ubiquity on
“operational state “
• user profile + context awareness into
account: customization
Integrating operations and
navigation
• UWAS enable users not only to search and browse
information, but also to perform complex workflows
of activities, involving possibly sophisticated data
processing and intensive data modifications
• from a user experience perspective, NOT just an
add-on
• the navigation paradigm of interaction and the
operational paradigm of interaction are integrated
A new design space
The Hypermedia
Design Space
Access
Layer
Hyperbase
Layer
Information
Navigation
Presentation
Operations
The Web
Application
Design Space
Atomic Operations & Activities
• Atomic Operation: Perceived by the user (and
the system) as a single elementary
interaction
– add item to a shopping bag
– change the order in a list of items
• Activity: a complex flow of atomic operations
or sub-activities that are intended to meet a
given goal
– buy a product
– select papers for a conference
Atomic Operations
Various categories of effects (oftentimes
combined) must be specified by designers:
• information effects
– e.g., change currency from dollar to euro
• navigation effects: modify the current position
of the user
– once the information effects are achieved, the user
is automatically taken to a different node
• presentation effects: affect the lay-out
– e.g., change the visual order of items in a list
Activities
• Activity: a complex flow of atomic operations
or sub-activities that are intended to meet a
given goal
– buy a product
– select the papers for a conference
–…
• An activity typically involves both atomic
operations and “follow-link” (i.e. navigation)
Designing activities: several
degrees of integration with
navigation
• weak integration
• strong integration
Strong integration
• Navigation mechanisms and Activities share
hypermedia structures ("nodes" or "pages”
and links)
• Users can access hypermedia structures both
while they are just browsing and while they
are executing a non-navigational activity
– example: before confirming a purchase during a
"check out" operation in a virtual shop, the user is
allowed to navigate from the node displaying the
list of products to any product he has chosen to
buy
Weak integration
• navigation and operations are totally
independent
• They only share the nodes from which
the operations can be invoked, but after
invoking an operation, the user is
isolated from the surrounding
hyperspace until the operational activity
is over
– example: Amazon check out
Strong integration: design
problems
• Need to modify the “follow-link”
semantics when executed in the contex
of an activity
• Different behaviours associated to
"follow- link"
Redefining navigation in an
operational context_1
• follow-link = ABORT
– the current activity is interrupted
• e.g. the user must start again from the
beginning if he wants to continue buying the
same set of products
• follow-link = SUSPEND
– the current activity is suspended without any
modification of the navigation space, until the user
returns (no matter how) to the position where the
activity has been suspended
Redefining navigation
operational context_2
in
an
• follow-link = SUSPEND & MODIFY
– the current activity is suspended and the navigation
space is temporarily modified until the user returns
to the position where the operation has been
suspended.
– two types (oftentimes combined) of modifications of
the navigation structures:
• restriction of the navigation space (e.g., hiding all links outgoing from a
product that are not relevant for the purposes of the current check-out
process);
• creation of new (temporary) links that induce the user to follow some
special paths (e.g., building a guided tour across all products in the
purchase list; linking each product in the list to other products that the site
owner wants to promote; etc.).
Weak integration
• Complex behaviour may occur since operational
and navigational mechanisms share the same
presentation device, i.e., the browser.
• The interaction capabilities implicit in the browser
have a built-in semantics:
– natural and correct in the context of pure navigational
applications, but
– misunderstood or even wrong when it interferes with
operational behaviour.
Example: the Amazon bug
Back
Continue
shopping
Proceed to
checkout
Delete
1
Add to Shopping Cart
2
2 items
Delete
Back
Back
3a
3b
1 item
4a
… Proceed to checkout
1 item
1 item
… Proceed to checkout
4b
2 items
The Amazon bug: discussion
• By backtracking, users can return to a page that
shows the results of a previously executed operation
but has been modified later by other operations, and
invoke an operation there.
• In the user understanding, that operation is applied to
the results shown in the page he is seeing: He
interprets the "back" as "undo".
• But for the application, the operation parameters
correspond to the last state of that page (e.g., the
state of the shopping bag resulting from the last "bag
update" performed by the user).
The Amazon bug: design
implications
various alternatives for the designer:
– redefine the meaning of back as undo
(information state update)
– modify the meaning of the history, e.g.,
• “pages” are refreshed
• critical pages expires
• ….
Activities and Transactions
• need of defining the rules which
describe the semantics of activities and
govern their execution
• in the data base world, these rules are
defined by choosing a proper
transaction model
What is the proper transaction
model for activities in
ubiquitous web applications?
– Still largely an open issue
– Need to relax some of the ACID properties
of traditional transaction models (invented
for short operational processes)
– no winner yet
Requirements for conceptual
modeling of UWA transactions_1
• LONG-LIVED ACTIVITIES
– interplay of navigation and operation
execution: user may start navigating which
performing a complext activity
– multidelivery
• user may start a process on one device and
continue in another device
– mobility
• user may get disconnected during the process
(disconnections may be accidental or
intentional e.g.. for power-saving reasons)
Requirements for conceptual
modeling of UWA transactions_2
• STRUCTURED ACTIVITIES
– mobility (limited memory, processing
power, and battery)
• the activity is split at design level: user is forced
to perform a defined part of the process on a
mobile device and continue it on a stactionary
device
– multi-server execution
• resources to perform an activity may be
distributed on more than one server
Requirements for conceptual
modeling of UWA transactions_3
• COOPERATION and GROUP WORK
– using the web is not a lonely activity and
more, but is becoming a social activity
– communities of individuals are allowed to
“do things together”
Requirements for conceptual
modeling of UWA transactions_4
• preserving the state is a crucial need
– the application is able to store, suspend
and resume transactional conversations
across different devices, servers, portions
of the application, in order to minimize loss
of work and maximize user service quality.
• the notion of transaction state is more
complex than in traditional DB
transaction
Requirements for conceptual
modeling of UWA transactions_5
• current extended transaction models are
the starting point but not fully satisfactory
– transactional workflows particularly promising
• need of integrating of the features of the
different models
Requirements for conceptual
modeling of UWA transactions_6
• not a single transaction behaviour but multiple
transaction behaviors should be offereb to the
designer
– there must be options available to the designer for
defining rules to regulate the transaction behaviour
– During the design process the designer selects,
specifies and describes the level of transaction
complexity and the corresponding support that he
wishes to offer to the user.
– The transactional behavior may range from very
simple to extremely complex.
Customization: The rationale_1
Different requirements (in terms of which
content and services ar eprovides, and how)
are induced by
• different (possibly evolving) user profiles
• different devices
• different situations of use in their logical, geographical,
temporal, and physical perspective
Different requirements  different design
solutions
CUSTOMIZATION DESIGN: the process of
capturing the proper design solutions fitting
the overal set of requirements
Customization as a New Design
Perspective
Access Layer
Hyperbase
Layer
Operations &
Transactions
Information
Navigation
Presentation
Customization
History of Customization
• Adaptive user interfaces
• Information filtering
• Adaptive hypertext and hypermedia
• Mobile computing and location aware systems
• ….
Today’s web applications would require many of
those customization issues already discussed
by these various different communities
There exists, however, no general approach
covering all these issues
Customization „Parameters“
•
•
•
•
•
User
Environment
Session
History
….
Customization „Parameters“ :
User
users profile, preferences, interests,…
• information that is voluntarily entered by the user
describing the user's preferences
• information that is transparently acquired by the
system including, e.g., usage statistics
Customization „Parameters“ :
Environment
Agent:
information about the device and browser: the capabilities of
devices, e.g., display size, memory, operating system and the
browsers running on these devices, e.g., kind of browser and
version number.
Network Context
properties concerning the network (e.g., the bandwidth)
Location Context:
information about the location where an application is accessed
Temporal Context:
timing constraints such as opening hours of shops or timetables
of public transportation. certain timing constraints
Customization Factors:
History and Session
• Session
possibly consisting of a sequence of active or
suspended transactions, or the current values of the
context properties for a given interaction (e.g., the
most recent)
• History
information about historic interactions (navigation)
A context model (UML spec)
«ContextModel»
aContextModel
Session 1
0..1 History
time 1
1
Context
getContext(String)
1
1
1
UserAgent
User
get()
1
get()
1
1
Network Location
get()
get()
Time
get()
ContextProperty
get()
Courtesy: UWA project - University of
Linz
Examples of customization
needs (in a tourist guide)
– Navigation: start navigation from a default point directly , or require
specification of preferences and define the proper starting point
(USER)
– Information: Display the night-bus schedule or the subway schedule
(TIME)
– Information: Display a map related to the actual position of the user
(LOCATION)
– Layout: Render picture depending on the network throughput
(NETWORK)
– Information: Depending on the device, display full details about an
item, or abbreviation of first name if WAP (DEVICE)
– Navigation: presenting the collection of relevant sights in form of a
list (index) for the web and as a guided tour in case of WAP (DEVICE)
How to capture customization
needs?
The conventional approach
– design different applications for different categories of users,
different devices, different situations of use
An alternative approach: rather than designing each
single “version” in isolation,
– designing a family of applications based on the same
universe of information
– providing different designs (different application schemas)
where there are macro-differences in the situation of use
– defining design modifications to capture fine grained
requirements by means of customization rules
Requirements
Changing
Changing
“Context”
“Context”
Customization
Design
Customization Rules
Customization Rules
Variable
properties
Application
Design 1
Stable
properties
Variable
properties
Application
Schema
Application
Schema
Stable
properties Application
Design N
Stable “Context”
Stable “Context”
Modeling customization rules
a proposal
• event/condition/action (ECA)
• Event.
– determines the events which are able to trigger the rule.
•
Condition.
– is evaluated as soon as the rule is triggered by an appropriate event and
evaluates whether (and which) adaptation is actually desired.
•
Action.
– is responsible for defining which design modifications must be taken
Rule Properties.
priority, consistency…. may affect the rule activation
Customization Rules:
Triggering Events (examples)
•
Change of context:
– ChangeOfDevice,
ChangeOfTime….

ChangeOfBandwidth,
Change of profile:
 ChangeOfProfile , ChangeOfInterest ….
ChangeOfLocation,
Requirements
Changing
Changing
“Context”
“Context”
Customization
Design
Customization Rules
Customization Rules
Variable
properties
Application
Design 1
Stable
properties
Variable
properties
Application
Schema
Application
Schema
Stable
properties Application
Design N
Stable “Context”
Stable “Context”
The designer dilemma in the
customization design process
• what in customized design (different
schemas) ?
• what in customization rules ?
• what is the proper execution model
– static vs dynamic customization
Customization Dimensions
Courtesy: UWA project - University of
Linz
Outline
•
•
•
•
•
•
UWA definition
Examples of UWA applications
Enabling Technologies (a touch of)
Design Issues
Conclusions and open issues
Q&E
Conclusions and open
issues_1
• Wireless technologies and portable devices
are enabling “anytime, anywhere” styles of
use of computers
• From an application perspective, the potential
coming from integrating mobile technology
and the web is still largely to be explored
• A wide spectrum of open research issues
Conclusions and open
issues_2
Open research issues from a conceptual design
perspective:
• operation modeling
• transaction modeling
• customization modeling
• mapping conceptual models into
implementation models
• tools that support design and mapping
• …..
Credits_1
The UWA project IST-2000-25131 (Jan.
2001-Dec.2002)
–
–
–
–
–
–
–
–
–
–
HOC-Politecnico di Milano (I)
Atlantis spa (I)
IFS-University of Linz (A)
Siemens Mobile Computing Dept. (A)
MUSIC-Technical University of Crete (G)
University College of London (UK)
University of Italian Switzerland (CH)
Robotiker (E)
Punto Comercial (E)
Banca 121 (I)
Credits_2
• Gian Pietro Picco, Mobile Computer Group at
Politecnico di Milano
• The MUSE Project (T.S. Cinotti -University of
Bologna)
• Xerox PARC (Allison Woodruff)
• THE SF MOMA (Peter Samis)
• The IST project HIPS at University of Siena
(Patricia Marti)
Ubiquitous Web Applications
A design perspective
Franca Garzotto
Q&A
HOC- Hypermedia Open Center
Politecnico di Milano, Italy
garzotto@elet.polimi.it
hoc.elet.polimi.it