DEV Community

loading...
Cover image for 5 UX Tips to Become a Better Front End Developer

5 UX Tips to Become a Better Front End Developer

Tapajyoti Bose
Freelancer || Blogger || Cross-Platform App Developer || Web Developer || Open Source Contributor
・4 min read

Just on reading the title, you might think Didn't you release an article on the same topic last week? Let's address that first. Using UX and UI interchangeably is a common mistake among many Designers. So, we must differentiate the two:

User Interface (UI) refers to the space where interactions between humans and a product occur, whereas User Experience (UX) is an emotional outcome after interactions with a product.

UI and UX

Now, with that out of the way, let's move on to how we can deliver a mind-blowing (🤯) UX

1. Use a Polished UI

This goes without saying, UI is an integral part of UX. Without a polished UI, you will never be able to deliver a UX worth remembering.

It is also a good idea to create a wireframe or a mockup using some tools like Figma or Adobe XD before you start developing the actual product as making changes to the wireframe is much easier than making changes in the final product.

Mockup

You can check out this article to take your UI skills to the next level.

2. Use Micro-interactions

Micro-interactions are one of the key ingredients of UX. You might be wondering What are these "Micro-interaction" things?, well, let me enlighten you.

Micro-interactions refers to the small and subtle changes in the UI, triggered by some user action. Such as click, scroll, hover, etc.

Without Micro-interactions, the users will feel as if your site lacks something, even though they will be able to pinpoint the issue.

NOTE: You need not use some super fancy animations, only basic ones are good enough (but the fancy animations does help in keeping the user engaged)

Scroll Animation

3. Reduce the number of actions to accomplish a task

Day by day, the attention span of humans is reducing to the point that even a goldfish has more attention span than us. The more actions a user has to perform to achieve his goal, the less likely it is that he will follow through.

Attention span over the years

The solution? Frequent actions should be large buttons, placed in easily reachable zones. Another method to minimize the user's effort is by opting for the following:

no action > scroll > click

In case you absolutely have to use clicks, make sure you minimize the number of clicks.

4. Reduce Load time

Perception of the speed of the website is based on load time and smoothness of animations. What matters the most to users is that your website feels fast (even if it is just their perception).

As mentioned in the previous point about dwindling attention spans, delays longer than a couple of seconds will often make users leave the website, so make sure that your website loads fast.

You can buy yourself a few more seconds by using smooth and captivating loading animations like these:

Loading Animation

5. Intuitive

Often new Designers, trying to separate themselves from the herd design aesthetically pleasing, but utterly confusing layouts which leave the users scratching their heads even to accomplish small tasks. Quite evidently, the user engagement drops.

Nobody likes people (or websites) who make them feel stupid.

You should use common website patterns and interfaces instead of making the users learn something new, as consistent and easy-to-use interfaces help users concentrate on the content and navigate through it with ease.

Intuitive layout

Conclusion

Give yourself a pat on the back; now you too can be a great UX designer.

Pat on the Back

Hope you will employ these concepts in your applications and make awe-inspiring websites :)

Thanks for reading

Want to work together? Contact me on Upwork

Want to see what I am working on? Check out my GitHub

I am a freelancer who will start off as a Digital Nomad in mid-2022. Want to catch the journey? Follow me on Instagram

Follow my blogs for weekly new tidbits on Dev

FAQ

These are a few commonly asked questions I get. So, I hope this FAQ section solves your issues.

  1. I am a beginner, how should I learn Front-End Web Dev?
    First get the fundamentals of HTML, CSS, JS down; Learn any front-end framework/library (React, Vue, Angular); Then keep making Projects or make Open Source Contributions to attain mastery.

    Relevant Article Links
    1. Front End Project Ideas
    2. Get Started With Open Source

  2. Would you mentor me?
    Sorry, I am already under a lot of workload and would not have the time to mentor anyone.

Connect to me on

Discussion (4)

Collapse
akramnarejo profile image
Akram Narejo

thanks for this great information. really you have explained well and differentiated the UI and UX. especially when you mentioned UX is related to end users emotional outcome. loved it.

Collapse
ruppysuppy profile image
Tapajyoti Bose Author

Glad you found it helpful :)

Collapse
panchitosarria profile image
Francisco Sarría

hi!
could tell me what site is the one you use to illustrate the 2º point?
(the finance one)

Collapse
ruppysuppy profile image
Tapajyoti Bose Author

Actually it's a random gif I came across 😅

If you want to use similar effect, you could look into AOS. And if you want to check out a site using similar effect, you could check out my portfolio