Balsamiq for Google Chrome

If you work in an agile environment you’ve probably heard about the practice of “designing in the browser”. It’s a great way to design where you pair a UX and visual designer and let them execute their ideas directly in code to instantly see what it looks on any device.

Wireframe Created with the Balsamiq Chrome Extension
Wireframe Created with the Balsamiq Chrome Extension

Well here’s a way you can wireframe in the browser. Balsamiq Mockups now has an extension for Google Chrome that lets you build sketchy wireframes in the browser and save them to your Google Drive. You can also share them with other Google Drive users and edit them collaboratively.

You create your wireframes using the familiar Balsamiq widget set; you just do it the browser. Mockups can be saved to Drive as BMML or PNG files. Both can be downloaded, and the BMML files can be edited in your Balsamiq desktop software.

The extension is available in the Chrome Web Store. It comes as a 30-day free trial and you can get a single-user license for $5 a month or $50 a year.

While the Chrome extension is a useful tool for small teams and academic groups, you may need the more robust features for project management and collaboration offered in the myBalsamiq web-based product. But the Chrome extension is a great example of Balsamiq’s flexibility and shows how Google is turning the browser into a robust application environment. Enjoy!

Book Review: Axure RP 6 Prototyping Essentials

Published: January 2012 (Packt Publishing)
Paperback: 446 pages

I just finished reading the first book I’ve ever seen devoted exclusively to user experience design using Axure RP 6. Axure RP 6 Prototyping Essentials by Ezra Schwartz takes readers through project examples with step-by-step instructions for creating highly realistic interactive prototypes without writing a single line of code.

Unlike other prototyping books that address multiple tools, this one is focused solely on Axure.

Axure RP 6 Prototyping Essentials
Axure RP 6 Prototyping Essentials

Annotated Screen Example
Annotated Screen Example

Schwartz’s book introduces using Axure to create simple website wireframes and prototypes before moving on to more advanced topics like:

  • Using session-persistent variables in simulations
  • Using raised events
  • Conditional logic and behaviors
  • Dynamic panels
  • And much more

The book even addresses topics like simulating keyboard shortcuts for desktop applications through a technique that leverages hidden form fields. It is full of clever and well-illustrated examples.

There are also entire chapters on generating specification documents, using the team collaboration features of Shared Projects, and creating custom UI widgets for shared pattern libraries. There also is a brief section on prototyping for mobile devices (an area of functionality that has been improved in the recent Axure 6.5 Beta).

Axure RP 6 Prototyping Essentials also addresses important areas of the prototype planning process like object naming conventions and other things to consider if you are building highly interactive prototypes or working on a team project. While developers will understand why you need naming conventions for your objects, it’s not something UX designers usually think about, especially if they are more experienced with producing static wireframes. The coverage of pre-planning activities is extremely useful if you are new to Axure.

The book is available in both e-book and printed formats and is a great starting point if you have little to no familiarity with Axure. You’ll quickly see why Axure is one of the most widely used software tools for user experience design. A word of warning — it is helpful if you are familiar with the user centered design methodology and its focus on iterative designing and testing, which is discussed in the first chapter.

Whether your skill level with Axure is novice, intermediate, or advanced, you’ll find valuable techniques and best practices in Axure RP 6 Prototyping Essentials.

Sketchcamp Chicago

Work faster, not harder.

That was the message last week at the inaugural Sketchcamp Chicago conference. The one-day event, attended by about 75 UX architects, designers, and strategists, focused on tips and techniques for using sketching as a lightweight tool for user experience design.

Greg Nudelman's Amazon Sketches
Greg Nudelman's Amazon Sketches

My Amazon iPhone App Sketch
My Amazon iPhone App Sketch

In an exercise lead by Greg Nudelman, author of Designing Search: UX Strategies for eCommerce Success, participants were shown wireframes sketched on 3″ x 5″ Post-it notes of a search path on Amazon’s iPhone app. Nudelman then had us spend a few minutes sketching our own approaches, which included carousels, a scrollable gallery of images representing product categories, list drilldowns, and free text searches àla Google.

By the end of the exercise at least 7 different approaches were identified, showing that sketching allows for the quick expression of ideas without the encumbrances of tools like Omnigraffle or Visio. Attached to this post are Nudelman’s Amazon sketches and my take on using a carousel to represent product categories. My approach was far from optimal, but that illustrates the theme of the conference — sketching allows you to get ideas out of your head and into the world where they can be explored, refined, or discarded.

Another speaker discussed storyboarding as a way to communicate customer value to business stakeholders.

Digital and industrial designer Craighton Berman showed how he uses storyboards to illustrate user engagement and benefits in ways that a standard business plan cannot. The strength of storyboards is their ability to visually show how a product could benefit consumers in real-world situations and how well-designed products can create an emotional attachment for the people using them. Try communicating that in a spreadsheet. If a picture is worth a 1,000 words, a good storyboard may be worth 10,000.

Here are a few resources I’ve used for sketching user experience design:

Happy Sketching.

iPhone Stencils for Visio

