Overview

In 1995 Donald Norman gives UX Design a name

Donald Norman is the father of UX Design and the term becomes popularized after he writes „The Design of Everyday Thing” which is a kind of UX bible.

„I invented the term because I thought human interface and usability were too narrow. I wanted to cover all aspects of the person’s experience with the system including industrial design graphics, the interface, the physical interaction, and the manual. Since then the term has spread widely, so much so that it is starting to lose it’s meaning.” —-by Don Norman

What is User Experience Design?

UX stands for user experience design and is the process of creating products by design teams thus manipulating user behaviour through usability, relevant experiences, and accessibility.

The main role of a UX design is to be created for end-users and refers to any interaction a user may have with the brand image of the company, the services offered or the products sold.

The whole idea is to put the people first and design for the people and become over time a key part of the building and growing customer confidence.

UX designers don’t focus on creating products that sell and are usable. They also focus on other aspects of the process such as accessibility, valuable, useful and fun, too. In the diagram below you can see the 7 aspects of user experience, the process is called UX Honeycomb Optimization.

The 7 honeycombs are grouped according to the user interaction with the product and we will cover all these factors (useful, usable, findable, credible, accessible, desirable and valuable) in another article.

Examples of bad UX

You’ve probably experienced bad online UX yourself countless times. For example, when you visit a website and there are dozens of pop-ups you have to click away. Or when you just can’t find the information you’re looking for on a website, even though you’re trying really hard. Those are examples of bad UX.

Examples of good UX

Luckily, there are also plenty of examples of good UX on websites. Image 3 shows an Airbnb page which has great UX. It builds the atmosphere by showing amazing pictures of the accommodation, and it clearly shows all the information you need in one clear view: the number of guests the accommodation is for, how many bedrooms it has, what makes it special, how visitors rated it, etc. And if you want more information, it’s readily available. In addition, it points you very clearly to the button which allows you to check availability. That’s why this is an example of very good UX: your users’ experience on your site should be pleasant and intuitive.

The Why, What and How of product used in UX design

Why is it important because involves the users’ motivations for adopting a product. A positive user experience increases brand loyalty. That translates to more profit and revenue. When business interests are not aligned with the needs of your clients, a UX designer brings value and solves this problem because he advocates for the user.

What can I do with this product?

This is The What and it addresses utilities brought by that product to people – its functionality. The main scope of UX design is to build products that people want and will use, regardless of their nature.

How to design this product and make it functional, for the end-user?

Finally, How is the last way it refers to the design of the functionality to be accessible and aesthetically in a pleasant way.

All designers should think and put into practice these three modules for experiences and solutions, which will bring positive results for the company and for the clients of the respective company.

The importance of UX

I’ve seen what UX means and what it consists of, but why should UX ever become an important piece in your SEO strategy? In order to answer this question as best, we should think about what Google is up to. With every user search, Google wants to provide the best results for their searches. This translates into providing good information but also the best experiences.

For example, if you are looking for the answer to “What is UX?”, Google will give you the best answers in a fast, clear and safe way. You have to keep in mind that although you will provide an excellent response in your posts, if the site is slow, with a messy and unsupervised design, Google will not consider your posting for the best response.

UX plays an important role in and represents a ranking factor for Google.

How does Google know if your UX is good?

Google uses different methods to learn how users are experimenting with your site and it looks for items like:

Speed up the site
The speed of any site is very important, to be honest, nobody likes to wait forever for a page to load.
Mobile-friendliness
It is mandatory for your site to work perfectly on any sim device you have chosen on mobile devices because the internet is now mobile-oriented as the studies show.
Site structure
How you structure your content is an important element and also a ranking factor in search results. The pages of your site must be intuitive and easy to read.
Internal and external linking
Another element analyzed by Google when it comes to positioning your site at the forefront of search after certain keywords used by your users is the linking structure. When quality links from authoritative sites come to your web page, they indicate that people have had a pleasant experience.

User signals

In addition to the elements listed above, Google also uses user signals to assess how visitors experience your website. User signals are behavioral patterns that Google sees on your site. If a lot of people leave your site very quickly, they might not have found what they’re looking for. This is called the bounce rate . Some other user signals are the time spent on a page and how often people return to your website. If these are high, visitors most likely enjoy your site or find it useful. You can check these kinds of statistics for your site with Google Analytics and other website
analysis tools.

