WHAT
Focus on the subject is a pattern with many elements that fosters an interaction method allowing the user to switch their focus or center of interest or activity from a generic display to a specific, detailed, and focused screen.
WHY
Selecting the correct layout is a challenging design task. Each layout pattern has a purpose and benefits but also comes with shortcomings. Builders must decide early on the right layout and how to arrange the necessary elements on the canvas. Plenty of thought goes into the UI design, and just when every piece seems to be in place, the user clicks a map marker and the lens of interest changes. Instead of exploring a map full of objects, the focus shifts to a particular object that becomes the subject of interest. This new view requires a different kind of layout, so the app must toggle between the two layouts, often full map and reference map. The focus on the subject pattern doesn’t constrain the app from using another layout when necessary, regardless of the initial layout used.
WHEN
Use the focus on the subject pattern when the current view or layout doesn’t provide enough space to display all the information for the subject of interest. This is often the case for full map layouts that need to show details for a data point and in which an info pop-up doesn’t suffice. Toggling the view to a reference map layout on a separate page or inside a modal window is a great way to show details about the subject of interest.
HOW
Provide a switch so that users can toggle to an alternative layout. This switch can be a hyperlink that navigates to another page or a button in an info pop-up that opens a modal window. The new layout then has enough space to show additional properties, tables, charts, or even a small reference map to illustrate the location.
Ensure that the change in layout is seamless and logical, and provide smooth transition during navigation with a clear way to go back. Make it easy for users to dismiss the selection, for instance, with a Close button in a modal window.
Users don’t like change or learning an app with new functionality and abilities. Provide familiar UI elements to avoid annoyances and disruptions. Limit the amount of layout changes by using the focus on the subject pattern only when needed. Consider fitting the content into already available containers, such as a side panel, or use the info pop-up or info panel whenever possible.
EXAMPLE
The Geospatial Insurance Consortium (GIC) is an insurance industry consortium that provides its members with advanced imagery and data to enhance the underwriting assessment process. The GIC Virtual Inspection Studio app uses focus on the subject to allow virtual adjusters to expedite claims and improve fraud detection following disasters. Users enter the app through a UI that is discussed in more detail in the location list pattern. This initial page shows the insurance claims in a list and on the map. When the user selects a claim from the list, the app leads them to the details page with a split-screen before-and-after imagery viewer that shows a property before damage from a disaster and the conditions immediately after. This navigation behavior is different from using an info pop-up or the list and details pattern. The reason for showing a new page that focuses on the subject instead is that the visual inspection requires space to compare high-resolution imagery so that adjusters can focus on the task to complete the claim assessment for an individual property.
MORE EXAMPLES
One thought on “Focus on the subject”