Designing Drupal's Mobile Navigation and Beyond

The short story

Come and help us perfect and implement the hot new mobile interface design in Drupal 8. Try the prototype on your phone. Also, go to the issue queue.

The long story

Over the past six months we've been working on designing the experience of getting to where you want within Drupal's admin interface.

I originally identified this as top on the list of priorities for the Mobile UX because it's so important. We had a great feedback loop going at the regular mobile and usability meetings and I iterated through a

Here are some of the cool solutions that came out of this process:

A redesigned toolbar

It was obvious pretty early on that we couldn't show all the menu items at once, we need some method of revealing them. What became really interesting was the thoughts on what else we could use the rest of the toolbar space for. The prototype contains toolbar buttons for global functions like search; and contextual functions like filter, sort, and delete.

A sliding navigation

Animated transitions between pages is more than just sugar on top. It maintains an association between pages. This has become ubiquitous on touch devices. The prototype took it further by adding a full screen swipe gesture to move back up the navigation tree.

I also knocked together a very rough second prototype that maximizes touch gestures to create a layered card metaphor.

Global search

A nice, friendly, easy to use navigation tree is great but some users want to get around fast. We don't want newbie friendly interface to hold back power users. A global search function works like a teleport, allowing users who know what they want to get there quickly. A proof of concept exists on all pages of the prototype.

Other less exciting things