KB484610: Best practices for designing dossiers with vertical scrolling enabled

Content Engineer • Strategy

This article outlines the best practices for designing dossiers with vertical scrolling enabled.

Starting with the release of MicroStrategy ONE (March 2024), dossiers are also known as dashboards.

Summary

In MicroStrategy 2021, dossier authoring capabilities have been extended to allow designers to set up a dossier page to have a minimum height. This now means that users are able to scroll up and down the interface of their favorite dossier, and in some scenarios, not have to rely exclusively on browsing through tabs, pages, or chapters to access additional content in that object.

With vertical scrolling enabled for your dossier, some use cases you may consider could include using it to consolidate multiple pages into one scrollable view, or having more flexibility to create a document that will be exported and distributed to a wider audience. The possibilities are vast. By the end of this article, you will be able to use vertical scrolling to its full extent based on some design tips and best practices.

Benefits of using vertical scrolling

Vertical scrolling will be an option for dossier authors to extend the canvas and give their end users a new way to experience and interact with dossiers. However, this option does not necessarily need to be applied to every dossier that you create. In this section, we’ll discuss when it is recommended to use vertical scrolling as opposed to tabs, pages, or chapters.

Consider using vertical scrolling...

To create rich infographic material for widespread audiences

Freeform layout and vertical scrolling make a powerful 1-2 punch in that designers can now feel at liberty to create beautiful infographic style dossiers that can communicate a story through data. The infographs can be put on a distribution schedule to arrive in the inbox of their intended audience’s preferred cadence. The infographics can also travel outside of the organization where its possible external stakeholders may need to read a message conveyed by a dossier, using your data.

For audiences that need to make fast-paced decisions

If you are making a layout for an executive audience, or perhaps someone else who is always on the go, enabling scrolling for your dossier may be more ideal, as scrolling encourages efficiency in consuming content, whereas navigating with tabs encourages exploration. Interfaces that encourage exploration, however, assume that the audience has the time and mental capacity to sit and click through to fully consume a story. Dossiers that make use of vertical scrolling are best used when the audience is composed of primarily speed readers. User types like these need to consume the fast facts of the numbers as they stand today, the trends, and patterns of those metrics, as well as the immediate attention areas that warrant immediate action or decision making. Using a combination of KPI widgets, trendlines, and aggregated data encourages a smooth reading workflow, where the audience can read their dossier like they would read a book or their feed in another application.

To improve the readability of your robust story

There may be some instances where all your data needs to be showcased in a singular view. Before vertical scrolling was available as an option in the authoring interface, dossier authors had a fixed canvas space to work with to create that dossier’s layout. This meant that there may have been instances where the data was either congested on the page, not giving enough breathing room between different elements of the layout. Another alternative was to omit or move some elements of the story that could have been necessary for that view to make sense. This course of action may be costly to users who needed those pieces of information to fully comprehend that dossier page’s story.

Research shows that it is best to preserve enough white space between elements of a layout, giving the minds of end users a break when viewing each new piece of information. This is so that they are not overwhelmed and can clearly distinguish the beginning and end of each bit of information on the screen. To prevent this, a dossier author may shrink the size of the visualization, text, or data fonts to be able to fit the available space on the canvas. This also has drawbacks as users should not have to squint or zoom in on the interface to be able to clearly consume the story told by your dossier. This is both wasted time and mental energy for your users who need to process information quickly.

To mitigate this risk in the design process, consider using vertical scrolling to give each element on your canvas enough space in between one another, without sacrificing readability due to the size of each container. With a canvas that can scroll, we can always add more content north and south, whereas each horizontal grouping of story elements can be arranged on the same line, to best cater to a user’s natural reading pattern of left to right.

Designing with the “fold” in mind

Designers should exercise caution when building new dossiers with vertical scrolling enabled so that they do not unintentionally bury information that may otherwise be relevant to the total story that page is attempting to communicate. As we continue, keep in mind that the fold in your dossier, in simplest terms, refers to the bottom-most portion of your dossier canvas that can be consumed by users without scrolling. Whenever an author sets the minimum height of the page, the canvas extends vertically to meet the specifications inputted. However, the next matter of concern is deciding the ordering of information in your layout (e.g., what is above and below the fold of your dossier).

