The Interactive Ideas Blog

When I was a account manager for an interactive agency, I got as much project feedback from my clients as I could. However, after facing consistent rework and headaches, we made prototyping part of our standard process.  As a result, I also learned to educate the clients by reviewing four main points about the prototyping process. I’ve recently learned that many agencies don’t clarify this process for their clients, frequently resulting in confusion and misunderstandings. Depending on the needs of the interactive project, you’ll often have to review the prototype with your client. If your clients are not as technically savvy as you, they may need clarification on the following points about creating a website / web application prototype:

1. Why a prototype is necessary
2. How to use the prototype
3. What is expected from them as the client
4. What are the next steps after the prototype.

If you find yourself in a situation like the one I just described, I’d like make it easier for you to explain to your clients the prototyping process with ProtoShare. Below are some common scenarios and answers to the topics (mere suggestions from personal experiences). Feel free to add your own tactics and experiences in the comments area below..

1. Why a prototype is necessary

Client: “I’m have a tight budget and deadline, so I don’t understand why this extra step is necessary. We already talked about my needs for the site/application. Can’t you just take my ideas and build what I need?”

Response: Yes, we could actually start building the site/application for you. But because you ARE on a tight budget and deadline, it’s best that we begin with the layout of the sitemap and pages to ensure we’re going in the right direction. We need to make the most of your investment by making sure that 1) We truly understand your needs, 2) We provide you with a proper solution to meet those needs, and 3) You and your end-users will be satisfied with the final product.  A good comparison is that of a house. Not only would we need blueprints to create the foundation to know where to build the walls, but we’d also need to know if it is important for you to have the garage next to the kitchen. And what if you decide you want 12’ high walls instead of 10’? You need to determine these things prior to building the house. Trying to move walls, redirecting a driveway, and tearing down construction once you’ve already started building is much more costly than if properly planned from the start. One “small” change can have a ripple effect throughout the whole structure.  Well, it’s the same with a website/web application. Making changes later in the process is much more costly because valuable development work has been done, and altering it is much more difficult than changing a drag-and-drop prototype.

2. How to use the prototype
Client: “What do I do with this thing? It’s just a grouping of boxes and lines and certainly does not look like a website. I also don’t like gray. Where’s the color? And I don’t know what “lorem ipsum” means; my site/application should be written in English.”

Response: You are correct. Right now, it doesn’t look much like a finished website/application. Let’s go back to the house planning we just discussed. The blueprints of a house look nothing like the actual house. However, when looking at the blueprints, you understand where the master bedroom is, where the windows and doors are, and how wide the hallways will be. We are doing the same thing with your website/application.
We need you to review the page and interact with the layout, navigation, graphics, interactive forms, copy placement, etc. Will this make sense to your users? Will this layout help achieve your goals? Does the flow of pages make sense to you? How you and your customers interact with the site is key to the success of the project. When we answer these questions, we can move into a more high-fidelity prototype.

3. What is expected from the client

Client: “Okay, I understand the comparison to building a house. What else do you need from me? How do I know what to look at and when?”

Response: Once we’re ready to show you part of the prototype, you’ll receive an email with a link into ProtoShare. You have your own login to access your site/application. Click through the pages as if you were navigating through a real site. Because your time is valuable and we cannot always meet or personally discuss the pages or changes, you have the ability to access your prototype when it is convenient for you. On the prototype, you may also find annotations (our notes about decisions) or red pins that are discussion points. If you see something you want to comment on, or reply to, just click on the red pin; or create a new topic and drag out a red pin.  We have access to all your feedback and if you have more detailed questions, or if we need clarification, we can schedule a time to talk. What’s important is that you are involved in the planning process upfront, ensuring that the project is done on time, on budget, and meet all goals.
(ProtoShare also has a brief video tutorial showing your clients how to work in the tool.)

4. What are the next steps

Client: “So what happens next?”