For example, if you are searching for ‘flat tire’, one of the results is a page that tells you what to do when you’ve rented a car in Japan and then popped a tire, as shown in Image 4. Almost no one searching for ‘flat tire’ will be looking for that. Anyone who visits that page when googling ‘flat tire’ will immediately see this and leave. So the time spent on the page would be quite low in this case. Google might take this as a signal that this page should not rank for that specific keyphrase.

What is the UX design process?

A UX design project can be a little elusive if you’ve never worked on it.

So I really want to take you to step by step through the process from beginning to end. So you can get an idea of what you can expect working on a project like this or coming into a company that does this sort of thing. I will say that I am not a professional UX designer.

I’ve not been trained in UX design, specifically, my background is in graphic and visual design. And so I have taken those skills and learn best practices on the job working as a UI UX designer. But if you are a purely UX designer, you may have a different take on this. And you probably have a more in-depth background than I can provide. But as someone who has UX UI experience where that’s more of a combined role, I’d like to show you my process.

1. Understand the problem

Alright, so the first step in any UX UI project is that you have to understand the problem. This means you need to meet with your clients. You’re struggling holders, you also need to understand what the business goals are and what you’re really trying to achieve with the project. You could be doing questionnaires or surveys with your client, you really need to ask them about what their pain points are?, what are they trying to solve by developing this product? And again, ultimately, what are the goals that we’re trying to achieve?

2. Research

Next, you want to do a whole lot of research a lot, you want to learn everything you can about the problem and the users that are going to be involved, the best thing to do is to sit down and talk with potential users either through an informal interview, a survey, observing them in their natural environment, that the problem and solution are going to take place in asking them as many questions as possible to really try to get inside their head. You want to understand where they’re coming from. So you can empathize with them and design a solution that’s best going to meet their needs. You’re really trying to find out who your users are, what are they hoping to achieve? What’s going to make them solve this problem the best? What are they going to look for in a solution? What do they care about and what do they not care about?

All these things can be formed into what is known as a user persona, which is a high level overview of what the typical user is like and what they’re looking for. There may be more than one persona as well. After you’ve done extensive research, you want to start coming up with the game plan.

Now, hopefully you recorded everything possible in your research phase.

3. Analyze the data

And now it’s time to analyze that data. Is there anything that sticks out to you? Is there anything that kept coming up over and over again, that you heard from potential users start to think about how can you mean both the business needs of the client or stakeholder as well as meet the user need where they’re at, you usually start with the information architecture (IA), which is basically like the hierarchy of information or content within the product. You want to make sure that the users are able to find what they’re looking for easily and that they can work through the product in a natural and easy way so they don’t get confused. Determine the best hierarchy and organization is going to make sure that your users can find what they’re looking for and you can present information that you want to present them with at the right time.

User flow or Workflow

Once you have that information architecture it’s now time to start thinking about the user flow or workflow. This is how the user is going to go from point A to point B in the system, how those pieces are going to interact and the different workflows they may take to achieve different goals.

Sketching or wireframing

Next, you want to start to form your ideas using simple rough sketches known as wireframes. This is to start coming up with the blueprint of the design. So think of it more as a rough layout rather than a fully polished design.

At this point, you want to make sure that you’re getting your idea across enough that that idea can be explained and shared with others to get feedback and so on without having it look too polished. There are a lot of tools out there for creating wireframes but you can use a simple pen and paper people use things called actra balsamic.

You can even use sketch or Illustrator a lot of these tools are helpful because they allow you to get a wireframe up quickly. And they allow you to set up interactions within the wireframe so you can start testing out this idea with your users getting into the user’s hands as soon as possible. It’s going to make sure that your idea is solid before you spend too much time on the final product.

User testing of Prototypes

If you are a purely UX designer, this is a stage where you heavily test your wireframes. With users, you observe how they use it. Do they get confused? Are they not finding what you’re wanting them to find? Are they getting lost? Ideally, you would test the wireframes out with real users and get their feedback and continually iterate and refine the wireframe until you’re in a good spot with it. And you can hand it off to the UI designer. And again, you want to make sure that you’re meeting the user’s needs while still meeting the business goal of the product.

