Keeping track of complex UI flows can be challenging for software companies. Many programs have an implicit navigation graph, the structure that determines how one screen leads to another, embedded in procedural code.
At Google IO 2018, an Android Navigation Architecture Component was introduced. The underlying idea is that the UI flows a user experiences should be disentangled from the Java/Kotlin code driving the interactions. Google provides a way to specify these flows as a static file bundled with the application, in the form of an XML resource file.
In the example below, the “action” elements serve as edges in a directed graph, while the “id” and “destination” attributes provide the node identities.
Android Studio can visualize these navigation graphs. The one above looks like this:
Google also provides a NavGraph API, so that this data structure can be manipulated at runtime.
In 2013, LinkedIn figured out that reifying navigation as a data structure would help their onboarding flow. Their paper, Building Dynamic Personalized Onboarding Flows for Mobile, describes a similar system. It also makes it easy to control some basic presentation parameters programmatically (e.g. the page title).
Of course, this isn’t a new idea in general. This concept underlies Web navigation. The Web is a bit more powerful, as it provides globally unique identifiers for the nodes in the graph.
