Interactive Sketching Notation »

"The interactive sketching notation is an emerging visual language which affords the representation of interface states and event-based user actions. Through a few simple and standardized rules, what the user sees (drawn in greys and blacks) and does (drawn in red) are unified into a coherent sketching system. This unification of both interface and use, intends to enable designers to tell more powerful stories of interaction."

Pictos »

Using a font instead of images for icons is an interesting concept, which ensures that the icons are infinitely scalable and that the presentation can be easily changed on the fly without any extra page weight (even more so with CSS3).

I am curious where the tipping point lies in terms of page weight and render speed – 3 icons used, five…15? Either way, this is a really good start down an innovative path.

Interaction Design in the Age of the iPad

The direct touch input removes a layer of abstraction, and that’s a really big deal. In this way, it was like going back to design for print – when you push it with your finger, it moves! – but it’s utterly unlike print in every other way imaginable. Point is, the direct interface really does mean reevaluating every assumption when it comes to interactive design.

Derek Powazek in Thoughts on Designing for iPad

Derek’s post is chock-full of insights, but that quote in particular struck me. I don’t think we’ve realized just how different the iPad and similar devices are from our familiar grounds, both in terms of design and usage. Tools that we’ve relied on, in some cases quite heavily, like the hover state, are on their way out, while entirely new capabilities are introduced.

We are no longer chained as designers, developers or users to that single little arrow moving about the screen. We can finally make use of all of our digits on-screen.

Sketchy Wireframes, the Comic Sans of UX

A Sketchy WireframeSketchy-style wireframes, have wiggled their way into user experience documents the world over. With awesome tools like Balsamiq Mockups and a range of stencil sets to choose from, like as not, when an artifact describing the layout, features and workflows of a site is sent around the office or to a client, it’ll have squiggly lines.

Caveat: This post is about the sketchy style used in wireframes, not sketching in general. Sketching is an important part of the wireframing, workflow and design processes. Many a brilliant idea started life on the back of a napkin.

The reason most so often cited for the use of a sketchy style is that the squiggles convey that the document is still a work in progress. A secondary reason often follows with a claim that the sketch look obviously isn’t the site’s final design.

But sketchy style wireframes inevitably convey the opposite of what is intended, and worse, they come with additional negative implications overlooked by the proponents of the squiggle. In truth, sketchy wireframes imply that you don’t think your client is smart enough to separate crisp lines from a final design.

Simply put, the sketchy style is unprofessional. Yeah, I said it.

Would You Accept a Contract in Comic Sans?

I wouldn’t and I’m willing to bet that you would question any professional who provided you a legal document reminiscent of Garfield and Family Circle.

Wireframes aren’t supposed to be zany – they are supposed to be informative.

While our industry is young, and the tool set, younger still, we have many examples from which to learn. Architects and engineers are expected to deliver crisp lines and readable notes when they produce plans for a new home or skyscraper. The same holds true for engineers of all stripes.

Documents of any importance need to reinforce your experience, your expertise and the decisions you made as you produced them. The sketchy style does quite the opposite.

Sketchy Wireframes Imply a Lack of Importance and Conviction

Just as the final design for the site will convey a certain mood, the visual presentation of the wireframes should reinforce their importance to the success of the project. When you use a sketchy style your documents encourage the client to “fix” them.

Sketchy Wireframes Imply that Your Client Can’t Mentally Separate the Structure of a Site from its Design

While you may think this the case, you are either underestimating your clients, which is condescending or you should search for new ones, as clients who can’t understand the concept of a blueprint will likely struggle in their own endeavors. People are smart, and while you may have to explain the concept of a wireframe to a new client, the concept is easily understood.

Sketchy Wireframes Impede Comprehension

The goal of the document is to demonstrate the hierarchy of information and features and the relationships between those pieces. Wireframes are the blueprints for key business and design decisions. Adding visual clutter in the form of wavy lines, odd angles and handwriting fonts distracts from this singular purpose.

