What

Present only a few main entry points into the interface so that the user knows where to start. For first-time and infrequent users, it removes some of the burden of learning the site. Make them task-oriented or directed at a specific audience type. Use clear calls to action. The Clear Entry Points schematic in Figure 3-7 represents this concept.

Figure 3-7. Clear Entry Points schematic

Use when

You’re designing a site or application that has a lot of first-time or infrequent users. Most of these users would be best served by reading a certain piece of introductory text, doing an initial task, or choosing from a very small number of frequently used options.

However, if the purpose is clear to basically everyone who starts it, and if most users might be irritated by one more navigation step than is necessary (like applications designed for intermediate-to-expert users), this might not be the best design choice.

Why

Some applications and websites, when opened, present the user with what looks like a morass of information and structure: lots of tiled panels, unfamiliar terms and phrases, irrelevant ads, or toolbars that just sit there disabled. They don’t give the hesitant user any clear guidance on what to do first. “OK, here I am. Now what?”

For the sake of these users, list a few options for getting started. If those options match a user’s expectations, they can confidently choose one and begin working-this contributes to immediate gratification. If not, at least they know now what the site or app actually does, because you’ve defined the important tasks or categories at the outset. You’ve made the application more self-explanatory.

How

When the site is visited or the application started, present these entry points as “doors” into the main content. From these starting points, guide the user gently and unambiguously into the application until they have enough of a context to continue by themselves.

Collectively, these entry points should cover most of the reasons most users would be there. There might be only one or two entry points, or several; it depends on what fits your design. But you should phrase them with language that first-time users can understand—this is not the place for application-specific tool names.

Visually, you should show these entry points with emphasis proportional to their importance.

On the home page or starting page, most sites will additionally list other navigation links—global navigation, utility navigation, and so on—and these should be smaller and less prominent than the Clear Entry Points . They’re more specialized, and don’t necessarily lead you directly into the heart of the site any more than a garage door leads you directly into the living room. The Clear Entry Points should serve as the “front doors.”

Examples

Apple’s main iPad page (Figure 3-8) needs to do only a few things: identify itself, make the iPad look inviting, and direct the user toward resources for buying one or learning more. The global navigation recedes visually, compared to the strong, well-defined entry point. There is a secondary focus on the row of small schematic diagrams. These are links to the iPad models, too, plus accessories. But above the fold, the users is clearly directed to the iPad Pro. On the rest of the page, there are additional front doors—large promotional images for other iPad models.

Figure 3-8. iPad page on Apple’s site

Spotify (Figure 3-9) focuses exclusively on the new customer with its website’s landing page. There is a simple and clear call to action in the center of the screen.

Figure 3-9. The Spotify landing page—a very clear single door

Adobe Illustrator and other applications show a startup dialog when the application is started (see Figure 3-10). This orients a new or infrequent user to the possibilities for action. The major actions are creating something new or opening an existing document. Each one is treated twice. On the left, for more experienced or confident users who are ready to get down to business, there are two boldly marked buttons: Create New and Open. Despite being small, their visual treatment makes them pop as entry points into getting started. On the right, there are the same two options, but given a much bigger, more visual and more explanatory approach. “Start a New File Fast” has several choices that represent most likely device and screen sizes. The schematic diagrams for each make them even easier to understand. Below this, in Recent, is a grid of recently opened files, each with a thumbnail image to assist in recognition and recall. This is a good example of designing different entry points to appeal to different users.

Figure 3-10. The Adobe Illustrator CC startup dialog

Prezi (Figure 3-11), like Spotify, is using its entry point on the website to make it easy for potential customers to move toward purchase. In Prezi’s case, it realized its innovative presentation software needs demonstration. Differentiating its product is the biggest need, and probably the biggest question in the minds of Prezi’s potential buyers. The front door sends the message, “Come in and check it out.”

Figure 3-11. Prezi’s landing page

Tesla (Figure 3-12) offers three entry points as represented by the three Tesla models in the photograph. The primary focus is on the Model 3 (the user interface zooms in on it, a clever move). With the focus on the Model 3, there are two entry points: Customize your own Tesla or browse the cars that are available now.

Figure 3-12. Tesla’s landing page

What

Fill the page with a list of links to content-rich pages in your site or app. Show enough information about each link to enable the user to choose well. Show no other significant content on the page. The venerable Craigslist home page (Figure 3-13) is an example of a highly successful menu page.

