Brad Frost

Revisiting the Priority+ Pattern

In his article Obvious Always Wins, Luke Wroblewski warns of the dangers of sweeping links and actions under the rug. It's challenging to find the room to expose important actions on constrained mobile screen sizes, but it's necessary for designers to do so. A while back, I took a look at a few responsive navigation and multi-level responsive navigation patterns. I discussed the pros and cons of the Priority+ navigation pattern, which exposes the most important links and tucks the remaining items behind some form of "more" link. I wasn't very enthusiastic about the pattern in my original assessment ("Nobody clicks 'more' links" I said), but I've come around to the pattern for the visibility it provides. The Guardian makes use of the Priority+ pattern for its section navigation. The navigation is organized in order of importance: UK > World > Sport > Football > Comment and so on. As screen real estate becomes available, additional sections are exposed with the full section list available by selecting the "all sections" button. Priority+ navigation on The Guardian's website SBNation also employs the Priority+ pattern for its section navigation. They expose the most popular sports in order they feel makes the most sense for their readers: NFL > NBA > MLB > NHL and so on. Additional sports are accessible by an admittedly too-subtle "more" link. SBNation priority+ section navigation This pattern surfaces the most frequently accessed links or actions, while still providing access to the breadth of other available content or features. Moreover, this pattern does a much better job educating the user about what this interface element is ("Local, world, sports, more...this must be where I can see the site's various sections") than a relatively opaque pattern like the hamburger menu. It also creates a scent for the user to follow. For example, a mobile Facebook user looking to create an event might follow a path that looks something like this:: Facebook mobile app toolbar navigation This ability to scan these labels left-to-right and feed right into the overflow "more" link feels like a more natural discovery flow compared to everything hiding beneath an ambiguous icon. The Priority+ pattern simply gives a much better scent for the user to follow. The Priority+ pattern (and the overflow pattern, which I've written about before) makes use of available screen real estate. As screen space increases, the number of exposed links increases as well, which can results in better visibility and more engagement. The fact that it scales quite nicely across different screen sizes without having to transform the pattern is a nice bonus as well. Considerations

With navigation it's essential to find the balance between accessibility and unobtrusiveness. I feel that the Priority+ pattern provides a sense of clarity our hamburger-riddled landscape could learn from. *[DETAILS]: Device, Environment, Time, Activity, Individual, Location, Social *[RESS]: Responsive Design with Server-Side Components