Features to improve UX of your app

These days there are a lot of web applications competing for user’s attention. If you want your project to succeed, you need to build an app that is easy to figure out and use.

In this article, we will discuss some of the features that can improve user experience and make your app stand out.

Dark mode

Dark mode is a very useful feature, especially if you have a lot of text content on your website. It has been proven over and over again that reading light (white) text on a dark background is much easier on users’ eyes. So give your user’s the option to turn on the dark mode, they will appreciate it.

In my experience, as a programmer, I love reading documentation and blog posts that have dark mode feature.

Great thing is that dark mode is not a difficult to implement feature. If you’re writing on WordPress, you could even find a plugin that automatically adds this feature to your web app. Or you can use the onChange event handler and implement it yourself in React.

Smart forms

Forms are ubiquitious and essential for any web app to function. They are very useful for collecting user’s inputs. However, there is a good way and a bad way to implement forms.

For example, if you collect addresses, you want to evaluate user’s input and only collect verified addresses. Therh are many libraries to do that. There are many other ways to validate user inputs. For example, check if email forms contains ‘@’ sign to verify that user’s input is a valid email value.

There are many other ways to better implement smart forms. For example, a form that automatically fills in your city, state or country values after you enter the ZIP code. Or if the form is too long, break it up into three different parts.

You could also improve user experience by clearing the form after it is submitted. More about that in this guide.

Images with alt tags

For a long time, web developers were encouraged to use alt tags on their images, so this is nothing new. Alt tags are really useful. They help people with impaired vision understand images. It could also help your SEO. Research has showed that keywords placed in alt tags can improve ranking for that keyword.

Responsivity

Depending on the type of your website or web application, more than half of all visitors could be coming from the mobile and tablet devices. Implementing a responsive design can help you control the appearance of your web application on all screen sizes, from small to medium to large.

In today’s world, responsive design is absolutely essential.

Typography

Choosing the right type, size and boldness of text is extremely important. This is especially true for web applications with long texts. Also, there’s more to typography than just choosing a pretty font.

There is a big distinction between fonts used for copy (header texts, titles, ad copies, menu text) and for reading text.

Table of Contents

This is one more feature that is extremely useful for digesting long forms of text. Table of contents can help your users immediately find exactly what they’re looking.

Different ways to change elements’ appearance in React

React developers often use conditional styling and className values to build interactive web applications in React. I decided to write this guide to teach you how to apply styles and className values based on a condition and dynamically change the appearance of web application. We will explore different options for applying conditional styles and className values.

Inline styles in React

JSX is a templating language for React. It looks like HTML. In a lot of ways, it works like HTML as well. For example, JSX allows you to set inline styles. However, JSX is still JavaScript, so you can use features like a ternary operator to implement dynamic features. In this case, we can use a ternary operator to set inline styles. Here's how to make use of ternary operator in react jsx.

One more detail is that you need to use curly braces {} to embed a JavaScript expression inside JSX code. Applying a conditional style in JSX would look something like this:

<div style={{border: “2px solid black”}}>..contents</div>

There are few things to note here. First and most important is that styles are stored as key-value pairs in the object. Therefore you need to follow the rules of JavaScript object – property names can not have white spaces or symbols. Some CSS styles are multiple words, so what happens then? Answer: you simply combine these CSS styles into one word. The ‘background-color’ CSS property will be ‘backgroundColor’ property in React. Learn more about that here:
https://simplefrontend.com/set-conditional-classname-in-react/ .

Second, you probably notice double curly braces and wonder why that is. To put it simply, the outer pair of curly braces tells JSX to interpret the following values as a JavaScript expression. The inner pair of curly braces simply opens and closes a JavaScript object.

Conditional styles in React

Unlike normal HTML, we use the className attribute in JSX. We don’t write class because it is a reserved word in JavaScript.
Unlike Vue, React does not have a built-in system for applying conditional styles. We use ternary operator to determine a className value based on a state variable.

State usually holds values that might change as the result of user interaction. So if you have a React web application, you can offer a dark / light mode feature. In that case, you are going to store user’s current choice in the state. If the user currently chooses dark, then the mode state variable would be ‘black’.

Ultimately, dark and light modes are all about appearances. Dark mode is a white text against dark background, and light mode is the opposite. So you would have one of two className values depending on current value of the mode variable.

In JSX, that would look something like this:

<div className={mode === “dark” ? “darkMode” : “lightMode”}></div>

Once again, we use curly braces to embed a JavaScript expression. Then we use a simple ternary operator to check if current value of the mode state variable equals ‘dark’ string. If it does, we will apply the darkMode className value. If not, we will add lightMode.
Then you can go to CSS file to define these styles like you would in a normal HTML application.