Going mobile with a web app
by James Elliott
Acquia is going mobile in 2012. Therefore we’re using a “mobile first” mantra when approaching our designs. What is “mobile first design”? It is a philosophy of design that centers on the theory that trying to squeeze a desktop experience into a smaller screen size is counterproductive to providing a good mobile experience. Instead, you design an optimal mobile experience before you consider the desktop. In this scenario, the desktop experience that is built on top of a mobile first design can be enhanced to use additional screen space and features as they become available. Rather than diluting the desktop, you are extending mobile and neither platform suffers for the presence of the other.
Not just the mobile web, a mobile web app
A complication to our process is that we aren’t building a web site; we’re building a web application. It is not just an information delivery system. Users need to interact and perform tasks on the site. They need to do. Our UI has to make it easy and as intuitive as possible to manage an Acquia Cloud hosted site.
Speaking of managing an Acquia Cloud hosted site…
But we already have a UI
Perhaps our greatest challenge is that our interface has already been implemented for the desktop. It becomes a bit paradoxical to create a mobile first design when you’ve already created a working desktop interface. How do you avoid the temptation to dilute your desktop UI into mobile? Start by rebuilding your information architecture. This is helped by the evolution of many of Acquia’s products. Our products have grown, developed, and expanded over time. Some features have moved beyond their initial organization. To combat the urge to just shrink the current UI, we’ll start our mobile first approach from the ground up and use the opportunity to refine our basic assumptions. At the same time, we would be fools to abandon solutions that have been tried and tested by our team. We have the opportunity to reassemble our interaction patterns into our mobile first UI and we should utilize it whenever possible.
Principles of a mobile design
As part of “going mobile”, the UX team at Acquia is going to be creating dozens of designs for existing products, new products, and new features. As we create these designs, there are 5 principles or pillars on which we will build our mobile applications.
Mobile is more than screen size
This is the first and most important pillar of mobile design. Making sure that your site is legible on a 3 inch screen is not the same as creating a mobile site. Mobile involves new input methods, varying timelines for consumption, and a fluidity of dimension that doesn’t exist on a traditional display. Users are tapping instead of clicking, reading the latest release on a tablet during their train ride, checking their email on their phone while they wait in line at Starbucks, and sliding out their landscape keyboards to fill out forms. Differences in input method, time, and orientation need to be considered when crafting delightful multi-device experiences.
Tasks need to be temporally digestible
A mobile experience needs to be bite sized. Users aren’t going to be spending hours working on a task on their mobile device. Interactions need to be brief. The goal is about the length of time one typically spends waiting in line at Starbucks, 3-5 minutes. Tasks that require a longer time commitment need to be interruptible. Especially if the bulk of the time commitment is waiting for status updates before proceeding to the next step.
Interaction starts with a touch
Touch is not an equivalent to click. There are many types of touch; tap, swipe, pinch, scroll, tap and hold. There is no hover on a capacitive touchscreen. Touch is inherently imprecise. Rather than having the pixel perfect precision of a mouse pointer, touch operates more like gravity. The larger a touch target, the less precise the touch needs to be. Touches near a large target are going to be pulled in easier by its gravity than a small target. A proper touch ready interface can be used with a Jimmy Dean breakfast sausage as a stylus.
Orientation is fluid
As soon as your device leaves the desktop, screen orientation is not a fixed element. Even MacBook Pros have accelerometers to change orientation. Many things change along with orientation. Simply making the portrait layout wider is not sufficient for a landscape solution. A well designed site will use that horizontal real estate to present content in a new way, rather than just stretching it. Touch has also changed all of our assumptions regarding horizontal scrolling. Swiping side to side to advance and go back amongst various pages or tabs had become second nature on touch devices. Tabs can be navigated through horizontal swiping. Options can be selected by sliding horizontally. The page can expand along both axes.
Designs are descriptive
One of the tenets of responsive sites is that device dimensions are not fixed so content has to adapt to large and small variations. You can’t simply design at 360, 480, 768, and 960 pixels wide and call it done. Many devices have screen dimensions that don’t fall into any predefined size. The availability of certain input methods also can’t be assumed. You may have a 1920x1600 device that also has touch or a 320x480 device with touch but no swipe. Plan on all or no input methods being available at any size. Designs need to adapt to device features. They cannot be rigid but must become descriptive guidelines rather than pixel perfect prescriptions.
We still have a long way ahead of us. We’re not going to be launching our mobile UI on January first, but we’ve started the ball rolling towards a mobile 2012. We already have a suite of amazing web apps. We’re can rebuild them (in mobile). We have the technology. We have the capability to make a mobile first web app. Keep your eye fixed on Acquia in 2012 so you can watch us go mobile using the principles of mobile design outlined here.