Sitemap/Wireframe

(aka Site Map, Site Hierarchy Map, Site Diagram, Blueprint, Web Map)

When setting out to analyze and document an existing Web site one of the first steps is to sketch out a rough site map. The sitemap will show the major sections of a Web site, but not necessarily every page. For large sites it’s not always necessary or feasible to include all pages in a site map.

Similarly for a new site, a sitemap is created to chunk and group content and functionality.

Web sitemaps and Wireframes

Combining a detailed site map and illustrative wireframes creates a valuable document that can guide programming and future requirements. In some cases such a document has become the default requirments document for systems my group is building.

How to Create Web Sitemaps

There is no standard best practice for creating sitemaps. Visio as an example, allows you to easily lay out page hierarchys and create connections between them. But wireframes could also be created in Word, Power Point, Excel, by hand, or any other method you find helpful.

Web Sitemap Examples

Site maps can be constructed in a wide variety of formats, but the general structure and principles remain relatively consistent.

  • Sample Web Sitemap (pdf)
    This site hierarchy map was used for a project in which we had to combine 6 separate Web sites into a single, cohesively – yet distinct, branded Web prescence. One of the first steps was to analyze the existing sites and document the main content sections using sitemaps. The sitemaps were used to identify duplicate content and functionality that was no longer relevant.
  • Web Sitemap Diagram 2 (pdf)
    This is a sitemap that was created for an update to a small marketing site. A key is used to distinguish revised and new content.
By max macapagal Posted in Posts

Web Wireframe Use

Web Site Wireframe

What are wireframes?(aka Wire Frame, Page Architecture, Low Fidelity Mock-Up, Page Schematic)

Web site wireframes are blue prints that define a Web page’s content and functionality. They do not convey design – e.g. colors, graphics, or fonts.

How are wireframes used ?

Wireframes – combined with Site Maps -are the bread and butter tools of information architects. Web site wireframes are useful for conveying the general page structure and content requirements for individual Web pages. Typically wireframes are developed by an information architect, requirements analyst, or designer. In many Web groups these are all the same person.

Using detailed wireframes will frequently flush out new requirements and questions that nobody has thought about yet. They also help to keep a paper trail of functional and design decisions that are made. I sometimes use wireframes to get people thinking and generate requirements. Getting signoff on a set of detailed wireframes can save a lot of time and money. Forcing managers and clients to actually think about the site’s functionality at a page level will avoid changes later on. Otherwise programmers can end up making endless changes and tweaks to their code.

Wireframes can end up evolving into the default requirements document for a system. I sometimes end up adding a sitemap to the beginning of the wireframe document. I then add notations and requirements on specific pages. Sample Wireframe 2 below is an example of this.

How are wireframes created?

Wireframes – like most information architecture diagrams – can be created using a variety of software programs. I generally use Visio because of its powerful stencil feature. Visio stencils allow you to save libraries of commonly used shapes and elements. I have custom stencils created that allow me to easily drag and drop wireframe elements onto the screen. This really speeds up the process of creating wireframes.

I have also seen wireframes created using Excel, Word, and Power Point. So the choice is yours.

Wireframes need to achieve a balance between being too detailed and too general. A wireframe that is too precise may leave little creative room for the designer. A wireframe that is too loosely defined can be misinterpreted by designers and developers. The wireframe format used should be dependent upon the audience.

HTML Wireframes

Information Architects and designers sometimes end up creating the initial HTML layouts that are then turned over to a developer for “real” programming. This often makes sense, because in some cases it’s the IA or designer with the best command of HTML layout and design. HTML may be used to create basic wireframe templates that can be used for usability testing or to get client feedback. In other cases the HTML is created in order to keep tight control on the design, rather than leaving it up to the programmer.

Wireframe Examples

Sample Wireframes (pdf)

Sample Wireframes 2 (pdf)

Sample Wireframes 3 (pdf)

+++from fatpurple.com

By max macapagal Posted in Posts

IA deliverables

What is Information Architecture?

Information architecture is the foundation which websites are built. You can think of it as the blue prints for a website. It defines a website’s structure, hierarchy, and navigation.

