Detail - Galina registers on the iPhone

I was inspired to create my first user comic by a potentially challenging sign up form we were about to implement. This was back at the tail end of 2008. WebEx was just launching our first mobile app: WebEx on the iPhone at MacWorld. The thought was we would offer sign up for a free trial of WebEx directly on the iPhone too. Using the same number of fields on the iPhone that we did when people signed up online. Uh oh. That seemed pretty challenging to me, and so I put it into a comic using the expressive Galina from designcomics.org to help explain the obstacles this would present to sign up.

It told the story! And helped explain the user’s context: it’s harder to type on any mobile device, especially on an iPhone, and someone is more likely to have less time and less focus. Therefore… using a long form with many fields would not encourage sign ups.

Galina registers on the iPhone

See the full comic here.

Submit: the wrong moment for a long-winded sign up

More recently, I was explaining how requiring a long registration form for access to simple content or functionality isn’t well received today by many, particularly when they are in the midst of other tasks or at times when they’re in a rush. This was more of a quick sketch of stream of consciousness while dealing with minor frustrations like this. It’s all about placing these hurdles at the right point in a flow, or using some kind of incremental engagement.

An iPad comic helped to illustrate:

I have to do all this right now? I'm in a hurry

Sign up forms are one of those white rabbit problems: many of us feel like we’re always late, and there’s rarely time to do something extra without feeling at least a little irritated about it.

That’s why I was intrigued by the beta sign up for Automatic’s Vault. Sure, it actually asked me for a number of decisions and inputs. Including how much I’d want to pay for the product when it goes live– which is basically a low-tech pricing survey. But the beta invite was presented as an application to get a “golden ticket” (who wouldn’t want one of those?) in a smooth wiki-like UI, and sprinkled with clever placeholders for the blanks on the form. And nice follow through—after I “submitted” I got a love note in my inbox from the Automatic team. Nice!

What to do? IPad to the rescue!

Here’s my 5-minute iPad sketch that summarized and made the other details more approachable.  I sliced it up and animated it so the user came in first, the other details grew up around it and I could tell the story of how important it is to have observer involvement to really see, understand and capture from multiple perspectives. I know, it could use some color… but it got the point across.

* PS: I never would have even realized this picture was missing, much the less thought of sketching it up this quickly for a preso, if I hadn’t seen Dan Roam’s Keynote at the IA Summit.

Done on the iPad, using Adobe Idea. (More on that later. A bit of a pain to export and import to other apps, but nice predictable, smooth line quality.)

I’ve tried four or five apps that you could conceivably think of as drawing or sketching apps for the iPad, all using your finger of course for drawing directly on the surface. These were the most userful:

• Color&Draw for Children
• Penultimate
• Layers Pro
• Ideate from Effective UI

Read on for quick takes these, and find out which is my favorite for drawing user comics, including angry, happy, and green pastey faces.

COLOR AND DRAW

My first discovery was Color&Draw for Children from Tipitap Apps. It was fun, and got me started—and rapidly addicted to the fun of seeing digital drawings emerge so effortlessly. Of course I’m not the intended audience, but it’s clearly fun for children. For what I wanted to be able to use sketches on the iPad professionally, the line quality was not smooth enough in defining curves, which is what drove me to look elsewhere pretty quickly.

PENULTIMATE

Next, I was fortunate to discover Penultimate from Cocoa Box Design. This is still one of my favorite uses for the iPad, especially for making concept drawings, the kind of quick things I like to do in meetings as we’re talking thru concepts or when I just wanting to document an idea… it’s the best. However, for actual drawing of characters, and sketching that I might import into other applications, it’s not ideal. Although it produces some of the most fluid and natural lines of any of these applications, it’s limited to one line weight. The biggest issue tho is the ease of export. As far as I can tell, it either exports as a pdf of the entire notebook (Penultimate creates notebooks, rather than individual drawings, which is also very handy for concepting rapidly), or you can email individual pages as PNGs. The emailed PNGs give you a white background with a clean white line, but a pdf or screen capture gives you the ivory background of the Penultimate notebook, and there’s no way to bring images directly into your iPhoto collection as there is with other apps.