To reiterate, a general best practice for any interface design, is to arrange elements on the canvas that best match the natural reading pattern of the human reader. Users generally read from left to right, and then repeating each level from top to bottom, in what is known as a “F” or “Z” pattern. When designing content meant to be read such as dossiers, it is generally best to reserve the top-left section of your interface for your most important piece(s) of information. The next most important items should then occupy the top middle, and then top right sections of your interface with respect to their priority. This philosophy continues as the user reads down each line and from top to left again, until they reach the bottom right portion of the canvas, which should be reserved for the item with least significance to comprehending the story behind the dossier.
A pitfall to avoid when designing a dossier that is meant to scroll is to bury below the fold any content that is necessary to interpreting the total story of the dossier. Remember that your highest priority items should be near the top in the event that a user does not even have time to scroll and can only take a quick glance at the story with the time that they have available in their viewing session. Items that carry less significance should be placed below the fold as content buried here with the expectation that many users may not bother to scroll that far in their reading session. The items here should only add further context or complement what already exists above the fold. In short, authors should limit the amount of content that is necessary to complete the story of that dossier view, that resides below the fold while promoting key essential story elements to the top.
Lastly, as a best practice, when designing a dossier using vertical scrolling, bear in mind that users may not know that they even have the ability to scroll on the interface. Therefore, for content that is above the fold, a hint should be designed into the dossier that signals the user that there is more information below, encouraging them to scroll to see it. This can simply be achieved by designing the top portions of the full content below the fold, to appear halfway displayed above the fold. Users would then naturally be curious about the remainder of the dossier element that is not fully displayed in the initial view and would instinctively scroll down to see the remainder of the content that makes up the bottom sections of your content.

In this dossier, a user could not tell that there is more content on the interface

However, by adjusting the dossier layouts to give users a sneak peek of the elements below the fold, user are encouraged to scroll

Locking scrolling in containers

Scrolling is powerful as it lets the user consume more content with less clicks and time, and is a smoother option for navigating the information within a dossier. The seamlessness of the interface can however be interrupted when there are containers on the interface that have their own scrolling mechanisms within them. When a user, who is scrolling down the entire dossier, passes by a container that has its own scrolling function embedded, the result is a staggered scroll scenario. What would generally occur is that the dossier scroll capability will be interrupted so that the contents of a visualization can be scrolled upon. This is a problem, due to the fact that every time a user passes over such a container, the scrolling of the dossier page itself is interrupted, and it is difficult to avoid this.

In this dossier, a use can easily scroll from top to bottom with no interruptions

However, in this view, the screen's cursor gets caught on the scrollbars of the visualizations on the right

Furthermore, since vertical scrolling is best used in scenarios that encourage fast and efficient consumption of the dossier, a designer would not want their end user to be able to spend too much time on any one container. Should the end user need or want to see details, they can use another page or dossier to explore deeper. We encourage you to search Community to learn more about contextual linking to boost the power of your vertical layout even further.

Normally, while scrolling for visualizations is a necessary capability for interacting with vast amounts of data within a container, a best practice for dossiers using vertical scrolling is to eliminate scrolling for these containers. This can be done by aggregating the data at a high level, or by using filters to only showcase the relevant data for that view. Doing so gives the user confidence to navigate the application without the doubt the scroll will get caught on a container. The author can also rest assured that when their users experience the dossier, they are moving as efficiently as possible through each of the content, and are not getting stuck on any individual container. More importantly to the story of the dossier, however, is that the audience can focus on a narrower scope of information to consume. Lastly, as a note, the same concept explained above applies to textboxes, which also can contain scrollable content. Either set these boxes to clip, or allocate enough space on the canvas to prevent the need to scroll within a text frame.

Consolidating the view for mobile

