User Experience 101: How to create a great online experience

User Experience: What is it?

“The overall experience, in general or specifics, a user, customer, or audience member has with a product, service, or event. In the Usability field, this experience is usually defined in terms of ease-of-use. However, the experience encompasses more than merely function and flow, but the understanding compiled through all of the senses.” – www.nathan.com/ed/glossary/

  • Look and feel: Does it reassure you or repel you? Do the images, colors and typography encourage the user to bond with your site?
  • Workflow/Information Architecture: How easily can you achieve the required task? Is the information arranged in a way that makes sense to the end user?
  • Interactivity: Does the system react appropriately? Does your site make use of technology to deliver the right information at the right moment?
  • How did you feel about your experience? Happy, frustrated, angry???

User Experience: Why it’s important?

Clothes cover you. Cars move you from place to place. Yet while we care that products have some basic features, all things being equal we choose the one that delivers, or at least appears, to deliver the user experience we desire.

Websites are no different. All else being equal, we’ll choose the Website that helps us achieve our desired experience. In more concrete terms, a good user experience will:

  • Increase conversions: Successful redesigns can increase conversions by up to 100% or more.
  • Increase adoption: Empirical research shows that perceived ease of use and usefulness are primary drivers of technology adoption.
  • Enhance customer satisfaction: A good user experience will increase customer satisfaction and therefore drive repeat and referral business.
  • Key differentiator: Apple elevated the user experience to a high art and look what it did for them.

How to create a Great Online User Experience

Creating a great online user experience requires the following ingredients:

  • Talent: Visual design, interaction design, information architecture, writing and engineering are just few of the different skill sets required to create a great online experience.
  • Focus: Trying to do everything for everyone is sure-fire recipe for failure. The tighter the focus, the easier it is to understand and deliver a great user experience – so be crystal clear about identifying your markets, users, and objectives.
  • User Intimacy: Once you’ve identified your users, the next step is to try to get inside their heads and figure out what drives them – so that you can be their advocate.
  • Process: Research. Design. Test. Then do it all over again as early and as often as possible.
  • Alignment: Make sure your organizations goals and Web site are aligned with your customers’ needs and expectations.

Talent: It takes a team to build a great user experience

Leonardo Da Vinci could write, paint, sculpt and engineer – but unfortunately he’s dead – so rather than try to find one person who can do everything – find the right team. It’s not fair to expect that any one person will have all the skill sets required to design and develop your Web site or even the user interface.

