Season’s Greetings from Site9

Posted in Uncategorized | Leave a comment

Wireframes & Prototypes: Is There Really a Difference?

The terms “wireframe” and “prototype” are often used interchangeably – possibly due to convenience or misunderstanding – but it’s important to know what sets these two terms apart and how you benefit from each because sometimes your project will only need a wireframe, and sometimes it will require a prototype.

What is a Wireframe?

According to Usability.gov,

“A wireframe is a visual illustration of one Web page. It’s simply meant to illustrate the features, content and links that need to appear on a page so that your design team can mock up a visual interface and your programmers understand the page features and how they are supposed to work. One of the main purposes of a wireframe is to show you where each item should be placed on a page.”

While there are other definitions of a wireframe, I think this is the most accurate. It is simply a visual layout of a website or web application to determine where each component on a page will live, as well as identify the site map hierarchy. And, depending on the needs of a project, a wireframe may evolve from simple gray boxes identifying page real estate to including basic graphics or actual text so that designers and developers can gain a better feel for how everything fits together.

TEST

Low-fidelity wireframe

 

Medium-fidelity wireframe

 

Once a wireframe starts becoming interactive – including animations, clickable navigation, and state functionality – it crosses the line into a prototype.

What is a Prototype?

A prototype is “a product that is designed and built to test a new design. The prototype is used to correct mistakes and make [the design] more user friendly” (wiki.answers.com). It is a “fully functional working model of a final product” (onlineschools.org).

Prototyping is a testing concept that originates from many other disciplines, including mechanical and structural engineering. However, it serves the same purpose for the interactive/digital industry as well. A website or web application prototype lets stakeholders take the visual wireframe a step further – or a few steps further, depending on a project’s complexity – in order to flesh out and test the specs before coding and development begin.

In the most basic sense, a low-fidelity prototype is often referred to as a “clickable” or “functional” wireframe. This is when one navigates between linked wireframe pages to understand how they are connected. But clickable wireframes can evolve into more advanced prototypes depending on the wireframe’s fidelity (gray box vs. graphic and text) and the complexity of interactions desired to present or test with stakeholders and/or users (accordion menus, carousels, etc.).

Medium-fidelity prototype with minimal visuals and interactions

 

High-fidelity prototype with interactions

 

The role of wireframes is to create a foundation for designers to start from and to flesh out requirements early in the interactive development process. Some projects are simple and straightforward enough that they can go directly to design and development once wireframes are approved. Other projects, however, involve complex functionality and interactions that require the need of fully functional prototypes. In addition to helping both the team and stakeholders visually understand proposed interactions, prototypes can be utilized for usability testing, thereby reducing rework after time and money are sunk into development.

Learn more about the benefits of high fidelity prototypes in this post.

Wireframes & prototypes facilitate communication

Wireframes and prototypes primarily differ in terms of functionality, but both serve as useful communication tools for digital teams to create better, more user-centered products, and produce better results than just having the developers jump right into building after goals are set.

Wireframes and prototypes also help stakeholders visualize the project specifications – based on research, goals, and assumed requirements – giving them enough information to provide early, useful feedback and get a product to market faster.

Working out the kinks prior to coding saves on expensive rework and allows programmers to build the website or web application right, the first time around. Using and, most importantly, sharing wireframes and prototypes open the lines of communication between UX and designers, designers and programmers, and project managers and clients or other stakeholders. By getting on the same page early in the process, you can set the tone for a successful project.

Learn more about working with clients during the prototyping process in this post.

Which one is for me?

While wireframes and prototypes have some similarities, they are really two different artifacts in the interactive development process, and used when the project requires it. How, or whether, your team uses wireframes and/or prototypes is completely dependent on the project, as well as your stakeholder and clients’ needs. Furthermore, it is important that you have the right tool that allows you to quickly and accurately develop and share the wireframes and prototypes you need to get the job done. Because, in the end, it’s all about developing, and launching, a successful project – both on time and on budget.

If you’re not sure how each fits into your process, contact us at ProtoShare to see how we can help.

Posted in Uncategorized | Leave a comment

Top Ten Benefits of a High-fidelity Prototype

We talk a lot about the benefits of prototyping, but we like it even more when thought-leaders in the interactive industry talk about it. This post was written by Marty Cagan of Silicon Valley Product Groupwhere he is a the Founding Partner. Cagan has over 20 years experience in executive-level roles responsible for defining and building products.

After 10 years as a software developer at HP, Cagan joined a then young Netscape Communications Corporation, where he had the opportunity to participate in the birth of the Internet industry. Cagan worked directly for co-founder Marc Andreessen, where he was vice-president for Netscape’s platform and tools, and later e-commerce applications. Prior to SVPG, Cagan was senior vice-president of product management and design for eBay, where he was responsible for defining products and services for the company’s global e-commerce trading site.

During his career, Cagan has personally performed and managed most of the roles of a modern software product organization, including product management, software development, product marketing, user interface design, usability engineering, technical writing, software testing, engineering management, and general management.


In several earlier articles I have talked about aspects of prototypes. I’ve talked about using them as the basis for your product spec, and how to use them to test out your ideas on target users, and why I prefer high-fidelity prototypes to their lower-fidelity cousins. In this article I’d like to highlight the top 10 major benefits of prototyping, and talk about some of the mechanics of building and using prototypes.

