ubiquitous web applications a design perspective franca garzotto hoc- hypermedia open center...
TRANSCRIPT
Ubiquitous Web ApplicationsA design perspective
Franca Garzotto
HOC- Hypermedia Open Center
Politecnico di Milano, [email protected]
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 context-
aware web applications
Ubiquitous Web Applications (UWAs): A new class of applications that:
make (a large amount of) multimedia information accessible to the users
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 ...
Mobility & Ubiquity
Hypertextual Navigation
Operations & Transactions
Multimedia data
Multiple delivery channels
UWAUser based adaptivity (user profile awareness)Context
Awareness
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: mobilityToday, 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 MobilityMobility 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 NetworksTypically, 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)
ISP
MasterStation
Webservers
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
• 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)
Palmtop Devices
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 see-through head-mounted displays, showing information superimposed with real-world (augmented reality)– Ideally, they should allow hands-
free 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 Butterfly Visitor
The Grassoper 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: Artist Robert Rauschenberg narrates the story of his Erased de Kooning Drawing
IPAQ Gallery Explorer: Visitor watches artist Gerhard Richter on a Gallery Explorer while standing before a Richter seascape
Courtesy: Peter Samis - SF MOMA
A project of the CNR - National Research Program on Cultural al Heritage “PARNASO” (2000-’03)
MUSE (Museums and Sites Explorer) project
Università di Bologna, Cineca, Public Cultural
Heritage institutions, Private companies
Context Aware Mobile WEB Application: The MUSE system
Courtesy: T.Simon Cinotti - MUSE Project, Univ. Of Bologna
The Mobile Interactive Multimedia Illustrator
Weared with
a shoulder strap
like a camera
Radio
connected a
site server
Barracuda tablets (Intel Labs prototype)
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
INTERNET
Proxy Server
Router Firewall
Site Services
M.U.S.E. Services
SRBSRB
MUSE Network
Site Network
Courtesy: T.Simon Cinotti - MUSE Project, Univ. Of Bologna
MUSE: Main services
Servers may be located on one or more machines
RSA2 RSA2
Multimediaserver
Mailserver
SRB
RSA1
SRB
RSA1
Administration Terminal
Cd server &
accounting unit
Applicationserver
DB server
Courtesy: T.Simon Cinotti - MUSE Project, Univ. Of Bologna
MUSE: Two fruition modes
SITE SERVER
RBS
HIGH PERFORMANCE
GRAPHICS PANEL
MULTIMEDIA MOBILE
TERMINAL
basic
enhanced
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 development-maintenance 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
Operations
The Hypermedia Design Space
The Web Application Design Space
Information PresentationNavigation
Access Layer
HyperbaseLayer
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 in an operational context_2• 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
BackDeleteBack
2
… Proceed to checkout4a
3b3a
… Proceed to checkout4b
1
Add to Shopping Cart
2 items
1 item
2 items
1 item
1 item
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 implicationsvarious 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• ….
• 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
Activities and Transactions
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”
• 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_4
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
• 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.
Requirements for conceptual modeling of UWA transactions_6
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: The rationale_1
Customization as a New Design Perspective
CustomizationCustomization
Access Layer
Hyperbase Layer
Operations & Transactions
NavigationInformation Presentation
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 Contextproperties 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)
Context
getContext(String)
HistorySession 1 0..1
time
ContextProperty
get()
UserAgent
get()
User
get()
Network
get()
Location
get()
Time
get()
1
1 1 1 1
1
1
1
«ContextModel»aContextModel
Context
getContext(String)
HistorySession 1 0..1
time
ContextProperty
get()
UserAgent
get()
User
get()
Network
get()
Location
get()
Time
get()
1
1 1 1 1
1
1
1
«ContextModel»aContextModel
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
Customization Design
Stable properties
Variable properties
Customization Rules
Application SchemaApplication
Design 1
Customization Rules
Application Schema
Stable properties
Variable properties
Changing
“Context”
Changing
“Context”
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, ChangeOfBandwidth, ChangeOfLocation, ChangeOfTime….
Change of profile: ChangeOfProfile , ChangeOfInterest ….
Requirements
Customization Design
Stable properties
Variable properties
Customization Rules
Application SchemaApplication
Design 1
Customization Rules
Application Schema
Stable properties
Variable properties
Changing
“Context”
Changing
“Context”
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
Degree of Customisability
Granularity of Adaptation
Dynamic
Static
Micro Macro
Kind of Context
User
Device
Location....
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_2Open 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 ApplicationsA design perspective
Franca Garzotto
HOC- Hypermedia Open Center
Politecnico di Milano, Italy
hoc.elet.polimi.itQ&A