29th of June 2016. My presentation done at the 5th IEEE International Conference on Mobile Services (MS 2016). Accompanying paper: http://www.ivanomalavolta.com/files/papers/MS_2016.pdf

1. VRIJE
UNIVERSITEIT
AMSTERDAM
Andrea Salini, Ivano Malavolta, Fabrizio Rossi
i.malavolta@vu.nl
Leveraging Web Analytics for Automatically
Generating Mobile Navigation Models
San Francisco, 29th June 2016
VRIJE
UNIVERSITEIT
AMSTERDAM

2. VRIJE
UNIVERSITEIT
AMSTERDAM
Background
Mobile devices are replacing traditional desktop websites
à People is relying more and more on mobile devices
FACT 1
Adam Lella, Andrew Lipsman, Ben Martin.The global mobile report. comsCore white paper, 2015

3. VRIJE
UNIVERSITEIT
AMSTERDAM
Background
Dedicated mobile apps introduced from existing websites
– YouTube, Facebook, Amazon, Ebay, Wikipedia, etc.
FACT 2

4. VRIJE
UNIVERSITEIT
AMSTERDAM
Background
Different structure and information architecture
– causes:display size, different modal context, etc.
à a complete redesign may be needed
PROBLEM
!=
In this work we focus on navigation design

5. VRIJE
UNIVERSITEIT
AMSTERDAM
Intuition
Desktop website
Raw web analytics data
Interaction designers
End users
Navigation model
Mobile app
collects and
aggregates
navigate
analyse and
refine
represents
OUR APPROACH

6. VRIJE
UNIVERSITEIT
AMSTERDAM
Solution
To exploit existing web analytics data for generating
mobile-oriented navigation models
Fully automatic
Catalyst for following design best practices
Generated models are:
1. compliant with the standard IFML language
à easily understood by interaction designers
2. tailored to navigational patterns of the users
à better control of the design space
SOLUTION

7. VRIJE
UNIVERSITEIT
AMSTERDAM
Main stages
• Fully automatic
– Only input: web analytics report
– All stages and intermediate artifacts are masked to interaction designers

8. VRIJE
UNIVERSITEIT
AMSTERDAM
Web analytics report
Web analytics collects and aggregates interaction data of users,
generates reports and metrics
++ users engagement
++ conversions
APPROACH EVALUATION
930 rows

9. VRIJE
UNIVERSITEIT
AMSTERDAM
Web usage mining
• A node in Gw for each webpage of w
• An arc in Gw from node u to node v, if there exists a link from page u to page
v that has been navigated at least once by users
• Each arc arc(u,v) is weighted according to the number of times that the
link(u,v) has been navigated by the users
• Specialnodes for modelling the arriving of a user (entrance node) and the
leaving of a user (exit node)
Input
Output
The web analytics report
Navigation graph Gw

12. APPROACH EVALUATION
Nodes: 71
Edges: 236

13. VRIJE
UNIVERSITEIT
AMSTERDAM
Navigation graph refactoring
1. Measuring the centrality of each node in Gw
2. Semantic analysis of page titles
– it helps in distinguishing between generic pages and data-specific pages
Input
Output
Navigation graph Gw
Refactored Gw
Generic page Data-specificpage

14. VRIJE
UNIVERSITEIT
AMSTERDAM
Navigation graph refactoring
3. Four main refactoring operations:
– elimination of redundant nodes
• e.g., isolated nodes, duplicated nodes
– relabeling
– predecessor node addition
– details node addition

15. VRIJE
UNIVERSITEIT
AMSTERDAM
Example (before refactoring)
Refactoring operations on People :
1. relabeling
2. details node addition

16. VRIJE
UNIVERSITEIT
AMSTERDAM
Example (after refactoring)
APPROACH EVALUATION
Nodes: 71 à 36
Edges: 236 -> 145
news_details node generated by
Details node addition

17. VRIJE
UNIVERSITEIT
AMSTERDAM
Navigation tree extraction
Input
Output
Refactored Gw
Mobile-oriented navigation tree Tw
Properties of Tw
– contains the most navigated nodes
• #visualizations * centrality
– reasonable depth à users can reach each app screen via fewer taps
– reasonable breadth à the informationarchitecture of the app is kept
simple à app is more usable
Generationformulated as a variation of the
Steiner Tree Problem with Revenues,
Budget and Hop Constraints
• It explicitly handles the hop limit (that is, bounds the depth of Tw)
• Easy to add extra constraints

18. VRIJE
UNIVERSITEIT
AMSTERDAM
Example of mobile-oriented
navigation tree

19. VRIJE
UNIVERSITEIT
AMSTERDAM
Navigation model generation
Input
Output
Mobile-oriented navigation tree Tw
IFML-based navigation model
http://www.ifml.org/ifml-primer/

20. VRIJE
UNIVERSITEIT
AMSTERDAM
Example of IFML model
• It reflects the navigation patterns of the users of the GSSI website
• Interaction designers do not start their reasoning process from a blank
canvas
• It can be refined according to additional business-, project- and
organization-specific requirements

21. VRIJE
UNIVERSITEIT
AMSTERDAM
Implementation
Web analytics
report
Graph operations IFML models
management
WordNET
NetworkX
Prototype available here: http://cs.gssi.infn.it/WANDM

22. VRIJE
UNIVERSITEIT
AMSTERDAM
Conclusions
VRIJE
UNIVERSITEIT
AMSTERDAM
Background
Different structure and information architecture
– causes:display size, different modal context, etc.
à a complete redesign may be needed
PROBLEM
!=
In this work we focus on navigation design
VRIJE
UNIVERSITEIT
AMSTERDAM
Intuition
Desktop website
Raw web analytics data
Interaction designers
End users
Navigation model
Mobile app
collects and
aggregates
navigate
analyse and
refine
represents
OUR APPROACH
VRIJE
UNIVERSITEIT
AMSTERDAM
Main stages
• Only input: web analytics report
• All stages and intermediate artifacts are masked to interaction designers
VRIJE
UNIVERSITEIT
AMSTERDAM
Implementation
Web analytics
report
Graph operations IFML models
management
WordNET
NetworkX
Prototype available here: http://cs.gssi.infn.it/WANDM