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!

Axure for Mobile Prototyping

I recently developed a small prototype for usability testing of some new mobile website functionality using Axure RP Version 6. Here are a few things I learned:

  • If possible, use Axure RP Version 6. It has mobile settings under the Generate Prototype menu that will save you from having to manually add to each page the HTML viewport meta tag every time you generate a new prototype. Screen shots of the settings panel are at the bottom of this post.
  • Generate separate viewport tags for iOS and Android browsers like below:
    1. iPhone: <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=2.0, user-scalable=yes"/>
    2. Android: <meta name="viewport" content="width=480, target-densityDpi=device-dpi"/>
  • For iPhone, you can design your prototype at 320 pixels wide for older devices. iPhone 4 will scale it up to 640 pixels wide so the prototype has the same appearance no matter what version of the iPhone your participant is using.
  • For Android smartphones, design the prototype at 480 pixels wide. Tablets are another story and my testing did not include them.
  • To create accordion effects on interface widgets, a common design pattern on mobile websites, you can use Dynamic Panels and Axure’s OnShow event with the Move action. See the advanced dynamic panel tutorial on Axure’s website.
  • If you are opening the prototype on an iPhone from a home screen icon and want to hide the URL bar, use this meta tag:  <meta name="apple-mobile-web-app-capable" content="yes"/>
  • Test on as many target Android devices as you can. The Android viewport tag worked on most devices I tested, but not all. The differences in Android pixel density and screen resolution necessitate more testing than is needed with Mobile Safari on the iPhone.
  • Keep in mind you are building a prototype. It doesn’t need to work perfectly on all devices if you can just ask the test participant to zoom in during the session if needed. You should be explaining that they are interacting with a prototype as part of the test script so this should not be a problem.

For more on the iOS viewport, see Apple’s iOS Developer Library.

For more on targeting different screens size on Android, see the Android Developers Site.

Axure Settings for iPhone
Axure Settings for iPhone

Axure Settings for Android
Axure Settings for Android

Drop Shadows for Menus in iRise

Sometimes you just want your menus to have a drop shadow. So in an effort to push the fidelity of an iRise simulation to a higher level, I recently created a simple menu Master that uses sections to display the kind of drop shadow you’d normally handle with CSS3. It was a little more labor intensive than CSS, but fairly easy to do once the menu bar was laid out.

To make the menus as easy to maintain as possible, the drop shadows are applied in the Master and the shadow color is handled in the Style Manager. Mouse events are used to toggle the drop shadow sections on and off with their associated menus. The screen capture below shows everything you need to know to mimic the effect of CSS3 drop shadows. And if you wanted an even richer display using rounded corners and a gradient drop shadow (like Mac OS X) , a transparent PNG could be used.

Creating Menu Drop Shadows in iRise Studio for Mac
Creating Menu Drop Shadows in iRise Studio for Mac

iRise for Mac Alpha Testing

I recently started testing iRise’s Studio for Mac alpha release.

For the most part the interface is consistent with the Windows version. I was able to create projects in both Mac version 8.7 and Windows version 8.6 and open and modify them in each other. The Mac version has support for iBlocs, although the interactions for setting widget properties was a little wonky and unintuitive at first (at least for the iframe iBloc I tested). Datasheets, masters, and other functionality was working as expected.

The biggest bug I encountered was hidden fields not passing values in both Safari 5.0.5 and Firefox 4.0. This is a major bug for me because I frequently use hidden fields to pull datasheet values on to a page without displaying them and then pass them through to other pages on link or button clicks to maintain state within a simulation. Hopefully this one gets fixed soon. The other major functionality missing is no connectivity to the Definition Center, iRise’s central repository for shared projects. This is completely understandable as I imagine the development team is focused on getting Studio stable before tackling Definition Center.

All in all, I’m impressed with the alpha so far and am glad to see iRise finally adding support for the Mac.

iRise For Mac
iRise For Mac

Marty Cagan and Designing Great Products

Last week I had the good fortune to spend two days learning about designing great software from Marty Cagan of the Silicon Valley Product Group. Cagan’s approach to creating great consumer software products comes from years of working on wildly successful ones, such as Netscape, AOL, and eBay, and is a radical change from the traditional approaches many companies still use.

