Truth be told, I never put much thought on User Experience and User Interface until I started learning React. React is one of many JavaScript libraries, created by Facebook and arguably one of the most popular Frontend frameworks today. An essential part — in my opinion — of starting a React App is wireframing. How does the app look? More importantly, how do we want users to interact with the app? What kind of experience do we want users to have with our app? Intentional wireframing is key to building a good frontend, especially with how React is set up.
A crucial note about React is the passing of props, which are inherited properties from a parent component. The way this was explained to me (and I’ve yet to come up with a more creative visualization) is a parent passing genes to their child. Not to get too specific and technical here, but a child doesn’t get to select which genes they inherit from their parent. In that same logic, when working with React, you want different components and containers to carry out unique functions. A Sign Up component will allow users to sign up, a Comments component would allow users to comment on stories, posts, et cetera. To know what each component has to do begins with a good wireframe and intentionality.
React is everywhere on the web. In fact, some of the most popular apps today use React: Facebook, Instagram, WhatsApp, AirBnb, even the New York Times. Below are two examples: AirBnb and the New York Times.
If you’ve used AirBnb before, the above should be familiar. I myself see a number of containers and components: a header component, a search component (to filter for location, date range, guests), a User component to indicate whether I’m logged in or searching as a guest, a map container which would change as I move my location, a container for individual listings and a preference container for buttons, which, when clicked on, will render different listings.This is how I might draw the wireframe:
A wireframe will clarify where information is passed, what and where certain information is stored, and how the app may change depending on what we want to see. From a quick glance, since the individual listings change when I click on a button (price range, cancellation flexibility, etc.), it’s fair to assume the information about listings would be stored in the container. Or, because the listings will also change when I change my location on the map if I zoom out or zoom in, the information would be stored in the App component and through props, different information is sent down to either listings or Map.
Again, from a quick glance, the wireframe might look like this:
…but, this changes if I click on the hamburger icon on the top left:
When I click on a topic on the subheader, it redirects me to a page specifically filtered. At the bottom of the page, there are links that will redirect me to a specific page based on the topic I want to read about. If I wasn’t subscribed and hit my monthly cap, a modal would pop up alerting me that I maxed out my articles for the month. If I click on the header, it’d direct me to the article.
Tell me if you’ve heard this statistic tossed around a couple times: a Google study found that most users expect their web page to load in less than 3 seconds. In fact, “53% of visits are likely to be abandoned if pages take longer than 3 seconds to load.”
While this is true, we know that speed is not the be all, end all for Users. After all, we’re users as well, and I can certainly think of sites or apps that load quickly but were not designed well. Maybe this was an app that wasn’t designed for a mobile device, or was designed in a confusing way. In fact, CareerFoundry lists a few examples of poor UX.
A few interesting statistics I found on how important UX is in addition to speed for an app or web page:
- “Every $1 invested in UX results in a return of $100 (ROI = 9,900%)”
- “88% of users are less likely to return to a website after a bad user experience”
- “39% will stop engaging with content when the images won’t load or the loading time takes too long”
(Source: UXCam)
All in all, having a good design not only benefits web developers and Frontend developers, it’s a great way to ensure returning users.
Learning React helped me understand where and how UX ties into Frontend development. Personally speaking, I had been creating projects with the intention of having it “look nice”, but learning about how props work in React and about the framework made me rethink about how I begin with creating a Frontend — and it begins with a clear, intentional wireframe.
