Design principles for mobile

Standard

Have you ever designed for mobile before? … especially if you’ve designed for the web. It’s a whole different enchilada. Web Design Views is a great resource for all things design. This article by Armen Ghazarian gives a great overview of some of the considerations you should give to your mobile design efforts.

  • What’s the best tip you’ve ever followed for stellar design?

10 User Experience Principles for Mobile Apps and Websites

Mobile is the next big thing. Although it has already emerged drastically, there’s so much more potential to be unlocked and the ones who realize that early enough will benefit from it the most. But going mobile is not just shrinking you existing website to the small screen size and waiting for magic to happen. No.

Not long ago having a minimal working mobile website was tolerable, now things have changed and requirements are much higher. Users are expecting to have the same level of comfort and experience when browsing on mobile devices as on the web. Those who fail to deliver consistent quality UX across multiple platforms are not only missing new business opportunities, but may also lose a portion of their current business. So the sooner you optimize your mobile presence, the better.

Mobile user experience is a combination of feelings, thoughts and emotions that are present when users interact with your mobile website or app. It’s all about making the mobile environment comfortable, intuitive and delightful for the end user. Sounds pretty much like web UX and there is indeed a lot in common, but some principles of web usability may not work for mobile devices and some unique mobile features may require a different approach to designing amazing user experience. So let’s go through some of the mobile-specific UX principles that will improve your mobile app or website performance.

1 – Understand user’s motive

Before designing a mobile app or website, it’s essential to understand user behavior and the goals behind each action. If you already have a working website or web service, then you probably have plenty of analytics data to work with. Analyze user flows on mobile devices to see what users are looking for, what features they use and how they interact with the website. It will give you clues on what type of content is more important for a mobile user. But if you are starting from scratch and have no user data, whether you like it or not, user research is the only way to go.

2 – Define the context of mobile usage

Mobile context is the situation, the circumstances in which users are going to use your mobile app or website. Unlike web experience, which usually occurs when users are at their desk at work or at home, mobile experience may occur absolutely anywhere and anytime. That’s why it’s important to understand in what conditions people may use your mobile product. If for example it’s a GPS navigation app, then it will probably be used while driving a car, so maybe you should consider having a voice navigation feature for a better UX.

3 – Showcase the most important features and content

When you have only 3-4 inch screen to display whatever there is on a 27 inch screen, you have to set priorities and decide which content is important enough to make it to the mobile version. It’s a general practice to reduce the number of features and amount of content for a mobile device, because data analysis confirms that when browsing on mobile devices users behave differently. There are a few predominant pages or features that are frequently used on mobile and obviously you need to put those content types first. The rest may still be accessible in dropdown menus or “see more” options, but the idea is to fill the valuable real estate of a mobile screen with what is more important for the end user.

4 – Design more usable navigation

Since a mobile screen is much smaller than a web screen, there is a need for a simpler, more user-friendly but still meaningful navigation system. The general trend is having a vertical navigation instead of a horizontal one that is frequently used on the web. But depending on what user’s motive of using the service is, you may decide to make a heavier emphasis on images and visual content, while hiding the navigation away into so-called “hamburger” menu or maybe combining both horizontal and vertical navigation, whichever works best for your web service. Anyway, you need to have clear and concise menu labels to help users understand where in the website they are and where they may go next.

5 – Keep the design simple

When you have a look at the featured apps on Apple app store, you will notice a general trend of cleaner, simpler UIs focused on functionality and content rather than complicated design elements. This is the case when less is certainly more.

6 – Make good use of mobile specific features

Remember the time when mobile phones were used only for making calls? That was so long ago, but the call feature is still there and is probably the strongest advantage of smartphones over desktops. As simple as a “click-to-call” button can essentially increase your website/app conversion rate. Another mobile specific feature is location information that can be collected to provide customized UX, local recommendations, etc. And of course well-thought push notifications can help your app fight for the user’s attention and commitment, which is nearly impossible on the web.

7 – Optimize forms and reduce data input

Nobody likes filling in forms, especially when you have to do that on a microscopic keyboard and on the go. As already mentioned, people use mobile devices in many different situations, most of which include moving and it’s terribly uncomfortable to fill in that tiny fields multiple times (because you can’t make it without a typo). So it’s your task as a UX specialist to reduce the frustration and negative emotions of users filling in mobile forms. You can do it in a number of ways: ask users to select predefined answers (if applicable); use other input mechanisms like voice input; whenever possible offer default answers; offer auto-completion and spellcheck technology to reduce typos, etc.

