This slide is for presentation in International Conference on Web Engineering 2012 at Berlin. The abstract from published paper is as follows; Many developers have implemented native smartphone applications (NSAs) that have the same functionalities as those of existing web applications (WAs). They need to redesign web pages as views of NSAs owing to their constraints, such as compact displays. However, it can produce a NSA with low global navigability. We propose a framework that can support developers in designing view transitions of NSAs on the basis of WAs. We focus on web templates to leverage well-designed web page transitions. Our framework 1) extracts a page transition model from a WA to create candidate view transitions of a NSA, 2) provides an interface where developers design these views to solve the constraints, and 3) suggests design modifications to increase global navigability calculated by proposed criteria of navigation costs for users. After examining case studies, we concluded that our framework could support developers to design easy-to-navigate NSAs.

1. Supporting View Transition Design of
Smartphone Applications Using
Web Templates
Kazuki Nishiura1
Yuta Maezawa1
Fuyuki Ishikawa2 1The University of Tokyo
Shinichi Honiden1,2 2National Institute of Informatics
1

2. Web Application (WA) Providers
implement Smartphone Applications (SA)
Web Application (WA)
Screen size
Difference
Touch Panels
2

3. Web Application (WA) Providers
implement Smartphone Applications (SA)
Developers
redesign
Web Application (WA) Smartphone Application (SA)
Screen size
Difference
Touch Panels
3

4. Web Application (WA) Providers
implement Smartphone Applications (SA)
Developers
redesign
Web Application (WA) Smartphone Application (SA)
Screen size
Difference
Touch Panels
4

5. Problem: Developers Lose Global Navigability
Developers do:
 Select parts of web page
 Create child views to move contents
5

6. Problem: Developers Lose Global Navigability
Developers do:
 Select parts of web page
 Create child views to move contents
6

7. Problem: Developers Lose Global Navigability
Developers do:
 Select parts of web page
 Create child views to move contents
link
7

8. Problem: Developers Lose Global Navigability
Developers do: How easily users get to destination
 Select parts of web page
Affect
 Create child views to move contents navigability
link
8

9. Problem: Developers Lose Global Navigability
Developers do: How easily users get to destination
 Select parts of web page
→ remove unselected links Affect
 Create child views to move contents navigability
link
9

10. Problem: Developers Lose Global Navigability
Developers do: How easily users get to destination
 Select parts of web page
→ remove unselected links Affect
 Create child views to move contents navigability
→ increase # of views
link
10

11. Problem: Developers Lose Global Navigability
Developers do: How easily users get to destination
 Select parts of web page
→ remove unselected links Affect
 Create child views to move contents navigability
→ increase # of views
Looking at link
single web page
cannot comprehend
11 whole transitions in SA

12. Proposal Framework to Support
Development of SA with High Navigability
1. Extracting transition model from WA
2. Providing interface for designing view of SA
3. Calculating navigability of SA
4. Suggesting design modification to improve navigability
Design views for
Web SA with web page (3, 4)
Applications
(2) Suggest modification
(1)
Modify
automatically
manually Smartphone
Applications
12

13. Proposal Framework to Support
Development of SA with High Navigability
1. Extracting transition model from WA
2. Providing interface for designing view of SA
3. Calculating navigability of SA
4. Suggesting design modification to improve navigability
Design views for
Web SA with web page (3, 4)
Applications
(2) Suggest modification
(1)
Modify
automatically
manually Smartphone
Applications
13

14. Proposal Framework to Support
Development of SA with High Navigability
1. Extracting transition model from WA
2. Providing interface for designing view of SA
3. Calculating navigability of SA
4. Suggesting design modification to improve navigability
Design views for
Web SA with web page (3, 4)
Applications
(2) Suggest modification
(1)
Modify
automatically
manually Smartphone
Applications
14

15. Proposal Framework to Support
Development of SA with High Navigability
1. Extracting transition model from WA
2. Providing interface for designing view of SA
3. Calculating navigability of SA
4. Suggesting design modification to improve navigability
Design views for
Web SA with web page (3, 4)
Applications
(2) Suggest modification
(1)
Modify
automatically
manually Smartphone
Applications
15

16. Proposal Framework to Support
Development of SA with High Navigability
1. Extracting transition model from WA
2. Providing interface for designing view of SA
3. Calculating navigability of SA
4. Suggesting design modification to improve navigability
Design views for
Web SA with web page (3, 4)
Applications
(2) Suggest modification
(1)
Modify
automatically
manually Smartphone
Applications
16

17. 1. Extracting Transition Model from WA
Focusing on web template to deal with dynamics of WA
 “Dynamics” of web page
= Different Contents depending on situations
Ex) Online bookstore
Request “book.php”
 Our framework constructs transition model like…
home.tpl books.php
index.php audiobooks.php
login.php
17 musics.php

18. 1. Extracting Transition Model from WA
Focusing on web template to deal with dynamics of WA
 “Dynamics” of web page
= Different Contents depending on situations
Ex) Online bookstore
Request “book.php”
 Our framework constructs transition model like…
home.tpl books.php
index.php audiobooks.php
login.php
18 musics.php

19. 1. Extracting Transition Model from WA
Focusing on web template to deal with dynamics of WA
 “Dynamics” of web page
= Different Contents depending on situations
Ex) Online bookstore
Request “book.php”
 Our framework constructs transition model like…
home.tpl books.php
index.php audiobooks.php
login.php
19 musics.php

20. 1. Extracting Transition Model from WA
Focusing on web template to deal with dynamics of WA
 “Dynamics” of web page
= Different Contents depending on situations
Ex) Online bookstore
Request “book.php”
 Our framework constructs transition model like…
home.tpl books.php
index.php audiobooks.php
login.php
20 musics.php

