10 steps to an engaging interactive user experience

Irene Pereyra, director of UX and strategy at digital agency Fantasy Interactive, rounds up 10 top tips to help you deliver an amazing interactive user experience

These days, building websites or applications that attract and retain customers has become somewhat of a science. For people who aren’t well versed in the digital space, I often compare the work that I do as a UX designer to an architect. Like the architect who builds your home, my UX team builds a comprehensive blueprint, which outlines every single detail of the site’s features and functionality.

But it’s not a one-shot deal. Getting to an intuitive and engaging user interaction requires many steps. Here’s my top 10 tips to help you deliver an amazing interactive experience for your users.

1. Design for the user, really

Back when online interaction was still in its infancy, and not much thought had been given to whom we were designing for, users were all too willing to spend their time learning the interaction required to complete tasks on websites. If users were confused, people often assumed they just weren’t tech savvy or well-informed on how to navigate the internet. As more and more websites, mobile devices and tablets started popping up; users weren’t as willing or patient to “learn” on their own. Nowadays, you’ll see more users becoming frustrated and even angry when they feel a product, application or website is substandard – and rightfully so.

It’s tempting to design with your own preferences and tastes in mind. But that won’t help users complete tasks on the site if they have a whole different set of preferences and needs. Think about what users want to do and help them complete those tasks in the easiest and most intuitive way possible. Are they browsing? Searching? Gaming? Watching video? Trying to complete a task? Looking for specific content? It’s the UX team’s job to look at the entire experience holistically and make sure that users’ needs are always met.

It’s this “design for the user” strategy that shaped every decision we made on Civil War 150. The biggest challenge with this project was the huge amount of Civil War related facts and statistics. To make it fun and relatable, we used colorful infographics to guide users through the top 150 Civil War related topics including Who They Were, Weapons of War, How They Died, 5 Deadliest Battles, Paying for the War and West Point Warriors. By giving users what they want, learning about the Civil War becomes richly engaging, informative and fun experience for hardcore Civil War fanatics and 7th grade history students alike.

2. Do your homework

Listen and absorb. The more conversations you have with clients, the better informed you’ll be. Dive deep into every piece of documentation, research their field, examine all content with a fine-tooth comb, understand the client’s goals, document thoroughly all of the client’s wishes (no matter how small) and talk to as many people across as many departments as possible. Only then will you have the most complete and accurate picture and be prepared to move to the next phase of the project.

Another crucial part of listening comes from doing a thorough analysis of what competitors are doing in the same space. Are there any innovators that you can learn from? Have they made any mistakes you want to avoid? Is there one universal component that ties all of them together? Were there any missed opportunities? Use the answers to these questions as inspiration in your own project.

The types of sites you may look at during this analysis phase can vary dramatically. You could even look at sites that sell cat food as points of reference when designing an application for audio equipment. It’s still relative and can be helpful because the user behaviour could very well be the same for cat food sites and audio equipment sites. Either way, you can learn valuable lessons from UX best practices across completely different industries and form factors.

3. Be an advocate for the user

We often think of the user as our client, though it’s not entirely true. In any project, there are sets of business objectives that need to be met and it’s the UX designer’s responsibility to meet those objectives, while at the same time informing the client about the user’s needs. That’s why the greatest digital projects are often those where there is a perfect equilibrium between the client’s objectives and the user’s needs. Sit on that fence, and balance well.

4. Forget about Nancy, think user types

Personas are vital when it comes to structuring the content. Look at all the content holistically and think about what people are trying to accomplish. Doing this helps prioritise the content and allows the site to be structured around the user’s goals. But traditional personas – “Nancy, who is 28-35 years old, drives an economy car, has a four-year-old PC she primarily uses for email, earns between $30K-$50K a year and wants to comparison shop for a cheap airfare to visit her mother in Florida” – won’t offer much insight into the user’s actual behaviour.

