Topic : Sketching

26
Oct 11

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.

Published in: Interaction Design / Sketching / Wireframes
28
Dec 10

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.

Published in: Interaction Design / Prototyping / Sketching / Wireframes
23
Apr 10

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.

Published in: Interaction Design / Sketching / Technology / Wireframes
1
Apr 09

Paper is Your Friend

Today I learned (relearned unfortunately) the value of digging into a design effort with nothing more than an engaged end user and a blank piece of paper. I’ve been working on a product management reporting dashboard the last few weeks and found myself yesterday morning sitting with a detailed set of requirements and a looming deadline. Not always what you want to see at 8 AM but I thought I could rise to the occasion with a bit hard work and a phone on mute.

I plowed straight into Visio designing what I thought were going to be a useful set of screens detailing the various performance and usage metrics of a new site I’m working on. After a good 15 hours invested in the effort over two days, I looked at my work and had the sinking feeling I had wasted two days designing an absolutely useless set of convoluted screens on par with a federal tax form. So I spent a few more hours rearranging the proverbial Titanic deck chairs before seeing that I was working too hard but not too smart. Not my best days.

So my next move was to scrap the whole effort and start from scratch. I grabbed a few end users and asked them a series of questions about how they wanted to consume the information and how they would be using it. The key point I took from our talk was not so much details of the exact data points as much as their need to consume the information quickly. They was looking for an easy-to-digest set of information that they could process in a few minutes and determine if there was an emerging problem that needed immediate attention. We quickly sketched out some very crude designs and within 30 minutes had a whole new direction. The project is now back on track and some of the users have given preliminary approval to much of what they’ve seen.

This is hardly a new insight but one we sometimes lose sight of on projects with tight deadlines because we are too focused on making progress on the actual deliverables. There are some good resources at A List Apart, UseIt.com, and at the website for Carolyn Snyder’s book Paper Prototyping.

Published in: Interaction Design / Sketching