6 MIN READ • CASE STUDY
Afixed navigation bar can be difficult to translate into a mobile format, but a page with a lot of content and in turn, a lot of scroll, a fixed in-page navigation bar becomes crucial to the reader, see how NBC's Parent Toolkit takes on a new approach.
A collective of quality content vetted by teachers, professors, pediatricians, dietitians, financial advisors and other prominent experts on the topic of child development from the classroom to the workforce. The synopsis alone requires some word structure and organization to fully understand the depth and breadth of the Parent Toolkit's content, and it is this very quality that ended up being its greatest challenge, how to structure it all for simple usability.
Structuring a lot of content on a page with long-scroll has to be understandable and intuitive. In-depth content like that which is provided on Parent Toolkit is so successfully interesting that upon completion or pause the reader is left disoriented, UX-wise, from tunnel vision. To help elevate the frustration of loss of placement on the page, employing a Sticky In-Page Navigation method helps the user understand where they are, where they can or should go, and creates a natural reading progression by the method of horizontal hierarchy.
Really, it's about being comfortable and confident with where you are in the scroll. Studies have proven that people scroll further through a page when they have an idea of where they have been, and how much is left, and since studies also show that user's don't mind scrolling long pages, splitting up content into sections on a single page instead of a series of pages gives us our structural direction.
HOW TO LET GO
Sticky In‑Page Navigation — Clear and understandable in‑page navigation helps readers continue through the content in a contextually sound way.
Parent Toolkit does a nice job with large screens by employing a Sticky In-Page Navigation bar for pages with bigger amounts of interconnected content.
So if a navigation method like this works extremely well on a large-screen environment, then it must be critical to do the same for a user on a small-screen device. To be successful our small-screen version would need to accomplish the same usability as the large-screen version. We need our navigation bar to do the following.
- Show the user all the reading section options at page initialization.
- Show the user the current reading section in scroll.
- Give the user a page navigation hierarchy.
- Give the user a page navigation method.
But how do we do a traditional menu with equal navigation node balance that is stuck to the top of the screen without destroying all the screen real estate? Let's run through some design progression for options to display.
a. Vertically Stack the Navigation Nodes
This option is the traditional "stack-and-go" display method for desktop-to-mobile responsive web design. As you can see it takes up to much vertical space for a sticky menu, so stacking the items is out of the question.
Responsive Design defaults to stacking — While the menu (left) clearly conveys the pages' content, when "stuck" (right) takes too much screen real‑estate making it almost impossible to read the article.
b. Hide the Navigation Behind a New Menu
This option may seem logical, but it's certainly not intuitive and comes with a steep affordance. Chances are this menu would never get opened, and our points above about the navigation providing both the avenue to and the current section of is destroyed because it is hidden behind a menu.
Not the most intutive thing you have ever seen.
c. Leave the Navigation Nodes Liner, and Side-Scroll
A popular technique is browser native side-scrolling by allowing your content box to flow to its natural width, hiding the overflowing navigation nodes. This technique works well, the free-flowing swipe action allows all the navigation options visibility in a small space with a natural gesture. It could also animate upon section anchor arrival like its large-screen brethren indicating current page location. However, it misses on our points for providing all the navigation options at page initialization, and honestly, it's not exactly intuitive at initial page load, it could become so with an animation, so let's expand on that.
While I love this, it's not the best starting point as the user only gets to see the first node or two, then a user must rely on an animated trigger long after they start their scroll to really grasp the depth of the article.
d. Start the Nodes Vertical, Switch to Horizontal, and Side-Scroll
We now have a nice interaction created and we have gone the extra step of labeling the navigation "what's on this page" for mobile, so let's create a signifier to bring home this entire user experience.
Most of the time, signifiers are style based, for instance, a link without any style has no indication of the ability to be clicked. Styling the link with a color attracts attention which may be perceived as a link, but it could also be perceived as a label. However, styling the link as a button is a clear signifier to the user to click.
Using animation can work in the same manner of style, giving a signal to the user that something is going on here. A great example is the iPhone's giggly icons animation when you want to delete or move app locations around on your phone.
Signifiers allow people to discover what can be done with an item, it helps train users to accomplish the desired tasks the UI wishes to accomplish.
Allow the entire menu to pass the viewport.
Allowing the entire menu to pass the viewport guarantees the user will see every node before the last node catches the top and sticks. An added "left to right" animation triggers a visual cue while giving the illusion of all the nodes side stacking together.
This animation works two ways, it allows the user to see what navigation options are available by allowing the menu to display vertically, and it shows the user a "snap-to-slide-to" animation which creates the perception that the menu can slide.
The added motion as the user scrolls is another visual cue that the reader has progressed to a new section.
Using the same section anchor technique from large-screen to indicate current reading and page placement, the animation sliding and locking provides a horizontal hierarchy and rehashes scroll ability and interaction through continual feedback.
The feedback animation from the arrival at section anchors creates a pleasurable microinteraction habit loop providing functional information, reducing the cognitive load, but more importantly it gives life to the interface helping prevent change blindness.
The location of the menu is also in the thumb zone; the most comfortable and accurate region of phone screens for one-handed users, keeping the user in the mode of reading without requiring them to switch grips for navigation.
Swiping left to right with your finger is as natural as scrolling up and down with a mouse wheel, remove the one-slide-at-a-time block of javascript carousels and embrace the scroll.
This technique works really well with labeled icons as well.
This snap-side-scroll technique worked out really well for NBC's Parent Toolkit website, in fact, the site has many areas of side-scrolling for small-screen devices. The interaction is so natural on a touchscreen and it has a nice feeling to it. What do you think? Drop me a line
TI