Category Archives: app

UX Motion Design, Part 1: Why?

Welcome! This is part one in an ongoing series about how to integrate motion design into the user experience. The introduction is located here.

Remember Flash intros? (I write that sentence optimistically as if they’re really a thing of the past; I recognize that even in 2013 we still see too many of them.) The worst, right? But they did one very important thing: they let the user know something was happening. Flash became popular before broadband connections were considered standard. This led to famously long load times. As a result, loading animations became standard – if that bar is progressing, you know something’s happening. If a user doesn’t see something change, they’re going to assume that their input hasn’t been recognized or that something’s wrong. As soon as a user is confused, what we know about their behavior starts to unravel. They might try reloading. They might re-click (or in the mobile space they might re-tap, re-swipe, and so on). They might think something’s wrong with their device. Or they might decide that something’s wrong with your website and abandon the process entirely. If you’re delivering content and you can’t reassure the user that content is in fact on its way, they’re likely gone.

Users need to be rewarded, and they need to be reassured. On the web, we can generally be confident that we know a few things about how the user is accessing content, but with an ever-increasing number of mobile users, the landscape is changing a bit. Karen McGrane summed up the current state of affairs in her book Content Strategy for Mobile:

With a desktop machine, we can assume the user has a monitor, and we can know with almost total certainty that the monitor has a resolution of 1024×768 pixels or higher. We can assume the user has a pointer, controlled by an external pointing device like a mouse or a trackpad. We can probably assume that the user has a broadband connection.

When we say someone is on mobile, all we know is they’re using a device that… not a desktop. We know very little about what they see and how they interact.

We might not know what they see, but we can take steps to make sure the user knows that we’ve seen their input and are working on something. The animation below is an animated UI demo I created for a client a couple of years ago. The app was simple: You and your friends answer questions, and you receive points based on how you answer. (Before you go searching for it, full disclosure: QuizTime is a fake name for the app, as the company would later decide to take their product in a completely different direction.) We wanted the app to have personality but the client wanted to pursue a clean aesthetic, since they’d have no control over how complex the photos were that users chose as backgrounds for their quizzes. About 10 seconds in, you can see how we chose to inject personality and create visual connections for the user by using motion.

When the user taps their response, four things happen:

  1. The answer turns green and a green dot appears over its radio button
  2. The green dot sends your points up to the top bar (where your overall points are tracked), increasing the number accordingly
  3. All answers show the percentage of users who have previously selected them
  4. Arrows appear next to the question, directing you to move forward

The user answered the question and immediately received feedback. And they were rewarded with all of that step-by-step information (here’s your score, here’s your new total, here’s how other people answered, here’s how to move on when you’re ready) in only 3.5 seconds. Motion design allows us to tell a story while providing visual guidance.

Giving users visual cues in an interface isn’t anything new. We use rollover states for our buttons to let the user know this is something that can be clicked. We provide linked and unlinked page numbers at the bottom of multi-page articles and forms to let users know where they are in the process. With the resources we have available to us as designers and developers – HTML5, CSS3, and well-developed mobile toolkits – there’s now one more opportunity to subtly teach the user where to go and how to get there.

Motion design allows for visual simplicity and opens up screen real estate for legibility. Animation can tell a user what to do or reassure them that they’ve done the right thing, or put them on the correct path if they’ve strayed from what we need them to do. It can move a user in the direction we want or encourage them to explore. Furthermore, it’s universal – imagine how much easier things are if you’re developing an app that needs to have international appeal and you don’t have to translate written instructions. What icons have done to cross barriers in visual design, motion design can do for navigation and interaction.

Now that we’ve worked on why, we’ll talk about how! The next post in this series is about anticipation.

Google Now: Traffic

