Category Archives: mobile

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.

The iPad mini experience

I have been a proud iPad mini owner for exactly one week now, thanks to luck and a generous donation to the Designers + Geeks raffle. My experience with it has really surprised me – I thought it would be a cool toy, and I was really excited to win one, but I had no delusions that it was going to change the way I browse and interact online. It could be that it’s my new toy, but as I’ve been trying to both experience using a new device and analyze my own behavior simultaneously, I believe the way I want to browse the web has actually changed.

Context is important when it comes to experiences like this, so here are a couple of things to keep in mind about me:

I have never owned an iOS device before this one. When the first iPhone came out, the price was just too high for me to consider, and I didn’t have an interest in paying for a data plan. Life was complicated for me for a couple years afterward, and I was actively rejecting the idea of having a smartphone. Sprint was a client of mine in 2009 and I was heavily testing all of their devices as they were released, and the Android platform really appealed to me. I became a smartphone user with the HTC Hero, and then replaced it almost two years later with Samsung’s Nexus S, the device I’m still using today.

I am not an early adopter. At all. I held on to my HTC Hero for longer than was reasonable. I knew six months in that it was never going to receive an Android OS update. I was using Android 1.6 (Donut?) until September of 2011. If you’re unfamiliar with the Android release schedule, you can check it out here, but the important thing to note is that I used an outdated mobile device for at least 18 months. I am the type of person who wants to buy one thing, run it into the ground, and not reevaluate my strategy. I’m also much more likely to sit around and complain rather than actively go out and spend more money. I throw money at my problems when it comes to Muni versus Uber, but that’s pretty much where my willingness to spend ends.

I spend much more time in bed than you might think I do. Look, I don’t know. Maybe you spend all your time sitting at a desk. Maybe you’re smart enough to pay attention to your posture. Maybe you do your browsing from one location and you enjoy that experience. All I know is that I live in a 500 square foot apartment, I hate my desk chair, I have a very comfortable bed, and I’m really good at balancing a four year old laptop against my knees. Since I work from home, sitting at my desk very much feels like I’m working, and I don’t much care to read AV Club or check Facebook in the exact same way that I work.

I’ve suspected for awhile that a tablet might be ideal for me, but I’m surprised at exactly how true that has turned out to be. A couple of observations:

I have read more in the last week than I probably did in the previous six months.

I understand the irony in this, but you should know that I am a person who regularly balks at reading 4000 word articles. (I know. I know.) The reason for that, however, is that I learned long ago that I just can’t stare at a computer screen – laptop or desktop – long enough to read extensive articles. I spend so much time staring at a screen for my job that I’m already on constant Headache Watch. Focusing on type for twenty minutes is a bad idea for me. As a result, I turn away from articles that I would probably enjoy.

Instapaper

The day I got the iPad, I immediately subscribed to Marco Arment’s The Magazine. I devoured all of the back issues within a couple of days. I also purchased his Instapaper app and started sending articles to it. Instapaper is particularly valuable to me as a non-3G iPad user, since articles are stored locally on my device. I started using Flipboard again, which has just been running too slowly on my phone to be valuable, and I started to actively seek out longer content. It’s been a joy and a relief to focus more and bounce around less. I can only assume I’m going to turn into an eBook person sometime soon. (I also received the entire A Book Apart series from my boyfriend for Christmas, and have spent equal time reading both their print editions and their eBook versions on the iPad.)

The 7″ screen size is perfect for my tiny little hands.

Maybe your hands continued to grow as you entered puberty and adulthood, but mine topped out around age 11. Every person who has ever heard me mention my little hands immediately doesn’t believe me, and every one of them has lost to me in a tiny-hand-off afterward. They’re small. I worried that the iPad mini was going to be too small for me, that I would find myself wanting more screen real estate, but I can’t imagine that being the case. It falls into a delightful window for me where I can thumb-type if I rotate my hands correctly and just need to enter a search term or something else short, but if I rotate it horizontally my hands are actually small enough to type on it in real-keyboard-mode. I never feel particularly strained if I need to reach for something in my non-dominant corner – I’m right-handed and hold it at the bottom of the screen generally, but hitting things in the upper left to close or navigate backward doesn’t feel like a huge disconnect.