LAYERS PRO FOR iPAD

Layers Pro is by far my favorite both for the pleasure of drawing and the quality of result. What makes it so much fun? Control over line quality, variety of settings, opacity control, immediate export to iPhoto, full range color palette, lots of control through layers. Take a look at their website for details.

The downsides are no remembered presets for colors or brushes, so you need to manually do that each time. If you’re doing simple comics, like I am, this is not a problem, but if you wanted to do something more complex it might be a major pain. But I figure the iPad, at least for now and for me, is about relatively lightweight creative work and the opportunity to capture ideas spontaneously.

My workflow is to use the same pen almost all the time, at a smaller size than the 20 pixel preset, 13-16, and draw in black first. Then I’ll capture what I have in black and white to iPhoto, I might actually do that a couple of times as I’m working so I don’t lose anything. Color I’ve been adding on a transparent layer under the black drawing, semi transparent usually, for somewhat of a watercolor feel. And recapture in color if the results look good.

IDEATE

A couple of friends had recommended Ideate. So I’ve tried it out a bit today, and will certainly end up using it in some ways, tho likely not for comics. There are some unique tools… browser templates to mock up UI ideas within, models to put clothes on, and other types of templates and visual elements to build on. But on all of these, the line quality of the actual drawing is almost as clunky as Color&Draw… the lines don’t naturally smooth even if you draw very slowly, so the drawing remains more digital in feeling than either Penultimate’s lines or Layers Pro. Maybe the next release will fix this, I hope so!

If you’ve found any other apps for drawing simple comics and cartoons, interested to hear.

I’ve been sketching four characters, both as drawings, and as personas. It’s a work night, so I won’t go on and on about all four of them, but here’s a quick peek at what they look like so far. More about who they really are later. Only showing three here tho because Karl just isn’t baked enough yet.

First there’s Karen. Very socially oriented, but considered and careful in her choices.

Kevin. Just got to know him last night. He’s pretty friendly too as guys go, but doesn’t have time for too much chit chat. Get to the point already!

Kati is a favorite. Savvy and quick, she sizes up situations and lets everyone know what she thinks. Not in a bad way of course, she’s pretty funny and has a lively social life.

These are some initial sketches for each of them. They’ll be getting into some activities at work and home in future comics. Any suggestions welcome!

(PS. All these are created on the iPad, using Layers Pro. I’m still getting to know the app, but will share some ideas on settings and brushes for most natural effects in coming posts.)

iPad chatter

Over the last couple of years, I’ve had opportunities to create some comics to tell user experience stories… usually problematic ones that we’re working on improving. These have always been fun to do and generally well received by audiences, who get the point quickly and also enjoy the format. The characters at design comics (especially Galina, my favorite) made this possible out of the box.  Showing these comic stories seemed to jump over hurdles that might otherwise have resulted in long discussions to resolve differences of opinions.

Then, three weeks ago I saw Dan Roam speak at the IASummit in Phoenix. It was amazing. Though I had skimmed his book, seeing him talk and really getting it was transformative. More on that later. (Meanwhile, you can listen and watch his talk from the Summit at Boxes and Arrows).

The following week, I revised my approach on some stories about web strategy we were planning to tell with user scenarios, basically walk thrus. I started sketching out characters, as well as highly simplified UI elements, in Illustrator. It was good, but one of those things you keep noodling on because it’s just not quite there yet.

Then, last week, I got an iPad, and started to draw on it. It was way better. Felt like the beginning of a really sweet spot. Not to mention oodles of fun. (I’ll also be sharing some ideas later on what to use and how to use it so you can create comics on the iPad too.)

On this site, I plan to share thoughts on user comics, examples of how they can be used for story telling, and some of my favorite characters as they take shape and get a life.  Hope you’ll let me know what you think and share any examples you come across too!