Web Design for Optimal Interaction: Defining & Developing the Modern Customer Experience

If it is becoming increasingly apparent that those leading their respective verticals have an unwavering focus on the quality and usefulness of design, you’re not alone.

Today’s consumer is more demanding of compelling and engaging experiences and less tolerant of websites that don’t meet their often lofty expectations. From the standpoint of the modern enterprise, that can be a double-edged digital sword. While it certainly requires a greater investment of time, talents, energy and resources for enterprises to create a digital presence that truly connects with an audience, end-users (website visitors) are also more accessible and available to target than ever before – and in many ways, easier to convert. And that’s the reason you’ll find Vince Vaughn on the cover.

Website Magazine’s website analytics data shows that behind “technophiles,” the affinity category seen most often in its monthly reports is that of “Movie Lovers.” Website Magazine also knows that nearly 80 percent of its audience is between the ages of 25 and 54 and that 68 percent are male. Showing Vince Vaughn on the cover speaks to the majority (by a wide margin) of our audience who 1) know of the person on the cover (and can likely relate to him) and 2) realize the occasional absurdity of the stock images Vaughn and his Unfinished Business movie cast mates are openly mocking (which only a true technophile would really be able to do). What does this have to do with digital design? In a word, everything.

Knowing users and their interests in this manner enables companies to develop the types of content and kinds of experiences necessary to secure genuine user engagement. Designing an end-to-end customer experience on the Web – one that facilitates interaction and ultimately conversion – is no easy feat, however. Today’s savviest companies are providing digital experiences that introduce prospects to the brand in practical ways - both tactile and cerebral – in an effort to accelerate their ‘Net success. It’s necessary for today’s companies to let people know about their business and brand, to establish a presence and encourage involvement and design is perhaps the most powerful means by which a business can do that. There are more digital touch points today than ever before, and more opportunities to engage in the customer experience. Today’s Web designers are responsible for more than just defining and developing a digital presence, but helping to secure the success of an enterprise. If brands want to be knowledgeable and personable, as well as likable and trustworthy (not to mention compelling), it will become clear that designers and developers play a pivotal role.

In this month’s Website Magazine feature, we’ll address the digital design processes, approaches and characteristics that brands’ websites must employ and possess if the aim is better reputation, greater influence, and increased conversions. Readers will also be introduced to some practical tactics that can be used by designers to deepen the engagement necessary to accelerate ‘Net success.

The Role of Experience Mapping in Modern Digital Interaction Design

At this point, it is important to realize that good design is driven in great part by end-users feeling a connection (with the product or brand). As designers, how can you reach that often elusive state? Is it possible to effectively translate common and popular design principles into a digital interface? If so, it will likely depend on the execution of some often-forgotten fundamentals.

First and Foremost, Know What Should Be Accomplished

Designers should never work alone, meaning they need support from every corner of the enterprise – particularly as it relates to understanding goals and objectives of prospective users and customers. Establishing personas and user scenarios based on those personas is a great start as they force designers to more fully explore the elements in which product interaction occurs. What we’re after here is a better and more complete picture of the entire experience: the user, the scenario, and the entire emotional journey that is taking place – and the best way to do that is to actually map out the experience.

Experience mapping is a strategic, collaborative, iterative process of capturing and communicating (as well as synthesizing and visualizing) complex customer interactions and experiences. The activity of mapping provides useful insights, and the map itself can be used to chart new courses of action and build more seamless customer experiences over time.

Learn how to develop a more engaging and effective experience with Website Magazine’s Quick Guide to Experience Mapping.

Knowing as much as possible about the customer and their “experience” journey is only half the battle however. Brands must also know what the pain points are, the likely paths a user might take and what the barriers to conversion might ultimately be. There has to come a point when designers turn their attention to actually making the experience a customer has as valuable as possible – which means making them usable, obvious and useful.

The Basics of Usability and Types of Affordances

Keep in mind that our aim here is really to discover ways that websites can optimize interaction through design. Ultimately, that will demand that the fundamentals of interaction design be addressed (with a special focus on usability) as a website that can’t be used as is required won’t inspire an end-user to visit or use with any regularity. It only makes sense that the less mental energy a user must expend figuring out the nuances of a system, the more they can spend accomplishing the task (and opportunity) presented to them.

