Designing Drupal's Mobile Navigation and Beyond

LewisNyman's picture

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 static HTML prototype.

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.

See the detailed design and implementation issue: Redesign Administration Toolbar for Small Screens and Touch Screens

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.

See the detailed design and implementation issue:
Implement sliding navigation for touch screen devices.

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.

Create a detailed design and implementation issue

Other less exciting things

Comments

<3

Fr0s7's picture

I love this! I also want to get involved with the development. I totally agree that this is critical, and I'm very happy with the great start this prototype gives us!

Honestly, this is the kind of UX that needs to be applied to the desktop theme as well, but... ya know.... mobile first. :)

  • Frost Simula

i try static mockup, really

mavimo's picture

i try static mockup, really interesting!!

some improvement:

  • no back button?? how i can go back to home without edit url manually?
  • on search result don't have anchor to link

Chapeau.

r8r8r's picture

This is absolutely brilliant!
I gave it a shot on an iOS5 iPhone and the UI works like a charm. Back in the office I'll check it out on a 1st gen Galaxy Tab and a Nexus S and report back on the Android friendliness.
I also agree with Fr0s7: Maybe by actually going the Mobile First way, we can also get a Desktop Admin theme, that goes down this route …

yeeha

eigentor's picture

This rocks my socks.
Amazing you got it that functional already.
Personally I don't need all these Windows-Phone-like sliding animations, it could be more puristic by default.

Also check for putting controls not too close to the border of the screen. I have quite some UI tweaks on my Android Phone that fire at the very edge of the screen. Had to turn them off to use some of the controls.

But man, this is a solid start!

Life is a journey, not a destination

Looks good, we're working on

aburrows's picture

Looks good, we're working on a mobile interface for Toyota Yaris in Drupal, using slide gestures. jQuery mobile wasn't that great to be honest, so we used jquery from drupal core. Slide up and down gestures for navigation and seemed to work well.

I'm very impressed by how far

Wim Leers's picture

I'm very impressed by how far you were able to push it already! Very well done :)

That being said, I tried to look at it with a very critical eye, and this is my feedback. Tested on iPhone 4S, Mobile Safari.

UX feedback:
- The "eject" icon in the top right is very confusing to me, as a Mac user knowing that icon very well.
- Do all people know to use the "back" button very well? The back button is currently the only way to navigate back up one level in the hierarchy.
- Along with the above: there's no sense of depth/hierarchy. That is likely intentionally, but I'm just noting it.
- Based on the three items above, I think the intended UX pattern for navigating the admin part of Drupal is: go wherever you want to go, do things, "eject" yourself to the front page, go again wherever you want to go, etc. If it's been decided that's the best/only feasible way on mobile, fine.
- Mobile Safari-specific: the screen real estate available for showing search results is very small, making it quite hard to use. See the screenshots: App Store app search, IMDB app search, d8mux search. In landscape mode, it's impossible to see any results on the iPhone (!). I know that it's hard (in the best case) to do this better, it may even be impossible due to Mobile Safari limitations, but I think it's very important that this gets improved in the final implementation. If necessary, even reduce the height of the search field?

Implementation feedback:
- Switching from portrait to landscape causes problems. In one instance, I even got an "empty screen": empty toolbar, empty content, nothing I could do; even panning to the right to access the buttons in the top right did not work! I don't have experience in this area, so no useful tips, sorry.

I agree with Wim

mherchel's picture

I agree with Wim on the eject button. To me that doesn't make much sense (I'm primarily a Windows user).

IMHO, I think a 'home' or 'house' icon would better signify to the user that this icon takes them to the home page.

Home Button

Fabianx's picture

I agree, the Eject button looks strange and is confusing.

I would also expect a "Home" button via a small house.

No the eject button

LewisNyman's picture

No the eject button definitely is not the correct choice, it was simply the best I could find in the icon pack I was using.

I think we need to have a good think about it and I think it depends on the kind of visual metaphor we use to show/hide the back end interface. I don't know if home is a bit ambiguous, I want this button to return them to where they were when they tapped administer.

A little more feedback

mherchel's picture

A little more feedback. First of all, this is amazing. Thanks for the hard work!

Here's some ideas:

1) In the modules list, it would be nice to have a text input filter, where the user can start typing in a name of the module and have it filter (similar to http://drupal.org/project/module_filter)

2) The filter icon reminds me of a martini glass. Just sayin'

3) Is the admin search functionality intended to be a site search, or a filter to find what admin functionality you're looking for? I'd prefer it to be the latter, if possible. There are several times where I can't find the exact setting I'm looking for, so I navigate to /admin and CTRL+F my way to find it. This could be a very useful mobile way to do the same.

I can answer 1 and 3

LewisNyman's picture

I can answer 1 and 3 together:

The search function actually encompasses all these things, it will return both admin confit pages and content. The global search also favours results tht are on the same page you are. Try it on the module or content page.

Playing

Bojhan's picture

Hey,

I have been playing a bit with the prototype on my several devices, I definitely love the "search" functionality - I imagine this being one of the most used pieces of functionality once we wish to make a super efficient mobile interface. I am a bit wary of some of its functionality though, for one the icons don't seem to add much. We should look into using text signaling and visual hierarchy to show "where" stuff is. I imagine something like "categories"; on this page, in configuration. Also not sure about getting to direct tasks, this looks nice at first - but could become bloated really quickly. I don't really share Wim's concerns around the vertical spacing, ideally
the 80% case is handled with the top 3 results - and scrolling isn't necessarily bad.

Also noticed the top toolbar is becoming more and more busy, as you move down pages - perhaps this can be fixed by visual design making use of more clear iconography. But I think we might be trying to solve to much of that functionality at the top of the page. I also agree, with the senitment that its easy to feel lost in this prototype, perhaps we can add breadcrumbs - maybe even in the title, only showing the top level + the deepest for example: Content > Add content, Config > Edit "Medium" image style. Or perhaps that "section" title can be placed somewhere else, below the main page title?

Regards,

Bojhan

Hi Bojhan, The icons on the

LewisNyman's picture

Hi Bojhan,

The icons on the search results actually add a great deal, it's possible for there to be multiple results with the same name. We would need to distinguish 'foo' taxonomy/vocabulary/content/user/etc from each other. This makes icons essential in communicating this. That's why you see icons on Spotlight results in both OSX and iOS.

Most of the icons at the top of the toolbar are just triggers to reveal functionality, one alternative is to have certain functionality showing all the time but i haven't thought of a use case for that yet.

Maybe adding the breadcrumb back in is a good idea, it feels like the kind of thing we should tackle in an issue once we have tested with real content and real users.

Related

Home Button + configure button

Ortaga's picture

lewisnyman
"I think we need to have a good think about it and I think it depends on the kind of visual metaphor we use to show/hide the back end interface. I don't know if home is a bit ambiguous, I want this button to return them to where they were when they tapped administer."

Could you use a home "house" button to go to the home page, and a Cog button to go back to the back end interface?

Usability

Group organizers

Group categories

UX topics

Group notifications

This group offers an RSS feed. Or subscribe to these personalized, sitewide feeds: