What is the difference between Sitemaps vs User flow diagram Anyway?

What to consider before making the website or mobile app.

Rahul Dahiya
Teaching Myself Design
7 min readSep 6, 2019

--

Photo by Campaign Creators

Welcome to our Tribe.

If you are reading this it means that you are curious as to “What is the difference between Sitemaps vs User flow diagram Anyway?” Or you just stumbled on this.

Today, we will be discussing Site Maps and Flow diagram in this blog. I’ll try discussing the basic definitions and concepts throughout this article. Although for a normal user both look the same but there are key differences that I am going to tell you what it is.

The Site Map and The Flow Diagram are very much the two different things, although the later can equip the former’s information and data explaining abilities. By the end of this blog you will get to the crux of the difference and the uses of both.

“What about the Site Map?”

The Basic idea about the Site map is that, “it is the collection of all the pages that has to be included in order make a website.” Let’s say for an instance that we are working on a Browser. And in the world of Browsers the Site map is also synonymously known as “sitemap.xml file”(Just Nuggets ☺).

Photo by Thijs van der Weide

So, sequentially the site map for this will consist of:-

The first line page, the “home Page”. So, this Home Page will further divide or so to say will lead to the other “15”

Second line pages. So, what will they be? Let’s try getting into that. They could be a Personalized Home Page, a page for Image, Video, News, Maps, and a More Products Page, a page for Books, Groups, Advanced search, Preferences, Language Tools, Advertising Programs, Business Solutions and then eventually About the Browser page. Try seeing all these pages as branching out from one Home Page.

Now, the “third line page”, and these will be as you must have guessed, the further branching of the second line pages. They will exist if required. Which basically means that some of the pages from the second line if needs to divide or lead to something will do so.

For example,

The Personalized Home Page may lead to a page for About the Gadget. Then same with the Images, they may lead to Advanced Image Search. The Videos into top Stories, the News into the All related others and so on and so forth. I’d like to make a point here that these site map does not guarantee that every page of the site will be crawled, though the major search engine do recommend them.

Photo by Paul Hanaoka

And this is how a site map can help the search engine to navigate the sites. But this is not just about it. This can also come in use for the users too. How? You may ask. Well, we will surely get to that part too but in the later part of this blog.

For now, let’s know the types of these Site maps. So, these Site maps can be of three types based on for what the site map is intended for, viz.:-

Photo by Startup Stock Photos

(1) Website planning type: This type of site map is used during planning a website by the designers, which means that you use the site map as a planning tool to design a website.

(2) The Human Visible one: This type of site map is basically the human visible listings of all the hierarchical pages on the website. Here hierarchical means the sequential arrangement as in, which comes first or which comes second, that sort. So, this type of site map is a web page that consists of a list of all pages within a website.

(3) Structured Listing: Well this one is for the Crawlers such as Search Engines. These are the XML site maps. They are structured in a way that the users don’t see it. Its purpose is to inform the search engine about the pages that are on the website. So, it helps to be found by the search engines when relevant search queries are performed. This ensures the visibility of the website on the SERP.

So, as it was mentioned earlier that the site map is for the users too. In that scenario, it just is a plain HTML file with the listing of all the major pages of the site. So, it is basically an outline of your website. All the actions it does, is when the site’s main navigation fails to do the job. So, the visitors are helped through this User Sitemap. Though, these user sitemaps are crawled by search engines just like XML site maps are crawled (Irony right!).

The site maps are indeed important for the sites that use Adobe flash or JavaScript menus that do not include HTML links. So, search engines such as Google, Bing and all others support this protocol to help find the crawlers all those dynamic pages.

Nowadays, the difficulty in making of a site map is in your choice for your hands. Like there are several Apps that generate sitemaps for the webmasters now. But it is always your call to use it or not.

Now, sliding back to where we started.

Photo by NEW DATA SERVICES

“What about the Flow Diagram?”

Well, a diagram is often a 2D visual representation for a better awareness and understanding of a system. The Basic aid of this tool the Flow diagram, is to serve the purpose to help in solving the organization and behavior problems in the elements within the system. In simple words, he is the guy who will make your life easy and system re-presentable. So, how do our side kick helps us? Well, it can help us in planning a website, developing a software, auditing a process, mapping information, charting user behavior, eCommerce checkouts, data processing and managing workflow.

Photo by rawpixel.com

The perk of such schematic diagram is that although they are merely abstract drawings and images that may not replicate the looks of the real systems they describe, but these diagrams adequately serves to describe the connections amongst the specific structures of the information, physical or virtual locations, stages within a process, decision points, process flow, and more.

So, in a diagram we have lines and the symbols that represent key objects in order to explain the actions that occur within a system. The symbols in the system are arranged accordingly on a 2D canvas or grid.

The user flow diagram

As the word “flow”, intuitively in our brain feels as if we are talking of something continuous here, maybe a path. Well, it is a path. And this path is followed by the users in order to get the task done what they came here on your website for. This path consists of all the required pages and the touch point which eventually leads to the place the user has been seeking of. To build one, you first create the plan and steps for your website’s navigation.

Then at every step you think as a user to decide every possible combination to fulfill the conditions. As in this will decide what the user will be doing on every step in your website. So, it is your responsibility to give your users optimal access to the required path and a better experience.

Now think large, one can also plan several user flows. This will surely create more user tides to your website. In the path it is extremely important keep the process engaging but still understandable. Here craft may come in action, that is you can create sense of easy, colors for distinguishing, a bit friendly, and very very important easily navigable. Since sometimes the path could be complex and lengthy it increases the possibility of error. In that scenario the flow diagram always rescue you by granting you ability to test, i.e, Trial and Error Method. This increases both the sense of credibility and a better experience for the users. Because ultimately it is always about the user’s experience.

Thank You for staying with me. Hope I Helped ☺

Much love,

-Rahul D. UX Designer

PS. If you have suggestion, more questions or want to talk to me. Hit me up on Twitter or Instagram.

--

--

Rahul Dahiya
Teaching Myself Design

Freelance product designer from New Delhi, India. I focus on UX Designer, product design, Design Sprint, and Workshop Facilitator. https://therahuldahiya.com/