Web Foundations

1. Web Foundations Monday, October 14, 2013 LECTURE 12: Site Map, Information architecture, mind mapping

2. General Site Map A general site map can be an appropriate starting point for designing a web site. Such a document outlines each page or section of the site, as well as basic relationship between them. This is likely your first step in a very important web development process, often referred to as the information architecture (IA). As I said, this will be a general site map to get a "feel" for the site, and from there we can proceed into branchingor "mind mapping."

3. Information Architecture • First I need to say there is no perfect way of organizing content, at least not one that works for everyone. Tons of different options are available, and your task is to select the one that works the best for your particular project needs. • So how do you get started? Most people begin by arranging according to one of two thoughts: • How other similar sites arrange content • How the content is arranged in "real life" (in other words, a business might set up its online store using the layout of the physical store, with the products organized by "aisles") • Unfortunately, these aren't always the best ways to start organizing content. A better way is to let the users' needs drive the organization and flow of the content.

4. Information Architecture An example of using users' needs drive the organization of a site might be a college web site built around different audiences: students, faculty, parents, alumni, and so on. All content would then be placed according to who needs to access it, and prioritized around the site goals. Multitudes of organizational models are available to help you in the process. Let's look at a few of the most common.

5. IA Model: All-In-One The most basic model for organizing content is to include everything right on the home page. Obviously, this doesn’t work for large or complex sites, but it can be surprisingly successful for smaller sites.

6. IA Model: Flat With a flat information architecture, all pages on the site are at the same level in the structure. This means every page is accessible from every other one. Basic small business web sites are frequently built this way, with pages titled “About Us,” “Contact Us,” “Our Services,” and “Home.”

7. IA Model: Index Similar to a flat model, an index model has one additional feature: a table of contents. On some web sites, this page is actually called “Site Map.” In other cases, a list of content areas is included on another page as a resource for quick linking.

8. IA Model: Hub-and-Spoke A hub-and-spoke pattern (sometimes referred to as a “daisy” pattern because the content areas look like petals on a flower) works well for sites with distinct user groups or particularly linear workflows. One example might be an online training site, where you return to your “desk” after watching a class lecture or taking a test.

9. IA Model: Strict Hierarchy Have you ever visited a site with distinct sections, in which you couldn’t access a different section without first going back to the home page? This type of model might be considered a strict hierarchy. A good example of this type of structure is a web site for a global business, where you must select your country before accessing the site content. Users who select Mexico, for example, will not be able to access Canadian content without first switching to the Canadian section of the site.

10. IA Model: Multidimensional Hierarchy A multidimensional hierarchy is similar to a strict hierarchy, with one key difference: In this case, it is possible to access content from a different section without first returning to the home or gateway page. A great example of this type of structure might be a large online bookstore that lets you view books by title, author, subject, or even keyword. The content can be reached by any of these methods.

11. IA Model: Search While a lot of web sites have search features, some rely on their search features to get users to the content they want as fast as possible. For example, the best way to get around a large auction site like eBay is to search. While the site does have a hierarchical structure as well, the search tool acts like an elevator to get users quickly to the content they want. http://www.webdesignfromscratch.com/

12. Content Organization Now that you have a few ideas about how information might be structured, your next step is to gather all the types of content for the site. This can be a simple handwritten list or a detailed spreadsheet. Ultimately, all the content for the site should then fit under each of the topic areas in the site structure. You might include several subcategories in each topic area. In addition, always consider the user in this process. To reiterate, the recommended site content isn’t necessarily what the client already has (or thinks she should have) but instead what the user expects to find or needs to find for a successful experience.

13. Content Organization home Sometimes it helps to look at an example. Consider a store that sells office supplies, whose two main site goals are to sell products and to retain employees. A very rudimentary site map, following the strict hierarchy model, might start off with a structure like this. shop jobs

14. Content Organization Drilling down even further in the structure, the “shop for office supplies” section from might be broken down into several subcategories, according to the different types of products available NOTE: For the beginning stages of this exercise, the list of content needn’t refer to actual web pages but, instead, to the type of content you expect to place within those sections. After you finish organizing the content, you can finalize each section by deciding how much content can reasonably be placed on a single page

15. Content Organization While documenting the relationships between each page of the site, be sure to consider how a user might navigate between them. You can use a variety of brainstorming and documentation techniques to accomplish this task. For example, you might start with simple hand drawings, or you could work with a team of people to organize sticky-notes on a white board or index cards on a table top. Still others create technical drawingsusing programs such as Microsoft Visio or even Adobe Illustrator or Microsoft PowerPoint. Others still might use branchingtechniques or "mind mapping" to tease out the initial organization of the site.

16. Mind Mapping The idea behind mind maps is that you start with a central concept, write it down in the middle of a page, then add nodes as you think of different ideas around that concept. You can further develop any of the ideas by branching out more nodes from these ideas and so on. On paper it might look something like this:

17. Mind Mapping This approach can be used for planning a website – structure, functionality, features, content, business model and what ever else you can think of. While it can be done with pen and paper, a good software tool offers much more flexibility as you can easily move things around, change them and you never run out of paper. I’ve been using a freely available tool called FreeMind for website planning and I find it to be ideally suited for the job. It’s a great way to start putting structure on your ideas and – you can keep adding ideas as you think of them, go back and reorganize and fine-tune them.

18. Mind Mapping • Mind Mapping Sites/Software • FreeMind • Coggle • EdrawMindmap • XMind • Bubbl.us • Wise Mapping • StormBoard • Wridea