Instead, group basic User Types into categories according to what they want to do on the site such as “browsing,” “comparison shopping,” “killing time,” “looking for specific content.” These groupings will provide you with much more useful insights about why users come to sites or applications, the context of use (where and how), what content they’re seeking and how much time they have. In turn, you’ll be better equipped to design the website or application around their behaviour patterns, thus making their fictional names, ages, professions and income levels irrelevant.

5. Less really is more

You may think this is obvious and doesn’t need further explanation. But most sites and applications still manage to get it wrong. The key is to cut down tasks required by users to the bare minimum. I can’t stress this enough. Get rid of all that extra clutter that doesn’t add value, or worse, distracts and confuses the user. Know exactly how you want users to travel through your site or application and then guide the user as if you were holding their hand through the entire process. Again, users want things to be as simple, worry-free and fast as possible. If they can see what’s coming next before even clicking on something, they’ll be happy users.

To give you an example of using the “less is more” strategy, we worked together with Google on a project called 20 Things I Learned About the Web and Browsers. The challenge was to take the tactile experience of reading a book and reinvent it for online users. Using interactive features such as instant search, animated canvas page flips, enhanced canvas illustrations, offline mode, bookmarking and lights out mode, we made it simple, fun and informative for users to learn about the web and browsers. By focusing on what and how users wanted to travel through the website, learning about the web and browsers became enjoyable and informative for users.

6. Pretend you’re working for Fisher Price

Our CEO David Martin has this saying – and it’s really resonated for me. “All interaction should feel like Fisher Price.” In other words, when you make things bulky and oversized (like most children’s toys) and design digital experiences for “fat fingers,” it will automatically be easier to use. So how do we translate this to designing engaging and interactive user experiences?

Rather than using the standard input fields, radio buttons or checkboxes, try using big buttons, jumbo sliders and giant input fields. You’ll see user engagement increase and bounce rates drop. Isn’t that what all UX designers strive for?

Labeling is also extremely important. Whenever you ask users to provide information, try to use cheeky, simple, and to-the-point terminology so that it will feel less like a hassle. The result will be that users will feel more emotionally compelled to complete the process. And that could mean a boost in signups, web traffic, online sales and ROI.

When a 9.0 earthquake struck Japan earlier this year, earthquake relief efforts and support poured in from around the world. Working with Google, we created a platform for the global community to share their Messages for Japan. Taking a cue from Fisher Price, the site featured big buttons to group messages into categories of “Love” and “Hope”, as well as giant input fields asking users to “Write Your Message” and “Make a Donation.”

7. Take cues from tablets

Because you’re already limited by the amount of real estate on tablets, the need to simplify interactions is even greater. Ask yourself if your design would work on a tablet. If the answer is yes, you already have the two basic building blocks in place for a strong user experience: clear hierarchy and intuitive way finding.

These are the same questions we asked when we teamed up with CBSNews.com to create anelegant and visually rich online news experience for viewers of America’s #1 news program, 60 Minutes.

8. Design your UX

Adding placeholders for copy (lorem ipsum) next to some gray boxes underneath a row of navigation links does not constitute design. Visual hierarchy, content grouping, spacing, positioning and size are all things that should be solved in wireframes before a visual designer even sets eyes on it. If in your wireframes you’re working within the actual site or application width, and 12px text in your template is actually 12px in design, you’re on track.

9. Collaborate with all departments

User experience design alone is not enough to make great work and it will surely not provide all the answers. Listen, collaborate and become the liaison between the client, the user and the rest of your internal team. Only then can you create the best possible experience for the user while still meeting all business objectives.

Remember, you’re not alone. UX designers, visual designers and interactive developers all have a hand in making a project a success – it truly is a collaborative and multi-disciplinary effort. When it’s a shared passion and everybody pitches in with their level of expertise and voices their opinions, magic happens.

10. Don’t grade your own homework

