Smashing UX Design: Foundations for Designing Online User Experiences

Top tips when designing for mobile

Getting mobile UX right means beginning with a clear task model and a content hierarchy. Then designing the layout. No different from desktop, of course, but the consequences for not doing so are far greater. Here are some of our top tips when working on your mobile design.

Use your design time creatively

Producing wireframe templates for a desktop, mobile, and tablet website may be too many to be practical. One solution to this is to produce wireframes for one size and then produce one or two templates for the other sizes—it is likely that the developers can extrapolate the additional templates. Alternatively, work straight into responsive HTML (yourself or sitting with a developer) once you have your prioritized content lists.

Design for touch

Mobile devices generally use different interaction styles. They often inhabit the world of direct manipulation via touch, rather than older WIMP (windows, icon, menus, pointer) interactions used by desktop computers. Although tablet computers have a tendency to be used in a much more desktop-like manner, their screen is still significantly smaller than desktop machines and their users will have different interaction styles such as swiping and pinching.

The content you can touch is enticing, but make sure you allow for the fact that human fingers are larger and more imprecise than a mouse pointer. Buttons and other hit targets should be large and not too close together. For any mobile device, hover states like drop-down menus can be problematic.

Allow for touch gestures. Provide large hit areas for fat fingers. Don’t rely on hover states.

Figure 33-2: Designs for the ShoeUX.com website on desktop and mobile

Efficiency is crucial

When designing for distracted users on small screens, with expensive and unreliable data connections, efficiency becomes crucial. Real estate, bandwidth, and the user’s attention may be in short supply, so getting straight to the point is essential. Strategies for improving efficiency include these pointers:

• Where appropriate, remove distractions and images.

• If navigation is curtailed, consider promoting search.

• Use information from the device to reduce data input. Location details are the obvious application here, but camera input is useful too, as hook into phone and e-mail functionality.

• For transactional mobile products, stored payment methods become hugely important. Would you happily get your wallet out on the bus on the way home? Probably not. Would you happily click on a Buy Now with the 1-Click button on Amazon or enter your PayPal password? Much more likely.

Not only do mobile products need to be more efficient, but they also need to feel simple. Simplicity is subjective and difficult to measure, but testing with users will give you a picture of how your product feels to use.

Optimize your forms

Spend time on optimizing your mobile forms.

• Align form labels vertically, so they don’t get lost on narrow screens.

• Data entry is trickier on mobile, especially with software keyboards, so remove unnecessary fields. Use device information to reduce data input, especially for location and addresses.

• Sensible default answers can save users a lot of data entry work.

• Don’t forget that the user’s view of a page may be further curtailed by the device’s on-screen keyboard.

• Appropriate interaction widgets can differ across platforms. For example, long drop-down menus and lists often don’t translate well onto small mobile screens.

• Make sure all form validation is friendly and actionable.

Test your designs

As with all UX, test your designs with real users and you’ll be sure they’re right (or understand how to fix them!) Chapter 5 covers usability testing in detail. Figure 33-3 shows usability testing mobile UX.

Figure 33-3: Usability testing mobile UX

With mobile, the question arises as to which devices to test on. Differences in browser chrome and physical buttons will impact how easy or difficult it is to press your buttons and links, as well as expectations of standard interactions.

• You may decide that you need the level of control obtained only by using your own device. For example, you may be testing prototypes that you need to install on the phone. Or you may need to connect the device to a computer for screen recording.

• Alternatively, you may ask test participants to view a live website on their own phones, potentially giving you a much wider range of test devices. If you are going to test users on their own devices, there is an option to ask participants to play with the products you want to test in advance. This could be your website or perhaps competitor apps.

• You may choose to include the device type as one of your participant recruitment criteria. For example, the organization may know that 90% of its mobile traffic comes from iPhone users, but that they want to target the growing Android audience. In this circumstance, you need to recruit a mix of iPhone and Android users to test.

The key with mobile testing is to consider the context. If the main use of your mobile product is likely to be in particularly stressed or distracting circumstances, a cozy, quiet test lab may not be the best place to test. Consider guerilla testing in more plausible contexts.

Persuasion principles to use when designing for behavioural change

