Improving U/X with Front-End development
Tags: beginners, react, angular, javascript
Published: 2019-10-20 19:13:28

Many people use the terms UX and UI interchangeably, but what exactly are they? Is there a difference? I'll skim the surface of UX in this post and hopefully provide some insight into the difference between these two acronyms. 

**UX**, short for *User Experience*, is often used to describe things such as load time of features on a website, readability of words/pictures, and as well as how the page looks as a whole. These all tie into what could make or a break a user experience. 

**UI**, short for *User Interface*, will definitely cross into the realm of **UX**, and that is because as I've aforementioned, the layout of the web page will surely impact a user's experience. How the user will interact with the page, the layout of your page, as well as accessibility are key features of your *User Interface*. It's easy to see here how **UX** and **UI** are so easily used interchangeably, but alas, they are still two separate entities.

Building onto my description of UX, I still have yet to talk about a few key ideas. Yes, UX involves technical aspects such as load times and page legibility, however this also ties into human emotions. How a person feels and what sparks in their mind while visiting your website will be a huge part of UX. Keeping this idea in mind when designing your website can make a user become a long term user of your website, or make them feel so out of their comfort zone, or upset, that they will not want to visit again.

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/z57hfwf54cuu0r0py80l.png)

With all of this in mind, how do we improve our user experience with Front-End Development? 

<ul>
<li><b> Colors </b></li>
Using colors that are appealing to your target audience can draw in the attention of users. Keeping them engaged and triggering those happy brain chemicals in their brains are all parts of this! This link has a huge post about choosing the right colors to fit your needs. You can see it<a href="https://www.crazyegg.com/blog/website-color-palettes"> here</a>!
<li><b> Performance </b></li>
Being sure to do small things like having your style-sheet at the top of your html and using an optimized framework can be super helpful when it comes to performance. Limiting the amount of GET and POST requests needing to be made can also boost your websites performance. I found a neat article with 35 tips on actually improving your websites performance, check it out <a href="https://uxdesign.cc/35-quick-tips-about-web-performance-114b8fab0d6">here</a>!
<li><b> Images </b></li>
Using images can also have a bearing on your <i>Performance</i>, however, this doesn't have to be too bad. When using links to websites with the pictures that you want to use, or using GET requests to retrieve images you'd like to use, this can play a role in slowing down your performance and reducing your user's experience. Going to a website and looking at an empty white box while some picture loads in is the <b> LAST </b>thing that you'd want your users to experience. Keeping your images local and embedding them into your css can reduce the possibility of a user staring at a white space.  
<li><b> Mobile Compatibility </b></li>
This is always something that a lot of new websites typically slack on. Ensuring that your users can access your website from their mobile phones, as well as on their home computers will greatly impact the usability of your website. This enables users to interact with your site when they are on the go, and in today's society, some people are <i>ALWAYS</i> on the go. 
</ul>

There are many more factors that can play into your user experience, (facebook has a department centered around triggering dopamine receptors in user's brains), but the route you take will solely rely on you! Check out some of the aforementioned links for more tips on making your website something that your target audience will enjoy.