Google logo above reception

Sketchy behaviour at Google

Google logo above reception

Cropped image because my iPhone camera just couldn’t do justice to the view over London from reception at Google towers

Jason and Sam visited the big G on Tuesday to run a workshop building on the hugely popular Sketching Interfaces session they did at Interactions12 (Dublin) and HCID (London), earlier this year.

Even though the Googlers rated themselves a mixed bunch, in terms of confidence and ability, there was some impressive sketch action on display throughout the session.

post it notes showing how workshop participants rated their confidence and ability (before the session)

Despite the spread the standard of sketching at the session was pretty high

We had designers battling with producers and developers in live sketch-offs and the smiles even lasted when Sam sent them all back to school and gave them lines (to practice their labelling skills).

The tips and tricks were popular as ever and Sam’s custom rubber stamps (sketch it nicely once, stamp it as many times as you like) were a real hit.

2 of Sam's custom gesture stamps (great for cheating at sketching and user-testing sessions alike)

2 of Sam’s custom gesture stamps (great for cheating at sketching and user-testing sessions alike)

Huge thanks to all the guys at Google who made it a really fun session to be part of.

Imagine the form of the future

If you had a time machine (and didn’t have anything better to do with it) and travelled back to say, 1997 and brought back a bunch of forms from webpages and applications, and then compared them to the forms we’re using today, it might be difficult to tell the 2 sets apart.

Branding aside, forms haven’t moved on much in the last decade or so

Fifteen years down the line and the way we capture data online and in applications hasn’t fundamentally changed all that much. We’ve refined the process bit by bit, and thanks to folks like Luke Wroblewski and Chui Chui Tan we understand more about how to design more effective forms, but in terms of innovation the form remains firmly stuck in a circa 1997 rut.

The form is one of the basic building blocks that underpins the way we use websites and applications. It’s the gateway that allows us to build interactive systems and services on the web rather than limiting us to just consuming content. But the way in which we use the web is in the process of fundamentally changing, and this has to force us into looking at the way in which we engage with the web around data capture.

As mobile devices, and the infrastructure that they rely on, continue to improve and tempt more and more of us away from the desktop and laptop in our use of the web (through browsers and native apps alike), many of the lessons we’ve learned and relied on are having to be re-learned to work on devices with smaller screens and no physical keyboard or mouse.

Part of the problem is that we’re still using design solutions based on systems that were developed a decade and a half ago on devices that are not the same as those that we’ve ‘learned the rules’ for. Navigating and using a traditional form on a mobile device is a clunky experience at best. Putting aside the problems associated with non-physical keyboards, reduced screen real estate and touch-based navigation, many of the lessons we have learned about form design don’t work for mobile.  This hasn’t gone unnoticed and there are some additions to the established learning that take into account mobile device form factors and mobile user behaviour, but essentially these are just tweaks to the same old form paradigm.

Let’s face it, forms aren’t sexy. What they are is frustrating. No one relishes the prospect of filling in forms, in fact they are regularly cited as points of pain in user feedback. So why is it that something that has been so fundamental to our use of the web and something that causes so much frustration, hasn’t seen any real innovation in over a decade and a half?

As someone who works as part of a design team that specialises in complex, day-in, day-out applications I come up against a lot of form-based interaction. I’ve read Luke’s book and Chui’s excellent blog posts and try to incorporate the benefit of their learning and experience into the forms that sit within the systems I design. But a recent project prompted us as a team to think about breaking away from the traditional and thinking about how we might capture data in the future – on the assumption that surely we won’t still be using the same old forms in another 15 years.

We spent time thinking about alternative means of capturing data that weren’t necessarily tied to keyboard entry. We covered our studio walls in sketches and ideas that used voice recognition, gesture, 2D barcodes and QR codes – even ‘magic’ pens. But we also tried to look at how we could improve the data capture experience without relying on these things.

Amongst some of the more future-looking ideas we spent time refining several ideas based on how the form itself might be improved as well as the means of entering data. After all, not everyone has an iPad or a Wacom Inkling and regardless of how groundbreaking our ideas are – the majority of people will still be using a keyboard (or touchscreen) to fill in forms for a while still.

We wanted to design a form that wasn’t tied to a linear process and that allows the user to enter data at any point and in any order. We had seen similar form-based interfaces as part of field-based observation but for all the benefits that the structure of the form gave, the fact that every single field was displayed on a single screen with no visual hierarchy and the most basic of styling, convinced us we could do better.

From many concepts, we are in the process of refining an idea that allows complex forms to be created in the back-end, but that strips out the complexity in the front-end and places a focus on just the field that is being used.

We want to show that it is possible to create a usable and beautiful form that doesn’t fit the traditional mould. Our thinking is based on:

  • Focus – stripping out any distracting or irrelevant content and only showing what is required at each stage
  • Flexibility – creating a structure that wasn’t reliant on the user following a prescribed, linear process
  • Working with the user, not against them – inspired by old-fashioned greenscreen systems that seemed to be well-suited to data entry
  • Shortcutting – predictive data entry, short codes and keyboard shortcuts that support expert users without compromising the novice user experience