Response: (this will obviously vary from project to project and depends on your company’s process) Since we’ve reached agreement on an interactive prototype of your project, we’ll begin building your site/application. We may need to do some user testing.  Because we engaged you early in the process, we have a clear understanding of your project’s unique requirements. And we should be able to deliver with a minimum of changes and rework, meeting your budget and deadline.

Andrea Fidel,
ProtoShare Marketing Intern & MBA student at University of Portland

Consulting Services for ProtoShare are now available. If you need help prototyping a complex website, simulating rich Internet functionality, or transitioning from another system, let us do the heavy lifting. We will work with you to plan and build custom solutions that meet your specific needs and that support your overall business strategy. Your success is our primary goal! To request a quote, please complete this form.

We offer a wide range of services covering all aspects of the prototyping process including:

Building templates

Creating resources that can be reused across projects by multiple stakeholders is an important way to maximize your team’s efficiency and success. In ProtoShare, templates are the primary way to reuse resources such as headers, footers, and sub-navigation.
ProtoShare Consulting Services can build a flexible and extensible library of templates that meet your current requirements and that grow with your future needs. We can create a collection of stock company templates or custom templates for your key clients.

Creating custom components

To support the creation of rich prototypes, ProtoShare includes a large number of built-in components. These components can be used individually or they can be combined in unique and complex ways. Moreover, you can create any component by specifying HTML, CSS, and JavaScript.

ProtoShare Consulting Services can create custom components that suit your specific needs. From complex navigation schemes to completely customized components, we can create a prototyping experience that is visually and functionally compelling.

Transitioning from another tool

Prototyping has been accepted as a best-practice by many software professionals and organizations. This wide acceptance is matched by the large variety of tools used to create prototypes. Everything from simple drawing and presentation applications to complex development environments have been tried – with varying levels of success.

ProtoShare Consulting Services can help you transition from your legacy prototyping tool to ProtoShare. We can reproduce content and interactivity from almost any tool, providing you with continuity and peace of mind for all your projects.

Incorporating branding information

Whether your audience is an internal development team or a big-name client, branding can be an important way to bring your prototype to life. Including a client’s logo and design aesthetic, or a corporate color scheme and terminology can add a comforting feeling of familiarity, while strengthening project ownership.

ProtoShare Consulting Services can incorporate your branding information. We can create brand-specific designs, content, and styles to produce the desired look and feel.

Training your team

ProtoShare projects typically involve multiple stakeholders with diverse skills such as information architects, designers, and developers. Bringing everyone up to speed can be a real challenge. And with advanced functionality such as rich Internet simulation, stateful wireframes, and complex navigation schemes, there’s a lot to learn!

ProtoShare Consulting Services can train your team on how to maximize the benefits of ProtoShare. You’ll learn the necessary skills to efficiently develop compelling prototypes, while increasing efficiency, productivity, and satisfaction.
Get started today.

At ProtoShare, we strongly believe in low-fidelity wireframes and prototypes. After all, wireframes aren't the end goal, they are merely a tool to use in a larger process. Most of the time, simple wireframes kickstart the needed discussion to make decisions. There are times, however, when simple doesn't cut it. Sometimes you need to build out a specific feature more completely to adequately experience and discuss it. At these times, wireframing applications turn into limitations because you can only build what their component palettes allow you to build. That is if you aren't using ProtoShare and the HTML Sandbox.

The ProtoShare front-end is all HTML/JavaScript, not Flash. Consequently, this allows users to do some unique things, like view the prototype in a browser, or use CSS to change the appearance of components. Now with the HTML Sandbox, ProtoShare gives you the ability to create and add any component they can think up and code. And with the proliferation of JavaScript libraries like Ext (which we use to build ProtoShare), YUI, jQuery, mooTools, etc it is not too much work to find a pre-built component and modify it to fit your needs.

The video below shows some of the possibilities you now have with the Sandbox:

