Check out my new project, Practical Service Design!
User Experience at Hello Erik

Treatise on User Experience Design: Part 1

Posted April 16, 2011

User experience design is the liaison between the three areas of technology, business, and design. A good UX designer will have a depth and breadth of experience in all three, not just the visual “graphic design” end or the functional “product development” end. That experience and knowledge is then filtered through the lens of not only the business, but through the user of the product as well. User experience is about being on the outside of the product looking in. A user experience designer is a detective, a scientist, and a researcher who discovers the users needs and communicates those goals to the business, technology, and design sectors.

To truly accomplish the goals of “user experience,” you must reside in the interstitial space between all three. UX is as much about meeting business goals as it is negotiating technology and design, and knowing how to accommodate the priorities of each in relation to the user driven goal.

From my perspective, I see a true user experience designer as someone who has experienced the pressures and constraints of all three areas, and knows how to navigate the waters of each. An end-user should only see a finished, combined product that meets their needs and user story.

At any given moment, the UX designer could be advocating for one of the areas to the other two:

  • Translating business goals to the technology and design areas, making sure the business is what drives the features and design.
  • Explaining technology constraints to the business and design areas, keeping the design and business goals aware of the technical realities.
  • Communicating design ideas to the business and technology areas, and ensuring that functional and aesthetic priorities are managed.

You really have to be a triple threat: businessperson, engineer, artist, with experience and empathy for all three domains, and must be able to express and communicate those user needs to all.

What is a user experience designer, and how it is just not a web developer or web designer:
The user experience designer is usually a role that encompasses many domains, as seen in the Venn diagram above. While ideally there would be a user experience Team, often there are “many hats” (horrible axiom) worn by any member, singular or plural, of a user experience team.

Let’s take a look at the five domains that user experience designer can fulfill. While this is a five person team, one person can do all of this; it’s just a lot more time and work.

1. User Experience Designer: This is the role that is responsible for the vision of the entire team. They create the personas and scenarios. They are responsible for managing the element and component library, and the template library for the site/project. The user experience Director helps improve the work of the team on a holistic level. They oversee the information architecture, the interface (UI) designing, prototyping (wireframe or hi-fidelity) and the user research and testing.

2. Information Architect: This role is the one that gets confused with user experience the most. The information architect is responsible for determining where things are on the website, not on the screen. They organize the content into meaningful taxonomies, groups, hierarchies, and navigation. Their job is to make sure that the information structure makes sense from a user’s perspective (not the developer’s or designer’s). Right way, right place, right time. Hopefully the information architect has identified what is most relevant to the user story or scenarios, and has a plan for how to present the information in a way that makes the most sense.

3. Interface Designer: This team member (or component of user experience soloist) is responsible for the design elements and interface components for the project and/or website. This includes templates for the pages, sections, or navigation. They are responsible for taking the sketches and wireframes and turning them into hi-fidelity, pixel perfect mockups. This can include the interaction of interface states and transitions (rapid prototypes) and focuses on the usability and accessibility of the website. The interface designer also focuses on learning new technologies on the web, and innovating new methods of user interface design.

4. Interface Developer: Now this one is confusing. The interface developer builds the high and low fidelity prototypes, and working rapid prototypes used for user testing and research before an advanced deployment. The interface Developer part of the user experience team is mostly concerned with the design and strategy phase of launching the prototypes, which will soon become working websites or projects.

5. User researcher: Here’s where the drop-off occurs. Most of the time, there’s never enough time to do User Research and testing. But this is one of the most important parts; so neglecting it is often a fatal error in developing a project for maximum success. The user researcher conducts user research and delivers qualitative feedback and statistics based on their findings. This is probably the most scientific part of the user experience process, as it uses real data, even in small amounts, to determine if the rest of the team is heading in the right direction. This can include using task based evaluations, surveys, split testing (A/B), heat mapping mouse movements, eye tracking, as well as the entire host of web analytics tracking and data. The user researcher really dives into the data provided, and then seeks out data of their own. Things like validity (does this test what we mean it to test) and reliability (does this test have meaningful consistency). You’d be surprised how much this is overlooked. A user researcher uses their intuition to seek out the places where they can find data.

Now, clearly I don’t expect every project to have a five-man team. Usually it’s one or 2 people who do it. Which, coming from a construction worker ancestry (I’m a 3rd generation construction worker; the first two did real buildings, I do virtual ones), it always leads me back to the true paradigm, the true meaning of what it means to be a “constructor” working against deadlines, stakeholders, owners, and all the rest of the pressures that drive people to build:

