I’ve written a piece on the Tobias & Tobias blog about pattern recognition, inspired by this amazing example of streamlined visual communication:

I'm sure you don't need to be told what these shapes represent

This image gives our brain the chance to show off one of its most impressive skills – pattern recognition. Pattern recognition allows us to understand complicated things even when we’re only given limited information about them. So even though the object on the right is made up of three Lego bricks, representing only nine bits of information, pattern recognition makes our brain ‘see’ something far more intricate…

Read the full piece here.

Filling out forms is a necessary evil whether it’s on the web, mobile apps, work-related systems, or even on old-fashioned paper. We don’t enjoy doing it but sometimes there’s no other option.

Why are forms such a chore? Designers from multiple industries have been trying to solve this problem for decades. Indeed, every layer of the experience when we use a computerised form has been meticulously crafted to reduce our stress – from the ergonomics of the keyboard & mouse to interaction components like dropdowns, radio buttons and auto-completed text fields. But the fact remains that they’re a stressful part of our everyday lives.

A recent example of design being used to ease the pain of forms is Funnel, a survey tool for iOS and Android.

Using Funnel for customer satisfaction surveys

Funnel uses an approach designers commonly take to the form problem, which is to make the process feel more fun and playful in the hope that users will warm to it. What’s the rationale behind this approach? Is it really more fun to fill out forms that are designed like this?

Making traditional form interactions look nicer

The interaction models are pretty conventional, just designed in a way that makes them less intimidating (assuming you aren’t intimidated by large smiley faces, of course). While this layer of design might be dismissed as superficial by people who focus on functionality, it definitely matters. The visual layer provides users with a subconscious cue as to the type of activity they’re about to undertake, and this will in turn affect their emotional state as they embark upon the activity.

Imagine two different signup forms, both asking for the same set of personal information, except one has been designed for a mortgage application process and the other for a music-oriented social networking site. They might even use the same set of interaction models – dropdowns, calendars, radio buttons – but we’d be surprised if the visual execution was identical. The mortgage provider should use visual design to convey an appropriate level of seriousness; after all, entering the wrong information may lead to rejection, or might count as fraud in extreme cases. However, this level of seriousness would seem oddly intimidating in the case of the social networking site.

Guess which one of these forms is a mortgage application

But is it enough to focus purely on the visual execution of forms, as Funnel seems to do, if we want to make them less painful? The visual, aesthetic layer design is slightly problematic in that it’s very culturally sensitive. A design that suggests playful informality in one part of the world might seem downright childish in another. This layer is also very subject to changing trends – a visual style that seems contemporary one year might become dated and corny very quickly. So perhaps it’s time to tackle the problem of forms at a deeper layer than purely visual design.

What are forms for? To gather information from users. Do we always need highly specific and granular data? No. Are we still dependent on keyboard, mouse and touch inputs? No. Can new devices and the data they can gather fundamentally change the form-completion process? Maybe.

Imagine a mobile form that works like a theremin, where the user lifts their device to change the value of a field, or tilts the phone to give a thumbs-up or thumbs-down. Imagine a restaurant whose mobile app gathers feedback not with a slider, but by having customers express themselves with a smile or grimace and then taking a photo and algorithmically “scoring” their satisfaction. Imagine a rail company using location data to invoke a customer satisfaction survey when a journey ends, referring to timetable data to work out if the train was late and pre-populating the form as appropriate.

Some of these ideas may be less far-fetched than they sound at first. For example, the Happy Things project for Mac OS detects when you smile and automatically takes a picture of your face. It’s becoming easier for software to gauge our emotions as well as our location.

There’s a lot of scope for innovation in the way systems gather input from users, especially where mobile devices with richer contextual awareness are concerned. The process can become more powerful as well as more playful, as long as we continue to challenge ourselves as an industry and as designers. Why not exploit these capabilities instead of – or as well as – making checkboxes feel nicer?

Over the last month I’ve been following a new(ish) trend in web design that I call “the ribbon”. I’ll show you some real-world examples shortly, but first here’s a mockup illustrating the basic idea.

Bunsen's website, using straightforward boxes

Here’s the homepage of Bunsen’s. The designer has separated the list of links (“log in”, “sign up”, etc) from the main content of the page by putting them in a little box. This is fairly standard practise, and works well enough.

But now let’s imagine Bunsen’s wants to refresh their site design. “Can we make it a bit more 2010″, they ask the designer, “without really changing anything”? It’s at this point that the designer might reach for the ribbon and produce something like this:

The ribbon to the rescue

It’s nothing more than a positioning adjustment, drop shadow, and a little triangle, but it makes the “links” box look like it’s been draped over the larger one. The design has a bit more depth to it even though the change is purely at the visual layer (as opposed to structural or functional).

Now that we’ve seen “the ribbon” in its basic form, let’s look at some screenshots of real “ribbons” found in the wild.

Avaaz.org

The first is from online activism site Avaaz.org. The “ribbon” is used for the box’s title, “Sign the petition”, and probably helps it compete for the user’s attention with the main image to its left:

And here’s a close-up:

Vodafone

