User Experience (UX): the essential 4-step guide for a front-end developer + the practical tools and a real use case

---

Knowing the techniques and the software to create a mockup is not enough. We need to know how to create a system that has excellent User Experience and excellent Design. And as front-end developer we can’t ignore this knowledge: a developer must know the basics to develop every part of the application, always thinking about the end user. In this article we will learn the basics of UX and use a practical tool to validate the UX of an online web site.

Introduction

In the previous article we saw how to create a mockup of a desktop or mobile web application and how a good mockup, possibly also an interactive one, can be used:

• to get a preview of the final application
• to lighten the ideas in the development team
• to get feedback from the client before even writing a line of code

However, knowing the techniques and the software to create a mockup is not enough. We need to know how to create a system that has excellent User Experience and excellent Design. So let’s see the basics of UX in 4 steps and then let’s explore a very powerful tool to investigate the UX of a real Web site: Hotjar.


Step 1: giving value with UX

When designing a web application there is a fundamental question that we must always keep in mind:

Am I giving value to the user in the fastest, easiest and most complete way possible?

If the answer to this question is YES, then we did a good job of UX.

The first step when we design a new application is to understand the value we are giving to our end user. If we do not provide any value then our application has no purpose and will probably never be appreciated by anyone.

When the features of our application “match” with our client’s requirements because they save time or money, then we are offering value.

But giving value is only the first essential step for a good UX. The next step is to understand what is the best way to provide value.



Step 2: iteratively search for simplicity, speed and completeness

The second step consists in an iterative process to search for the simplest and fastest way to provide value to the user. In order for speed and simplicity to be optimal, it is always important to measure:

• the time required to obtain a value
• the interactions required to obtain value

The more we can reduce the time and number of interactions required, the better the customer’s satisfaction.

This process is iterative and requires, when possible, feedback from the end user. The mockup is one of the most powerful tools to get feedback quickly.

Finally, remember that the value provided to the user must also be complete, because if it is partial we force the user to interact again with the application to obtain the remaining part of the value, making him waste time.

In the case of a web application the more a site is cumbersome and involves many clicks, the less the speed in obtaining value is. A good book to learn more about these issues is available at the following link:

100 Things Every Designer Needs to Know About People



Step 3: fun and aesthetics

When the previous steps are optimized, we can evaluate way to provide value using fun and aesthetically beautifulness.

If in fact we manage to excite the user who interacts with our system, then his experience will certainly be more pleasant.

In the case of a web application, exciting the user means:

1. do not introduce negative emotions resulting from errors or slowness of the system,
2. introduce positive emotions with an excellent graphic design (colors, fonts, animations, alignment, … as we will see later) and interactions that they look natural and conform to what the user expects.
   

We’ll talk about this in the article about the design rules for a developer, introducing the basics of the design for develping a front-end system.

Step 4: UX iterative process

When applying the previous steps there is no rigid order. It is important to proceed iteratively and apply what was said in each of these phases:

• Analysis: analyze the user’s expectations (requirements)
• Implementation: come to a version of thesystem
• Test: understand if this version satisfies the customer

Through this process we can discover new aspects not previously known or ignored and improve the level of UX by increasing our level of knowledge of the context. We will use new knowledge of the context to redefine and solve existing problems or new ones arising from new knowledge.

Test the UX of the product

When we design a new application, our goal will be to apply the previous steps and try to get the best possible result.

With the mockup we will be able to quickly understand if a user can appreciate a tool, but when we develop the application often the result is different from the mockup, often significantly, and for various reasons:

• technical limits
• higher costs than expected (and consequently reduced times)
• developers who are not UX-sensitive

In any case, for a finished product we cannot assume that the UX is optimal, but we must test our usability hypotheses.

If we work in a large company it will be possible to interview end users and invite them to preview the product. If we work in a small company or if we are independent developers, this is more difficult.

But there is a tool that allows us to understand how a user uses our web application anonymously and transparently. It’s called Hotjar and in the free version helps us to check the usability of any web product.


Evaluating the UX of a web project: user session videos and heat maps

In this section we will see how to obtain information about users when they browse our web system (in an anonymous and aggregated form). In respect of our users, remember to always specify in the privacy policy that we use these tools (this is also a form of UX).

