This year’s event hosts an all-star lineup of visionary speakers, including Nathan Shedroff (author of Make it So and Design is the Problem), cyborg anthropologist Amber Case, Thomas Wester of Second Story Interactive Studios, Jeff White of Industrial Light & Magic, Thor Muller (author of Get Lucky), and more!

ProtoShare WebVisions Discount:  Select the Association Member rate with the code “PROTO” when you register.

WEBVISIONS PORTLAND
May 16-18, 2012
Oregon Convention Center

The event kicks off with Studio Tours, film screenings, a Hackathon for Social Good, the Business Innovation and Education Lab and networking parties galore. And of course, a full day of individually priced workshops followed by two days of sessions, keynotes and panels.

Founder and CTO Andrew Mottaz will be hosting a roundtable discussion on Lean UX in the Main Hall on Thursday, May 17th at 12:30pm. Come learn about Lean UX or share your own experiences to benefit your peers.

There are many reasons why you may want to use Live Views. Here are a few that we love:

• Current website / web app updates
  Need to make some minor adjustments to a published site? Just pull in a “live view” of the site and overlay the changes you want. Solicit feedback from stakeholders to validate the edits and use the prototype to communicate those edits with developers.

• Inspiration for a project
  If you’re team is in the research stage of a new website or mobile app project, you may want to share examples of other site functionality, an app’s intuitive interface, or creative inspiration. Add live views of these examples as separate designs of a page and share with your stakeholders.

• Tracking works in progress
  Use ProtoShare Live Views to bridge the gap between developers and clients or other stakeholders. You can track progress or compare the development site to the wireframes by pulling in the live view of the dev site.

See our video below (no sound, just step-by-step instructions) on how to use Live Views in ProtoShare for your wireframing projects.

If you have other tips for using Live Views, share them with the community in the comments.

Here are features and capabilities you can expect from ProtoShare 6.2:

Mobile Prototyping

• Pre-configured mobile screen guides for popular mobile devices (both portrait and landscape views)
• View-on-Device feature – link your browser and your device to test a prototype directly on the device, then provide detailed feedback in your browser
• 2D and 3D animated transitions to simulate native applications with greater fidelity
• Access mobile stencils from a central resource

Other Updates

• Hi-res support for the Smart Image component
• New Link Mode in the Editor – quickly draw invisible links on design comps to create clickable design mockups
• New State Value Name component – show the active value of a state to explain what’s happening on a given page
• Add profile pictures and job titles to personalize your user account
• Container scrolling – easily simulate scrollable regions and panels
• Removed inactivity timeout – ProtoShare will attempt to keep you logged in as long as your browser window is open, regardless if you are actively using the application

The finishing touches are being placed on this release, so stay tuned for the official release announcement.

Also, we’re looking for current customers to beta the new release. 10 slots available. Contact Andrea at advisoryboard [at] protoshare.com.

Here at ProtoShare, we talk a lot about the prototyping process and how important it is to work out your ideas to get feedback prior to coding. What we don’t talk about a lot is the ability to use (and benefit from) clickable design mockups during the prototyping process. From grey-box wireframes to high-fidelity prototypes and documenting decisions, there is a lot you can accomplish in ProtoShare – and creating clickable mockups has always been something even non-technical users can do quickly and easily.

Let’s first look at Kowitz’s process and then discuss how it relates to ProtoShare:

1. Set a deadline
2. Design a flow
3. Mock up each step in high-fidelity
4. Write up a prototype
5. Show it to people

Depending on the size and complexity of your project (a 5-page website vs. a 30-page website with multi-step application elements), you may follow several variations of this process. The first step is pretty self-explanatory; just remember to be reasonable in your time estimates. In our experience, when it comes to designing flows for your site or application, it’s likely that you’ll go through several iterations with your team and/or client. Collaboration at each step ensures you’re headed in the right direction before moving to design.

In Kowitz’s process, Step 3 refers to mocking up the flow with high-fidelity designs (not functionality), so this is where your designer’s talent comes into play. You’ll then take those designs and create an interactive prototype from them. This is something quite easy to do in ProtoShare. As an Editor, simply create images from your design files and drag them from your computer directly to the canvas or Page Tree. Then add hyperlinks, navigation, or functional components over the images to create the prototype. Finally, share the clickable mockup with a sample of end users and conduct user testing.

Is creating clickable design mockups (or “clickable comps” as we refer to them) really all that new of a concept? Of course not.

I have the opportunity to speak with a lot of our customers and learn about their processes on a regular basis. Not everyone marries their wireframes to the design in this fashion prior to sending the design and requirements to developers to build the final product. For them, design is just the next step in the process after creating and validating prototypes. Some even jump from planning straight into design. While jumping into design isn’t our recommended best practice, it works for some people and projects. However, if the website or application design has a big impact on functionality or if you need to test the design and interaction flows with end users, creating clickable comps is a great way to iron out additional wrinkles before handing off the requirements to the development team.

Because successful website and application projects are contingent upon good communication between stakeholders during each step in the development process, bringing design together with the prototype is becoming a popular workflow. Look for updates over the next several weeks as we work to help enhance this workflow in ProtoShare.

Got tips on how you use design comps in your process? We’d love to hear about them in the comments below!

Watch our brief video on how easy it is to create clickable comps in ProtoShare:

There are several takeaways worth mentioning:

• It’s never too late to rediscover your creative side (after all, it is the industry in which we work)
• Iterative problem-solving – aka iterative prototyping – uncovers the best solution (just because your first idea solves a problem, doesn’t mean it’s the most appropriate solution)
• Collaboration / teamwork really is required to come up with ideas and find the best ones
• Collaborators are all equal (until, of course, the decision-maker deems the best solution has been achieved. Otherwise, when would the prototyping cycle end?)

