Trusted answers to developer questions
Trusted Answers to Developer Questions

Related Tags

hci
ux

What is the difference between horizontal and vertical flows ?

Sheza Naveed

Grokking Modern System Design Interview for Engineers & Managers

Ace your System Design Interview and take your career to the next level. Learn to handle the design of applications like Netflix, Quora, Facebook, Uber, and many more in a 45-min interview. Learn the RESHADED framework for architecting web-scale applications by determining requirements, constraints, and assumptions before diving into a step-by-step design process.

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.

RELATED TAGS

hci
ux

CONTRIBUTOR

Sheza Naveed
Copyright ©2022 Educative, Inc. All rights reserved

Grokking Modern System Design Interview for Engineers & Managers

Ace your System Design Interview and take your career to the next level. Learn to handle the design of applications like Netflix, Quora, Facebook, Uber, and many more in a 45-min interview. Learn the RESHADED framework for architecting web-scale applications by determining requirements, constraints, and assumptions before diving into a step-by-step design process.

Keep Exploring