So, for the love of UX, save the sketchy look for the design phase where it belongs. Give your clients what they deserve – professional documents that aid their decisions and reinforce their selection of you for their important projects.

What Do You Think?

Am I wrong? Am I missing a key point? Do you agree with all your heart?

Leave a comment and let me know.

Replacing the Save Icon

Floppy Disk IconThe Save icon – that little ol’ floppy disk that exists in nearly every application sitting on your computer and on the Web. A representation of a piece of technology so utterly out of date that it’s meaning has shifted away from its physical existence into a concept of safety and permanence.

As a means of storage it was convenient by the standards of the day, but not necessarily that reliable and yet we’ve held onto it as a symbol, in large part because everyone who uses a computer recognizes it. So I recognize the fact that we’re unlikely to actually change it any time soon, I thought it would be fun to explore alternatives, so I asked the members of Refresh Austin, those who follow me on Twitter and my friends on Facebook for their ideas on a replacement. Those conversations generated some great ideas, which I present to you.

The Question

I asked “If it were up to you to change the old floppy disk as the “save” icon across all Web and desktop apps, what would you choose?”

The Answers

Physical Representations

Hard Drive icon Several responses recommended a hard drive, replacing one form of physical media with another, more accurate version. Though as William Yarbrough noted, it may not work as well for apps in the cloud.

safe-icon.png Keith Aric Hall was the first of many to recommend a vaults or safe. I like this idea as it reinforces the concept of “save”. As Frank Robinson noted, those also imply encryption or file-locking, so he suggested a two-drawer filing cabinet.

Terry Brown brought up the idea that since the Open icon is often an arrow pointing out of a folder, then having an arrow point into the folder would make sense for Save.

entry_saved.png Michelle McGonagle recommended a document with a checkmark and then took a larger step outside of the normal bounds by suggesting a treasure chest or empty jar, both of which are technology-agnostic. Keith noted that many CMSes use the document with a check icon to denote “Approve for Publishing”, which could be problematic.

Mental Concepts

box_address.png Clouds and Boxes proved popular, often accompanied by an arrow.

Diana Dupuis suggested a red “S” in a thin black circle.

The response from Steven Harms is too good to not quote outright:

The notion that is important is the locking of bits into a static form: stored in a cloud, stored on a disk, stored on a CD. The trouble is that those icons would be “lock” or “frosty-ness.” The former is visually synonymous with “security” and the latter with Wendy’s, so neither has quite the right visual glyph-set.

Other Notes

Annette Priest brought up some great points, including the fact that we’re on the verge of needing to replace phone icons as well. She also noted that perhaps we should look at a shift towards gestures for the action instead of an icon. Follow a certain pattern with your mouse or device and your work is saved.

Ryan Joy brought up the point that sometimes “save means ‘save draft’ or state and other times it’s intended as ‘publish'”. So, a bigger question may arise as to how and if we differentiate those concepts via icons.

What Do You Think?

A definitive answer was never the point, rather the conversation is the key, and it has been great so far. I’d love for you to jump in with your ideas to keep this going!.


All icons except for the safe, which is from VisualPharm are available as a part of the Flavour Extended Icon set by Oliver Twardowski.

Thoughts on A Complete Experience

I recently posted a quote from Steve Ballmer discussing a key difference between Apple and Microsoft, which I titled A Complete Experience. Having spent a bit more time thinking about it, I thought I would capture some of those thoughts here. This is basically a brain-dump, so it is by no means comprehensive, or for that matter a fluid discussion.

For Ballmer to claim that Microsoft is committed to choice doesn’t match their past business practices. I’d love to see them truly commit to changes that support real user choice and a better end-to-end experience. The subtle knock of Apple (a “narrow” experience) is to be expected, though again it stretches the truth.