4. UI Design or Visual Design

Once the wireframes in a great spot, it’s ready to be handed over to the UI or visual designer at this stage, we start building out the visual design system. This is big picture visuals, things like color palette, type autography styles, button styles, common element designs that are going to be repeated throughout the product and so on. You want to make sure that you can nail down the look and feel of the product before spending too much time in a design similar to wireframes. a style guide or sometimes known as a style tile or mood board can give you something to present to your users or your stakeholders to make sure you’re on the right track.

You want to make sure you’re capturing the overall vibe of the design that you want to have, whether that’s clean and simple, high end luxurious corporate conservative. So again, you’re not wasting time doing full design cops that are way off the mark.

Create Hi-fidelity design

Once the design direction is down, now it’s time to apply a design system to the wireframes. To create a full, high fidelity design mockup the show pretty much exactly what the products going to look like. So there’s no question by the developers or your users or your stakeholders of what that final product will actually be.

5. Development

Once you have the design nice and solid. Now it’s time to hand it off to development. In some cases, a designer will also be responsible for their front end coding of the design meaning if it’s for web, HTML, CSS, and JavaScript, but in some cases, you can hand off just a pure design comp. And using a tool like InVision or zepplin. a developer can take what they need from the design and implement them to code themselves. It’s best to work with your developer at this point.

Want to make sure they’re not missing anything, or they’re not overlooking a detail on the design that you want to make sure it comes across in the final product collaboration with developers is key, I will definitely do another video on this you’ll be able to help them or they may come to you and ask for a design change to be made based on the technology they’re using.

Once the design is developed and built out, now it’s time for the design to be tested on an actual device or simulated device.

6. Testing / Quality Assurance

This is the phase called quality assurance or Question Assurece or QA. Now it is the QA’s job to test it and try to break the product as best as they can. Finding what are known as bugs so that the developer can fix them before it actually gets shipped. We do not want to have the product we spent so much time on to go out only to be buggy and broken so catching all the bugs that you can and fixing them before it’s released is super important. When everyone’s happy with the final outcome the products finally ready for launch and you can celebrate but don’t think it’s over because it’s not you should continually test and refine your product as time goes on. You may think you get a lot of feedback from users about things that they are requesting or things that aren’t coming through or confusing or broken that you didn’t notice before. Take all that feedback, continually make improvements and adjustments and your users will thank you continue to optimize the design or enhance the functionality as new needs, Arise, iterate, iterate, Eric, it’s hard to say when a product ever actually done because it could always be improved. But this is typically the time where you can sit back and enjoy the fruits of your labor until you get some more feedback from your users. And then back to the drawing board. Hopefully not the whole drawing board.

How to improve the UX on your website

If you want a UX design or improve the UX on your site, then try to look at everything through the eyes of the user. This will answer the questions:

What are you waiting to meet on the page’s name?
Will the design of a page support your goal?
Are the buttons used in the right place?
Does the site work well on mobile?
Is the content of the page well structured and optimized to be easy to find?

In order to test from a UX perspective your website, you can ask for the help of a friend, you can use questionnaires or conduct a study through key questions for users to highlight the weaknesses.

Another test can be A / B testing. With this test, you present several versions of the page to several groups of visitors. It is an excellent way to find out more about how others view your page and give you the best results.

Don’t optimize for search engines

It is extremely important to understand that you do not have to optimize the ones mentioned above just to get a good search engine ranking.

Everything should be optimized for people.

This means making every effort to make your site excellent in all possible ways:

Excellent content
Sure
Easy to use both on the desktop and especially on mobile

Make all these changes for your visitors and not for the search engines and thus you will gain much more in the long run. When you understand your users you will also gain search results.

The Do’s and Dont’s in UX

As we just mentioned, one of the things you really shouldn’t do in UX is optimizing just to score in the search engines. But there are more specific do’s and don’ts in UX as well.

Let’s take a look at the most important ones.

Do’s in UX

1. Make your buttons look like buttons

This seems like an easy task to do but I tell you from my own experience that it is not as easy as you think. It is very true that a simple and modest design often works best for any need, but when it comes to interactive elements, then you have to make sure that the user has to know what to do next.
A square button and text are not enough for a button. When this button makes them rounded corners, give them a little depth, use shadows, a focus, and a good click state then the button will have greater potential.