What are deliverables? What are the most effective deliverables? The answer depends on the situation, audience, budget, time constraints, skill set of your team, and various other factors. Learning how to create these deliverables is the easy part. Gaining an understanding of when to use them, and in what format, is the tricky part.

The following are the most widely used IA deliverables. However, there are additional deliverables which some consider to be the responsibility of the IA, while others would assign them to perhaps a PM or designer. The most widely used name for the deliverable is listed with additional synonyms also displayed. Some Web information architecture examples and samples are linked to.

Web Information Architecture Examples

1. Content Inventory (aka Content Survey, Audit)

A content inventory is intended to provide a consolidated snapshot of all the major sections, pages, and content on a Web site. This would include text, graphics, and multimedia. Some even go as far as to break content down into individual pieces or paragraphs of content. Sometimes a content inventory is performed on content that is not yet part of a Web site. This would be helpful for an organization that is collecting content to be placed on a new Web site. Card sorting would be helpful for organizing content in this situation.

Here a a couple examples of Web content invent roy variations.

  • Survey - A high level review of a site’s main sections and pages. It enables you to develop an understanding of the general site scope and major chunks of content.
  • Detailed Audit - this is a comprehensive inventory of every page on a site. This inventory will list every page’s filename, title, URL, and possibly its file type and a description. It’s also helpful to assign a unique page ID that will correspond to the pages location on the Site Map.
  • Content Map – This simply entails laying out the site content in a graphical format. I haven’t seen this used widely, and I’m not sure how much use it would serve. If you’re performing a content inventory on a current site, then an effective site map might nullify the need for a content map.

Sample content inventory (pdf)

Read more about content inventories for the Web

2. User Profile (aka Personas)

A user profile or persona is a realistic (but likely fictional) example of a target audience member. The profile commonly takes the form of a one page piece that lists the user’s name, occupation, education, demographic characteristics, computer/web experience, and site goals or likely tasks. A stock photography picture is usually used to give a face to the profile.

These profiles can be extremely useful in keeping the web team focused on the user’s needs. These may not be necessary for usability experts, designers, or information architects, all of whom should have a firm grasp of user-centric design. But they can be beneficial for project managers, programmers, and clients. When making decisions it’s helpful to be able to say “John B. really would have trouble with this,” or “Adding this link here would really make life easier for Sharon.” User profiles also help to reinforce the importance of an Information Architect. It is a deliverable that documents the establishment of target audiences, a process that might have taken a considerable amount of effort and research.

Read more about user profiles for the Web

3. Use Case (aka User Scenario, Task Analysis, User Flow)

Use cases are narratives that describe how a user might use a system or site. A use case illustrates a sequence of events that an actor (external agent) might go through in order to accomplish their goal. A use case is similar to a process flow.

  • Essential Use Case – Narratives that remain relatively independent of a specific technology or implementation.
  • Real Use Case – Narratives that incorporate the current technology and/or site design. This is basically the same thing as a Process Flow.

Sample use case (pdf)

Read more about use cases for the Web

4. Sitemap (aka Site Map, Site Hierarchy Map, Site Diagram, Blueprint, Web Map)

Site maps are one of the most critical and widely used web information architecture tools (along with wireframes). They show the overall structure and hierarchy of a Web site. They can be used as the first step in laying out the web information architecture of a site, and will provide the framework upon which to base site navigation. When I set out to understand the IA of a current site, or design an IA for a new site, I start by sketching out a ruff site map. Site maps can be constructed in a wide variety of formats, but the general structure and principles remain relatively consistent.

Sample Site Map (pdf)

Read more about Web sitemaps

6. Wireframes (aka Wire Frame, Page Architecture, Low Fidelity Mock-Up, Page Schematic)

Information Architecture Wireframes (combined with Site Maps) are the bread and butter tools of information architects. They are useful for conveying the general page structure and content requirements for individual pages.

Wireframes need to achieve a happy medium between being too precise and too loose. What I mean by this is that a wireframe that is too precise or detailed may leave little creative room for the designer. A wireframe that is too loosely defined can easily be misinterpreted by designers and developers. The format used should be dependent upon the audience.

