ProtoShare Community » Peter Uchytil

ProtoShare 6.1 is Here!

Peter Uchytil — Mon, 30 Jan 2012 18:40:31 +0000

This weekend we released ProtoShare 6.1, which has some significant new features and workflow enhancements, including:

Global States
New stateful components
Panes in the Listing panel are now collapsible
Assets are replaceable
A design can be reset to its default state

Read more about these features and bug fixes in the release notes, and watch this new video explaining Global States.

What do you think of these new features? Global States was one of our most requested features. Now that it’s here, how will you use them? Let us know in the comments.

Use What You Need to Get Your Message Across

Peter Uchytil — Wed, 18 Jan 2012 00:26:57 +0000

Kyle Adamo published an article today over at UX Booth about integrating Google Charts in your prototypes to deliver a high-fidelity experience. Not something you would need to do all the time, but very useful when you do. Here’s how you can do this in ProtoShare.

From a Google Spreadsheet where you have a chart, you can select to publish an interactive chart or image. The interactive chart gives you a script block to paste into HTML (the ProtoShare Advanced HTML component for instance), and the image option gives you the URL of an image, which you can use in an Image Component in ProtoShare. Then wire up the charts with some states and a state Jump Menu and you’ve got the bare bones of the same widget. The video below shows the details. Sorry, no sound. I just did it quick this morning.

Let’s examine Adamo’s article a bit more. My first reaction, and I’m sure the reaction many UX professionals might have, was that this was an awful lot of trouble to go to for a protoype. Seems like this level of detail shouldn’t be necessary. It’s even possible that the functionality is overbuilt and the developers will have difficulty implementing it.

But Adamo addresses this in the article. He states that he knows his audience and his developers. Prototypes are used to convey concepts and generate discussion so decisions can be made. The high level of interactivity was needed for his stakeholders. If he had done less he would have wasted everyone’s time by trying to gain insights with insufficient information.

So for me the two big takeaways from this article are:

Prototypes exist to drive communication so you can make decisions. Do what you need to make sure you are engaging your stakeholders to get answers to the questions you have.
Use whatever you need to build your prototype. This might mean going outside your prototyping application. If you can quickly build a chart in Google spreadsheets and include it through an iframe or image, do that instead of spending lots of time building a chart with basic shapes.

Overall a good article on a creative technique used to quickly deliver what stakeholders needed to have an informed discussion. Well done, Kyle.

Have you ever incorporated external tools into your prototypes? If so, we’d love to hear about it in the comments.

Neil Gaiman on Feedback & Perfection

Peter Uchytil — Thu, 15 Dec 2011 23:35:36 +0000

From Gotham Writers’ Workshop, celebrated author Neil Gaiman lists good writing practices – a couple of which apply nicely to prototyping with ProtoShare.

5. Remember: when people tell you something’s wrong or doesn’t work for them, they are almost always right. When they tell you exactly what they think is wrong and how to fix it, they are almost always wrong.

When soliciting feedback, ask for it in ways that help your reviewers tell you what feeling they get when they see or interact with the prototype. Does it flow well? Is it confusing? Does it seem to take up too much time? These kinds of questions help increase the chance of getting feedback you can use, instead of specific comments on font selection and color choices.

Likewise, when giving feedback, do the same. Think about the overall feel of a web prototype and try to highlight areas where you get confused or frustrated and explain why. At this stage don’t worry about how to fix.

6. Fix it. Remember that, sooner or later, before it ever reaches perfection, you will have to let it go and move on and start to write the next thing. Perfection is like chasing the horizon. Keep moving.

Words to live by. A prototype can always be better. Or at least be different. Getting something done is the most important thing. After all, you want to actually build what you’ve been prototyping. Make sure you prototype just enough to communicate your ideas so you can gain buy-in and not over-prototype. It’s much better to have buy-in across many aspects of the project, with some details left to fill in, than it is to have one small area meticulously envisioned.

Are Street Performers Better Than You at Prototyping?

Peter Uchytil — Fri, 28 Oct 2011 20:09:28 +0000