I recently found a great set of stencils for wireframing iPhone apps and mobile websites in Visio. The stencil set was created by Jonathan Abbett of Beacon 16 and is available under a Creative Commons License.

The stencil shapes include:

  • iPhone
  • Navigation Bar
  • Search Bar
  • Browser Bar
  • Four and Five Button Tab Bars
  • Keyboard
  • Date Picker
  • More…

If you need a higher fidelity GUI design toolkit for iPhone and iPad, Speckyboy Design Magazine published a great list of resources last year. If you need to illustrate touch gestures in your wireframes, Luke Wroblewski maintains a Touch Gesture Reference Guide on his website.

iPhone Stencils for Visio
iPhone Stencils for Visio

The Right Tool at the Right Time

Someone on the Interaction Design Association’s LinkedIn group recently asked how other people were using wireframes at work. This inevitably led to the age-old question of what is “the best” wireframing tool. Not only is there no best tool, but it’s not really a good question to begin with. The question should be what tools are best for the different phases of a design project.

For example, I use iRise on my job at Cars.com. iRise is an extremely powerful prototyping tool that allows you to build dynamic prototypes with real data records behind them. It’s one of the best prototyping tools available, but it’s also time intensive to use and not geared toward the early exploration of ideas.

For early product ideation the good old sketch pad or white board still work best. Sketching is fast, cheap, easy, and accessible to your business partners so they can participate in design exercises.

Balsamiq is also great for rapid idea generation, but you need to have a computer handy with the software installed. And it won’t work for impromptu design sessions in a conference room or coffee shop. The mechanics of working with the program can get in the way of the creative design process.

OmniGraffle and Visio have their place when you need to create annotated wireframes that can be easily printed or shared electronically. Where wireframing fails is in showing interactivity. To demonstrate rich interactions using Ajax or HTML5, it’s probably best to code it in HTML or create a quick Flash prototype.

And, of course, time and financial constraints will also influence what tools you use. For a more comprehensive look at the many wireframing and prototyping tools available, see Holger Maassen’s recent post on UX4.com.

Design Tools for iPad

Apple’s iPad has been out only a few weeks and already clever software developers are building design tools for this amazing new platform.

The Omni Group, makes of the popular OmniGraffle wireframing tool, have released OmniGraphSketcher for iPad. Priced at $14.99 in the iTunes App Store, OmniGraphSketcher allows you to create attractive charts, graphs, and other data visualizations on the iPad.

And Endloop, a Canadian iPhone/iPad development company, has released iMockups, a wireframing and diagramming tool for the iPad. Available on iTunes for $9.99, the app allows designers to create Balsamiq-like wireframes using their fingers.

I haven’t used iMockups but Endloop says in its blog that upcoming features include snap-to grid lines, a border and background color picker for UI controls, improved customization of UI controls, additional UI controls, more icons, and the ability to export to email, XML, or PDF. iMockups gets a 3-and-half-star rating from users in the iTunes store and the few reviews there comment about the app not being 100% ready yet.

It will be interesting to see how OmniGraphSketcher, iMockups, and other diagramming apps for the iPad add to the collaborative design process. For now I’m still keeping my sketchbook handy, but this could be the first wave of exciting new additions to the interaction design toolbox.

[youtube=http://www.youtube.com/watch?v=LOyIVqJcGfc]

Designing in Excel

I’ll admit Microsoft Office is not my favorite place to spend time, but while working on a design project last week I discovered the ease of prototyping and wireframing using Excel. It won’t get me to stop using Visio any time soon but there may be occasions when Excel is a faster tool for certain projects.

I was working on a set of screens for a business-facing reporting application for a B2C site and had to work with a lot of charts. To make the screens more realistic, I was creating charts with dummy data in Excel and then moving them to Visio for the wireframes. After talking to a friend I decided to create the wireframes right in Excel.

Here’s how it works. First, use the Formatting Palette to turn off gridlines and get yourself a blank page. I used a screen grab of a long form to create all the input widgets I needed for the interface and put those off on a tab by themselves for quick access. Airline websites are a good place for this since some have nice calendar widgets.

I then used another tab as my data tab, which made cranking out the charts pretty easy.

Finally, for each page or screen of the reporting tool, I used a different tab. Giving each tab a unique name (which Excel requires) makes it possible to link to it from other tabs. Using background shading, borders, and links, I was able to create a serviceable set of tabs for the main navigation. Individual cells can be given a border and background color to create buttons. And adding the links means the wireframes could be the start of a prototype when I move to the testing phase. Excel even allows you to save as HTML, much like Visio, to create a set of HTML pages with your designs embedded as images.

The main drawback I encountered was the rigid grid layout imposed by the rows and columns. I had to scrap a few things until I got it right, but think I saved time overall from the Visio+Excel approach.

I’m not sure I’ll use this technique again unless I’m designing a chart and data heavy site. In those cases the time saved may make it worthwhile. If nothing else, I got to explore a different design approach when the favored tool had limitations.

While Googling around on the topic before writing this I came across this book at Amazon – http://tinyurl.com/dfvtb2. I may pick it up to see what more you can do with Excel.