If your application gives the user a good feeling, they are more likely to continue using it.
2020 is right around the corner, which means more React apps are coming to the market. It is prime time to learn new UX tactics to stay ahead of the curve, and keep your app competing with the best!
Today we will be looking at some of the tactics that the top players of the industry are using. Placeholder content, micro-interactions, loading screen strategies, smooth fades & transitions. There is much room for improvement in each of our applications. …
Take a look at the before and after above. The “Before” example is the classic
<a href="#______"> method of scrolling to a section. When the user selects a link on the sidebar, the screen sharply skips to the chosen section. We have completely lost our position on our page, it’s as if we are looking at a brand new page. Any context between sections is lost, consequently affecting the user’s experience and sense of control.
To keep the section’s context exposed, we can instead smoothly scroll from section to section (which we will soon learn how to do). Take a…
Today we will be approaching five essential parts of our applications that are drastically improved by using the following components.
2020Throughout most of my React career, my primary goal was to build apps. Though building my own NPM library interested me, it felt somehow out of reach. It's not. Publishing a React component on NPM that other developers can use is a simple process, and it can be incredibly rewarding. This coming year is a good time to expand our horizons and see how we can use our React skills to give back to the community.
2020 ← If you have never written a Medium article before, you should. Take that thing you learned a week ago, sprinkle it with some personality and perspective, and share it with the world. As long as you put your personal twist on the topic, you are providing value, and the internet will benefit from your contribution.
It can be an incredibly rewarding experience, or it can be an underwhelming one. I want to help you achieve a rewarding experience on this platform. …
Medium holds the perfect example of an improved user experience.
Pressing it is an instant dopamine release. Confetti, bright glowing animations, a sharp vibrate when pressed on mobile, this clap button is fun to interact with. These micro-interactions are an instant way to get users to fall in love with your application.
Let’s take a look at the before and after example above. The before example simply indicates that it was pressed with a color change. Bland, but gets the job done. The after example immediately gives you an attractive green outer-glow when you hover over the button, teasing you…
Our applications are always moving from screen to screen, constantly throwing data at the user. Today we will look at how we can handle these transitions in the most elegant and beautiful manor.
Let’s take a look at the before and after example above. In the before example, the welcome screen immediately pops up, no animation, no transition, just sitting there. Ugly. Then we click on our inbox and get a rigid transition straight to some messages. I don’t really enjoy using this person’s application, it just feels basic. On the other hand, when looking at the after example, try…
Let’s take a look at the before and after in the example above.
In the before example, we have a simple loader animation having us wait for some mysterious content, then unexpectedly throws us some cards when it is done loading.
In the after example, notice the smooth gradient moving across the placeholder cards, indicating to the user that we are loading some content for them here, and then gracefully fading the results into their designated slots.
The page should always look and feel structurally sound.
An important takeaway from this strategy is the structure of the page before…
Redux can be a hefty way to implement global state management in your small to medium size applications. In this guide, we will look at the absolute slimmest, quickest, easiest, way to implement state management in your App! These simple steps should take you less than five minutes, and you’ll be up and running with your own global state management system.
We will be using the React Context API, which is already included in React so we don’t have to install any additional packages for this project.
npx create-react-app contextpractice
We first create a small
state.js file that will contain…