Newer posts are loading.
You are at the newest post.
Click here to check if anything new just came in.

October 22 2013

13:30

Using Dark Patterns for Good

It was so frustratingly difficult to find the “sign out” button on Gmail that my father finally gave up and left himself signed in forever. Independent UX consultant Harry Brignull found the iOS ad tracking so difficult to turn off that he described it as “hidden.” And just last month, author Paul Brooks called out the company Twifficiency for neglecting to tell users that they were spamming their followers just by signing up.

What do these all have in common? They’re dark patterns, an astonishing—but nonetheless surprising—way to learn more about good design.

This situation actually affected me, recently. One day I received one of those chain emails we all receive—you know the kind. This one was from Goldstar. Having realized this was a chain email, I scanned along the bottom in search of an unsubscribe link. Fortunately I found one, but after clicking the link I saw that the page it linked to asked me to sign in. “Sign in,” I thought, I never created an account in the first place! I provided my email address to buy a ticket, but I never entered a password. So I clicked “forgot my password” on the next screen and was soon informed that there was no account linked to my email address.

I was unable to unsubscribe.

From an analytics perspective, this is certainly a smart decision—Goldstar likely has a very low “unsubscribe” rate—but as a user it’s beyond frustrating. Today, Goldstar’s emails find their way to my Spam box. How could the company have leveraged the same brilliance it took to fool me to instead make me a loyal customer?

Dark patterns

To briefly recap, a dark pattern is any interaction that benefits a company at the direct expense of the user experience. UX designers and researchers Harry Brignull and Mark Miquel have even founded a Dark Patterns website, where they highlight companies doing things they shouldn’t be doing (or, at least, things their users would prefer they didn’t do). The site’s about page states, “[our] aim is to spread awareness about Dark Patterns, and to name and shame sites that use them.”

The dark patterns listed on Harry’s site range in severity. Some are mildly annoying, such as the MBNA credit card that confusingly asks users to confirm both that “Please DON’T contact me” and “Please DO contact me,” while others are downright unacceptable, such as Pixmania, which actually adds products to customer’s shopping carts without asking!

Darkpatterns.org refers to the interaction of pre-checking an item as a version of “Sneak Into Basket.” For example, on Pixelmania, an expensive extended warranty is pre-selected, which benefits the profiting company, but not the user, who likely didn’t intend to spend an additional £21,47.

A good history… corrupted

But as a content strategist, I try to keep in mind that words—or patterns, as the case may be—are neither good nor bad. Rather, they’re powerful or weak. Shouting “Fire!” is powerful, for example. When someone shouts “Fire!” in a crowded theatre, they might save lives or they might cause unnecessary panic. The power that comes from exclaiming the word “fire” can be used for good or evil.

Similarly, the concepts behind most dark patterns are powerful: most can be found in negative as well as positive user experiences. Microsoft Word offers a positive user experience, for example, by not only asking if the user wants to save changes, but also by highlighting “Save.” This is an interaction design pattern known as a smart default: for a busy user who hits the Enter key before reading the pop up, Microsoft’s thoughtfulness is the only thing stopping them from losing hours of work.

And Amazon uses the same interaction to allow users to enter a “default” credit card. When the user enters new credit card information, a popup appears asking “would you like to make this the default credit card?” “Yes” is highlighted. It doesn’t hurt the user if he accidentally makes this his default card …but it doesn’t necessarily help either. This means the same interaction that yielded a “positive” user experience in Microsoft Word creates a “neutral” user experience on Amazon.

Finally, the same interaction design pattern has its equivalent dark pattern. For example, most companies suggesting users to sign up for a newsletter are not doing it to help the user. In the newsletter sign up for a Boston-based rock gym, below, “Yes” is highlighted—as it was in Microsoft Word—but this streamlines the business’s goal, not the user’s.

What’s to be done?

As with most areas of life, the first step to “fixing” a problem is acknowledging you actually have one.