There are a variety of different principles that are commonly used to influence user behaviour. This section identifies the commercial reasons they may be used and also typical user responses to them that we have observed in usability testing.

Social proof

Social proof is the phenomenon where our behaviour is influenced by the behaviour of others. Figure 31-1 shows a classic example of this principle in use online where the opinions of others are linked to products and services to encourage others to purchase.

Liking on Facebook (and on the wider web) is a modern manifestation of social proof that represents a specific piece of functionality that came from Facebook. This feature can be added to any website and allows people to add a like thus endorsing that particular content object. Figure 31-2 shows an example of how this is often used, note how the total number of people who have also liked an object is shown to reinforce its popularity (or unpopularity).

Figure 31-1: Customer reviews are a classic example of social proof

Figure 31-2: When users notice the number of Likes, they might feel more inclined to take notice of something

The following list summarizes the commercial motive behind applying the principle of social proof to your designs and how users are likely to respond to it.

• Commercial motive: Remove barriers to purchase.

• Ideal behavioural response: “Other people have bought it, so it must be good.”

• Typical user response: In the form of reviews within domains such as hotel and travel booking, user reviews from websites such as Tripadvisor form a hugely influential part of the planning and purchase of these products.

The future of social proof is when a digital product shows people you know from your social networks who have bought a product you are interested in. This is so effective because this acts as an endorsement from someone you know, as opposed to one from a stranger. This is already beginning to happen and represents one of the most effective methods for encouraging purchases online.

Reciprocity

If you give someone something they feel obliged to give you something in return. This is the principle of reciprocity. Figure 31-3 shows how this principle can be applied online.

Figure 31-3: Users are often happy to share their personal data in return for free material

The following list summarizes the commercial motive behind applying the principle of reciprocity to your designs and how users are likely to respond to it.

• Commercial motive: Offer something to the customer to initiate a reciprocal offer of something in return.

• Ideal behavioural response: “They are giving me a free download so I’m more than happy to give them my e-mail address.”

• Typical user response: This varies depending on how valuable the users think the item is.

Scarcity/ limited availability

When supplies are scarce we feel compelled to act fast and gather what we can before they run out. Scarcity has been always been used in retail to help to sell stock and is commonly used online as Figures 31-4 show.

Figure 31-4: Scarcity encourages people to buy before they miss out

The following list summarizes the commercial motive behind applying the principle of scarcity to your designs and how users are likely to respond to it.

• Commercial motive: Encourage customers to buy before it runs out.

• Ideal behavioural response: “I was going to shop around but they only have a few of these left and I would kick myself if I procrastinated and missed out on this great price!”

• Typical user response: This is typically quite effective if it is accompanied by a price that the customer feels is competitive. Some web customers have become skeptical of scarcity when they have visited websites subsequently to find time-limited offers unchanged from their last visit. The ease of access to competitors’ products can also reduce the effectiveness of scarcity-based persuasion approaches.

Authority, endorsement, and affiliation

People will generally follow the actions of figures of authority or those who have been decorated with endorsements that represent expertise and experience. Figure 31-5 shows an example of how this principle is often used online where a supplier uses endorsement and affiliation to reassure the customer that they are a safe bet to buy from.

Figure 31-5: Customers will look for reassurance when buying online

The following list summarizes the commercial motive behind applying the principle of authority, endorsement and affiliation to your designs and how users are likely to respond to them.

• Commercial motive: Customers are more likely to take advice from someone who they see as a figure of authority.

• Ideal behavioural response: “Ah, these guys are the experts; I’ll do what they suggest.”

• Typical user response: Users like to get advice from figures of authority and look out for indicators of authority, such as memberships of affiliated groups or official marks of quality such as Kite marks and Chartered status. These help users trust websites and products.

Trust

People take advice from people and companies that they trust. When people purchase goods online they look for reasons to trust that supplier to alleviate any concerns they may have about sharing their personal details. Figure 31-6 shows how this anxiety is often addressed on transactional websites.

Figure 31-6: Once customers trust a supplier they are more likely to repeatedly use them

The following list summarizes the commercial motive behind applying the principle of trust to your designs and how users are likely to respond to it.

• Commercial motive: Customers are more likely to buy from suppliers that they trust.

