Introduction to Website Architecture Tools
A website’s information architecture has two major components: the definition and identification of site content and functionality, and the underlying structure, nomenclature and organization that defines the relationships between content and functionality.
Website architecture is not part of the user interface on-screen, but it does inform UI. It is documented in diagrams and spreadsheets rather than wireframes, prototypes and comprehensive layouts. For websites, information architecture is the way that content is categorized and organized on the website. It forms the basis for navigation, user experience and nomenclature.
In a way, you could look at information architecture as the bundles of information making up the sections of the website. Concepts grouped together go into the same bundle.
But why is website architecture so important? Well, it is because holes in information architecture is one of the most common problems seen in websites. Unsound or poor website architecture can make it difficult for visitors to navigate the website and find what they are looking for.
Just think about website architecture and usability related to an ecommerce website. If your website architecture is sound but usability or taskflow is bad, visitors will be able to find what they want but will find it difficult to actually close the purchase because the buy-flow task will be difficult to go through. That would result in poor conversion.
On the other hand, if your website has poor architecture but good usability, your visitors will not even be able to find the products that they want. As such, usability would cease to matter because visitors would leave without even entering the purchase flow.
In order to improve your website or build a good one, it is important to build website architecture without holes or related problems. Doing so ensures that the maximum number of visitors find what they want, improving conversion and return on investment.
Now that you know how important website architecture is, here are some tools that you can use specifically for site mapping and diagramming tools to use during the planning stages of website development and for improving existing sites.
1. Microsoft Visio
Microsoft Visio is one of the top diagramming tools right now, suitable for everything from flow charts to floor plans. It can be used for creating diagrams both simple and complex. It has a wide range of inbuilt shapes, stencils and objects. You can make your own shapes as well and import them.
Visio can be used for creating 3D map diagrams via inbuilt tools, though this particular feature is limited. It works well for simple maps. The tool can also pull live information from external sources like a Microsoft Access database or Excel sheet. It comes packed with a lot of inbuilt shapes that can be added to your diagram.
The software has drawing tools for accommodating special requirements, and you can quickly start work with the standard templates available right off the bat. The generalized drawing tools customize the diagrams for your own requirements. Visio has an intuitive interface that can be picked up even by novices.
Visio is used by a lot of designers and developers to map and diagram their websites during the planning stage.
Omnigraffle is a tool that you can use for a number of purposes, particularly wireframing and diagramming. When compared to wireframing applications, Omnigraffle is far from perfect but it does come with a good combination of capabilities and efficiency. It lacks good interactivity for prototyping, however, and it is only available for Mac computers. You can create clickable prototypes, but the functionality is limited to that much. You can also show or hide layers and do other such things, but these functions only work while within Omnigraffle.
Despite the shortcomings, Omnigraffle is a proven wireframing tool and a worthy choice for planning your website architecture. At its heart, Omnigraffle is all about creating diagrams, from software wireframes to organization charts, and from space planning and entity relationship diagrams to flowcharts.
The software’s new Resource Browser offers a number of templates and shape collections to create these documents. You can opt for this tool to create flow charts, network diagrams, project processes and much more. Most important, you can use this to map out your website architecture.
Omnigroup’s wireframing and diagramming suite is particularly valuable in that wireframes can be developed with a hierarchy so that users can click to go from one screen to another and also view a sidebar to view the relationship between pages. The tool can be used to develop diagrams, page layouts, process charts, website mockups and more. Although there is a learning curve involved, you can find a lot of value in Omnigraffle
Used in over 50 countries and around a third of Fortune 100 companies, PowerMapper is a very popular site mapping tool. MIT, NASA and several other major organizations use this tool, which should tell you all you need to know about it.
The tool enables you to make a site map with ease. What usually takes days of effort is done within a few clicks. For instance, while it may take around 50 hours to develop a site map of a 1,000 page website manually, with three minutes per page for creating a laying out a box for each page, PowerMapper builds a better site map for a fraction of the time and cost.
Developed by Electrum Software, PowerMapper also enables map sharing with others. You can share site maps with clients and colleague when auditing or redesigning a website. You can also export maps using HTML, XML, CSV, PNG and other standard formats. Maps can be exported in the Google XML sitemap format to improve visibility on search engine page results.
In addition, you can copy and paste maps into other applications such Microsoft PowerPoint and Word for other purposes, or to Excel as well. It is easy to use and a great site mapping tool for mapping skeleton sites or current websites, offline and online. A variety of mapping styles are available, including professional and standard versions.
SmartDraw is a popular flowchart creation software program with intuitive design and great ease of use, making it a good choice for novices. Apart from its slight learning curve, this tool also offer strong diagramming and organizational features, along with great graphic features and decent text options. Despite this, there are some drawbacks in the support options and there are some key diagram features that are missing.
The software does lack some key connection point options, like the ability to add connection points and the non-availability of junction jobs. Nevertheless, it is a good product for those familiar with flowchart design and people new to creating flowcharts.
SmartDraw lacks just a few diagramming tools, notable of which was the inability to add connection points. This can be a major drawback to creating custom or complex flowcharts, but should not be much of a problem for more basic designs, since multiple connection points are already available.
The lack of junction jogs can also be problem, but once again it should not be that much of an issue if you create simple diagrams. However, it can make multi-step workflow diagrams a little more complicated to create.
In other areas, SmartDraw is quite a powerful website architecture tool. You can use a variety of templates or create your own.
5. Xtreeme SiteXpert
With Xtreeme SiteXpert, you can create Java-based maps and DHTML menus for your website. The standard edition launches with a dialogue box guiding your through the complete process. The layout wizard can be used to scan your website and assemble the links. It also lets you map the complete site structure, customize the code and creation navigation.
You can also find a basic tutorial that explains how the tool works. Moreover, you can update and insert the menus for your website with the tool. The application supports NetObjects, FrontPage and DreamWeaver plugins.
The standard edition is different from the professional edition, which comes with a search engine, automated site updating, XML features, and hierarchal diagramming. Nevertheless, its cross-border compatibility output is still valuable and it still enables new webmasters to create great dynamic menus.
SiteXpert can be used to create various site map designs for your website under its features, including cross-platform, cross-browser and site search compatible website navigation schemes.
Dynomapper is a good choice of a visual site mapping tool to develop interactive site maps that display more than just URLs. It can be used by users to collaborate and include comments, categories, analytics data and more. You can choose between thee site map styles- tree, circle and default- and you can customize them with color schemes and logos.
The tool also comes with analytics integration, advanced crawler options and drag-and-drop functionalities, making it one of the best visual site map tools. You can opt for a 14-day free trial or explore other pricing plans based on keyword tracking, crawl limits and users.
StickySorter is a great tool for categorizing and arranging virtual sticky notes for diagramming sessions and for other information sorting tasks. It also allows you to use different stickies related to each other into a single group. The stickies can have different colors for differentiation, and can be arranged in a pile, stack or tile. They can be zoomed in or out, and the field editor can create new fields or edit or delete existing ones.
Created by Microsoft Office Labs, this is a great free tool to sort lists of content into groups and explore new versions of website architecture. Unlike some of the other online tools mentioned before, you need to download this tool, and it requires Windows Vista or XP.
There are lot of prototyping tools available, but only a few of them have advanced features and Axure is one of them. It is a great user experience tool and enables website designers to create highly advanced interactive prototypes quickly, even if they are not very knowledgeable with front-end coding.
It is a wireframing and diagramming tool similar to Omnigraffle, which is useful for information architects, particularly interaction designers. With Axure RP Prol, you can create pages with drag-zoom, parallax scrolling, docked headers, incremental search, moving dynamic panels and more.
MindManager by MindJet is unlike conventional mind-mapping software. This tool embeds project management into mind mapping, making it more of a comprehensive information manager than a simple mind mapper.
Although it is far from cheap, MindManager is definitely worth the cost. It is a visual framework meant to promote idea organization and freefork thinking. With its easy drag-and-drop functionality, it can be used by information architects to easily and quickly create and put down ideas, and organize these ideas in a site map for illustration it allows the exporting of site maps as JPG, PNG, PDF or Word documents.
XMind is another mapping program with powerful diagramming capabilities, but it does have some interface issues. Once you get used to its interface, however, you can get a lot from this tool. It comes with a number of templates that feature different diagram types. Its interface is detailed and can be overwhelming for those not familiar with it. Revisions are handled very well, allowing you to roll back to earlier versions with ease.
This tool comes with the added benefit of enabling website architecture specialists to save maps to Evernote. It offers a complete library of maps for users to view others’ work and share their own work. A free version is available, along with the paid XMind Pro for Linux, Windows and Mac.
Treejack is ideal if you want to test a proposed website architecture’s information hierarchy. It is superior in ways to other evaluation techniques like reverse card sorting and closed card sorting, evaluating the complete depth of an information hierarchy.
For those of you who want to test their hierarchy and understand how it would work with users, Treejack can be a good tool. It allows architects to input a site hierarchy, recruit users and set up tasks. They can then see the results of the test, share or download them.
This has been a guide to Website Architecture Diagramming Tools. Here we have discussed some tools that you can use specifically for site mapping and diagramming tools to use during the planning stages of website development. You may also have a look at the following articles to learn more –