Street performers probably have a better prototyping workflow than you do. In the post, Become a God of Learning Your Trade on Zenhabits by Leo Babauta, he states to get better at what you do you should “do it in public and get immediate feedback.” He explains that street performers playing for money have this process dialed in. Try something, get feedback, adjust and repeat. If you don’t do this, you don’t get paid. It’s that simple.

For building websites and web applications, it seems it should be more complicated, but it isn’t. Applying the ideas in Leo’s article to web prototyping lines up with one of our favorite ProtoShare mantras: share early and share often. Your projects will get better when you try something and get feedback on it right away.

Go read the whole article. Leo relates his own experience with building Zenhabits (which has lots of great content) and applying the rule of “do it in public and get immediate feedback.” Definitely something we can all do more of in our own projects.

Getting over embarrassment in order to get things done

Peter Uchytil — Wed, 06 Apr 2011 18:30:45 +0000

The process that Pixar adopted for Toy Story, as explained by Ed Catmull, President of Pixar Animation Studios, is very similar to the process of “share early, share often” that we advocate for prototyping with ProtoShare:

In the process of making the film, we reviewed the material every day. Now this is counter-intuitive for a lot of people. Most people—imagine this: you can’t draw very well, but even if you can draw very well, suppose you come in and you’ve got to put together animation or drawings and show it to a world-class, famous animator. Well, you don’t want to show something that is weak, or poor, so you want to hold off until you get it right. And the trick is to actually stop that behavior. We show it every day, when it’s incomplete. If everybody does it, every day, then you get over the embarrassment. And when you get over the embarrassment, you’re more creative.

As I say, that’s not obvious to people, but starting down that path helped everything we did. Show it in its incomplete form. There’s another advantage and that is, when you’re done, you’re done. That might seem silly, except a lot of people work on something and they want to hold it and want to show it, say two weeks later, to get done. Only it’s never right. So they’re not done. So you need to go through this iterative process, and the trick was to do it more frequently to change the dynamics.

Source video (quoted section starts at 6:10):

Video link found at Hypercritical episode 12, 5by5.tv.

See for yourself how ProtoShare encourages these sharing techniques.
Sign up for a free trial today!

Jason Fried of 37signals on Managing Conflict

Peter Uchytil — Tue, 13 Jul 2010 04:34:39 +0000

37signals co-founder Jason Fried published an article in INC. titled Managing Conflict. It’s a good look at conflict and how it can be beneficial if managed properly. He also gives a few examples of how they actually handle conflict management. One thing that stood out for me was:

…we try to get real with things as quickly as possible. For us, real means something we can all look at — a picture, a sketch, something visual. Until everyone’s looking at the same thing, it can be hard to reach actual agreement. Five people may read the same paragraph, but they often interpret the words differently. But when you look at a picture, a mockup, people are more likely to reach agreement — or valid disagreement. Whichever way they go, at least we know where they actually stand, not where we think they stand. Pointing at something real cuts through to the truth.

I agree with this wholeheartedly. At Site9, one of our mantras is: “prototype early, prototype often.” It can be more beneficial to quickly build small sections of a larger prototype in order to answer questions as they arise rather than hold all questions till the complete prototype is finished. Some ideas need a lot of structure in order to make decisions, but a lot of ideas don’t. If you want to show what a nav bar will look like, or some logo treatments, you don’t need the whole page. Better to get the ideas out and in front of people and make decisions.

I recommend reading the whole article as it has a some great advice on how to handle the times when you can’t avoid conflict and you have to choose one side or the other.

ProtoShare 3.8: A Quick Preview

Peter Uchytil — Thu, 01 Apr 2010 03:22:05 +0000

UPDATE: ProtoShare 3.8 was successfully released on Saturday night, 3 April. All users are now on the new version.

Release 3.8 is coming this weekend, April 3rd! Sorry for the short notice, but we’ve been busy testing and fixing little bugs. In an effort to streamline ProtoShare, 3.8 has several workflow changes. First, the Projects management screen has changed.

Here are the New Tabs:

Projects