• Ideal behavioural response: “I trust this website to provide a secure checkout and to ensure that my purchases will get to me on time.”

• Typical user response: Users will often determine whether they trust a website from their first impressions of it, particularly when they haven’t heard of the brand before. Photos can also influence trust, particularly if people who are shown do not appear genuine—stock photography often suffers from this response. Users will also look for messages around security and return policies on e-commerce websites to help them to determine whether they trust the provider.

Problem mitigation

When users complete complex tasks online they will often have a series of questions or concerns they need to get answers to before they can proceed. In a brick and mortar shop, these will simply be asked but online we need to second guess these key user questions and ensure they are answered within the interface. Figure 31-7 shows an example of how a simple worry that the recipient of a gift will see the receipt can be addressed within a website copy.

Figure 31-7: Answer common user questions to remove potential barriers to purchase

The following list summarizes the commercial motive behind applying the principle of problem mitigation to your designs and how users are likely to respond to it.

• Commercial motive: Remove all reasons why the customer shouldn’t purchase from this site.

• Ideal behavioural response: “I was worried that the recipient of the gift would see the receipt, but it looks like they still send it to me.”

• Typical user response: There will always be typical barriers to purchase for every product. The trick is to understand what these are and mitigate them through well-placed messaging or site features and/or functionality. In this example, if you can reassure a customer of where receipts are sent, you are removing a potential barrier to purchase.

Up-sell/cross-sell related products

Up-selling is the attempt to try and get a customer to purchase a higher-priced product than the one they are considering. Cross-selling attempts to sell an additional product to the one a user is considering with a goal of increasing basket sizes and thus revenue. Figure 31-8 shows how this often manifests itself online and works well, particularly when a discount is offered for buying those two products together.

Figure 31-8: Make customers aware of products that they could buy to accompany their intended purchase

The following list summarizes the commercial motive behind applying the principle of up-selling and cross-selling to your designs and how users are likely to respond to them.

• Commercial motive: Increase basket size via the suggestion of similar products and higher-value products.

• Ideal behavioural response: “It looks like I need one of those to go with this.”

• Typical user response: The effectiveness of this approach depends wholly on the item that is recommended. Is the recommended item an optional accessory, an alternative, a vital accessory, or an unrelated item that others just happen to have bought?

Personalization

A personalized experience is likely to influence behavior because people will be more likely to be influenced by products, services and products that are tailored to their preferences. Figure 31-9 shows how personalized recommendations are often displayed to users online.

Figure 31-9: Accurate personalization can significantly increase online purchases

The following list summarizes the commercial motive behind applying the principle of personalization to your designs and how users are likely to respond to it.

• Commercial motive: Based on this person’s previous behaviour, you can give them related items that they will be more likely to purchase.

• Ideal behavioural response: “Wow, this is just what I wanted; how did they know that!”

• Typical user response: User responses are mixed depending on the accuracy of the algorithm that drives the recommendations. Some users get frustrated by websites that try to tell them what they will like and deliberately ignore these suggestions.

Tools and Techniques to Use When Designing for Behavioral Change

A detailed understanding of users is vital to best understand how you can influence their behaviour within the products you design. Check out Chapter 5 to learn how you can use usability testing to learn more about people’s behaviour and requirements.

Task models (Chapter 12) and customer experience maps (Chapter 13) give you a really detailed understanding of user requirements. Once you understand these requirements you can then decide which of these techniques will be the most suitable to result in the behavioural changes you are wanting to influence.

By: Jesmond Allen; James Chudley

Publisher: John Wiley & Sons

Pub. Date: June 18, 2012

Print ISBN: 978-0-470-66685-2

Web ISBN: 0-470666-85-4

eISBN: 978-0-470-97062-1

Pages in Print Edition: 446

No one is perfect but clearly, some are less perfect than others! Have a read through these common mistakes and make sure you don’t repeat them yourself!

Thinking of yourself as superior to your client

Regardless of the context of a supplier/client relationship, pompous people who proclaim to know everything annoy everyone! You may have been employed to be an expert but this doesn’t mean that you should treat your client as an idiot. It sounds obvious but we often hear of stories where suppliers have been sacked because clients have been left to feel stupid.

Lack of professionalism