The chance of you hitting the bulls eye with your first shot is very slim so be prepared to design iteratively as you gather more information about the performance of your site or application. One of the things that I am adamant about is that you should only do quantitative analysis on your own work. Tracking the performance and understanding where people are dropping off is extremely important and should be done in-house. But a third party should always conduct the qualitative user data analysis so you can truly have an objective testing environment. Doing this in-house is much like grading your own homework and won’t give you the depth of truth and insight that you’re looking for. If you want real objective answers, let someone else do the user testing and take those learnings into your next iteration.

Assessing the Team's UX Skills

"I didn't realize it required so many different skills," the newly-appointed user experience (UX) team manager told us. "I mean, it seemed so straight forward when we came up with the idea, but once we got into it, we kept realizing all the things we didn't know how to do."

Unfortunately, this isn't the first time we'd heard this from a manager. In fact, we hear it quite often. Managers embark on a project, say a redesign of a critical internal application, only to realize their team, proficient in a few skills, doesn't have the breadth of skills necessary to develop a quality experience. The result is an app that works, but frustrates the users because it doesn't quite meet their needs.

Migrating Away from the Specialists Approach

Traditionally, when an organization set out to build a UX team, they did so by recruiting and hiring individuals trained in the various specialties. The individuals, having studied and practiced in areas, such as information architecture, visual design, and usability research, were hired to spend their days applying these skills to solve the organization's design challenges.

However, most organizations couldn't afford such a team. Either they didn't have the budget to have someone dedicated to one area or they didn't have the workload demand to justify it. Since the specialists weren't really trained beyond their specialty, they couldn't easily be assigned other work. (And if they were, they often resented the vast amounts of non-specialty work.)

Organizations that couldn't afford a team would then "wing it", training the personnel at hand to solve the problems on an as-needed-basis. These individuals, not having the experience and solid work time to dive deep into a specialty became generalists who could do many things on a satisfactory basis, but few things as well as the specialists.

Yet over time, the specialties have become better at explaining what they do. Through conferences, a vast amount of well-written books, certificate programs, and online resources, the wealth of knowledge formerly only available to trained specialists is now generally available. Add that to the growing sophistication of today's projects, and today's best teams have generalists with experience and a level of knowledge on par with the top specialists.

Assessing the Team's UX Skills

Part of the role of today's UX manager is to ensure the UX team has all the necessary skills, at the best level possible. To do this, they need an easy way to assess the current skills of the team. Once they've got their assessment in hand, it's fairly straightforward to design a coaching and training curriculum to fill in the gaps.

To help managers with the assessment, we've created a simple 130-point scoring process. They can just walk through the various skill areas, rating their team on a 0-5 scale, based on the teams current level of competency. When done, they'll not only have an understanding of the team's overall effectiveness, but a clear idea of where to improve.

The assessment is easy to complete. For each of the skill areas listed below, a manager rates their team using the following scoring criteria:

5) Give your team a five when, for the given skill areas, every member of the team has in-depth knowledge of the area, knows how to perform advance functions, and readily applies the necessary skills to every project that requires them (which, in most cases, will be practically every project). Teams that score fives regularly send members to conferences and have reading groups and discussion forums for reviewing the latest advances.

4) Give your team a four when just one individual on the team has the above-mentioned in-depth knowledge and everyone else on the team has a basic knowledge and experience with the skill area. Teams that score fours are often collections of specialists, with each specialist training the other team members on the basics, so they can function adequately when the specialist is tied up on other work.

3) Give your team a three when everyone on the team has just a basic understanding of the skill area. They can perform rudimentary tasks, but struggle when they run into scenarios demanding more creative solutions.

2) Give your team a two when there is an individual in the overall organization with the requisite skills, but not part of your team. This shows the organization sees the value in the skill area, but your team hasn't made the case for having those skills locally. It's good to have the skills within the organization, but these skills are so critical, someone who reports outside the team can only have limited impact.

