UX Magazine

Defining and Informing the Complex Field of User Experience (UX)
Article No. 645 March 30, 2011

Defining the Interactions

Since the dawn of web development (an ancient time, when FrontPage walked the Earth), the Web has been transformed. Conceived as a simple document transit medium, it has become a responsive and dynamic communication tool used by hundreds of millions of people every day. Naturally, the techniques and tools used to construct websites have seen constant and persistent development.

Jargon can change just as quickly. From DHTML to Web 2.0, to Ajax and now HTML5, each concept has played its part as the rallying cry of web developers seeking to drive the Web in an ever more social and interactive direction.

Such sea changes in methodology as we have seen (and continue to see) in this industry have a profound effect on the development process itself. As the focus of development has shifted, the roles and skills of individuals have adapted with them. However, while the nature of online interactions has changed, the methods used in their creation have not kept pace.

What Are Interactions?

Simply put, an interaction is the point of contact between a user and an interface—the moment where an action by the user (scrolling, clicking, or moving the mouse)—is met with a response. These can be instinctive actions by the user (moving the mouse is the best example of this) but often the action is considered and intentional.

The importance of UX in crafting effective websites is rapidly gaining recognition across our industry. Interactions are central to the principles of UX; they can provide both feedback and comfort to the user, and the chance to surprise and delight. It’s important that focused attention be given to the dynamic potential of the sites we build so that these opportunities are not missed.

Today, many sites are pushing the envelope of dynamic interactivity (and consequently, user expectations), such as:

Historically (if you can use such a term, in an industry that’s younger than most of the people working in it!), interactions were easy to define and design for; color changes and content toggling can be added as afterthoughts to primary development without significant knock-on effects.

Today, driven by the ease of powerful Javascript libraries and shiny new CSS browser capabilities, new levels of responsiveness and interactivity are being reached. But, more often than not, the defining characteristics of such interactions are being determined not by designers during an interaction design phase, but rather by engineers when the website is being engineered.

Why Does This Matter?

With consistency and a lovingly crafted UX at stake, interactions—which are often the most memorable part of a user’s experience of a site—are too important to be constructed ad hoc. Interaction design needs to become a key consideration at the heart of the design and concepting stages of product development.

What Can We Do?

The SXSW Beercamp and Ben the Bodyguard sites have a level of interactivity so fundamental to their appeal as to entirely define the sites. They could not have been created by processes where interactivity was just sprinkled on top. To conceive, design, and build truly interactive sites, one or all of the following need to occur:

  • Encourage collaboration between IA/UX, design, and engineering. This needs to be the starting point for interactive development. The sharing of ideas, requirements, and issues can heighten everyone’s thinking, raising the bar on what can—and should—be achieved. These conversations should happen regularly, but more importantly they should happen early, and be another tool used in solving creative problems.
  • Train designers to think interactive. Many designers today are keenly aware of the interactive potential of the Web. But there are still many designers creating web pages as flat PSDs with no forethought as to the dynamic creative solutions available.
  • Bring in a specialist. This role—be it an interaction designer or a similarly specialized person—should not replace the collaboration between disciplines, but rather supplement and bind them. In the short term, however, gaining financial support for new roles can be difficult to achieve. Before creating new roles, it’s also important to ensure that the existing project process can accommodate the additional conversations and development time they may bring about.

How a company adapts to facilitate these changes depends on how deeply entrenched the existing process is, and how much scope there is for new roles.

Changing the Tire, Not the Wheel

Change can take time and often involves a lot more than simply bringing issues to light. In the meanwhile, less fundamental changes can be made to improve the situation. For example, Cennyd Bowles (a UX designer at Clearleft) advocates using interactive wireframes (rudimentary, block-level HTML pages) in place of paper-based concepts as a more visual and tangible way of simulating interaction.

Similarly, tools such as Flash Builder enable speedy and dynamic wireframing, including simulation of transitions and motion.

Even more lo-fi techniques exist, too. Presentation software (or even PDF documents) can be used for storyboarding, with key frames of animations shown on sequential slides. Techniques like this are important, as they allow designers to share interactive concepts (remotely, if need be) quickly and easily, and in a way that is easier to relate to than flat wireframes.

In Summary

Users of the Internet today expect an interactive and engaging experience—and so well they might, as more websites blur the boundaries between web pages and native applications, and supply the user with ever more powerful tools.

But not every website needs to “chase the rainbow” and make interactivity a primary concern. Instead, teams need to have in their arsenal the power to conceive and deliver creative, consistent, and engaging interactive websites. This requires balanced input from skill sets across the full team of website creators.

Interactivity is increasingly important to UX, and giving it due consideration is the first step in creating an experience that can charm users. Succeeding in this could just be the difference that gets users to make themselves at home in a site instead of heading back to Google.

ABOUT THE AUTHOR(S)

User Profile

Tom Bran is an Interface Developer with a passion for user experience and crafting memorable, usable and dynamic interfaces. He currently lives in London, England, and works for Agency Republic.

Add new comment

Comments

Just a short remark: It is of crucial importance to take the users knowledge and experience into consideration when designing new interactions. In the more or less static WWW various affordances and conventions existed: links are blue, links are underlined, when hovering links the mouse cursor changes, and so on.

How do these mental models of the users change when websites get more and more dynamic? What behaviour do users expect from dynamic web sites?

I - as an User Experience Engineer - expect the following from a website:

http://2011.beercamp.com/ I personally expect scrolling when I move the scrollbar - not zooming.

http://benthebodyguard.com/ It took some time before I started scrolling (first I searched for links in the upper part of the page).

http://tedxportland.com/ A good way of combining the "new" scroll metaphor with a classic navigation.

These websites present innovate and fresh ideas. Regarding usability, however, there is still some room for improvement.