My Projects has merged with Account>Manage Projects and is now called Projects. Projects are now in a sortable grid. Active projects are listed above archived projects (grayed out to indicate archived). Most importantly, the default sorting of this grid is last-opened for the current user. If you work with a lot of projects, this is a huge help.

Also, when you select a project you can now invite users directly on this screen using the People tab in the right-hand sidebar.

Project Entitlements are now shown in this page’s footer.

Here’s what all these changes look like:

People

Account>Manage Users is now People. Again, information is now in a sortable grid. Information about your licensed user and reviewer counts is now shown in the page’s footer. If you’re a Billing Manager, the Manage Entitlements button will take you to the Billing Info page so you can adjust your user count.

Here’s what it looks like:

Account Settings

Account>Settings has been moved up a level to Account Settings. The content remains the same.

Billing Info (visible by Billing Managers only)

Account>Billing has been moved up a level to Billing Info. The Billing Info page now has a link labeled Need Help Changing? which leads to detailed help on managing your user entitlements.

Inside Projects

Once in a project, things are a little different, too. Here’s the changes:

First up, the Site Map now has a trash can! Yay! Previously deleting a page was not recoverable. Now pages are first moved to the trash, then the trash can be emptied whenever you want. To recover a page, simply drag it out of the Trash.

One of the biggest changes is to the View Design mode. This mode was kind of an afterthought when we originally made ProtoShare, but we decided to beef it up after hearing from so many customers that this was their preferred mode for reviewing wireframes.

View Design mode now has a toolbar at the top to allow easy access to ProtoShare functions you may want during review:

This toolbar can be collapsed using the X button to completely remove the ProtoShare UI. It can then be expanded using the ProtoShare icon that appears on hover, as seen in the animation below.

The toolbar contains toggle controls for the Site Map pane, the Discussion/Annotation pane, the Filmstrip pane, Discussion pin overlay and Annotation pin overlay. Also there is button to place a Discussion pin or Annotation pin (if you are a Developer). This button will put you in single-click pin placement mode. Just click where you want a pin to go. No more creating a pin and dragging it out of the upper-left corner.

Once we moved these buttons to the toolbar in View Design mode, we thought it made sense to move them in the Prototype mode as well, so the Prototype toolbar now looks like this:

Another difference is the right-hand Discussion/Annotation pane is now closed by default. If you click on a a discussion or annotation pin, the pane will automatically open. This gives you a little more space for the default view.

We use ProtoShare as part of our daily routine and I have to say, once we put these features in place, it just felt right. I’m sure you will feel the same way. The release is scheduled for this weekend. Once you have a chance to try out the new features, leave a comment here and let us know if you like them, or what you would like to be different. Thanks!

Six Killer Workflows Using Multiple Page Designs

Peter Uchytil — Tue, 23 Feb 2010 04:38:56 +0000

A powerful feature of ProtoShare is the ‘Multiple Designs per Page’ filmstrip, located in the Prototype section of the tool. The options available are: Wireframes, Comps and Live Views. All of these options are actually wireframes. The Comp is a wireframe with a single image component, and Live View is an iFrame component that pulls in a live website.

Wireframing and prototyping are used to gain project clarity and make informed decisions. To that end, here are six ways I use the ‘Multiple Designs’ filmstrip in my own work, whether collaborating on the building of ProtoShare, or working on personal web projects.

Versioning Prototypes

When prototyping, I like to version my work. When I am about to make a major set of changes and I want to preserve the current design, I use the New > Duplicate function in the filmstrip to make a backup copy. Once I have multiple designs, I need to choose which one to show when navigating to the page. This is done by selecting the design and pressing the Make Active button. The active design will have the star badge. I often end up with four or five designs on a page that shows the progression from low to high fidelity. Sometimes I want to extend someone else’s idea, but I don’t want to overwrite their work. Duplicating their design to create my own version not only allows me to use previous work, but it also allows me to keep similar ideas grouped together.
Comparing Ideas

In the design work I do, I end up comparing a lot of materials to each other. This can involve Wireframes, Comps and even Live Views. In ProtoShare, I can compare these different options to each other at the same time by using the filmstrip. I might even ask other developers to collaborate with me and create concepts of their own. Some designers are more comfortable with Photoshop than a prototyping application, and since the filmstrip supports multiple design types, comparing Photoshop comps with wireframes is a snap! The end result is ideas get discussed, decisions documented, and the project keeps moving forward.
Idea Scrapbook