Figure 3-13. Craigslist

Why

With no distractions, users can focus all of their attention on the available navigation options. You get the entire screen (or most of it, anyway) to organize, explain, and illustrate those links, and can thus direct users to the most appropriate destination page for their needs (Figure 3-13).

How

If you’re creating a mobile design, Menu Page is one of your principal tools for designing sites or apps with many levels of functionality. Keep list labels short, make targets large enough to tap easily (for touch screens), and try not to make hierarchies too deep.

A word of caution regarding menu pages: It is very easy for these to become overwhelming. Consider using them for seldom-used screens such as reference or index pages. In all cases, look for ways to align, group, and label content for easier comprehension.

The remainder of the discussion here applies to full-sized sites and apps.

First, label the links well and provide just enough contextual information for users to decide where to go. This isn’t necessarily easy. Visitors might find it very helpful to have a description or teaser with each link, but that could take up a lot of space on the page. Likewise for thumbnail images—they can look great, but how much value do they add?

Look at the San Francisco city government directory screen in Figure 3-14 and the University of California, Berkeley directory screen in Figure 3-15. Visitors to the SF.gov Departments page are given just that: an alphabetical list. Visitors to the UC, Berkeley site already know the meanings of these links—they’re the names of academic programs—so the extra information is about the degree offerings, not the definition of the school. The designer is thus able to pack in more links toward the top of the screen. The result is an information-dense, useful page.

On the other hand, the articles in the AIGA resources page (Figure 3-16) do benefit from descriptive text and images. The titles alone aren’t necessarily enough to persuade a visitor to click through. (Keep in mind, too, that a user who clicks through and finds that the destination page isn’t what they wanted will become frustrated quickly. Make sure your descriptions are accurate and fair!)

Second, consider the visual organization of the list of links. Do they come in categories, or perhaps a two- or three-level hierarchy? Is it ordered by date? Express that organizational scheme in the list.

Third, don’t forget a search box.

Finally, reconsider whether you have anything else to say on this page. Home page space, in particular, is quite valuable for drawing in users. Is there an interesting article teaser you can put there? A work of visual art? If such things would annoy more than intrigue, continue designing a pure Menu Page.

What

A screen with no navigation options other than acknowledging its message, completing its form, or clicking the panel away. Modals appear on top of the current screen. Modals are usually invoked by a user action. This can be selecting something or performing some triggering action. Modal panels often show up in a “lightbox” on top of a full screen or page: The screen underneath is visible but everything except the modal is behind a gray layer and is not accessible. This is used for small, focused tasks that require the user’s full attention. Modals usually consist of one page, with no other navigation options, until the user finishes the immediate task. Figure 3-21 illustrates the schematic for the Modal Panel pattern.

Figure 3-21. The Modal Panel schematic

Use when

Modals are great for focusing on a single action or process. They are also great for not losing context while carrying out a quick subtask or detour from a main screen or action, where you want the user to take care of a small task and then get back to the bigger task. They can also work well when the app or site has gotten into a state from which it shouldn’t or can’t proceed without input from the user. In a document-centric application, for instance, a “save” action might need the user to supply a filename if one wasn’t already given. In other contexts, the user might need to sign in before proceeding, or acknowledge an important message.

If the user simply initiates a minor action that might need further input, try to find a way to ask for that input without a modal panel. You could show a text field right below the button that the user clicked, for example, and leave it “hanging” there until the user comes back to it—there’s no need to hold up the entire site or app until that input is given. Let the user do something else and then return to the question at a later time.

Why

A modal panel cuts off all other navigation options from the user. They can’t ignore it and go somewhere else in the app or site: they must deal with it here and now. When that’s done, the user is sent back to where they were before.

It’s an easy model to understand—and to program—though it was overused in applications of past years. A modal panel is disruptive. If the user isn’t prepared to answer whatever the modal panel asks, it interrupts their workflow, possibly forcing them to make a decision about something they just don’t care about. But when used appropriately, a modal panel channels the user’s attention into the next decision that they need to make. There are no other navigation possibilities to distract the user.

How

In the same space on the screen where the user’s attention lies, place a panel, dialog box, or page that requests the needed information. It should prevent the user from bringing up other pages in that application. This panel ought to be relatively uncluttered, in keeping with the need to focus the user’s attention onto this new task with minimal distractions.

