Designing Cards for Mobile

Today my focus is on prototyping out the card interface, experience and interactions that will be utilized in a core feature of our app. We figured that there will be a good amount of users who will want to see a bunch of different food options, really quickly because they’re short on time or don’t know where to start in the process of searching for what’s nearby. We thought doing something similar to the Tinder card swipe right, swipe left approach would be good.

“The beauty of the swipe is navigating through the content is done with the minimum amount of motion,” Tinder co-founder and CEO Sean Rad explained.
“In general, on a browser or on a phone, you scroll and stop, and then have to go up or down to position and digest the content,” Rad added. “With swipes on Tinder, the act of navigating through content is merged with inputting an action on that content.”

I thought this particular bit from the article about the benefits of a card UI was striking to read. I especially like how Sean comments that with this sort of interaction, we are “inputting an action on that content”. We want users to be able to find food as quickly as possible, get an item or a few into their carts and make their order. This should all take only a couple minutes. Maybe we want to focus on getting the order process down to a single minute.

According to Rad, the inspiration for the Tinder UI came from piling stacks of Polaroids and playing cards, not from any previous mobile app.

I never knew that the UI inspiration came from Polaroids or playing cards but that’s an interesting way to think about it. I think people enjoy the aspect of chance, luck and randomness that comes along with the interaction of swiping away at cards. You never know when your options end and it’s nice to kind of mindlessly scroll as people tend to do with their Facebook newsfeeds.

I ultimately think that incorporating a card interface allows the users not to feel lost when they open up the app. Have you ever noticed how long the process takes to decide on where to eat or what to order with an app like Yelp or Grubhub…? It gets worse when you are with a group of people. It’s hard to make quick decisions. There are too many options. It’s information overload. Also before even getting to the point of picking between restaurant options, my biggest problem is not even knowing what to enter into the search box. There’s no word bank to choose from and my suggestions are pretty consistent each time: “Italian…Japanese food…Sushi…Asian food?”

By giving people the option to swipe through cards, showing what’s nearby and ready for order, we’re saying, “Here, pick from this deck of cards. Don’t worry about doing any thinking. Bookmark what you’re craving and choose from there.” Hopefully that eliminate a lot of the “What-if” questions that come to mind when deciding on what to eat.

This article makes another interesting point about how each swipe provides us on the company end with more feedback and engagement data.

On the one hand, cards and swipes are simple and lively for users. But the interface has a happy flip side for companies who make the apps. “Every swipe is engagement data,” as Sarver put it.
Swell does the same thing. “Every listen/swipe interaction offers a signal to the algorithm that powers Swell,” said Ramkumar. “Aggregated across users, the signals form the basis for collaborative filtering.”

In talking through the interactions, Laurence and I talked about having a kind of “Oh that sounds good” page that’s nestled in-between the card options screen and the final check out one. Another article that discusses the benefits of cards points out the bad in the UI that iTunes and Netflix have designed:

Both iTunes and Netflix require that users do work to get more information, just as brick-and-mortar customers have to physically remove the movie from the shelf, turn it over, and read the back. Furthermore, none of these interfaces provide a good way for users to keep track of ‘maybe’ candidates while they look at more options. In the store, the user can physically carry around a handful of movies, but will either need to put them back later or ask an employee to do it for her.
Netflix does let each user keep a List of movies to watch, but this feature has evolved from the DVD rental queue, and feels more like a “list of movies to watch eventually” and less like “a way to keep track of movies to watch now.”

I was super, super intent on figuring out a way for people to add cards they like to a “maybe” pile without doing what Netflix does — turning the lists into something that feels like “maybe I’ll check this out eventually”. Another thing we want to do is make sure we don’t provide too many options for users. So in the way that Tinder eventually runs out of cards (I’m not sure if they actually ever really run out of cards cause there are millions of people nearby all the time and on the app), we would limit the amount of food cards we show customers at a time. Again, hopefully that makes the decision process a bit more stress-free.

Laurence had made two interaction suggestions. One being that we would add a sort of counter to show how many card options are left and another being that we limit how many “maybe” cards they can add to their cart at a time. I’m not sure how I feel about saying you can only have 3 or 5 maybe cards at a time selected but I guess that’s a good number because it’s not likely that someone would order more than 5 different items in one purchase if they’re concerned about time and money.

But now that I’m thinking about it again, I think limiting it to 5 could be good in a way and in terms of communication design, we could make it a fun screen afterwards where we show all the maybe cards again in the format of a hand of cards vs. scrolling through the cards in the same way as before. I’m concerned about people moving forward to the “maybe” screen and thinking that they’re actually just seeing the same things as before in the initial “choose from these options” screen.

I know that last bit was kind of confusing…but now I’m off to work on prototypes.

Like what you read? Give Tiffany Jiang a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.