The next one is from Vodafone, and was used on their “12 Days of Smiles” campaign site in the run-up to Christmas. You might remember this campaign for its ill-fated #mademesmile Twitter stunt. After all it generated more press than this ribbon did:

Vodafone's festive campaign site

Close-up:

A decidedly festive ribbon

What’s interesting about this ribbon is that it definitely has a seasonal dimension. The cut-out triangle at the edge intentionally references festive ribbons (wrapped-up presents, mistletoe, etc) to make the campaign site more Christmassy. I guess that working with Vodafone, you can’t evoke a yuletide atmosphere the easy way by using lots of red: it’s their main colour after all. So “the ribbon” is a handy gimmick here.

Western Union

This ribbon example from Western Union is also intended to have festive connotations, I think, but it’s not as explicit. You’ll notice that that isn’t from a website but from a poster campaign (yes, this is my attempt at being “cross-media”):

Western Union poster near Kensington Olympia

The final two examples aren’t festive, but instead show the ribbon being used by companies that want to appeal to an early-adopter, urban, techie kind of audience. If “the ribbon” is to the early 2010s what the curved-border gradient button was to the “Web 2.0″ mid-2000s, these sites are at least partly to blame.

Foursquare

The first is Foursquare, who have used “the ribbon” pretty sparingly. It makes an arrow leap out of the screen slightly, but it’s not very prominent:

The Foursquare "arrow" ribbon

The next example is far less subtle, however, and is the most extreme use of “the ribbon” that I’ve found so far.

Notion Ink

Here’s the website of Notion Ink, the company behind the forthcoming Android-based Adam tablet. They’ve had a lot of attention over the last year and its old Flash-based site was rightly criticised for looking like a bit of a relic. So they launched this new site shortly before making their product available for pre-order:

Click the image to see in full size

A fairly normal “ribbon” crosses the header of the page, acting as a backdrop for the primary navigation links, but after that it goes out of control, bouncing around the page’s background like a 3D game of “Snake”. In fact the ribbon pretty much is the design – apart from the slightly discordant bird, there is no graphical (e.g. not text or video) element on this page that is not part of the ribbon.

Here’s another page from the Notion Ink site that shows the “ribbon” off to maximum effect:

Hyper-ribbon!

This ribbon seems to extend very far into the space of the screen, emerging from the distance to jut in front of the Adam tablet and the main text box. The page title (“The Philosophy”) is the only element that remains in front of the ribbon. This is the most extreme use of the ribbon I’ve found so far.

Conclusion

Is the ribbon a good or bad thing? I can see why some designers like it – it helps situate screen elements in a quasi-3D space, contributing to “user illusions” of spatiality that computer interface designers have been relying on for decades. But it could also become a modish gimmick, something designers lazily reach for when asked for “something that looks a bit more Web 3.0″. Maybe there’ll be a ribbon backlash. Or maybe it’ll become a strictly seasonal piece of design frippery, used only for festive campaigns as in the Vodafone example.

What do you think about the ribbon? Is it something you’ve noticed yourself? And if you know of any more examples of it, let me know in the comments.

(Edit: less than nine hours after I posted this article, Yahoo! announced plans to shut down Delicious. I guess there’s a reason why people call Yahoo! the place good ideas go to die)

If you haven’t heard of Delicious, all you need to know is that it stores your bookmarks on the web. This is handy because you can access them from anywhere and share them with other people.

Delicious used to be pretty exciting. Social bookmarking, tagging, RSS feeds – the potential seemed mind-boggling. But then Yahoo! bought it and it started losing its edge. Nowadays there isn’t much excitement about Delicious, but it’s still useful.

One thing that makes Delicious particularly useful is the availability of various browser extensions. These extensions put a little button on your browser, allowing you to add and tag a page really, really quickly. Because it’s quick to add a page, you find yourself adding more pages – and the more pages you add, the more useful Delicious becomes.

I use the Delicious extension for Google Chrome quite a lot, but I think I hate it. Here’s what it looks like:

So you click on the “tag” button,  and then this appears:

So far so good. But when you use this several times a day, you’ll notice some annoying and even hateworthy things about it.

The first thing is that it has no persistence. If you’ve typed a brief, witty description of the page in the Notes field, and then carefully selected some tags to go with it, you don’t really want to go through that process again. But if you accidentally click outside the extension, that’s precisely what you’ll have to do – because it forgets what you’ve entered! Having to re-enter stuff I’ve already typed isn’t something I enjoy, even when it’s a relatively small amount of text.

The second thing I hate about it is the placement of the Save and Cancel keys. You’ll notice that Cancel is in the bottom right, which is slightly unconventional – primary actions (Submit, Confirm etc) are usually placed to the right in forms like this. They’re also very close to one another. These two design choices conspire to make it a little bit too easy to hit Cancel by mistake – especially when you’re working quickly. Hitting Cancel closes the extension, meaning that – you guessed it – anything you’ve typed will need to be typed again.

So these are the two reasons why I hate the Chrome extension for Delicious. If it remembered the stuff you typed, however, I would probably love it. This shows how fine a line there is between love and hate in user interface design, or (more likely) how much of a pedant I am about these things…