Mobile Usability Testing Sprint - Facts & Findings

LewisNyman's picture

On the Friday of Drupalcon London we ran a Mobile Usability Testing Session on Drupal's admin interface.

View the issue spreadsheet on google docs

We had a strong turnout, with lots of enthusiasm from the testers. We managed to test the UI on the following devices:

  • Nokia N900
  • Sony Ericsson Xperia Arc
  • HTC Sensation
  • Samsung galaxy s2
  • iPad 2
  • iPhone 4
  • iPhone 3GS
  • iPhone 3G

Here are some of the thoughts I came away with after the session.

We have dug ourselves a hole

By not bothering to give mobile a second of thought up until now we've put ourselves in a bad situation. Feedback ranged from "doable" to "frustrating" to "impossible". We are so far behind it's not even funny, it's just embarrassing.

Users on small screens has to constantly zoom in and out to navigate around the interface and read information. Users on touch screens had trouble performing simple tasks. Users on slow connections were left wondering if their network had dropped or if the app had crashed.

In some cases — the admin page panels — we've actually hard coded the layout into the back end.

We can't afford to ignore mobile

In Egypt, India, South Africa, Ghana, Kenya and Nigeria, 50+% of mobile users never or infrequently use a desktop computer. UK, USA and China all sit at 22%, 25% and 30% respectively. That's still over one in five.

Based on current predictions Global mobile data traffic will grow 26 times over in the next five years.

These are all compelling reasons to support mobile in the future. But I'm surprised we don't want to support it yesterday.

Photographers have a saying: "The best camera is the one you have with you when something worth photographing happens." This will often be a pocket camera or a phone camera; people typically carry professional-grade cameras only when they plan to shoot photos.

Similarly, the best computer is the one you have with you when you want something done.

Jakob Nielsen

How many of us, as developers or site builders, have been on the road when we've received an angry text or an email from a client asking us to fix something on the site? At worst it should be possible to do this from where ever we are. At best we should be able to do it quickly and confidently.

Isn't this something we would like to offer our clients also?

There is no such thing as a desktop only task

Just because it's complicated doesn't mean that people won't need to do it on the go. We can't ignore the tough problems like the modules or permissions page because we hopefully assume people wouldn't even bother.

How do we fix our process?

How do we stop ourselves digging ourselves deeper and deeper? Before we start bailing out water we have to plug the leak.

By the way, the Wordpress admin UI is going responsive in November of this year.

Drupal Eight is coming out in two.

Comments

a way forward

jpamental's picture

Making the admin theme itself responsive is not likely all that bad - but the hard-coded stuff like permissions matrices is tough. But the start could be working on Seven (maybe a 'Seven Responsive' version?) that might get us a long way there. I'd be happy to contribute what I've developed (it's a 'responsive Zen d6 theme' but the guts of it would translate well I think)

Jason

Jason Pamental
[ @jpamental ]

Good job on cleaning the doc

elv's picture

Good job on cleaning up the doc into a clear summarized list!
It seems lots of issues are actually caused by the non-responsive layout, which forces us to zoom in a tiny part of the whole page.

Admin Tables

dcmouyard's picture

A possible solution to the plethora of tables used in the admin section: Responsive Data Tables

These are good ideas. It

LewisNyman's picture

These are good ideas. It would be good to get all these Seven Theme related issues issues into a contrib project so we can start looking at how these solutions pan out. There could be a load of gotchas we haven't thought of yet.

The stuff that is going to make it hard for us is the bugs revolving around the toolbar and the overlay. Maybe we stick to the lower hanging fruit first.

Eight?

edward_or's picture

Let's get started with a contrib project. The name 'Eight' looks to be free?

Regardless of how much of it will go into core a contrib project would be great in an of itself as a collection of improvements on the Seven theme.

Admin Theme

LewisNyman's picture

If we are going to change the name again let's just change it to "Admin Theme". The name Seven doesn't make any sense to new users and it's not a good idea to change the name for every major version.

This project will most likely get rolled into core once it's ready so a name like "Responsive Seven" or "Responsive Admin" will work fine for now.

+1 to introducing a generic

jessebeach's picture

+1 to introducing a generic name for the Admin Theme.

I'd agree with that too (generic theme name)

jpamental's picture

... although I think Lewis' idea of 'Responsive Seven' might actually be best in order to relate it to the current theme but add the right distinction in terms of usage. I've started checking out how well the responsive theme I developed works on the back-end - I'm hoping it will translate fairly easily.

Jason

Jason Pamental
[ @jpamental ]

Great ideas!

rupl's picture

This is a great idea and is something I've wanted to build for a while now. In fact, just sitting around the office we came up with the exact same names: "Responsive Seven" and "Eight" -- I guess they're kind of obvious :) However, I think de-coupling the name from the version is a good idea as well.

Looking forward to pitching in on this!

Could not agree more on a

dcmistry's picture

Could not agree more on a general theme name. Yep, we did find this in the usability testing at Minnesota earlier this year.

KUDOS to everyone who was involved in the sprint. This is pure gold information!

Dharmesh Mistry
UX Researcher | Acquia,Inc.

"Responsive Seven" & "Touchscreen Toolbar"

LewisNyman's picture

I've got two freshly baked sandbox projects for us to start hacking on.

Responsive Seven

Touchscreen Toolbar

I'll be trying to shift over issues based on our spreadsheet findings. If anyone wants to go ahead and start the ball rolling please do.

Responsive Seven

dsco's picture

We're also working on a responsive design solution for Drupal 7. @Jason - I'd love to see what you've come up with and I'd be happy to contribute our "base" theme once we've debugged. We're using a combination of Mobile Boilerplate and Zurb's foundation grid.

Ds

Accessibility

Group notifications

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

Hot content this week