Drupal 8 Mobile UX Roadmap

LewisNyman's picture

As we found out in London, Drupal's mobile admin interface faces some big obstacles to overcome. If we want to to be able to tackle some of these problems in the next release cycle we need focus, the idea being we don't move on to the next item in till we have the previous one licked. I've whipped up proposal for our road map. This is by no means complete, there is plenty of detail to fill in.

I'm hoping we can work on it together.

Words to live by

Don't let the current interface hold us back

Let's not let the current Drupal UI hold us back during the mobile design phase. For all we know the current UI solution could change drastically in the next two years or the Services Initiative could completely change how we interact with data in Drupal.

Let's aim high. Let's design a great mobile interface for Drupal and then work out how much of it we can get in to core. Maybe we can even design a mobile interface that solves problems more elegantly than the desktop version.

Keep to a high standard of design

The Drupal CMS is a web app. This means it's also a mobile web app. As we begin to solve Drupal's mobile issues we should be asking ourselves "What would we do if this was an iPhone app?". We should be aiming to leapfrog our main competitors, not play catch up with them. Let's aim high.

Road map

1. Navigation

If the user can't find what they want to do, who cares how easy they can do it? We should start with navigation

  1. Main Navigation
  2. Short cuts (think the concept, not the module)
  3. Landing pages

2. Tasks & User Input

  1. Layout
  2. Drag and drop (Moving menu items and blocks)
  3. Form Submission
  4. Form item elements
  5. Gestures

3. Readability

  1. Tabular Data
  2. Contrast
  3. Typography

4. Launching on the home screen

Some operating systems give users the ability to add web pages to the home screen to launch as an 'app'. We can take advantage of this local home to enhance the user experience.

Comments

Nice roadmap but

emvp84's picture

Hi,
I know im new in here, but im trying to learn and collaborate as much as possible, while in the process of learning.
so, if you have any comment or want to chat directly please let me know.

As a "freshman" in Drupal, i have been using it a lot, really dig it and i think the roadmap is pretty straight forward. In the previous conversation that you had here: http://groups.drupal.org/node/172059 you show the issues for an admin template.
so here are a few thoughts
a) i know that the sandbox has already been created, but it should not be stated as a seven responsive but as an admin theme. period.. people specially new ones (if we want to bring them over, can get confused)
b) Having a standard admin section would be great, always you can customize several sections.
c) maybe we can learn from other CMS like wordpress.. heck, they have a nice Admin panel, but it can be highly improved.
d) We can take as much advantage of the jquery UI framework as possible. I dont believe in having a special phone app (android / iphone / nokia) etc, because people can get upset with it.
e) Lets start using more of the API's and back end and bring as much information with a presentable format in HTML5 to the different devices, not just having them to "scale and drag"

I really like the roadmap, and i think the first step should be having a collaborative session on the design schema (lets go to the drawing board) and design how we want to be shown in a small screen and take as much advantage as possible.

Like I said, im new here, so sorry if I sound to eager to accomplish things. Im moving all my sites from Joomla | Wordpress to Drupal and in that process learning and developing as little as possible. Hate reinventing the wheel when there are so much great ideas out there that we can learn, take advantage and self improve.

IM trying to read as much as possible and learn as quick as I can. So if you have any suggestion please don't hesitate to contact me.
Open for ideas and open for improvement.

Drupal is by far the best of what I have test and use but as all... we can improve everything.

--
@emvp84 | enriquemanuel.net

JQueryMobile?

juampynr's picture

Would the JQueryMobile framework help as a basic way to navigate through content? Sorry if I am in the wrong thread but I am curious and would like to give a hand if I can.

Cheers

frameworks

emvp84's picture

Juampy,
thanks for your good idea, that is something that the top level team should consider and i would like to toss in the table the kurogo framework
I think every framework has its ups and downs, and if this is coming from scratch (the mobile section) we should revisit how we are going to approach it.
Just ideas...

--
@emvp84 | enriquemanuel.net

I think the best feedback at

yoroy's picture

I think the best feedback at this stage is discussion around the proposed Problem sets tackled in the road map. Discussing possible solutions comes later.

Thanks for the input here, I

LewisNyman's picture

Thanks for the input here, I expect to road map to be revisited and revised throughout the initiative. I've already added a fourth step to the road map.

I've also pushed on with the step item on the road map, Drupal's primary navigation

I don't really understand

Noyz's picture

I don't really understand your roadmap. For example

Navigation = main, landing pages, and shortcuts. Does this mean that mobile will only support the Main navigation section, some mechanism of shortcuts, and only allows navigating to landing pages? If so, what landing pages? Can I only see the landing page but not interact, e.g. I can see all the content but can't edit it?

Tasks = Layout, D&D, Form submission, etc. What does this really mean? Every admin UI is really a form. E.g. creating a view is a form. managing blocks or content types, also a form.

I would think of a roadmap to be more like this...

Navigation
- Users must be able to navigate to all areas of a drupal site.
- A menu (Main navigation) will be used as the primary mechanism to control the mobile admin experience.
- the following gestures must be supported, Swipe up, Swipe down, click, double click, pinch/zome
- the following gestures will not be supported X, Y, Z (rotate is probably one of them)

Tasks
- Users will be able to perform all content contributor like tasks, e.g. create content, find content, create and approve comments, etc. etc.
- Users will not be able to perform site building / Structure tasks like create a View, create content types, etc. (just throwing this out there). This also makes me think you need a matrix... Phone roadmap, Tablet roadmap.

Presentation
- Tabular and Grid data must render without scrolling horizontally
- Fonts and Contrast must be clear and pass contrast tests

Etc, Etc.

Maybe you could clarify some of your points based on this feedback?

Sure, Navigation So by "main

LewisNyman's picture

Sure,

Navigation

So by "main navigation" I mean literally tap-tap-tap based navigation. Drilling down the admin interface to arrive at the desired destination. Simple, consistent and finger friendly. See 'Designing Drupal's Mobile Navigation.

Landing pages were an idea I thought up a long time ago to provide a more helpful and focused full screen launch pad to get to major tasks for that user role. Think similar to an iphone home screen but designed for either content creators or site builders. I never pushed forward with progress on this idea because we ended up jumping straight into...

Shortcuts, so once I prototyped a lot the general navigation there were concerned that it was too sluggish or slow to get around. We began brainstorming on additional features or elements that would improve the experience for experienced users while keeping the navigation intuitive for new users. Some gestures and the global search function came out of this thinking.

Tasks

So this was a pretty broad brush, the main objective was to separate our focus between navigation and task based pages. So I suppose technically every task page is a form but for the user they operate differently. I separated it out in to different kinds of task based interfaces to give us even more focus. So the web admin interface will do everything the desktop interface is capable of. Anything less is unacceptable. In the future, if we want to design a selection of native apps with a more focused use case then we could talk about leaving parts of the interface out.

A lot of your suggestions seem to be more a listing of design heuristics or objectives. I was attempting to split the work up in to separate areas rather than saying how or what we were going to achieve. Like I did in Designing Drupal's mobile navigation, we can leave that thinking to when we get to that point.