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.

UXXU 2011: Designing for Good

UXXU Team Structure
UXXU Team Structure

I’m getting totally psyched about taking part in UX4Good’s UXXU 2011 design competition later this month. The event is a very cool idea and a great way to meet and interact with other UX and visual design pros while having fun and trying to solve some of the most challenging social problems of our world.

UX4Good was launched by the cool folks at Manifest Digital in Chicago. Hopefully there are more efforts like this in the future so we can harness all the amazing creative energy in our field. I can’t wait to see what we come up with.

Learn more about UX4Good and UXXU 2011.

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.

RIApalooza 3: A Look at the Future of RIAs

Every time I get a glimpse of the future of web and app development, I can’t help but believe the best has yet to come. I got that feeling again yesterday at RIApalooza 3 in Chicago, an insightful yearly conference that aims to advance the development of Rich Internet Applications.

Speakers included the always engaging Chris Bernard, a Microsoft User Experience Evangelist, who delivered the keynote on the future of RIAs. The big take away for me, besides Chris’ great “7 things I learned from John Hughes” segment, was the idea that to better understand and grow in the RIA space you have “go where you are uncomfortable”. His message was essentially this: if you are a Flash developer, explorer HTML5; if you are an Flex developer, explore Silverlight. Chris urged designers and developers to not let our focus on an particular development platform define us as technologists, lest we become the buggy whip makers in the next web technology revolution.

Other speakers included consultant Michael Labriola, who spoke on the major striations of internationalizing and localizing a product. Micheal’s examples were in Adobe Flex, but his lessons apply to whatever development platform you use. He examined several layers in terms of effort and return on investment to demonstrate what can be accomplished quickly, what takes up-front planning, and what fine-tuning work truly makes an application localized. If you are building for a global audience, the tips he provided were golden.

Another great talk came from Adobe’s Renaun Erickson, who demonstrated how Flex 4 could be used to build mobile apps that scale across many devices with different Pixel Per Inch screen densities without having to code device-specific apps. This is valuable if you developed an Android app with the Droid X in mind and want it display correctly in another handset with a different PPI density. This flexible development approach is also useful when handsets from the same manufacturer have different PPI densities, such as iPhone 3GS and iPhone 4. But he advised that when you think about porting an iPhone app to the iPad, it may be time to look at a separate app that takes advantages of the iPad’s much larger surface.

All in all a great day of insightful talks from some really smart people. Not a bad way to end the week.

App Store Flow on iPhone Could Be Streamlined

Normally I love the iTunes App Store, but not so much today. I was trying to add Kayak’s travel app to my new iPhone and found the experience to be full of unnecessary and redundant tapping.

This was my screen flow:

  1. Launched the App Store
  2. Clicked Search
  3. Typed “kayak” and clicked the Search button
  4. Tapped Kayak’s app on the list screen
  5. Clicked the Free button
  6. Clicked the Install button
  7. Received a prompt for my password
  8. Entered my password and click the OK button
  9. Received a message asking me to confirm I wanted to download the app since Apple had detected this was a new device
  10. Clicked the Continue button
  11. Received a prompt for my password
  12. Entered my password and click the OK button
  13. Got directed to billing page with a request to confirm all information (since this was the first time using this device)
  14. Entered credit card security code without making any other changes and clicked the Done button
  15. Returned to the Kayak screen
  16. Clicked the Free button
  17. Clicked the Install button
  18. Done

Did I really need to enter my password twice? The App Store should be smart enough to know I just entered a password when sending me to the billing information page. Normally I don’t mind having to authenticate when accessing billing information, but not when I just did it a moment ago and am finger tapping an iPhone.

Another redundant step was requiring me to tap the Free and Install buttons a second time after going through the setup screens. At that point I had gone through 36 taps, so I think I clearly expressed my desire to download the app (“Really, I do want it!”, I thought). The App Store should have just started the download.

A last unneeded step was asking me to update my payment information to download a free app. My guess is that was done to get my iPhone ready for seamless purchasing in the future, but that’s a business goal of Apple’s, not a user goal of mine. I just wanted to download a free app. Ask me to confirm my billing information when it’s really needed.

