My UX Toolkit: Site Maps
My UX Toolkit is a series of posts exploring different tools and techniques used in the user experience design and research process.UX is a broad and varied space that can range from quantitative statistical analysis to graphic design, from branding and content strategy to storyboarding. I am going to scratch the surface of how UXers UX, share my knowledge and further my own understanding of this vast career field.
Sitemaps
What is a Sitemap?
Imagine receiving a gallon ziploc bag full of what must be hundreds of legos, of all different shapes and sizes in predominantly grayscale colors. Written on the side of the bag in black sharpie is “millenium falcon”. And the friend who has bestowed you with this gift insists that if you put these legos together in the correct formation you will end up with a 5x12x17 inch Star Wars millennium falcon replica, complete with rotating gun turrets and an opening cockpit. You are inclined to believe them, because you spy a chewbacca figurine floating amongst the gray pieces. You are up for the challenge but you have absolutely no idea how to even begin.
Until your friend hands you the instructions.
And you spend the next few hours enjoying yourself, building your space ship, and feel immensely satisfied with the end result.
Trying to build or redesign a website or app without a sitemap is like trying to build a lego set without the instructions. A sitemap is a flow chart or diagram that offers hierarchical top down look of the layout of pages of a website. It informs the structure of the website and in what order pages will be viewed. Depending on the content of the site/app, this order can be organized by a number of different factors, including alphabetically or hierarchically by importance.
Underneath the overall UX umbrella sitemaps fall under the sub category of Information Architecture. Under the Double Diamond methodology, they are generally used early in the ideation or design phase of the UX process. The order in which you arrange a sitemap can be informed by a Card Sort.
This tool is helpful for the designer. When created before wireframes, it helps visualize the layout of the site and how a user will move through it, helping to identify which pages will be needed and preventing early errors and over bloating of the site. It is also an important visual tool for sharing your ideas with others, most importantly stakeholders, developers and other designers.
How a sitemap is presented is up to the creator, but it is probably best at sharing information when made as a visual diagram. These usually come in the form of a top down tree diagram that indicates how the pages are linked together. Icons can be color coded and labeled based on hierarchy within the site.
For more simple websites a sitemap can be as basic as a bulleted list, also known as an HTML sitemap.
Taking the time to build a sitemap is an important step whether in building a product from scratch or in a redesign. It is a tool to ensure that the team is on the same page and has a blueprint for the design of the product, and the first step in building an intuitive and engaging user experience.