I’ve been an Android user for three years now. We’ve been through ups and downs, but ultimately I’m happy with the platform and the flexibility it allows me. Yesterday morning, I awoke to see that Jelly Bean was available and downloaded it without a second thought or any research. I’ve only spent a day with it and the differences have been subtle – a new loading animation (sadly), a different lock screen, a few little visual things here and there. Late last night as I was getting ready to go to bed, my finger slipped, and that’s how I learned that the new lock screen actually allows me to access something brand new: Google Now.

If you’re unfamiliar with the idea of Google Now, take a look at their website. (The video, like most Google demos, is worth a watch and very well done.) The idea is one that mobile manufacturers have been pushing for years: All The Things You Need, Right At Your Fingertips. I’ve become skeptical of this line of thinking over the years, because it seems every new solution comes at a cost. I’ve watched friends of mine with iPhones use Siri to great enjoyment exactly as often as I’ve watched them repeat the same question four times over and ultimately not get the information they need, resorting to traditional search methods. It’s one of the most difficult problems to solve, because while there certainly are categories of users and lots of research to go on, everyone is different, and a device put in someone’s hand is inevitably going to be used for something you never even expected.

Google Now works off of “cards” and promises to give you information at the moment you need it – the weather when you wake up in the morning, the scores from your favorite teams, flight details when you’re on the way to the airport – but the information given to you when you sign up for it through your phone doesn’t really say “how” that’s going to work. A cursory glance at it last night showed a few things that I could see being useful to me, such as schedules for upcoming lines when you’re near a transit station. Could be useful, could be a huge battery drain. Nonetheless, I decided to enable it and let it learn from my behavior for a couple of days.

One of the greatest benefits to me as an Android user is that my life is incredibly google-heavy. I sit at a computer most of the day and really don’t use my cell phone much, because I work from home and it feels really silly to grab my 3.5″ screen when I’ve got two 23″ screens in front of me. I’m a heavy hitter when I’m out of the house, but those moments are far from constant. One thing I’ve always appreciated is that when I search on Google Maps from my desktop and then perform the same search from my phone, the information I recently looked for is right there in my hand as a recent search. It’s not a huge time saver, but it is convenient. When I took a three week road trip this summer, I can’t express how often I needed that feature.

My boyfriend and I are attending a wine tasting party tonight, and he volunteered to pick up a bottle for us. He didn’t know a good wine shop, and I happen to know one around the corner from his office. Before he left this morning, I looked up their address on our laptop, closed the tab, and didn’t think anything else of it. Fast forward to a few hours later when I checked my notifications bar, and here’s what I found:

It took me a couple of minutes to figure out why my phone was subtly hinting at me that it wanted a drink. Then, I realized this was actually Google Now doing the job it promised to do!

Clicking on it takes me to my Google Now homepage, where I can access all of my cards. I was pretty impressed so far, but a little disappointed that this wouldn’t be a feature that’s terribly relevant to me – I don’t drive. I walk, I ride a bike, and I take transit. The driving option would be really useful on vacation, but that represents a fraction of my time.

Clicking on the map gives the traditional Android options for which app you’d like to use. I’ll most likely end up setting this to Maps, always, because I rarely use Google Earth.

The real strength in Google Now lies in its settings. Don’t want to be bothered by these notifications all the time? Change their priority. If you’re not like me and don’t want your Google searches linked, that’s okay too – you can turn that off with the very top setting. And then there’s the one that means the most to me – driving.

I don’t like to engage in platform wars; I think that whatever works for you is the tool you should use, period. I was giving consideration to switching to the new iPhone, in fact, right up until I heard that they removed Google Maps and now there are no transit or walking directions. Figuring out how to get from where I am to somewhere else on public transit is one of my most-used features, so that’s a complete dealbreaker for me. It warms my heart to see Google’s commitment to those of us who choose to not drive.

Immediately, my card updates to the directions that are relevant to me. And it’s even got the BART overlay!