How can today’s digital brand succeed in this regard? One way is to consider what specific elements on a page are conveying to users (and how they are doing that). In design parlance, this is referred to as affordance.

Affordances are simply clues about how objects should be used – and are often provided by the object itself or that object’s context. Affordances are essentially about setting up expectations and then delivering on them – and they are pretty much everywhere in the digital world. A good example is that of a ‘submit’ or ‘buy now’ button. If these buttons were only text, it would be difficult for a user to tell that it is interactive and performs a specific function. If the text were surrounded by a color background and was offset by a shadow, however, an end-user would be more likely to use it as they have the expectation that it will.

There are, in fact, many types of affordances, and if you’ve spent any time on the Web whatsoever, you’ll be familiar with many – if not all – of them.

Labels, for example, are a very direct type of affordance and are very useful in complex interfaces or those which include abstract concepts as they are meaningful ways to indicate function. Imagine if a Web form had no labels and you were expected to know what to type into each field. Every Web form is a little different, so there’s no pattern you could follow. You might still be able to rely on form validation and go through a process of trial and error, but it would be incredibly frustrating. Labels help people organize and understand the choices that are being presented to them. It may not always be the most aesthetically pleasing affordance, but it is the most clear and precise method of communicating functionality.

Iconography is another powerful means of affordance and one that is quite familiar to end-users and designers alike. Icons are often used as a replacement for actual words, and are used to convey meaning. The problem with the use of icons alone, however, is that it is essential for users to understand the underlying meaning for it to communicate effectively. If you don’t know that a wrench represents tools, or that an envelope represents email (in the digital world), then these symbols are meaningless (rendering your site effectively unusable).

Ultimately, what designers must understand (in relation to affordances) is the point at which a design element goes from decorative to essential/functional. When the objective is to develop optimal interactions, functionality follows form. Consider for a moment what various design elements on your own website are conveying to users. Is there room for doubt or confusion? If so, it’s time to make adjustments and dive into the digital details.

The Digital Darling in the Design Details

Although website design has come a long way, it has still not replaced direct communication. Users still need assurance that there is a human being on the other side. While many users may not notice one or two details in a UI, they can definitely feel the accumulation of those efforts.

Frank Chimero’s book “The Shape of Design” illustrates this quite well:

The warmth and exuberance of communication and the accommodation to the audience necessitated by delightful design also makes it easier for the audience to spot the presence of the designer in the work. The work becomes more humanized in its tone and effect, so it becomes easy to see that there are people behind it.

So, to what details can a designer turn their focus? There are, in fact, several approaches that can be used to move beyond the visual alone to a more immersive experience for the customer, including sound, movement and words themselves.

Sound, for example, can be used as recognition of the user’s success, reinforcing other visual cues of the same state. Sound affects end-users in many ways (physiologically, psychologically, cognitively and behaviorally) and can be applied to Web and application interfaces. Mastering the use of sound in order to provoke emotion will likely become an increasingly popular trend in the future.

Animation is another technique that can be leveraged in user interface (UI) design that can help brands stands out and improve the customer experience. The secret in animation is in replicating our personal experience so interactions feel realistic. And, these principles are often best applied on a micro-level. Apple Maps’ pin drop feature, for example, feels quite authentic, as if you placed the pin there yourself. Falling slowly at first and then quickly dropping into place.

While a seemingly very obvious way to communicate, the use of copy is undervalued and often overlooked. In our rush to replace popular actions with iconography, sometimes copy can be equally powerful. Codecademy, for example, uses a text field to encourage users to immediately interact with the platform upon their arrival. This was a subtle but highly effective way to teach users how to use that interface and increase engagement with the design application.

By using sound, animation and copy, designers can provide website visitors with opportunities to establish attachment to the brand and its products. The future of design is about emotional awareness; connecting us with products the way we connect with each other. Design is no longer about how interfaces look, but rather understanding how people behave in relation to the technology presented.

Where to Begin When Optimizing for Interaction

Developing a digital presence isn’t easy and it is not going to be for the foreseeable future. What today’s enterprises can and should do is turn their attention to users (and prospects); focusing on the totality of the experience, the usability of their digital product and never lose sight of the importance of detail when establishing a genuine connection.