We don’t know who made this image – please tell us if you do

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:

Pattern recognition also comes into play when we’re using websites or other interactive systems, and is therefore something that interaction designers work with every day.

Computer systems are complicated things, containing so much logic and data that to fully understand them might take several weeks or more. But when someone uses a computer system they don’t have that much time, and they don’t need to understand the system in its entirety – they only care about the bits that are relevant to them.

As interaction designers we’re often challenged with making sure users understand the systems we design without having to absorb a lot of information about them. Three major constraints apply:

• Users have limited time – they often want to complete a task in a matter of seconds
• Users have limited screen space at their disposal, so the element we’re designing can’t be too large
• We can’t expect users to have trained themselves in using our system: RTFM is never an option.

Pattern recognition helps overcome these constraints by helping users fill in the gaps between what they perceive (the pixels on the screen) and what they’re actually dealing with (a horribly complicated computer system). For example, the user might see a grid of numbers between 1 and 31 and a couple of arrow icons…

…but if the designer’s done a good job, the user will almost immediately ‘see’ something much more complicated and intricate:

In this way, pattern recognition helps the user extrapolate from a simple graphic to a complicated range of functions without having to read, think, or experiment. Very little information has been exchanged between the system and the user, but she now has a detailed mental model of this part of the system and will be able to use it comfortably.

Pattern recognition isn’t always beneficial, of course. If a design element plants expectations in a user’s mind which it doesn’t go on to fulfil – if, say, clicking “December” in the calendar above did something other than show a dropdown – this can lead to a jarring experience which is known as cognitive dissonance. It’s important for designers to remember that the people who use their systems are always looking for patterns subconsciously, and if the design isn’t well thought out these users’ brains can easily be sent down a wrong and frustrating path.

The example of the Lego Maggie Simpson shows how easy it is to get a pattern wrong. Imagine there was one more blue brick, or if the yellow was replaced with brown – the illusion would be completely shattered.

As designers, we have to think about getting the minor details right if we want to make pattern recognition work in our favour. And if we fail, our users won’t ‘see’ the forms, structures and connections behind the systems we create – they’ll just see a small pile of randomly selected Lego bricks.

Q: Tell me about the activities you participated in?

Kriss: On each of the two days I was the ‘Business Facilitator’ to a group of 8-10 Year 10 students. They were tasked with designing and pitching a new mobile app that allows young people to design their own t-shirts. The end results, in addition to various target setting and planning exercises, were a logo, a 60 business pitch, and a 60 second Youtube advert.

Q: What was your role?

Kriss: I was there to support and assist students in completing the tasks. I talked them through each task that was set, seeding ideas where they began to struggle, and encouraging students with their own ideas. Together, we defined group goals and personal goals. In the second half of the day, I took on more of a chairman role, ensuring that we stayed motivated and on time whilst preparing the business pitch and Youtube advert.

Q: What did your team create?

Kriss: My first team created an app called Marvin’s Tees. The second created O.T.Tees. Both apps were fairly similar in functionality but differed in their approach to the pitch and advert, some going for funny and some going for detailed and informational. Because of the audience (i.e. the rest of the school kids) the funnier stuff worked better.

Q: What did you learn?

Kriss: Largely I was surprised at some of the ideas that the kids came out with—things that I hadn’t thought of myself—that would be particularly effective in marketing their app, such as sponsoring a non-school uniform day in order to target a 14-24 demographic.

Q: What would you like to say to people considering volunteering in schools through The Tower Hamlets Business Partnership?

Kriss: This experience definitely exceeded expectations for me and was a wholly enjoyable couple of days. I won’t pretend that all of the kids were 100% interested the whole time, or that I didn’t find it frustrating when they fell short of what I thought they’d be capable of doing, but most are genuinely interested to try and find out about what you do for a living. Give it a try!

Kriss Watt from Tobias & Tobias volunteered through Tower Hamlets Education Business Partnership http://thebp.org.uk/

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?

At Tobias & Tobias we can’t solve problems like climate change, greenhouse gases, the extinction crisis or the crude oil soaking the Louisiana coastline. But we can do our part.

We’ve been trying to persuade staff to waste less paper, use less energy, and send less waste to landfill. To do this our design team has created a poster series called Green Tips that we’ve placed at strategic locations around the office. They’re irreverent, not po-faced, and we thought we’d make them available to the world at large.

Green Tips posters are available in PDF format for easy printing. Just right-click on the thumbnails below and select “Save As”.

Green Tip #1 – Save Paper (Download PDF)

Green Tip #2 – Your Machine (Download PDF)

Green Tip #3 – Recycle (Download PDF)

Below are a collection of resources to get you going down the information architecture and data visualisation path. Whether you just want to become more familiar with infographics and data visualisations for occasional use or are thinking of making it a career, the resources below will surely come in handy. There are also some beautiful examples and more roundups to see even more fantastic graphics.

http://www.noupe.com/design/fantastic-information-architecture-resources.html

Lessons From Swiss Style Graphic Design

Gorgeous Typography Examples in Advertising Design

27 Bold and Beautiful Brochure Designs

Breathtaking Typographic Posters

33 Breathtaking Letterpress Designs

Showcase Of Beautiful Vintage and Retro Signage

Gorgeous Examples of Floral Typography