When it comes to purchasing products online, customers have grown out of the basic expectations of using a functional store to a more UX-oriented mindset. Whether you produce and sell your own products online or run a large E-Commerce reseller website, planning your site’s structure and sitemap is of utmost importance.
In this regard, your website’s information architecture and the way you craft your customer’s journey can make or break your business. According to Top Tal, 88% of users are not likely to return to a website after a bad UX, with 62% less likely to purchase anything from that particular brand altogether. In the age of digital marketing and E-Commerce sales, perfection in customer servicing goes without saying.
With that said, what are some of the most important features of E-Commerce website planning worth keeping in mind? Let’s take a look at how you can plan out your own online storefront through information architecture design in order to achieve better engagement and conversion rates.
We’ve mentioned information architecture in our introductory segment as an important part of E-Commerce website planning — but what does it really represent? Information architecture is a deliberate attempt to create the best possible user flow through specialized tools and content engagement on a particular website. It represents perfect unity of the basic pillars of an E-Commerce business:
If the information architecture is planned correctly, users will instinctively look for categories of products that suit their interests, engage with the search functionality and do their best to engage with your website’s features. While information architecture isn’t necessary for a functional E-Commerce site to be operational, it’s absence will be felt in the overall traffic and revenue rates it achieves.
No matter the industry in which your E-Commerce site will specialize, there are some basic elements and pages worth keeping in mind. These can serve as the perfect groundwork for further information architecture design activities, so keep them in mind going forward:
Once you have established what products you will sell, to which countries and under what shipping circumstances, you can proceed further into your website planning efforts. Now that we have a better understanding of what information architecture is, let’s dive deeper into some E-Commerce website features by looking at End Clothing, an apparel storefront.
As we can see from their landing page, the E-Commerce format they chose addresses the visitor directly without unnecessary ad elements unrelated to the brand’s product portfolio. The horizontal navigation bar is filled with drop-down menus which easily serve as a sitemap for customers and curious B2B onlookers.
This effect can be achieved by implementing a professional sitemap builder which will guarantee that your information architecture has the right baseline. It is apparent by looking at their “Help” section that the E-Commerce site also features extensive customer support and service options, including live chat with a company representative.
This type of forward-thinking website planning will always ensure that visitors convert into customers and spread positive thoughts about your brand.
If we access any product category featured on End Clothing, we will be greeted by a highly-functional search-optimized E-Commerce interface. Each category is designed to display “All” products which belong to it by default — however, this is only the tip of the website’s information architecture construct.
You can easily modify different filters such as brand, style, and color to match your preferences up with the perfect products available on the E-Commerce store. This allows for quick and easy purchase activities no matter how tech-savvy or experienced you may be with online shopping. Finding the best ways to cater to a wide range of customer profiles is one of the greatest challenges presented by the modern E-Commerce industry.
Lastly, if we click on any product which might interest us further, the website’s highly-curated content will ensure that we make the final purchase decision quickly. Elements ranging from high-quality photographs, extensive customization options, and detailed product descriptions are all important features worth adding to your information architecture.
Best of all, End Clothing placed an easy-to-reach live chat button on each product page for quick access to their support agents, adding another stamp of proverbial approval in terms of UX design. If a visitor feels comfortable with the marketing content, social proof and product description elements featured on your E-Commerce website, the final purchase is highly likely to happen. This is why website planning is just as important as attractive discounts or exclusive sales offers – if no customer will trust your service, no amount of sales campaigns will help you grow as a business.
Finding the best way to cater to your target audience can be difficult, especially if you have no prior experience in running an E-Commerce storefront. Start the process of building your E-Commerce website by exploring how you can create information architecture which corresponds with your abilities as a content creator and provider of quality products. If it proves to be too much for you, a specialized user experience platform might be all that stands between you and your dream online business.
Daniela McVicker is a blogger with rich experience in writing about UX design, content planning, and digital marketing. Currently, she is the chief contributor at Top Writers Review where she helps individuals and organizations improve their web content writing, design, and planning skills. Her posts are always packed with examples and actionable content that readers can put straight into the action.
Image source: endclothing.com
When a site clearly and intuitively conveys its story or service across and compels you to take action, it showcases sound information architecture underneath its user-facing interface.
Information architecture is the structural mapping of all the usable information in a site that encases all content in a logical order and connection, which seamlessly pushes its goals to the user’s needs. The lack or absence of sound information architecture results in bad user experience, high bounce rates and lower click throughs. This is why IA auditing is a crucial task in developing sites.
IA auditing can pinpoint underlying problems in user interface, user experience, navigation systems, and even SEO rankings. This article delves into the results and possible impacts of an information architecture audit.
IA is the central thread that weaves into the UX. Problematic or unintuitive UX designs often come up in IA audit as the lack in logical structural systems in place to store and easily retrieve data. Discoverability and autocomplete actions are the most common UX pitfalls. Integrating both company and user goals communicated in good UX is a key hallmark of a great IA.
Hackernoon notes that the growing complexity of front end development tools results in the preclusion of lower skilled developers. In what it calls ‘back-endification’ of front-end development, competition becomes more complicated and competitive edges becomes granular. Maryville University highlights how the software development industry is expected to grow exponentially up until 2024, at which point experts predict that there will be 1.1 million computing-related jobs available. This is just one of the many implications of faulty IA and lax auditing from beginner UX designers.
IA audits also lays bare problems in navigation design. Navigation design and architecture must cater to the simplest and most encompassing way content within the IA can be presented to the user. A common mistake is choosing a navigation design disjunct to the site’s content.
Smashing Magazine suggests that great navigation design considers what users look for in your site. How it’s presented though should depend on the depth of indexing and categorization used in the site’s IA.
A rigorous IA audit can segregate crucial categories – core content – and optional categories within a site. This helps in increasing ease in navigation for your core audiences while affording other niche users with good UX.
This is why when approaching a design or redesigning a site, it always pays to look under the hood first. A thorough IA audit can give you a concrete idea on the complexity of the site’s content. An efficient and thoughtful IA can lead to better UX, interface, navigation, and user retention design.
The FlowMapp x Figma bundle helps you build a great UI and navigation design by letting you create detailed site maps corresponding to the content and goal of your site. As site competition becomes granular, the key challenge in 2019 is cutting off garbage and focusing on your main priorities.
Written by: Alyssa AmbersRead more
There is an enormous amount of information on the internet. Every page you load is stuffed full of it. With so much raw data floating around the internet it’s vital to remember that in order for human minds to be able to actually process all the data, strategic visual architecture is required. Pages that have masses of information and cues all jammed together will elicit no response from a visitor since the effort required will likely be too great and the end result will usually be a click away. The very best optimized sites, however, can contain a massive amount of information that visitors will happily and easily process in a matter of seconds. This is entirely down to information architecture, which is one of a suite of facets that make up User Experience (UX) design. Some of the frontrunners in information architecture (IA) include social media sites. Social media sites require effective IA because the information that an average social media page contains is deeply diverse and, as such, can be extremely confusing to navigate if it isn’t designed well. So, let’s take a look at what is going on that dictates whether IA for social media is a success or a failure.
No social media looks the way it does now without having looked very different in the past. “You may notice, particularly if you are using social media apps such as Facebook or Twitter, the occasional need for your app to be updated. Aside from bug fixing, mostly these will be small, or significant tweaks to the aesthetics of the app. Social media websites in their earliest form look completely different and evolve over time, in part due to the changes in content in part due to market research on the way people use the site”, says William Scott, project manager at PaperFellows and OxEssays. That evolution phenomenon is most interesting because it implies a sense in which social media websites ‘evolve’ as humans evolve. As humans have adjusted to navigating sites in a way that isn’t as dependent on text, for example, and more on intuition, it has been important for a company like Facebook to adapt their IA to account for how we as people have changed in our digital interactions. Flexibility, the ability to evolve, is vital for proper social media IA, I A of any time. If you ever think you’ve cracked the code with site design, think again.
UX design can sometimes lose sight of its origins. When you obsess over a cool feature of a social media site, like for example Instagram’s update to allow multiple photos in one posting, then you can forget about the broader user experience. Understanding how people who are using the app will be affected by the multiple photo design requires stepping back and thinking about how an average user uses the app as a whole. Before that update is able to be enacted, there has to be a guarantee that the overall UX won’t be badly affected. Some of ensuring your IA is in order involves user testing. But there are other solutions too. For example, Sitemap Tool from FlowMapp, which turns the possible user experience into a digital map so that the ‘flow’ of your site can be assessed in advance of making a big change.
One of the biggest challenges for any digital IA is that, as a field, it is highly interdisciplinary. “Knowing how to work effectively in IA is not something one person can really do. Understanding the technical specifications, for example how to code for the actual page design, is great and will be a valuable asset. But just as important is dealing with a constantly fluctuating set of variables relating to human psychology, classification, logical navigation, data management, testing methodology and a whole host of other complex fields”, warns Samuel Herzel, data manager at StateOfWriting an Academized. People take web design in general for granted. The thinking is that, since we are now well into the internet age, that ought to make things simpler, when in truth, at a high level, it makes it much more complex. Bring that into the social media arena and it becomes even more difficult since social media has its own set of rules and behaviors associated with it. That’s before mentioning the vast human element to social media which adds a further layer of unpredictability.
Doing proper information architecture for a social media site is a real skill, one that takes years to learn and usually will still require the input of others with their own specialties. But, as you can see, it’s a vital part of social media design and it is changing every minute of every day.
The modern world is overflown with information, a huge number of sites force users to regularly process an incredible amount of data. Having access to such a large amount of research materials, users often feel frustrated due to the inability to find the desired data in the bottomless pit of useless information. This is largely due to the fact that the developers did not pay enough attention to the systematization of information on the Internet for a long time.
Like a library or bookstore, each new site requires a systematic approach to the process of developing proper navigation and data cataloging. Imagine a store without clear navigation, where all the books are stocked in one big pile. Let us assume that you are trying to find Lacan’s seminars or a new novel by Michel Houellebecq in a store like this. The most common decision will probably be just going to another store, where all the books will be conveniently sorted out, because you will not have to waste your time searching for the right book in a pile of unnecessary ones. Such a simple comparison can determine the significance of a systematic approach to website data organization. One of the tools to systematize information on the site is to develop a proper structure.
A website structure can be defined as a structural projection of an informational space that provides intuitive content access. The site structure helps to form an understandable navigation system, using which the user can find the information he needs easily. The organization of a website structure is a necessity that a developer faces when designing usability. In addition to usability, correct site structure often solves broader problems that depend on the goals of your website.
You should always use different organization schemes for different purposes, depending on the user’s needs and your business goals. There are two approaches to the development of such a classification: top-down and bottom-up.
This approach is based on the goals and needs of users. You should start with the most general categories of future content and functionality. To achieve business goals, it is necessary to conduct a logical content cataloging, gradually breaking it up into categories. The result will be a hierarchical structure of the site, which can be used as the foundation for content organization and help you define proper functionality.
This approach can be defined as a way to develop the structure based on the content that is available at the time of launching. The bottom-up approach also involves accentuation of categories and subcategories. The development of such a structure should begin with the content research. Depending on the content provided, you should group elements into categories of the lowest level, and these categories into higher ones. This creates a structure that reflects users goals and needs.
Each of the above mentioned approaches solves particular problems. Before starting a website development, you should remember that each approach has its pros and cons. It is harder to work out a detailed content with the “top-down” approach.
The peculiarity of the “bottom-up” approach is that it adapts the website structure to already existing content, which can interfere with future content adding. In order to create a good site structure, it is necessary to balance between the “top-down” and “bottom-up” approaches.
There are several rules that must be followed when developing a website structure. One of such rules is to limit the browsing “width” and “depth”.
The “width” here is the number of options at each browsing level. You should limit the browsing “width” by working out the cataloging system and setting the organization principles in the upper browsing level. A well-developed cataloging system will reduce the browsing “width” at the lower level of the site structure, simplifying the search by category at the “upper” level.
There is also an opinion that the “browsing depth” should not exceed three clicks – this means that the visitor must perform no more than three actions in order to get to any part of the site. The balance between “width” and “depth” makes the content easily accessible. Without a doubt, this rule is reasonable.
Nevertheless, you should pay more attention to the transitions logic. With smartly designed transitions path, each next step looks logical and understandable to the visitor. Even if the “browsing depth” of your websites exceeds three or four clicks, it is unlikely to have a negative effect on conversion rates. On the contrary, if you have a “browsing depth” of three clicks, but have not set up a proper transitions path – you may mislead your visitors, they can get lost in the structure of your website and will not find the information they came for.
Understanding your website goals and user needs is the foundation of a great structure. This data cannot be obtained out of thin air, and you have to conduct a research to realize your target audience’s needs before you begin to design the structure of your site thoroughly. As your website develops, you should keep the researches up to date in order to understand the dynamics of growth and changes in user needs. In this case, the Customer Journey Map tool will be of assistance. By controlling user needs, you get the opportunity to make timely changes to the site structure.
When developing a commercial organization website, the Client or a representative often does not understand the principles of Internet business functioning. If that is the case, it is important to explain that the development does not end after the launch. The Internet is a dynamically developing environment where business success is largely due to the timely integration of working business solutions. Subsequent additions and changes to the site after the launch should not lead to permanent fundamental changes in its structure. A distinctive feature of a good, well-developed structure is the possibility to adjust the website to the dynamics of business needs.
Regardless of how well you work out the site structure, it may sometimes be necessary to redesign its organization. As a rule, such changes are due to an increase in amount of content. When creating a small online store, you can implement scrolling of goods by the date of publication. Given a small amount of goods, such an organization can increase the conversion rates due to the fact that the user has the ability to quickly view the entire range of products, and it is highly possible that some users may want to buy an item that they did not even think about at the beginning. However, this will not work if you have a large number of goods, because the users will have to look through lots of unnecessary products in order to buy the thing they need. You should redesign and make fundamental changes to the website structure in these occasions. Your customers will not waste their time like this, and your earnings will decrease.
When it comes to the development of a website structure, there is no need to focus on only one cataloging system that is accepted in your business niche or that is used by your competitors. Certainly, one should be aware of the existing similar experiences, but it will be much more productive for the business to be guided by the user needs. In order to correctly identify user needs, you should conduct an UX research.
Read more about the implementation of UX research methodology at the early stages of product development in our article.
Features a tree-like structure, the elements in which have “main” and “secondary” dependencies. The “secondary” elements are the narrowest concepts stored in the “main” element. In accordance with the hierarchy, the “secondary” element is dependent on the “main” element, and any “secondary” element might become “main” to another, if you wish to narrow down the concept further. For example, the “main” element is the “Main page” of an online store, the “secondary” is the “Catalog” page or the “Product card” – depending on the navigation system. By following the above-mentioned sequence, you can go all the way from the general “Main page” of the site to the “Product card” page, that is narrowly focused. In hierarchical type of structure, each “secondary” element must be a child of a “main” element (excluding the primary “main” element, which is the beginning of the entire hierarchical scheme). The hierarchical model of website structure is one of the most popular and easiest ways to display complex information flows.
Allows you to design elements of structure in two or more dimensions. The matrix structure is suitable for designing navigation in terms of a single element, taking different user needs into account. Typical example of implementation of this model is an online store product catalog, in which the sorting of a single list of products must be provided according to different parameters, for example, by color or size. It is important to remember that it is hard to process and visualize information in four or more dimensions. This means that matrix structure with more than three dimensions can create additional navigation problems.
In this type of solution, structure elements are not logically related. Organic structure does not have the principles of content cataloging, and it can only be implemented in conditions when the links between the content are not established. An entertainment website, during the use of which the user is ought to feel like a researcher is a vivid example of organic site structure.
It is one of the most common forms of organizing information, familiar to almost everyone. For example, a consistent structure can be seen in books, articles, video and audio materials. An example of a consistent site structure on the Internet can be a simple “Landing Page” where there is a consistent description of the product and contacts. A consistent organizational structure can also be used when designing onboarding in a mobile application and on a website.
Organizational principles are necessary for grouping and cataloging content. In fact, organizational principles are a set of criteria by which the elements are grouped. These criteria are formed in accordance with the results of research and a business solution that is successful in a particular niche. Therefore, it is necessary to form different organizational principles for sites with different purposes.
When developing a corporate site structure, the organizational principles are more likely to be focused on audience, so the second level of the tree structure will most likely contain the following elements: “News”, “About Company”, “Our Products” and other pages relevant for the target audience of this website.
At the upper levels of website structure, organizational principles are focused on business goals and user needs. The lower levels are more dependent on the specific content and service functionality.
Consider a news site as an example – the content is located in a chronological order. This is due to the website’s primary purpose. As a rule, most users visit such portals to find out the latest news. Therefore, the upper architectural level is mostly focused on users primary needs.
The lower level of a news portal will be heavily content-focused. For example, if the site specializes in IT news, then the content will probably be divided into the following categories: “Design”, “Frontend” etc. Thus, when designing the lower level it is important to detail and group the content properly.
You should not be limited to only one type of structure. During the process of development, your primary focus is the user needs, therefore you should implement the type of structure that is relevant to your visitors. Start designing the top level by creating a hierarchical structure and defining the needs of your target audience. Use any type of structure that will meet the specific needs of your site in the process of future development.
I already have a website and it is structured in a wrong way. Is it worth creating a structure with new pages or should I restructure the old ones?
This question cannot be answered without a complete analysis of the current site structure. We can conclude which of the options will be cheaper and easier to implement only after the analysis.
When is a tag cloud useful?
This question is more related to SEO optimization. In order not to lower the current place of your site on a search engine query, you should ask a SEO specialist about the correct way to use the tag cloud.
How to properly organize the bottom level of the site structure if it has a large number of identical elements and they are added on regular basis (for example, online store product cards)?
In order not to make the structure too complicated for perception in a situation when the amount of content is regularly updated, one should correctly catalog the content (upper level of the site structure). If you work out the principles of content organization correctly, you will not have any difficulties in adding new content and distributing the already existing one without messing up the structure with similar elements.Read more
Reviewing a cool shot on Dribbble or a top case on Behance, a novice designer who is not familiar with the delicacy of web development may think that in order to become a professional and create successful projects single-handedly, it will be enough just to learn how to make beautiful pictures, and make some nice animations ‘here’ and ‘there’. They think that these simple actions will provide them with high income, and all the media resources will be interested in their opinion.
Only a small number of people can estimate the real amount of work that they will have to do before creating their “first artboard” on a new project. This article is about the unappreciated work that usually remains behind the scenes.
The development of a good product begins with the research work, and the first task of any designer on a new project is observation.
Observation is an underestimated skill that is neglected by many newcomers with an impostor syndrome. The lack of time evaluation skills, customer pressure and a tendency to generalize — all this drives them into a conditional ‘black wigwam’. There, the disorientation leads them to chaotic actions and inconsistent decisions, and the result is usually frustrating. To avoid such cases, it is necessary to understand that the product is created for the user. Therefore, the designer is required to understand his target audience. This simple conclusion is the key to understanding the significance of the basic UX Research concept. The UX planning tool helps the designer to determine user behavior and prepare the most intuitive and responsive interface. Nevertheless, the user experience research methodology implies a high number of tools that need to be applied depending on the project and budget you have.
Interview is one of the basic tools that allows you to understand the user needs. The UX interview is based on the sociological research practice and is verified by time. The significance of the interview results depends on the question – it is directly proportional to the number of interviewees and the representativeness of the sample. Interviews can be divided into two groups: “moderated” (polls) and “unmoderated” (questionnaires).
Classic – a regular interview, with specific questions and answers to them. In order for it to be useful, it is necessary to interview as many users as possible. The main benefit is to compare the answers received.
Disoriented – an interview in which the interviewer usually does not use questions prepared in advance, or tries to minimize their number. In this kind of interview, the interviewer sets the abstract frame and listens to the interviewee. Here is an advice – when conducting this type of interview, use a voice recorder to be as involved in the story as possible.
Action – this type of interview is defined as a contextual observation. One of the popular cases is the ‘Uber’ design team, whose specialists worked together with taxi drivers, consulting with their target audience and integrating the user experience into the development of the new interface.
Card Sorting is often carried out in the framework of moderated testing. In this type of testing, the user is presented with a set of cards with terms that he must catalog according to his subjective representation of the hierarchy. In result, we can obtain relevant data on the understanding of the hierarchy by the user and use the information obtained when creating a Visual Sitemap.
Tree Testing – a moderated testing, in which the top element of the Sitemap is provided to complete the task given to user. The user is asked to explain a particular action that he performs in the process of completing the task. Such testing allows you to check the logic of the site map hierarchy.
A/B Testing – the most popular survey in the UX study. A/B testing is necessary if you have two competitive solutions. The reason of A/B testing is to randomly provide each option to a different number of users, the results of such testing can serve as proof of an assumption in a disputable situation.
Guerrilla testing – one of the way to conduct testing on a free site, in a shopping center or cafe. Unconditional plus of such testing is minimal expenses. The downside is the minimal sample representativeness. For this reason, this methodology should be used for projects with a large user base.
A persona is a collective image of the user, which is formed by a set of researches. If you define a persona, you can control the expectations and needs of users, embodied in one fictitious profile.
There are three key parameters of ‘persona’ – user description, environment description and tasks description.
User description – key parameters of the user, his gender, age, occupation, goals, and more personal information are indicated.
Environment description – territorial factor and context of use, this column contains the place and time at which the user interacts with the product.
Tasks description – the tasks that need to be solved by the user.
The main purpose of the ‘Persona’ tool is to get to know and see the image of target audience. Persona identification affects the decisions throughout the development path. The positive effect of the persona is often proved in situations where the Client provides data on the target audience and asks for new functionality to be developed, but when conducting a study and compiling a Persona Card it becomes clear that the Client’s target audience is not as was stated, and it is necessary to develop the exact opposite of which the Client requested at the beginning.
CJM is a way of determining the user needs at different stages of interaction with the product. CJM is formed on the basis of ‘Persona’ and allows you to think about the individual route of the user. By designing a CJM, you can determine the points at which the user will pick a product of your competitor instead of yours.
CJM is presented in the form of a table in which the ‘Customer Goals’, ‘Channels’, and ‘User Flow’ are reflected.
Please, see the following article in order to learn more about User Flow:
“Barriers” and “Ideas”. Filling each block at the corresponding stage of interaction with the product allows the designer to understand the user for whom he is designing it. When designing a CJM, it is important to maximize empathy at each stage of user interaction in order to try to understand his thoughts and emotions when interacting with the product. Nevertheless, the base on which CJM is built is the result of research of the target audience and the definition of a particular ‘Persona”. Otherwise, you can get an irrelevant user travel map.
A Visual Sitemap is a content navigation planning tool. Sitemap development requires an integrated approach. In order to be able to plan a valid map, it is necessary to conduct in-depth researches. When planning website navigation, the designer must see the product and its navigation hierarchy through the eyes of the user. This is the only way to create a Sitemap with the help of which there will be a possibility to correct the user’s path in future, providing him with the necessary information as quickly as possible.
In addition to the research work carried out by the UX specialist, it is important to take into account the semantic core clustering data provided by the SEO specialist when designing a Sitemap. The preparation of the semantic core and the use of analytical data for a website design – are the main topics of this article.
The direct purpose of the UX research methodology for the designer is to ensure that the users’ needs are understood and implemented. It is the need for awareness of the target audience that the designer requires after he begins to explore the interface patterns more thoroughly. The questions ‘Why does this UI element have a similar shape? Color? Or why is it located in this place, not in that?’ The designer opens a huge world of UX, where every design decision is justified and supported by research. In the frame of this article, we gave a superficial definition of a small list of tools that needs to be integrated into the workflow at the very beginning of the path of website development.Read more
UX Research and SEO tools in website structure development. A detailed overview of the website structure designing tools can be found in our new article.
The website structure is the actual display of the navigation plan on your site. Each element of your website structure implies a real page. By forming the structure of your website you develop the navigation and lay the foundation on which the design of your future site will be built. In a broad sense, the website structure is a treasure map in which the treasure is a product that you want to sell to a potential Customer. Optimizing a simple user route to make a purchase from your website is a priority for you and your business.
Planning the website structure is a very time-consuming process. For the most intuitive display of the structure, the ‘Visual Sitemap’ tool is used. A Visual Sitemap is a hierarchical diagram reflecting the actual structure of your website. The main reason of this tool’s popularity is the complete comprehension of the structure that it gives to the UX designer. At the beginning of development the site map diagram allows you to look ‘down upon’ your project, to estimate its scale and to work out errors. At the moment, the Visual Sitemap is the most convenient way to develop a website structure. It should be remembered that the benefits of the logical site structure affect not only the UX, but also the identification of the site by search engine algorithms, which directly affects the ranking of the site in a search engine. Unfortunately, high ranking in a search engine is not a panacea for your business, and if you want to create a successful Internet project, you should start with the most fundamental questions. Your business is not just a ‘relevant query’ in a search engine, but first and foremost a product that a potential Customer is looking for. You should start by defining the fundamental purpose of your business. This knowledge will further help you to define the goals in planning the development of your website.
Competitor analysis is an important step towards creating a good structure of your website. As in any competitive business, you should pay attention to the way your competitors do business. Such an approach can save you from unnecessary mistakes. In practice, there is often a situation when an entrepreneur neglects these simple but important rules, creating the website structure solely by intuition. Such actions often lead to wasted time and lack of results. This provokes unnecessary costs, audit and repeated development of the entire site, focusing primarily on the correct structure. Analysis of your competitors’ websites structure will help to fix and prevent errors that they had already made at the start. In order to create a detailed and flawless structure, it is necessary to analyze several competitors at once. Prepare a detailed table that compares your competitor’s websites. This will help you see and correct the errors of some sites using the structure of others. As a result, you will receive a working database, which can be further contextually worked out to create the optimal structure of your site.
Modern responsive interface development experience offers you a wide range of different tools. Interviews, A/B testings, working out the personas of your customers – this is only a small part of the tools available to the modern UX designer. The main focus of the UX methodology is aimed at defining the target audience and working with it. The correct and timely use of UX tools allows the designer to create a structural understanding of the target audience and identify its needs as precisely as possible. In practice, the Client’s perception of of his target audience needs is often fundamentally different from its real needs. It is the timely use of UX methodology tools that makes it possible to identify the true needs of the target audience, which often fundamentally changes the vector of the website development and eliminates the costs of developing any unnecessary functionality. The process of correct target audience defining plays a decisive role in website structure creation. Understanding the ‘true’ needs of your website visitors allows you to create the most intuitive navigation system by using which the user can obtain the necessary information with ease.
You can get more information about the UX Research in our ‘Planning the website development’ article.
Modern market dictates the rules of correct website structure formation for every Internet business. Therefore, there is always a need for the future search engine optimization. Competitor and target audience analysis is only a part of the preparatory work. The next step is the development of a semantic core and its clustering. The semantic core is a set of search queries based on key phrases that users use on the Internet when searching for a product or service similar to yours. The semantic cluster is a multi-level structure consisting of a group of search queries combined within a meaning. For example, let us consider the content of this particular article in the format of a semantic cluster. In this case, the semantic cluster of the first order will be ‘How to plan a website structure’. Inside the cluster of the first order there are clusters of the second order: ‘What is a website structure?’ and so on. There are also clusters of the third order, but in most cases it is sufficient to single out only the business-specific clusters of the second order. For example, the cluster of the second order for an ‘iPhone’ query will be a transactional (low-frequency) query of ‘Buy iPhone XS Max’. After working out the semantic core and its clusters, you will be able to process and structure the requests of your target audience in order to develop a content plan and refine the structure of your site.
What are the goals of the website? Who are our users? What information do they need? What does our analysis tell us?
If you follow the recommendations described above, then you will probably get answers to most of these questions. The knowledge that you will receive through the competitor and target audience analysis should be used at one of the most important stages of website development, that is the ‘content development’. Unfortunately, content development is often postponed for later, giving priority to other ‘more important’ matters, such as ‘Design’ or ‘Writing code’. In fact, saving time and money on content development is a strategic mistake. When creating a new website, it is important to remember that the content is of the crucial role to the user. There is absolutely no need for a good design if your site has nothing to offer to your target audience. If the site is useless to the customer, the code optimization and quick loading time will make no difference. When designing the website structure, the content that will be posted on it should be taken into account. Ultimately, you design the navigation in order to provide the user with the most convenient way to display the information necessary for him.
If you do not want to create a beautiful but useless resource, start developing the content as early as possible. Create a content plan based on the content matrix. To create a simple matrix, you need to build a table with intersections of customer types and their points of interest at different stages of product use. Use the clusters that you have discovered during the analysis of the semantic core for this purpose. Personalize user requests to identify their attitude towards the products. Determine the path that the user would walk from a ‘random visitor’ to a ‘regular customer’. Find out the user’s attitude to the work of your competitors at different stages of interaction with the brand. The received information will allow you to develop the most efficient content plan for each target group.
Designing User Flows is one of the tasks that needs to be taken care of in advance. Nowadays it is difficult to imagine that the main page is the only entry point of your website. The User Flow design tool allows you to consider different website entry points, highlighting the obvious shortcomings that the user may encounter. It is important to implement a User Flow Diagram to evaluate the interaction experience. You should use the obtained data when optimizing the structure of your site. It is also important to make the equally convenient navigation for users that are visiting your site from different entry points. Based on the User Flow Diagram analysis, the content should be optimized and changes should be made to the site structure accordingly.
In order to learn more about the purpose and experience of using User Flow Diagrams, read the article in our blog.
Once you have completed all the preparatory work, you can finally begin to build the structure of your website. The most popular form is the creation of a ‘Visual Sitemap’. A Visual Sitemap helps to define the hierarchy of the web pages clearly and accurately. Based on the data obtained, you can begin to develop a ‘Visual Sitemap’ diagram. As a rule, the hierarchy of a ‘Visual Sitemap’ is as follows: links from all pages of the site lead to the “Main Page”, links of ‘Subsections’ lead to ‘Sections’, and links of the website pages lead to ‘Subsections’. When forming the website structure, it is important to keep in mind that the page hierarchy is determined by the ‘weight’ (or ‘importance’) of the links. Statistically, link weights are a key parameter determining the site priority on the global Internet. The more there are links to a particular website, the more popular it is. The same principle works within a specific site. The more links leading to a particular page within the website, the more important it is compared to other pages. You should control the weight of links on your website, thereby determining their priority. Let us review the example of managing the weight of links. The website dedicated to the sale of smartphones can have a huge amount of information about the new iPhone XS Max, but with proper distribution of link weights, the page where this iPhone can be bought will have a priority in search results. If the links weight is distributed incorrectly, the user’s query ‘Buy iPhone XS Max’ will not lead to the page where the smartphone can be bought. Another rule to consider when planning your website structure is to control the ‘depth of viewing’. Design your structure so that the depth of your site does not exceed three or four clicks. This ensures easy user navigation, providing a clear and understandable navigation from any entry point without problems. The relevant structure of the site collects traffic and provides visibility for the search engine.
Development of the website structure is a serious work. In this article, we reviewed basic UX designing tools and touched upon the principles of SEO optimization. When starting to develop the site structure, It is important to keep in mind that right now there is an opportunity to work out most of the scenarios of how users interact with your website. You should consider the interface errors, and save yourself from spending money on reworking your website. Learn more about the integration of UX methodology in product development and maintenance, and you will have the opportunity to control and monitor the success of your project at different stages of product development.Read more
We have reviewed the specifics of the structure of the three most popular Visual Sitemap types. You can use the templates that were discussed in our article to design your own unique site structure right now.
In this article, we will research an averaged structure of a Sitemap. Before proceeding with the Sitemap analysis, it should be recalled that the relevant website structure implies a consolidation of the amount of information obtained as a result of conducting and processing the UX research and the semantic core clustering. Any proper Sitemap begins with a clear understanding of the website’s target audience.
You can read more about the website structure methodology in the following article:
How to Plan a Website Structure
However, some common features may be present in different Sitemaps and provide familiar patterns of user interaction.
Online stores have a complex, branched structure. The actual place of an online store in the market and its volume of sales will actually depend on good, thoroughly-developed navigation system.
Typical elements of an online store:
An example of a hierarchical Sitemap of an online store can be found here:
Home (main) Page consists of the key information about the online store. Online store Sitemap should start from this page. The customer should receive general information about the specialization of an online store and intuitively comprehend how to navigate through it.
Product catalog is the implementation of a thoughtful cataloging of the online store, that provides intuitive user navigation. Sophisticated cataloging implies a detailed understanding of the target audience needs.
Product card is required to provide the most detailed information about the product. This page should include product photos, basic characteristics, the comparison module and the “Add to cart” button.
Shopping cart is the page which consists of products that the user has selected for purchase. There, the user should see a list of goods that he chose to buy and pricing.
Order processing The user enters this page after confirming the purchase on the **Shopping cart** page. Here, the user needs to fill in personal data, select a delivery method and complete the purchase.
Text Page is a kind of a ‘Product Blog’ in an online store. This page displays the current information about the product that is selected by the user.
Account is the page on which the users can enter their personal information and set a preferable payment method. Entering this information will speed up the order processing.
Contacts page raises the level of user confidence. Contact information provides an opportunity for the user to get advice or clarify some details that were not described on the Product card.
Considering the most obvious elements of the news portal structure, a number of specific features can be highlighted. One of these features is a huge array of information that comes through the news website every day.
Typical elements of a news portal Sitemap:
Home Page implies the display of the most relevant news for the user. Being on this page, the user should easily find the news on the topic that interests him.
News catalog A large news portal is updated with a huge amount of information every day. Given the huge number of topics, you must create a dictionary of tags, and catalog the topics in accordance with it. Thus, journalists will have the opportunity to organize news on specific topics, providing convenient navigation through the website. When forming a dictionary of tags for a news portal, you need to rely on the research of the target audience. Make sure that it is fresh and up to date.
News Pages exist for convenient reading of news. You may also want to display the links to similar news articles here.
Corporate website is often used for presentation purposes. The main objective of this site is to introduce the user to the company and its products.
See an example of a corporate website Sitemap by clicking the following link:
Typical elements of a corporate website Sitemap:
Product/Service page shows all the information regarding the product or services offered by the company. The detailed information on such pages allows the user to get acquainted with the company and make a decision whether to interact with it or not.
Company’s news demonstrates the latest company news that may be of interest to both employees and customers of the company.
This page contains the history of the company, and there may be some photos of employees. it raises the level of user confidence and allows users to trust the company.
Corporate websites usually do not have extensive Sitemaps. As a rule, these sites are not meant to attract a lot of traffic. Corporate websites are needed for a convenient presentation of detailed information regarding a product or a service provided. The target audience of such sites, as a rule, are people already familiar with the company’s products or services, but they want to get more detailed information.
Different sites are made for different purposes and, as a result, have different structure. If you want to design a convenient website structure, you must first put yourself in user’s shoes.
This information allows you to design an intuitive interface that will certainly affect the User Experience in a good way, and as a result, the overall success of your project. To ensure clear navigation, you should also follow the basic rule of Sitemap developing – the ‘viewing depth’ should not exceed three or four clicks, depending on the amount of website content. In this article, we have provided examples of three popular types of Sitemaps. Naturally, these examples are not the only true ones, and may not be appropriate in your particular situation. However, you should accept niche-specific user interaction patterns when planning a Sitemap.Read more
Regardless of the complexity or purpose of your website, chances are that a sitemap isn’t the first topic on your agenda. Site admins and content creators often rely on practical, user-centric web and content development, without paying a lot of attention to the back-end side of things.
However, disregarding the importance of sitemaps is risky because they can help to accomplish a critical goal of making it easier for search engines to find your website’s pages. In other words, they’re a great part of your SEO, so not having one could be a disadvantage.
But how exactly sitemaps improve SEO? They let search engines know the literal mapping of your website’s structure, starting from the top (landing page/navigation bar) to the bottom level (articles, products, etc.). This makes indexing, therefore, choosing your website for search results, much easier.
Since sitemaps are so important, let’s explore them a little bit more by taking a look at how to create a good one and the ways in which they benefit your website.
To maximize the benefits of a sitemap for your website, you have to create one from scratch As you develop your website and expand it with different categories of content, it will become harder and harder to manage, so a dedicated sitemap can help to develop a more structured, organized website from the get-go. Things like server file management, remote collaboration and page structure modification become a bit easier as a result later on.
A well-established sitemap allows to improve the experience of your visitors and customers by mapping of their journey through the website and giving ideas on optimizing it. For example, you might want to help your visitors find product pages as quickly as possible from the home page or a landing page. With a sitemap under your belt, you can create a flow which redirects them to that very section of your site.
Creating a visual sitemap requires input from a web developer and manager because the latter can define business-related knowledge while the former converts it into a good sitemap.
Before starting designing a sitemap you should define:
Answering these questions will help you to create a sitemap that will meet all the requirements of your future users, increasing sales, and improving the overall experience of website’s users, and therefore, achieve long-term goals.
You should always start creating a sitemap from the Home Page — this way, you can create a clear hierarchy. For example, the Home Page can be the only first level page, and the second level pages – products, blog, contacts us etc. – should reflect the basic navigation.
The second level of the sitemap comprises a number of important site sections with a common theme such as categories of products. When designing, it’s important to look at it from the user perspective to make them easy to navigate, and providing the user with the ability to spend less time finding their way around.
Second-level pages should contain links to content inside so-called “child pages,” providing easy navigation to them. It is important that the navigation usually includes less than 10 pages of the second level.
Child or third-level pages are pages that contain the specific content focused on one idea. For example, if a second level page “Sports Nutrition” leads to a number of third-level pages such as “sports bars,” “amino acids,” and “protein”.
For most websites, 3 levels of page hierarchy are enough to include all content, but there are also sites where 4 or even 5 levels may be required. These are complex sites with a large range of products.
Once you have created your sitemap, the best solution is to create a duplicate to be able to test the performance of different options. This can help to create an intuitive and easy-to-use sitemap. At the testing stage, you can also experiment with different structures of the map and other ideas to find the best option to meet the needs of the visitors.
Once you have finished working on the structure of your website, you have to make it more detailed to make sure that you didn’t miss anything. For example, you can add descriptions to pages so you know what subsections will be added. By doing so, you’ll never lose the focus on the main goals and consolidate up-to-date information at all stages of development.
Elisa Abbott is a freelancer whose passion lies in creative writing. She completed a degree in Computer Science and writes about ways to apply machine learning to deal with complex issues. Insights on education, helpful tools and valuable university experiences – she has got you covered 😉 When she’s not engaged in assessing translation services for PickWriters you’ll usually find her sipping cappuccino with a book.Read more
Visual sitemap is a skeleton of a future website with precisely structured information about the website. Usually, it contains information about the structure of pages, tasks for developers as well as the project’s content.Read more