OS X, Apple’s computer operating system is not as broad as Windows in terms of configurations and options (six versions of Vista to choose from – two for OS X, one of which is targeted for servers – no confusion there), but that’s a very good thing for the people who buy and use computers. Windows provides every possible configuration option just in case one person out of 10,000 may want it. That’s pretty cool, except for the fact that it often clutters the experience for the other 9,999 folks.

Apple has gone the other route, making a vast majority of decisions for the users – focusing on normal people instead of edge cases. Power users can dive into the command line and utilize the full power of the BSD subsystem. They both have to strike a balance, but have chosen vastly different ways to do it. I’ve come to love Apple’s way of doing it.

If the experience were truly “narrow”, you wouldn’t have the wide swath of user types – students, lawyers, parents, kids, entrepreneurs and hard core developers. That last one is important – many dedicated techies who write programs and Web applications that millions of people use day in and day out switched to the Mac. These are the people most likely to tweak their system, to be that one out of 10,000. They chose the focused end-to-end experience over the bucket of options.

The experience is so much smoother on the Mac and my levels of frustration are amazingly low when I work on my computer. Hell, frustration doesn’t tend to crop up very often. I should say that my level of contentment and the occurrences of elation are rather high compared to any other product or service that I use on a regular basis.

A Complete Experience

In the competition between PCs and Macs, we outsell Apple 30-to-1. But there is no doubt that Apple is thriving. Why? Because they are good at providing an experience that is narrow but complete, while our commitment to choice often comes with some compromises to the end-to-end experience.

Microsoft CEO Steve Ballmer

The quote is from a memo that Mr. Ballmer sent to Microsoft employees this past July outlining the company’s strategy for 2009. Aside from the not-so-subtle “narrow” swipe, it’s a concise summation of why so many of us have switched to Apple products (not just the computer) after years, if not decades using PCs running Windows.

The experience matters.

Searching for Findability

Everyone seemed to have their place in the project life-cycle at the web design agency; everyone but little Findability. Occasionally someone would notice his value to a project, but instead of giving him the care he deserved, they’d just fork over copious amounts of cash to ship him off to his sketchy uncle SEO, who tied him up and fed him keywords all day long. He spent so much time at uncle SEO’s that everyone started to think Findability was SEO, and subsequently became a little dubious of his importance.

Aarron Walter

Aaron’s article, Findability, Orphan of the Web Design Industry is a great reminder that we should not overlook the importance of findability, nor confuse it with SEO and usability as we create our designs and interfaces.

Design, Feedback, WordPress and the Community

WordPress 2.4 Dashboard Snippet - Small Chris Messina has posted a great entry discussing the problems with open source design, with a focus on the new administrative interface for WordPress 2.4, which is generating a lot of discussion now that it is partially implemented in the nightly releases. As an avid user of WordPress and occasional plugin developer, I’ve been following the discussion from afar and fully agree with Chris that it is much too early for the design to be judged.

Hopefully Chris’ points about a lack of a visible design owner will be noted and acted upon. The project needs a strong, authoritative voice that can answer the design questions, lead the discussions and gather ramblings, compliments and complaints for future revisions. I fully believe the WordPress team has all of these issues covered, they just need to communicate it a bit more and demonstrate that they have it covered. We as a community also need to trust that they know what they’re doing – we are using their software after all, and judging by the amount of sites running WordPress, and the amount of people theming and building plugins for the platform, I’d say it has a loving community.

One of the first steps to resolve this issue is purely communication. I think it incumbent on the designer/dev team/Matt to release the final approved comps of the design, if for no other reason than it eliminates the uninformed complaints and can guide the conversation towards useful feedback. If people are going to take issue with the design – and people always take issue with design changes – they should at least see the plan in full, and there’s no reason to wait for final implementation for its debut. People love WordPress, and this is a major change; humans tend to dislike change when the object being modified is something with which they are comfortable. Doubly so when the changes are unknown.

Right now, all folks see is a Frankensteinian beast where once there was a well-known friend. Assuaging the fears is as easy as a quick post of a few screen shots, and a couple of words to describe the changes.