8 – Provide access to full website

No matter how brilliant mobile UX you deliver, users should a have choice of which version of your website they prefer at any particular moment. Google Chrome does a great job with its “Request desktop website” feature. When designing a mobile website, you prioritize the content that will appear on mobile version. Eventually some features are dismissed or lost deep in the navigation and users are unable to find them. Why not help them out and provide a quick link to the desktop version?

9 – Design user-friendly notifications and alerts

Mobile apps have an exclusive opportunity to get user’s permission for annoying them with push notifications. Few users will take the time to turn off those alerts and may decide to remove the app altogether. This is a pessimistic scenario but if you want to deliver enjoyable UX, designing usable notifications is paramount. You need to make them timely and relevant, with a clear and comprehensible message so that users don’t get frustrated and more importantly let users choose which notification they would like to receive. This makes for a relatively positive notifications UX.

10 – Collect feedback and adjust

Since technology is evolving rapidly, things that used to work yesterday may be completely useless tomorrow, so you need to constantly have your finger on the pulse and adjust your app or website to latest tech changes. Provide an easy way for users to leave feedback, report issues and communicate with you directly, because nothing can be more valuable than customer opinion and advice.


Author:

I am proactive and enthusiastic UX geek from Armenia with a keen eye for detail, big passion for sleek and usable digital products and an irresistible urge to improve, rather than get used to things that are not in place. You can always be in touch with me @armen_ghazaryan and Google+ and Website.

Advertisements

The science behind user behavior

Standard

One of the coolest parts of user research is the RESEARCH bit. This UPA article by Ryan Devenish and David Royer discusses a really interesting phenomenon: Limits increase behavior. Sound confusing? Read on to get the rest of the picture.

  • Think back and tell me about a time when you responded to limits, and maybe didn’t realize it.

Ask Less, Get More: The Behavioral Science of Limiting User Behavior

Let’s pretend for a moment that you are a UX designer at a technology company building a brand new product. Things are going great; you’ve designed and launched a product your customers find useful and easy to use. But when you dig into the metrics, you find one you wish was a little higher. Perhaps there is one action you want to nudge your users to do more often. Maybe it’s inviting more of their friends, uploading more photos, or reviewing more books.

There are many ways to persuade people to perform behaviors; great ideas are coming from the fields of behavioral science, psychology, economics, and game mechanics. Many nudging techniques are logical, like providing rewards or removing unnecessary obstacles. However, contrary to conventional thinking, limiting the action you want users to perform can actually be one of the most effective ways to encourage that behavior.

Examples of limits are relatively scarce in the UX field because they don’t happen naturally. Digital products don’t suffer from the inherent limitations that come with physicality: iPhone apps aren’t put on backorder; websites don’t go bad and become waste; users don’t stand in line all day awaiting the next software release.

However, there are some applications that set restrictions, especially as a method for controlling the pace of new product releases. In its first couple of years, Facebook only allowed college students to join. Gmail was open by invite only and each user was given only ten invitations to share. Mailbox limited the number of people granted access to their product each day, and you were placed on a waitlist before you could use it. These limits were likely set in place to roll out products in a controlled way, but the limits may have helped generate user demand as well.

There are also digital products that set rather unusual limits, ones that define and differentiate them. Examples include Twitter, whose product limits the number of characters you can include in a tweet, and Snapchat, which limits the lifespan of a photo. By imposing limits, these applications are motivating particular user behavior and creating new user interactions.

The Proof is in the Soup

In 1998, psychology researchers at Cornell University looked at whether limits set on soup purchase quantity (“Limit 10 Cans Per Person”) affected consumer purchasing decisions. The study had three groups of participants: one group of participants encountered a soup sale with no purchase limit; another group saw a sign that said they were limited to four cans per person; the final group was limited to ten cans per person.

Impact of Purchase Limits on Soup Sold

No Limit Limit 4 Limit 10
Purchase Quantity Per Buyer 3.3 3.5 7
Shoppers Who Made Purchases 7% 10% 9%
Total Units Sold 73 106 188

Telling customers they were limited as to how much soup they could purchase increased both the percentage of customers who purchased soup as well as the amount of soup those customers purchased. While both groups handily outsold the no-limit group, the group shown the higher limit of ten cans sold the most soup, with only a slightly lower purchase amount than the group with the lower limit of four cans. And this is not an isolated finding; there are a number of similar studies looking at a variety of physical goods that suggest that purchase limits actually increase purchase amounts.

