Navigation model (web app)

Sketched on paper


A navigation model from a web application

This is navigation model (here labeled “screen flow map”) that was worked out and sketched out on paper. Mixed into the navigation model are a few ideas where some of the interaction widgets might be used. This design is from a web application project undertaken as a long-term contractor.

A navigation model as used in Usage-Centered Design is an model in which the various interaction contexts of a system to be designed is mapped, showing which contexts are connected to which other contexts. In a web application, it is natural and very common that most interaction contexts are web pages, though some contexts will be dialogue boxes. Thus, a web application’s navigation model may be very suggestive of a “site map.”

Combined with a content model, which indicates what contents and interactions are available in each interaction context, these two models can be used to specify a system’s usage in a way that is specific enough to give designers and teams a sense of what using the system to be designed might be like, yet at the same time, is abstract enough to allow designers freedom to create and innovate within the models’ helpful constraints and guidance.

For more on the Usage-Centered Design framework, check out their website,, or you can buy their book, “Software for Use: A Practical Guide to the Models and Methods of Usage-Centered Design” from (Amazon Affiliate links: paperback edition, Kindle edition).

Comments are closed