1. Highlight: A System for Creating and Deploying Mobile Web Applications Jeffrey Nichols, Zhigang Hua, John Barton IBM Almaden Research Center and Georgia Institute of Technology October 22, 2008 – 21 st Annual ACM Symposium on User Interface Software and Technology

2. Mobile Internet

3. Accessing the Mobile Web Site designed for mobile use –Designed for low-end devices –Limited functionality chosen by designer –Costly to create Only available for popular, consumer sites Normal site through a mobile viewport –Most functionality of existing site –Greater costs of navigation Many items per page More pages than needed

4. Previous Work: Transcoding Traditional proxy server techniques –Mostly automated www.skweezer.com mobile google search –Quality of result varies based on site –Often includes all content of a page Doesn’t work with AJAX/dynamic JavaScript sites

5. Goals Allow end users to create their own mobile “applications” for particular tasks –No programming required –Possible for any existing site –All design decisions made by users Allow programmers to extend capabilities of mobile applications

6. mobile app designer (browser extension) user mobile user proxy server proxy browserweb server Highlight web server

7. Overview Introduction Mobile Web Applications Server Architecture Creating a Mobile Application Evaluation Conclusion

8. AA.com – Flight Tracking

10. BackpackIt.com – To Do List

12. mobile user proxy server proxy browserweb server Highlight Server Architecture web server mobile application description

13. Remote Control Metaphor

14. 144

15. Remote Control Metaphor 144

16. Remote Control Metaphor

17. Why use this architecture? Allows re-authoring of sites with dynamic JavaScript and Ajax Re-authoring can be done in terms of UI design –Easier to inspect than code, Web Service descriptions

18. Implementation mobile usersproxy serverweb servers

19. Mobile Application Descriptions Requirements –Support end user authoring environment –Increase possibilities through programming Implementation –Structured JavaScript –Built on top of standard web APIs (e.g., DOM) –Set of Highlight API methods to make programming with remote control metaphor easier

20. Structured JavaScript Format Based on Storyboard concept Code divided into chunks corresponding to mobile page (pagelet) Each pagelet has two methods –Clip method – selects content from page to clip –Event method – navigates to next content based on mobile interaction

21. Application Descriptions clip event pagelet n pagelet n+1 pagelet n-1

22. Writing Application Descriptions End-user authoring environment generates JavaScript code in this format –Programmers can edit this code to modify an app We have written several apps from scratch –BackpackIt.com To Do List –BlueMail –Fitday.com

23. Overview Introduction Mobile Web Applications Server Architecture Creating a Mobile Application Evaluation –Breadth of web sites that can be re-authored –How easy is it to write mobile application descriptions? Conclusion

24. Breadth of possible applications Created applications from a variety of different sites –AA.com –Amazon.com –Google Image Search –Mapquest.com –SFGate.com –Weather.com –Ebay –Fitday.com –Buy.com –Barnes & Noble.com –IBM internal directory (BluePages) – Beatthetraffic.com – Backpackit.com – BlueMail – Aeo.com – HomeDepot.com – wellnessforlife.com – Facebook.com – and many more…

25. How easy is it to create descriptions? Code analysis Formative user study

26. Mobile App Code Numbers Application Name # of PageletsLines Average Lines/Pagelet Average Clip Lines/Pagelet BluePages*517469.4044.80 Google Image Search*313041.0027.00 AEO Store Locator*28137.0027.50 BlueMail312736.3322.00 AA Flight Tracker*311235.3322.33 Home Depot Store Finder*27333.0024.00 Traffic #2*13326.00 Traffic #135818.3315.67 Facebook Status45914.757.50 BackPack To-Do34614.335.67 * Indicates some code automatically generated by our end-user authoring tool

27. Formative evaluation Goals –Will programmers understand the concepts/API? –Can they create applications of their own? Two subjects from our research lab –Not regular users of mobile web –Experienced web programmers (JavaScript, DOM, etc.)

28. Procedure 1 hour verbal introduction to the system Provided with programmer guide –Complete BackPack todo list example with source code –API reference Provided with choice of authoring/debugging tools –Eclipse Web Tools Platform editor, Firebug, Venkman Asked users to brainstorm their own mobile app idea and then try to implement it

29. Results Subject-chosen applications: –CBS 5 Traffic Reports –Facebook Status

30. Results, cont. All subjects were able to build their chosen application Typical problems of learning a new API –What methods are available? How are they used? Conceptual model of remote control not immediately intuitive Clip/event method grouping does not match expectations of web programmers

31. Overview Introduction Mobile Web Applications Server Architecture Creating a Mobile Application Evaluation Conclusion

32. Mobile applications can be created by re-authoring existing web sites –Proxy browser/remote control metaphor allows re-authoring of sites with AJAX and dynamic JavaScript –Evaluation suggests programmers can use system

33. Thanks! jwnichols@us.ibm.com http://www.jeffreynichols.com/

37. Breadth and Benefits Interactive ElementsSize (kB) Percent Size DescriptionOrigHilghtOrigHilght Check status of AA flight73637113.60.5% Update Facebook status21752960.50.2% Find nearby Wi-fi hotspot741810722.80.3% Get weather in my area4866107970.6% Sprint cellphone usage17567394.60.6% Log today’s exercise12843930.90.2% Update Fitday food diary1693814512.78.8% Get calories for food88166311.518.3% Real estate in my area274351036194.118.7% Show trip itineraries771772642.75.9% Find Amazon book price82348444.10.5%

38. Highlight Programmed Applications

39. amazon.com – Buy one item