Why Limits Drive Behavior

Limits are effective at driving behavior because they play upon a number of different drivers of subconscious human behavior.

Herding

Humans beings are faced with thousands of decisions every day, and thinking through each one individually would be cognitively overwhelming and nearly impossible. Our brains have developed a cognitive shortcut called herding, where we tend to follow along with what other people do to help us make unimportant decisions quickly and effortlessly. Seeing what other people do helps us define what is normal and what we should do.

Who really knows what a normal amount of soup to purchase is when on sale? Do we buy one at a time or should we buy ten cans and hold on to them? We could consider the pros and cons of each, but that’s time consuming and takes mental effort that’s probably best invested in more important matters. Instead we take cues from our peers around us. A limit of ten cans of soup implies that some people want to buy even more, so we surmise that getting at least a few cans seems reasonable.

Signaling of Goodness

How do you know if something is a good deal? The clearest way is to compare the deal to deals elsewhere, or to its historical cost. Often people don’t know, can’t remember, don’t care enough to look, or have nothing to compare to. In these cases we use other signals or cues to figure out if it’s a good deal or not.

Setting the soup purchase limit may have signified that the deal is so appealing the store has to limit purchases lest they run out of stock or lose money on the transaction. Whereas the most price-conscious consumers may know the usual cost of soup off-hand, most don’t or won’t take the time to look it up. When people know very little and must place a greater reliance on social signals, this method proves very effective.

Reduced Choice

When asked, most consumers would say they desire more choices, but in actuality, an abundance of options is fatiguing and can lead to “analysis paralysis,” the inability to choose anything due to the sheer number of options. Limiting options can make people more likely to act. When the decision maker finally makes a selection, having fewer choices can foster a higher level of satisfaction in their decision.

Although not the most effective example of reduced choice, the soup purchase limit provides guidance by reducing the available options, lessening the burden of deciding just how many soup cans one should purchase.

Scarcity

Humans are very interested in keeping options open because we are poor predictors of our future wants and needs. Because of this, we place more value on items that are scarce, knowing that if we do not acquire them now we may never be able to. It’s also far more exciting to have access to something rare, as it provides a sense of status and strokes our ego.

The restriction on soup suggests there may be a limited amount of soup generally available and the potential to run out, even temporarily, may have nudged some customers to purchase.

Anchoring

Humans rely heavily on the first piece of information offered when making decisions. In the case of limits, the suggested limit becomes the anchor and our purchase decisions are influenced by seeing this high number up front. Even if an initial value is completely unreasonable, it serves as an anchor from which everything else seems much more reasonable. This is commonly seen in negotiations and used car sales.

If the first thing a person sees is a sign that mentions a limit of ten soup cans, this subconsciously becomes the anchor. Once this anchor is in place a customer may feel that five cans is a reasonable amount to buy, since the first thing they registered was the idea of purchasing ten cans.

Leaving options open

Humans are generally poor judges of our future selves. This makes us averse to cutting off options—even ones that we are currently not at all interested in—as we may be interested in the future. Limiting a person’s ability to leave an option open can be a very strong motivational tool.

One great example of this is return policies. The idea that you can always return an item comforts you in your decision, even if you have no plan to return it. Whereas we’re unsure of the return policy on soup cans, it might make the customer comfortable with buying more cans than they otherwise would.

Exploring The Use of Limits in UX Design

Today, limits are most commonly used to regulate application sign-ups, but there are many opportunities for UX designers to creatively apply limits to digital products in new and unexplored ways. Here are a few of examples of how limits could drive, or fundamentally change, user behavior:

1.Self-destructing invitation

When users get invited to try this application by their friends, they only have twenty-four hours to accept the invitation, otherwise it expires and they can’t join (see Figure 1). Will this limit get more on-the-fence users to join since they don’t want to lose the option of trying the application?

Dialog box shows limited time to register

2. Limited inbox

Consider an email inbox that allows only 100 emails to be viewed at once. Sorting or deleting an email grants access to the next one (see Figure 2). Will this drive users to better manage their inbox?

Screenshot shows maximum emails reached warning

3. Premium users get first
 access to new features

When a new feature of an application is released, it’s locked to all users except premium users for a period of time (see Figure 3). Will this make premium users feel special and appreciated? Does this re-frame the feature as something users want to get, instead of something forced on them?

