Category: Product guides

Related tags

Are you the author who passionately writes about UX-design and project management?

Contact us if you want your articles to be posted on our blog.

SiteMaps: What Is It and How to Do It

 
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.

Benefits of SiteMaps

Easier Website Management

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.

Customer’s Journey

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.

How to create a Visual SiteMap

1. Preparatory phase

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:

  • The current goal of your business
  • The main areas of your business
  • Expansion goals that the business will pursue in the future.
Sitemaps: Preparatory phase

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.

Sitemaps: Create a Basic Structure

2. Create a Basic Structure

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.

3. The Second Level Design

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.

Sitemaps: The Second Level Design
Sitemaps: Child Pages

4. “Child” Pages

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.

5. Testing

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.

Sitemaps: Testing
Sitemaps: Page Content

6. Page Content

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.

Author Bio

Elisa Abbott

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 tools comparison

FlowMapp vs Omnigraffle vs SlickPlan

In this article, we will compare between three tools that will help you create a visual Sitemap.
A Sitemap displays the site’s structure graphically. It simplifies the process of forming a technical task and lets the team integrate into the project quicker. The three tools that will be compared in this article are FlowMapp, OmniGraffle and SlickPlan. Each tool has its own advantages and will surely find its users among our readers.

Let us start with our own project, the FlowMapp tool:

FlowMapp is a powerful tool that allows to create a visual Sitemap, to project a flowchart, to form a project documentation and acts as a cloud storage for project files. As developers of this tool we believe that FlowMapp is a ‘must’ for UX specialists and managers. FlowMapp is designed to meet the requirements of a large amount of users, UX strategists, UI and product designers. Natural and easy-to-use interface and demonstrative project overview allows you to easily coordinate the Sitemap with any Client, and a convenient project file storage will make you forget about using Dropbox and Google Drive.

Omnigraffle

Omnigraffle is a multi-purpose tool for creating different layouts, including the Sitemap creation. Omnigraffle’s versatility is both its positive and a negative side. After running Omnigraffle, you basically get a graphics editor that lets you create layouts by using templates. Another downside is a complex interface that cannot be mastered quickly, and you will have to spend your time in order to learn it. Therefore, it is questionable whether or not to use it when it comes down to a Sitemap creation. You also can’t share the files and work as a team using this program.


SlickPlan lets you create the Sitemap and also makes the teamwork possible. A remarkable feature of SlickPlan is its ability to customize each graphic file, giving the opportunity to brand the sitemap.
Dynomapper

DYNO Mapper is a sitemap development tool. It features a comment system, opening up an opportunity to work as a team. There is also a Drag-and-drop function and three different customization styles for your website, allowing you to add the logo and change the sitemap color scheme.


WriteMaps has an intuitive interface and allows to create up to three sitemaps for free. Like other tools mentioned earlier, WriteMaps also supports the sitemap color scheme customization. There is also a features to archive your old projects and export it as PDF or XML.

Gloomaps is one of the most simple tools of sitemap creation. Although its functionality is not very advanced, it may satisfy the designer’s needs when dealing with some small projects. The interface strongly resembles a particular lo-fi prototype design tool – wireframe.cc.

For a more detailed tool overview we have prepared a convenient spreadsheet where the tools’ functions and cost are compared.

FlowMapp Slickplan Omnigraffle DYNO Mapper WriteMaps Gloomaps
FlowMapp Slickplan Omnigraffle DYNO Mapper WriteMaps Gloomaps
Export (Pdf, Doc, PNG)
Content Planning
Sitemap Tool
Share Projects
Managing Files at Projects
Teams
Cloud Storage
Comments
Drag & Drop Pages
Archive Projects
Free Plan
Page Labels
Diagrams (User Flow Tool)
Unlimited Collaborators at Any Plan
Notifications
Projects Activity
Visual Page Covers
Various Sitemap View
Page Structure
User Mention
Free Trial 14 days 14 days No 14 days 14 days 14 days

In conclusion

In order to save yourself from unnecessary costs when making a decision to start using a new service, it is important to clearly understand why you need it. This kind of approach will help to save your time and money. If you want a powerful tool that allows a team-work environment, allows you to build the Sitemap and flowchart, communicate with the Client and store the source code – you should go with the FlowMapp. However, if your need for a Sitemap is situational, does not imply teamwork, and if the layouts you work with are much more complicated than just the Sitemap and flowchart, then Omnigriffle will suit you better.

We always welcome every user’s feedback that helps us develop the best tool in the field of creating visual Sitemaps. Always waiting for your comments on info@flowmapp.com.

Read more

Top Prototyping Tools to help You In 2019

Best prototyping tools

What is a prototype?

A prototype is a page layout that partially or fully imitates the functioning of a website interactive elements. Prototype development is an important part of website creation. Different levels of prototype detailization is required at different levels of product development. Nevertheless, the creation of a lo-fi prototype is one of the most important first steps that you have to take when starting a website development. In a broad sense, a lo-fi prototype is a visualization of statement of work, it acts like an illustration and makes complicated things simple.

