Notebook

If you're looking for gifts for your team, Nick Finck has once again rounded up a massive list of gear for UX geeks. Thanks, Nick.

I made a minor update to the OmniGraffle UX Template. The grids were screwed up in the last update I made, so snapping wasn't working. Some guides were also pretty sloppy, so I cleaned those up as well to keep things nice and neat.

Thanks to Jayson Elliot for the heads up about the grid snapping problem.

Update your templates here.

Theresa Neil's forthcoming book, Mobile Design Pattern Gallery, is set to be released by O'Reilly in the Fall of 2011.

Theresa launched a site to go along with the book that includes a fantastic gallery of 70 user interface design patterns for mobile devices with 400+ supporting examples from iOS, Android, BlackBerry, WebOS, Windows Mobile, and Symbian applications. The gallery covers a broad range of problems from designing your application's navigation to choosing the right invitation technique.

Check out the pattern gallery, and subscribe to be notified when the book comes out. She's giving away 5 free copies to subscribers.

In case you haven't checked it out, the Interaction-Design.org Foundation is an outstanding project started by Mads Soegaard and Rikke Dam to create free and open educational materials for the HCI and IXD communities. The Encyclopedia of Human-Computer Interaction is the main project, where they've engaged professors and designers to contribute chapters that include HD video and commentary.

Mads and crew will soon release a chapter on Social Computing and its relation to social media, written by Tom Erickson, veteran researcher in social computing at IBM Watson Research Lab. The chapter includes multiple HD videos with interviews of Erickson.

These materials have apparently taken 10 months to produce and involved 3 editors, 2 peer-reviewers, and a camera crew of 4 people. There is also commentary by some renowned designers like Elizabeth Churchill from Yahoo Research and Andrea Forte from Drexel University.

The group have prepared a preview for Konigi readers. The text and HD videos are completely free and can be viewed here: http://interaction-design.org/encyclopedia/social_computing.html?p=0230.

This is an incredible new resource. Be sure to check it out.

Meaningful Transitions is the thesis project of Johannes Tonollo, an interface design student at the FH Potsdam, Germany. Johannes wrote his Thesis on "Transitions in the User Interface," in which he analyzed how motion in the user interface can be a helpful extension to static elements to enhance the user experience.

The collection of transitions is clustered into 6 different categories: Orientation, Spatial Extension, Awaking Controls (Awakening?), Highlight, Feedback, and Feedforward. His description of the effectiveness of each transition forms a pattern-like-library for motion in interface design. Each transition provides a short summary and abstract animation on the category overview. Be sure to click each item to view a detailed view that provides a description of the transition, explanation of when it can be useful, and a description of the benefits for using that transition as a design solution. Several items also provide a real-world example of the solution in use.

Excellent stuff, and impressive execution. Check it out. The thesis is also available in a downloadable PDF in German.

Usabilla is one of the remote, unmoderated usability test services I've reviewed and used in the past (full disclosure: they also now sponsor this site). They've added mobile testing to their remote, unmoderated testing service. The new feature lets users participate by using their smartphones or tablets to test the screenshots or urls you specify in each task or scenario.

As with their past offering, participants are stepped through each scenario and asked to respond by adding markers to screens and notes/responses to your questions. I ran test scenarios on both iPhone and iPad, and the interface is clean, and simple, and optimized to work well with both devices. Read more here.

I'm in love with this Journal Bandolier made of recycled bike inner tubes, made by Cleverhands and sold on Etsy. The bandolier is a strap fitted with small loops for carrying pens, pencils, and other handy tools wrapped around a journal, planner, or other book. I ordered one for the small 3.5" wide Moleskine. Bandoliers for other notebook sizes available as well.

Apple I

Adam Pritzker deftly combined this image of an Apple I and this Steve Jobs quote on design from an interview in 2000 that appeared in Fortune.

“In most people’s vocabularies, design means veneer. It’s interior decorating. It’s the fabric of the curtains of the sofa. But to me, nothing could be further from the meaning of design. Design is the fundamental soul of a human-made creation that ends up expressing itself in successive outer layers of the product or service.” - Steve Jobs

There's an expression of that soul of the creator, in the running failures and successes of the executed design, that attempts to make a connection with the user of the product. Some products are imbued with the soul of a passionate creative force, others become refined to the point of feeling somber. Underneath the surface of Apple products, there's always been a sense of human connection, either in the literal early smiley Mac icons, or in the more polished and subtle interactions and connections we have with machines using our touch screens today.

There's no way to understate how much Apple products have influenced what I do every day. I learned Basic and how to type in high shool on an Apple II. I played Tetris for the first time on a friend's original beige Mac. The first computer I ever spent my own money on was a PowerBook 520c, the very one I learned HTML on. With each successive generation of polish, in every one of these machines I've touched, I've always felt that connection, and that desire to want to play with computers. I wouldn't be doing what I do now if Jobs' Mac never existed.

Every product starts somewhere, but as with people, the soul is what sustains the connection. It's heartening and inspiring to me to think back on this legacy of product design and where it started. It makes me feel like every naive notion I have about design is OK as long as I have a passion to improve and deliver something with soul.

I find inspiration in the literature that examines games and play as factors in creating delightful and engaging experiences. I like to think of how this applies to products outside of the video gaming industry. I've had Thomas Malone's 1981 paper, "Heuristics for Designing Enjoyable Interfaces: Lessons from computer games" on my desk for a while. I finally got around to reading it and found some interesting ideas that resonated with me.

