Recommendations for Improving Device Independent Presentation Authoring · 2002-04-03 ·...
Transcript of Recommendations for Improving Device Independent Presentation Authoring · 2002-04-03 ·...
![Page 1: Recommendations for Improving Device Independent Presentation Authoring · 2002-04-03 · Recommendations for Improving Device Independent Presentation Authoring Krishna Vedati. Fast.](https://reader035.fdocuments.net/reader035/viewer/2022070704/5e8d2a20ee06cc1e80379267/html5/thumbnails/1.jpg)
Fast. Forward. Wireless.
Recommendations for Improving Device Independent Presentation Authoring
Krishna Vedati
![Page 2: Recommendations for Improving Device Independent Presentation Authoring · 2002-04-03 · Recommendations for Improving Device Independent Presentation Authoring Krishna Vedati. Fast.](https://reader035.fdocuments.net/reader035/viewer/2022070704/5e8d2a20ee06cc1e80379267/html5/thumbnails/2.jpg)
Fast. Forward. Wireless.
Agenda
• Device-Independent Presentation Authoring
• Current Approaches to Device-Independent Authoring
• Pros and Cons
• Recommendations for Improving W3C’s Device-Independent Presentation Authoring Standards (XHTML, XSLT, CC/PP, CSS…)
• Standard Multi-Channel XHTML Hints Module
• Distributed, Personalized Assembly
• Multi-Channel, Multi-Modal Interaction Models
• Q/A
![Page 3: Recommendations for Improving Device Independent Presentation Authoring · 2002-04-03 · Recommendations for Improving Device Independent Presentation Authoring Krishna Vedati. Fast.](https://reader035.fdocuments.net/reader035/viewer/2022070704/5e8d2a20ee06cc1e80379267/html5/thumbnails/3.jpg)
Fast. Forward. Wireless.
Applications consist of tasks…
Login
MainMenu
News
PIM
Task 1
Task 2
Task 3
The Problem:Single Application, Multiple User Experiences
The same task has different navigation flows and displayed information.But on different
devices…
PDA
Voice
WAP
![Page 4: Recommendations for Improving Device Independent Presentation Authoring · 2002-04-03 · Recommendations for Improving Device Independent Presentation Authoring Krishna Vedati. Fast.](https://reader035.fdocuments.net/reader035/viewer/2022070704/5e8d2a20ee06cc1e80379267/html5/thumbnails/4.jpg)
Fast. Forward. Wireless.
Scale of Automation
Implementation and Management Effort Less
MoreLess
More
Multiple SourcesDesign “native” HTML, WML, or VoiceXML user interfaces separately
Single Authoring Design using a proprietary markup language(First generation mobile platforms offer this today)
Style Sheet/ TransformationDesign pages that will be transformed at runtime, using W3C Standards (XHTML + XSLT + CSS)
Tomorrow’s Multi-Channel Authoring StandardsCurrent standards are inadequate
Today’s Solutions:Device Independent Presentation Authoring Paradigms
![Page 5: Recommendations for Improving Device Independent Presentation Authoring · 2002-04-03 · Recommendations for Improving Device Independent Presentation Authoring Krishna Vedati. Fast.](https://reader035.fdocuments.net/reader035/viewer/2022070704/5e8d2a20ee06cc1e80379267/html5/thumbnails/5.jpg)
Fast. Forward. Wireless.
Low CostHigh Cost
High Presentation
Quality
Low Presentation
Quality
Multiple Sources
Style Sheet Transformation
Single Authoring
Style Sheet Transformation & Multi-Channel Authoring Standards
How They Stack UpPresentation Quality vs. Cost of Ownership
![Page 6: Recommendations for Improving Device Independent Presentation Authoring · 2002-04-03 · Recommendations for Improving Device Independent Presentation Authoring Krishna Vedati. Fast.](https://reader035.fdocuments.net/reader035/viewer/2022070704/5e8d2a20ee06cc1e80379267/html5/thumbnails/6.jpg)
Fast. Forward. Wireless.
Recommendation #1:A Standard “Hints” Module
for Optimal Device Independent Authoring
![Page 7: Recommendations for Improving Device Independent Presentation Authoring · 2002-04-03 · Recommendations for Improving Device Independent Presentation Authoring Krishna Vedati. Fast.](https://reader035.fdocuments.net/reader035/viewer/2022070704/5e8d2a20ee06cc1e80379267/html5/thumbnails/7.jpg)
Fast. Forward. Wireless.
Example: Widget Transformation Hint
Instance-specific transformation of a “widget” Overrides the default widget for a given class of devices
Others TransformationsList - Paragraph
Select List – Hyperlinked List
Table – Paragraph
…
Common Use Cases: Change widget to best fit a class of devices based on
• Browser capabilities• Screen dimensions• Connection speed
Implementation Suggestions:Standardize set of most common widget transformations
Provide hints for identifying widget and desired transformation output
TABLE LIST
![Page 8: Recommendations for Improving Device Independent Presentation Authoring · 2002-04-03 · Recommendations for Improving Device Independent Presentation Authoring Krishna Vedati. Fast.](https://reader035.fdocuments.net/reader035/viewer/2022070704/5e8d2a20ee06cc1e80379267/html5/thumbnails/8.jpg)
Fast. Forward. Wireless.
Example: Layout Hint
Modification of layout based on screen capabilities
Common Use Cases: Reorder form elements on a PDA
• Personalization• Device form factor
Implementation Suggestions:Provide device independent layout hints during design
Possibly even separate layout specification from modular UI -
Encourage designers to build modular UIs
![Page 9: Recommendations for Improving Device Independent Presentation Authoring · 2002-04-03 · Recommendations for Improving Device Independent Presentation Authoring Krishna Vedati. Fast.](https://reader035.fdocuments.net/reader035/viewer/2022070704/5e8d2a20ee06cc1e80379267/html5/thumbnails/9.jpg)
Fast. Forward. Wireless.
Example: Content Optimization Hint
Reordering, inclusion, or omission of content
Others transformationsInclude only “high priority” columns on PDA
Omit optional form elements in WAP
Common Use Cases: Content inclusion exclusion, modification applied based on
• Browser capabilities• Screen dimensions• Connection speed
Implementation Suggestions:Provide hints to prioritize content
Provide hints to select or exclude content for a specific device context
Include 1st, 3rd, and 4th
table columns
![Page 10: Recommendations for Improving Device Independent Presentation Authoring · 2002-04-03 · Recommendations for Improving Device Independent Presentation Authoring Krishna Vedati. Fast.](https://reader035.fdocuments.net/reader035/viewer/2022070704/5e8d2a20ee06cc1e80379267/html5/thumbnails/10.jpg)
Fast. Forward. Wireless.
Standard Device Independent Authoring Paradigm
Profile-Specific Style Sheet
Library
Content
Layout
Style
Hints
Transformation Engine
XSLTDevice
Detection
XSL
Data
Request
Response
Run-time
DeviceContext
Device-IndependentApplication
XHTML
XHTML Module
CSS
XHTML Module
Content
Layout
Style
Hints
Device-Independent Presentation Architecture
Design-time
![Page 11: Recommendations for Improving Device Independent Presentation Authoring · 2002-04-03 · Recommendations for Improving Device Independent Presentation Authoring Krishna Vedati. Fast.](https://reader035.fdocuments.net/reader035/viewer/2022070704/5e8d2a20ee06cc1e80379267/html5/thumbnails/11.jpg)
Fast. Forward. Wireless.
Recommendation #2:A Standard for
Distributed Presentation Assembly
![Page 12: Recommendations for Improving Device Independent Presentation Authoring · 2002-04-03 · Recommendations for Improving Device Independent Presentation Authoring Krishna Vedati. Fast.](https://reader035.fdocuments.net/reader035/viewer/2022070704/5e8d2a20ee06cc1e80379267/html5/thumbnails/12.jpg)
Fast. Forward. Wireless.
• How do we design the MyYahoo’s of the world?
• There is no easy, device independent layout design paradigm:
Developers use JSP includes to code the assembly of distributed content sources
• Not standards-based
• No clean separation of business logic and presentation
• Today’s portal server architectures use layout descriptor systems
• No standard
Today’s Solutions:Layout and Assembly of Distributed Presentation Content
![Page 13: Recommendations for Improving Device Independent Presentation Authoring · 2002-04-03 · Recommendations for Improving Device Independent Presentation Authoring Krishna Vedati. Fast.](https://reader035.fdocuments.net/reader035/viewer/2022070704/5e8d2a20ee06cc1e80379267/html5/thumbnails/13.jpg)
Fast. Forward. Wireless.
InformationArchitecture
Different for each terminal type
Multi-Channel IA
PocketPC Page
WAP Pages
PageWeb page, card in a deck
Page
Typical Presentation Design Issues
Page-Specific Markup
Pocket PC IA
WAP IA
Terminal-specific IAPage Component
Page ComponentsIncludes, Portlets
![Page 14: Recommendations for Improving Device Independent Presentation Authoring · 2002-04-03 · Recommendations for Improving Device Independent Presentation Authoring Krishna Vedati. Fast.](https://reader035.fdocuments.net/reader035/viewer/2022070704/5e8d2a20ee06cc1e80379267/html5/thumbnails/14.jpg)
Fast. Forward. Wireless.
Example: How would you build this system?
Trove[ Top Stories [ Marketwatch[ News ][ Market ][ Trade ][ Contacts ][ Alerts ][ Search ]
Marketwatch
DJIAVol 9,892.94Chg +69.33
NASDAQVol 1,914.51Chg +11.32
S&P 500Vol 1,144.46Chg +3.25
30yr IndxIndx 5.09%Chg –0.67
-----[ Home ]
Top Stories
[ Story 1 ][ Story 2 ]
-----[ Home ]
=
HTML-IE-PocketPC WML-UP-Phone
Render this first
Page Component
Page-specific mark-up
Designer needs a high-level assembly language to specify system of pages based on delivery context
![Page 15: Recommendations for Improving Device Independent Presentation Authoring · 2002-04-03 · Recommendations for Improving Device Independent Presentation Authoring Krishna Vedati. Fast.](https://reader035.fdocuments.net/reader035/viewer/2022070704/5e8d2a20ee06cc1e80379267/html5/thumbnails/15.jpg)
Fast. Forward. Wireless.
Design Goals for a Device Independent Layout Standard
• Build and assemble heterogeneous presentation components into individual pages
• The presentation components use distributed data sources
• Support device profile-dependant assembly such as:
• Include/exclude presentation component in each channel
• 2x2 grid assembly for a PDA
• 4-column layout for a web page
![Page 16: Recommendations for Improving Device Independent Presentation Authoring · 2002-04-03 · Recommendations for Improving Device Independent Presentation Authoring Krishna Vedati. Fast.](https://reader035.fdocuments.net/reader035/viewer/2022070704/5e8d2a20ee06cc1e80379267/html5/thumbnails/16.jpg)
Fast. Forward. Wireless.
Recommendation #3:A Standard for
Interaction Models
![Page 17: Recommendations for Improving Device Independent Presentation Authoring · 2002-04-03 · Recommendations for Improving Device Independent Presentation Authoring Krishna Vedati. Fast.](https://reader035.fdocuments.net/reader035/viewer/2022070704/5e8d2a20ee06cc1e80379267/html5/thumbnails/17.jpg)
Fast. Forward. Wireless.
• What is an interaction model?
• An interaction model is the workflow of interactions between a user and the system.
• It is typically the controller of the M-V-C paradigm.
• Why is this necessary for multi-channel design?
• Different modalities and channels require different information architectures and page design
Ex: A voice application may require disambiguation states
• Dealing with dropped calls; continue on a different channel! - Multi-channel state and session management
• Handling out-of sequence client requests during a transaction
Just Presentation Design is Not Sufficient…
![Page 18: Recommendations for Improving Device Independent Presentation Authoring · 2002-04-03 · Recommendations for Improving Device Independent Presentation Authoring Krishna Vedati. Fast.](https://reader035.fdocuments.net/reader035/viewer/2022070704/5e8d2a20ee06cc1e80379267/html5/thumbnails/18.jpg)
Fast. Forward. Wireless.
Example: A Multi-Channel, Multi-Modal Currency Converter
WAP Interaction FlowVoice Interaction Flow
- More end-user help- Extra disambiguation states
![Page 19: Recommendations for Improving Device Independent Presentation Authoring · 2002-04-03 · Recommendations for Improving Device Independent Presentation Authoring Krishna Vedati. Fast.](https://reader035.fdocuments.net/reader035/viewer/2022070704/5e8d2a20ee06cc1e80379267/html5/thumbnails/19.jpg)
Fast. Forward. Wireless.
Example: A Multi-Channel, Multi-Modal Interaction Model
Typically a well-designed voice application needs more end user help, error checking, and some disambiguation states
• Red indicates voice-specific interaction states
• Green indicates WAP-specific interaction states
![Page 20: Recommendations for Improving Device Independent Presentation Authoring · 2002-04-03 · Recommendations for Improving Device Independent Presentation Authoring Krishna Vedati. Fast.](https://reader035.fdocuments.net/reader035/viewer/2022070704/5e8d2a20ee06cc1e80379267/html5/thumbnails/20.jpg)
Fast. Forward. Wireless.
Summary
![Page 21: Recommendations for Improving Device Independent Presentation Authoring · 2002-04-03 · Recommendations for Improving Device Independent Presentation Authoring Krishna Vedati. Fast.](https://reader035.fdocuments.net/reader035/viewer/2022070704/5e8d2a20ee06cc1e80379267/html5/thumbnails/21.jpg)
Fast. Forward. Wireless.
Recommendations for Further Work
• Standard for markup to markup transcoding hints module
• Standard for layout and assembly
• Standard for interaction model
• Investigate emerging Web Services standards, such as WSXL & WSFL
Improve Current W3C’s Device Independent Authoring Standards