Among all UX tools, the ones I find most interesting are the session videos and the heatmaps.

Hotjar is a software system that provides both of these tools.



Installing Hotjar

After registering with an account on Hotjar you can copy a script to include in our Web pages, a bit like you do with Google Analytics.

The final step to complete the installation consists in verifying that Hotjar is correctly included in every page of the site, by clicking on the Traking button at the top right of the Hotjar page:



Heatmaps to improve interaction

A Heatmap allows us to understand what users click more on the page: the more the links are clicked, the higher the color will be red.

For each web page we will get an idea of ​​the most important links. The question is: are these links also the most clicked ones?

If this is not the case then we must iterate the UX, for example:

• by modifying the design of the link
• by modifying the position of the link
• by modifying the text of the link.

After those changes we will evaluate a new Heatmap.

To create a Heatmap press the top left button in the Heatmap section:

What I generally do is create a Heatmap for a specific web address (third step of the creation wizard):

After creating a heatmap we just have to wait for the first visitors to come and see if we did a good job or not.

Recording the browsing session

The Heatmap is a static tool which aggregates the interaction of several users on the page. To fully understand if the site is used as expected, session videos are certainly more useful. In Hotjar a session video is called Recording and to create one recording we use the specific section once again:

From a UX prespective, with a recording we can have lots of information, both for the desktop and the mobile:

• identify errors
• identify slow interaction sequences
• identify complicated or unclear parts of the page, often “invisible” to the user

Examples from a real use case: devexp.io (the version before the one currently online)

For the site https://devexp.io I applied the concepts learned above. The most important thing is always to listen to user feedback and iterate.

At the beginning, when there are few visitors and it is difficult to get direct feedback, you can use Hotjar tools to evaluate user behavior on the site and, once again, iterate the interaction design simplifying it at each iteration.

So let’s see some UX improvements made on the site from the first version onwards.

Iteration from feedback: reading through PDF or ePub

A function requested by some readers was to download an article in PDF and ePub. I therefore introduced the possibility of downloading an article in these formats.

After we introduce a new function, we need to test it and see if it actually gives value.

The function introduced was then evaluated using Google Analytics and today many users prefer this reading format compared to the web page. The reasons may be different, but the result is that for those who prefer to have PDF, the experience is now improved.

(Note: today PDF and e-book are freely available only through the newsletter to registered users) 

The top menu

In the first version the design was very simple and there were several links that were not intuitive. With the heatmap I noticed that a link was often clicked, especially the link Angular.

In the first version there was an image slider on the page that ran between an Angular image and another image every 2 seconds.

When the Angular link was pressed, the slider moved and remained fixed on the Angular image.

Of course when the slider was already in the Angular section, clicking the link did not happen anything because you were already in the Angular section.

When in the recording sessions you see that many users click the link several times and nothing happens, you understand that something is wrong. In this case the impression is that the link was broken!

Today the Angular link refers instead to information on the textbook: the user’s intention is probably to investigate Angular concepts. In the sessions recorded after the change, those who clicked on the link did not return immediately, a sign that the user had actually found what they were looking for.



Registration on exit

Many readers read an article without registering to the site; I thought then to introduce a registration popup when leaving the page.

With recordings I noticed that many readers see the popup and close it before closing the article tab. If you are an unregistered reader, but following devexp for example via linkedin, showing the popup every time is just a nuisance.

The solution was to show the popup to a visitor only the first time he visits the site, without further bothering him.

Conclusions

We have seen how some simple UX concepts can greatly improve the user experience with our software. More generally, whether it is a tool with a graphic interaction, or a library, or even a non-software system, we should always think about the end user who will use our product and we should try as much as possible to simplify its way to use it.

In the case of a graphical interface, we can improve the UX even in the mock-up phase, but we will have to test the usability for the finished product anyway. Hotjar is a tool that helps us to do it in a simple and free way, monitoring a user’s sessions. With this tool we can improve the experience of future users:

• making assumptions,
• implementing solutions and
• checking if the results implemented have led to improvements over the previous version.

After learning the basics of UX, in the article about the design rules will look at the basics of design for a front-end developer. A front-end developer, even if he is not a designer, still needs to know the basics of creating aesthetically pleasing products or even just to interpret the designers’ language correctly.

---