1) Give your team a one when you regularly hire outside contractors with the requisite skills. While hiring contractors is a fine short-term solution, their experience and knowledge goes home when the contract is up, thus forcing the team to continually seek more outside help. Our research has shown that few of the most successful teams hire contractors, and, when they do, it's with the intention of learning from the contractor's work and bringing the skills into the team.

0) Give your team a zero when there aren't any immediate resources available to the team for this skill area. Teams with zeroes regularly go without the areas at all or find themselves struggling when the skills become critical to the project.

The Core UX Skills

Now that we know how to rate the team, what do we rate them on? For the last few years, we've been studying the most effective teams, isolating those skills that make the most difference.

In our research, we've identified eight Core UX Skills. Teams directly apply these skills during the planning, design, and development phases to ensure the best possible user experience. The Core UX Skills are:

Information Architecture - Almost every design today involves organizing information, whether it's an online policies-and-procedures library, product information, or user-generated videos. Information architecture helps us organize that content in a way that makes it easy for users to hone in to the specific content they're seeking. Skills include understanding methods for organizing information, such as taxonomies, folksonomies, facets, and ontologies; techniques for deriving user hierarchies, such as card sorting; and creating design deliverables, such as site maps.

User Research - As we create designs, we need to ensure they meet the needs of the user. User research helps us collect information about who our users are, what they are trying to accomplish, what frustrates them, and what will delight them. Skills include identifying user population; techniques for evaluating design ideas, such as usability testing; and passing that information on to rest of the team members, so they can be making informed decisions.

Visual Design - One hallmark of good design is having a strong visual appearance. This is more than just aesthetic goodness, stretching into ensuring the priority of information is communicated visually -- the most important information jumps off the screen while more subtle details are visible, yet not demanding unwarranted attention. Visual design skills include page layout, form design, color selection, and icon design. (While not directly "visual", we consider designing for accessibility to fall into this skillset, as it focuses on much the same issues.)

Information Design - Presenting complex information for easy interpretation is key for a successful user interface. Knowing when to use specific table or graph types and using novel approaches for exploring detailed data sets, whether it's pricing information, product comparison tables, or trend charts, makes solid information design a core component of the design process. Skills include knowing when to apply the variety of chart and table formats, such as pie charts, hi-low diagrams, and cluster treemaps; how to create interactive data explorers, such as star fields and drill-down pivot tables; and working with combining multiple data sources, such as data-mining techniques.

Interaction Design - Modern applications have moved past filling out a one-page form and pressing the submit button. Instead, they are now complex interactions, combining business requirements with a easy-to-follow user flow. Interaction design skills include knowing when to utilize different application structures, such as hub-and-spoke designs versus interview flows; which design elements are best for certain types of information, such as when to use radio buttons versus drop-down menus; and creating design deliverables such as wireframes and design priority descriptions.

Fast Iteration Management - Today's best organizations are constantly learning from their designs. Instead of projects taking months or years, they now go from concept to implementation in weeks. Fast iteration management helps us learn to break designs into small, bite-sized implementations and to collect data from each deployment to inform the decisions in the next iteration. Skills include schedule planning, change management, and usage-data collection, to help the team move quickly.

Copywriting - Nobody likes using a design whose on-screen text reads like a 1950's Army instruction manual. The best user experiences have copy that excites and compels, making the user feel comfortable and secure about the design. Copywriting skills include identifying the style of voice and tone that matches the organization's brand, creating persuasive copy that motivates users to explore the design, and clearly stating benefit statements, to help the user understand the value of using new capabilities and functions.

Editing - What's not in a design is as important as what's included. Editing is not just about correcting bad grammar, but about creating a cohesive experience that doesn't have extraneous distractions. Skills include using techniques such as alignment maps to match the users' needs to the available functionality.

Because these skills are critical to the user experience, we double the rating we give them when we're combining the scores to determine a team's overall rating. For example, if a team warrants a 4 in Information Design, we'd count it as 8 in the final assessment. If a team scored 5 points in each of the Core UX Skills, they'd get a total of 80 points.

