Drupal 8 is Going Mobile
Drupal 8 is due for release in the far future: late 2013. The future is a scary place. I keep hearing about all these "handheld devices" that are capable of strange things like storing whole record collections, perfectly copying the face of a human being, and accessing the internet over a mobile or wireless connection. People are using these "handheld devices" to do all manner of things, one of which is building websites. Drupal needs to catch up fast.
"Who's going to want to use Drupal on a small screen?" is something I've been asked over and over. Perfectly understandable. It's really hard to imagine using Drupal in the palm of your hand now, because the experience typically ranges from painful to unusable.
I often ask clients if their mobile traffic is less than average because users don't want access on the go, or because the experience is so bad they're going somewhere else.
If we make the small- and touch-screen experience more acceptable, who wouldn't want the freedom of using Drupal from anywhere-but-a-desk?
For our clients, content creators, and administrators, the ability to keep up to date with site activity while out of the office or traveling should be a given. Mobile phones are personal devices: every phone I've ever seen is owned by only one person. They carry it on their person wherever they go and it connects them to their desires (almost) instantly. By restricting or dissuading users from interacting with Drupal on the go, we're limiting their connections to their needs.
For ourselves — site builders, themers, and developers — it's a potential life saver. I vividly remember the first time I was caught off-guard by a client in trouble; I was standing at a train station and it took a good 20 minutes of zooming and tapping with a stylus in order to accomplish what would have been a simple task had I been at my desk. That was not the last time.
These type of interactions are called "just-in-time interactions"; user tasks that are urgent and immediate. Speed is essential and waiting is not an option. "The best camera is the one you have with you." The same is true for computers. In the coming years people are going to be using Drupal from everywhere, whether we like it or not. Drupal 8 has to embrace this.
The Mobile Initiative design objectives are high. There's a great advantage in being able to rethink an interface from scratch instead of simply tweaking or re-skinning it. When space is at a premium, every element is under scrutiny. Everything has to justify the space it takes up. Many pages currently in Drupal 7 try to serve multiple purposes. The content listing page allows you to browse content, filter content, sort content, delete content, and modify multiple items at once. Small screen devices require us to reduce noise; one screen, one goal. In these situations, it's common for mobile design decisions to feedback into the desktop experience, benefiting both.
There's one thing traditional devices don't have, and that's touch. Touch is the new black, white, gold, and silver rolled into one. With touch we can create interfaces that are natural, intuitive, and personal. Multi touch allows us to interact with more than one element on the screen simultaneously for the first time. Designing the touch screen experience can be so much more than making all buttons big and touchable: we can make an experience more compelling and efficient than the desktop interface.
Attempting to build a mobile UI from the ground up is a large task with many facets. Design principles can help keep us on track, and give us a wider perspective. With global objectives we always have a good idea what "good" looks like.
Simple
Simplicity is Key. Reduce, Reduce, Reduce.
Consistent
We aren't solving problems for individual pages. We're designing a whole system of tools and objects. New situations will arrive that we won't expect; we can soften this pain by implementing framework components instead of one-shot solutions. Every new solution should be reusable and extendable. Users should have a good idea about how to approach a new situation.
Finger Friendly
A thumb is more than a fat cursor. We should actively strive towards a great touch interface.
Fast
How fast is fast enough? We should be using every trick in the book to speed up the administrative experience. Speed is a feature. No one likes to wait.
Design is an activity that happens in the mind, not in the hands; but being able to communicate a design effectively is key to the process. It quickly became clear that the only way to communicate complex touch interactions was through interactive prototypes. This also provides us with a view as to how different devices with different factors will handle the design early on.
We've spent the past six months iterating on an interactive HTML and Javascript prototype, focusing on navigating around Drupal on small and touch screen devices. You can try out the latest version right now on your smartphone at http://nav.d8mux.org/
A couple of great solutions came out of this design phase.
A New 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; a consistent and accessible space for global and contextual actions. Contextual actions include filter, add, delete, bulk edit, and sort.
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 alternative prototype that maximizes touch gestures to create a layered card metaphor. You can access this on a touch device from http://altnav.d8mux.org/
Global Search
A nice, friendly, easy to use navigation tree is great but some users want to get around fast. We don't want a 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. This spotlight style feature is also a great safety net for new users who have lost their way in Drupal.
Getting involved
In the next step in the Drupal 8 Mobile Initiative, we're taking these experiments and lessons from the prototypes, iterating through the designs, and implementing them into Drupal Core. You can contribute to the design and implementation of the mobile UX by getting involved in these issues:
Drupal 8 is going to be a great platform for building mobile applications. Drupal 8 can also lead the way as a usable and even a delightful user experience.