Screenshot shows features available to premium users only

4. Online dating message counter

Imagine an online dating service where you can only send, for example, ten messages a month (see Figure 4). Will this restriction encourage quicker face-to-face meetings because people want to save their limited message supply? Will message recipients appreciate and read more messages, since messages are scarce?

Dating profile screenshot

5. Timed access

Envision a social media application that is accessible only for a limited amount of time—maybe just one hour per day (see Figure 5). Does this limited availability encourage users to use the application in a different, perhaps more meaningful way?

Screenshot shows limited access time warning

6. Limited commentary

What if your comments on news sites are limited to five per month? If other users find your comment useful or helpful, you’re rewarded by being allowed to write more comments (see Figure 6). Will the limit improve the quality of comments people leave? Will the limit act as an anchor that encourages new users to comment?

Screenshot shows commenting function

Using Limits in Product Design

Using limits to design digital products introduces a set of unique advantages and challenges that should be considered.

Limits save development time

When a new feature is built, there is significant time spent designing and building for unlikely edge cases, for instance: “But what if a user uploads 10,000 high-resolution photos?” Limiting user behavior cuts off a number of edge cases, which means your team won’t spend time focusing on a product experience for a few select users. Not focusing on the crazy “what ifs” saves your company time across the board: product management, design, development, support, documentation, and operations. Time that can be spent creating a more delightful experience for your core customers.

Limits will get stakeholder pushback

You will notice there are few applications that intentionally limit user behavior, most likely because it runs completely counter to our intuition. Think about how crazy it seems to propose to your team, “Our goal is to sell as many widgets as possible, so let’s limit every person to only ten widgets!” Even when people are initially receptive to the idea of imposing limits, a client or stakeholder will invariably veto it in the chance that a customer wants to buy hundreds of widgets.

There are a couple ways to assuage this concern. First, encourage your stakeholders to focus on real user behavior, not ideal user behavior. It’s tempting to dream that your application will be wildly successful and users will buy hundreds of widgets on launch day, but realistically this won’t happen. Also, promote the engineering advantages and focus that setting limits provides. Focusing on the most predominant use cases will help you to launch early and determine if your initial assumptions were correct. This is a familiar concept to organizations using Agile or Lean development. Finally, use limits as an opportunity to provide a personalized and delightful outcome for the small number of power users who go beyond the limit and have a less positive experience. This could be as simple as the product manager sending a personal email to thank your limit-breaking users and to ask if they wish to upload more photos or buy more widgets. It’s unlikely there are many of these people, so this can be a manageable opportunity to make them feel special and valued.

Limits need to be tested

Like any new feature, features with limits are best tested early and often. This allows you to learn as much as possible before launching to a larger user base. Explore opportunities to prototype and test the limit without having to build it into the product. Launch with a small number of users or run an A/B test. Observe how the limit affects key metrics, and run qualitative research with these users to better understand how limits affected their overall user experience.

Limits should not compromise the user experience

Although limits and other behavioral science techniques are interesting to experiment with, it is important to be thoughtful of how limits affect the overall user experience. If limits confuse or frustrate the user by keeping her from achieving what she came for, they are a failure. Hitting a near-term metric to the detriment of overall user experience is short-sighted and will result in a crummy product and failed business.

Limitless possibilities

Digital technology has enabled us to store a near infinite amount of information. You can keep every photo you take, save every email, and have more “friends” than people you know. This unlimited nature is undoubtedly useful, but it can also overwhelm, confuse, and reduce our passion for these products. Limits can help. Limits can clarify and motivate people to take action. Limits can create value and make people appreciate functionality they might otherwise take for granted. As UX designers, the time is now to explore this in our work—explore limits as a way to motivate users and as a way to create unique and wonderful interactions. The possibilities are limitless.

User Personas in Research

Aside

MailChimp is arguably the most accessible and fun to use email marketing company ever. Their practices have certainly influenced the way my company writes our software, and I’ve noticed myself using their blog as a serious source of inspiration …and if I’m really being honest, a reference guide.

Below is a re-blog of an excellent post on user personas.


 

New MailChimp: User Persona Research

A few weeks ago, MailChimp’s DesignLab posted images of our User Personas to their blog. As Jason explained there, we wanted to find out who really uses MailChimp. It was a question posed to us by data analyst Allison last year. We could broadly generalize about our users (savvy, self-reliant, techie, motivated), but we realized that we couldn’t rattle off the four or five archetypical MailChimp users.

