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!

iOS Icons For Web Apps

I just created a new set of iOS home screen icons for this website. Creating multiple home screen icons allows the icon that launches your site to look professional and crisp on Apple’s retina and pre-retina displays for iPhone and iPad.

Icons: Before and After
Icons: Before and After

It’s very easy to do. Just create a set of PNG image at 57×57 pixels, 72×72 pixels, 114×114 pixels, and 144×144 pixels. Create the images individually in Photoshop and don’t just resize the largest to the smaller sizes. Create the images as squares with 90-degree corners. iOS will take care of adding the rounded edges and reflective effect.

The image in this post shows the raw PNG I created and how it looked after iOS applied its effects. You can also tell iOS not to alter your image by using the “-precomposed” option. This approach is used by a lot of sites and apps like Path and Pinterest. Apple’s developer documentation will tell you how to do that.

Once your images are created, place them at the document root of your web server. Then add the <link> tags below in the <head> section of your site’s pages. And with that you’ll have nice clean home screen icons for people who want to keep your site one tap away on their Apple devices.

<link rel="apple-touch-icon" sizes="57x57" href="/apple-touch-icon-57x57.png" />
<link rel="apple-touch-icon" sizes="72x72" href="/apple-touch-icon-72x72.png" />
<link rel="apple-touch-icon" sizes="114x114" href="/apple-touch-icon-114x114.png" />
<link rel="apple-touch-icon" sizes="144x144" href="/apple-touch-icon-144x144.png" />

The icons are used by the different devices in this way:

  • 57×57 will be for iPhone 3GS, 2011 iPod Touch, and older Android devices
  • 72×72 will be for iPad 1, iPad 2, and iPad mini
  • 114×114 will be for iPhone 4, 4S, 5, and 2012 iPod Touch
  • 144×144 will be for for iPad 3 and 4

For more information on configuring web apps, see Apple’s iOS Developer Library.

The Touchable Desktop

Yesterday I presented at UX Thursday in Chicago.

My 20-minute talk was on The Touchable Desktop – When Responsive Won’t Fly. It looked at design considerations for websites targeting desktop computers and tablets when responsive web design is not an option. Here are my slides:

 

Here are some additional resources to help you when designing for tablets and touchscreens:

The event was sponsored by User Interface Engineering.

Fitting Your Ideas In A Timebox

It might seem at first like an impossible task: giving a meaningful and informative presentation in 20 minutes. But it’s not, it just requires a rethinking of how you approach the task and what you hope to accomplish.

I got to thinking about this as I put the final touches on my slides for this week’s UX Thursday in Chicago. And I realized if you think about great proverbs or sayings you love, they often impart great meaning in just a few words. Think how powerful the phrase “Don’t make me think” is. You can say a lot in 20 minutes; it’s all in how you curate.

The first thing to recognize is you usually can’t teach practice in 20 minutes. But you can introduce theory — briefly, succinctly, and hopefully in a well-illustrated manner.

Secondly, accept that you will leave people with more unanswered questions than they came with. But take heart that they are now asking those questions. If you got them that far, you’ve been successful.

And finally, remember that almost all ideas scale up and down if you are willing to work at it. Think about the simple penny and the three little words on it: E Pluribus Unum. Simple and yet elegantly beautiful. But also an idea that surely can take many forms.

So don’t worry if you only have 20 minutes to share your ideas. Focus on how to make each minute matter.

Siri’s Apple Store Integration

Siri Apple Store Search
Siri Apple Store Search

Apple last week updated its store app for iOS to include integration with Siri for speech-based search. You can now ask Siri questions like “How much does the new iPad cost?” and “Where’s the nearest Apple store?”. Siri searches like these can land consumers on the store locator results page or product pages for iPods, iPhones, and other gadgets.

The integration is provided through Siri’s interface with search engine Wolfram Alpha. Wolfram also enables Siri to search thousands of appliance and home computer products from Best Buy. Some of this search capability with Siri was available with previous versions of the Apple Store app, so it’s not clear what the latest app version offers, except perhaps more consistent search results.

One downside of the Siri Apple Store integration is that most users (except the most hard-core Apple fans) will not know it is available. I only learned about it through blogs and tech websites. The average iPhone user may not even think to ask Siri for the location of the nearest Apple store, and may instead either launch the Apple Store app or just search the web. That’s one of the biggest hurdles to using Siri — people don’t know what they can do with it so they may not try to do much.

One change I’d make to Siri’s Apple Store integration is the terminology used for store location searches. A store location search returns a set a of results that are labeled as the stores “fairly close” to you. It would be better to label these as the stores “nearest to you”. For someone in a more rural location looking for the closest Apple store, a distance of 100 miles may not be considered “fairly close”. Or in my case, a store 21 miles from my office is hardly “fairly close”. But aside from the labeling the interface is pretty intuitive and marks a step forward for speech-based interactions as part of the overall ecommerce shopping experience.

Learn By Looking Outside Your Walls

Like most people in the user experience field I’m always looking for new ways to improve my craft. There are, of course, books, blogs, and conferences. But one of the best ways to learn about solving design problems is talking to the professionals you know at other companies to see how they are addressing the same problems you are in different settings.