When designing your dossier with vertical scrolling, you may want to showcase more content on a web or desktop interface, but have a cleaner and consolidated view for mobile clients. With responsive design for dossiers, authors can manipulate content on the canvas and preview what it would look like on a mobile client. There may be times, however, that particular visualizations do not need to be viewed on mobile. It is a best practice when building dossiers in mobile view to not have more content than that which can be navigated in under 2 or 3 swipe gestures. The dossier on the mobile client should ideally not resemble an end user’s social media feed, tapping and swiping down the page into perpetuity. To enable this best practice, MicroStrategy 2021 introduces the capability to hide elements on the dossier canvas when they are not needed in the mobile view.

To hide an element or group on the canvas, simply right-click on its name from the dossier layers panel, then proceed to click Hide on Mobile. When an object or group on the dossier canvas is hidden from mobile successfully, a small icon will appear next to its name. This object/group will now be hidden on mobile clients. Now when the dossier loads on a mobile device, the end result will resemble something like the below images.

Notice how for these two devices, that we have executed the exact same dossier on a mobile client. The only difference is that on the left, we have chosen to hide 2 groups of visualizations, whereas on the right, the entirety of the dossier is displayed here. In this example, the left dossier took about 3 and a half swipes (using a natural swipe motion from the bottom to right to about a half of the length of the screen), whereas the dossier on the right needs at least 5 swipes to consume the entirety of the story this dossier was designed to tell. As a dossier author, we recommend for mobile clients to eliminate additional content that is not necessarily needed to get to the insight. Your mobile users will appreciate being able to effectively navigate the view with as minimal swipes as possible

To reiterate, MicroStrategy 2021 dossier authoring provides the capability to design unified content, e.g, one dossier that can be deployed everywhere. Your dossier will be able to scale and be consumed across all clients, while also providing the flexibility to show or hide content per your requirements, that would be displayed on smaller mobile devices

Performance considerations

With vertical scrolling, dossier authors can neatly fit more visualizations and other content onto a singular page for consumption. However, authors must exercise caution and consider the performance implications of each newly added container on the dossier canvas. A benefit to paged browsing is that the dossier’s design can split the story by particular areas of interest, and if desired, authors can enable incremental page loading. This means upon the execution of a dossier, only the first page will actually load. Other pages would then load as they are navigated to by the end user. Dossiers that use vertical scrolling in a single view as of MicroStrategy 2021 do not have such incremental fetching capabilities, meaning that regardless of which content is above vs below the fold, the dossier will still load the entire view as one page. This may result in increased execution times. We encourage authors to exercise balance between extending the canvas of a dossier using vertical scrolling vs placing too much content on the page. This will ensure that end users, who access their content, do not have a staggered experience upon execution.

While designing the dossier, it is important to have a methodology for benchmarking its performance. The goal of the benchmarking activities should be isolating which visualizations on a page account for the largest load times of the dossier. They should then be optimized at either the semantic layer or the dataset layer, to then optimize the performance of the total dossier.

This first involves collecting a baseline execution time for your finished design to keep as a reference point. For measuring the baseline performance, consider a tool such as MicroStrategy Integrity Manager or enabling the statistics from the Web Admin.
Once the baseline is collected, use the query details capability of each visualization to understand and record the execution time for each frame.

3. Work within each frame, either at the dataset level or the visualization level, to optimize the run time for that container.

4. Lastly, with each change, collect a new result using Integrity Manager or your enabled statistics, with the intent of achieving an execution time below the original baseline.

5. Repeat as many times as necessary for each frame until you achieve your desired expectation time.

Conclusion

Vertical scrolling in dossiers extends the possibilities of dossier authoring even further in MicroStrategy 2021. With a larger canvas, you can tell a more robust and uncluttered story, all within the same page. We remind all to take heed to the content presented in this article to use vertical scrolling in your dossier to its fullest capability, as well as to understand how to design in a manner that is seamless and easy to navigate for your end users. We look forward to seeing your beautiful dossiers as part of our monthly DossBoss challenge. Further information can be found here.

Happy authoring!

Comment

0 comments

Details

Knowledge Article

Published:

March 21, 2024

Last Updated:

March 21, 2024

Performance considerations

This first involves collecting a baseline execution time for your finished design to keep as a reference point. For measuring the baseline performance, consider a tool such as MicroStrategy Integrity Manager or enabling the statistics from the Web Admin.

Once the baseline is collected, use the query details capability of each visualization to understand and record the execution time for each frame.