Notebook

Catriona Cornett created a great list of sketching resources for user experience designers. Includes links to articles, tools, templates, presentations, videos, and examples.

Check it out and add more to the comments. Missing for me are the links to sketch apps for the iPad.

I swear I've answered this question a dozen times, so I'm capturing to refer people in the future. The tree control in my OmnGraffle Wireframe Stencil is a godawful hack that uses tabs and arrow characters. Copying and pasting the arrows, however, screws up the formatting. OmniGraffle just doesn't make this kind of manipulation of text all that easy and I haven't found an ideal solution, but if you want to learn how I do it, read on.

To use the tree control presently, you utilize the tab stops and insert arrrows from a character viewer. Type CMD-R to show rulers and tab stops in paragraphs of text. Then Option-Tab to move between tab stops. 1 tab for first level arrow. Insert arrows from the character viewer.

The video below shows how to :

1) Enable the character viewer in OS X System Preferences > Language & Text > Input Sources.
2) Use tab stops to Option-tab your text to create hierarchy.
3) Use OS X's character viewer to insert arrows.

View it in full screen to see it.

I'm using Option-* to make the bullets. Like I said it's terribly awkward, but that's how I make do.

Since using paragraph formatting in a text element is unnecessarily difficult, what might be an easier way to manage is to use a table and copy/paste the arrow icons if you find the above technique a pain.

Marian Bantjes gives a fantastic TED talk, where she discusses her work as a graphic artist living outside the mainstream of design thinking, thinking about ethereal qualities like bringing joy, invoking wonder, and inciting curiosity. This bit excited me:

The more I deal with the work as something of my own, as something that is personal, the more successful it is as something that is compelling, interesting, and sustaining.

Bantjes' focus on placing importance on the personal interest she puts into her work strikes a chord with me as someone interested in product design, because that personal interest can even help create personality and character in interface design work and writing copy.

This kind of self-centered approach to design is not something we talk about taking as user advocates, and it's certainly not something that I would expect any of my peers to advise in their work. But as you may have seen me write several times here in the past, when it comes to product design, there is something to be said for honoring one's instincts and interests when it comes to being steadfast on feature selection and putting forth a voice or personality in your product.

I found this graph explaining HTML 5 features via @obxdesignworks. Succinctly describes the major features enabled by HTML 5 that you need to be aware of: Canvas and video elements, offline storage and geolocation. The graph below shows a snapshot of current support and intent to support in web browsers. Shows that IE is well behind the field in terms of readiness as we speak, but IE 9 intends to support.

Core77's Sarah Cox wrote a lovely article after talking with Liz Danzico about her thoughts on interaction design, life with her dog Lucy and communicating simply and humanly. Below is her summary of what dogs can teach us about interaction design.

1. It's important to know who is in charge. Just like training a pet, a designer need to establish a rapport with clients that mixes trust and expertise.

2. Pay attention to the tail. A dog's tail communicates emotions silently, but it's easy to miss this detail if you are not paying attention. Interaction designers need to be aware of customer data for clues.

3. Keep gestures simple. Complicated hand gesture confuses a dog, and complicated language confuses users. Simplicity is best.

Good advice for communicating with humans and dogs alike. Read more on Core77.

Will Evans and Daniel Szuc have created a new blog to discuss leadership in the context of the UX community.

Last week I got a surprising call from Roman Pixell, Fellow in the Innovation Journalism Fellowship Program at Stanford. The InJo program at Stanford is focused on journalism covering innovation processes and ecosystems.

I'm honored to have been nominated for the InJo Pick alongside the well respected journalists in this year's selection, and will be attending the InJo 7 conference in Palo Alto, participating in a round table on June 8. I'm certain there will be much for me to learn from the experience and the exposure to the great minds at this event.

Mike Lohrman's Wireframe Showcase is a user-contributed wireframe and UI sketch gallery. I'm hoping, since there is some space on the individual pages for content, that we'll see a little more discussion about process and design thinking here rather than mere visuals of design artifacts. It's always good to see more people showing how they explore ideas with sketches and wireframes.

Quick sketch testing out Clooly pen on iPad
This seems the ideal solution for my iPad sketching needs.

A few days ago, when I thought of hacking my Pogo Sketch, I started researching all of the options for creating my own drawing tool for the iPad's capacitive touch screen, and was researching the styli that were available. I came across the odd design of the iClooly and thought I'd try it out of curiosity.

