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.
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.
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.
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.
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.
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.
Will Evans writes for UX Mag about his process for creating wireframes, or more precisely how he uses wireframes for ideation and problem solving. Will breaks his design process into three phases: divergence, transformation, and convergence.
This seems similar to a common theme I come across when designers talk about their process--framing/ideating, reframing/ideating, selection/refining. Buxton also refers to this, citing Stuart Pugh's idea by illustrating the expanding/contracting nature of a designer's concept selection, which I find easy to map to sketching->wireframing as well.
Something Victor Lombardi wrote about the process of concept design seems related here. Victor discusses expert vs. novice designers in an article that focussed on the designers' tendencies to frame and reframe the problem and approach solutions differently depending on expertise. The idea was basically that the experts, those with years of experience, had the tendency to simultaneously spend time on inquiry and problem framing as well as solution generation, but then abandon deep inquiry and rigor in favor of selection.
This reminds me of the few times I've worked a desk in a reference library in the past, where people framed their problem verbally only to have us help them reframe the problem in terms of a question that could be asked of the information. Language, questions and answers are the communication artifact there. The artifacts are really beside the point, but their usefulness in coming to a solution is important to the process when the discovery requires iterations of inquiry/framing/solving.
The communication of ideas that things like wireframes facilitate is what is interesting. Replace wireframe with sketch, model, prototype, what have you. What Will Evans is showing here is that wireframes used in this way, serve as one of the communication artifacts we use for problem framing and solving. THAT is the right way to wireframe.
With the glut of anti-craft sentiment I hear and read so often, I think it fitting to post an entry about the love of one's work, drawing from a craft outside of our own.
UP THERE is a beautiful documentary about the slow, laborious, and fading craft of hand-painted advertising murals. This is the NY I love. This is the type of appreciation of craft that I admire.
I feel like the humble young man towards the end that looks at it this way. The learning comes slow, but he's in it for the long haul and knows that the learning is a process of apprenticeship. One day he hopes to be able to teach someone else and give back. There's a respect there that I admire, for his craft, and for those that help him to acquire the skills.
I was chatting with UX friends Matt and Mark when the topic of taste came up. Mark brought up the Ira Glass Storytelling series of videos, which are great. If you haven't seen it, there's a great discussion on taste for creators.
This is Ira Glass from This American Life talking about story telling, and how we get into creative work because we love it and we have good taste. He talks about the gap in the beginning when we're trying to make stuff, that turns out short of our expectations. With taste, we know when our execution falls short. I think I've been doing what I do long enough to know about that feeling of disappointment.
Glass offers this advice for sticking it out.
It's going to take you a while. It's normal to take a while and you just have to fight your way through that. OK? You will be fierce, you will be a warrior, and you will make things that aren't as good as you know in your heart you want them to be. And you will just make one after another.
When we make things that don't reflect our taste level, it can be frustrating, but it keeps us doing the work. Because, in the end, what we say about taste is never as good as showing our taste level by executing.
I think I have pretty good taste, although it doesn't reflect a singular style or aesthetic, and ranges from the minimalism and zen on one end (good taste) to embracing the ugly and conceptual on the other (decidely bad taste that's so bad it's good). I think my execution gets better with every project, which is why I do a lot of small projects. I know I'm not a visual designer, so I'm the harshest judge and critic of my attempts. The repeated execution really helps get me closer, in my opinion, to understanding how to deliver tasteful projects and products.
I'm going to sound like a broken record, but to piggyback on Glass' message, I think it's productive to do small and insignificant work for the sake of doing it. This is why I do repeated redesigns/reskinning of personal projects. I believe your blog doesn't count in the don't redesign/realign argument unless doing so affects your livelihood. If you ever followed my personal blog, you know that's how I learned to do better CSS. Even if you're only sketching ideas that will never see the light of day, or making collages of unicorns and rainbows, it counts.
Freehand design sketching on the iPad is for UX designers. Any app that lets you do freehand user interface sketches, either using finger tips or a capacitive stylus like the Pogo Sketch is what we're sharing here. If you drop non-iPad sketches, they will be booted.
Suggested tools to start: Autodesk Sketchbook Pro, Adobe Ideas, Penultimate, Brushes, OmniGraffle, Sundry Notes.
I've been telling people how much I dig Adobe's free Ideas app and Autodesk Sketchbook Pro for sketching on the iPad. Craighton Berman's Fueled by Coffee sketchblog will give you an idea of what sketches can look like using these tools. Ideas is super simple and smoothens your lines so things look naturally drawn.
I'm really loving it. The adjustment is taking time, and it's not as quick as pen and paper, but it's slightly more natural using a Pogo Sketch Stylus.
Didn't get to the IA Summit this year? Or went to IAS10, but didn't get to see everything in all the tracks? Of course you didn't unless you had Hermione's Time Turner with you.
The good news is that Jeff Parks did an amazing job of capturing the sessions and producing audio podcasts, which are now available via Boxes and Arrows or by subscribing to the podcast via iTunes. Currently the keynotes and all of the sessions from Day 1 are available.
I love the idea of Design Swap, even if it reminds me of Wife Swap, key parties, the swinging '70s and that movie Ice Storm. It's better, because it's an exhibitionist, one-to-one CSS Zen Garden style swap of designs between two designer's sites. And we get to be the voyeurs. Salacious.
It's a shame that they didn't pick up on the wife swap theme like I did, and go with a '70s disco, swinging aesthetic. Those round portraits could have people with fros and big butterfly collars. Opportunity missed.