ally

I do think it’ll be interesting to see if the mini comes into its own as a device, or if it will always be “the small iPad”. There are some layout issues with iPad apps that were clearly designed for the larger size (looking at you, Words With Friends and Facebook). It’s also ridiculous that iPhone apps look as bad on the device as they do – the iPhone 5 has a resolution of 640×1136 and the mini comes in at 1024×768. There has to be a better way to do this.

(I’m calling out Ally’s app simply because it’s one of two iPhone apps I haven’t immediately rejected and I needed screenshots from something. I have no complaints about their app on my phone, and I understand that the iPad is still newish and native iPad apps aren’t standard yet, but every single one looks exactly this bad. There is little excuse for that.)

Facebook

The Facebook app (contacts blurred for friends’ privacy) is particularly frustrating. I have zero interest in seeing my contact list as a permanent feature. I’d be happy to slide it to the other side and just constantly have the FB dashboard taking up real estate instead of my contacts, but sliding the dashboard out hides the right side of my content. Facebook. Why.

It’s fast. Really fast.

As I mentioned before, I’ve never been an iOS user. I test things on iOS, sure, but I’ve never owned one, so maybe this is just an iOS thing. No idea. Regardless, it’s a quick little device. The experience feels completely seamless. There’s something about it that feels much faster than my (admittedly out of date) mobile phone, and it feels significantly faster than my laptop or desktop. It’s connected to the same wi-fi as all of my other devices, but it is by far the most responsive thing I own. Maybe it’s something about that little screen, maybe it’s something in the architecture of how content loads, but regardless, having the information I want the second I’ve asked for it feels really rewarding, even if I’m ultimately talking about a difference of a couple of seconds.

I sincerely prefer the experience of tablet browsing to laptop browsing.

The laptop I use when I’m casually browsing is an older 15″ MacBook Pro. It runs a little hot, but that’s probably due to its age and my regular insistence on keeping too many tabs open at once. But it’s heavy, and most of its heft is coming from the part that I don’t care about – the keyboard, which I employ only occasionally, and all of the hardware that takes up a lot of space. The iPad screen is considerably smaller than the screen I’m used to, but it turns out I have little interest in all that space. Take now, for instance. I’m writing in my WordPress window, which is about 600 pixels wide and maybe 350 pixels tall. I’ve got seven tabs open, but most of them are just pages I looked up to link in the above paragraphs and forgot to close. One of them is my gmail tab that’s always open. I can see some Finder windows in the background. I have a lot of formatting and tagging options on my right and a smaller space dedicated to the other WordPress dashboard items on my left.

The truth of the matter is that I don’t need any of that. I need the keyboard that I’m typing on (there’s a reason I grabbed the laptop for the first time today instead of trying to compose on the iPad), but I don’t need all of the extra information I can see. I’m focused on a smaller-than-the-iPad window, and there’s a world where I could just swipe or tap to all of that other stuff. There are desktop apps that accomplish this for you, removing everything but the most necessary information so that you can focus, but they’ve always seemed like they’re engineering a solution to a problem that could be worked around in another way. I’m glad they exist and seem to work for a lot of people, but they just make me feel anxious and like I’m missing something.

I’m engaging slower but taking in more, and my digital social life is changing.

I’ve been a Google chat user for about seven years now. It’ll sound silly if you’ve never experienced it, but I’ve made some of my closest friendships that way – Twitter friends became Google chat friends and we learned things about one another by typing at one another all day. Since the iPad entered my life, I’ve stopped using it. I assume there are multiple chat apps that are probably really great that I could keep myself signed into, but I haven’t bothered to look for them. I’ve been much more content to sit around reading and browsing and saving.

