VRIJEUNIVERSITEITAMSTERDAM

Andrea Salini, Ivano Malavolta, Fabrizio Rossi

i.malavolta@vu.nl

Leveraging Web Analytics for Automatically Generating Mobile Navigation Models

San Francisco, 29th June 2016

VRIJEUNIVERSITEITAMSTERDAM

VRIJEUNIVERSITEITAMSTERDAMBackground

Mobile devices are replacing traditional desktop websites

à People is relying more and more on mobile devicesFACT 1

Adam Lella, Andrew Lipsman, Ben Martin. The global mobile report. comsCore white paper, 2015

VRIJEUNIVERSITEITAMSTERDAMBackground

Dedicated mobile apps introduced from existing websites– YouTube, Facebook, Amazon, Ebay, Wikipedia, etc.

FACT 2

VRIJEUNIVERSITEITAMSTERDAMBackground

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

VRIJEUNIVERSITEITAMSTERDAMIntuition

Desktop website

Raw web analytics data

Interaction designers

End users

Navigation model

Mobile app

collects and aggregates

navigate

analyse and refine

represents

OUR APPROACH

VRIJEUNIVERSITEITAMSTERDAMSolution

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

VRIJEUNIVERSITEITAMSTERDAMMain stages

• Fully automatic– Only input: web analytics report– All stages and intermediate artifacts are masked to interaction designers

VRIJEUNIVERSITEITAMSTERDAMWeb analytics report

Web analytics collects and aggregates interaction data of users, generates reports and metrics

++ users engagement

++ conversions

APPROACH EVALUATION930 rows

VRIJEUNIVERSITEITAMSTERDAMWeb 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• Special nodes 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

APPROACH EVALUATIONNodes: 71Edges: 236

VRIJEUNIVERSITEITAMSTERDAMNavigation 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-specific page

VRIJEUNIVERSITEITAMSTERDAMNavigation graph refactoring

3. Four main refactoring operations:– elimination of redundant nodes

• e.g., isolated nodes, duplicated nodes

– relabeling

– predecessor node addition

– details node addition

VRIJEUNIVERSITEITAMSTERDAMExample (before refactoring)

Refactoring operations on People :1. relabeling2. details node addition

VRIJEUNIVERSITEITAMSTERDAMExample (after refactoring)

APPROACH EVALUATIONNodes: 71 à 36Edges: 236 -> 145

news_details node generated byDetails node addition

VRIJEUNIVERSITEITAMSTERDAMNavigation 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 information architecture of the app is kept

simple à app is more usable

Generation formulated 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

VRIJEUNIVERSITEITAMSTERDAMExample of mobile-oriented

navigation tree

VRIJEUNIVERSITEITAMSTERDAMNavigation model generation

Input

Output

Mobile-oriented navigation tree Tw

IFML-based navigation model

http://www.ifml.org/ifml-primer/

VRIJEUNIVERSITEITAMSTERDAMExample 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 blankcanvas

• It can be refined according to additional business-, project- and organization-specific requirements

VRIJEUNIVERSITEITAMSTERDAMImplementation

Web analyticsreport

Graph operations IFML modelsmanagement

WordNETNetworkX

Prototype available here: http://cs.gssi.infn.it/WANDM

VRIJEUNIVERSITEITAMSTERDAMConclusions

VRIJEUNIVERSITEITAMSTERDAMBackground

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

VRIJEUNIVERSITEITAMSTERDAMIntuition

Desktop website

Raw web analytics data

Interaction designers

End users

Navigation model

Mobile app

collects and aggregates

navigate

analyse and refine

represents

OUR APPROACH

VRIJEUNIVERSITEITAMSTERDAMMain stages

• Only input: web analytics report

• All stages and intermediate artifacts are masked to interaction designers

VRIJEUNIVERSITEITAMSTERDAMImplementation

Web analyticsreport

Graph operations IFML modelsmanagement

WordNETNetworkX

Prototype available here: http://cs.gssi.infn.it/WANDM