Prototype for a Flexible World

The interactive/digital development industry has learned how important it is to wireframe and prototype web applications to not only create the right product but to also create a better experience for users. If you can’t plan for a mobile experience you can’t develop a usable product.

ProtoShare for Mobile Prototypes

To help you develop better user experiences, ProtoShare now gives you the ability to export your website prototypes for mobile viewing (not available with ProtoShare Lite). When following your normal export process in the application, select the option for Mobile Browsing
(  ) and then export to web. Right click on the ‘Browse’ link, and IM or email the link to the mobile phone. Once you’ve accessed the prototype on the phone’s browser, stakeholders and end-user testers can experience links, pop-ups and other mobile app simulations to give you and your team insight to build the final project.

Below is a quick video to demonstrate.

11/11/11 Update:

Per customer request, I am providing you with URLs to my mobile web exports so you can copy and send them to the corresponding mobile devices to see the prototype in action. Please note that the dummy prototype I have created is not for a particular application and is very rough. The app prototype is simply an example to demonstrate the difference between the standard web prototype size and “fit to mobile”.

Any adjustments I made to the prototype for each platform’s aspect ratio were primarily by increasing or decreasing the size of the components and readjusting their positions on the canvas. Due to image constraints, the iPad prototype shown is the only one with additional features to fill up some of the expanded space.

Do you need to create a prototype for each platform you are ultimately designing for? I would say no. Websites should have a PC and a mobile version, but I recommend creating only one mobile version (iPad, iPhone, or Android, etc.) to test sizing, design and placement when prototyping. The only time I would create multiple versions is if, for example, the iPad app will have different functionality from the iPhone app, then prototype both versions. (And this is a great reason to use multiple designs under Parallel Prototyping.)

The reason you are prototyping is to test the interface, uncover questions and ambiguities, and make adjustments to the application or website’s requirements before giving it to the programmers.

Not formatted to fit mobile – 1024 x 600
Nook & Galaxy Tab formatted – 1024 x 600
HTC & Nexus formatted – 800 x 480
iPad formatted – 1024 x 768
iPhone formatted – 960 x 640

Hopefully this gives you a better idea about the Export to Mobile function. Let me know if you experience any problems with the prototypes in the comments below.

A big theme for us this year is “collaboration”. Look for Andrew Mottaz’s round table on the Good, Bad & Ugly of Web Collaboration and sign up to swap war stories, successes, and lessons learned working with internal development teams and clients. This round table will prove to be a truly fun and educational experience. (Tip: best/funniest story wins a prize!)

We look forward to seeing you there. And feel free to contact us in advance to set up a meeting time if you want to chat collaboration, ProtoShare, or the development process in general.

Registration is free, so don’t be shy.

We evangelize how important early collaboration is with your team and other stakeholders during the prototyping and development process, but Hawley goes into detail on how to harness stakeholder feedback for maximum benefit.

“Generating consensus and buy-in from stakeholders is a key to success for most design projects….[and] Good designers understand how to provide a meaningful critique of creative ideas and recognize what level of feedback is important at various stages of the design process.”

I couldn’t agree more. Design and UX professionals should share mockup concepts early – before they’re 100% refined and pixel perfect. While you may be the expert on user experience, stakeholders are the experts on their product, company, or being an “average” user and can share insightful feedback before you spend too much time and energy running downfield to the wrong end zone.

But, as Hawley describes in his opener, getting stakeholder feedback can be frustrating or lead you nowhere. You need to tell them what kind of feedback you’re looking for with every iteration and ask the right questions. Hawley’s 5 Steps to Better Stakeholder Feedback (about halfway down the page) is a good list to keep handy.

What I would add to Hawley’s article are these three points:

• Engage your stakeholders, don’t just throw them a bunch of flat, paper wireframes and expect them to know what everything means (even if they are somewhat technically savvy). Avoid ambiguity by prototyping complex interactions so stakeholders can see what you’re talking about instead of reading what the proposed interactions are in words.
• Remember, feedback is an iterative process. Start with basic concepts to solve a few queries at a time. You don’t want to overwhelm reviewers with too many questions. You also don’t want to present too many assumptions in the first pass. And as Hawley points out, ask specific questions. Seed the prototype with questions that you want answers to and direct reviewers to answer all the questions listed on pages x, y, and z. (ProtoShare does a great job facilitating this!)
• Store feedback in a single location. A few Post-it notes here. A phone message there. Email buried upon email. It’s easy to get lost in the pile-up and miss important thoughts. In tools like ProtoShare your stakeholders can leave pin-pointed feedback directly on the wireframe or design so you know exactly what they’re referring to. They can also leave feedback in their own time. Having this single repository is a great way for you to add notes or responses while in a meeting with others. And you can always go back and review all previous comments, recall how and why decisions were made, and close discussions when you’ve come to a decision.

Long-time ProtoShare customer, Elevated Third (a full-service interactive agency based in Denver), recently upgraded their account to the latest version of ProtoShare (ProtoShare 5 released earlier this year) and shared their reaction to the changes (video demonstration included!). Thanks, Judd, for sharing this information!

Overhauling our application was a big decision on our part and, we think, totally worth the time and effort to get it out the door. If you missed it before, here is CEO Andrew’s post on the topic.

It’s always great to hear from customers who appreciate our efforts to continuously improve ProtoShare and make your jobs easier.  We love hearing from you.  If you have a review of ProtoShare or a feature request, don’t be shy.  Let us know!