2. Make your links look like links

The same is true for links. People have learned over time that you can click on the highlighted blue links. Nowadays we try to remove the underline or change the color. Studies show that people have trouble identifying these words with the connection.

What if some of your users are blind? In this sense, the accessibility guide states that “color should not be used as the only visual means of indicating an action”. This requirement does not mean that we must necessarily emphasize the links. But we can make the most of these links by changing their size or font and find what works best for your site.

3. Communicate with the words your users use

The same is true for links. People have learned Another thing that you should do then and it is about UX, is to communicate the message through the words used by your users. Even if you are an expert in the field, you should use fewer technical words.

Think about why your customers should buy from you. For example, instead of “your site convert enough?” you can say “Do you want more paying customers?”

4. Have clear navigation

Having clear navigation is essential. Navigation should be very complex or more complex than needed. Less is more. You should simplify this navigation so that your users get to where they need it in a simple and natural way.

For example, a drop-down menu adds a cognitive load to the visitor’s decision process. This means that each visitor has to consume more energy to reach the desired page and make a decision. Make sure the navigation is clear and clear.

Also, you must make sure that the important pages of your site are not more than 2-3 clicks away from the homepage. The more a user has to scroll through several pages to find what interests him/her, the more likely it is to quit before they get there.

At the same time, you must ensure that users will always find their way back. It is not right for them to lose themselves on your site. You can do this by having the main menu on each page or by using breadcrumbs. A breadcrumb is the small text path present at the top of the page.

For example, in Figure 6 you can see breadcrumb. This breadcrumb will show you where you are and each part of the path is clickable.

On omubo.com, we provide users with several clues as to where they are on the website. There’s a main menu above the page, which shows part of the site users is on. In addition, there are breadcrumbs just below the menu.

5. Offer a consistent experience across platforms

You need to provide consistent experience across all devices, ensuring that visitors can do the same thing whether they are on desktop, tablet or mobile. Today, 90% of visitors come from smartphones. We advise you to design the site first for mobile and then for desktop and tablet. Thus, scaling becomes easier to achieve, conversely being usually more difficult to achieve.

For example, in the desktop version of image 8 and the mobile version of image 9, omubo.com is very similar. They have the same information and have the same functionality.

Dont’s in UX

1. Don’t write: ‘Click here to (…)’

One of the things you should stop doing is writing ‘Click here to (…)’. Even if we may have trouble identifying links sometimes, we know how they work by now. You don’t need to include this phrase. Focus on what the button does by stating a clear call-to-action, for example: ‘buy this product’, ‘contact us’, ‘login’, ‘activate’, and ‘download’. Explain the context in the preceding text if you have to, but keep your buttons clear and actionable. This makes things much more clear for your user.
Moreover, it helps with conversion, which we’ll come back to later in this module.

2. Don’t make users guess where their click takes them

The same goes for navigation: you shouldn’t make users guess where their click is going to send them. Make the items descriptive. Don’t call an item ‘employment opportunities’, call it ‘jobs’. Don’t say ‘calculate your BMI’, but say ‘find out how much you should weigh for your height’. This concept is called ‘information scent’. Like predators stalking their prey, visitors to your site are following clues to find the thing they are looking for.

If there are not enough clues, or if they’re too vague, your visitors will get distracted and wander off. One thing we did to improve our information scent on Yoast.com was changing the heading ‘WordPress plugins’ to ‘Yoast SEO plugin’. This change increased conversion, which simply means that more people bought our product. This may well be because people visit our site expecting a product by Yoast to improve their SEO. The heading ‘WordPress plugins’ then won’t sound like the thing they’re looking for. They’re looking for SEO, from Yoast. So ‘Yoast SEO plugin’ answers that call.

Conclusion

We’ve seen that User eXperience, or UX, is all about how users experience a product. And that’s important for SEO, because Google wants to provide people with the best result for their search. The best result doesn’t only mean the best information, but also the best experience. In addition, we’ve explained how to improve the UX for your site and we’ve discussed a few important do’s and don’ts for UX.

And that’s about it. So I know this was a lot. I hope this helps you get a good insight into what you can expect on the UX UI design project. You have any questions or comments, please leave them below.