Creating a better User Experience
Before we start exploring the techniques to create great user experiences, we need to understand what exactly is user experience.
If you have ever searched for the term “user experience”, you might have come across lots of websites about it and most probably, all of them gives different definitions for the term. “User experience” was first coined by the legendary Don Norman in the nineties, while he was the VP of Advanced Technologies Group in Apple to signal a shift to include affective factors, along with the pre-requisite behavioural concerns while designing interfaces. But the fact is, user experience has become such a buzzword that it is used too ambiguously to explain too many things.
For the sake of simplicity, lets use the definition by Amanda Marrow for now— user experience is about making users happy.
Well, that sounds simple. But how do I do that? Over the years, UX designers have come up with many strategies or methods to create good user experiences. In this post, we will be following the most popular strategy of them all, the User Centric Design process or UCD. In its most basic form, UCD is categorised into three — user research, design and evaluation. Many designers have modified it in order to better fit the process with their work flow or project. I usually prefer the version explained by Jesse James Garrett in his book, The Elements of User Experience. So I will be following his method here. Do remember that this is not a definitive order and you can customise it to best fit your projects and company culture.
Jesse divides the UCD paradigm into five — strategy, scope, structure, skeleton and surface. As you follow the process, starting with abstract, packets of information in the strategy phase, your ideas/user experience will get more concrete and by the end of the process, you will have crafted a well defined user experience.
Now, lets take a closer look at each of those steps. I’ll try to explain it in a short and concise manner and provide links for important concepts that you need to dig deeper.
Strategy
There are two main purposes of this stage. First is to get as much information as possible about your user. Who is your user? What is the goal of the user for which they will be using your product? What is the context or environment in which they will be using your product? These are some of the questions for which you will need to find the answer.
There are a wide variety of ways through which you can find this information, ranging from qualitative and quantitative research, analytics etc and which method you need to choose will depend a lot on what type of product or service you are working on. It is a great exercise and probably, the most time consuming one.
Once you have enough information about your user, you can create a persona. A persona is basically a fictional representation of your average user. Give him/her a name, age, ethnicity, educational qualification, work, technical expertise etc. And every time you work on the design or new features, try to see through the eyes of this particular user. The persona is also useful while working on marketing strategies as you will have a frame of reference as to what type of strategies or techniques will work against a particular persona.
Additional resources
A Five-Step Process For Conducting User Research
Complete Beginner’s Guide to Design Research
When to Use Which User-Experience Research Methods
The Beginner’s A/B Testing Toolkit
How to gather quantitative data on user behaviors and mental models
The Characteristics of Effective Personas
Making Personas Work for Your Website
The second important purpose of this stage is to fix the business needs. Business need is the reason, you have created this product or service. Usually, making money is the primary business need for most companies, but there can also be other reasons like increasing brand awareness.
The challenge here is to create a good balance between the user need and business need. If you take the example of Google, the user need is to get relevant information and the business need is to sell ads. So they display relevant ads when you use their search. Now, this may not always be an easy thing to figure out. If you are not careful, you can end up with a service with lots of users that doesn’t satisfy the company need or you can satisfy the company need, but you will find it hard to get many users.
Once you have clearly identified user needs and business needs, you need to create some success metric to connect them. For example, in case of Facebook, it could be the average time spend on the website since more time spend could mean better chance in viewing ads. Setting up definite success metrics gives you a way to quantitatively analyse how particular changes are affecting your business needs. If the business and user needs align well, the positive changes in success metrics will reflect upon the business and users in the same way.
Additional resources
3 Keys to Aligning UX with Business Strategy
Users, business and balancing the needs of both
Scope
Scope is where you translate your user needs to features that your development team can work on. The best way to do that would be to create a functional specifications document.
Depending on your company structure, work with your development team and stake holders to create a detailed document and ensure that everyone in the company is on the same page.
Getting the details right is imperative. For example, when you are describing a feature for a news website as “sort articles according to popularity”, it leaves a lot of questions as to what defines popularity. Is it the total number of page views? Is it the total number of shares? A much better way to describe it would be “The articles will be sorted in ascending order based on popularity which is defined by the total number of page views”.
The scope stage would also be a good time to prioritise the features. Work with the stakeholders to define what features are the most important and which one can take a back seat. An interesting method I’ve found is the MoSCoW method where you classify features as Must, Should, Could and Won’t.
What Goes Into a Functional Specification?
Structure
Now that you have a clear idea about the features of the product, it’s time to map out the flow so that the user needs can be satisfied in a seamless way with the documented features.
The first step would be to create a good conceptual model. But what is a conceptual model?
When the user is using a product, they make certain assumptions as to how the product will react to the their actions. For example, when you click the “Add to cart” button in Amazon, you expect the item to be added to your digital cart which you can later check out. Here you are using the conceptual model of a physical store for the Amazon website.
Conceptual models can vary from person to person depending on how familiar they are with the concerned product or technology and maybe a simple model or highly complex. So how do you form a conceptual model in the user’s mind?
- Take advantage of the product characteristics such as affordances and signifiers.
- Use existing models and past experiences of the user— if your users already have a conceptual model (like shopping cart in case of amazon), use it unless working on a new model gives you considerable advantage over the old one. Do not try to reinvent the wheel unless you have to!
Once you have a conceptual model, you can work on the information architecture such as what type of content you will be using, how you would like to structure the content etc. IA is a huge topic in itself and there are whole books written about it. Please see the reference section for detailed information about the principles and strategies of information architecture.
Another important aspect to factor in at this stage is error prevention.
User’s will make mistakes and we have to make sure that those mistakes doesn’t affect our product in an irreversible way. While you can try designing the product in a way that making errors is almost impossible, that approach doesn’t always work. Asking for confirmation while making important decisions such as deleting something is a common approach. But make sure that you don’t abuse the option by asking for anything and everything. Otherwise, the user would get irritated and tap “Yes” for everything which doesn’t really help.
Another strategy is recovery. Give the user a chance to recover from something that they have done. The “undo” option is a popular example of this.
A good system will use a combination of these approaches at the right places to create a satisfying (and safe) experience.
Additional resources
Conceptual Model Explanation by Don Norman
Beginner’s Guide to Information Architecture
Handling User Error with Care: Getting Users Back on Track
Skeleton
Finally it’s time to work on looks of your product — interface elements, navigation, information design etc and start creating low fidelity prototypes.
You already have a solid understanding of the features and the flow of your app/website by now. With that details in mind, decide on what type of elements you want to use. For example, if a particular feature requires the user to input multiple details, you could use radio buttons, dropdown lists or even the good old list boxes. Try to empathize with the persona that you created earlier and see what option would work best in the their context.
Also figure out what type of navigation design would suit best for your product and make sure that your users can easily navigate from one part of your product to another part. If you have a big site, don’t try to cram everything into the global navigation menu. Make use of sub-menus, contextual menus and regional menus instead of having a cluttered global menu where it takes 3 minutes to find an item. Everybody hates a website where you get lost!
For prototyping, you can first start by sketching out the designs in paper or use tools like Balsamiq or JustinMind. At this stage, the focus should be on the usability of the app and you can take care of higher level details later.
Additional resources
Designing A Winning Navigation Menu: Ideas And Inspirations
Five Rules of Effective Website Navigation
Design Better And Faster With Rapid Prototyping
The Skeptic’s Guide To Low-Fidelity Prototyping
Surface
In this last stage, you delve into the finer details of your project like consistency of the layout, color, typography, contrast etc.
While you can take extra care in making sure that your app looks good and unique, do not let usability take a hit and follow the platform guidelines such as the iOS human interface guidelines or Google material design principles (find more details about different types of layouts and color theory in the resources section).
For making high fidelity prototypes, you can use popular tools like Invision or marvel. In case you want a bit more control over the micro animations, see Pixate or Proto.io.
Additional resources
iOS Human Interface Guidelines
Z-Pattern, F-Pattern, and Visual Hierarchy
Fixed vs. Fluid vs. Elastic Layout: What’s The Right One For You?
Color Theory for Designers, Part 1: The Meaning of Color (check out the whole series)
7 Rules for Creating Gorgeous UI (Part 1) (Part 2)
If you want to hire me or have any suggestions regarding this post, feel free to shoot an email.