Just like the building profession features civil engineers, architects, interior designers and a multitude of other trades, interfaces require different skill sets. They include professionals skilled in: (Definitions courtesy of Sean Van Tyne and http://www.UXSIG.org)

Information Architecture: The art and science of organizing and labeling Web sites, intranets, online communities, and software to support usability and findability;

(http://iainstitute.org/pg/about_us.php)

Visual Design: The field of developing visual materials to create an experience. Visual Design spans the fields of Graphic Design, Illustration, Typography, Layout, Color Theory, Iconography, Signage, Photography, etc. and any medium, including online, broadcast, print, outdoor, etc. Visual Design is concerned with the elements of visual expression and style.

(http://www.nathan.com/ed/glossary)

Interaction Design: The field and approach to designing interactive experiences. These could be in any medium (such as live events or performances, products, services, etc.) and not only digital media. Interactive experiences, necessarily, require time as an organizing principle (though not exclusively) and Interactive Design is concerned with a user, customer, audience, or participant’s experience flow through time.

(http://www.nathan.com/ed/glossary)

Even more important than raw talent and skills, is attitude. I’ll trade someone with an advanced degree and 10-years experience for a virtual novice with an open attitude and a customer-centric approach.

Focus: Less is More

One of the most common problems I encounter in product and Web development is the lack of focus. “Our target user is everyone!” they say and then proceed to use very industry-specific terms and tools that require advanced programming skills.

While everyone is a big market, it’s much easier to develop a great online experience by focusing on one or two key segments and giving them exactly what they want – than trying to create a generic experience for everyone. So identify your target markets, users and business objectives first and you’ll save yourself time, money and headaches while enhancing your probability of actually creating a compelling experience.

User Intimacy: Know Your Users!

The more you know about your users the more likely you are to meet their needs. And remember don’t confuse the user with the buyer. Oftentimes, especially in big companies, the buyer, the big boss guy who signs the check, and the end user live in entirely different worlds.

    • Identify target users: Who are they? Go beyond demographics and try to understand what drives them to do what they do?
    • Describe their environment: While people have innate needs they may want to fulfill, their environment drives much of their decision making and habits – so don’t just focus on the user, learn about where they are when their interacting with you.
    • Define their business objectives and concerns: What do they want to achieve and what are they concerned about? Do they want to purchase something online and they’re concerned about not wasting time? Or do they just want to research a product for purchase later? And remember the same user may have entirely different objectives and concerns depending upon where they are in their purchasing lifecycle.
    • Create scenarios: Use your knowledge of the users to create a series of stories about them and their needs that your team can use to define the site’s requirements.

      Scenario 1 : The VP of marketing and sales has told the Marketing Manager he needs to increase site leads anyway he can – the budget for new Web marketing initiatives is pretty slim – but before they spend a penny, the VP wants to see a presentation why XYZ strategy is the right one – and he wants an answer by next Friday.

      Scenario 2 : The Marketing Manager is looking to switch marketing vendors because she is unsatisfied with service from existing pay per click firm. Based on her poor experience with her current vendor she is less concerned about price than service.

The two scenarios involved the same position – but the two users have entirely different needs based on their experience and environment.

Align your site to meet your users expectations

Inevitably there will be conflict between your organization’s desires and your customers’ requirements. The goal is to create a win/win process so that each party achieves their primary objectives as frequently as possible.

First, define and rank your business objectives. What are you trying to achieve, increase subscriptions, generate more sales leads, cut costs, etc.?

While you may have lots of business objectives, it’s critical to identify your primary objective – otherwise it’s easy to lose focus and let secondary desires get in the way of your primary mission. And at the end of the day, your success will be measured on your ability to deliver on the primary objective.

Second, what can you do that will help your users achieve both their goals and yours? Create potential solutions that solve key problems outlined in the scenarios.

Finally, use your primary objective as the decision-making filter: Does the task, information, technology and design help you achieve your primary objective or not?

A frequent conflict is the desire to collect as much information about the visitor as possible. While you may want to know more about your prospects, your prospect may not be ready to share that information with you. So how do you decide between the two desires?

If your primary goal is to increase sales and customer satisfaction, e.g. then the answer is simple: Do whatever will help you achieve that goal – and that typically means removing anything that reduces your conversion rates, such as filling out lengthy forms.

Process: Research. Design. Test. Then do it all over again.

Before you start redesigning your site willy nilly, it’s important to understand what already works and what needs work beforehand. The following are a few simple ways to understand where you need to focus your efforts

  • Design review: Ask a small group, 1 to 10 target users, to attempt a task and observe them. Goal is not to tell them how to do it – but identify issues.
  • Create score card: Rank issues in terms of criticality and frequency. Did the issue prevent the user from completing the task, decrease their desire or just annoy them?
  • Web Analytics: Where are customers abandoning your site? What are your current conversion rates?
  • Why?: Survey existing users. Can display a pop-under survey when leave site – asking why?

While Web development is fairly new, the architectural process is incredibly ancient – and worth copying. In a typical project, before the first block is laid – the following happens:

  • Architect identifies the target users,
  • Learns more about their needs, desires and budget
  • Sketches some sample designs,
  • Shows them to the client/users,
  • Client gives feedback,
  • Architect revises designs adding more and more detail to each revision
  • Repeat steps four through six until design passes muster with users

Once construction begins, making significant changes becomes very expensive – both in construction costs and time delays – so it’s critical to identify the right design as early in the process as possible.

And while it always seems tempting to shorten the design process, inevitably skipping this cycle of research, design and test inevitably extends the actual construction process and degrades the user experience.

The following are a few simple prototyping tips:

  1. Sketch out workflows: Use the written scenarios to create potential workflows and explain what the user will get in reward for their efforts.
  2. Create Wire frames: Very simple prototypes designed to just show workflow – can be on paper, in Powerpoint or HTML. The “rougher” the appearance – the more feedback you’ll receive, as users oftentimes don’t want to criticize something that already looks finished.
  3. Test: Use colleagues to test initial concepts on. Just someone not involved in the development process. Then test with target users. You don’t need a statistically valid sample – the most critical issues will rapidly be identified within the first few users.
  4. A/B Testing: Test different designs. There’s more than one way to skin a cat – so test different approaches to see which works best.

Once the site has been deployed, then it’s critical to track whether it’s living up to it’s stated objectives and to keep tweaking and testing to identify possibilities for improvement.

If you liked this article, I think you’ll like this presentation as well!

Send me an email kevin@myrepresentatives dot com or a tweet @kevinjmireles and let me know what you think!
Thanks!
Kev

18 responses to “User Experience 101: How to create a great online experience

  1. I love the article, I have to say that it is spoilt somewhat by the use of Snapshots in your links. Not sure if it is just me, but those things really bug me!

  2. Pingback: links for 2007-10-20

  3. Pingback: Nachlese Oktober 2007 - Die Seiten des Monats | Nachlese | Dr. Web Weblog

  4. Pingback: Best Of October 2007 | Best of the Month | Smashing Magazine

  5. “Our target user is everyone!”

    I’ve heard this a million times. However, it is extremely rare that this is true. 99% of the time, there are subsets of users to be handled. Furthermore, choices are often provided to users very early in the task or IA. That drives an easy discussion and analysis of the multiple targets under multiple scenarios.

    ~ John

  6. Pingback: { Studio Rhoad } Media Design & Photography» Blog Archive » Best Of October 2007

  7. Pingback: I like UX » Blog Archive » Links for November 14th

  8. Pingback: 2007年10月小结 | mashableCN

  9. Pingback: User Experience 101: How to create a great online experience » Freelance Escape

  10. I would like to see a continuation of the topic

  11. Nice site keep it up!

    ————————————–

    http://www.dasofte.com

  12. Pingback: User experience basics « CyberText Newsletter

  13. Pingback: Kevin Mireles

  14. Reblogged this on businessbybailey and commented:
    What an amazing blog about user experience! I just had to share!

  15. I believe every website must have a live chat /Discussions widget , which might enable visitors to discuss with other visitors on the website …that feels like a community and it is a good experience …there are numerous free services for this , ex , http://confaber.com , http://olark.com etc

  16. This is an amazing article i love the tips..simple yet efficient.

  17. Pingback: The UX of Content Marketing | Content Marketing | ideaLaunch

  18. Does your site have a contact page? I’m having a tough time locating it but, I’d like to send
    you an email. I’ve got some suggestions for your blog you might be interested in hearing.
    Either way, great blog and I look forward to seeing it improve over time.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s