UX Stencils


Sitemap Stencil

A Sitemap (in the since of a IA deliverable) is a digram that maps out the architecture or structure of a web site, web application, mobile application, software, or system. These are typically constructed of boxes which represent pages or screens and lines which connect the boxes that represent which screens can be accessed (hierarchically) from a given screen. Arrows are often used to communicate one-way or two-way access between screens. In greater depth sometimes there are legends specifying different types of screens (i.e. internal, external, instances, etc). In some cases a site map will also have a key or critical path for revenue drivers or user tasks. This is often done by applying a note to each screen in that path or click-through. Lastly, each screen has a area where an ID or number can be specified, this is to associate screens to wireframes.

Nick Finck's Sitemap Stencil


User Flow Stencil

User Flows are simply flow charts or diagrams used to explain and define a process within a web site, a web application, mobile application, software, or system. These are typically constructed of boxes representing screens or actions, diamonds representing decision points with branches in the process, and users representing the individual users. In some cases there are also cylinders which represent databases or information sources, clouds or regions which represent groupings.

Nick Finck's User Flow Stencil


Also See

Interview with Nick Finck about OmniGraffle

See full blog post at Omni Group: Customer Stories: Crafting Interaction with Nick Finck

Nick Finck's Keyboard shortcut cheat sheet

Nick Finck's Keyboard shortcut for OmniGraffle
Download the cheat sheet


Resources