The Dark Patterns website has successfully shamed at least a few culprits into cleaning up their act. In December of 2010, after being “named and shamed” on darkpatterns.com, geni.com updated their unsubscribe process. Goodreads.com also responded positively, updating copy to make their “share” option less likely to result in spam.

From a designer standpoint, however, the consensus is out. UX Strategist Gary Bunker, for example, sees all persuasion as a road to evil. He proposes a code of conduct that would stop all UX professionals from working on sites that used UX techniques to create dark patterns. Paul Brooks expressed similar sentiments last month, reminding companies that happy users become loyal customers, and that dark patterns aren’t the only way to be successful. On the flip side, Chris Nodder, author of the book Evil by Design, believes that morality depends on the designer’s intention. He says that “it’s ok to deceive people if it’s in their best interests,” and considers persuasive design a kind of “white lie,” as opposed to the evil intent of dark patterns.

Using our powers for good

I recently reviewed the copy for a client’s website that employed the “bait and switch” dark pattern. Where they advertised “free cars!” users found themselves facing fees. What was so powerful, though, was the word choice: By considering what they could actually offer for free, such as “free car advice!” I was able to maintain the power of offering something free without, importantly, lying to users.

In her UXPA 2013 presentation, Ahava Leibtag explained how content strategy is concerned with two issues: aligning our content with our business goals and helping users accomplish their own. Content Strategy and UX Design have this in common, and that’s the crux of the issue with dark patterns: dark patterns align content/interactions with business goals, without helping users accomplish their own. Therefore, the key to learning good UX from dark patterns is implementing them to advance the user’s goal. (Prerequisite: identify the user’s goal.)

My advice to interactions designers, then, is to consider employing a dark pattern in your next wireframe. Later, replace it with its equally powerful, positive counterpart. For example:

Ask twice

There are two reasons the “trick question” dark pattern works. As the MBNA credit card discovered, asking the same question twice means that users have to answer it twice, and leaving the answer preselected means users are more likely to leave one of the answers checked in the direction the company wants.

Make it user-centered: Asking the same question twice makes it twice as likely that users will do the “right” thing, whether that is saving their work, staying on the site, or creating a secure password. Use this tool wisely — there’s no reason to ask users twice if they want to change a text color, for example, but when it seems important to ask a question twice, make sure the question is phrased the same way both times (requesting the same response both times), and the preselected response is the one that benefits the user.

Hide unimportant information

Hidden costs is a frequently used dark pattern on airlines and cell phones. People pay $25 extra for insurance they didn’t realize they had selected, because they only pay attention to items highlighted in the user interface.

Make it user-centered: While cost is important, there is plenty of information on a site that is not, and only serves to distract. Take a page out of the dark patterns book and only highlight useful information.

Add to the shopping cart, helpfully

The “Sneak into Basket” dark pattern is reminiscent of a three-year-old on a shopping trip who helpfully adds candy bars, cereals and anything-else-within-reach to Mommy’s shopping cart. If Mommy doesn’t pay attention at the register, she’ll end up with far more than she planned on buying. But the three-year-old is legitimately trying to help.

Make it user-centered: Amazon already does a user-centered version of this. Instead of adding items to the cart, they advertise related items immediately after something has been added to the cart. Alternatively, if you are absolutely certain that every iPad purchased needs an iPad cover, make it obvious. Let users know how the auto-additions are helping them out, and give them the option to stop “helping” in the future. Most won’t opt out; the possibility of auto-additions adding something the shopper might have forgotten is too delectable to pass up.

Spamming, or sharing?

Friend spam is a highly controversial dark pattern, due to the feeling of invasiveness caused by an application messaging family and friends. What’s worse, friend spam acts like a virus, emailing, tweeting, or Facebook-status-updating without permission. The benefit for the company comes from the promotional (“viral”) value, but the icky feeling it causes users outweighs the benefits.

