What is the difference between horizontal and vertical flows ?

Horizontal and vertical flows are used during the analysis and design phase of prototypes.

Horizontal flows

Horizontal flows are usually used in the initial stages of design, where the entire look and feel of the prototype is being designed. Horizontal flows show the placement of buttons, menus, text boxes on the main screen mostly. However, every element has little or no further flows behind it in a horizontal flow. In some cases, the user may be directed to another screen or shown dummy data. However, the actual functionality is not implemented in horizontal flows.

Figure 1: Horizontal Flow

In the image above, horizontal flow will be concerned with the placement of all the UI elements and their look with each other.

Vertical flows

Vertical flows are functionality-specific as opposed to horizontal flows. They are used at a later stage in the design and testing process where the aim is to investigate a particular functionality and associated issues. They dig deep into how one functionality works till the last step. Vertical prototypes are connected to real data and systems. However, exception handling, security features, and the ability to make complete changes might not have been completed at this stage.

Vertical Flow for menu button

Both the prototypes do not have to be mutually exclusive. They can be merged to extract joint purpose.

Free Resources

Copyright ©2025 Educative, Inc. All rights reserved