Five Best Practices for Creating Website Prototypes

Posted: September 20, 2010 by Dave DeAngelis, Director of Education and Professional Services

I develop prototypes with a mixture of confidence and uncertainty. This approach is based on hard-won experience, and holds true regardless of the stakeholders involved, the complexity of the project, or the timeline. In the best cases, I derive confidence from participating in an open process that produces a thorough requirements document. In all cases, my uncertainty comes about because I’ve worked on too many projects where the requirements documents have proven to be incomplete.

You probably won’t know everything about a project in the beginning. That’s OK because despite the inherent uncertainty, I’ve learned a few best practices that can help keep you on track, and that provide you with a context in which to efficiently build prototypes in ProtoShare. I think you’ll find these best practices useful, especially for large and complex projects.

Plan Your Navigation
If you’re building a website prototype, navigation is inevitably part of the design. In ProtoShare, you can quickly build clickable prototypes using purpose-built navigation components. The navigation components display pages that you create in the Site Map. The Site Map is an interactive tree view that allows you to visualize your entire project as a hierarchical list of pages. For a website prototype, the pages represent your website architecture.

When planning your navigation, typical questions include:
- How many navigation components does a design require?
- Should their orientation be horizontal or vertical?
- Should they include drop-downs and fly-outs, and to what depth?
- What pages should they display?
Once you answer these questions, you can build-out your pages and create live navigation for your designs.

Of course, the more thought you give to the site architecture, the faster the prototype can be completed and shared with your colleagues. However, much of the power and convenience of the navigation components is their ability to automatically update when you add, delete, rename, or move pages in the Site Map. Therefore, you can easily change your architecture as new ideas emerge, and your designs will immediately reflect those changes.

A portion of the Site Map for an online bookstore is shown below.
Think About Reuse

When creating website prototypes, some content such as headers, footers, and sub-navigation is reused. Reusing your work can save you a lot of time throughout the life cycle of a project.

In ProtoShare, you reuse content by creating templates and clippings. Templates and clippings are resources that are saved in the ProtoShare Library. Which resource to create depends on your specific needs:
- Templates are assigned to designs and are fixed in position. Therefore, they are a good choice for headers and other functionality that’s automatically positioned. Clippings are added to designs just like components. Therefore, they are a good choice for footers and other functionality that’s manually positioned.
- You create templates and clippings in the Editor or in the Library. You can import templates and clippings from any project within your ProtoShare account, and changes you make to a resource automatically updates everywhere it’s used in a project.
Just like creating pages in the Site Map, it pays to think up front about your reusable content. For example, should you include sub-navigation as part of a template or as a clipping? Should you create two header templates; one with breadcrumbs and one without? Making the correct choices in the beginning will save you time down the road. However, ProtoShare supports a flexible workflow, and modifying Library resources throughout the project lifecycle is simple.

The ProtoShare Library is shown below.
Keep Designs Lean and Organized

You create content for your designs by adding components. You can add as many components as you need and in any order you wish. However, there are times when the component number and order matters.

Because ProtoShare is a SaaS application, component-heavy designs can affect performance, which you experience as longer page-load times. However, quantifying a component limit is difficult. Overall application performance depends on many factors including the type of Internet connection you’re using and the speed of your computer. Certainly, a design consisting of a handful of components will load more quickly than a design consisting of a huge number of components. As a general best practice, you should keep your designs as lean as possible. That being said, I have created designs with hundreds of components and the application still feels very responsive.

Organizing components has both a visual aspect and a practical aspect. The visual aspect has to do with positioning components in the Editor canvas so they are properly aligned and distributed, have the correct dimensions, and so on. The practical aspect has to do with grouping components using Containers, and reordering them in the Listing as described in a previous post. This is just as important as a clean visual presentation because it allows you to more easily modify complex designs. Also, the component order can affect the way users experience the prototype. For example, the tabbing order for a form is given by the order of the form components in the Listing.

The Component Listing is shown below.
Prototype Only What’s Necessary

As a corollary to the best practice of keeping your designs lean and organized, you should strive to prototype only what’s necessary. Not only will you save time, but you’ll be able to focus your colleagues on what’s important, and not distract them with unnecessary information.

This best practice applies to both the visual fidelity and the functional fidelity of your prototype. Generally speaking, you should include only enough information so that you can convey what’s necessary to your colleagues to effectively evolve the prototype. So, if you’re adding functionality that’s not needed to answer specific questions, and for which you do not want feedback, then you might consider excluding that functionality from your designs.

For example, the search filter shown below is not configured to display different search results based on the menu choice because that level of detail is unimportant for the prototype. Instead, a generic search result design is displayed.
Add Interactivity to Design Comps

For each page in the Site Map, you can create multiple designs. Creating multiple designs allows you to explore different ideas, supports multiple workflows, and allows your entire team to use ProtoShare. One of the design types you can create is a design comp. A design comp is an image that you upload into ProtoShare. The image is typically created using third party software such as Photoshop, Omnigraffle, or Visio.

Many people include design comps as part of a process that also includes wireframes, while others use design comps exclusively. In either case, you can create the experience of a real website by making the comps interactive using the Hyperlink, Jump Menu, and other components.

The advantage of using comps is you can include pixel-perfect designs with stunning visual fidelity into your prototype. The disadvantage is you must create all the links manually. This workflow is particularly attractive to designers who prefer to work with their graphics program of choice, but still want to use the interactive and collaborative capabilities of ProtoShare. It's also a popular way to conduct usability testing on prototypes.

In the figure shown below, the logo is linked to the Home page. Note that a similar link was created for every design comp that includes the logo.