Make it user-centered: The problem with friend spam is that the application doesn’t ask for permission. The easy fix is one, preselected question: “Would you like to tell your friends and family about us?” Other options include the ability to customize a message to friends and family, or the ability to select which contacts should be added to the auto-email. Anything that provides choice is helpful in this situation.

Light the way

Dark patterns are successful precisely because they’re founded on good interaction design patterns. The best way to learn from them, then is to start with a dark pattern… and remove its darkness.


The post Using Dark Patterns for Good appeared first on UX Booth.

August 20 2013

13:30

Has the Recession Taken Your Experience to the Dark Side?

When a new milkshake bar opened in my local shopping mall, I was very excited; I went right over and ordered my favourite flavour (coconut, of course). The cashier responded “Would you like a regular size?” and I agreed. I paid what I considered a high price for a medium-sized milkshake and, as I left, I noticed the sizes available weren’t “Small, Regular, and Large” (as I might have expected), but rather “Tiny, Small and Regular.” Realizing I was duped, I lost my incentive to return.

Unsurprisingly, the milkshake bar isn’t there anymore.

It’s been a tough time for businesses lately. The global economic downturn has led many consumers to tighten their belts and part with their cash more selectively. This has naturally driven companies to focus on maximising profits wherever possible in order to provide a strong return on their investment. That’s all well and good, of course, but sometimes the hunger for short-term results can happen at the expense of other “non critical” factors – as was the case in the story of the milkshake bar, above.

This conundrum has led me, a self-described user experience geek (UXG), to more closely examine the relationship between user and business objectives. Specifically, I sought answers to the following questions:

Is poor customer experience a necessary evil in order to meet business objectives?
What is the optimal way to design products or experiences that deliver a return on investment in both the short term and the long-term?

If I could find them, the answers to these questions could help businesses better rationalize the difficult choices they’d make during the recession. What follows is my journey. We’ll begin by observing a positive version of the “milkshake bar” experience. Next, we’ll discover how deceptive approaches translate to on the web. We’ll finish with a review of the habits of highly effective user centered designers – habits which are always applicable, recession or otherwise.

A favorable interchange

On any given Thursday you’ll find me at my local McDonalds. There, you might observe the following exchange:

Me: Hi, I’d like a Big Mac please.
My buddy at McDonald’s: Would you like to make that a meal?
Me: Yeah, sure.
My buddy at McDonald’s: Would you like to make that a large meal?
Me: No, thanks.

In this scenario, the short-term business objective is to sell a meal and my interaction with the sales clerk meets that objective. The experience is also good for me as a customer, because I get exactly what I ask for. The McDonald’s salesman first understands my needs and then offers a relevant upsell. When I reject the large meal (a higher short-term objective for McDonald’s), the salesman moves on, ensuring that I meet their long-term objective by returning as a customer (side effects may include high cholesterol). This straightforward, contextual approach – a combination of easy-to-understand terminology and relevant propositions – is a sustainable way to attract returning customers and build a reputable brand.

And the same logic applies to our websites. Amazon.com does a great job, for example, of offering two, relevant upsell opportunities.

I might not take the bait, but the option is both relevant and easy-to-understand.

So, is a poor customer experience a necessary evil in order to meet business objectives? No. Companies such as McDonald’s and Amazon prove that by valuing customer service and user goals over sales, companies are actually able to more successfully achieve their own goals (assuming those goals include retaining customers).

Dark patterns

In extreme cases, some companies completely disregard the user experience in favour of meeting business objectives. UX designer Harry Brignull calls these interactions “dark patterns.” From his site: “A dark pattern is a type of user interface that has been carefully crafted to trick users into doing things, such as buying insurance with their purchase or signing up for recurring bills.” So why are dark patterns used? Simple: they get short-term results. Over the long-term, however, users feel deceived, cheated and tricked – and they’re not afraid to share these opinions online!

Celebrated author Tim Seidell suggests that “For every action, there’s an equal and opposite reaction. Plus a social media overreaction.” And Twifficiency is a great example of this. Launched in 2010, the app “went viral” in a matter of days due to its accidental use of a dark pattern in which users automatically shared the app to all of their Twitter followers. The early growth was short-lived, however, as it was soon overshadowed by the exponential amount of negative attention it received.