So, how does it work? The HTML Sandbox is currently under our "Experimental" components at the bottom of the palette in the editor. Select it like any other component, click the Source Code field in the properties to open the HTML editor, and type or paste in your code. Close the HTML editor and switch back to Prototype mode, or click the Interactive Mode button and check it out.

Below is some sample code you can use to test it. This is a very simple example of doing a basic on-the-fly form validation where it highlights blank entries.

<html>
<head>
     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

     <style type="text/css">
          .error { background-color: #FFD2D2; }
          div, input { font-size:11px; font-family:Verdana; padding:5px; }
          input { padding:2px; border:1px solid black; }
     </style>
</head>

<body>
     <form name="user" action="#" onsubmit="return false;">
          <div>Name <input type="text" id="name"/> <span></span></div>
          <div>Email <input type="text" id="email"/> <span></span></div>
          <div><input type="submit" value="Submit" /></div>
     </form>

     <script type="text/javascript">
          $('input').blur( function() {
               if( $(this).val() == '' ) {
                    $(this).parent().addClass( 'error' );
                    $(this).next('span').html(' this cannot be blank');
               } else {
                    $(this).parent().removeClass( 'error' );
                    $(this).next('span').html('');
               }
          });
          $('form').submit( function() {
               $('#name').blur();
               $('#email').blur();
          });
     </script>

</body>
</html>

Notice in this example we're using the jQuery library hosted on code.google.com. If you want to use some jQuery (or other JavaScript library) plugin you find, there will probably be additional files necessary. You can either paste the source code into the HTML editor, or you can upload the files to the Asset Library and link to them.

You upload JavaScript and CSS files to the Asset Library just as you would any image asset. Once the files are uploaded, click on a file to see the full path to the file. These links take the form of /Asset/<directory>/<file>. For example if I were going to use a jQuery library called accordion.js, I would upload it to the Asset Library and my HTML Sandbox code would look something like this:

<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="/Assets/js/accordion.js"></script>
</head>

...

Please remember this is still an experimental component. We consider this an advanced component as you need to know a fair amount about HTML and JavaScript to get the most out of it. We're very excited about the possibilities here, and we think you'll be too. We'd also like to hear your thoughts about the HTML Sandbox. Please leave us some comments here describing how you are using it, or how you would like to use it.

We have an exciting new proof of concept in ProtoShare: the iPhone Prototype component. As we looked around at the iPhone prototyping market, we saw that there really is no way to pull up an interactive prototype on the iPhone. No way to experience the real interactions on the phone in user experience testing. And then we were talking to our office suite mates who happen to be a group of pretty well known and accomplished iPhone consultants and application developers, Raven Zachery’s Small Society. (Anyone see the new Zipcar app at WWDC last week?) Anyhow, they pointed out that having an interactive prototype natively viewable on the iPhone would be a big help when working with clients. They use wireframes now, but sometimes it’s difficult for customers to get the feel for an app if it’s not on the iPhone.

With that in mind, one of our engineers took a look at ProtoShare, spent a few days developing a concept, and came up with an implementation. Since ProtoShare is an HTML-based web application—not Flash—we can easily produce viewable and navigable wireframes for the iPhone. The component he developed is basically a container in which you build your wireframes, it also makes the prototype look and behave like an iPhone app when viewed through Safari on your iPhone.

Keep in mind that this component is still a proof of concept. However, we wanted to get it out there so people could take a look at it and give us feedback on what would be necessary to make this a useful feature. Do you want this? What do you need for this implementation to really work? What are the absolute necessities? What do you want to see?  Do you want a iPhone application that integrates with ProtoShare? Let us know any and all feedback at in the forum.

Check out the videos below that demo how the component currently works. Some features we’re currently working on:  orientation awareness, better transitions, and easier workflows for building the prototypes. Stay tuned….there’s a lot more to come.

How the ProtoShare iPhone Component Works

An Advanced iPhone Prototype using CSS3