When I start working on a web site, I like to collect samples for inspiration. It might be a color scheme, a layout, or a specific control (www.patterntap.com is great for this). Sometimes it’s not even another web site. It might be a picture, or there might be an article that I want to bookmark to remind myself of something. The filmstrip is perfect for this. I create a page in the site map called “Inspiration” and then load it up with Comps and Live Views of things I want to refer back to. This is especially useful on longer projects where you might have several days between work.I also use this as a way to elicit comments out of stakeholders. I’ll ask them what sites they like and put those in the filmstrip. Then I’ll ask them to comment on what works for them and what doesn’t. I find that this really accelerates the early phases of a project.
Monitoring Development

One part of developing web sites that I used to hate was constantly emailing people links to the development site. Stakeholders need to see the work-in-progress and I often need their input or approval on something. The URLs associated with development sites usually aren’t the most obvious, which means emailing the same links to clients time and time again.With ProtoShare, when I start doing the actual build, I simply add Live View designs to the same pages I used for the wireframes and set these Live Views to be the Active Design. This way the client goes to ProtoShare just as they have done for the design phase. They can monitor the progress and ask questions, all in the same interface they have been using. And, if (okay, when) they want changes to something that will delay the project, I can easily refer them back to the discussion and decisions that were agreed to in the design phase because all that information is in ProtoShare. It makes the whole development process much smoother and I can concentrate on building the site. I highly recommend this workflow!
Metadata

When doing a design project, there are usually constraints. Too often those constraints live somewhere other than the design environment and I find if I’m not diligent, I forget something. In ProtoShare I create a large Rich Text component in the first design of the filmstrip to capture the goals and parameters of the page I’m building. This way I can refer back and make sure I’m still on-track with objectives. Very helpful. I’ll also use these “metadata designs” for things like important decisions or conclusions. Even sign-offs can be tracked with an extra design. Anything that makes information more accessible is a good thing.
Include a Survey

Prototyping is all about getting feedback and making decisions before committing to development. Sometimes I want general comments, but often I need to know the answers to specific questions. ProtoShare doesn’t have a good way to collect this kind of structured feedback (yet), but you can come close by including a survey as a Live View. To get the feedback I need, I use various survey utilities (like Survey Monkey, Survs, a Google Docs form, etc.) to create sets of questions relating to the ideas in the filmstrip.

And these are just some of the ways I use multiple page designs. Do you use them? Do you have workflows I didn’t cover here? Leave us a comment and let us know!

Create & Add Your Own Components in the Sandbox

Peter Uchytil — Tue, 03 Nov 2009 04:56:49 +0000

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”</code>
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//. 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.

Bugfixes and Usability Enhancements

Peter Uchytil — Thu, 08 Jan 2009 18:31:45 +0000

Some things just can’t wait for formal releases. Case in point: the Review frame in ProtoShare 2.5 now auto-sizes to the size of the wireframe content. Previously, we just made the Review frame “really big” so everything would fit. Two problems with that: 1) scrollbars are always present, 2) what we considered really big wasn’t as big as some of our customers thought it should be. Even worse, we didn’t have the Review frame synced with the Edit frame, so you could make a bigger wireframe in the Editor than you could see in Review. Oops.

After some attentive Protoshare users alerted us to the issue, our engineers went right to work on it. They found a fix that is easily deployed so we wasted no time in pushing it out. It is live now, and fixed. Wireframe away!

UPDATE, 9 Jan: Our engineers have been busy this week.

In addition to the Review frame fix mentioned above, they have also fixed:

An IE bug related to comment-pin placement.
A bug where the drop down menus from a navigation component were hidden behind content when the navigation component was in a template.
Added auto-scrolling when dragging comment-pins onto the Review frame. Now, when you drag to the edge of the frame, it scrolls automatically. A big time saver.

All of these fixes and features are now live. Enjoy!