Jamf.com Mobile Navigation
The Jamf Corporate website uses a disclosure-based pattern affectionately referred to as the ‘Drawer’ for navigation. Because the drawer did not translate well to small screens we needed to design an experience that was as easy to use and as capable as the Drawer was on Large Screens. Through iteration and testing we ended up adapting the Drawer itself to work on small screens.
The navbar consists of a series of toggles that each disclose a Drawer containing content and links. The Drawer slides into view from under the navbar. When subnav links are needed they appear in a darker gray bar that runs just underneath the global navbar.
The horizontal nature of the these bars do not work on smaller screens. Because of this we used a second set of links for our small-screen navigation. This set of links was hidden on large screens via Media Query. The Drawer toggles were hidden on small screens in the same manner.
This small screen solution presented UX issues. This long and loosely structured list of links could be very disorienting to the user.
- To account for all the links available in the Drawer, we used logic to hide/show contextual links and sometimes breadcrumbs.
- It was difficult to retain a sense of place because the display was always subtly changing.
- Some links were unavailable on small-screens all together.
- Because you only saw sibling links under a parent there was no way to traverse the site from a subpage.
We wondered how we could provide a navigation experience on small screen that was comparable in ability to its large screen counterpart. With the problem defined I went to work.
The Design Process
I spent no time with pencil and paper or in Sketch at the beginning of this project, instead I designed in the browser using the existing markup. I thought critically about the mechanics of the Drawer on a large screen and how I could translate the Drawer to a smaller area.
- It occurred to me that our existing small-screen navigation transitioned into view in the exact same way the Drawer did on large screens.
- The issue with using this pattern on the small screen wasn’t the drawer itself, but it was the toggles. How could they take up less horizontal space?
I recalled the small screen nav of espn.com. It had a series of skinny links running vertically along the left side of the screen with more links in the larger division.
My Ah-Ha moment was correlating this ESPN navigation to our large screen Drawer-based navigation turned on it's side.
Some heuristic experts say that upper left is a bad place for buttons because of the stretch it takes to reach a thumb across the screen for right handed users. Taking this into account my first prototype had the hamburger menu on the right hand side of the navbar with all of the elements (toggles, Drawer, and any subnav links) sliding in from right to left.
Not bad... I immediately felt a strong correlation between the large and small screen experiences. It was not without issues though.
- Because we read left to right, sliding the content from the right felt unnatural.
- The pacing of the transition felt rushed, especially when subnav links were involved.
- The Subnav links took up most of the main content area when the nav was engaged.
Taking these thoughts into account I went to work on the second iteration.
- I moved the hamburger to the left side of the navbar and had the drawer toggles slide in from the left. I took the ergonomics into account in this decision, but a quick scan of popular sites and apps showed that left side nav is used as often as right side. I also polled other designers and they agreed that it felt more natural for everything to flow left to right.
- I slowed the transition slightly and applied some easing to make it feel less rushed and give it some character.
- I removed the Subnav links all together for the time being.
- To bring the look and feel closer to the large screen interface I mimicked its hover and active states for the toggles.
- I also experimented with having the drawer disclose from the top, as it does on the large screen version.
I sought more feedback, this time from a senior member of the UX team. We inferred that when a user clicks the hamburger the expectation is to see links, not another series of options to click to get to links. To solve this we decided that it would be better for one of the drawers to open with the toggles.
- The Drawer and toggles would slide on to the screen in one fluid motion from left to right.
- The navigation would take over the entire screen leaving no doubt what the interaction was.
- The ability to completely close the drawer was removed on small screens. Tapping the toggle of an open drawer would do nothing.
- To tighten the correlation between the active toggle and its Drawer I changed the background color of the active toggle to match the drawer background.
Iteration 4 was all about reintroducing the subnav links that were removed from the solution earlier in the process. At this point I broke out the pencil and paper to ideate. I felt that designing in the browser might not be the most effective method of rendering my sketches, so instead I build static prototypes of my 2 best ideas (one in Figma and one in InVision). I also arranged usability testing for these 2 options.
While neither failed usability tests, the time on task for the second candidate was significantly less than the first, so I built that into the the solution.
After 4 iterations, numerous feedback sessions, and a round of usability testing we had a solution that was worthy of presenting to stakeholders. Feedback was unanimously positive, so the prototype was rolled into the site's codebase and prepped for production release. The solution can be seen on jamf.com as we speak. There are plans for Jamf Nation to adpot the pattern as well. I have built a prototype of Jamf Nation's IA using the nav and am consulting on its implementation.