The tree structure view allows one to have a global vision of the website and of the browsing path before preparing the models of the main pages. Carrying out the plan of one’s own website is often a very difficult thing to do. It is never easy to organize contents, which are often more heterogeneous than what imagined at the start. Above all, designing a plan means ranking, making choices, and this may take time and create discussions in a team. It is a difficult exercise, but oh so important. Without a well-thought-of browsing, a website, as pretty as it is, is unlikely to achieve its objectives. This post should give you all the keys to understand what’s at stake and to concretely create the structure of your website.
The tree structure of a website, a fundamental step in the creation of your website
From the tree view to the storyboard
The tree view, or site plan, is generally presented in the form of a diagram that organizes the website pages into sections and defines the different browsing levels. This is usually the first step in the design of a web site. Once the tree structure of the website has been validated, the whole team is provided with an overview on the website, and one can move down a level in order to check the pages in preparation for the production of models. The next step is creating the zonings of the pages, that is to say cutting the main pages out into zones, for example, a horizontal rectangle for the logo and the main menu, a vertical rectangle on the left for the secondary menu, etc. Afterwards, we go from zonings to wireframes where we add the main texts and graphic components, and then finally from wireframes to the website’s graphic models.
Paying attention to the tree view in order to guide visitors
This is of course the first challenge. It is customary to say that a page that can be reached in 3 clicks is useless. Organizing a large amount of information is often very difficult. There are no miraculous recipes, you should set up an initial browsing device, observe the processes and improve the plan gradually. A browsing device can be based on different media. Some examples:
- Main browsing menu, possibly with a secondary menu that appears at the overview of the main menu
- Secondary browsing menu, it can be the son menu of the selected element in the main menu, but it can also be a completely different menu
- Internal search engine, with one or more search links
- Sidebar, where you can promote horizontal browsing via products or articles suggestions,
- Footer, with access to the main website categories or to key pages
Should your tree view be well thought-of, you could put in place an effective browsing device for all situations. Designing a tree structure is not only classifying contents into categories and sub-categories, it is anticipating processes. If a visitor reaches page XY via acquisition channel AffiPub, and he/she is interested in the product ABC, will he or she have easy access to the target page? It is hard to anticipate all the processes, but taking three visitor profiles, each one arriving via a different channel, with different needs on a different landing page, may be very useful in order to refine one’s tree structure and to give it life.
Paying attention to one’s tree view in order to improve its natural indexing
The tree structure of your website will have a significant impact on its natural indexing, either globally or in your website pages’ hierarchy. Search engines analyse the links between the pages of your website to understand its general structure and to determine what the key pages are. The more a page is “deep”, the less it will be taken into account. In concrete terms, a 3rd or 4th level category will be referenced, but the search engines will give it little importance compared to a first or second level one. Techniques exist, such as the use of an additional page, but it is generally recommended to have three hierarchical levels maximum.
The depth of the pages is far from being the only SEO challenge
to be included into your thoughts about the website’s plan. The most important
may be organizing the content of one’s website in order to bring the pages
linked to the same semantic field as close as possible. In the SEO jargon, the
term silo architecture is used when all the pages of a category belong to the
same semantic field. In this architecture type, the silos, i.e. the website’s
different semantic fields, should be sufficiently independent, and there is the
possibility of using links inside the page content to highlight some specific
pages of the silo.
Internal networking is a vast and fascinating subject. For you to have clear ideas when working on your tree view, here are the three essential rules:
- The higher a page is in the hierarchy of your plan, the better its indexing will be,
- The more a page receives links from other pages of your website, the better its indexing will be,
- The more one page receives (and sends) links of pages which are close on the semantic level, the better its indexing will be.
The last thing, all internal links are not equal. A link from the main menu will be more highlighted than a link in the footer, and a link inside the content will be more highlighted than a link in the sidebar. To go further, I recommend reading the excellent article about internal linking strategies written by the SEO consultant Aurélien Berrut.
Creating the tree view of one’s website in 5 steps
1. Listing all the website’s contents
First of all, you should list the whole of the items you want to include on your website. At first, thinking about pages is useless, it might slow you down, think rather about ideas or objects, and be as exhaustive as possible. You will see how to organize your ideas and objects in pages a little later.
Of course, identifying the main content type of your website from the start might be very helpful. For example, the contents for an industrial company trying to promote its business on the Internet might be listed as follows:
- Services & offers: General activity, Expertise field 1, Expertise field 2, Strong points
- Catalogue: Range 1 (3 products), Range 2 (8 products), Range 3 (2 products)
- About: Contact, Offices, About us, Legal notice
2. Analysing your competitors’ tree view
Your competitors’ tree view is often a mine of useful information. In concrete terms, the primary interest is making sure you have not forgotten an idea or an important dimension in your business when you first listed the contents. The second aim of your competitors’ tree view study is to give you ideas for content organization. Each of your competitors has probably set a typology of products or services of its own, it is up to you to analyse them to see how that can inspire you.
In order to analyse your competitors’ tree view, you should also be able to collect data efficiently. Obviously, you can browse the website and model starting from the website’s plan, but this can be time-consuming. You will be able to collect the complete list of the website’s pages in an Excel file by using SEO analysis tools. The best free tool for the performance of this activity is Screaming Frog, but it has to be recognized that it is not necessarily easy to access. If you have some money to invest, you can take a look at tools like Ahrefs or Open Site Explorer (MOZ).
3. Organizing & ranking the content
The time has come to bring your content list to life. Two major reasoning ways are possible. The bottom-up approach consists in initially focusing on each content type identified in the first step, and in secondly combining the mini-tree structures in order to think globally. In some cases, this approach is not suitable because the content types are not structuring, or because the main difficulty is to organize the content of a same type. The top-down approach consists in initially defining the first level of hierarchy, and then in descending slowly, by always keeping a global vision.
The two approaches are not incompatible, on the contrary, they are very complementary. We strongly advise you to think in both directions, and to compare the tree views and the typologies you wish to come to. One last advice, common sense should be the first principle in all your reflections. This may seem obvious, but in practice it not always is, especially when you have your head to the grindstone. In concrete terms, this means that one should be coherent and not mix the chicken and the eggs.
4. Formalizing the tree view on paper or by using a prototyping software
Obviously, it is possible to formalize your website’s tree structure on paper. This usually allows one to work faster than by using a software, and it is preferable to spend 2 hours to prepare 3 versions of the tree view on paper than just create a very pretty one through a software. A tree created through a software will be easier to edit and divide. Personally, it’s often a bit of both. The first thoughts are written on paper, and once the general structure of the website’s plan is finished, there comes the formalization through a software. You might say: which software? Actually, there is no specific software to create web tree views, but many tools can be adapted. A precious help to organize your ideas from the start comes from mind mapping softwares like Freemind or MindMeister Web prototyping softwares such as Balsamiq or Cacoo can often be used to draw tree views quite rapidly, even though Microsoft Powerpoint continues to reign supreme in many web agencies … For slightly more complex tree structures, Microsoft Visio is also widely used.
5. Scriptwriting, thinking SEO and starting again!
This is not over! Once your tree view is formalized, it has to be tested, compared with the reality, namely your visitors. This is a very useful exercise to improve the website plan in small steps and to identify links between pages beyond relatedness, which will be very helpful when you will be working on the zoning of your pages. In concrete terms, the easiest way to test your tree view is defining scenarios and identifying the website browsing for each one. A scenario can be defined as follows:
- Visitor’s Profile: Age, CSP, web maturity
- Objective & sensitivity to your offer : Strong need for a product, vague interest in the field, etc.
- Acquisition channel : How did he/she get on your website? Natural indexing? Press campaign?
- Landing page : What page did the visitor arrive on? Product sheet? Blog? Do not forget that a well-referenced website attracts more than 80% of visitors on the landing pages, which are different from the home page.
Imagine the path the visitor will walk along on your website for each scenario you define. Does your tree view allow one to rapidly arrive on the target page every time? Once you will have focused your thinking on visitors, the next step will be thinking about robots! As we have seen above, the tree view is very important for the natural indexing of your website. Ensure that you have respected the basic rules. Are your key pages in the first or in the second hierarchical level? Do your categories form coherent semantic fields? You can find this quite complete article on internal networking for more information on the subject.
During this phase, do not especially hesitate to start everything again. The tree view is your website’s skeleton, you should really take the time to prepare an efficient website plan, either to bring visitors from a landing page to a target page or to allow search engines to easily understand the whole content of your website.