Normalized User Interface (UI) Design for Frontend Developers
As front-end web developers, it's important to understand the concept of normalized user interface (UI) design. This approach involves splitting software workflows across different screens, ensuring each screen focuses on a particular task. This simplifies the user experience by reducing confusion and making interactions more intuitive.
Key Concepts: Workflows, Screens, and Frames
When thinking about UI design, we often consider features, but for normalized UI, it's more useful to focus on:
- Screens: These are pages or modals in a web application.
- Frames: These are sets of UI elements that can be accessed simultaneously at a specific moment. They represent a subset of a screen's potential content.
- Workflows: These are sequences of actions that users take, which might involve moving between different frames or screens.
Example: Link Navigation
Let's consider an example using links to better illustrate these concepts:
Workflow with Frames
- Screen 1: The user starts on the main page, where they see a list of frequently asked questions (FAQs). Each FAQ is collapsed initially, displaying only the question. This state is a frame because it represents a subset of content on the screen.
- Action: The user clicks on a question. This action reveals the answer within the same screen, transitioning to a new frame.
- Action: The user clicks again to hide the answer, returning to the initial frame.
Workflow with Screens
Now, consider a different design approach using screens:
- Screen 1: The user starts on the main page with a list of questions, but instead of expanding within the same screen, clicking a question navigates to a separate page that displays the answer.
- Action: Clicking a question takes the user to a new screen (or modal), dedicated to showing the full answer.
Workflow Diagrams
- Frame-Based Workflow Diagram: Here, each action changes the frame without navigating away from the screen.
- Screen-Based Workflow Diagram: In this design, each action navigates to a new screen.
Conclusion
Using normalized UI design principles and visualizing them through workflow diagrams can make the interface more intuitive and user-friendly. Whether you use frames within a single screen or navigate between screens, the goal is to simplify the user experience and reduce confusion. Stay tuned for more insights on Normal UI design!
Top comments (0)