Hey there, I'm Jonathan, a freelance digital consultant, specialising in UX/UI Design.

I help companies design and develop beautifully simple user interfaces. I work with a huge variety of clients including companies like, Smith & Nephew, KLM, Durex and the National Aids trust.

Create better Web Applications with User Experience Design

Posted By Jonathan Clift on 05 July 2014

It's no surprise that the most successful web applications offer an incredible User Experience. It doesn't matter how feature packed or competitively priced your application is, if your users don't enjoy the experience they're not likely to hang around. Creating a great User Experience isn't as hard as you think so I'm going to cover 3 simple techniques everyone can use. First things first, what is User Experience? The best way to define it is to quote a well known expert in the field, Jacob Nielson who defines UX as:

"User Experience (UX) encompasses all aspects of the end-user’s interaction with the company, it’s services and it’s products."

UX is everything a user is thinking and feeling whilst they are interacting with your web application and it's your job to make users feel good during these interactions. Whilst UX Design is a huge field, there are 3 techniques everyone can implement.

1. Create user flow diagrams

The next time you're designing a web application, spend some time drawing user flow diagrams. These will help you to understand how users will move through your application, highlight the actions they'll need to take and the decisions they will be making. This technique is a great way create a high level overview of the user interface for your application. It will put you in a position to validate the suggested flow of your application and quickly highlight if things are getting too complicated. You'll save both time and money by getting a good user flow diagram completed early on. User flow diagram example user-flow

2. Sketching & Wireframes

You can't underestimate the power of sketching & wireframing. Depending on how involved you want to get, this could simply involve a pen and paper (like my example below) or the use of wireframing tools such as Balsamiq, Omnigraffle or Axure. Either way, the purpose is to define the hierarchy and key elements of part of your Web Application. I always start with just a pen and paper as it's a cheap and fast way to start thrashing out lots of ideas to show other people. Don't worry about creating a piece of art, the purpose of your sketches is just to create lots of throw away ideas. Once you're satisfied you have the basics nailed on, you can always create higher fidelity mockups at a later stage. rent-a-geek

3. Test and refine

If you've read my post from a few days ago, you'll know I'm a big fan of making incremental improvements (Practice Kaizen when designing web apps). Further to this, sharing and testing your application will highlight the types of improvements you need to make. Don't be scared to share things early and be prepared for people to knock you back a little. The first method I'd recommend is "Corridor Testing" which simply means finding a colleague within your office to take a look at your web application. (Sketch, Wireframe or fully functioning web app). Simply watch them use it, see what their reactions are like. Do they seem to know what to do? Does everything seem to make sense or are they asking questions on what to do next? Do this with as many different people as you can and you'll soon see the benefits of this type of testing. The second method is "Automated Testing" which is a simple case of finding the appropriate service and setting up your test online. You do this by using one of many great tools online, which include fivesecondtest.com, usertesting.com and feedbackarmy.com. If you do a search you'll find many more too but also worth checking out Smashing Mags Comprehensive review of User Experience Testing tools. There really isn't any excuse not to use these methods if you're serious about creating a great web application. five-second-test


The main point I'm trying to get across here is that anyone can action the User Experience techniques I've covered above. You don't have to be an 'Expert' to start implementing these techniques today. They are simple, cheap and very effective and if you start using them, you'll soon see significant improvements in your Web Applications.