That said, I’ve been more engaged with Twitter and Facebook than I’m used to. I’ve turned off all of those notifications on my phone because I don’t have much interest in my phone constantly buzzing at me, but for some reason they don’t disrupt me on the iPad at all. It’s not that they’re any more or less intrusive, it just doesn’t bug me to see one flip down from the top of my screen and tap on it when I finish the paragraph I’m reading. Last night I sat in front of the television and watched the Golden Globes while constantly refreshing Twitter, a thing I realize exists but I’ve never once experienced for myself in the five and a half years I’ve been using the service. I’m starting to get the appeal of livetweeting, even if I don’t participate in it myself.

I don’t feel as compelled to immediately interact with things.

I have a really, really selective memory. I’ll remember that restaurant we went to that one time and I know who was there and I can recite the funny part of the conversation verbatim, but if I check my email and don’t immediately respond to you, you probably aren’t getting a response from me at all. (I also can’t remember movie plots. Any of them. Ever.) It appears to me at the iPad just does what it does so well that I’m not in a hurry to jump off of my current task, even if I’ve been notified that there’s something that needs my attention. I’m still trying to figure out exactly why this is, but it’s a really calming turn of events that I’m enjoying.

And I suppose that’s what it all comes down to – it’s just really, really nice to use. It’s an enjoyable experience. It feels like it’s adding value to my life – reading more, thinking more, jumping around less. I’m looking forward to revisiting this list in about six months and seeing if it’s as integral to my home browsing then as it was when it was a new toy, as well as what other habits I find myself developing.

Put your address on the landing page: design, usability and interaction for restaurants

Restaurants, I’ve got a serious beef with you. (That’s the last pun.) (I’m probably lying.)

Your websites are awful. Just terrible.

Not all of them, of course. They’re getting better with every passing year, which is encouraging from both a design and an eating standpoint. But comparatively, bar and restaurant websites across the board take the cake for most embarrassingly bad decisions. I get it. New restaurants, especially in a town where 500 sq. ft. spaces are now renting for $30,000 a month, are often already operating on a shoestring budget. It’s just one more thing in the way of making and sharing food.

I’m far from the first person to have made the observation that restaurant websites are terrible, but instead of complaining, I’d like to help. Without further ado, here is all of the advice I have for you, even though I may have never been in your restaurant and know nothing about your food. It is long, it is detailed, and it is basic.

(A note: I point out a couple of specific problems in the paragraphs below, but this is not a “can you believe they did this” article. This stuff isn’t easy, and I’m not here to be catty or criticize anyone for trying.)

Put your address on the landing page. This is not optional.

The question your users are asking if they go to your website is “How can I find you?” They should always be able to know where you are. If you have multiple locations, provided you don’t have thirty of them, you should put all of them on your landing page. (I don’t know where exactly the break is between one and thirty; I suspect that it’s much lower than I imagine. I feel very confident about four being okay.) Realize that people will be coming to your website from a desktop, a tablet, or a phone. Put nothing behind an animated intro. (We’ll talk more about that soon.) Don’t require people to shuffle awkwardly to a contact page.

And while you’re at it, consider adding cross streets, a map, and transit directions. If your location is somewhere really strange, tell people that. I specify transit because the chances of someone using their GPS to drive to your restaurant are relatively high (if they don’t know how to get there by cross streets alone), and if you’re serving alcohol, you should be much more concerned about non-drivers being able to find you. Exact transit directions aren’t necessary, but nearby Muni lines or BART stations (or your local equivalent) are always helpful. Local’s Corner does a beautiful job of getting people in the doors.

There are other lines you could take, but they keep it simple: six lines is already a lot of options. The map is at a legible scale, zoomed out just enough to provide adequate context.