I had low expectations, but was surprised by how well it works for iPad sketching. I did the quick character sketch above in about 5 minutes with the odd little iClooly and Sketchbook Pro. As usual, there are things I think could be designed better, but this seems the ideal solution for my iPad sketching needs. The pros and cons follow.

The iClooly is manufactured in Korea and is not the prettiest looking or most ergonomic stylus. The drawing tip is actually a brush. A cap covers the tip, and a button at the end of the metal cylinder must be depressed to push out the soft metal bristles. It actually resembles a makeup brush.

iClooly UI Sketch Test

First I'll touch on the things I dislike. Like most touch styli out there, it's barely long enough to fit in your hand--I find myself keeping my fingers higher above the screen on an iPad than I would a normal pen or Wacom stylus to avoid making marks. The cylinder is quite thin, so those with big fingers that detest thin pens be warned. The cap comes with a little key ring, and must be removed to use the brush tip. Unfortunately, it can't be attached to the back of the pen. One thing I also worry about is how the bristles will hold up. I'm imagining that they'll be splayed out with repeated use, like a well-worn toothbrush. Time will tell.

Now I'll cover the pros, starting with the form factor. I'm used to using thin pens that I get occasionally from Japanese stationery stores, so the form factor doesn't bother me, and I like the fact that it has a clip to attach it to the outside of my Apple iPad cover. The metal cylinder feels durable.

Where this stylus really shines is in how it performs as a drawing tool. At first I thought it would be weird drawing with a brush, but it is not at all. Once I let go of the idea of needing a fine point to sketch, I've been able to evaluate these things a little more practically. The broad brush is not much thicker than a pencil eraser, and if you move fluidly on the screen it's possible to let the physical size of the tip disappear and focus on getting your idea down.

The main reason this stylus beats the others, in my opinion, is because the brush tip glides across the screen effortlessly. The quick test at drawing UI shapes in Sketchbook Pro below shows how lines can be smoothly drawn, without any of the ugly jagged shapes I occasionally would get using a foam or rubber stylus tip, which tends to catch the glass and cause too much friction. That's why I had to hack my Pogo in the first place. This is why I loved Ideate at first--it makes up for the jagged line problem by smoothing your lines.

iClooly sketch test

I should add that drawing finer details like the icons is really impossible for me without using a sketch app that lets you zoom like Sketchbook Pro does.

The last observation I have is that if you view sketching as something you do loosely, and give up on any of the things that make it feel more mechanical, i.e. straight and clean lines, grid backgrounds, it's easy to start feeling capable sketching on the iPad. I think in my quick test this kind of shows. The rougher and looser I draw, the easier it is for me to get out of my own way and not fuss on aesthetics. The Kirby character drawing I started above was fun and effortless and using the brush tip to airbrush color just felt awesome, better even than doing it with my Wacom.

I highly recommend this thing to iPad-toting interface designers that want to try their hand at getting creative with some of the better drawing apps out there. Tell me what you think and please post your sketches to the flickr iPad Sketch Group.

My hacked Pogo Sketch Stylus for the iPad

I blogged about what I thought could possibly make a better stylus recently and thought I'd sketch what I was thinking. The above picture shows how I think you could hack the Pogo Sketch stylus so it will glide a little more smoothly on the iPad screen. The capacitive foam creates a little too much friction to feel natural to me.

I drilled a small hole in the foam and inserted a plastic nib from an old pressure-sensitive screen stylus into the center. I then sawed off the back of the barrel and inserted a metal skewer into the back end to hold the nib in place.

The spring was actually part of the old stylus nib, and actually works well for adjusting the pressure when drawing--pressing hard makes the nib recede and the foam makes more contact.

The photo below shows what I ended up with.

My hacked Pogo Sketch Stylus

Seems like a simple way to get past the problem of drag on the screen.

Pen and paper are still superior, but iPad sketching is good enough to leave those behind.

The topic of UI sketching on the iPad is coming up pretty regularly for UI designers. People want to know how it feels and if it's going to replace pen/pencil and paper. After a few months using as many drawing apps as I can get my hands on, I find that it's more than adequate for UI sketching needs. Pen and paper are still superior, but iPad sketching is good enough to leave those behind when you're away from your desk. Here's my run down of pros/cons.

