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:

1. Screens: These are pages or modals in a web application.
2. 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.
3. 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

1. 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.

1. Action: The user clicks on a question. This action reveals the answer within the same screen, transitioning to a new frame.

1. 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:

1. 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.

1. 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!