A phone number is necessary, too. If someone’s on their way to a reservation and needs to contact you, they may not know which 415 number you are from their past few days of calls. Also, you can save yourself a lot of time by listing your hours by the phone number.

A daily updated menu is great, but at least a sample menu is required.

With the rise of restaurants across the country focusing their efforts on local, sustainable agriculture, it’s not uncommon for a restaurant’s menu to be different every day. Whether it’s a fear of potential customers complaining that such-and-such dish isn’t on the menu or a lack of desire to regularly change website content as the seasons shift, it’s become a major crutch for restaurants to simply describe their cuisine and say that it’s different every day and that’s the end of it.

Beyond your address, a sample menu is the most significant reason a user will visit your website. At least thirty restaurants in my neighborhood alone could be described as “New American” or “Californian”, and using an “About” page to write your personal dining philosophy is just not going to cut it. Even if a menu changes daily, you can likely admit that there’s a theme – there’s always a pasta dish in the $18-20 region with some sort of braised meat, or you always have a $20-24 vegetarian main, a seafood dish, and so on. You have a specific focus that makes you unique, or you experiment with many different techniques and your menu represents that. Whatever your concept, diners can handle the idea that this might not be 100% accurate, and sample menus for seasonal restaurants are common enough that there’s no longer a reason to not open up about your food. With the line between casual and fine dining blurring more every day, “pizza joint” can mean $3 slices or $35 pies. (Not to speak ill of either, but expectation and how it meets reality are important.) Your 30 taps could be 26 taps of Bud-Miller-Coors macrobrew or it could be exclusively beers brewed within a 50 mile radius of your barstools. Make sure your customer knows what to expect and everyone comes out happier.

ETA (1/9/13) – From Jesse Friedman on Twitter – “the only addition i have to your rest website rant is including prices on the menu. drives me nuts when they are left off.” He makes an excellent point. In a town where eggs benedict could cost you $8 or $22, please, please let your customers know what they’re in for. 

If you’re absolutely concerned with keeping your menu up to date, your designer and developer can set up a system that allows you to update easily (even from your phone at the farmer’s market) and quickly. Make it a pre-opening duty for a tech-savvy line cook and give them the ten minutes they need to get it right. Monk’s Kettle updates their extensive beer list constantly; Pal’s Take Away and Kitchenette keep both their websites and their Twitter feeds updated every day.

Speaking of, social media gives you a free, opt-in way to get in front of potential customers every single day.

69% of internet users participate in social media. Many of them are college-educated, many of them are in middle- to high-income brackets, many of them in San Francisco are likely to live in smaller spaces and be more accustomed dining out. Increasing numbers of them are conscious of their decisions and willing to pay for them, many are in the much-desired “double income, no kids” demographic. It’s likely that users check Twitter either while they’re eating breakfast, on the train or bus heading to work, or at their desk as they start their day, giving you an opportunity to invite them in for your lunch special. If someone is on their way home and checking Facebook as they kill time thinking about where to eat dinner, you can remind them that you’re on the way and show them a photo of what they could eat for dinner. You can grab them before they leave the office and have even had a chance to think about dinner. Incanto updates their specials, including their odds-and-ends board, every day. Pi Bar updates their Facebook (and cross-posts to Twitter) just before opening time. The Sycamore reminds you that they have a patio when the sun comes out and that they serve bottomless mimosas right as you’re getting drunk with your friends the night before and think drinking again in 12 hours is the best idea. And for that constant, one-on-one interaction, you pay exactly nothing. Hapa Ramen posts to Tumblr with not only photos of their daily menu before their 10-2 shifts but when they’ve perfected something new in the kitchen for a pop-up. Nopa posts to Tumblr when they’re inspired by something and they write with such an infectiously excited voice from such a straightforward educational perspective that you can’t help but want to share it with them.

