User flow vs. Site map

--

As we are designing a new publication platform, with the business requirement document in place, we started out with defining the site map and user flow of the site. In order to move on quickly, we need to understand the essence of each, when to use each, and for what purpose. Here is a good blog post that answers our questions:

A site map is like looking at a map of the territory. The map shows you a bird’s eye-review of everything, and gives you a gneral direction of where you can go. This high level view allows you to feel the size and complexity of a site.

A user flow is like looking at directions from point A to point B. You can see which routes to take, where to turn and the miles it takes to get there. These specifics help you get to your destination with efficiency. This low level view allows you to feel how much time and effort it takes to complete a task.

Knowing what pages will go on a site and how these pages are linked together, allows you to design call-to-actions that lead users though the right page flow.

Site maps give you a clear picture of the navigational hierarchy. You get a glimpse of the breadth and depth of navigation. If a navigational path gets too deep, you can streamline it. If the navigation gets too broad, you can merge relevant pages. All this helps you design a simpler navigation experience.

Not every task is a straightforward path. Some will have twists and turns. User flows are perfect for analyzing the efficiency of these tasks.

— From Site Flows vs. User Flows: When to Use Which (UX Movement, 07/29/15)

We first created the site map that gives us an idea of which pages are needed on the site. Currently it looks really broad, and in some cases the navigation gets too deep. To make navigation easier for users, we decided to streamline the flows, e.g., list of articles under each journal under different conditions (under peer review vs. after peer review), and combines certain pages, such as the guideline pages for authors and reviewers.

We then defined user flows to see how easy it is for authors, reviewers and editors to complete regular tasks, including: submitting a paper, tracking a manuscript, receiving review invitation to complete review reports, making editorial decisions via our online system.

Site map gave us the whole picture, it connects the developers and designers and makes sure we are on the same page. User flows give designers the tools to empathize with users. Both are valuable assets in a designer’s tool kit.

Image source: https://www.flickr.com/photos/82955120@N05/12912369914/

--

--

Lulu Wang
Cultura: The Voice of HCI/d at Indiana University

Sr. Product Designer at BILL ~~Indiana University HCI/d alumni~~Design & Jiu Jitsu