Andrew Shorten
Editor’s note: Andrew Shorten is director of Adobe Creative Cloud Product Management. Formerly, he developed web, kiosk and mobile user interfaces for government and enterprise customers at Fujitsu and has since worked for Macromedia, Microsoft, and Adobe.
The launch of the Apple Watch represents the latest proof point that we’re only going to have more devices to consider when designing mobile apps. Not only does it represent a huge opportunity for more personal experiences, but it presents user interface designers with the increasingly complex challenge of scaling themselves to design for Web, mobile, tablets and wearables.
And there are further indicators that digital screens will become the way we interact with pretty much everything in the future. Take Coca-Cola’s latest vending machines that are operated by selecting from a touch screen. Or consider the Tesla Model S, a high-end car that replaces most of the traditional dashboard controls with a 17-inch touch screen, hinting that this type of experience will become the norm for the next generation of mainstream vehicles.
From Web to Apps
Of course, designing for multiple screens is nothing new; over the last several years we’ve seen the rise of responsive design as the primary way to deliver web-based content across devices. Rather than designing pixel-perfect layouts, this approach adjusts the layout and flow of content based upon screen size, and uses scaled bitmap assets for display on different resolutions, making it practical to deliver well-designed content across a wide range of form factors.
As we consider the ever-increasing importance of installed apps on devices, however, the design challenges go beyond merely adjusting content layout for different screen sizes. The opportunity here is to create contextual experiences, designed as part of an overall system that enables customers to interact with your application on the device that most suits their needs at a particular time or location.
Designing Application Flow
Starting with the basics, designing an app for even a single device requires giving consideration to the multiple flows that a user may experience through the multiple screens that you’ll provide.
While some of this could be considered parallel to multiple pages of a website, there is typically more emphasis on the relationship between each of the screens, rather than them being discrete layouts. Using art boards in your design tool is a great way to map out the flow of your application and show how screens relate to each other.
Using Devices to Design for Devices
While we expect the desktop to remain the place where most design work is done, the use of companion mobile applications in the design process itself can be extremely beneficial when designing for mobile.
There is also significant benefit in previewing design work directly on the devices you’re targeting – that way you can see how the layout and graphical assets will render and reduce the amount of rework that is required as the assets move into production.
Interaction Design
But designing a set of screens and the flow between them is only part of the overall experience – increasingly important is choreographing movement within and between screens of the application in response to user gestures.
Communicating how the experience should feel to the user, with subtle use of animation, triggered by user behaviors, in the design stages of the project has become increasingly important. This is something that we’re thinking a lot about at Adobe as we continue to evolve our tools to support the needs of our customers.
Contextual Design
But looking at different devices as a set of specifications, with varying screen sizes, display resolutions and form factor features, is missing the most important point. Understanding the context of how the user intends to use the device is critical in designing the right experience. For example, the functional relationship we have with our phones is different when using a tablet device, with the latter being used for extended periods of time for both content consumption (watching a movie) and content creation experiences.
Today with the Apple Watch, the same type of awareness is important for designers – users will likely interact with smart watches in shorter bursts, but more frequently, than they will with their phone or tablet. So, when designing for phone, tablet and watch, it’s not just the screen size that varies, but how the user intends to use the device, the amount of time they’ll spend using, and where they’ll interact with it. All of these factors have implications for the design for apps that run across these devices.
The fact that Apple Watch is designed to be used alongside an iPhone raises another important consideration – your users will not experience your application in isolation on a single a device. They will likely pick and choose the device to interact with, moving from one to another, to meet their needs at a given point in time.
As such, it becomes really important to think about system-based design – that is, spending time up-front on a project, considering all the different touch points that your users will engage with your application, and creating a set of related experiences that are clearly designed as one, but that take advantage of and are contextual to each of the device form factors.
Future of App Design
Designing for devices is no longer just about fitting content into different screen sizes. It’s about creating a coherent system that spans different devices and contexts of use. And it’s about choreographing a user’s journey through that system, responding to their gestures and behaviors with appropriate animations and transitions that guide them through your application’s flow.
By taking advantage of the latest capabilities of modern design tools, you can reduce the complexity of designing for the broadening landscape of devices, and take advantage of the opportunities provided by this ever-increasing array of screens.
Comment