User Experience development vs User Interface design

User Experience Development
There has been a lot of confusion lately, concerning UX (User Experience) and UI (User Interface).

First of all, let’s define them both.

UI or User Interface is how the website looks, all the styles, fonts, colors, graphics etc., etc.

UX or User Experience is how the user is experiencing the website. It includes:

  • right placement of UI elements
  • easy navigation
  • intuitive controls
  • right amount of information output

UI design makes your website beautiful but good UX makes it functional as well.

User experience is developed to make a website or a web application more usable. Our brain is always searching for a shortest path to accomplish a goal and if the UI is designed so, that completing a simple task requires extra steps from the user, then it will result into a bad user experience. Nobody needs and wants extra bureaucracy on the web.

UX is more marketing process rather then design process, but often UX/UI are used as a single term to describe websites’ interface design. If the designer does a great job creating amazing interface, that does not always mean that he might be also good at UX, so choose carefully to get the best results.

How to develop User eXperience (UX)?

UX development starts with defining your goals. For example, let’s say you are selling your service. In such case you have the following primary goals:

  1. Leave a positive primary impression
  2. Persuade potential clients
  3. Make it easy for the potential client to contact you

So, for making a positive primary impression, you need to make sure that your website loads quickly. Ten years ago users would wait for 40 or more seconds for the webpage to load, today they get annoyed after just a couple of seconds of waiting. So make sure your site loads quickly.

Also, you should take a great care of the UX elements that are going to be seen by the visitors first. Usually it is a good idea to place some hero section that will look great, briefly describe what you are doing and have a CTA button.

Persuading potential clients is little more difficult thing. Here we should consider the whole science behind it. There are several principles that make people more attracted to your product or service.

  • Usually people feel obligated to give back when they receive something from you, so at least give them some free advice or some free service. One of the best ways would be starting a blog with valuable advice.
  • Limit your offer somehow. People need to see that what you offer will not be available forever, so all kinds of specials or limited time discounts are great to show the scarcity of your service.
  • Include some expert reviews of your service. People follow credible experts and it will make them one step closer to converting from traffic to clients. Video reviews would have the biggest impact, but those should be real reviews of real customers. Fake reviews will only push your potential customers away.
  • Remember that your website traffic consists of real people. They should like you, in order to contact you for your services so make sure not to complicate the period of time while they visit your website. Make navigation as easy as possible. Do not use extra small sizes of fonts to make the content easily readable. Group navigation and content into the groups of 4-6 elements maximum, as human brain is not used to processing more choices at once.

Defining the UX elements

Before you start wire framing your website’s UX, there is one more trick I want to share with you. It concerns competitor analysis and I’ll show how to do it efficiently.

Put yourself in your client’s place of your client and search for at least ten competitor websites that you like. Start a timer once you open a website and close it right after 2 minutes. That is approximate average time users spend on the website before subconsciously making their decision about you or your service. Now take a paper and a pencil and answer the following questions:

  1. Did you like what you’ve just seen?
  2. Would you use their services if you were a person in need of such a service?

If your answers to those questions were YES, then continue with the most important question – what did you see on the website and which elements of the website made you decide to use their service. It might be little difficult to answer so there is an easier way. Try to draw the website on the paper without looking at it. This way you will unveil what you remembered about it. That will give you an information of the most important UX parts that you can re-use in your project.

Mental model vs Conceptual model and structuring UX elements

Ok, so you have already decided how you are going to persuade your customers and written down which web components you need to use. Now it is time to structure everything down.

Before you start structuring it, let’s talk about mental and conceptual models. Mental model is basically how the user is imagining your website before visiting it. Yes, visitors really do that, based on their experience with other similar products. The conceptual model is the concept of website that you have in mind. If conceptual and mental models of your target audience do not match, then you will end up with bad UX, which is not good for your business.

One good method of testing your conceptual model is to remove labels from your wireframe, print it out and ask some random people (preferable people who surf similar sites and use similar services, of even better if you will have access to your real target audience) to put the labels and describe what each of the buttons should be doing or what should be contained in each text box. This way you will learn more about the mental model of target audience and fine tune your wireframe to match it.

Congratulations! Now you have properly developed your User Experience prototype and can hand it over to your graphic designer, illustration designer and content writer to get the UI design, illustrations and content for further development.

Of course there are many other smaller nuances that you should consider when prototyping the User Experience, but this article should give you a good starting point.  If you will decide to go with professional help, we provide UX prototyping service and would be happy to help.

Nick Surmanidze founder of EveryCode.NET

Hi, I am Nick

I'm a a fusion of a web software developer, product designer, marketer and entrepreneur. I am the Founder of Everycode, a web software design and development company.

Leave a Reply

Notify of