My entire Kayak download took 38 taps. Eliminating the second password prompt and the last two buttons would have cut it to 26, a 31% reduction in taps. That’s a lot in a mobile experience. Dropping the credit card setup for a free app would have removed four more taps. Luke Wroblewski stated it best in Web Form Design, don’t ask for data you don’t need to complete the user’s task at hand.

As I said before, I love the App Store. But its download flow needs some streamlining, especially in the mobile context. I’m surprised Apple missed this aspect of the store’s design given its usual laser-focus on all the small details. As Charles Eames said: “The details are not the details. They make the design.”

A Walk Through Google’s News Test

Although it’s well known Google is always testing as many as 200 changes to its user interface, it wasn’t until today that I had the chance to step into one of those tests.

When going to the Google News page I saw a new layout and a link at the top that read “Why is News different?”. Clicking the link took me to a page that explained I was taking part in a test and asked me to complete a short survey. The survey page also contained a link to a 2006 post on the Official Google Blog that explained how Google uses its live sites for testing.

The changes being tested included offering people the choice of displaying stories in topical sections or as one long list. When shown in the list view, stories seemed to by ranked by how new they were, with newer stories at the top.

Each story summary had three icons at the top right. A star icon was used to mark the story as “Starred” (a favorite). This is on Google News already. A downward pointing arrow opened a layer that allowed a story to be shared via email, Facebook, Twitter, Google Buzz, and Google Reader. And an X icon was used to “Hide this story for 6 hours”. I’m not sure the significance of the six hours or whether the story would ever appear again, but I would think people would just want to remove the story altogether. This could be one of the things Google is testing.

I noticed a few other odd things on the News page:

  • To expand a story summary to see a bit more detail you have to click the white space around it, but there’s no visible call to action and no change to the mouse pointer. You just have to discover this feature. This also may be something being tested.
  • When my news preferences were first presented there were three columns of radio buttons in which I could mark each section as being used Rarely, Sometimes, or Always. But the setup progress indicator only showed setup as complete when no category was left set to Sometimes. So even though I sometimes read Entertainment stories, I had to set that category to Rarely or Always.
  • A news section’s name changed from black to gray when I choose Rarely, which made me wonder if stories in those categories will ever show (gray being indicative of a disabled state in web apps).

So like a good community member I gave Google my feedback. Of course I’m curious what other variations of the news UI were being tested and with how many people. I assume at some point some of these changes will make it into the site (or maybe not).

Google Testing Changes to News Page
Test page for changes to Google News.
News Stories Section View
When the Section view is used stories are grouped by topic.
News Stories Expanded
Summaries expand to show more details when the white space around a story area is clicked.
Starred Stories
A view of all your Starred stories.
Setup Complete
Setup is only complete when all news Sections are marked as being used Rarely or Always.
Setup Not Complete
Setup is not complete if a Section is marked as used Sometimes.
Google News Survey
Google asked test users to complete this short survey. I did.

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

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]

A Delightful iPad Experience

With the launch of the iPad a few days ago we’ve been bombarded with countless commentaries and critiques of the user experience and potential new business models made possible by Steve Jobs’ “magical” new product. But sometimes you just have to sit back, relax, and watch someone totally engage with a product to remember why it is we UX designers live to create great experiences — we do it because it’s just plain fun.

A video surfaced on YouTube this week of a two-and-a-half-year-old girl playing with an iPad while her dad asked her to do different things. The dad, Todd Lappin, on whose telstarlogistics YouTube channel the video first gained attention, wrote that his daughter likes to play with his iPhone, but that this was her first iPad experience. While she clearly enjoyed herself, she also stumbled in a few places based on her previous experience with different devices (and who hasn’t seen that before).

The joy in this is seeing her complete immersion in the moment. She’s happy and excited not because of great UX or technical accomplishments, but because she’s having fun. It’s a great reminder of why we get up every day and do what we do.

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