What we needed was a clear idea of our current users, so we could better empathize with them, and in turn design for and delight them—especially with amassive redesign on the horizon. To reconcile who we think uses MailChimp with who really uses MailChimp, fellow researcher Steph and I embarked on a long-term study of our customers to learn who they are; what, why, and how often they send; what kinds of issues they face; where they work; and what kind of people they are. This helps us understand how MailChimp fits into their day-to-day lives, which in turn empowers us to design smarter.

So, how’d we do it?

 

Step 1: Interview MailChimp stakeholders to see who we assume our customers are

Our interviews with decision makers here at MailChimp were illuminating. When we asked, “Who do you think uses MailChimp?” nearly all of our subjects identified the same characteristics: smart, self-reliant, and techie. Steph and I decided to model an “ideal user,” Fred, after the aggregate data we collected from those interviews.

Fred is a great tool for a couple of reasons. First, he exposes our biases and assumptions. Second, he reminds us of the level of expertise we’d ideally like to see in our customers. He tells us to design MailChimp to empower our customers to communicate smartly and efficiently.

Step 2: Rank our pool of active users by industry

We took a close look at the industries people selected when they signed up for MailChimp. Turns out, nonprofits, education, and the arts represent a huge number of MailChimp customers. This was helpful, because we thought specifically about them as we redesigned the app. We could start to contextualize where folks will be when they use MailChimp, and in what capacity.

Step 3: Identify subjects from popular industries and interview, interview, interview

We took several of the top industries and started contacting users for in-person interviews. We met those customers at their workplaces—to present us with not only a human face, but a sense of the environment in which a MailChimp campaign is created. For instance, is the office quiet, or is there a lot of foot traffic? Is the computer a newer model or something outdated? What terms or phrases did our customers use to describe their work, their situations, and their emotional states? We ended up traveling to speak to customers in North America and Europe, focusing on Atlanta, Paris, London, and Madrid.

Step 4: Analyze what we saw and heard

After we visited folks at their offices, we organized and tagged our findings, and then looked for patterns. We discovered a lot of similarities across different roles or types of customers. For example, we had initially thought of our advertising agency customers as much different from our communications consultant customers; we think of agencies as big groups with lots of moving parts, and consultants as independent operators. But both sets of users manage multiple campaigns for many clients simultaneously, and thus use MailChimp in similar capacities.

At the same time, both our public relations and administrative assistant customer groups described themselves as too busy to learn all of MailChimp’s features; they hardly have time in their days to set up and send a campaign—much less learn and implement new functions.

Step 5: Share our findings with the team

When all was said and done, we ended up with five archetypical MailChimp personas: Fred, our “ideal” user based on our internal interviews; Andre, our developer persona; Eliza, our PR manager; Ada, the receptionist; and Mario, the studio consultant. These personas are meant to serve as guides as we design and develop MailChimp—who struggles with time and tasks? Who is quick to adopt advanced features?

We wanted to share these personas with the rest of the MailChimp crew in a way that’s easy to grasp at a glance. Our UX Director Aarron suggested we turn our personas into posters. Using tags from our interview analyses, Justin and Jasonfrom DesignLab went to work and created posters that now adorn the walls of MailChimp HQ. They’re hanging right by the espresso machine, where people from around the office congregate. Our hope is that the posters get employees talking about our users and their needs over a cup of coffee.

Some of the descriptions we used on the posters raised a few eyebrows around the office. “Isn’t ‘inefficient’ a criticism?” “What’s up with ‘profiteer?’” We strived for honesty in creating our descriptions. Profiteer is not a judgement—we have users who want to make buckets of money. How can we help? Likewise, inefficient is not a criticism—we have customers who need more hours in the day and acknowledge they could be working smarter. What can we do for them?

We realize that personas aren’t representative of all MailChimp customers; instead, we think of these personas as a snapshot in time of common users, knowing that their shelf-life is limited. In the short term, these personas were a big influence on our redesign process: we thought more about how teams collaborate and how individuals work in a multi-screen world. The personas also influenced our UX research team. Our five personas are a good start, but sometimes they could be the same person on different days, or there might be enough space to warrant additional, feature-specific personas to add a bit of nuance. They’ll help guide us as we consider new features and functionality for MailChimp users. Now, instead of wondering who really uses MailChimp, we can ask more pointedly, “Who would use this feature?”

 

 

 


 

  • Do you identify with any of the personas MailChimp developed?