Satisfying UI Design is Often Illogical

Scott Stevenson provides a very interesting essay, Satisfying UI Design is Often Illogical, discussing the impact and need for UI changes and the expectations of and reactions by the market to those changes. The entire piece is well worth a read by anyone interested in design and user experience, with many valuable insights. One of my favorites though is encapsulated in a single line: “The real goal is user satisfaction, and some of that is really illogical and messy.”

What We Talk About When We Talk About Design

You tell him I said to take a long unstructured walk around his city. Talk to strangers. Take pictures. Visit at least one museum. Pretend like he’s from somewhere else for an hour. Stop in a park to read Raymond Carver’s “What we talk about when we talk about love.” outloud would be rad, but I leave that up to him. Go into a music store, find two people who seem completely different from him and buy whatever they are buying. And then end his travels at your house where he’ll tell you the story of his day over a bottle of Bombay Sapphire Gin. The story should last as long as the bottle.

Maggie, the fifth commenter on the article One List to Rule Them All

I link to the article for the commentary more than the post, which is a brief rundown of resources for people interested in Interaction Design. The heart of the matter is the fact that Maggie’s instructions apply to anyone interested in becoming a designer, whether print or interactive, an architect or for that matter a strategist of any field.

We all follow the precedents of those who came before, but we lose sight of the road others walked before us, and the paths others take alongside us, as we look toward the road we must walk ourselves.

Screens around town

37signals has set up a flickr stream showing screenshots of various UIs, most of which are Web-related (tag: screensaroundtown). There are some nice components in there, though some of the shots don’t seem to fit the group, like the install window for Adium.

I like the concept for its simplicity of purpose and implementation – it’s a refreshing break from the large sites that gather cool designs from around the Web.

Found via JD on EP.

PHP Progress Bar

An interesting idea was posted to eVolt’s TheList in the form of a tip: using PHP’s flushing buffer to create a progress bar for large PHP applications. Juha Suni, the author of the tip, provided the following code, noting, that “you can use the flush()-function to push more data to the browser while the script is running. This data being elements for small pieces of the progress bar, you can rather easily have a universal solution for all heavy scripts”. The code below is as posted, the only changes are a couple of formatting tweaks for display on this site. I haven’t implemented it as of yet, so I can’t vouch for it’s functionality.

ob_end_flush(); // This should be called at start

// Load all data and process it ready for looping

// Do some preliminary calculations, such as:
$totalloops = 38;
$percent_per_loop = 100 / $totalloops;
$prev_percent = 0;

// print html/css for the part above the progress bar
// as well as possible background of the actual progress bar
// in such a way that the images for the progress bar (coming next)
// align themselves nicely
// (This example fits 100 images next to each other, each
// representing 1 percent of progress.

// Start looping:
for($i=1;$i< =$totalloops;$i++) {

    // do stuff
    // echo progress if at least an advance of 1 percent
    // occured since last loop
    $percent_now = round($i * $percent_per_loop);
    if($percent_now != $percent_last) {
        $difference = $percent_now - $percent_last;
        for($j=1;$j<=$difference;$j++) {
            echo '';
       $percent_last = $percent_now;
       flush(); // Push the new data to the browser;

// In the end print necessary code to the end of the html.

Juha notes, “on some occasions, the webserver, proxy or the client browser can buffer data no matter what you do, so this will not work 100% for everyone at every situation”. Still, this is a great idea, and one sorely needed for some major PHP apps.

Update: Juha has posted a nice demo of the script (no longer live), which “loops the sleep(1)-command for 14 times”. He also added a counter that displays the percentage that has been completed. Juha mentioned that he hopes to find the time to clean it up and implement the counter as a package for use in other scripts and projects. That would be great to see!

Update 2: Juha has posted a zipped up collection (see update 3 below) of the PHP source files and associated images.

Update 3: It appears that Juha’s site is down. I don’t have a demo to point to, but it appears someone else posted the script, which you can find here.