Starting greenfield software projects is exciting, especially when there's a new UI to be built. These days in front-end web development, there's so many shiny tools and frameworks to choose from that it can be all to easy for an engineering team to start filling its preverbial shopping cart with the latest libraries and skip over the important work of setting a foundation for the performance, efficiency, and reliability of the new application. These are principles that transcend the team's technology of choice, and must be considered before a single line of code is written.
Once the software is written and features start shipping out the door, it's very difficult to go back and fix these foundational items. When teams aren't intentional about the kind of quality application they want to produce, it's all too easy to end up with a buggy, unperformant product.
In this article, I will breakdown three high-level principles I use to set this foundation. Each principle is meant to be a "feeling" users should have about the application. The principles are also paired with corresponding practices that can be used to achieve the principle.
The practices are meant to be a jumping off point for anyone to explore and adopt what fits for them and their application. There are many different ways to address the principles I've listed, and I've enumerated the practices I'm most familiar with or have used previously. If you have other recommendations, please reach out!
One last note, when creating these principles, I had line of business apps in mind, since that's the kind of applications I usually work on.
- The application should feel snappy and responsive as users navigate pages, submit forms, and load data. An application that feels snappy will result in more commitment and satisfaction from users.
- There's a difference between snappy and "jarring". The app should use animations and transitions to make interactions feel smooth as users navigate from screen to screen.
- Track the application's Web Vitals
- Real user monitoring can be put into place in the app to track how long specific actions take and where bottlenecks are forming. This will be most useful when integrated with an APM that can track requests all the way to backend services.
- Use a design system or component library that provides a sequence of consistent transitions and animations.
- Line of business users want to get in, accomplish their task, and get out. Therefore, workflows should be constantly monitored and improved to be as efficient as possible. Developers and designers should strive to minimize the amount of clicks and repetitive actions needed to accomplish major workflows.
- Utilize Google Analytics, or any number of user flow tools to monitor how long it takes users to accomplish major workflows in the application.
- Users need to be able to trust and feel that the application can reliably accomplish their tasks. Any instability will diminish this trust and lead to higher levels of frustration.
- Adopt a testing strategy which focuses on E2E tests for the most important flows.
- Create monitoring alerts that will automatically alert developers when users experience errors or longer than average latency.