Website development is a complex multi-level process, in which a statement of work is its logical definition. Statements of work that are presented in a text form are often difficult to understand. Because of this, each participant of website development has to spend a large amount of time to read and understand the statements. The second drawback of textual statement of work is due to the fact that the statement is often overloaded with information, and its presentation is far from ideal. This causes misunderstandings and increases amount of errors in the project’s course, increasing the development time and cost. In order to avoid unnecessary difficulties, we advise to use prototypes when forming the statement of work. Because of the prototype, your project will quickly acquire a visible shape, and you will be able to detect obvious flaws that were hidden behind the standard statement’s complex wall of text. The opportunity to look at the project from above and the speed at which the changes are implemented make lo-fi prototypes an indispensable tool for any designer. Lo-fi prototypes allow to quickly try on a particular pattern of user interaction by using the interface. This is very helpful in case if your Client does not have the exact understanding of how the final version of the product should look like, but there is a large number of suggestions and variants to try. Prototype will help you to decide on further implementation of a particular feature.

At the moment it is impossible to develop a good product if you skip the prototyping stage. It is important to convey this idea to the Client when justifying the development budget. The absence of ‘prototyping’ line in budgeting means that the designer has to make a prototype using a graphic editor, working on a real layout. This will significantly increase the prototype construction time and the total cost of product development. Making changes to a lo-fi prototype takes a few hours, making changes to the design layout may take several days, and making changes to the layout itself with HTML and CSS may take a week. A proper transition of this difference into real money will clearly determine the prototyping value.

Lo-fi prototype does not remove the need for a statement of work. Of course, the statement is the basis on which the entire project is built, and it makes the development of necessary limitations possible, thereby simplifying creative work. The statement of work is also an evaluation criterion. The prototype helps to form requirements in order to create a detailed and understandable task.

The project may also need a hi-fi prototype. Such prototypes are usually needed to start product testing as early as possible. Hi-fi prototypes can be immediately and independently transferred to a focus group or used in other UX Research tools without the finished version of your main product.

In this article, we will tackle the prototyping. Once you have elaborated User Flow diagrams and set up your Sitemap at the “Ideate” stage, there is a necessity to create a prototype. The prototyping is one of UX Research steps, where the designer can test the functionality of the solutions elaborated and selected on the previous phases. Depending on the budget and the time spent by the team on the project, a different level of specification of the prototype can be required. In this article, we will try to sort out services that can help you create both quick lo-fi prototypes and multi-level highly detailed hi-fi prototypes with micro-interactions in the animated interface.

Wireframe.cc

Wireframe.cc – it’s a minimalistic web application enabling the creation of low-level prototypes for the quick visualization of your idea. The usability is the main functional feature of wireframe.cс. Drag-to-draw jointly with the following pick of elements is a very convenient way to create new objects in the form of the similar lo-fi prototypes. Moreover, wireframe.cc supports the teamwork, commenting on the prototypes, hotkeys, and sharing.

Pidoco

Pidoco app

Pidoco – the tool was elaborated specifically for the convenient collaboration of the team at the prototype developing stage. The easy and convenient teamwork and customization of templates allow creating of highly detailed interactive prototypes for less time. Thanks to its usability Pidoco allows you to shorten the design and development phase and spare the team extra costs.

Mockplus

Mockplus app

Mockplus – it’s a tool that can create and analyze the work of a lo-fi prototype. The Mockplus functionality is minimalistic, however, you can easily create interactive prototypes of any difficulty with the vast library of UI components. Just like Pidoco, Mockplus allows you to test your idea at the first stages of UX Research, sparing you extra costs in the future.

JustInMind

Justinmind app

Justinmind – the service enables the creation of highly detailed hi-fi prototypes of multifunctional mobile apps for iOS and Android. You can browse the prototype on your mobile device. Justinmind also allows exporting a full-featured wireframe prototype in HTML, providing a convenient browsing in any browser. The service grants access to a vast library of UI-kits, that you can use to create your own prototypes.

Proto.io

Poto.io app

Proto.io – this functional service allows you to create a highly detailed prototype, granting you the possibility to work on micro-interactions with the user, using the interface animation and to test the developed prototype using the convenient system for sharing and teamwork, with the feature of commenting your projects.

Flinto

Flinto app

Flinto – this is a web service and a fully-functional app for Mac, which enables creating of hi-fi prototypes. This design app can be integrated into Sketch through a plugin – this will grant you a quick and convenient way to create an animated prototype. With Flinto you can create a high-level prototype and share it with your team or the client to get the needed feedback quickly.

UXPin

UXPin tool

UXPin – it’s a multi-functional web service, which allows you to create both lo-fi and hi-fi prototypes. The convenient commenting system provides an easy collaboration within the team. The possibility to open projects from Sketch as well as the library with dozens of UI kits (Bootstrap, Foundation, Android, iOS, etc.) allows the team to develop and test the prototypes easily.

InVision Studio

Invision Studio App

InVision Studio – the advantage of InVision Studio is that the tool covers all stages of the prototype development. With InVision Studio you can create an interactive prototype with an animated interface. It’s important to notice, that the animation is not a separate process. You can animate your prototype in InVision Studio.

Framer X

Framer X

Framer X – this prototyping tool fundamentally differs from the alternatives. The prototype developing process in Framer X is mostly the work with the code. In its first iterations, Framer is a graphic shell for Framer.js, where you can not only write code, but also design.
Framer X – is also a prototyping tool, which supports React and allows to create a design system.

In order to develop a functional prototype that grants the possibility to test some interface solutions, you need to specify your ideas, The base for your future prototype is laid at this stage. User Flow and Sitemap allow you to exclude the majority of UX mistakes and elaborate your idea prior to the prototype development. You can find more about User Flow in UX Research in this article. To alleviate the communication mod within the team you can bind your prototypes with Sitemap, so your team will have an opportunity to get all the topical information in one place, which can spare you time and miscommunication problems in the team.

Learn more about the Sitemap and User Flow tools that will help you improve UX of your amazing Product.

Read more