User Experience in React
We’ve been using React for what feels like an eternity (2.5 years) and we love it’s robustness and light weight. The core of every React components is it’s ‘state.’ State is an object that determines how a component renders and enables components that are dynamic and interactive.
Something we came upon recently is the need to keep in mind how User Experience can be affected by state or view (not page) change.
How this Page Works:
The view of this page is dependent on two states. Before the student selects a question (to answer), the states are empty. After a student selects a question, the states adjust and a view containing the question is rendered. These changes all occur on the same page.
Problem:
When clicking on the “back button” of their browser, students expected to be brought back to the question selection page. However, since the question selection and display are rendered on the same page, once a question was chosen, the ‘back button’ would take them to the homepage, not the question selection page. Additionally, there was no easy way to select a different question (than the original four) before or after the original selection.
Solution:
We fixed this with two simple links (this was more appealing than trying to hijack the default behaviour of the ‘back’ button)
Review your interface/interactions and look out for places where state may affect your User Experience. If you find some interactions that might not be straightforward, guide your users by being a bit more explicit.
If you like this post, subscribe to the publication (UI/UX examples and topics) and get involved in the conversation! Give this a clap 👏!
