Normalized User Interface (UI) for Frontend Developers Part 1

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!

The above is the detailed content of Normalized User Interface (UI) for Frontend Developers Part 1. For more information, please follow other related articles on the PHP Chinese website!