Acting professionally is not just about delivering what you were asked to deliver. You will differentiate yourself as a supplier by doing the simple things well. You may have delivered a great set of wireframes but you will drive your client mad if you don’t return their calls or e-mails when they ask you questions.

Not answering direct questions with direct answers

Often as a UX supplier, you may feel that you are expected to know the answers to every question. It can feel tempting to try not to lose face and attempt to fluff an answer to a question you really know nothing about. Your client will respect you more if you tell them you will take that question away with you and respond when you have had time to think. This buys you time and results in your client getting a useful response and you’ll probably learn something too.

Not getting to know your client

A simple question to a client such as “show me what websites/apps/software/companies. you love and tell me why” can uncover a lot about what makes them tick. This knowledge can be put to good use throughout the project and your client will enjoy telling you about what they love. This relationship building is critical and the knowledge it uncovers will make getting sign-off a great deal easier.

Lack of responsiveness

Your client doesn’t know (or often care) how busy you are. You may justify not getting back to a client straight away because of your bulging inbox or deadlines you may have for other clients. Make sure you acknowledge a client's request and let them know when you will get back to them if you can’t respond immediately.

Failure to deliver

If you don’t deliver what you said you would when you said you would, be prepared for hiding. If you run into trouble and think you can’t deliver, speak to your client and agree on what you will do instead. When things start to go wrong, a failure to communicate will quickly make a relationship go from bad to worse. Take the initiative; be honest and deal with the issue before it becomes a monster!

UX designers are expected to be able to provide all manner of specific UX services and a rapidly growing pool of designers is getting better at this all the time. You can differentiate yourself as a supplier of UX by taking the time to provide a better service to your clients and these tips show you how.

Spend time understanding the business properly

Too little time is spent on UX projects getting to properly know the intricacies of the business. You must properly understand the business model before you start suggesting how it should be changed. Make sure you ask those “stupid” questions and unpick those acronyms. This understanding of context will make your recommendations more useful.

Understand what your client is really trying to achieve

There are likely to be some secondary objectives to a “UX” objective, such as improving conversion or reducing customer churn. What will a successful project mean to your client? Who will they be trying to impress? Consider how you can make your client look good and what else your project could deliver for them.

Understand the relationship

When we work for UX clients, the relationship is often peer-to-peer and we learn from one another. When our clients do a different role from us we are often the teacher and they are the pupil. By identifying the nature of the relationship early in the project you can tailor everything that you subsequently do to suit.

Be prepared to own the relationship with the client

Despite working with project managers and account managers, as the UX designer, you will be working very closely with the client. It is the quality of your work that will determine whether the project is a success. You might not feel that this is your role but in reality, this is exactly the case. You will need to develop both account and project management skills regardless of whether you see yourself as having those responsibilities.

Get to the heart of the business

To understand a business properly, you need to see the business in action. Go to the stores where the deals are being done. Go to the call center and listen to customer calls. This experience will give you a true feel for the nature of the business and what is and isn’t working. These are the experiences you remember and learn from, so get out there and get your feet wet!

Agree on what you are going to do and do it

At the beginning of the project, check whether there are any preferred ways of working with suppliers. If they do use them, don’t reinvent them. Agree on what deliverables your client needs and when they need them. Then just deliver what you said you would when your client wants it; simple!

Take time to sit back and review your progress

As a UX designer, you will be up to your eyeballs in the detail. This makes stepping back and reviewing the bigger picture, such as project progress, really difficult unless you make time to do it. This also offers up a great opportunity to have an open and frank chat with your clients to ask whether you are delivering what they need or whether you need to change tack.

What should you avoid when designing forms?

Harsh Error messaging

From a system point of view, there may have been an error. The contents of a form field may be empty when it should be full, or it may not match the required format. However, all the user has done is misunderstood something, mistyped something, not seen a form element, or used a different format to the one required by the system. In short, they have likely made an understandable mistake. If someone you’re talking to you in real life makes a small slip-up, how do you react? Do you start shouting “Error! Does not compute!” or do you gently point out what you need to know and perhaps suggest alternative answers? A form on a website constitutes part of a conversation between an organization and its users. Do you really want to be shouting at your customers?

Of course, it is necessary to let users know that their form input does not match the system’s needs, but there are plenty of ways of doing this without being scary and aggressive. Here are a few top tips:

• Be flexible with data formats. Why throw an error message if a user puts spaces in their credit card number?

• There’s no need to describe anything as an “error.” How about a nice polite “please check the following form fields”?

• If possible, provide clear inline validation as the user progresses, rather than saving it all to the end

• Use helpful messaging. There’s no point simply repeating the field label. It is much more useful to suggest acceptable alternatives, such as “please include an @ symbol in the e-mail address” or “the date you have chosen, 23 January 2001, is in the past; please choose a delivery date in the future.”

Every question has a cost—the more questions there are, the lower the form completion rate. It’s that simple. The more questions there are, the more complex your form looks. The more compulsory questions there are, the more your users will question why you need the data. We always recommend reducing the number of required questions to a minimum. This recommendation may not sit too well with a business’s marketing department—they want to collect all the user data they can. However, you may well find that the removal of required questions increases the overall level of form submissions and hence the overall amount of accurate data available to the marketing people. Additionally, users are more likely to lie if they don’t like the questions they are being asked.

One manifestation of question overload is enforced account creation. A business wants to gather and store user data as part of their online checkout process, so they ask all users to create an account in order to make a purchase. This strategy is highly likely to backfire, as it is asking users to enter a permanent relationship with the business far too early. This issue is discussed more fully in Chapter 24 on checkout UX.

Too much legalese

This one comes under the heading “forms are a conversation with your users” again: would you start spouting jargon in the middle of an actual conversation with someone? No. You would explain what they needed to know in their own language, alongside giving them any contracts or other legal agreements to read. There is no reason why websites and apps can’t do this too.

Smashing UX Tools and Techniques for Creating the Best Forms

The best way to be certain that your digital forms are understandable and usable is to run usability testing on them. You can do this on live products, wireframes, or even paper prototypes. Try to mimic actual usage scenarios, be that on a desktop, mobile, or tablet device. Look for whether the form’s language mimics that of users. There’s more on usability testing in Chapter 5.

If there is an existing product, look at any analytics for the form you are redesigning. Are there any pages with a high dropout? Are there any pages with high levels of errors? What are the most common mistakes in fields with high error rates? For more on analytics, see Chapter 8.

If you cannot run usability testing on an existing form, do a quick expert review (see Chapter 10). One good method is to actually treat the form as a conversation—work with a colleague and role-play the form. One of you takes the part of the system and the other the part of the user. This may sound silly, but it’s a brilliant way of understanding the tone of the conversation embodied by the form:

System: “Name?”

User: “Do I need to include ‘Mr’ I wonder?”

System: “Name?”

User: “OK, Joe Bloggs”

System: “Error!! No title”

User: …

If your product is likely to be used outside your home country, you should make sure that the form is localized correctly. We recently encountered a Contact Us form that had been translated from English to Chinese. The name input fields were translated but not localized: users were asked for Title, First Name, and Surname, which is meaningless for Chinese users. There’s more on this in Chapter 32 on designing for internationalization.

If your product is likely to be used on mobile devices (and this is increasingly a hygiene factor for web projects), take a look at Chapter 33 on designing for mobile.

Consider the following issues when designing your forms.

A form is a conversation with your users

A form is a conversation with your customers; be nice to them.

A form is a conversation with your customers; be nice to them. Use friendly, simple language, in a tone that’s appropriate to your business. This is how you write the rest of your content, why stop at your forms? Forms that are terse or that employ too much developer-speak will be off-putting to users.

A pleasant form will help users trust you and become happy to part with their precious information. Don’t make them feel that you’re likely to spam them, or that you’re trying to trick them into agreeing to something you don’t want. Double negatives and baffling legalese are a big problem here. Adverts can be unsuitable.

To be really sure that your forms are initiating a friendly conversation, you need to run some usability testing (see Chapter 5). Watching real users interact with your form will tell you if they understand the questions and can easily recover from any errors. It will tell you if you are asking for the right amount of information and if you have laid it out correctly.

Allow saving if necessary

If your form requires information that a user may not have immediately to hand (such as passport numbers, license details, other people’s personal information, and more), list this at the beginning of your form. If possible, allow users to save their progress and come back later with additional information.