“Never time to do it right; always time to do it twice.”

Don’t let that be you. We all spend so much time and money on our projects to begin with; it’s always such a massive pain-point to have to go back and rework something that never got a real user experience treatment to begin with.

So what leads to this bad user experience?
We all (and I say we because I do this too, I’ve been just as bad when it comes to UX failure) end up at a place where we go “Our beautiful website is great, but why doesn’t it convert, or why does it feel wrong, or why aren’t people using the great features we spent so much time building in?” Let’s lay out the formula for bad user experience:

Not fully developed, or just plain bad ideas

+

Excess of features (superfluous or not)

+

Perceived technical limitations

+

Rushed or ambiguous timelines

+

Scoping and planning before design

+

No user research or testing

=

BAD USER EXPERIENCE.

 

Don’t think you have time/resources to do all this? Never time to do it right, always time to do it twice.

The user experience Glossary:
With so much going into user experience, if you’re looking to do it yourself, great, learn as much as you can. If you’re looking to have someone else do it (like me), you should also learn as much as you can as an overview. So, here’s a glossary of terms I hope can help illuminate user experience, for both those performing it and those looking for someone else to perform it:

Accessibility: Is the information, be it visual or structural, built in a way that makes it accessible to your user. Can they find it. Can they utilize in the way you intend, and also how they intend. Accessibility usually translates into “ease of use” and “ease of access to information.”

Behavioral Science: Studying the ways humans interact with your website relies heavily on behavioral psychology and conditioning. Can you train your user to use the website or application in a way that is useful to them. Can you shape their behaviors in a way that increases your goals, and their goals? In many ways, user experience Design is just applied Psychology and applied behavior analysis (ABA) in the realm of the internet and website usage.

Best Practices: Best practices and standards are basically things that are already proven, or at least not yet refuted. You don’t need to reinvent the wheel. There’s a wealth of information out there on what works and what doesn’t, it’s the marshalling of the resources that can make or break a project. This is why more and more companies are hiring on user experience professionals to ensure that best practices are being followed and deployed.

Brand Equity: The amount of value you have in a brand. Often new companies or websites have very little of this, and even large, well-known brands must always maintain as much equity as they can. Your brand equity is the weight your name carries, and the legitimacy that it conveys to your “user.” I say “user” in this case, because really, everything is a user experience, including you reading this writeup.

Cognitive Science: This is a huge part of how I approach user experience. The science of how the brain thinks, the cognition, is really the final resting place for your user experience. The brain is what sees, interprets, and digests the information you present to it. Understanding human psychology and the brain is ESSENTIAL to true user experience design. People often ask what my Psychology Degree (focused on human behavior and neuropsychology) has to do with “web design.” It has everything to do with it. Websites are just another place where cognitive science and psychology take place.

High Fidelity Prototypes: These are usually pixel-perfect mockups of what you’re trying to build, but usually flat JPG’s or PDF’s out of Photoshop (or whatever graphics program you are using). These can be interactive, but don’t have to be. A high fidelity prototype is usually the last phase before production, this shows everyone the full-color vision. Interactive versions can be done in HTML/CSS and javascript (usually jQuery) or in fast rapid prototype programs like Flash Catalyst.

Information Architecture: This is the “what, where, why” of taking the information on a website and deciding where it goes. Typically this involves some testing and user research, to see what your scenarios and personas are, and then deploying a plan on how to best organize your information.

Low Fidelity: Same as above, but quicker, dirtier, and maybe not even color. Sort of like a beefed up, final draft of a wireframe.

Mockups: This is usually a mid-fidelity prototype used to show some ideas and examples in a quick fashion. Mockups are almost always flat JPGs or PDFs.

Multivariate Testing: This is when you are testing multiple things at once, and their interaction with each other. You’re into statistics land now, and typically this requires some IT and programming magic and a statistical minded project manager (which can and should be the user experience manager or the user researcher). This can even by automated by traffic splitting and other variably displayed elements on the page.

Prototypes: These are quick ideas, usually rapid prototypes, which show whomever your idea. It can be stakeholders, fellow team members, or users. This gives you the chance to get some qualitative feedback on what you’re trying to create. Prototyping is essential and should never be skipped. Don’t just start a project or website aiming for the final working product. No good ever came out of starting with your HTML and graphics intending on those being your final design. Iterate, iterate, iterate. Did I reiterate that enough?