Users retweet and reblog and respond and email and share. You have an opportunity to excite a potential customer and have them try to excite other potential customers for you, for free. Never has it been more possible for a customer to maintain a relationship with you and your food.

Your voice matters. Know how to interact. 

The restaurant/bar+Twitter conversation I have most often with friends is about just how badly incompetent some people are at connecting. (We’re fun at parties.) It’s really, really hard to gauge tone on the internet. Customers will react strangely to things you’d never imagine. I’m not here to tell you how to act and speak, but do make sure you’re comfortable with the face you’re putting on. If you wouldn’t be an asshole to someone if they were in your restaurant, don’t be an asshole to them on the internet. (If you would absolutely be an asshole to someone in your restaurant if they started it, feel free. I cannot tell you how proud I am every time I see a chef standing up for themselves and their restaurant. Realize that even when you’re right, someone is going to refer to it as “Twitter drama” and be okay with that.)

Tone aside, there are some really annoying things you can do to alienate followers, so please don’t do those. Don’t beg people to follow you on Twitter on Twitter. Chances are you’re preaching at the choir of people already following you. If you can make the time, try to engage when someone asks you a question. But don’t feel obligated.

Don’t retweet every single thing someone says to or about you. If someone had a great meal or took a beautiful photo or said something insightful, great. But don’t get into the habit of doing it for everything. There are probably a lot of “Went to X tonight, good food” tweets you can just let go.

Don’t let your Twitter feed just be a cross-posting machine. Facebook and Twitter share a considerable amount of overlap, but they have unique features – encourage people to keep up with you in multiple places by using them in interesting ways. Exclusively cross-posting is a quick way to make sure they follow you in one spot only. (And I don’t mean to discourage you from ALL cross-posting – letting them know you have a new Tumblr post is great and encouraged. But use multiple accounts for multiple reasons.)

If you’re advertising an event, fit everything into one tweet. You’re hoping that people will retweet it; recognize that people are probably just going to retweet one if you use multiple, meaning second-hand readers are only getting part of the story.

What are the technical requirements for this whole thing?

Well, that’s ultimately up to you.

At bare minimum, you need to purchase a URL. It’ll run you about $10 a year. Preferably, your URL leads to your actual website, but you can always use it to redirect to Twitter in the meantime. A placeholder page with at least an address, phone number and connection to social media can do wonders in the interim while you figure everything out.

If you want your own website, you’ll end up paying a monthly fee for hosting. Discuss this process with your designer. Having a web presence shouldn’t run you more than $10 a month, unless you’re paying someone to keep your content updated for you, in which case it defers to their hourly or flat rates and whatever you agree on before they begin the job.

Your restaurant will have a Yelp page; make sure that your URL and additional contact information are correct. (Say what you will about Yelp, but it continues to be the superior app and website for finding nearby spots and has standardized contact information for businesses. It’s going to be toward the top of your Google results no matter what, so lean the slightest bit into it and check every once in awhile to make sure everything is accurate.)

When it’s time to change content on your website, your designer can set up an update system – or at the very least can show you the basic editing steps to change code on your own. Much of this will have to do with the content management system you choose, and much more technical designers than I am can cover those options in many other blog posts. Have that conversation with the person or people designing your website on Day 1. If they’re qualified to take on your gig, they’ll be able to come up with a strategy that works for you.

If I may, allow me to caution you against using a PDF for your menu. PDF, or Portable Document Format, is a file type that was created to standardize documents independently of platform or software. In the earlier days of the web, visual design options were limited by a lack of built-in code options, leading to clunky workarounds. PDFs were used as a way to ensure consistency in viewing.