Remember that this is a navigation-related pattern. You should carefully mark and label the ways out, and there shouldn’t be many of them; one, two, or maybe three. In most cases, they are buttons with short, verbish labels, such as “Save” or “Don’t save.” There is usually a “Close” or “X” button in the upper right. Upon clicking a button, the user should be taken back to the page they came from.

The lightbox effect is a very effective visual presentation of a modal panel. By dimming most of the screen, the designer highlights the bright modal panel and focuses attention on it. (For this to work, the modal panel needs to be large enough for the user to find it effortlessly.)

Some websites use modals for sign-in and registration screens. Retail and other sites that want to prompt sign in/registration only when truly needed (to avoid interrupting the user) are commonly done this way: global and local navigation are stripped out, and all that’s left are to perform the sign-in task or exit.

Operating systems and graphical user interface (GUI) platforms usually offer OS-level modal dialog boxes. These are best used in traditional desktop applications—websites should avoid them in favor of lighter-weight overlay techniques, which are easier for the designer to control and less disruptive to the user. OS-level modals usually freeze the UI except for the modal window.

Examples

Airbnb uses a lightbox to draw attention to its login (Figure 3-22). This appears directly over the public website landing page. There are only three ways to deal with it: sign in, register, or click the familiar “X” button in the upper-left corner. This is typical of many lightbox-highlighted modal panels on the web. If Airbnb does not recognize the user’s computer (usually because they cleared cookies), the modal panel changes in place to display the two-factor authentication screen.

Figure 3-22. Airbnb login modal panel and security check modal panel

As mentioned earlier, retailers often delay any sign-in or register step until the last possible moment in the shopping process in order to make the purchase process as uninterrupted as possible. After the user is in the shopping cart, however, it makes sense to require them to sign in. Registered shoppers need to activate their shipping and payment details, and the retailer would like to invite new customers to become registered. B&H Photo is a good example of this pattern (Figure 3-23).

Figure 3-23. B&H checkout log in modal

Macy’s uses a modal window earlier in the shopping process (Figure 3-24). In its case, it confirms for the shopper that their selected item has been added to their shopping bag for purchase. Macy’s takes advantage of this moment to offer additional items that the shopper might be interested in.

Figure 3-24. Macy’s “Put in Bag” confirmation modal

Priceline uses a modal to respond to a traveler’s lack of activity in a clever way (Figure 3-25). If the customer has searched for a flight or hotel, but doesn’t take any further action from the search results page, it’s possible they’ve switched to another task or website or have stepped away. Priceline seeks to reengage with the customer, so after a short time, this modal appears, offering to show even more recent, up-to-date results.

Figure 3-25. Priceline timeout and reengagement modal

The “shade” form of a MacOS modal dialog box draws attention to itself as it drops down from the window title bar (animated, of course). These and other application-level modal dialog boxes actually prevent the user from interacting with the rest of the application; thus, the user is forced to finish or dismiss this thread of work before doing anything else (Figure 3-26).

Figure 3-26. A modal panel in a Mac application

What

Capture the state of a site or app in a URL or other link that can be saved or sent to other people. When loaded, it restores the state of the app to what the user was seeing. In other words, a deep link should be a method for linking to both a location in your software and also a state, such as being signed in or resuming an incomplete process at the point where the user left off, or retaining information so that the user doesn’t need to reenter it. Such bookmarks, permalinks, and deep links are all ways for a user to conveniently navigate to a selected point or state, even if it’s deep within a navigational structure. This avoids traversing many links to get to a desired page or state. Mobile OS deep links are a particular method for allowing users to go from app to app on their mobile device without losing information or task context. Figure 3-27 shows how this works schematically.

Figure 3-27. Deep Links state schematic

Use when

The site or app’s content is something specific and interactive, such as a map location and zoom level, book page, video clip, or information graphic. The deep-link sender wants to include a specific desired point or state that might be difficult to find otherwise, or it might take many steps to get there from a typical starting point. The app might have many user-settable parameters or states, such as viewing modes, scales, data layers, and so on—these can add to the complexity of finding a particular point and seeing it in the “right” way.

Why

Deep Links gives the user a way to jump directly to a desired point and application state, thus saving time and work. It behaves like a “deep link” directly into a piece of content on a conventional site—or a permalink to a blog entry—in the sense that you end up with a URL pointing directly to the desired content. But it can be more complex than a permalink, because it can capture both application state and content position.

