icon/dark/fileicon/dark/foldericon/dark/folde-openicon/dark/hashtagicon/dark/line-graphicon/dark/listicon/dark/localicon/dark/lock

They say good typography is invisible, because a reader looking at a well crafted and set typeface will only see the word itself, and not even give a moment’s thought about the fact they are looking at individual letters or a font. If we think about a digital interface in the same way, we start to consider how we present content and functionality logically, as the user shouldn’t really be thinking about what a button or input field is, or even that they are on a website at all. They should just be allowed to achieve what they wanted to do, read your content, and go on with their day.

With this in mind, its clear that designing and building for the web is more akin to product design than traditional graphic design. While we of course want our website to look nice, carry the brand and be visually engaging, above all of that, it needs to work.

While every project is different, with budgets, time allocations, goals and deliverables, there are guiding principles that we can draw upon to help ensure user experience (UX) is kept at the forefront of every digital project.

Kick off meetings

When undertaking any new project, it’s important to get all stakeholders together in a room to talk through why the work is being done, highlight things that have held projects up in the past, decide who will be the key decision maker(s), and agree on what the key deliverables and measures of success will be. This will ensure that everyone is on the same page from day one.

You’re unlikely to come away from this meeting with a clear idea of exactly what the next stage will look like, but you will have a better understanding of any ideas that were misaligned, and hopefully grasp what everyone feels needs to happen on the site for it to work.

User survey drafting and analysis

First step to understanding users is to go and speak to some of them. This can either be via an online facility through a website, focus groups, or even just family and friends if budget doesn’t allow for much. Asking things like thoughts on the current website, services lacked online, whether they would or wouldn’t use the new feature for potential tasks, what they think makes a good site and annoyances with other websites will provide great insight from people that aren’t so close to the project or brand.

Use information from the kick off meeting to feed this process and afterwards, listen to the feedback. If everyone is saying they don’t like a feature or go against your opinion, don’t ignore that.

User personas and journeys

Building new features with the mindset and technical ability of a specific demographic group helps to preserve the human element on our website.

When writing personas, detail key information such as age, gender (not that this affects much), technical ability and mindset, which can include things like “is often in a hurry”, “doesn’t own a laptop” or “likes to plan and be thorough”. From this we can then make a journey, where we picture a task they would want to complete, such as “She wants to book an appointment, but only has specific days free”.

Detailing the users, their mindset, and most importantly their objectives, will help you remove all distractions and keep them on that desired user path. Once you’ve built your feature, test against the journey. Would your user expect to see X if they click Y? Do they get everything they need to feel confident what they are doing is correct?

Project goals

What makes a project successful? We need a way of measuring the success of a body of work we undertake on our site, as saying “lets make it awesome” is too subjective. Goals need to be structured – things like “it should carry the brand” don’t work either, that goes without saying, and how do we tell at the end if it does or doesn’t.

A formula that works is “We want to _ action _ because _ reason _ so that _ outcome _ .” This sets out what you want to do, gives a reason why (if we don’t have this, why are we doing it) and most importantly, outlines what we will see at the end to know it has been successful. An example of this might be “We want to get more people signing up to our newsletter, because that’s our main channel of communication with customers, so that we see an increase in monthly signups”.

You can set multiple goals and all stakeholders should have input and agree on these.

Accessibility

All of these principles are aiming towards better UX and helping users actually use our website, but something which gets overlooked time and time again is accessibility. Failing to make sure that our site works for all of our users may result in some potential visitors being excluded from our services and business, the same way as failing to provide disabled access outside a cinema will prevent some people from entering.

Accessibility doesn’t just mean building for screen readers however, it means looking at things like color contrasts and text sizes for the visually impaired, checking focus states and menu functionality for keyboard users, ensuring hit areas are large enough for people with motor function impairments, and looking at the language & writing we use for people with cognitive difficulties. Ethically, we shouldn’t exclude these users, but it also makes financial sense. Why would we exclude people from interacting and transacting with our website?

Data driven decision making

While I can sit across a table and say “in my experience of UX, I think people will do X” and a service provider could sit the other side and say “well our knowledge of our client base means we think they will do Y”, what trumps all of that is looking at the data and analytics of the current site to see what users are actually doing and how they are doing it. Look at where they are clicking, what is the most popular content, what devices they are visiting on, if there are any patterns, if any pages break that pattern, and what could cause that pattern break.

Make decisions based on this data. If the about us page is really popular, and your homepage doesn’t include anything about you, remove the requirement for this step by putting some copy on the homepage. Once you have made this change, don’t forget to retest. Did the data react in the way you thought it would? By how much you thought it would? Are there any rules you could apply elsewhere?

A great example of this is was when I was doing some work for a cancer research charity. We looked at their analytics and could see that even though there was a link to the donation functionality on every page, this call-to-action was receiving less than 1% of page clicks on most of the pages. Where it got interesting was when we looked at the case study and testimonial pages, where the total page clicks to donate shot up to over 15%. From this we concluded that adding the positive human impact to the more clinical side of the research would help users feel more connected with the content, making them more inclined to donate. This was achieved by putting testimonial quotes and case study snippets around the site.

Content strategy

Jeffrey Zeldman, author of "Designing with Web Standards" and founder of "A List Apart Magazine", said “design without content is decoration”. Our UI should be lovely, but it shouldn’t hinder a user getting to the content, which is the thing they actually want. Consider doing an audit of your existing copy with UX in mind. How does it scale on mobile? Is all the key information at the top? Is it still relevant and up-to-date?

The web moves at an incredible rate, and copy can become outdated and clunky very quickly, so regular reviews keeps our copy as fresh as our interactions.

Collaborative sketching and rapid prototyping

By this point we should have a good idea of what we want to introduce to our site to help users. It could be a whole page, just a component, or even just amendments to current functionality, but we want to make sure we’ve explored all options first. If we go to our first (or favorite) idea and spend hours and hours making a beautiful mock up, too much time has been spent on something that isn’t necessarily the best (or everyone else’s favorite) response to the brief.

alt

Creating low fidelity sketches means we can draft out an idea and either validate or discount its potential for success. Once you have some solid rationalized thoughts, hand it to a developer, can they build it? Are there any interaction plot holes? Does it work responsively? Again, these are all things that need to be tested before we start making anything too polished.

User testing

Whether its full focus groups with cameras filming their hand/eye movements, or just some simple hallway testing in the reception of your organization, user testing will reveal patterns and behaviors you weren’t expecting. You and your team will be too exposed to the website and its functionality to be able to approach it with fresh eyes, so having people (preferably who match your key demographic for your user personas) sit down and actually use the site while you’re observing will be invaluable. Give them a task and ask them to talk through their thinking and actions as they go. Are there any pauses or hesitations? Where did their hand/mouse instinctively go to? If getting people physically in a room isn’t doable, great services like WhatUsersDo are there to help.

One team, shared ownership

With any level of project, where there are multiple members working, maybe even at multiple organizations, roles will be placed within the team. Some will be more involved than others, some will be decision makers, some will have to deliver parts of it before others can begin. We must see everyone on the project as team members, who need to be supported, kept in the loop and encouraged. If you’re the project manager and the copywriter is struggling with the deadline, facilitate moving parts around to help them with that. If you’re the copywriter who is struggling with the deadline because the key stakeholder hasn’t signed off various parts, keep the project manager up to date.

Assisting each other, and calling out when a decision is made that we don’t agree with or that doesn’t match the brief will lead to better work, less stressed team members and happier users. We are all working to that same goal, we all share equal responsibility for delivering great user experience.

Please use the comments section below to let us know if you have any tips on how to improve UX based on the facts from your data.