Having Fun With a Great Idea

I can’t remember the last time I had so much fun working on a weekend. This happened when I had the good fortune to be a participant in the UX For Good’s UXXU 2011 design challenge about a week ago. I got to spend two days with some really smart folks trying to help solve some very serious social problems. It was time well spent.

My challenge team got to partner with the Adler School of Professional Psychology to develop a plan to better engage their students, faculty, and city with their mission of advocating a community-based approach to addressing mental health issues. For two days we delved into the challenges the Adler School faces and brainstormed on short- and long-term solutions.

Did we solve the problems? No. But did we expect to? Not really. To be honest, these are some fairly complex social problems that are way beyond the ability of 100 or so dedicated people to resolve in 48 hours. There have been critics of what we did, but they totally missed the point. Instead of rebutting I’ll let Cia Romano’s thoughts make the case.

So what did we accomplish? I think we showed the five non-profits that short exercises in brainstorming can be extremely productive. We showed that tapping engaged and passionate people who may lack in-depth domain expertise but have a knack for quickly ferreting out the details of a situation can be a beneficial exercise. We showed that opening discussions about a problem to a wider audience can yield fresh ideas.

Is this approach how the social ills these groups are fighting will be solved? Probably not, at least not by itself. But can it be part of a larger recalibration of how we address problems that have been so seemingly intractable for so long? I certainly hope so. And that is success.

Note: UX for Good will in New Orleans next year. I can’t think of a better place to move this idea forward.

Yahoo Bus Stop Derby

Now this is just fun and cool and engaging.

Yahoo recently rolled out a marketing campaign for its mobile apps called Yahoo Bus Stop Derby that lets people at 20 San Francisco bus stops play games against each other. The derby features four games played on 72-inch LED touch screens at the bus stops. The games allow people to indicate the neighborhood they live in for an added element of citywide competition. The campaign ends Thursday and the winning neighborhood wins a concert by the band OK Go (North Beach was winning this afternoon).

Further proof that the convergence of wireless and multi-touch technologies is changing everything.

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.

SUS Calculator

I recently used the System Usability Scale on a graduate school project and wanted an easy tool for calculating scores. Since I hate doing manually anything that will be done repeatedly, I took the time to create a simple SUS calculator in Excel.

The spreadsheet is available for download from Google Docs.

For more on the SUS itself and how it is calculated, take a look at this article on Wikipedia.

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.