This pattern is useful for saving a state that the user might want to recreate later, especially if they can “bookmark” it using well-known mechanisms (like browser bookmarks). It’s also handy for sharing with other people, and that’s where it really shines. A URL representing a deep-linked state can be emailed, tweeted, posted to a social network, discussed in a forum, published in a blog entry, and talked about in any number of ways. It might make a statement, or go viral, or become a “socially mediated object.”

How

Track the user’s position in the content, and put that into a URL. Track supporting data there as well—comments, data layers, markers, highlighting, and so on—so that reloading the URL will bring it all back.

Consider what other parameters or interface states you might want users to save: zoom levels, magnification, viewing modes, search results, and so on. Not all of these should necessarily be captured, because loading the deep-linked state shouldn’t trample on settings that a user doesn’t want changed. Work carefully through some usage scenarios to figure this out.

URLs are the best format for saving Deep Links: they are universally understood, portable, short, and supported by a vast variety of tools, such as bookmarking services.

As a user moves through the content and changes various parameters, immediately put the updated URL in the browser’s URL field so that it can be easily seen and ultimately copied and shared. Not everyone will think to find it there, so you might also design a “Link” feature whose existence informs the user, “Here’s how you create a link to this screen.” Some sites offer to generate a JavaScript “Embed” fragment that not only captures position and state, but also lets users embed the entire thing into another website.

Deep links in the mobile world have a specific meaning. Both iOS and Android applications can be configured so that public URLs map to corresponding “locations” in the native OS mobile application (rather than the public URL in the mobile browser). This allows any shared links to launch their associated mobile app, with its (usually) more robust controls and performance. Mobile-native applications can also pass deep links from one application to another. For example, the IMDB app might host a link to a movie trailer on a website. Instead of opening the mobile web browser, the link is passed to, say, the YouTube native app on the user’s device, which offers more control over playback and interaction.

What

Display a long list of navigation options in drop-down or fly-out menus. Also called “mega-menus.” Use these to show all of the subpages in site sections. Organize them with care, using well-chosen categories or a natural sorting order, and spread them out horizontally. You can find an example of this pattern in the “All Microsoft” fat menu on Microsoft.com (Figure 3-35).

Figure 3-35. Microsoft’s All Microsoft menu

Use when

The site or app has many pages in many categories, possibly in a hierarchy with three or more levels. You want to expose most of these pages to people casually exploring the site, so they can see what’s available. Your users are comfortable with drop-down menus (click to see them) or fly-outs (hover over them with the pointer).

Why

Fat Menus makes a complex site more discoverable. They expose many more navigation options to visitors than they might otherwise find.

By showing so many links on every page, you make it possible for a user to jump directly from any subpage to any other subpage (for most subpages, anyhow). You thus turn a multilevel site—where subpages aren’t linked to the subpages in other site sections—into a fully connected site (Figure 3-35).

Fat Menus are a form of progressive disclosure, an important concept in UI design. Complexity is hidden until the user asks to see it. A visitor to a site that uses these can look over the menu headings to get a high-level idea of what’s there, and when that user is ready to dive in, they can open up a Fat Menu with a gesture. The user isn’t shown millions of subpages before they’re ready to deal with them.

If you’re already using menus in your global navigation, you might consider expanding them to Fat Menus if showing more links makes the content more attractive to casual browsers. People won’t need to drill down into categories and subcategories of your site hierarchy in order to discover interesting pages—they’ll see them there, right up front.

How

On each menu, present a well-organized list of links. Arrange them into Titled Sections (Chapter 4) if they fit into subcategories; if not, use a sorting order that suits the nature of the content, such as an alphabetical or time-based list.

Use headers, dividers, generous whitespace, modest graphic elements, and whatever else you need to visually organize those links. And take advantage of horizontal space—you can spread the menu across the entire page if you want. Many sites make excellent use of multiple columns to present categories. If you make the menu too tall, it might go right off the end of the browser page.

The best sites have Fat Menus that work stylistically with the rest of the site. Design them to fit well into the color scheme, grid, and so on of the page.

Some menu implementations don’t work well with accessibility technology such as screen readers. Ensure that your Fat Menus can work with these. If they can’t, consider switching to a more static strategy, such as a Sitemap Footer.

You can adapt Fat Menus for mobile screens if necessary. In that case, you should linearize the columnar layout left to right. That is, the menu is reordered into a single column, with the sections stacked vertically. It’s best not to insert this much navigation content into every mobile screen. Instead, consider making this a reference navigation screen that is accessed through a separate mobile navigation scheme.