Prioritizing appropriately

Given the connection between positive user experiences and long-term business objectives, why doesn’t every designer put user goals ahead of business goals? Because, as management guru Peter Drucker explains, “what gets measured gets managed.” In other words, some companies believe it is easier to track short-term sales than long-term customer retention.

When companies focus on driving short-term revenue and increasing short-term profit, the emphasis is on improving conversion rates or profit per visitor rather than helping users achieve their goals. The happy medium falls into what author Stephen R. Covey calls “Quadrant 2.” In his legendary book 7 Habits of Highly Effective People, Covey explains that Quadrant 2 contains tasks that are important but not urgent, whereas tasks that are both important and urgent are considered “quadrant 1. ” These lead to a business that’s constantly “fire fighting.”

Four business postures

Adapting quadrant 2 from Covey’s model maps business goals and user goals across two axes.

In Quadrant 1 a company focuses only on the urgent, short-term business goals, but not the important, long-term user needs. They might see short-term success, at the expense of unhappy, deceived users (think the milkshake bar). In Quadrant 2 a company focuses on the important user-needs as well as how they impact the business goals. Here user needs are met and, in turn, business goals are also met (think Amazon). In Quadrant 3 both the user needs and business goals are ignored (and we all know what happens there). Finally, in Quadrant 4, user goals are met but business goals are ignored. This is nicknamed “daydreaming” because, really, there’s no business model here at all.

Habits of highly effective designers

Because quadrant 2 presents the optimal way to design experiences, the first step of any design process is to know what the business objectives are and how they connect to user needs.

However a company’s designers currently focus on things, here are seven ways to ensure they move towards “quadrant 2.”

  1. Make a decision not to employ dark patterns. If the client disagrees, remind him/her of the long-term goals and the value of repeat business compared to single-visit exploitation. If they can’t see the value, drop the client.
  2. Keep your eyes on the prize. Design decisions should be driven by business objectives. Always review the objectives before development or design meetings, and keep them posted somewhere obvious for the whole team to see.
  3. Make the link between the UX and profitability. Discuss the value of positive user experience with the client early on. Make sure both sides agree that resources spent on the user experience are resources well spent.
  4. Get to know the user. Find out what your users’ goals are and what motivates them. User interviews and focus groups can provide invaluable insights.
  5. Work with user goals, not against them. Instead of tricking users into following a predefined path, help them to see why that path is the most attractive option. Use contextually relevant content to align their goals with those of the business.
  6. Increase the type of measurements you do. Don’t just measure the obvious,such as whether a new development impacts the conversion rate. Measure the effects, too. Are users more likely to return if they have a favorable experience? Will users recommend your service to a friend?
  7. Finally, be data driven. Analyse objectively what is and isn’t working. Iterate when needed and move forward in the direction the data takes you, not the direction you were hoping it would take.

By practising the habits of highly effective UX designers, we move towards “Quadrant 2,” a place where happy clients and happy businesses can coexist. These habits set us up for recurring revenue from empowered users. There is no need to go over to the dark side and leave behind the principles of user experience – even in a recession.

Ok, I’m off to McDonalds. I think I’ll order a milkshake, but probably just a regular…


The post Has the Recession Taken Your Experience to the Dark Side? appeared first on UX Booth.

Sponsored post
soup-sponsored
09:01