Using detailed wireframes will frequently flush out new requirements and questions that nobody has thought about yet. They also help to keep a paper trail of functional and design decisions that are made. I sometimes use wireframes to get people thinking and generate requirements. Wireframes will sometimes end up evolving into the default requirements document for a Web site.

Sample Wireframes (pdf)
Sample Wireframes 2 (pdf)
Sample Wireframes 3 (pdf)

7. Paper Prototype (aka Low Fidelity Prototype)

Paper prototyping involves using screen shots and/or hand sketched page diagrams to quickly elicit user feedback and identify interface IA problems. Using a paper prototype involves conducting a usability test using a low fidelity prototype. These prototypes can be created electronically using programs such as MS Word, Excel, Visio, or various WYSIWYG editors. However, in many cases paper prototypes are nothing more than loosely hand-sketched designs. The quicker these paper prototypes can be created, the greater the benefit. Paper prototypes shouldn’t incorporate specific design elements such as color, style, fonts, detailed graphics, etc.

You may be hesitant to present something that might resemble a 6th graders art project to a client. However, with a bit of education the client will be appreciative of the time and money you are saving them.

8. Story Board (aka Storyboard)

It’s debatable whether a storyboards are anything different than a set of wireframes, but they can tend to illustrate more of a process than a wireframe does. However in many cases IAs add usage and process notes to wireframes. I have also see storyboards (or something resembling them) referred to as Blueprint, Schematic, Grey Model, Interaction, Interaction Wireframe, IA Requirements Document, Design Document

Story boards typically combine information from process flows, site maps, and other IA deliverables. They can be used to illustrate a single screen or a whole system or site. They usually offer screen shots or some type of graphical representation of the screens, combined with a narrative description. Storyboards help to document the functionality of the site and describe how users will potential use the interface. These deliverables can be used by programmers, project managers, upper management, and clients to ensure that everyone is on the same page. Storyboards often turn into the initial requirements documents that programmers begin coding from. These deliverables provide an excellent chance to get client buy in and sign-off on the proposed function laity and IA of a site. Story boards can be similar to a detailed wireframe, and there is a lot of crossover between the two.

Sample Story Board 1
Sample Story Board 2
Sample Story Board 3 (pdf)
Sample Story Board 4 (pdf)
Sample Story Board 5 (pdf)

9. Style Guide

Style guides are used to document baseline design requirements for a site. They usually define font classes and a wide range of various design conventions to be followed. This deliverable would generally be considered the responsibility of a designer, but in some instances the Information Architect may be covering multiple roles (as is the case with me). HTML Wire frames are a good solution to solve multiple needs; deliverables for clients or management, and functional templates to start programming from.

Sample Style Guide (pdf)

Read more about Web style guides


Using Web Information Architecture Diagrams

In part 2 we take a look at the factors that influence using information architecture deliverables. Which provides more information on using Wireframes, Site Maps, Story boards, Use Cases, Paper Prototypes, User Profiles, and Site Maps and other web information architecture examples.

+++Thanks to Glen fatpurple.com

By max macapagal Posted in Posts

Manage Feature Creep

Eight Tips on How to Manage Feature Creep

Feature creep, also known as scope or requirement creep, refers to unforeseen requests for additions and changes that are outside the project scope. It typically happens due to inadequate requirements gathering, poor initial planning, and an unclear protocol for change implementation, among other things.

Help minimize and manage the effects of feature creep in your own projects from Jacob Gube sixrevisions.com

1. Accept that feature creep will happen.

That’s right. Here you are thinking that this article’s all about preventing feature creep. On the contrary, I feel that it’s a natural part of any project-based work. Acknowledging this eventuality will allow you to be prepared when it finally rears it’s ugly code-retrofitting, design-wrecking head. Anticipating unforeseen changes in your plans forces you to be more adaptable, and promotes the development of a solution that’s flexible and malleable to your client’s ever-changing needs.

2. Commit enough time to requirements-gathering.