21. 1. Extracting Transition Model from WA
Focusing on web template to deal with dynamics of WA
 “Dynamics” of web page
= Different Contents depending on situations
Ex) Online bookstore
Request “book.php”
 Our framework constructs transition model like…
home.tpl books.php
index.php audiobooks.php
login.php
21 musics.php

22. 1. Extracting Transition Model from WA
Focusing on web template to deal with dynamics of WA
Comprehend all
 “Dynamics” of web page possible structure
= Different Contents depending on situations
Ex) Online bookstore
$bookTitle<br>$bookPrice
If $review
<a href=“$review.url”>…
Request “book.php” web template
$review = select from DB
Variable values
 Our framework constructs transition model like…
home.tpl books.php
index.php audiobooks.php
login.php
22 musics.php

23. 2. Interface for Designing Views of SA
Child Views
Web templates
Smartphone View
Developers can
1) extract elements from web templates to design views of SA
2) create child views to move some of elements
23

24. 3. Calculating Navigability of SA
Navigability between two views are calculated by considering
 links on each view
the number of  view transitions
 communications between server
Ex) Online bookstore
home.tpl
books.php fiction_books.php
childView book_categolies.tpl
book_list.tpl
audiobooks.php
24

25. 3. Calculating Navigability of SA
Navigability between two views are calculated by considering
 links on each view
the number of  view transitions
 communications between server
Ex) Online bookstore
home.tpl
books.php fiction_books.php
childView book_categolies.tpl
book_list.tpl
audiobooks.php
25

26. 3. Calculating Navigability of SA
Navigability between two views are calculated by considering
 links on each view
the number of  view transitions
 communications between server
Ex) Online bookstore
home.tpl
books.php fiction_books.php
childView book_categolies.tpl
book_list.tpl
audiobooks.php
26

27. 3. Calculating Navigability of SA
Navigability between two views are calculated by considering
 links on each view
the number of  view transitions
 communications between server
Ex) Online bookstore
home.tpl
books.php fiction_books.php
childView book_categolies.tpl
book_list.tpl
audiobooks.php
27

28. 4. Suggesting Design Modification
Design of Developers Suggestion from Tool
URL1 URL1
Recovering View A URL2 View A URL2
URL3 URL3
URL1 URL1
Deleting View A URL2 View A URL2
URL3 URL3
URL1 URL1
Shifting View A URL2 View A URL2
URL3 URL3
Child View Child View
28

29. 4. Suggesting Design Modification
Design of Developers Suggestion from Tool
URL1 URL1
Recovering View A URL2 View A URL2
URL3 URL3
URL1 URL1
Deleting View A URL2 View A URL2
URL3 URL3
URL1 URL1
Shifting View A URL2 View A URL2
URL3 URL3
Child View Child View
29

30. 4. Suggesting Design Modification
Design of Developers Suggestion from Tool
URL1 URL1
Recovering View A URL2 View A URL2
URL3 URL3
URL1 URL1
Deleting View A URL2 View A URL2
URL3 URL3
URL1 URL1
Shifting View A URL2 View A URL2
URL3 URL3
Child View Child View
30

31. 4. Suggesting Design Modification
Design of Developers Suggestion from Tool
URL1 URL1
Recovering View A URL2 View A URL2
URL3 URL3
URL1 URL1
Deleting View A URL2 View A URL2
URL3 URL3
URL1 URL1
Shifting View A URL2 View A URL2
URL3 URL3
Child View Child View
31

32. Evaluation Using Case Studies
OpenPNE*: Social Networking WA
32 * http://www.openpne.jp/

33. Evaluation Using Case Studies
33

34. Evaluation Using Case Studies
Individual item
Item list
34

35. Evaluation Using Case Studies
Individual item
Developers can imagine
existence of link
Item list
35

36. Evaluation Using Case Studies
Developers delete links to
individual item page they Individual item
thought less important
Developers can imagine
existence of link
Item list
36

37. Evaluation Using Case Studies
Developers delete links to
individual item page they
thought less important Posts on community
However… Send message
The destination page Canceling event attendanc
contains useful links
37

38. Evaluation Using Case Studies
Developers delete links to
individual item page they
thought less important
However…
The destination page
contains useful links
38

39. Evaluation Using Case Studies
Developers delete links to
individual item page they
thought less important
However…
The destination page
contains useful links
Framework can suggest design modification by
considering whole transitions in the application
39

40. Conclusion & Future Work
We propose and implement framework:
 to develop SA on the basis of WA
 to calculate navigability so that developers
can implement easy-to-navigate SA
Our future work is:
 To handle state transitions within single web page
i.e., Ajax applications
 To apply our framework to actual developments
40

41. Related work
Using web applications on mobile devices
 Automatically splitting web pages for mobile devices[1]
 Enable user to extract parts of web page for later reuse[2]
→ They did not consider whole application
 Modeling navigation efforts for mobile device users and
reorganize menu structure of web applications[3]
→ They did not consider porting WA to SA.
[1] Zhang, D., Lai, J.: Can convenience and effectiveness converge in mobile web? A critique of the state-of-the-
art adaptation techniques for web navigation on mobile handheld devices. J. HCI
[2] Nichols, J., et al.: Highlight: a system for creating and deploying mobile web applications. Int’l Conf. on UIST
[3] Smyth, B., Cotter, P.: The plight of the navigator: Solving the navigation problem for wireless portals. Int’l
Conf. AH
41

42. How Our Framework Construct Model?
 Analyzing PHP file to detect 1) Displayable templates
and 2) URLs to which users can be redirected
 Analyzing template file to extract link target PHP file.
Our framework constructs transition model like…
home.tpl books.php
index.php audiobooks.php
login.php
42 musics.php