5 UX responsibilities for a front-end developer — UxNow #3

If you've been out of the loop for a while, it's important to know that User Experience (UX) has become a crucial factor in converting website visitors into customers. In today's competitive business landscape, it's more challenging than ever to stand out, and users tend to opt for simpler products.

In a company, I consider that everybody should be concerned with the UX. The backend developers, the frontend developers, the CTO, and the product teams should be focused on improving the UX.

Everyone fights. No one quits

We need to be clear that UX should be the priority of some specific roles in the company. UX Design requires specific skills including psychology and art. And I consider that only individuals with an appropriate background should be responsible for designing products.

Since it seems very understandable at first look, a lot of people think they can make decisions on the UX while the difference between a good idea and a wrong idea is very subtle. So if you never studied UX, you can give your opinion but please remain humble and don't make big decisions by yourself about flow, layout, etc.

But in most organizations, UX Designers are not enough and they give enough freedom to developers about the implementation. Then front-end developers are responsible for several topics. This article aims to guide you through various responsibilities and provide you with suggestions on how to enhance your skills in these areas.

Of course, depending on the size or the expertise of your company, some of these topics might be handled by a dedicated team.

Let's start with an easy topic.

Perfect UI style

In UX, a lot of details are important like spacing, font size, and colors. UX Designers spent time working on mockups, testing their designs with users, and iterating. So please respect their work.

Figma design

I am bored of seeing lazy developers delivering different interfaces from the mockups because they cannot style enough their user interface.

CSS is a specific language with subtilities, exceptions, a lot of unlogic situations, and legacy properties but it is not a valid reason. As a front-end developer, you are expected to know all these details and be able to deliver.

If a mockup is provided, you should follow it. It is not your role to play Picasso. So please learn CSS and implement a user interface matching pixel-perfect the mockups.

My only advice about CSS is to practice, practice, and practice. Try to reproduce the challenging user interfaces you see. Learn about grid system, flex, z-index, box-shadow, filters, etc.

You can use this website for training: https://css-challenges.com/

The only exceptions are animations since they are really more challenging and often require Javascript and third-party libraries, and when you need to manage responsivity because UX Designers rarely provides mock-up for all the screen sizes (most of the time, only desktop, mobile and tablet).

However, it doesn't prevent you from challenging UX mockups. UX Designers are sometimes too hurried and can make mistakes, especially about consistency between components.

Accessibility

In 2024, everybody should be able to use the internet and your website. You must make your website accessible, including to people with disability.

Depending on the size of your business, it might even be mandatory by law to have your website accessible and you might be fined if it is not the case.

First of all, accessibility on the web is well specified with norms WCAG 2.1, WCAG 2.2, and the working draft of WCAG 3.0, as of February 2024.

There are a lot of criteria to respect. So to not be overwhelmed, start small and improve the coverage step by step from levels A (minimum) to AA and AAA (highest).

The 3 general aspects you must be careful about are:

• colors 🎨 : use colors with enough contrast to distinguish the components of your page
• descriptions 💬: you need to add alternative text to images, label for icon buttons and inputs
• interactions: all elements should be accessible and interactive with keyboards

As a front-end developer

A lot of tools exist:

• lighthouse It will help you to detect basic accessibility issues directly in Chrome
• check the contrast between your background and text colors: https://colourcontrast.cc
• run Playwright accessibility testing: https://playwright.dev/docs/accessibility-testing (and even better: run it in your CI) ➡️ I will publish soon a boilerplate including these tests so follow me if you want to see how to implement it.
• install a screen reader browser extension to be sure that all your pages are readable by a screen reader
• use storybook accessibility add-ons to verify if your components respect accessibility rules

Tip: To ensure accessibility, consider adding code specifically for screen readers like in the example below.

<a href="#">
  <svg><!-- ... --></svg>
  <span class="sr-only">Settings</span>
</a>

All the tools and tips are most of the time not enough to be sure your app is compliant with WCAG 2.1 and accessible to people with disabilities. To be sure, it requires extra skills and even user tests but this should be work of UX Designers.

Localization

Not everyone lives in the USA, so it's important to customize your website interface in a way that people from all over the world can understand. Unfortunately, many UX designers tend to neglect this aspect as it often involves a lot of use cases.

The localization covers 3 parts:

