What Problems Might You Encounter When Building Web UI?
As a front-end engineer, my recent work experience has shown me that many development issues still revolve around the appearance, behavior, or interaction aspects of the interface. For example: “drag-and-drop page elements,” “calendar,” “dropdown menu,” “data list”… It’s not that spending time on these aspects is inferior; they actually require experienced developers to create a reasonable structure through extensive research and consideration. For example, there are many things to pay attention to:
- Performance
- Accessibility
- Maintainability
- Testability
- Search Engine Optimization
- Cross-platform Compatibility
- Internationalization
- …
It makes me sigh that the development and maintenance costs of customized UI are indeed too high for small teams. On one hand, there is a desire to “quickly launch products,” while on the other hand, there is a hope for “high-quality practical results.” The result is that doing the right thing is always very difficult. Compared to mature and well-established projects, UI work in newly started projects is heavier and faces more challenges. Here are a few examples:
- Neglected Accessibility and Web Standards: Accessibility is often considered an optional feature during development, but it is theoretically necessary for some people.
- Lack of Documentation and Automation: Without experience or time to plan for automated UI testing, one can only rely entirely on manual testing and pray that no functionality breaks.
- Inability to Adapt to Web Changes: Since users rarely view web pages on small devices, completely abandoning small sizes may seem easy in the short term, but in the long run, it may come at a higher cost (hardcoding style sizes in web pages is already uncommon).
So How Can We Face These Problems?
Developers and designers will need to adapt to the ever-changing ways of web. For instance, when creating componentized UI, most developers should have a concept similar to Lego blocks. More specific guidelines, such as Atomic Design, are also quite popular and are expected to become industry standards.
Additionally, there are some necessary shortcuts that can help us suffer less and iterate products faster:
- Keep Web UI Simple and Plain: Good for quick responses; deepen brand style only after functionality is validated in the market. I believe that boring UI can be good UX, and costs should be focused on the right areas: “solving user pain points.”
- Respect Browser Standards: Although some standards are still confusing, inconsistent, or even incomplete, in the long run, browser standards are the true unchanging principles of web development.
- Make Good Use of Existing Tools: Libraries, style guides, headless UI, such as: React Aria, Radix UI, headless UI are all very solid foundations.
- Automated Documentation Tools: Plan to learn more about related tools when you have time, such as Storybook.