When you create a Foleon Doc, you want your audience to read through it effortlessly. How do you design a Doc with an intuitive reader experience? In this article, we share tips that make your Doc easy to navigate.
💡 Want to see an example of a Foleon Doc with great attention to navigation? Check out this example from Open Banking.
In this article
The navigation bar
The navigation bar lets your audience navigate to the different pages of your Foleon Doc. It's enabled by default — but you can hide it, for example, when you're creating a single-page Foleon Doc.
In our Getting started guide, we only included the main 5 topics of the guide in the navigation bar — excluding the cover, contents, and closing page. Learn how to do this in our article How to include pages in the navigation bar.
💡 Choose your page names wisely, so they reflect the page's content.
It's up to you to decide if you want to display the navigation bar at the top or bottom of your page. You can set this up in the Foleon Doc settings.
The page arrows let your audience navigate with two small previous and next arrows.
💡 Make sure that the arrows have enough color contrast. In the example below, we use a bright red button on top of a dark blue background.
The page arrows will be enabled by default. You can disable the page arrows in the Foleon Doc settings in the Navigation section. This could be useful if you're creating a single-page Foleon Doc or if you're creating your own navigation system with custom buttons — more on that later.
When the page arrows have been enabled, you can decide if you want to display them bottom right or center right.
Page scroll button
The page scroll button functions as a “scroll down for more” indicator at the top of your page. It will be enabled by default, but you can change it in the page settings.
💡 Make sure that the page scroll indicator has enough color contrast. In the example below, we use a bright red button on top of a white background.
In the brand settings, you can style the page scroll button for all pages where it is active. In the pop-up that appears, you have the standard Foleon styling options such as Alignment, Border, Spacing, and Shadow. You can learn more in our article All about the page scroll button.
Linear read navigation options
We support a number of navigation options that are especially useful for linear read content types. What is a linear read?
With a linear read, your audience would ideally read the content from beginning to end, without skipping around or jumping to different sections. Your Foleon Doc is typically organized in a way that guides the reader through the story or article in a logical order, making it easy for them to follow along and understand the material.
A linear read differs from a non-linear read, where the reader may jump around to different parts of the content, or use links to navigate directly to other pages or Foleon Docs.
💡 These options are available for select plans. Contact your Customer Success Manager if you're interested.
Reading progress bar
You can display a reading progress bar attached to your navigation bar. It helps your audience grasp how much they've read of your Doc and what's left. The progress bar is most helpful if your content is a linear story.
Enable reading progress bar in the Foleon Doc settings.
💡In our 2022 year review one-pager, we use the reading progress bar to help our audience understand how much is left on the page.
Decide if you want to show your page overview in a grid or horizontally. Your audience will see this when they click on the page menu button (hamburger icon).
When you select grid, you can enrich the page preview with a featured image and page description.
💡Grid is the new and improved version of the classic grid. This improvement is not available for all plans. Contact your Customer Success Manager to learn more.
Page sneak peek
Give your audience a preview of neighboring pages. If you select card, you enrich the page arrows with an image and text. If you select tooltip, you keep it text-only. Add your content in the page settings.
Enable page sneak peek in the Foleon Doc settings. In the example below, we've opted for a card view.
A short page description enriches the navigation of your Foleon Doc.
To set this, go to the page settings. In the basics tab, you'll see page description. We suggest keeping the description below 145 characters.
💡 Learn more in our article Set a page description.
You can set an image to enrich your navigation. The image will be visible in the page overview when your audience clicks the hamburger menu.
💡We automatically generate a screenshot for each page. As long as you don't override this with a featured image, this is what the page overview will show.
In addition, it will be visible when your audience hovers over the page arrows — once you've enabled page sneak peek in the navigation tab of the Foleon Doc settings.
To set this, go to the page settings. In the basics tab, you'll see featured image. We recommend a 4:3 image ratio.
Create an index
Creating an index — or a dedicated index page — can help your audience to understand the structure of your Foleon Doc. Next to that, it can help them jump to the content that is most relevant to them.
Below you'll find a few examples of some effective index structures.
💡 Our internal Brand guide lets our team jump to the topic they want more information on. We linked to the different pages using buttons.
💡In this example by Zendesk, the cover page holds a concise numbered list of topics that functions as an index. They linked to the different pages using text links.
💡On the contents page of our Getting started Doc, we take the reader through a vertical index of what they can expect. We opted for this approach because we wanted to make the page more engaging. The custom "scroll down" GIF encourages our audience to scroll down.
💡On the contents page of their MMA brochure, McGill built a clear index using a combination of text elements, dividers, and "Go to page" buttons.
Using consistent footers at the bottom of your page help guide your reader in the right direction. In our Getting started guide, we added two buttons in two distinct columns: "Previous page" and "Next page".
Add custom navigation buttons
You can use images to give your navigation a personal (branded) touch. You can link an image — or GIF — to a specific page, block, or overlay.
Below you'll find a few examples of some custom navigation images.
💡 In this example by the University of West England, they created a custom arrow image for their cover page that the reader can click to start reading.
💡 In our Getting started guide, we added a custom scrolling GIF that triggers the reader to scroll down the page.