Benefits:

  1. First and foremost, a high-fidelity prototype gives you something realistic enough to try out your ideas with target users and customers before making a significant investment. This lets you discover which ideas are good and which are not, and if the product has real value, and also discover if users can figure out how to use the product.
  2. Doing a high-fidelity prototype helps you – even forces you – to think through your product to a much greater degree than paper specs.
  3. A high-fidelity prototype enables and encourages the type of collaboration between product manager, interaction designer, and architect/engineer that is necessary to discover a valuable, useful and feasible product.
  4. A high-fidelity prototype provides the level of information necessary for accurate engineering cost estimates, early in the process when these estimates are most useful.
  5. A high-fidelity prototype provides the engineers and QA organization with a rich, interactive description of the product’s intended functionality and design to be used as a reference basis for implementation and test.
  6. A high-fidelity prototype provides the rest of the organization – marketing, sales, customer service, business development, company execs – with a useful understanding of the product to come early enough in the process that they have time to do their jobs properly.
  7. A high-fidelity prototype prevents the classic waterfall problem of doing design after the requirements, rather than realizing that functionality and user experience are inherently intertwined.
  8. If you do a high-fidelity prototype and you test your ideas with users and you find significant problems, you will have saved your company the cost in terms of time and money of building something that would have failed. Not to mention the opportunity cost of what the team could have been building.
  9. If you do a high-fidelity prototype and validate this with target users, you will significantly reduce the time it takes for your developers to build the product both because the product is better defined, and also because you will have been forced to resolve many of the questions early that otherwise throw a wrench into development.
  10. A high-fidelity prototype helps keep the focus of the team on the user experience.

Notes:

  • Prototyping tools have improved dramatically over the past several years. Whether you’re building a web-based application or installed client software, there are several excellent tools. The key is that you use something that lets you very quickly and easily create a realistic user experience.
  • Because the prototype is just representing the user experience, and not the often much more difficult to write software running on the back-end, and because the prototype is not meant to be production quality software (reliable, maintainable, scalable, fault-tolerant), you can usually use a much less skilled resource to create the prototype. The key is that the prototyper must be very comfortable throwing away the work of the past few hours to try a new approach.
  • Once the team moves from product discovery into implementation, the prototype should be version controlled and placed under change control. Any user visible changes to the product definition need to be approved by the product manager and engineering, and reflected in the prototype. The prototype serves as the key reference and master. It is the one artifact that the product manager, designers, engineers and QA use to reflect decisions made.
  • It is perfectly fine for the prototype to use simulated data. The data should be realistic and plausible but does not have to be accurate. Generally, the prototype doesn’t access any other database or remote service.

For product teams using Agile methods such as Scrum:

Some Agile practitioners argue that the team should just consider the early sprints as the working prototype. And in fact, for custom software efforts where there really isn’t true product management and rarely user experience design, this is the essentially the best you can do. However, for product software organizations, you can and must do better than this, for three reasons:

First, a sprint is typically far too long to wait to try out an idea—an idea which will most likely be wrong. It is much faster to try that idea out with a disposable prototype in days rather than wait months for one or more sprint cycles.

Second, there are typically too many critical things for the engineering team to do to use them for the product discovery process. By taking their time for this prototyping work they are not able to do what they should be doing—building production software.

Third, while Agile methods do much to encourage the team to learn and respond quickly, it is still difficult and time consuming for a team to change directions significantly once they have begun down a path, and put long hours into a particular architecture or approach.

If you haven’t yet tried creating a high-fidelity prototype as the vehicle for discovering a product that is valuable, usable and feasible, I hope you’ll give it a try. It has never been easier to do so, and I find it one of the most powerful techniques for coming up with winning products.

Posted in Prototyping Benefits | Leave a comment

ProtoShare is a Silver Sponsor of InfoCamp Seattle

ProtoShare is exhibiting and sponsoring InfoCamp 2010 in Seattle from October 2-3 at Seattle University.

InfoCamp is an “unconference where people excited about information gather to collaborate, innovate, and build community.” There are a variety of topics on the table this year, so it will be interesting to see what participants take away from this unconference. Some topics may include Mobile IA and Design Principles to Digital Asset Management and Wireframing Techniques.

We are pleased to be a Silver Sponsor of this year’s event. Be sure to stop by the ProtoShare booth to say hi to Blake Johnson (Co-Founder and VP Marketing) and Josh Chaney (VP Sales). You can learn more about interactive wireframing, team collaboration, and streamlining your development process, as well as receive a live demo of ProtoShare.

Visit the InfoCamp Wiki for more information or to register for the event.

Posted in Uncategorized | Leave a comment

Five Best Practices for Creating Website Prototypes

Prototyping is an iterative process, and you probably won’t know everything about your project in the beginning. That’s OK because  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

  1. 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. 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?
    • What pages should they display?
    • Should their orientation be horizontal or vertical?
    • Should they include drop-downs and fly-outs, and to what depth?

    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.

    The Site Map  is shown below.

  2. Think About Reuse

    When creating website prototypes, 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 masters . Templates and masters are resources that are saved in the ProtoShare Library. Which resource to create depends on your specific needs:

    • Templates are fixed in position. Therefore, they are a good choice for headers and other functionality that does not change position from design to design.
    • Masters are manually positioned just like components. Therefore, they are a good choice for footers and other functionality that changes position from design to design.

    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 master? 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 life cycle is simple.

    The ProtoShare Library is shown below.

  3. 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 typically 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.

  4. 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 only what’s necessary 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.

  5. Add Interactivity to Design Comps

    Many people include design comps as part of a prototyping 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. 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.

    In the figure below, the logo is linked to the Home page of the prototype.

Posted in ProtoShare Tips | Leave a comment