Easy enough, fairly common sense, but we’re all guilty of rushing the planning phase of projects. Maybe it’s because of time and budgetary constraints, or our eagerness to show our clients tangible results, or the assurance we get that the project’s in the bag once we start it (and won’t be given to competition). Skimping on this step can lead to agony at the end, and can take the form of unanticipated feature requirements because of our failure to establish the client’s actual needs. Take time to survey the people involved, observe and shadow employees to see how they might use the system you’re developing, and get an accurate estimation of the technical expertise the organization has. An ounce of prevention is worth a few thousand lines of code revision.

3. Giving a hand might cost you your arm.

If you constantly give in to changes, you might be get more of them in the future. Try to set boundaries of what is and isn’t appropriate to revise, this not only prevents unneeded requests for changes, but gives the project strict quality-control guidelines. When you do decide to comply to un-scoped demands, make sure that you indicate that you’re doing something out-of-scope, and that this can cause delays and additional financial requirements. This may make them re-consider the value of the feature requested, or at least give you an extension in time and budget.

4. Be the devil’s advocate when changes are requested.

You were hired and assigned to the project because of your knowledge and expertise in the solution required. If a client asks for a Flash-based navigation menu, it is your expert obligation to convince them that the CSS-based menu you developed is a much better solution. Don’t be afraid to contradict unwise feature requests; providing well-formed reasons will assure them that you know your “shizznit”, and they may actually allow you to proceed as originally planned.

5. Be task-oriented, not vision-oriented.

Be clear on what it is, exactly, you’re developing for them. Don’t promise a grand, exciting, but ambiguous/ambitious end result. Instead of giving broad generalizations such as “I’ll be developing a search engine optimized website”, try to outline the deliverables that you will provide, such as: “I’ll be using image replacement techniques for sub-headings, creating and implementing a Sitemap.xml, submitting the site to major search engines, and optimizing page titles with relevant keywords”. This makes the project less ambiguous and prevents additional tasks, such as developing a link-exchange program to increase page rank results, which is clearly not part of your duties.

6. Shed the “Customer is Always Right” mentality.

You, more often than not, are a more qualified judge of how things should be developed. You’re not working to get a big tip at the end. You’re working (most probably) on a flat rate fee or an agreed-upon compensation. All you have to worry about is your reputation and producing an excellent solution. The employer can hate everything about you, but if you’ve provided an amazing profit-generating product, you’ll get hired back to do more. In the end, it’s more about profits and deliverables and less about how your employer loves your “reasonable personality” (because they love nothing more than making a bundle of cash or reducing their overhead due to the solution you developed). So don’t give in to unwarranted requests and unreasonable timelines simply because you want to be on your employer’s good side. Don’t feel pressured to do something that isn’t in the job description or something you feel will lead to a less desirable end product.

7. Research before committing.

Assuage the temptation to immediately accommodate a change in project scope, no matter how seemingly simple. If you think the budget and timeline can handle a modification in plans, research thoroughly on what the change actually entails before committing. For example, in a CMS development project I was involved in, I was asked if it was possible to migrate the system from our servers, to the client’s. This wasn’t part of the project scope, as the original plan was to also provide hosting for the system. I agreed to it thinking that a database export/import and file migration would take an hour’s work at most. I failed to account for the fact that our server set-up (being IIS 6.0/Windows and the client’s being Apache/Linux) and server settings were different. Suffice it to say that it took longer than anticipated and the task is still unfinished.

8. Realize that feature creep is a two-way street.

Clients and employers aren’t (purely) evil. They don’t intend to make our jobs more difficult. Oftentimes it’s our desire to please, to prove our worth, and our perfectionist mentality that can be, in part if not equally, to blame. If feature creep happens, it’s only because we allow it to.

+++from  Jacob Gube  sixrevisions.com

By max macapagal Posted in Posts

Improve usability/go to museum

Improve Site Usability by Studying Museums

Improve Site Usability by Studying Museums

Article from Alexander Dawson from sixrevisions.com.