My initial reaction was that finger/nail drawing wasn't going to cut it. For one thing, while you can get around the fat finger obstacles by using your fingernail as your tip, fingers don't work because they hide the screen. A stylus helps, but because of the fat tips of capacitive styli and the friction caused by capacitive foam, it doesn't feel as smooth and the foam stylus doesn't glide on the glass. But, I don't think that's a hindrance for basic sketching. I've also read that the sensors on the touch screen aren't really designed to work with fine tips in the same way that resistive (pressure sensitive) screens are. What I think would be perfect is something that glides like your fingernail on the end of a stick--a plastic nib in the center of a capacitive foam tip.

With all my nits and dream stylus fantasies, at the end of the day I think that the fatness of a pen like the Pogo Sketch is arguably better in terms of forcing you to do rough sketching as opposed to fine detailed drawings. Roughness and low-fidelity is one of the important attributes of ideation--generating ideas in quick succession and in volume to explore ideas without fussing over aesthetics. This is how I'm justifying the constraints in my head anyway. :)

That in mind, some designers, regardless of my rationalization, will care about the feel of pen options and responsiveness of drawing programs. There's an interesting blog entry on the doodl.es blog that talks about capacitive styli and the applications Brushes and Sketchbook Pro from an artist's perspective. While some of the discussion about the features of the apps may not be relevant to everyone, the description of what is possible to those who care about the style of their drawings will like the comparison of the Pogo Sketch with the HTC HD2 stylus.

I finally settled on using Sketchbook Pro with a Pogo Sketch the most for its closeness in feel to sketching on paper. It's about as good as it gets for my needs right now. I won't argue with anyone that says it's not as natural-feeling as paper, but it's good enough for me. For detailed work, I think the capabilities of the vector drawing tools in OmniGraffle for iPad are also very interesting, because your lines have all the line properties that OG offers, and can be closed to make shapes, with fill properties. Some of the features in OG iPad are so good actually, that I can see them being useful in OG Pro Desktop.

I'm going to try to occasionally post sketches in this iPad Sketch Flickr group, so watch that space.

The model for sustaining customer loyalty is reverse engineering user awesomeness.

Peldi pointed me to a video of Kathy Sierra's presentation at Business of Software 09, where she talks about sustaining passionate and loyal customers. Positioning and generating sustainable relationships is not what you think it should be about. It's about user benefits, and not features--about how they feel about themselves in the context of what you provide them.

Don't make a better [X], make a better [user of X].

What creates the conditions for a user to be happy is how they experience what they do in the world because of what you give them. To jump to the chase, it's not about good products, good service, or good companies. It's not about you at all. It's about your users.

The model for sustaining customer loyalty is reverse engineering user awesomeness. Doing things that continue to let them say, "I'm awesome" because of things your product lets them do. Helping people kick ass FTW.

Don't sell me, teach me and I'll do the rest.

One example she gives has to do with how you treat examples vs. documentation. She references a Nikon learning site that shows people how to capture a waterfall, and cuts right to that user voice that says, "I want to do that."

By providing a learning experience that tells this story rather than expecting users to read the manual, the user can do more and go further than any technical document will ever enable them to do. Manuals let users understand tools, but stories and examples help users have great experiences. If you help users have that experience, they associate you with that experience--that awesomeness they create themselves. It's not about creating better products necessarily, it's about enabling people to become better users.

She suggests focussing on compelling questions, like the ones below, that have to do with creating that user experience.

  • Focus on what the user does, not what you do.
  • Ask, "What does having a solution mean to our users? What [bigger cooler thing] is enabled?"
  • Give them super powers.
  • Offer better gear and help them justify it to others. Give them higher "resolution".
  • Motivate and Inspire. Give them motivation for things they WANT to do but aren't. Get stuck camera users out of P mode.
  • Make the right thing easy and the wrong thing difficult.
  • Make them actually smarter. Keep users working on the smart things. Offer exercises, games, etc. that support deliberate practice of the right things. Make the time more fun. Turn the brain on with cognitive pleasures.
  • Shrink the user's 10,000 hours (time spent working on a specific task), by giving them patterns or shortening the duration of that time.
  • Make your product or your documentation reflect how they really feel.
  • What does being your user SAY about your user? What would their tshirt read?
  • On the heroes journey, we have to think about who we are to our users, and what role we actually play.
  • Don't insist on inclusivity. It's OK to split off the advanced ass kickers from the newbies in your community.

I have to agree with the closing point she makes. What we're doing by making software is increasing the resolution of the universe for people--increasing their ability to see more and feel expert in their world.

If you haven't already watched the hour long video above, I highly recommend making the time to come back to it.