Examples

Macy’s, like most big retailers, has a vast inventory with many categories of items for sale. Browsing and finding a specific category or item of interest can be challenging in these cases. Well-designed fat menus can be a useful solution. Macy’s uses a two-part fat menu (Figure 3-36). The shopper first opens the top-level fat menu with the level-one major categories. When they select one of these, a second panel opens that covers the page. A huge amount of level-2 categories are displayed in this second panel.

Figure 3-36. The Macy’s two-level fat menu with progressive disclosure

The Fat Menus on the Starbucks website are very well designed (Figure 3-37). Each menu is a different height but the same width and follows a strict common page grid (they’re all laid out the same way). The style blends in with the site, and the generous negative space makes it easy to read. Product promotions are worked into the design, but not obnoxiously.

Figure 3-37. Starbucks coffee menu

As shown in Figure 3-38, Mashable’s fat menus use a hybrid approach. The text menus are off to the left and deemphasized. It takes full advantage of the horizontal space to show featured articles. This is clever—the knowledgeable user can skim a large number of headlines by rolling over the menus.

Figure 3-38. Mashable’s Science menu

The American Red Cross uses Fat Menus liberally (Figure 3-39). When the user rolls over any top-level menu item, the resultant Fat Menus cover up the top portion of the screen. There is good organization and presentation of topics and links, making this large website structure easily comprehensible. The sections in each Fat Menu are organized by most likely questions or use cases.

Figure 3-39. The American Red Cross menu

WebMD uses an alphabetical sorting order for its list of health topics (Figure 3-40). There is direct access to information on most common conditions, a long list of additional resources, and room for two promoted stories with graphics. The likelihood that the site visitor can find the link they’re looking for—and continue to engage—is high.

Figure 3-40. WebMD’s Health A–Z menu

What

Breadcrumbs refers to a specific type of navigation that shows the path from the starting screen down through the navigational hierarchy, the content architecture of the site, to the selected screen. The Breadcrumbs navigation pattern can be thought of as a series of parent—child links that show the drilldown into the information architecture of the site. The breadcrumbs show where in the content hierarchy the current screen is. Target (Figure 3-55) shows a common use of breadcrumbs on sites with large product directories.

Figure 3-55. Target breadcrumbs

Use when

Your application or site has a hierarchical structure with two or more levels. Users move around via direct navigation, browsing, filtering, searching within the site, or deep-linking into it from elsewhere. Global navigation alone isn’t sufficient to show a “You are here” signpost, because the hierarchy is too deep or large.

Alternatively, your site or app might have a set of browsing and filtering tools for a large dataset, such as products being sold online. The products are categorized in a hierarchy, but that categorization doesn’t necessarily match the way people will look for those products.

Why

Breadcrumbs show each level of hierarchy leading to the current page, from the top of the application all the way down. In a sense, they show a single linear “slice” of the overall map of the site or app.

So, like a Progress Indicator, Breadcrumbs help a user to pinpoint where they are. This is especially handy if they’ve jumped abruptly to somewhere deep in the tree, as they would by following search results or a faceted browsing tool. Unlike a Progress Indicator, though, Breadcrumbs don’t indicate to the user where they’re headed next. They deal only with the present.

Some texts tell you that Breadcrumbs—so named for the Hansel and Gretel story, in which Hansel drops breadcrumbs on a forest trail to mark their way home—are most useful for telling the user how they got to where he is from the top of the site or app. But that’s only true if the user has drilled straight down from the top, with no sidetracking, or following other branches, or dead-ends, or searching, or linking directly from other pages…not likely.

Instead, Breadcrumbs are best for telling you where you are relative to the rest of the app or site—it’s about context, not just history. Look at the Target example in Figure 3-55. Faceted browsing—searching for items with certain characteristics—brought me to this page deep in the Target website. (A keyword search could have done the same.) But now that I’m here, I can see where I am in the product hierarchy and I know what else I can look at. I can use the Breadcrumbs to look at all of Target’s stand mixers and do some comparison shopping.

Finally, Breadcrumbs are usually clickable links or buttons. This turns them into a navigational device in their own right.

How