Using a website should be easy. It should be intuitive. We should know what button or link to click to get to where we need to be.
But sometimes websites can be insanely confusing. Just look at the Apple app store, for example. When seeking out apps to install on my iPhone — which as an open source advocate and proponent, I feel incredibly guilty with, by the way — I find myself endlessly frustrated at the general lack of good navigation in iTunes, making the process of discovering the apps I want more difficult than necessary.

Trying to browse all of the apps on iTunes is next to impossible!

This article aims to underscore lessons we can learn from museums and art galleries in relation to website usability.

A-Maze-ingly Unfriendly

Many websites are a labyrinth (or maze) of endless tunnels and pathways that have no clear direction — and getting lost or confused is the resulting outcome. Simply put, things really need to change if your website visitor feels like your content organization is like traversing a maze.

Navigation menus for visitors can turn from helpful aids to monstrous mazes; try to keep dropdown menus short.Navigation menus for visitors can turn from helpful aids to monstrous mazes; try to keep dropdown menus short.

Perhaps it seems a little unfair or extreme to compare most site navigation designs to a maze — but the problem exists in many sites and is something we need to tackle. It’s quite normal to see site navigation that is confusing, leading to dead ends or paths that lead you away from the exit.

Don't make your navigation complex like this. Navigation isn't a puzzle game!Don’t make your navigation complex like this. Navigation isn’t a puzzle game!

What We Can Learn from Museums and Art Galleries

I remember going to the Natural History Museum (in London) on a school trip. While the endless exhibits were fascinating  — what teenager wouldn’t get a kick out of weapons, naked statues and dead people on display — the one thing that impressed me was how the museum, for such a huge building, was incredibly easy to navigate.

There’s nothing like having enough space to appreciate art and websites alike.

Whilst the brick and mortar foundations of a museum or art gallery may not seem, on the surface, like ideal candidates for usability, navigation, and layout design inspiration, indulge me as I try to make the connection.

The Connection

What is it about museums and galleries that encourage people to spend time exploring the many rooms and walkways in these humongous buildings? It’s nothing more or less simple than the exhibits.

In terms of the web: our content, site features and service offerings are the core exhibits that we offer.

Giving each of your products its own “room” can aid you in giving them enough distinction.

Content appears in many forms such as text, images, diagrams, videos and audio. While most art galleries focus on showcasing images and museums on historic objects, the idea that we can feature, display, organize and lay out experiences to be browsed at the user’s leisure is a central point of design theory and the content management process.

Showcasing images effectively will result in a more streamlined experience.

Components of Museums and Art Galleries

So what is the secret behind the success of a museum’s navigability?

Featured Exhibits

Source: Wikipedia

Museums highlight special exhibitions and actively promote them by ensuring that display items are in an accessible and easy-to-find region of the building.

They might have special posters outside the building, they may even advertise these exhibits off-site (such as in the local newspapers or in their website). As these are of special interest, they are publicized quite heavily.

Signs and Directions

Jimmie Rodgers Museum Sign. Source: Wikipedia

By having signs around the establishment, visitors can accomplish the most fundamental tasks — from locating that exhibit you wanted to see, to finding the closest public restroom.

Brochures and Reference Booklets

Maps

Having signs in a gallery or museum is great if you just want to provide simple directions, but many institutions have booklets or leaflets that are more content-heavy for individuals requiring more information.

Maps

MapsEstonian Open Air Museum map. Source: Wikipedia.

A map is useful for providing directions visually towards certain locations. Some museums and galleries offer paper maps and other aids (sometimes even apps for mobile devices) to guide new visitors around.

Human Assistance

Human Assistance

Every now and again, visitors will need more than what’s offered by default; when they have inquiries that require a tailored response. It is at this stage where human assistance comes in. Most places you visit have members of staff roaming around to help patrons or stationary informational booths in case someone needs help through human interaction.

Interactive Exhibits

Interactive ExhibitsScience Centre Port Blair Biotechnology Gallery. Source: Wikipedia

An increasing amount of museums offer interactive displays to make the things being presented to the visitor engaging and fun.

Space and Clarity

Space and ClaritySource: Wikipedia

