O'Reilly logo

Designing Web Interfaces by Theresa Neil, Bill Scott

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Dialog Overlay Process

As mentioned before, any page switch is an interruption to the user's mental flow. In addition, any context switch is a chance for a user to leave the site. We seek an experience that has as little mental friction as possible. But sometimes the step-by-step flow is necessary.

The Netflix approach just described (Figure 8-9) uses a Dialog Overlay Process to encapsulate a multi-step flow inside a Dialog Overlay. We looked at Overlays in detail in Chapter 5. Overlays allow us to keep the context of the page yet present a virtual space to conduct a conversation with the user.

Discover.com recently expanded its account section with a more detailed profile. The profile captures things like your payment date, mobile fraud alerts, paperless statements, and general contact information (Figure 8-11). The overlay pops up when you first enter your account.

image with no caption
Discover encapsulates its "Create Your Profile" flow in a Dialog Overlay

Figure 8-11. Discover encapsulates its "Create Your Profile" flow in a Dialog Overlay

Considerations

There are some issues to consider when using the Dialog Overlay Process.

Making it feel lightweight

The Lightbox Effect is nice because it focuses the user on the task. But what is smart about the flow is the first page is colorful and rendered in a simple, pleasing manner. The process looks like it might be simple and feels engaging. ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required