It’s an attractive option because PDFs can be exported from all word processing and visual design software, so a folder can be synced to upload new content at regular intervals, and when someone makes a change to a menu, they simply save over the existing file and the links update automatically. It’s a hassle-free solution. But from a user perspective, and being considerate of the ever-increasing number of mobile users, it’s not the best idea. Some users may have their browser set to download PDFs by default. Particularly if they’re not warned that the link leads to a PDF, they now have to take another step to read your menu, leading to frustrated users waiting to find the file and open their software of choice. Mobile users may not have a preview option and may not have a system in place on their phone to handle downloaded documents. Since we’re no longer typographically or otherwise layout-limited, there is little need to add in an additional hard-to-regulate step.

Do not use Flash.

I’m very careful in this whole thing to not tell any of my fellow designers how to do their jobs, because a) everyone has their own process and there are thousands of ways to go about things, and b) I just hate when people tell me how to do my job. But there is one thing you need to know, and that is Do Not Use Flash. If your designer tells you that you have to use Flash, call me and give me their phone numbers and I will come over and slap the Photoshop right out of their mouths.

That was perhaps a little dramatic.

But don’t use Flash. It’s solution that has little place in a 2013 web design. For a long time, it was the easiest way to integrate motion into a website. Adding the dimension of time changed basic information into “interactive content” and heavily influenced the way the current web behaves. Three years ago, Steve Jobs wrote why Apple will not have a relationship with Flash; last year Adobe agreed that it was no longer an effective solution. It is ineffective on mobile and there are few compelling reasons to use it even on a desktop.

And while we’re at it, your website does not need music. I don’t care that you want people to really feel like they’re in Italy.

What should my website look like?

That’s between you and your designer and the experience you’d like to create. You know which restaurants you’re trying to compete with in this city – take a look at what they’re doing. Don’t copy them, don’t assume that you should do the same things they’re doing, but do consider how you want to posture yourself. Look at what’s working and what isn’t. If you’re friendly with them, talk to them about why they’ve made the decisions they’ve made and what they like and dislike about their current strategy.

Everyone has their own aesthetic, and what works for one place may not be appropriate for another. Everything I’ve linked to thus far is something I like specifically for the reason I’ve included it here. There are other options I could have chosen for many of the points I was trying to illustrate, but I’m particularly partial to the examples I’ve chosen as an overall experience.

Beast and the Hare is probably my favorite restaurant website in this city. Hours, phone number, address that links to Google map, sample menus for everything, single scrollable page that has the address again on the bottom, as well as links to social media engagement (which they update with decent regularity).

Public House has made it incredibly clear that they are committed to you having all the information you could possibly want without having to pick up the phone and try to have a conversation with someone in an echoey, packed mega-beer-bar. Food menu to beer menu to which games they’ll be showing, and delivering that information via a well-designed desktop site, mobile site and iPhone app. I’d ultimately prefer if they had one design that addressed all three simultaneously, but they’ve clearly put a lot of care into giving you the information you need as quickly as they can.

Consider making mobile access your #1 priority.

If you can make the time, please flip through a copy of Mobile First by Luke Wroblewski. It’s geared toward designers, but if you’re really serious about your web presence it makes a very compelling argument for designing with mobile in mind. The idea is that if you begin with a mobile mindset, it’ll force you to make tough decisions about what content is really important and how we can get the user to their destination as quickly as possible. It urges designers to make visual decisions that are simple and direct. No matter whether someone looks up your website from a phone or laptop, chances are that they’ve looked you up to get answers to a question, and you want to make those answers available.

Does that mean I need an app?