There is nothing more annoying than an overcrowded location. Whether it’s too many items put too closely together or too many visitors — ensuring that every item gets the space it warrants so that it is distinct from other pieces is an effective way of laying out museums and art galleries.

Souvenirs

SouvenirsSouvenirs from USCG Museum Northwest, Seattle, Washington. Source: Wikipedia

Most museums have some kind of store that sells memorabilia and trinkets related to the museum. These items create a tangibility to the visit, and may even prompt future visits.

Producing Digital Equivalents of Museum Components

Digital equivalents for these museum/art gallery components may feel like an imaginative stretch, but let’s give it a shot.

Website Equivalent of Featured Exhibits

Featured exhibits are the first item on the list, and it won’t surprise you that feature sections can be effective in design because you see it quite often. From content sliders and module tabs, to special limited-time offers and displaying fresh site content prominently, these various site components can draw attention to your featured items.

The above image shows precisely how you can feature prominent content.

Remember how I said museums sometimes even promote featured exhibits outside of their physical location? The digital equivalent of this is advertising your “exhibits” in other sites and services, such as Twitter, Facebook, and AllTop, all of which can help enhance findability.

Website Equivalent of Signs and Directions

Signposts and directions have their own digital equivalents too. Many websites have help documentation and navigation aids like breadcrumbs to help you locate the things you need. Great designs will also use the art of distinction and call-to-action buttons to draw attention and guide the user’s eyes towards what they might be looking for.

Website Equivalent of Signs and DirectionsChapters indicate how far you’ve travelled through a large document.

Website Equivalent of Brochures and Reference Booklets

The equivalent of reference booklets and brochures on the web are help doc pages, FAQ pages, video tours, and so forth.

Offering guided tours or quick start tutorials can help engage visitor understanding.

Website Equivalent of Maps

The most obvious manifestations of physical maps on a website are sitemaps and, to a large extent, your primary navigation menu. Creating a visually illustrative diagram of your site’s layout could also be components that help your users navigate around your site.

Providing a site map showcases the amazing array of content your site holds.

Website Equivalent of Human Assistance

A lot of businesses may say that it isn’t cost-effective to use a member of their team for live support, but they could have fixed hours for when live chat support is available to site visitors.

Otherwise, asynchronous communication methods such as a contact web form or a help desk support system can also be the website equivalent of informational booths that are driven by people.

Live chat software can be useful as a form of human assistance to site visitors.

Website Equivalent of Interactive Exhibits

Site interactivity can, just like their offline-counterparts, engage and provide more value to the experience of the user. You can have game mechanisms to enrich the user experience, live chat widgets so that visitors can interact with one another, and other simple strategies for creating a richer and more engaging experience.

Giving your users something to interact with provides a more engaging experience.

Website Equivalent of Space and Clarity

Space and clarity on websites require a solid understanding of design principles. Thinking about Gestalt principles (and more specifically, the concept of proximity),visual hierarchy, the use of negative spacereductionism, all the way down to the basics of clear and legible web typography can lead to effective use of space and clarity that, in turn, can lead to a better and more user-friendly experience.

Breaking information down into manageable segments help progressive navigation.

Website Equivalent of Souvenirs

People like and recommend free stuff to others, and if these “freebies” are branded or help promote your site, then in principle, the site’s visibility and illustriousness increases.

Souvenirs on websites could be custom browser extensions (for example, Mashable, a social media blog, has a Google Chrome extension), digital downloads (Six Revisionshas freebies that are useful to its audience), or anything that allows your site visitors to retain something from their visit and reminds them to come back.

Giving some branded freebies away will help trigger the user’s memory of your website.

Structure from the Chaos

What all of this really boils down to is that it’s important to pay attention to the site visitor’s experience. All these concepts and components really lead to a single idea: A usable website is effective at providing what the visitor needs in a pleasant and near-effortless manner.

Why not visit a museum or art gallery yourself and see what other things you can apply to your profession? Maybe look at how they lay out their exhibits or observe how visitors interact with the various components provided to them.

The journey of an experience should be less about getting from points A to B (even with people in a hurry), and more about the things in between that make the experience pleasantly memorable.

By max macapagal Posted in Posts