The paper asks why users find games captivating and proposes guidelines for designing enjoyable systems. What I found relevant for interface design are Malone's observations about the experience with toys versus tools, and how to incorporate elements of game play to make tools more enjoyable.

One of the distinctions he makes is that when using tools, their interfaces tend to become virtually invisible, to allow the user to focus attention on tasks that satisfy their external needs and goals.

I don't think all tools become invisible, but well-designed, efficient interfaces for business software tend to feel this way. I also think of it this way—I don't go to the library to experience the library, I go to satisfy a need external to that physical place. The collection of the building, its contents, and it's staff are the tool, and more importantly they are simply a means to an end. The same is true of research databases or search engines. Most business software is focussed on fulfilling needs and goals, and the ones that I've used that feel efficient tend to have interfaces that fall away so I can focus on tasks.

We're using tools during large portions of our work day, and to some extent, for power users, their utility sometimes makes them boring, and we seek out ways to find challenges using them. I found this passage particularly relevant to me.

In a sense, a good game is intentionally made difficult to play, but a tool should be made as easy as possible to use. This distinction helps explain why some users of complex system may enjoy mastering tools that are extremely difficult to use. To the extent that these users are treating the systems as toys rather than tools, the difficulty increases the challenge and therefore the pleasure of using the systems.

Interesting idea, although the conflict of simple versus complex presents a challenge. With tools, simple features are great for satisfying that 80% of users that need efficiency, but the 20% of power users can probably stand to go beyond that simpler experience. For them, the challenge is to find ways to unlock the hidden features beneath the iceberg.

I thought of it as an iceberg representing features (excuse the cliche metaphor). The tip represents defaults and simple features for the majority of average users, and the larger mass below the surface represents power users and the often hidden, advanced features they use.

The conflict really has to do with power users. They want to push the tool to do more, they want to do advanced things. What Malone proposes in this case is to build in a progression of increasingly complex levels, and the analog in the business tools world would be access to advanced features, whether they be built into the interface itself, or require expert-level expertise to access those features. Have you ever looked at the insanity of an MS Excel spreadsheet loaded with macros? That's the kind of analog we're talking about. Or in a SaaS environment, it's an API that gives access to data.

There are simpler examples from our world. Some IAs use these kinds of expert-level skills to get access to data from websites to come up with information graphics that help us visualize that information when wrestling with server log analysis or content inventories. I did a lot of this with tools like Graphviz in the past. In traditional design tools, it could mean pushing an advanced feature in graphics software to do things beyond what they were intended for. I'm thinking of things like using JavaScript and Scriptographer in Illustrator, in this case.

Malone talks about building multi-layered systems in games in order to push advanced users to become more engaged and sustain their use with the game.

[A] multi-layered system could not only help resolve the trade-off between simplicity and power. It could also enhance the challenge of using the system. Users could derive self-esteem and pleasure from successively mastering more and more advanced layers of the system, and this kind of pleasure might be more frequent if the layers are made an explicit part of the system.

What he's talking about is common in games—providing an ecosystem that supports leveling up with the purpose of providing incentive and reward via building up expertise and engagement.

This reminds me of what Kathy Sierra talks about in her talks on creating awesome users. Experiences that progressively introduce and teach users about advanced features have a better chance of sustaining engagement with them. This is something we all want in our products.

I love the idea behind this. It becomes our responsibility as interface designers to know how to identify the tip of the iceberg to provide the simple defaults, but simplicity isn't all. We might keep the majority of our users working with the obvious features, but we want to provide the conditions that will let them become expert, and over time keep them feeling continually challenged and satisfied. Our challenge comes in knowing how to push the iceberg up, or teach the user how to swim deeper below the surface.

All the OmniGraffle users out there will want to check out Todd Moy's list of tips and tricks that all OG power users need to know. The character replacement one in particular will save you time. Although I tend to just clone an entire object's style the style brush with W and OPT+W, you should definitely learn about cloning discrete styles with chicklets. You'll wonder you never did.

Check them all out on Viget Advance and level up your OG skills.

Two great slides from Yiibu's presentation, Letting Go, a talk about design in an time of increasing disruption.

"Issuing your customers with something that is rough, incomplete, and possibly even substandard seems counterintuitive but there is growing evidence that people don't necessarily want the perfect product. They prefer to deal with something ragged around the edges that they can adapt or improve."
— Martin Thomas in "Loose: The Future of Business is Letting Go"

"The best designs will set the stage, but stop short of fully defining the experience."
— Adam Silver, Frog Design

Awesome presentation deck. Would have loved to see and hear it in person. See the full presentation here.

Photo credits: 1, 2

It's been about 3 years since I updated the printable graph paper PDFs I provide for user interface design sketching. You can download the printable PDFs from here. (Yes, I use the word "Here" in links.)

In the last year I've gotten a lot of requests to replenish the inventory of wireframe and storyboard graphpaper notepads that I fulfilled via Amazon.com, and the wirebound sketch books. I feel bummed every time I tell people that I decided to get out of that little business. It seems enough people still like to use them. I've even been told via Amazon comments that the storyboard notepads were being used by animators and filmmakers, which is a lovely full-circle I think.

In any case, I updated the graph paper page to provide PDFs of the very Illustrator files my offset printer used to create the final run of wireframe and storyboard notepads that were sold on Amazon. I also now provide an 8-up page. In an upcoming article I'm going to show you how you can print and bind your own notebooks from these. I think it's more satisfying anyway to do it yourself and have only enough paper on hand for what you need.

Enjoy. More to come. Get the updated graph paper.