People Innovation Excellence

Basic Elements of Site Maps and Task Flows 

The most basic of elements within your drawing program is creating site maps and task flows. To ensure that your creations can be easily interpreted by a wide audience, however, it’s best to use a standard set of shapes.

A site map is a visual representation of the pages within a website. Site maps are used to show how the content and functionality of a web site are organized. They typically show the relationships between pages and which pages contain dynamic or static content. Task flow are a visual representation of paths and processes that users follow as they use a web application. Task flows detail the screen flow and options that are presented to users as they use a system to complete a task.  While a site map shows organization of content and functionality, tasks flows illustrate the user paths and key decision points.

Basic Elements of Site Maps and Task Flows:

  • Page: the basic unit of user experience on the Web. There are a number of ways to draw these pages, but the simplest, most commonly used format is a plain As the progress through creating site maps and task flows, you will want to find the style that best suits you for labeling and numbering your pages.
  • A pagestack: represents multiple pages of similar content. An easy way to comprehend pagestacks is to think of dynamic content, such as a common blog page created using a publishing system
  • Decision Point: used to show the path that a user can take depending on the answer to a question
  • Connectors and arrows: used to show movement or progress between pages, pagestacks, decision points, and so on. Connectors generally appear where there is a call to action from one page to another
  • Conditions: A dashed line is a fairly common way to display a condition. it can appear in site maps, task flows, and other work product you may create or invent. You can use a dashed line as a connector or as a box around an area to highlight that a connection to a page or an entire section of pages is conditional based on some other action or event

Russ Unger and Carolyn Chandler. (-). A Project Guide to UX Design: for User Experience Designers in the Field or in The Making. 02. New Riders. Berkeley, CA. ISBN: 978-0-321-81538-5.
Verhoeven, B. (2018). User Experience Documentation: Site Maps, Task Flows, and Wireframes. Retrieved from

Published at : Updated
Leave Your Footprint

    Periksa Browser Anda

    Check Your Browser

    Situs ini tidak lagi mendukung penggunaan browser dengan teknologi tertinggal.

    Apabila Anda melihat pesan ini, berarti Anda masih menggunakan browser Internet Explorer seri 8 / 7 / 6 / ...

    Sebagai informasi, browser yang anda gunakan ini tidaklah aman dan tidak dapat menampilkan teknologi CSS terakhir yang dapat membuat sebuah situs tampil lebih baik. Bahkan Microsoft sebagai pembuatnya, telah merekomendasikan agar menggunakan browser yang lebih modern.

    Untuk tampilan yang lebih baik, gunakan salah satu browser berikut. Download dan Install, seluruhnya gratis untuk digunakan.

    We're Moving Forward.

    This Site Is No Longer Supporting Out-of Date Browser.

    If you are viewing this message, it means that you are currently using Internet Explorer 8 / 7 / 6 / below to access this site. FYI, it is unsafe and unable to render the latest CSS improvements. Even Microsoft, its creator, wants you to install more modern browser.

    Best viewed with one of these browser instead. It is totally free.

    1. Google Chrome
    2. Mozilla Firefox
    3. Opera
    4. Internet Explorer 9