UX planning for iPhones, iPads and other geo-conscious, socially-aware mobile devices
With Apple just announcing the launch of iAd Producer and seemingly opening up their advertising platform to third party developers, now seemed as good a time as any to share some of my thoughts regarding UX planning for the iPhone and iPad, including the iAd platform.
I’m a user experience strategist for advertising agency BBDO Atlanta. In its simplest terms, that means I help others in our agency plan digital experiences and how to make those experiences better for the end-user – helping think through how those experiences will work from the perspective of the person using them, how all the different possible pathways to, through and out of those experiences will pay off for the users and potential users of them. In practical terms, that means I do a lot of listening and talking to people, and documenting the results of those conversations in the form of site maps, wire frames, user flows, requirements documentation and a host of other user experience deliverables.
It used to be, I would spend 90% or more of my time documenting website or microsite experiences.
In recent months, if I’m drafting documentation related to something on the web, chances are better than average that it’s going to be an experience that’s going to live on Facebook, or even within a banner ad, rather than as a stand-alone website.
And chances are just as good that what I’ll be dealing with will be an experience that isn’t living (or if it is, not exclusively living) as a website at all, but rather on a mobile platform of some kind. Since I started at BBDO in March of 2010, I’ve worked on experiences for the mobile web and for the iPad platform. I’ve worked on iAds, iPhone apps, QR codes that link to content-managed mobile microsites, and more.
It has been a great learning experience – not least of all, learning that I needed to adopt a different approach for these types of experiences.
It all comes back to the user, of course, and how the user interacts with these experiences.
Think about what you’re doing when you’re clicking around on a website, or a microsite, or a banner ad, or a game or application on Facebook. The point being that you’re clicking around on it – my assumption has long been that the main way a user interacts with these experiences would be by sitting in front of a computer, pointing and clicking with their mouse, or typing in alpha-numeric characters using their computer keyboard. The screen size would be 1024 x 768 or some basic variation thereof. The screen orientation would be rectangular.
Now think about your average mobile device. Especially your average smart phone. A user could be touching the screen to interact with it – using a myriad of gestures in order to interact with the content on that screen. (There’s a reason they’re called multi-touch devices, after all, and more on this later.) Your users could be controlling their experience with the device’s pull-out keypad. Or they could be trying to navigate options using a combination of the phone’s arrow keys. Or they could be using some combination of all of these modes of interaction,
They could be looking at the screen in its horizontal orientation. Or they could turn that screen 90 degrees and be looking at the same content vertically.
There are a whole host of issues to start thinking about when you start trying to orient your thinking towards designing experiences for mobile devices (or for experiences that are as likely to take place in a mobile environment as they are on a desktop-bound one).
Those considerations include:
1. Screen size. Computer screens sizes do vary, but when you’re thinking about a non-mobile website, you’re primarily going to be creating something for use in a 1024 by 768 pixel environment, possibly 800 x 600, depending upon your audience. Mobile device screen sizes are going to be smaller – the iPhone screen resolution is 320 x 480 pixels; Blackberry screens range from 160 x 160 pixels up to 324 x 352 pixels; Nokia N-Series devices tend to be 240 x 320 pixels. And that’s not counting out any of the screen real estate taken up by the mobile browser window or navigational controls.
So, you’ve not only got to account for smaller screen real estate, but smaller screen real estate of varying sizes as well.
(Apple did us a favor with the iPad – its screen resolution is 1024 x 768 – though many of the issues you deal with when creating experiences for mobile devices apply to iPad experiences, even if screen size isn’t necessarily one of them.)
2. Vertical AND horizontal orientation. Users can flip their iPhone to look at the screen with a larger vertical axis OR a larger horizontal one – which means you need to think about how every screen, every interaction encompassed by your experience – will work in 320 x 480-pixel mode and in 480 x 320-pixel mode.
3. Multi-touch mode of interaction versus point-and-click. There are a “typical” series of gestures and interactions that a user can use to interact with a touch-screen device – pressing the screen, tapping it, double-tapping it, touching and rotating, pinching to scale down or shrink, spreading their fingers apart. These gestures tend to dictate specific functions – but exactly which specific function can still depend upon the application or experience the user is interacting with.
A lone gesture can trigger a number of different responses. Tapping the screen can cause an application to open; or an item to be duplicated; or for an item to be selected in order to move it elsewhere on the screen.
In other words, the standards of “gesture X equals action Y” have not yet been fully worked out.
(Luke Wroblewski has done a great job of cataloging those interactions in his Touch Gesture Reference Guide at http://www.lukew.com/touch/ . Well worth checking out.)
With standard, non-mobile websites, the typical means of interaction are with a mouse (pointing and clicking) and an alpha numeric keyboard. I know I’ve caught myself on more than one occasion annotating wireframes for a mobile experience with a note that reads “when the user clicks on …” and will need to correct for that oversight. Nowadays when I see (or think) “when the user clicks,” that’s a cue to stop and ask myself “okay, how will a user want to interact with this function? What will be most intuitive for them? What will the most intrinsic actions be for the device they are using?”
4. Related to this point is the accelerometer that is incorporated into the iPhone and other next gen mobile devices. Which means that your device can “know” where it is in three-dimensional space, and sense when, how and where it is being moved through that space. Which means that your user can interact with a mobile device without ever touching the screen – by shaking it, switching its orientation, tilting it, etc.
That feature opens up a whole OTHER set of interaction possibilities. What happens if the user starts shaking their device in the middle of the experience you’ve put together for them? Is there some sort of “slide from one side of the screen to the other” experience triggered when a user tilts their device that we can work into the interaction model of what we’re working on?
5. On the iPhone and most other mobile devices (at the moment), you have to consider the whole non-Flash compatible issues. Flash has become the defacto method for creating rich interactive experiences on desktop devices. The fact that mobile devices and Flash do not play well together at the moment has meant that we’ve all had to start thinking about alternatives to Flash – and has led to a lot of interesting experiments using HTML 5 and CSS.
Those are some of the evolving methods of interaction with our devices that we’ve needed to start taking into consideration as the web has started making its move into the mobile space. There are other factors that we need to start considering as well, that the current uses of our devices are only hinting at.
6. Next gen devices not only know where they are in relative space. They’re also geo-aware in that they can be conscious of where they are in relation to the larger word around them – and can tie that “knowledge” into what they know of their owner’s home, workplace, frequent haunts, etc.
This manifests itself most often – for now – when a user “checks in” using such programs as FourSquare or Facebook Places – and is triggered by a conscious action on the part of the user.
I expect devices to only get smarter in this area, and I also expect that we’re just scratching the surface of what this kind of awareness means in terms of rich interaction possibilities.
7. Next gen mobile devices are also becoming socially conscious, by which I mean they can know, not just where you are, but where your friends, family members, business colleagues are, in relation to your current location.
I’ve already experienced this in real life – I re-connected with a co-worker I hadn’t seen in over a year due to the fact that we both checked into the same airport terminal on FourSquare at the same time.
I expect, before long, users to be able to automatically set up some of their “socially conscious settings” so that these kind of alerts could be triggered automatically. And when that happens, there are all kinds of experiences that your mobile device could start providing a conduit for – experiences that MINI’s alternate reality game/giveaway in Stockholm is only scratching the surface of. Imagine something like Atlanta’s zombie apocalypse haunted house experience writ large, played across an entire city, 24 hours a day for a week at a time, with all of your friends participating.
It’s an exciting time to be creating interactive experiences. The screen that we’re working in is a smaller one, true, but it’s also true that the standards and ways we will “typically” interact with these devices are still being figured out. And that’s exciting. I love that the advent of mobile has prompted me to rethink my entire approach to user experience planning. I’m sure that there are aspects of mobile UX planning that have escaped my attention. But probably not yours. If you’d like to discuss any of those “ absent aspects,” or anything else from this post, please give me a shout.