Cagan’s two-day seminar presented the topics raised in his 2008 book Inspired: How To Create Products Customers Love along with advice tailored directly to the audience, in this case my company, Cars.com.

One of the key aspects of Cagan’s approach is a focus on a core working relationship between the product manager, the lead engineer, and the lead interaction designer supporting a product. His method places heavy emphasis on a great user experience as a key part of making software people really want to use. He also advocates delegating product design decisions down to the product manager and empowering that person to make the right choices, while people managers and other leaders are tasked with doing what needs to be done to develop their product teams so they can be trusted to execute.

The book is a quick read and well worth the time as it opens up a new way of thinking about product management and software design.

Axure: Mac to Windows and Back

I’ve recently been testing how well Axure RP handles project files that are moving back and forth between Mac and Windows.

The initial results have been pretty exciting. All the interactions and conditional layers added on one platform are preserved when editing the project file on the other platform.

Since Axure released version 5.6 for Mac in April this popular prototyping tool can now be used by teams that are split between Mac and Windows users — perfect for a team in which the visual designers use Macs while the UX folks and developers use Windows. Shared projects can be accessed by both platforms for file versioning and page check-in/check-out.

Below are screen grabs from Mac OS X 10.5 and Windows 7. These are from the Movable Web reference project I’m building that will attempt to implement as many of Axure’s features as possible on a fictitious website/blog focused on mobile applications. More on that later this summer.

Axure’s license is user based and allows two installs, which is how I use it on Mac and Windows 7. And the license includes a 30-day free trial so you can test drive it before committing to a purchase. If you are a student with at least a 3.0 GPA you can get a free license through Axure’s Good Student Program and UPA members also can get a discount.

Axure RP 5.6 for Mac
Axure RP 5.6 for Mac
Axure RP 5.6 for Windows
Axure RP 5.6 for Windows

Convert: Great Mobile App Using Iterative Design

If you ever needed an example of the power of iterative design you need look no further than what the designers of the Convert app for iPhone did with their amazing mobile app.

The tap tap tap team posted a video a while back that plays like a time lapse video of all the iterations the design team went through. It’s amazing to see all the choices they team went through, discarding many and making others integral to the app (see the video below from YouTube).

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

The recognition by the design team that iteration is a key part of the design process is a testament to the value of the UCD process. This app, which is well worth the 99 cents just for the exposure to the interface, is useful, elegant, and, perhaps most importantly, fun to use. But it should be, it’s the product of continual refinement of a great idea.

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.

Pageonce for iPhone

Some people may want a multi-purpose tool that makes everything they do online easy and fast, with one place to store usernames and passwords and one user experience. You know, a Swiss Army for all those accounts so they can get stuff done and get back to Facebooking or finding a job. Pageonce offers that promise – sort of – but comes up short.

I’ve been playing with the iPhone version lately to see if this mobile account aggregator satisfies the need. Pageonce allows you to connect to various account types such as financial services, travel, email and social sites like LinkedIn. Ironically, it doesn’t connect to Facebook, which has to be changed in a future version if it’s going to get any traction. Pageonce, which also has BlackBerry and web-based versions, can also connect to a few ecommerce sites like Amazon, Costco and eBay.

While Pageonce provides a single app to access all these accounts it has a major limitation – it’s read only. You can see the stream of credit card transactions and Twitter updates, but you can’t jump in. There’s not much use in that. To interact with your accounts, you have to punch out to each individual site from Pageonce. Huh? So what Pageonce locks down for security reasons – real functionality – ends up diluting the app completely. It is an interesting (and free) experiment, but not much more. It still has an impossibly long way to go before it replaces all the individual apps you can download for your iPhone and BlackBerry. Their positioning that you only have to setup usernames and passwords in one app also doesn’t mean much when you can install a full-featured app thoughtfully designed for each site and still only have to setup the password once. And I don’t know too many smartphone users who are reluctant to install more apps.

WordPress for iPhone

I’m testing the WordPress iPhone app and am finding it pretty darn intuitive. There is definitely a well-defined UI convention in apps that makes them far superior to web-based iPhone sites. Once again Apple has scored big with their app model. I’m curious to see if more website operators move to creating apps instead of iPhone versions of their sites. Of course Apple could help speed that up by streamlining the process for getting them in the App Store.