I haven’t taught it much about me so far, but it has figured out that I’m a Giants fan. I’m currently learning that its in-game updates are really great as well. I love my MLB at-bat app for lots of reasons, but the new Google Now box score certainly is attractive (and easy to check in on while I look at other things).

As I’d hoped, my notifications bar is updated with my new transit directions. Since I’ve set that as my default setting for all “traffic” related things, it should continue to do so.

I’m really, really excited about this new feature. One more way to link what I do at my desk to what I need to do when I’m out in the wild. One nice thing is that while it appears in my notifications bar, it doesn’t work the same way that, say, a text notification does. No icon in the top bar, no noise made by my phone. There might be an option to change that, but I prefer it this way – background information there with the swipe of a finger, not making me rush across the room only to find out that it was just updating me on a traffic situation. Definitely looking forward to seeing how this feature develops over time.

Pay With Square

I’ve been giving a lot of consideration lately to the concept of choice – more importantly, how we choose. It’s far from a new concept and I’m certainly not the first person to think about it, but a lot of my work these days is very much focused on what we want and how we get it.

My mornings usually start out with leaving the house to get breakfast. I could certainly make breakfast for myself and save money, but I’ve budgeted things like this in because I know it helps me focus. I work from home and most of what I’m doing these days is writing and thinking, and it’s pretty hard for me to get started when the place I was just sleeping is two feet away from me. So I’ve taken to leaving the house to grab a coffee and some breakfast – when I get home, I’m full and happy and took some time for myself, and I’m dressed and ready to move forward with my day.

Within six blocks of my apartment, there are ten coffee shops that I can think of off the top of my head. If you extend that number by three or four more blocks, the possibilities just become ridiculous. (This is not a complaint.) For someone who just wants a good latte and a scone most mornings, there aren’t many compelling reasons to choose one over the other – the coffee is very good at most of them. I often end up at the place closest to me only because of convenience – it’s 9 a.m. and I’m sleepy, so two blocks is ideal. Today, though, I walked further to go to another coffee shop, entirely because they use Pay With Square.

Note: A good friend of mine works for Square, specifically on this team. Aside from indignantly asking “Do you mean to tell me you haven’t downloaded it yet?!”, he has exactly zero influence on how excited I am about the product.

Pay With Square is the newest product launch from Square, a company I’ve been following for awhile. I don’t know how much they’re popping up around the country, but here in San Francisco, they’re growing and growing and growing.

When I first downloaded Pay With Square, I looked at the list of businesses that were close to me. It turns out there are quite a few – not surprising, since the Square office is about three miles from my apartment. I was pleased to see a number of businesses that I like to frequent, though, particularly ones that have been known to not take credit cards or ones that sell products that feel a little silly to pull out plastic for (my favorites from the list above feature $2 cups of coffee and $1 cupcakes).

You’ll note that all the businesses here invite me to open a tab. This is based off of my phone’s GPS – from my desk right now I have only one business that has the “Open Tab” option, and the remaining businesses are 0.3+ miles from me. I opened my tab when I was a couple hundred feet away.

I wondered what the experience was going to be like. Because I’m a relatively nervous person, I psyched myself out in the last few feet leading up to the front door. It’s really not like me to actually say “Put it on Jen Rizzo”, because I’m going to sound like a great big dork. And for a split second, I thought “What if they’re super annoyed by people like me who want to put a $3 latte on a credit card?” That’s all in my own head, per usual. The woman who greeted me could not have been more pleasant, and it’s clear that I’m not the first person to order this way.

I strung some words together about opening a tab and Square, which led to her exclaiming “Oh, I just saw you open a tab! Jen Rizzo, right?” And it was done. I ordered my standard latte and a scone, she punched them into the store’s iPad, and I saw them appear on my phone. I added a tip, verified that everything looked correct, and hit the checkmark to close out.