You wouldn’t be the first one to do it, but the short answer is no, you do not need an app. There are restaurants out there that have done it, and some of them even happen to have really beautiful ones, but a few problems arise:

  1. Are you designing for iPhone, Android, and Blackberry, or picking one? You cannot design native apps for all of them at the same time – they’re built on different rules, and it doesn’t work that way. The wireframe of the user experience can transfer over, but visual elements and code will have to be completely created from scratch each time. The reason companies often design for just one (with the second or third coming soon) is because it’s costly. It requires maintenance on multiple pieces when you want to make a change. It’s rare to find someone who independently develops for more than just one or maybe two platforms. Magnolia Pub and Brewery, one of my favorite brunch spots, has an app – a beautiful one. And while that’s great, they don’t have a mobile site, meaning they’re only reaching 13% of smartphone users. (I do suspect that number is dramatically low; I’m willing to believe that a much larger chunk of Magnolia customers have iPhones. That said, even if the number is closer to “half”, it’s still an unsatisfied market.)
  2. People have to know you have an app. You can tell them at their desktop, but if you want them to download it you’re going to need to tell them on their mobile device. By that point, they’re already at your mobile site. No one is going to start their search for you in the app store.
  3. People have to be willing to wait for your app to download and install. Many customers will – if I had an iPhone, I would absolutely use Magnolia’s app. But you should consider an app to be most useful to your regulars, who will probably keep coming even if you don’t have an app.
  4. The reason people design apps is to access pieces of the device’s hardware that browsers aren’t allowed to access, and you do not need those pieces. Maps and the dialer are accessible from the browser – anything else you need from the hardware of a mobile device might be overdoing it.

I suggest you speak with your designer about the benefits and limitations of multiple approaches and see what they recommend based on your needs, but if you’re going to go mobile, you’re probably best off starting with a cross-platform mobile site.

How do I do all this?

I promise I haven’t been writing all of this as an elaborate buildup to a sales pitch, but the truth is that you need to hire somebody. (I’ve been writing all of this because I am frankly so sick of seeing terrible restaurant websites in 2013, and because I really love any excuse to nerd out about food.)

This is not be a guide on how much money you should spend, because I have no right to set an expectation for someone else’s hourly rate. But consider the idea that hiring an experienced professional may cost less (percentage-wise) than you think, because experience in our industry often directly correlates to efficiency. Don’t immediately balk at hourly rates. The types of designers that you’ll be encountering fall somewhere on a sliding continuum from User Interface (UI) and User Experience (UX) design. A UI designer spends their time creating a visual story (how your website looks). A UX designer spends their time creating wireframes and developing the idea of how users will move through your website. A UX designer decides what you’ll want to see and learn, and a UI designer makes sure you can see and learn it effectively. Many people fall somewhere between the two, and if they happen to be all the way at either end of the spectrum, they’ll likely have someone on deck that complements their skillset.

The thing you should do now, today, is start a Twitter feed and/or a Facebook account, and give consideration to how you will want them to integrate with the content on your eventual website. It is possible to get away with just a social media account for quite some time. If you already have one, take a second to consider how you’re engaging potential customers. Decide what you are and aren’t comfortable with – if you don’t think you can effectively use Twitter for reservations, make a habit of responding to such mentions with your phone number or an OpenTable link. If you post content that’s interesting, people will happily redistribute your information to all of their followers, giving you access to a wide audience with minimal effort.

As for visual design, if you’re hesitant to hire somone, there are many great free Tumblr and WordPress themes. If you’re willing to shell out a couple bucks, there are even more great paid themes. Within an hour you can piece together an acceptable “website”. There are also paid DIY options like Squarespace. I can’t recommend any of them from personal use (I in fact know Squarespace through their advertising on the Earwolf podcast network), but they appear to be increasing in popularity and quality.

And that’s it. That’s all. I know it’s really silly to say “that’s all” after 3800 words about what you should and shouldn’t do, but it comes down to this: don’t hide information from your customers. Remind them that you’re there. Ever wonder how some restaurants are getting their Kickstarters funded and have lines down the block upon opening? Those are the restaurants that reached out. They’re food trucks or pop-ups who tweeted every couple of days about what’s going on. They’ve already made their customers feel like a part of the process. And you can do that, too. Just keep in touch, make good food and put your address on your landing page.

(Fellow diners or designers, what did I miss? What did I get wrong? What’s a particularly effective feature you’ve seen from one of your local restaurants? Get in touch and let me know, and I’ll update this as necessary.)

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.