Welcome to the ProtoShare blog.

Happy Fourth of July!

Just a quick note to let everyone know our offices will be closed for the July 4th holiday.  Have a great 4th everyone!

Posted in Business | Leave a comment

ProtoShare 9.4.2 released Saturday July 5th, 2014.

We’ll be releasing ProtoShare 9.4.2 this coming Saturday July 5th.  As a point release, the updates aren’t major, but we think that there are some excellent ‘quality of life’ improvements in this release.

Rename function in Component Listing

First – we’ve added a ‘Rename’ function in the component listing.  Just right click a component in the component listing, choose rename, and you’ll be taken to the Component Name field in the inspector.  You’ve always been able to rename components using this inspector field, but as users pointed out, it was cumbersome to use, and really hard to discover.

Rename ProtoShare Component

Rename Component added to listing right-click menu.

ProtoShare rename components in the Inspector

Rename ProtoShare components in the Inspector

 

Expand/Collapse Inspector section with entire bar

In the Inspector, sections have always been expandable and collapsible using the tiny disclosure triangle.  To make things easier, we’ve made the entire section header bar clickable (except the help link ).

ProtoShare Inspector Section collapse with bar

Collapse Inspector Section with entire bar

 

Drag and Drop URL onto the ProtoShare Canvas

We’ve also changed the behavior of ProtoShare when you drag and drop an image URL from another website.  When you drag and drop a URL in ProtoShare 9.4.1, ProtoShare always creates an iframe component, and uses the dropped URL as the source.  This is true whether the URL was for a web page or an image.  With 9.4.2, if you drop a URL for a jpg, png, gif or svg image, ProtoShare will create an image component, using the dropped URL as the source of the image.  Here is a short video illustrating the change.

 

Bug Fixes

DE2026 – New state form allowed allowed state names that were too large to be saved (FIXED)
DE2024 – IE11 browser not handled properly, result in incorrect error messages (FIXED)
DE2020 – A user can delete their own user profile (FIXED)
DE1595 – Removing google analytics code from account could be inadvertently undone (FIXED)

Posted in Blog, ProtoShare Tips & Tricks, Release Notes | 2 Comments

Why should you prototype?

I was directed to an interesting blog by Scott Adams, creator of Dilbert.  In addition to writing comics, Scott works with startups in Silicon Valley.  I’ve thought a lot about the fact that software and web development projects are subject to instant, global competition.  The tech and tools and infrastructure available to build web and mobile apps has advance so much in the past 5 years, that the barriers to creating software, deploying it in an affordable and highly scalable environment are almost gone.  Today I can write a node app for heroku, deploy it on the free tier and release it into the wild.  If it takes off, I can scale it with a single mouse click.

So what makes the difference between successful businesses and projects and unsuccessful ones?  Well – Scott Adams has some answers in this blog post.

I find two quotes really interesting in this article — first:

Building a product for the Internet is now the easy part. Getting people to understand the product and use it is the hard part. And the only way to make the hard part work is by testing one psychological hypothesis after another.

And second:

Psychology has evolved to be a function of speed plus measurement. We’re nearing the point at which the best psychologist in the world is any computer with access to Big Data, and any start-up that is rapidly testing one idea after another.

For me, this drives home the need to prototype and visualize early.  When we prototype, the driving idea is to make ideas concrete and testable as quickly as possible.  Internal testing of early prototypes, user testing of more refined prototypes, and continuous iteration and exploration of ideas bring flaws, missed functionality, and new ideas into the process quickly – much more quickly than even the fastest coder can iterate.  And the process opens up this ideation and exploration phase to less-technical users.

We’ve had customers tell us that ProtoShare helped them knock 3 months off of a 4 month project.  When I hear these stories, the critical ingredient is getting involvement and engagement early from a team, and making sure that the project meets the needs of all of the stakeholders and users.  You can make many of your mistakes, and gain an understanding of the user’s psychology in the prototyping phase of a project rather than in the more expensive and time-consuming production phase.  Let me know your thoughts on Scott’s post, and get experimenting with ProtoShare!