Split testing: Testing a given item (page, form, element) against a similar but changed element, usually referred to as A/B testing. Split testing involves controlling all variables except the one your trying to determine is more effective. This often plays right into validity and reliability. Make sure your results are in fact a result of your variables!

Surveys: Methods of gathering user data in a transparent way. The user is asked questions (either with face validity, or without) and the data is taken in interpreted by the user researcher.

Usability: The overall ease of which a persona can carry out their goals on the website.

User Interface: This is the front-facing part of the website or application that the user interacts with directly. Buttons, scrollbars, windows, all that. The user interface is the doorknob, the place the user has to grab and turn to gain entrance into this beautiful digital home you’ve created for them. And by “for them” hopefully I mean “tailored to them” and not just “because it seemed cool.”

User Pain: This is a term that refers to a “pain point” on your website or project. This is something that causes a mental thorn, something that the user consciously or subconsciously doesn’t like. Pain points should be removed every time you determine one exists. Not all pain points can be turned into conversion points, but you should always endeavor to at least make them neutral points of contact, not thorns.

User Testing: Find some users, and see if what you’re doing works, doesn’t work, or is ambiguous. This can involve surveys, where the user knows they are being tested, and also blind testing, where the user doesn’t know their behaviors are being tested and analyzed. There is an endless amount of ways to do user testing, just make sure you’re doing at least one or two. You can’t know if what you’re doing is relevant until your target audience has had a chance to go through it and experience it.

Visual Design: Graphic design at it’s finest; this is where the aesthetics come into play. Visual design, on top of good usability, appeals to the emotions of the user. Does it help them feel like you have empathy, does it make them feel welcome, does it make your website feel professional, does it make them feel anything at all? The visual design is where most website developers actually get things the most right, since it’s easy to see when something “looks good,” and not nearly as easy to see if it “works good.” Visual design is often determined by “I know it when I see it.”

Wireframes: These are very, very rapid prototypes of what you think a site or project should consist of. They are often done on whiteboards and notepads. They are meant to be changed, changed, changed, and reviewed by all parts of the process, not just the user experience team (or person). Wireframes usually end up going from the whiteboard to the computer in the form of software like Axure, Omnigraffle, Visio, or just good old Illustrator.

The iterative Process:
So we’ve gone through a whole bunch of info, now what do we DO with it? Let’s talk about the iterative process. This isn’t meant to conform to any paradigm (agile, scrum, waterfall), but instead just sort of show you how you can get started today:

  • Design: Not the graphic design, but the “design” of what you want to do. This includes the wireframes, spec sheets, personas, mockups, and user research you’ve conducted. Once you’ve got a design set up, let’s move it to the next stage.
  • Development: This is where you construct your design and take it from abstraction and into reality. Development is where the building takes place, the graphic design, the programming, and the actual working model. We’re all very familiar with this stage as this is often the ONLY stage that gets done.
  • Testing: This is where developer and designer interest usually drops off, and if there’s no user experience designer or user researcher, you usually just move on without every knowing if what you developed is working like you intended, as efficiently as you intended, or working at all! So you gotta test, test, test. You have to. Even if it’s just a little, test. Even if you have no budget left, find a way to test. You need data, real data. Qualitative and quantitative data. Without data, without testing, you have NO IDEA what to change.
  • Evaluation: So you’ve got data now (hopefully) run it through SPSS or Excel or whatever you can get your hands on, and see what your testing, your AB, your multivariate, your conversions actually tell you. This is the fun part, this is where you can OPTIMIZE. You can actually take data, and go back and make your site work better, convert better, and improve the overall user experience. So once you’ve evaluated your data and have some statistically meaningful results, you’re ready to move on to the next step.
  • Design: Wait didn’t we already do this at the first step? Yes! That’s the iterative process. Just keep going through the circle. You can never optimize something enough. You can only hope to break the thresholds of success for your particular goals

So that concludes part 1 of my treatise on user experience design. Hopefully it was a good experience for you. Read Part 2 that deals with an actual scenario and virtual project from end-to-end.

Pro Resume Critique or Phone Consultation from me!
Get professional tune-up and expert advice!
Resume Reviews – Consultation Calls
I love all things experience design. I work as a Principal Service Experience Designer at Intuit in Mountain View, CA.