The folks over at Square know what they’re doing. Good interface design should mean that the end user doesn’t have much of a learning curve, but my first-time experience was completely flawless. I never wondered what I should do or how something should work. We know that’s a huge barrier to entry for people – no one wants to look silly or ask questions they think must be stupid or be that one person who doesn’t get it holding up a line of bleary-eyed espresso-hungry commuters. The process was quick and easy, taking me less time than if I was fumbling through my wallet for cash.

There’s a more hidden benefit to the app, though, one that many other companies have had an opportunity to explore but no one seems to be doing all that well. Pay With Square almost functions as a solid mobile website for the businesses themselves, listing contact information, a menu, and an easy link to their Twitter account – all within the app itself.

This is the location’s main page, accessible from anywhere. Doesn’t require a tab to be open, doesn’t even require you to be terribly close. Since I know that Sightglass Coffee in SOMA has always been a big Square user, I searched for them just to check – they’re 2.1 miles away from me, and I can get all their information immediately.

My only complaint about the search function is that it’s currently business-based and doesn’t offer a location search. I’d love to be sitting on BART, heading to a meeting close to Montgomery, and be able to search for all the participating businesses around 2nd and Market. I’m only ever on BART for about seven minutes at a time, but that’s time I could be spending quickly flipping through menus, locations, etc. The ability to explore locations is a secondary benefit, certainly, but they’re just doing this part so well that I’d love to see them take it one more step.

Note, 4/23/12 3:03p: Upon playing a little more, I realized that there is, in fact, a map option. Awesome! I haven’t yet figured out a way to search by address, but the interactive map is very, very useful. Apologies for missing that on the first round. It’s accessible from the main list of locations by tapping “Directory”, which will pull up a drop-down menu.

Basic information. This should be pretty self-explanatory, but if you’ve ever been on the go and wanted to just find contact information for a coffee shop, restaurant, etc. – you know that it isn’t. This is my biggest complaint about restaurant websites every single time, regularly making me defer to Yelp rather than a simple Google search.

Having quick access to a menu is great. Not much going on in the way of visual design, but it’s easy to read and loads in no time. I’m not sure why all prices have a to go and for here option. Not a huge issue, certainly, and it appears to only be specific to this location – other menus I checked out weren’t set up the same way.

I love when restaurants use Twitter. You’ll often find photos of the dishes from that day, or a newly-tapped beer, or a sneak peek at a project they’ve been working on. I follow a lot of restaurants and bars on Twitter, and my plans for the evening are regularly decided by information I see there. Free advertising, you know? I love that the accounts are directly integrated into the app, here, rather than asking me if I want to load it up in my browser or in my Twitter app. I can appreciate the ease of just offloading a request onto another app, but those few seconds it takes to load something externally are a little jarring to the UX flow.

My list of visits is a little boring so far, but it’s exciting to know that I’ll be able to track these sorts of things. A running tab of my daily coffee might not be terribly useful to me, but I can see a lot of great uses as the app expands to additional businesses – tracking expenses, budgeting, etc. These things are easily done through your financial software, of course, but it’s always nice to have a backup.

Your list of visits is expandable, letting you know the details of each visit. One of my more embarrassing moments is from a day where I saw a $60 charge on my bank statement from an Indian restaurant where my delivery regularly comes to $25-30. I called them and sent everyone into a frenzy worrying about how I had been so overcharged, only to discover two days later after they had gone through their receipts that I completely forgot we had people over and were ordering for four instead of two. (I apologized profusely, but have never felt like a bigger idiot.) Needless to say, I am the sort of person who really likes itemized receipts. I am also the sort of person who loses itemized receipts, so I’m glad the Square team built in a system for me on the days where I wonder how I spent $20 on a latte.

Pay With Square is great. That’s all there is to it. It does one thing very, very well. It does a handful of smaller things much better than other products. It’ll be interesting to see how it continues to develop – Square has done a great job so far of focusing on one major objective and not cluttering the experience. I’m looking forward to what’s next, and I’m happy to continue supporting their product as I get my morning coffee.