Posted in Industry, Prototyping Benefits | Leave a comment

Prototyping using SVG in ProtoShare

So we were researching the other day exactly what we could do in ProtoShare to make better use of the facilities of SVG.  SVG, or Scalable Vector Graphics, is markup based vector graphics support for the web browser that’s supported in every modern browser, IE back to IE9, and Android from version 3 onward.   As we worked on this, we realized that we already have a good amount of support for SVG, and I thought it would be a great time to let you know how to take advantage of SVG in ProtoShare, and why you should.

As far as why you should use SVG, there are many articles you can read to answer this question.  The main thing I like about using SVG’s in prototypes is that it provides you with easy-to-use, completely scalable vector graphics.

We used SVG to create our really useful set of svg-based icons.  Because these are svg, you can scale them to any size without worrying about resolution problems, and, because SVG is markup based and can respond to scripts, you can use ProtoShare’s appearance settings to change their colors, and even add hover and click styles.

ProtoShare Modern UI Icons

ProtoShare Modern UI Icons are Scalable Vector Graphics

 

You can also use your own SVG images in ProtoShare – just drag and drop them onto the canvas, and they will show up just like any other images.  The added benefit is that you can scale them up or down without any loss in resolution!  Here’s an example with the famous SVG Tiger:

SVG Tiger

SVG Tiger

At any rate, we are looking into adding additional support, so that you can paste and script your own SVG images in ProtoShare.  If you have any thoughts on what you would like to see supported, please let us know!

Posted in ProtoShare Tips & Tricks | Leave a comment

Guide: Interacting with designs

Verifying that your designs flow and function the way you’d like them to is key when creating interactive wireframes. ProtoShare offers a variety of options for Editors to test interactivity in a way that best suits their workflow:

 

Test button found above the canvas

Test button found above the canvas

Test Mode

Test Mode is available from within the editor view and allows you to test on click events as well as hover, right click and double click events. This feature goes hand-in-hand with the different appearance settings available to you in the Inspector and also allows you to test the fly-out interactivity that is built into navigation related components. You can also use Test Mode to interact with controls like radio buttons, form fields and even the file upload component.

Run Mode button

Run button found near the Share menu

Run Mode

Run Mode is also found within the editor view and includes all of the functionality of Test Mode with the added functionality of following links. The Run button is found to the left of the Share menu above the canvas. Run Mode opens your designs up in a new browser window and the chrome or ProtoShare UI is removed. In Run Mode, you can follow custom links as well as test the functionality the links built into navigation components.

 

Share Menu

Share Menu showing the Open in Review option

Review Mode

Review Mode is separate from the Editor and is very similar to Run Mode. Functions available in Run are included in the functionality of Review with additional collaborative features. You are encouraged to create discussion topics and leave comments for other users while in Review but you can also test out your interactions as needed. Another feature that separates Review from Run is that you have access to the ProtoShare UI inside Review but you can hide it at will. You can use the Pages menu to manually select different pages or you can navigate by clicking on topics which will load the design the topic is pinned on.

 

Export

Creating an HTML Export allows you to test the functionality of designs while offline or share your designs with someone who is outside of ProtoShare. You can trigger states, follow links and interact with form type components from an HTML Export. Export options are found in the Page menu of the Pages Tab or by right clicking a page from the Pages Tab. To create an Export to Web, be sure to check the Publish To Web Option from the Export options menu. Keep in mind that any feedback will need to be collected outside the tool as the Review UI is not included in a Publish to Web export.

 

Export Options Menu

Export Menu showing Export to Web option

Best Practices

All in all, you have many options and workflows available to you while testing interactions and navigation functionality in ProtoShare. A best practice workflow may include using Test to interact with components within the Editor, using Run to test links, then moving on to Review Mode to share your designs with others. Creating an Export to HTML will be handy for any time you’d like to test features while offline or if you’d like to share your designs with a stakeholder who isn’t a ProtoShare user.

Posted in Blog, ProtoShare Tips & Tricks, ProtoShare Workflows | Leave a comment