The Enterprise UX Skills

Along with the Core UX Skills, teams now need skills to enhance their value across the enterprise. User experience extends beyond the on-screen interactions to all touch points with the user. Special skills are needed to ensure the team interacts with the rest of the organization in a productive manner. While the teams don't need to know how to do the jobs of others in the organizations, they need to know how those other roles will influence the design. These Enterprise UX skills include:

Development Methods - Organizations are using a wide variety of development methods these days. Team members need to understand how to integrate their work with development approaches, such as Agile techniques.

Design-To-Development Documentation - Communicating the design and its rationale effectively is critical to successful projects. Developing personas, design pattern libraries, and use cases are a regular practice to ensure what is imagined becomes reality.

Web Analytics - Gleaning important information from the mounds of data collected by today's web servers can dramatically enhance the design process. Team members need to know how to integrate the available analytics to inform their design process, by seeing what designs are working for the users and where design iterations fall short.

Ethnography - Techniques like ethnography, contextual inquiry, and field research can help teams gain tremendous insights into the users' environment and goals, leading to radical improvements to the experience. Understanding how to facilitate ethnographic projects and how to report the results, using tools such as contextual modeling and personas, is important for today's teams.

Social Networks - Computer applications are no longer just a person interacting with a computer. Many are now computer-mediated experiences of people interacting with other people. Teams need to understand the different models for social interaction, from ratings and recommendation systems to full-blown social network capabilities, to know when these techniques can enhance the interaction and to avoid places where the social components take away from the core functionality.

Marketing - Previously relegated to an isolated function of the enterprise, marketing skills have become a core component in the user experience. Teams need to successfully communicate the design's value to users and need to ensure it blends seamlessly into the rest of the experience with the organization and the brand.

Technology - It is no longer acceptable for designers to propose interactions that can't be implemented because team member don't understand how the technology works. From front-end technology, such as CSS, Ajax, and Flash, to back-end components, such as server technology and legacy servers, designers need to be keenly aware of what is possible and where they will bump into constraints.

ROI - A successful UX team has the skills to explain the business value of their work. Whether it's a specific enhancement or a complete rethinking of the way things are done, team members need to concisely describe the benefits and risks associated with new design.

Business Knowledge - Today's business environment is full of complexity and hard-to-navigate constraints. Designers need to be fully aware of how the business works, how it makes money, and what the internal constraints are, so they can ensure the design services the business as well as the users.

Domain Knowledge - The industries we service are themselves very complex, whether they be about financial services, travel, or a university. Team members need to be fully versed in the domain, so they can understand the terminology, processes, and objectives of the people using their designs.

Of course, you may find there are other skills critically necessary to succeed in your organization or environment. You can add them into your assessment formula alongside the skills listed above.

Arriving at the Team's Rating

The formula we use for calculating a team's rating is (Core UX Skills x 2) + Enterprise UX Skills. With 8 Core UX skills and 10 Enterprise UX Skills, the top score is (40 x 2) + 50 or 130.

How well did your team do? Here's some guidance we give the teams we assess:

104 to 130: The team has all the right skills and is well on the way to mastering them. The next step would be expanding the knowledge by spreading it to other design agents in the organization.

78 to 103: The team has basic coverage of the core and enterprise skills, but needs to start enhancing the capabilities of the individual members. These teams need to focus on exploring outside educational opportunities, such as summits and conferences dedicated to these particular skillsets.

36 to 77: Many of the skills are found in the organization, but not all of them are found in the team itself. The team manager should actively search out training opportunities for team members, whether it's tapping into the experts found elsewhere in the organization or outside seminars and workshops.

0 to 35: The team has few internal skills and is probably too reliant on outside contractors for many key skills. Working side-by-side with the contractors can help bring the skills in-house for future projects.

With the assessment in hand, team managers can now look for ways to enhance their team's capability and improve the team's productivity and results.