On each page that is below a certain level in the navigational hierarchy—that is, it is deep in the content or screen or page architecture—show a list of all the parent pages, up to the main or home page. The goal is to see the parent-child relationships or what the “drill down” path is to get to the currently selected screen. Near the top of the page, put a line of text or icons indicating the current level of hierarchy. Start with the top level; to its right, put the next level and so on down to the current page. Between the levels, put a graphic or text character to indicate the parent—child relationship between them. This is usually a right-pointing arrow, triangle, greater-than sign (>), slash (/), or right angle quotes (»).

The labels for each page should be the page titles. Users should recognize them if they’ve been to those pages already; if not, the titles should at least be self-explanatory enough to tell the user what those pages are about. The labels should be links to those pages.

Some Breadcrumbs show the current page as the last item in the chain; some don’t. If yours do, make them visually different from the rest of the items because they’re not links.

What

Add motion and transformations to the appearance of objects to indicate that an action is happening. Smooth out a startling or dislocating transition with an animation that makes it feel natural. This pattern includes slides, fade ins/fade outs, bounces, zooms, and other animation techniques.

Use when

Interface animations are very popular and common in mobile applications. They are almost a standard for quality interactions on mobile. Some folder, window, and scrolling animations are part of the mobile OS itself. Above and beyond this, when you want to add a clear visual confirmation that a user’s input was received, such as a tap on a button or that an action is in progress (such as “screen loading”), or when you simply want to brand your application experience, consider using animations.

Users might need to move through a large virtual space, such as an image or map. They might be able to zoom in to varying degrees, pan or scroll, or rotate the entire thing. This is especially useful for information graphics, such as maps and plots.

Alternatively, the interface might have sections that can be closed and opened again, either by the system or by the user—such as trees with closable parent nodes, standalone windows that open and close, or an interface built with open/close panels. You also might use Animated Transition when users jump from one separate page to another.

Animated transitions can also give the user a sense for where the file or object is located in the interface itself—for example, where a launcher icon might be in the macOS launch bar.

Why

All of these transformations can disrupt a user’s sense of where they are in the virtual space. Zooming in and out, for instance, can throw off a user’s spatial sense when it’s done instantaneously, as can rotation and the closing of entire sections that prompts a relayout of the screen. Even scrolling down a long page of text, when it’s jumpy, can slow down the reader.

But when the shift from one state to another is visually continuous, it’s not so bad. In other words, you can animate the transition between states so that it looks smooth, not discontinuous. This helps keep the user oriented. We can guess that it works because it more closely resembles physical reality—when was the last time you instantly jumped from the ground to 20 feet in the air? Less fancifully, an animated transition gives the user’s eyes a chance to track a location while the view changes rather than trying to find the location again after an abrupt change.

It can also give useful UI control and navigation feedback. In Figure 3-62, we see two animations that Apple’s macOS uses extensively. The first is rollover magnification of icons in the “dock.” This actually helps users understand which icon their mouse is above as they swipe back and forth. The second is the page open/close zoom effect. The document window animates to its parent app icon in the dock, helping the user remember where they have put it away.

Figure 3-62. macOS dock magnification and app window transition

When done well, Animated Transition bolsters your application’s perception of quality, speed, and liveliness.

Examples

Tesla (Figure 3-63) uses a simple zoom in the initial load of its website. The user can see the three Tesla models in overview, and then the image zooms in on the Model 3. In this case, the zoom in is purely an attention-focusing flourish. The user can’t actually control the zoom in. However, the user can pan left and right to select the other Tesla models. This panning action is smoothly animated.

Figure 3-63. Tesla.com, loading screen “zoom in” animation

Prezi presentation software makes extensive use of zooming and panning views to create unique and flowing presentations. Figure 3-64 shows a selection of screens from a demonstration. As the user steps through the screens, the presentation zooms in, displays text, pans to the right, and then zooms out again when exiting the section. It makes for an interesting sense of flying through the information space.

Figure 3-64. Prezi’s unique presentation software features animated “zoom reveals,” slides, and zoom-out animations.

Further Reading

For a much deeper exploration of the value of animation and how to bring it into your interface design, check out the following:

• Creating Web Animations: Bringing Your UIs to Life by Kirupa Chinnathambi (O’Reilly, 2017).

• Transitions and Animations in CSS: Adding Motion with CSS by Estelle Weyl (O’Reilly, 2016)

• “SVG Animations” in From Common UX Implementations to Complex Responsive Animation by Sarah, Drasner (O’Reilly, 2017)