• language ⽭: people should be able to see the text of your product in their language
• dates 📆: each country has a different way of displaying dates and some of them may be confusing like DD/MM/YYYY in France and MM/DD/YYYY in the USA and it can lead to errors. Generally, I advise showing the date as "Friday, 1 June 2012" for less confusion.
• currency 💵: A price of 10k US dollars looks like 10.000,00 $ in France but $10,000.00 in the USA and 10 000,00 $ US in Canada/Quebec 🤯 . In addition to that, every country has a different currency and not everybody knows how much the US dollar represents.

As a front-end developer

Dates are easy to manage.

1. First, always store your dates in the date time string format in your database: 2023-11-05T13:15:30.000Z
2. Use the native javascript Intl.DateTimeFormat . Some extra libraries exist but from my experience, they are heavy, and very often they are not as good as the native way so save yourself some time.

const date = new Date(Date.parse("2023-11-05T13:15:30.000Z"))

Intl.DateTimeFormat(
  "en-CA", 
  {
    dateStyle: 'full', // "full", "long", "medium", or "short"
    timeStyle: 'long', // "full", "long", "medium", or "short"
    timeZone: 'Australia/Sydney', 
  }
).format(date)

That's all for the dates. Easy. I told you 😏

Currency is slightly harder:

1. Render the price based on the currency and the user's language: it looks easy and you might be inclined to do it manually but since there are so many variations, save yourself some time and use the native javascript function Intl.NumberFormat .
2. Convert the amount to the user's currency: you will need to maintain a conversion table for your prices and keep it up to date since the currency values change every day.
3. Use a payment provider accepting different currencies

Points 2. and 3. are more optional but you need to take care of 1.

Languages are harder to manage:

1. Use a library in your code to manage different versions of the text displayed like i18next. In React, I like react-i18next , it is simple and does the job.
2. Use a solution to manage your different versions in the backend. It can be JSON files, databases, or third-party libraries Localize. The challenge is to maintain the translations over time.
3. Find a way to translate your text. You might need to hire people who can translate between the languages you want. The challenge is to find people with enough knowledge to choose the best words based on the context. Some languages have formal and informal forms and using the wrong forms might be considered as rude.
4. Manage right-to-left languages like Arabic or Persian. When you use a front-end library, use a native layout system like Stack and Grid in MUI or start-0/end-0 in Tailwind.

Error management

This part is often the blind spot of UX Design since they often focus on the optimistic path. Remember that errors happen either on the user side or at the technical level.

404 Not Found

The 4 steps to follow are:

1. Enforce limitations to prevent errors before they occur. For example, we can limit the number of characters a user can enter in a credit card field.
2. Show the error at the right time and in the right place. For example, in a form validation, the errors are often displayed when the user submits the form while some of them could be detected sooner.
3. When an error happens, give enough feedback about the reason for the error. If it is a technical error, try your best to translate the reason using non-technical language
4. Always suggest a way to recover from the error so you don't leave the user alone.

A good article about guidelines for error messages: https://www.nngroup.com/articles/error-message-guidelines/

In React don't hesitate to use ErrorBoundary to avoid hard crashes and display a nicer message.

Performances

The users should not have to wait for machines. So please take care of your website performance. This is your responsibility as a developer.

Of course, some performance issues may be caused by data loading from the backend. But a lot of improvements can be made on the front-end side:

• reduce the asset size: images are particularly heavy and may slow down your page loading speed. Convert your images to a more optimized format like WEBP and load images with sizes optimized for the viewport you target (mobile, desktop, preview mode, etc)
• use a CDN
• cache data and assets using Progressive Web App
• lazy load some components of the application. In React it is very easy: https://react.dev/reference/react/lazy.
• use server-side rendering systems like next.js, remix, or even static rendering when you can.

Extra tip: use Lighthouse to benchmark your website and check what is slowing down your page.

Conclusion

You just got the top 5 UX responsibilities as a front-end developer. If you follow the steps described above, you will already improve your app a lot.

I'm doing my part!

If you are new to the UX, I suggest you also check the 10 Usability Heuristics for User Interface Design by Jakob Nielsen. It gives a good idea of what you should be careful about when you code a user interface.

Did you like this article? Remember to clap 😜 !

If you like this article, you might like my other articles.