Breaking The Rules: A UX Case Study

Advertisement

I read a lot of design articles about best practices for improving the flow of sign-up forms. Most of these articles offer great advice, such as minimizing the number of steps, asking for as little information up front as possible, and providing clear feedback on the status of the user’s data.

If you’re creating a sign-up form, you could do worse than to follow all of these guidelines. On the other hand, you could do a lot better. Design guidelines aren’t one size fits all. Sometimes you can improve a process by breaking a few rules. The trick is knowing which rules to break for a particular project.

1
Image credit: Ferrell McCollough2

Recently, I did a project for Outright3, a product aimed at simplifying accounting and tax preparation for small businesses. The product automates accounting tasks for sole proprietors and online product sellers so that they don’t have to do things like categorize receipts and generate profit and loss reports.

To get the most value out of the product, new users have to hook up one or more of their own accounts, so that their business finances can be automated.

The Original Design Rules

When first designing its user set-up process, Outright followed some very reasonable design rules:

  • It kept the process to one page in order to reduce the number of steps users had to go through.
  • It allowed new users to easily quit the set-up process, so that they could explore the interface before committing.
  • It provided constant feedback about the status of each account as it was being updated.

Then we did a redesign, broke every single one of those rules and decreased the cancellation rate by 20%.

Why did breaking those rules help in this particular case? Let’s look at them one at a time.

Rule #1: Reduce The Number Of Screens In The Set-Up Process

This rule is normally great, because requiring a lot of unnecessary clicks just slows the user down as they try to sign up for your product. But in some cases, combining too many different concepts onto one screen can complicate things.

In the old version of the application, the user saw only one search box, in which they could enter the name of a bank, a credit card or one of several e-commerce partners, such as eBay.

Original Add Account Screen4
Putting everything on one screen can be overwhelming.

During the preliminary user research, we found that this was a little overwhelming for new users. It made them wonder which piece of information they should add first. There was occasionally a rather dramatic pause as they tried to process what was being asked of them.

By breaking the process down into three explicit steps, we freed users from having to decide which information to input at any point. This made the whole process seem much simpler, because users always knew what was expected of them.

The Updated Version of the Add Account Screen5
Keeping each screen focused reduced confusion.

Of course, we have not required users to input something at every step. They can skip ahead if, for example, they don’t have a business credit card. But still, the only decision they ever have to make is whether to enter the requested information.

When to break rule #1: Adding steps can simplify the experience, if it makes each individual step very clear.

Rule #2: Allow Users To Test Drive Before Making Them Submit Data

For many products, allowing users to play around before entering any information is a great tactic.

Think of Yelp6. I must have read hundreds of reviews before getting around to reviewing anything myself. The same goes for online shopping; I’ll often visit a website several times before making a purchase.

But other products don’t make much sense without personalized content. Social networks, for example, are significantly more useful once you connect with friends on them.

This is certainly true with Outright. The experience for users who plug into a financial data source is so much better than for users who don’t. Letting people test drive the product before importing their account information simply doesn’t make sense. Users won’t understand the value of the product until they see and manipulate their own data.

When to break rule #2: While letting people explore before committing can be useful for some types of products, assess whether your product can be fully understood without personalized content.

Rule #3: Always Provide Feedback On Status

Don’t you hate it when you’re trying to import or export data and you don’t get any feedback on how long it will take or whether any errors have occurred? Everyone does. That’s why Outright kept users informed as their data was being imported.

The Original Final Screen7
Providing too much feedback caused confusion.

The problem was, when users imported data from more than one account, the status messages started cluttering up the screen. This distracted them from adding more accounts.

Now, instead of showing constant feedback about the status of each data import, we simply let users know that they have successfully connected to their data source and then move them on. If there are errors, we provide a place at the end of the process for the user to recover.

Updated Success Screen8
Giving just enough feedback helps users move on.

When to break rule #3: Feedback is often good, but too much can overwhelm users, especially if it distracts them from moving on to the next task. If the user can’t do anything with the feedback or if moving on is more important, consider not giving constant status updates.

Rules That We Did Follow

Of course, we didn’t break every rule. Rules exist for a reason. We followed a lot of best practices, with great results. For example:

  • We made sure to have a single, clear, primary call to action for each screen, so that users always know what they’re supposed to do.
  • We kept each screen focused on a single task.
  • We made sure that users always know which step of the process they’re on and how many more they have left to go.

I’d love to be able to say that breaking certain rules and following certain others will improve the sign-up flow of your product, but design isn’t like that. You need to figure out which rules apply to your product and users. And once you’ve figured that out, don’t be afraid to break a few of the ones that don’t apply, just to see if that makes things better.

(al)

