Work on Migratory Interfaces at HIIS / ISTI-CNR. Fabio Paternò, Carmen Santoro, Antonio Scorcia

Transcription

1 Work on Migratory Interfaces at HIIS / ISTI-CNR Fabio Paternò, Carmen Santoro, Antonio Scorcia ISTI-C.N.R. HIIS Laboratory Pisa, Italy

2 Why Migratory Interfaces Our life is becoming a multi-device experience One of the main source of frustration is that we need to restart for each device change Need for continuous access to interactive services across various devices Migratory user interfaces can transfer among different devices (from source devices to target devices), so as to allow the users to continue their tasks Application domains such as shopping, bids for auction on line, games, making reservations W3C UWA Meeting - Pisa - July

3 The Core of Migration Migration = Device Change + Adaptation + Continuity W3C UWA Meeting - Pisa - July

4 The Migration Service Platform Application User Interface Application logic Migration Service Platform Network Support Migratory Application User Interface Application logic Migration = Device Change + Adaptation + Continuity W3C UWA Meeting - Pisa - July

5 The Migration Process Device Discovery When to Migrate: Migration Trigger (User or System or Mixed initiative) Where to Migrate: Identification Target and its resources What to Migrate: User interface and/or applicat. logic How to Migrate: Adaptation (depending on the type of target) State Persistence: Source state extraction and association to target version Activation in the target device: at the point in which the user left off on the source device W3C UWA Meeting - Pisa - July

6 Our Approach Model-based approach and XML-based languages for describing UIs at different abstraction levels: Abstract UIs (platform-independent UIs) Concrete UIs (platform-dependent UIs) Different phases: Device discovery (and gathering their characteristics) Reverse engineering phase for obtaining a Concrete UI from the implementation Maintaining the state of the UI (script) Semantic redesign from source CUI to target CUI Final UI generation from target CUI to implementation language W3C UWA Meeting - Pisa - July

7 Logical User Interface in TERESA XML Abstract Concrete Presentation1 Grouping Selection Edit Navigator.. Connection Defines some concrete aspects of the user interface Provides indications for the implementation of abstract interactors in the target platform - <interactor id="go_to_section3">- <interaction category="interaction">- - <control type="control"> - <navigator object="navigator"/> - </control> - </interaction> - <interactor id="go_to_section3">- <interaction>- <control>- - <navigator> - <button label="go to selected section"/> - </navigator> - </control> - </interaction> - </interactor> 7

8 The Proposed Approach Automatic re-authoring Logical User Interface (LUI) Descriptions XML based, automatically generated Semantic rules Preserve the semantics of the original interface Identify suitable solutions for page splitting Desktop Abstract User Interface Mobile Abstract User Interface Concrete User Interface REDESIGN Concrete User Interface Reverse Engineering Forward Engineering XHTML XHTML W3C UWA Meeting - Pisa - July

9 Reverse Engineering W3C UWA Meeting - Pisa - July

10 Desktop-Mobile Cost-based Redesign CUI-Desktop SEMANTIC REDESIGN Mobile Device Description LIMIT EXCEEDED? YES NO CUI-Mobile 10

11 Example Desktop-Mobile Redesign (1/4) Grouping (G0) Grouping (G1) Grouping (G2) Grouping (G4) Grouping (G3) W3C UWA Meeting - Pisa - July

12 Example Desktop-Mobile Redesign (2/4) Interactors and composition operators with associated costs LEGEND: Composition operator Interactor ( ) Cost (in pixel) (675) G0 T = Text TL = Long text Img = image L = link Img G1 (245) G2 (335) G3 (66) (29) L L L L L L L (35) (35)(35)(35)(35) (35) (35) (135) G4 Img Img T Img (99) (101)(35) (31) T TL (35) (100) W3C UWA Meeting - Pisa - July

13 Example Desktop-Mobile Redesign (3/4) (675) G0 Cost processing for G0: = 675px = 375px = 165px Img (29) G1 (245) (35) G2 (335) (35) G3 (66) L L L L L L L (35)(35)(35)(35)(35) (35) (35) (135) G4 Img Img T Img (99) (101) (35) (31) T (35) TL 100 W3C UWA Meeting - Pisa - July

14 Example Desktop-Mobile Redesign (4/4) Page 4 Page 2 Page 1 Page

15 Another Example W3C UWA Meeting - Pisa - July

16 Migratory Web Interfaces Device Discovery Device 1 Device Discovery (1) Device Discovery Device N Migration Client Migration Trigger and Target Identification (6) Desktop Request Page (2) Provide Annotated Page (5) Proxy Server Migration Server Adaptation + State Association Interactive Application Generation (8) Trasmission of Current State through callback AJAX (7) PDA Provide Page (4) Request Page (3) Application Server 16

17 Migrating between PDA and Digital TV W3C UWA Meeting - Pisa - July

18 Migrating between PDA and Digital TV W3C UWA Meeting - Pisa - July

19 Example Migration (Video) W3C UWA Meeting - Pisa - July

20 Migrating between PDA and Digital TV Application Server 1 Reverse Engineering Semantic Redesign shopping-desktop.lui 2 Semantic Redesign 5 State 6 Persistence shopping-tv.lui 7 8 shopping-pda.lui Activation on Digital TV 0 4 shopping.html shopping-tv.class PDA 3 W3C UWA Meeting - Pisa - July

21 Rich Information State User input. Client-side variables Dynamic content (Ajax scripts) Cookies Bookmarks History Bookmarks Query string W3C UWA Meeting - Pisa - July

22 Usability of Migratory UIs Continuity: ease with which users can continue task accomplishment through another device Factors that can affect perceived continuity Time Time needed for migration to take place Time passed since the last interaction (long time might be an issue) Adaptation process When it changes the UI on the target device in such a way that users do not recognise that it enables them to continue performance of their tasks from where they left in the source device 22

23 Usability of Migratory UIs Predictability of the effects of the migration s trigger: the ability of the user to understand the effect of triggering a certain migration. Particularly relevant when different options for migration, eg: If partial migration, users should be able to easily predict what part of the user interface will migrate and on which device(s) the results of the interactions will appear users should be able to easily understand to what actual devices correspond the list of devices to be targets Learnability: the easiness with which the users become familiar to the migration features. If the system is easy to be learned, even occasional users can easily use it. W3C UWA Meeting - Pisa - July