Soup.io will be discontinued :(

Dear soup.io fans and users,
 
today, we have to share very sad news. Soup.io will stop working in less than 10 days. :(
 
It's breaking our heart and we honestly tried whatever we could to keep the platform up and running. But the high costs and low revenue streams made it impossible to continue with it. We invested a lot of personal time and money to operate the platform, but when it's over, it's over.
 
We are really sorry. Soup.io is part of the internet history and online for one and a half decades.
 
Here are the hard facts:
- In 10 days the platform will stop working.
- Backup your data in this time
- We will not keep backups nor can we recover your data
 
July, 20th, 2020 is the due date.
 
Please, share your thoughts and feelings here.
 
Your Soup.io TEAM
Reposted bydotmariuszMagoryannerdanelmangoerainbowzombieskilledmyunicorntomashLogHiMakalesorSilentRulebiauekjamaicanbeatlevuneserenitephinangusiastysmoke11Climbingpragne-ataraksjisauerscharfArchimedesgreywolfmodalnaTheCrimsonIdoljormungundmarbearwaco6mieczuuFeindfeuerDagarhenvairashowmetherainbowszpaqusdivihindsightTabslawujcioBateyelynTabslaensommenitaeliblameyouHalobeatzalicexxxmgnsNorkNork

May 07 2013

13:30

Intention vs. Interpretation: What Matters?

Both interaction designers and information architects want to design objects with a singular meaning. It’s a noble, albeit impossible goal. The best we can hope for is to create more consistently meaningful experiences. To do that, designers must better understand the interplay between designer intention and user interpretation: the ways that we can influence – but not dictate – user interpretation.

Consider the design of a voice-based interface. Because users can say what they mean in any number of ways, there are many situations for which designers cannot account – especially in the first iteration. Designers proactively create a set of interactions that users might accomplish, but the diversity of “common” speech patterns prevents a more prescriptive, task-oriented solution.

Clearly those designing voice-based interfaces intend for users to accomplish something. So how might designers shape their interpretation? To better answer the question, let’s examine some problems encountered defining “design” and then borrow some thinking from literary studies. Finally, we’ll explore how these considerations affect the everyday work of information architects and interaction designers.

Intention

The word “design” is problematic. Colloquially, we tend to think of design as the purposeful creation of some thing – a physical object, an experience, or even a conceptual argument – whereas etymologically, we can trace “design” back to Latin. There, it connotes purpose, choice, and designation.

If we push the etymological boundaries a little, we might think of it as the deification of an object (de-), or the association with god-like qualities. The designer is an intelligent creator that crafts things according to his/her intention. A final perspective points to the designer as someone who sets meaning elsewhere. Intention is so powerful here that the designer does not even consider variation in interpretation; the designer’s intention is the final meaning.

The problem with all four of these interpretations is that they are incongruous with the principles of user-centered design. User-centered design holds that user experience – to say nothing of designer intent – is the most important element of a design system.

Interpretation

In order to reconcile the disparity between intent and interpretation, it’s useful to borrow from literary critics, those with a long history of interpreting things (albeit from a textual perspective).

In 1946, critics W.K. Wimsatt and Monroe Beardsley published a paper called The Intentional Fallacy arguing that “[the] intention of the author is neither available nor desirable as a standard for judging the success of a work of literary art.” Instead, they believed that the only reasonable factors that could serve as the basis of critique were direct-textual material (e.g., the work itself), indirect-textual material (e.g., inferences), and contextual material (e.g., history). In other words: a literary text should be judged on its content, its merit, and history’s perception – not intent!

Contemporary HCI researcher Clarisse Sieckenius de Souza stands on the other side of the fence. Working within the realm of semiotic engineering, she sees a direct relationship between a designer and user, one facilitated by a “designer deputy.” To de Souza, a designer communicates intent through an interface. The user then interprets that interface to accomplish certain goals. It’s a one-way conversation.

Although their opinions diverge, both Wimsatt/Beardsley and de Souza’s are both “correct.” How can that be? The former – a critic’s perspective – concerns works of art, whereas the latter – a researcher’s perspective – deals with objects of utility.

Elucidation

For better or for worse, web design provides avenues for both art and utility. There are certainly elements of a bank’s website that are more artistic than utilitarian, for example. And, as such, we need to recognize that the interplay between designer intent and user interpretation is a spectrum rather than a dichotomy.

Don Ihde, a philosopher of science and technology, ruminates on this in his essay The Designer Fallacy and Technological Imagination (2008):

[T]he designer fallacy is ‘deistic’ in its 18th century sense, that the designer-god, working with plastic material, creates a machine or artifact which seems ‘intelligent’ by design – and performs in its designed way. Instead, I hold, the design process operates in very different ways, ways which imply a much more complex set of inter-relations between any designer, the materials which make the technology possible, and the uses to which technologies may be put. Ultimately I am after a deconstruction of the individualistic notion of design which permeates both the literary and technological versions of the fallacy.

Ihde goes on to suggest that the most interesting use cases are the unanticipated ones. Designing a utilitarian system demands a level of intentionality, a very narrow definition of success. Art objects, however, have a more ambiguous aim. They’re designed such that emergent properties create results, which in turn creates more emergent properties, more results, and so on.

As designers, we must accept that intention, at the very least, cannot be the central focus of a successful design output. Any object is always more than merely an object. Context gives it meaning. While our intention may affect the “in the moment” relationship to an object, later examination leaves much more room for emergent meaning creation.

Care

Because meaning created through emergent systems has the potential to regenerate itself ad infinitum, those of us designing experiences must exhibit care for how intentionality effects that meaning thusly created. I emphasize care, here, in a manner close to the way Heidegger might – as for him, concern is not the same as keeping in mind, but rather entails a specific way of being. Interface designers must concern themselves with both intention and interpretation.

Designers create systems of meaning. Artifacts are only physical manifestations of our intent. Once users put those manifestations to use, though, our original intent is no longer relevant. Associated meaning is now part of peripheral thinking about these objects.

Insofar as the designer can influence the creation of meaning after the initial interaction, we must think of the design object not as the end of our process but rather, in a strange sense, only the beginning. No interface – no object whatsoever – is valuable in-and-of itself. Value is derived from user interpretation before, during, and after the interaction.

Application

As the complexity of technological systems continues to grow, designers need to consider novel, long-form approaches to their design problems. Considering both intention and interpretation throughout the design process provides clients a more well-rounded approach, one that blends theory-based hypotheses with practical validation (or invalidation).

To that end, we might consider the following questions:

Intention

Giving more consideration to our intentions as designers puts us in a better position to create their manifestations.

  1. What are we assuming?

    Intention is shaped by the assumptions we make. Being aware of these – and working to validate (or invalidate) them – helps ensure that our intentions as a designer do not conflict with those of our users.

  2. What’re our design principles?

    Design principles frame a team’s approach. Enumerating goals, listing requirements, and brainstorming user stories are all statements of intent. Clarifying these helps us focus on defining aspects of the solution rather than better framing the problem.

  3. What does our work affect?

    Even when creating something relatively simple, like a landing page or the information architecture for a small website, the things we design have an impacts far beyond their initial experience. Think in terms of systems. How is the element we’re designing affecting all the other elements in the system?

  4. What else effects our user’s perceptions?

    No design solution is an island. As user-centered design (and the emergence of an experience-driven economy) has successfully proven, solutions conceived without consideration of context rarely succeed.

    Context, especially the boundaries between them, heavily influences interpretation. Knowledge of context helps mediate the ambiguity that different environments create.

Interpretation

The next step – often overlooked – is to examine how users interpret those manifestations; to consider the direct, indirect, and contextual interpretations of our work.

  1. What is the direct textual material we’re designing?

    These are the “content” comprising our interfaces: physical objects, screens, images, buttons, text, audio clues, etc. Look at the actions they afford. Do they match our design intentions?

  2. What is the indirect textual material?

    How do users interpret our objects? What inferences are they making? Are they interpreting the artifacts in the same way as we are? Alternate, unintended interpretations are not necessarily a bad thing; they can often lead to new opportunities and angles.

  3. What are the contexts in which this product is used?

    How are contexts different? What are the effects of these differences? Think about your design object not as a static thing but rather a piece of a larger system of meaning, one that is constantly in flux. Objects are interpreted in vastly different ways according to the contextual spaces in which they exist. Contextually-aware design works to understand the differences between situations—cognitive, geographical, emotional, informational, etc.—and create products that fit within these differences. A thorough understanding of intention and interpretation is necessary to achieve this end.

But what does it all mean?

The systems we design are becoming increasingly complex. As technology continues to afford new behaviors and incorporate new sets of data, designers have a multitude of potential solutions at hand. Advances – such as context-aware systems, natural user interfaces, and pervasive computing – will change user- as well as designer-behavior. With new intentions and many-more interpretations to consider, designers have a responsibility to re-examine this critical divide.


The post Intention vs. Interpretation: What Matters? appeared first on UX Booth.

April 30 2013

13:30

Finger Tips: 3 Quick Ways to Retrofit a Site for Touchscreen Use

The future is now. Market-analysis firm IDC predicts that sales of tablet computers will exceed their desktop counterparts this year, which means that those of us not designing with touchscreens in mind are falling behind. Fortunately, it’s not too late. By addressing some key areas of our site, the team at Cars.com has improved the mobile experience of our site in a short amount of time during our ongoing redesign.

It’s no secret that responsive design helps us develop a single site to serve smartphones, tablets, and desktop displays equally well. But the thinking that goes into a good responsive design? That takes time. How might designers go about making a site tablet-friendly right away?

This is exactly the problem we currently face at Cars.com. While my team is busy considering all of the elements that make up our site (content first, kids!) and how they might be handled in a responsive manner, we’ve wanted to make some quick changes that might immediately impact visitors.

People visit Cars.com to find vehicles for sale, read editorial content, and browse consumer reviews. With these things in mind, we’ve prioritized our short-term changes by focusing on three, key areas: content, layout, and forms.

Content

As Elaine McVicar recently reminded us: when it comes to touchscreen interfaces, content is navigation. This has serious implications for Cars.com – specifically, our photo galleries and content-promoting carousels. Fortunately, mobile luminary Brad Frost has a fantastic article weighing in on this particular element.

Our takeaways? We need to make sure our carousels are swipeable, as swipe gestures allow touch-based users to more-intuitively move through the panels. Next, when it comes to galleries with thumbnail strips, we need to ensure people can swipe through thumbnails. We can’t – or, rather, shouldn’t – exclusively rely on previous and next arrows.

The examples below show what a difference these considerations can make:

The main content carousel on the BBC homepage does not recognize swipe gestures. You have to tap the right or left arrows to navigate through the content or let it play like a slideshow.

The carousel on the Cars.com homepage has a much larger area for tablet users to interact with than the one on the BBC homepage.

While accounting for large swaths of our content (and navigation), we found that we also needed to pay attention to the way in which that content presents itself. This meant considering layout.

Layout

Fingers are horribly inaccurate as pointing devices. As a consequence, Apple, Google, and Microsoft all provide guidelines for the proper sizing of tap targets. But because pixel and point sizes are variable (a topic beyond the scope of this article), Steven Hoober suggests that physical sizes be used when thinking about mobile layout.

The team at Cars.com has taken this to heart – I personally decided to keep a ruler at my desk. This allows me to measure distances right on the glass and, aside from testing with real people, provides a great way to get a feel for whether tap targets are too small or too close to one another.

Compare the left-hand navigation in the examples below from Macy’s and smart. Which would you rather use?

Macy’s faceted browsing has tap targets that are too small and too close together for tablet users to navigate easily without first zooming in. This is common in eCommerce websites in which the design predates the proliferation of tablets.

smart’s navigation design includes larger tap targets and better spacing between the targets.

Having considered both content and layout, in general, we figured: what’s next?

Forms. That’s what.

Forms

Forms do the “heavy lifting” on Cars.com. They’re one of the main ways users tell us what they want. And let’s face it: while forms can be difficult to use on desktop computers, they pose an even bigger problem on mobile devices with their small, virtual keyboards.

When it comes to forms on mobile, otherwise simple changes can go a long way towards improving usability. Luke Wroblewski’s best practices ring true:

  • Use the fewest number of form fields necessary to achieve your business goal.
  • Reduce the number of fields that require typing. If there is another way to get the information other than the keyboard, use it. I call this mindset “more tap, less type”.
  • Use native device capabilities. The GPS, compass, accelerometer, camera, address book, and native social networking apps can all provide data so people don’t have to enter it manually.
  • Let people type whatever they want. Allow people to enter values like phone numbers with various special characters even if you’re just going strip them out afterward.
  • Whenever possible, retain form contents in error states. Don’t make people retype their whole email address on a virtual keyboard because they forgot the period.

Simply by redesigning our forms against these guidelines, we increased their overall utility. What’s more, redesigning our forms also gave us a chance to reconsider our form aesthetics.

Layout

As with our content, the larger our forms’ inputs, the easier they are to navigate. Increasing the padding around form elements as well as making some of them taller and wider makes them more navigable.

Compare the previous version:

Form elements are too close for comfort on an older version of the Cars.com dealer locator form.

To the new version:

The redesigned form increases the size of the form fields and adds more spacing between elements. This reduces people’s likelihood of tapping the wrong element.

Notice the difference? Next, we use a different background or border color to indicate focus. This isn’t groundbreaking, of course, but it does provides a visual confirmation that the characters a person types will appear in the correct place – and differences like this add up.

What’s more, the CSS required to do this is super simple:

input:focus {
  background-color: #ffffe0;
  border: 1px solid #f00;
}

Finally, we looked at context-specific keyboards.

Get specific

Context-specific keyboards offer users a subset of the traditional keyboard layout to encourage completion of a specific task. For example, a “number” keyboard provides number keys (as well as commas, periods, and dollar signs) to users rather than the traditional QWERTY keyboard.

HTML5 provides an easy way to trigger the display of context-specific keyboards using the “type” attribute. Specifically:

  • <input type=”email” /> triggers a keyboard with the @ symbol and a period.
  • <input type=”number” /> triggers the keyboard with numeric digits plus characters like the dollar sign, comma, and period.
  • <input type=”url” /> triggers the keyboard with characters needed to type a URL, including a “.com” button on iOS and some Android devices.

Notice how Crate and Barrel utilizes <input type=”email” /> on their sign-in screen. When entering an email address, people are presented with an “@” key and a period key:

Crate and Barrel’s create an account screen gives people all the characters they need to type an email address on one keyboard.

We decided to make heavy use of <input type=”number” /> on Cars.com since many of our tools use ZIP code to determine the person’s general geographic location. Without utilizing this input type, people would be forced to manually switch back and forth between different keyboard layouts – alphabetical and numeric. That’s a lot of unnecessary interaction.

Oh, and one more thing: there is no negative impact to using these input types. Because older desktop browsers that don’t understand them, they default to “type=text”. Newer mobile browsers will display a more user-friendly keyboard and older desktop browsers will be unaffected.

Getting started

Improving the three, key areas of Cars.com highlighted in this article has provided our mobile-based users with a dramatically better user experience, all while affording our design and development teams more time to think through our responsive redesign.

The team at Cars.com now thinks about tablet users for every design change we make on the “traditional” site, helping to achieve a vision that’s more usable across devices. Hopefully, following a similar approach increases your team’s sensitivity to (and awareness of) the design considerations specific to touch and gesture-based interactions.

Additional resources


The post Finger Tips: 3 Quick Ways to Retrofit a Site for Touchscreen Use appeared first on UX Booth.

Older posts are this way If this message doesn't go away, click anywhere on the page to continue loading posts.
Could not load more posts
Maybe Soup is currently being updated? I'll try again automatically in a few seconds...
Just a second, loading more posts...
You've reached the end.
(PRO)
No Soup for you

Don't be the product, buy the product!

close
YES, I want to SOUP ●UP for ...