Footnotes

  1. 1 http://www.smashingmagazine.com/2011/08/17/breaking-the-rules-a-ux-case-study/
  2. 2 http://www.beforethecoffee.com
  3. 3 http://www.outright.com
  4. 4 http://www.smashingmagazine.com/wp-content/uploads/2011/07/old_step_1-cropped1.png
  5. 5 http://www.smashingmagazine.com/wp-content/uploads/2011/07/step_2-cropped.png
  6. 6 http://www.yelp.com/
  7. 7 http://www.smashingmagazine.com/wp-content/uploads/2011/07/old_final_cropped1.png
  8. 8 http://www.smashingmagazine.com/wp-content/uploads/2011/07/success.png

↑ Back to topShare on Twitter

Advertising
  1. 1

    Great article! I think as we design for the best user experience that we need to keep it simple. Providing too much or even too little can alter that experience.

    0
    • 2

      Ease of use doesn’t always equal simplicity.

      I recommend Don Norman’s book, ‘Living with Simplicity’; it teaches you that very complicated tasks can be easy to complete. Aiming for ‘simple’ generally results in underpowered products and missing features.

      Keep it easy, don’t keep it simple.

      0
  2. 3

    Good example of how simple rules improve user interaction.

    0
  3. 4

    Working on a site for a brand new company. We are currently studying different tactics for simplifying, but also creative effective Sign Up forms. This article, plus “Innovative Techniques To Simplify Sign-Ups and Log-Ins” by Anthony T, have been so helpful!

    Thank you Smashing for adding a UX section!

    0
  4. 6

    Hi Laura, you have touched on some important insights here. While your solutions appear to break UX rules, I think the solutions followed cognitive psychology. Since the 1970′s there has been research in a phenomena of human perception that today is called ‘event segmentation’. It is rarely discussed in HCI or UX but has been apart of it since 1988. Event segmentation describes how people observe an action or event by breaking it into bounded segments. Where we put those boundaries and how fine grained we make them effect how we interpret the event and how well we remember the details of the event. The HCI research from the ’80s showed that interruptions in the middle of a task caused confusion and annoyance while interruptions between tasks did not ( even when between task delays where long).
    My interpretation of your solution is that you provided boundaries for your users so they could find meaning and orientation in the process . I believe this allayed some of the perceived risk people have when dealing with their bank accounts online, while also giving mental bookmarks for your users.
    What seems to be happening is that you recognized that each step should be recognized by your user as being one segment of a larger event, rather than each step being an individual event in itself. Because users were unfamiliar with the event, showing them the map of the process with boundaries made the whole process understandable.

    0
    • 7

      Absolutely.
      There is no breaking of any so called design rules or principles here, they follow UCD far closer than most!

      as you’ve said, cognitive actions have been applied here. We know that something will take time to upload if we have ever uploaded anything before, best user experience is to not lock up my screen in order to do that – make it happen in the background so I can do something else.

      I think that this has achieved a couple of great things, promoted your design services and workflows – I’d hire you based on this 20% increase in lead conversion. and promote that app because I created an account to understand your comparisons.

      The interesting thing I found was that there’s no validation on the email during signup so I’ve put utter junk in there and still got access. Someone may wanna check that out because although you’ve made a 20% gain in leads of that 20% how much of it is junk that can’t be chased later?

      0
    • 8

      I would like to learn more about event segmentation you mentioned here. Your comment made my think ;) Do you have any particular online reading in mind you can point to?

      0
      • 9

        Hi Alexei, I don’t know if these are available online exactly but some of the most recent work in the area is by Jeffery Zachs at the University of Iowa. He works with some other researchers in defining a theory of how the brain does event segmentation. His work though does describe the early research so it’s very useful to get a fuller understanding of the topic.
        Here are a few titles of papers that can start you out. They are all Zachs’s papers but cite other research.
        ‘Activation of human motion processing areas during event perception’ 2003.
        ‘Perceiving, remembering and communicating structure in events’ 2001.
        These two papers each give over views of the phenomenon and address some details as well.
        There is also a book called ‘Understanding events: From perception to action’ 2008 and can be found on books.google.com.
        Hope this helps.

        0
  5. 11

    I don’t think it’s so much that you broke the rules to make the UX successful. It’s success came from making everything clearer to users. And to do that, you broke all of your preconceived rules.

    So the lesson here is that the ends should always be to make everything clear, and the means is to do whatever it takes to make it clear, even if means breaking the rules.

    Rules and best practices are always context-based, but clarity is universal. Focus on designing for user clarity, not designing for the rules.

    0
  6. 12

    The biggest take away here, is that “rules” should not be rules, but rather guidelines.

    0
    • 13

      Spot on.

      There’s no such thing as a rule when it comes to design; there’s no right or wrong as context is hugely important, and a different approach is often required for every new project.

      The lesson here is actually to be a good UX designer; you’re not breaking rules by doing that.

      0
  7. 14

    great example of good user interface. Obviously this is the difference between a guru like you and we poor mortals. :) Congratulations.

    0
  8. 15

    Great article, I am working on re-doing an upgrade process UI for a client at the moment. So some of these point are very helpful! Thanks heaps!

    0
  9. 16

    Great case study!

    0
  10. 17

    Every project actually needs rule bending. There can’t be quick fix rule based solutions. The primary focus is being user centric and twisting few rules doesn’t matter. Thanks for the case study.

    0
  11. 18

    Thank you for this nice article. It is more often good to create simple and functional design than to overwhelm users with so much information.

    0
    • 19

      Usability is the process of making complicated things easy to understand.

      If all you’re doing is making the process simple then you’re increasing it’s simplicity, not necessarily its usability.

      It’s really important that more people promote this message in the design community, because more and more I’m coming across otherwise well-educated designers that are constantly striving for simplicity rather than ease of use.

      They CAN be one-in-the-same, but the process should involve aiming for usability, which can often result in simplicity. Don’t do it the other way round.

      0
  12. 20

    It’s nice to see someone applying the Users point of view to a UI solution, instead of just applying the obvious or commonplace.
    I recently did a Job for a large staffing company, and I discovered that even though “good” usability dictated a 1-X set up process, the users were importing 80% of the data and just validating it once it parsed. Additionally, the “users” actually used new employees, interns, or paid workers to data input to build out their databases.
    I decided to design a process that allowed for a more data entry model (tab entry .. minimal drop downs … streamlined and assumed information… etc…) breaking the “traditional mold” if you will.
    I believe that one of the challenges we face as designers (architects) is Really understanding the intended use and the Actual use of a project.
    I believe your article captures the essence of that.

    Cheers!

    PxlPsher

    0
    • 21

      Great point you make there.

      All to often we design for how something is supposed to be used, not how it will actually be used – which can only generally be discovered through iterative testing.

      I try to make the point to clients that even though I consider myself an astute professional I can only ever make good guesses.

      0
  13. 22

    I’m not so sure any rules were broken here if anything you just followed more rules to arrive at your solution. Rules are there for people who can’t figure it out for themselves. One of my design mottos “what rules?” you just do or do not.

    0
  14. 23

    The author uses blogspot and therefore cannot be taken seriously. That site looks horrendous as well. So much for advice.

    0
  15. 24

    Great post – and so very true. This thinking also applies to creating graphics: Generally any graphic – whether its a photo or an infographic – should have at most 3 distinct visual elements or areas of focus on it. Any more and the message that the graphic is trying to communicate is cluttered and readers of the graphic move on.
    The same goes with a page in a sign-up process: If you are trying to communicate too many things at once you’re going to lose your audience.

    0
  16. 25

    I’d really like to know how that image was shot.

    0
    • 26

      Looks like the glasses were dropped at the same time from about a foot above the surface. Three middle ones landed first and broke their stems, while the outer two didn’t hit the table yet. Seems they used 4 flashes (speed lights, strobes, monolights, whatever) with snoots or grids pointed at the background. The letters were either resting in the glasses before they were dropped or added later in post.

      Found this: http://beforethecoffee.com/2007/06/04/triple-break/

      0
  17. 27

    Laura – these are really good rules. Again, seems like it’d be common sense but it’s not. I especially liked rule #3, the waiting process. If I don’t see that the process is “thinking” I tend to feel as if it didn’t work and will either try to re-submit or trust the source a little less. Great insight!
    @kadeeirene
    @produxs

    0
  18. 28

    Thx Laura, for your article – I like it …
    Thinking out of the box and breaking rules is some times the only way to really improve things and to be innovative – But to do this it’s important to know the box and the rules inside. Only than and that’s the only way you really know what you do, which rules or best practice you bow or break – and you are able to say I knew what I did and I have good reasons for that.
    In addition here is an article regarding forms in general and fault tolerant planning – it might be interesting for one or two:
    http://ux4dotcom.blogspot.com/2009/06/form-of-forms-we-need-them-but-also.html

    0
  19. 29

    Actually, in this case study you didn’t break any basic UX rule, you just applied more. The chunking of a task in simpler discrete sub-tasks works by reducing the “performance load”.

    That’s only one example. The problem I see in the UX community at large, is that it knows only a few guidelines (on average, there are true professionals out there that are a well of wisdom) and they feel like those are set in stone, ignoring all the other principles, guidelines and best practices that are available to the UX practitioner (what a horrible name) at any given time.

    0

↑ Back to top