This week I got to learn from a great group of UX designers and developers at the Chicago Tribune how they approached a responsive web design project targeting tablets and handheld devices. For an investment of a few hours of time (and lunch for six) a large group at my company, Cars.com, got to learn from the real-world experiences of people who had to execute a large project that would serve content and advertising to many devices, operating systems, and screen sizes. And all under tight deadlines and challenging management expectations. That “in-the-wild” point of view is often missing from more tactically oriented blog posts and “how-to” articles.

So the next time you are curious about a design topic look around your professional circles to see if you can arrange a little ad hoc knowledge sharing. You’ll probably make some new contacts and gain a different and unique perspective on the problem space.

Chicago Web Conf 2012

Chicago Web Conf 2012
Chicago Web Conf 2012

I presenting a talk yesterday at Chicago Web Conf 2012 on A/B Testing Your Designs With Real Users, focusing on the role of A/B in digital product development.

I showed at a high level how we use the A/B testing solution Optimizely where I work at Cars.com to test our designs in ways that are quantitatively measurable. Like other A/B test solutions, Optimizely allows you to quickly create and implement tests and start collecting data immediately.

In addition to showing some examples of our tests and results, I also tried to show how A/B testing can fit into a company’s larger user experience testing strategy. My goal was to leave attendees with five key takeaways regarding A/B testing:

  • It’s not a replacement for testing with individuals.
  • Small changes can lead to big improvements.
  • It takes little effort to test those changes once a solution is in place.
  • This kind of testing can take some of the team friction out of the design process.
  • It can help you get better solutions to market faster.

My slides are available (PDF format).

Jared Spool’s Prototype Camp Chicago 2012 Keynote

Jared Spool gave the keynote talk on the power of prototyping at yesterday’s Prototype Camp Chicago 2012. Here are my notes:

  • Prototyping is not just about designing products, it’s really about exploring the problems you are trying to solve.
  • When you are making products you have to focus first on the problems you are trying to solve, not on what you are building.
  • Prototypes are key elements in creating a shared understanding of what problems you are trying to solve and what you can build to solve them.
  • Prototypes are a great way to expose the differences between the vision of the perfect product that is in the designer’s head and what your team can actually build.
  • The best architects, the ones who can walk into a building and say “This is exactly as I envisioned it”, are the ones who were involved with the project throughout the journey and making changes to their designs along the way.
  • The trick to planning iterative prototyping is knowing what you are going to measure. You have to start there and then design the prototype to ensure you get those measurements.
  • The key to iterative prototyping is moving fast. Design, test, learn, change, repeat.
  • With paper prototyping you get to change the design between every test as you learn about pitfalls in the design.
  • Sketching is prototyping. It allows you to explore designs before building anything.
  • You may never make the products you prototype, but in testing them you will learn things that will influence and improve other products you build.

Prototype Camp Chicago 2012

Prototype Camp Chicago 2012
Prototype Camp Chicago 2012

I’ll be presenting a session today at Prototype Camp Chicago 2012 on mobile prototyping with Axure RP. It will be my first conference presentation and a great opportunity to share what I’ve learned about mobile prototyping with the local UX community. I also hope to learn a lot from the many smart folks who will be there sharing their knowledge.

My demonstration Axure file for the presentation is available. It was created with Axure 6.5. Consider it yours and use it as you see fit. I hope it helps you in your growth as a mobile prototyper and Axure user.

For more information on mobile prototyping with Axure, see my recent article on Smashing Magazine, in which I walk through building this demo step by step. There are links to free and paid interface widget libraries, training resources, and some great books on prototyping you should read.

I plan to demo my prototype using the Xcode iPhone Simulator on my MacBook Pro. You can save yourself some time when first building your prototype by using the simulator so you don’t have to keep reaching for your iPhone. Just download Xcode from the Mac App Store (it’s free). To run the simulator as a standalone app without ever launching Xcode, just enter the command in this file in Terminal and it will create a shortcut to the simulator in your Applications folder. You will need to test on the device as you get further along in building more complex Axure functions into your prototype, but this is a nice way to get started when creating the basic framework and navigation for your project.

Happy prototyping!

Wikipedia Redefined Project

A co-worker recently made me aware of a project by design agency New! that was a two-month exercise to redefine and redesign Wikipedia, one of the world’s most popular websites. If only we all had the time for such an interesting effort.

The New! revision of Wikipedia is online at the Wikipedia Redefined website, where the team explains the multi-faceted approach to redefining this internet icon.

It explains its motivation quite simply:

“It all started from a question: ‘If we could improve one thing which we use and love, what would that be’. We have chosen Wikipedia and called our quest Wikipedia Redefined.”

New! started with the brand, moved on to the logo and what it conveyed, and eventually drilled down into the information architecture, user interface, and UI elements like icons that make up the Wikipedia experience. New! approached the site from both the content-creation and content-consumption aspects, and even took on the Wikipedia text editor. The results are impressive.

Of course there are flaws, as there are with all design projects. Some of the icons are not immediately clear as to what they do and some of the color choices are too low contrast for people with less than perfect vision.

But remember, this is a design agency trying to show its creative capabilities. The fact they took on such a challenge should at least inspire all of us to pick a homepage or a web form or a mobile app screen we don’t like and just have a go at making it better. Those exercises would not be informed by the technical or financial realities of the product in question, but they could serve to stir our own creative juices and cause us to look at our own products in a new way.