400 Bad request

Specifically, I was talking about the wording of the copy in applications (web, desktop and mobile).

Here are three ways in which copy can be improved:

1. Words need changed

In this case, the word(s) didn’t make sense to the user.

I had made a (wrong) assumption that all users knew what certain abbreviations were when some didn’t. Also in some cases the copy was rushed so it just didn’t read very well.

Solution

Change the wording so it makes sense and is understood by all types of users.

Pay attention to grammar and write full words as opposed to abbreviations if there’s any chance a percentage of users won’t understand it.

2. Words need added

In some cases users would ask “What does this mean?” or “Why do you need this?”. There wasn’t enough information to clarify that.

Solution

Add a word or two to make it abundantly clear what you’re referring to.

Add some microcopy under the input field to help guide the user and help explain why you need this information.

3. Words need removed

My favourite solution, removing words. We tend to waffle, a lot. The more you write the less people will read it.

In one particular example, there is a page with a notification that explains to the user that they have to print and sign additional documents. But because there was so much text within this notification area, they simply weren’t reading it.

Solution

Make copy as short as possible. Always re-read your copy and remove words if you can.

Add tooltips or links to more information for users who may need to read more.

Have you any tips for writing copy?

I’ve had bank accounts with Alliance and Leicester, Ulster Bank, Bank of Ireland and the online banking experience has never been good.

However, I just checked out Bank of America and compared to the other banks I’ve tried it’s incredible.

Ulster Bank business banking (Bankline)

Lets say I want to view a statement of recent transactions and see what my overall bank balance is. A very common task for online banking.

Click 1: Go to UlsterBank.co.uk and click business banking

Click 2: Click login

Opens a nice new window.

Click 3: Enter a customer ID and a user ID and click continue

Because one ID isn’t enough.

Click 4: Enter requested numbers from your PIN and requested characters from your password and click continue

There are so many IDs and passwords to remember that you have to write them down somewhere.

Click 5: Read the welcome message and click confirm

Click 6: Click account information

Click 7: Click view account balance

Click 8: Click on your account ID

Result number one. After 7 clicks I’m able to see my balance. Now I want to see a breakdown of recent transactions.

Statement

After 8 clicks, 2 IDs, 1 PIN and 1 password, I’m able to see my statement and my balance.

Bank of America

I’ve recently setup a US bank account with Bank of America. Here’s the user flow for wanting to view the same thing – my balance and recent statement.

Click 1: Enter my username and sign in

It actually remembered my username from last time.

Click 2: Enter my passcode

Statement

The first screen I see after logging in is ‘Account Activity’. Immediately I’m able to see a balance summary and a statement of recent transactions. That’s only 2 clicks and one passcode I had to enter.

Not only do a get a good overview of my bank account straight away, each entry includes detailed information about the transaction, including icons to help me identify what type of transaction it was.

Ulster Bank personal banking (Anytime)

It took me 4 clicks, 1 customer number, 1 PIN and 1 password to see a brief statement and 6 clicks to see a full statement.

Bank of Ireland

I once had an account with Bank of Ireland but I left before I could get a chance to test their online banking.

According to them their online banking service was not compatible with Apple Mac at the time (this was about 2 years ago).

Alliance and Leicester (Santander)

Alliance and Leicester took 5 clicks, 1 customer ID and 1 PIN to view an overview and 6 clicks to see a full statement.

What’s your experience like with online banking?

These are banking sites so obviously security is very important but does that mean the user experience has to be awful?

Until recently I assumed all online banking was terrible, but I’m very impressed with Bank of America.

Who do you bank with and how is their online banking? Why do banks not put more/any effort into UX?

That was straight forward, however it took at least another 10-15 tests to determine the wording and copy to be used.

User testing copy and content

Early user testing is an important part of the product design cycle, but it’s important to not just focus on general layout and positioning, but think about the copy and content as well, and not just “figure that out later”.

For web applications this includes:

• Headings
• Instructions
• Labels
• Support text
• Inline help
• Help articles
• Buttons
• Anchor text
• Default input values
• Loading text

Takeaways from user testing copy and content

These were the main issues we found with our copy through user testing:

1. The user didn’t understand it due to the wording or jargon used
2. The user, in general, didn’t read instructions on screen and preferred to just click stuff to see what happens
3. There was too much to read so the user didn’t bother reading it
4. Inline help is useful, particularly for first time users, not so much for return/power users
5. Users weren’t 100% sure what would happen when clicking certain buttons or links

Every couple of tests we would change the copy based on feedback and observations then continue to test. So by the 15th test, there were a lot less issues or questions from the user. That said, there is always room for improvement and we’ll continue to test it and gather feedback.

Copy and content is more important than visual design

As a designer, what often matters most to you is what the user’s reaction is to the UI design; the colours, the textures, the use of subtle insets here and there.

Unless you’re building a product aimed at designers, users rarely care about this. They care about finding or producing content, so the copy that helps them accomplish their goal should be easily and quickly understood.

Don’t leave content or copy until the end. Make sure it gets tested early on along with the rest of your interface so you can iterate and improve it.

What are your biggest takeaways from user testing?

Further reading

• The Language of Interfaces by Des Traynor

I was working on a project that involved listing records that users can add, edit and delete.

My first iteration included a delete action for each record that when clicked, the user would be asked to confirm if they wanted to delete the record or not. Clicking confirm, or pressing return, would then delete said record.

This is a typical flow for deleting records. It’s often the out-of-the-box technique for some web development frameworks, when you scaffold a Rails project for example.

I presented the prototype to the team and Ken Browning made a good point that users will rarely need to delete records on this screen, and using this flow there’s a chance they may accidentally delete records. It’s relatively easy to click on the delete icon (maybe not knowing what it does) and then press return by accident. Then what are they to do?

Actions that have permanent consequences shouldn’t be easy to do

A better technique is one which a lot of web applications like Gmail use.

1. User checks the record (or multiple records) they want to delete
2. The rows they select are highlighted and the delete button is now active
3. The user scrolls to the bottom of the table
4. User clicks “Delete selected records”
5. User confirms deletion

The 2-click process just became a 1/multi-click, scroll, 2-click process, making deleting a record a lot harder, which is good (in this instance). We safeguard against users making accidental deletions.

Bonus: Allow the user to undo the action

Allowing users to undo actions adds a bit of development time, but if it’s possible (and especially if you’re working with very important data) it’s a good idea to let users undo their actions.

Prototyping

As designers we put together prototypes as a proof of concept. In the short term it enables you to experience how a product will function and look, and you can start user testing early on in the product development process.

In the long run it saves time and money as you can test and fix any problems before you spend hours of man power developing an end product.

You should prototype any type of product or application including web, desktop and mobile. This is easier said that done of course, and I haven’t been great at doing this myself in the past, but it will definitely save you time and money in the long run.

High fidelity

I always start designing on paper so what I end up with are sketches of user flows, sitemaps and wireframes. These are low fidelity prototypes. They’re quick, easy to put together but not really something you can have end users test or show to clients.

High fidelity prototypes closely resemble the end goal. You should be able to interact with them and other people should be able to understand them, but the standard of the code or the pixel perfection aren’t an issue.

High fidelity rapid prototyping tools

1. Axure

$589 (£366) PC and Mac

2. App Sketcher

$79 (£50) PC and Mac

3. HotGloo

$7-$48/mth (£4-£30/mth) Web based

4. ProtoShare

$29-$179/mth (£18-£111/mth) Web based

5. Easy Framework

Free HTML/CSS framework

Updated Monday 1st August 2011

6. Invision

$8-$199/mth (£5-£122/mth) Web based

7. Prototypes App

$39.99 (£27.99) iPhone app

You’ve made your prototype but how do you collect feedback?

Once you share the prototype with your team or client, you will want to gather feedback.

Onotate is a great tool that enables you to upload a screenshot and add notes to parts of that screen. Other team members are able to add their own notes or comment on your notes.

Once you’ve used Onotate to gather your feedback you can head back to your prototyping tool and start the next iteration. This gives you a nice agile design process.

Do you prototype? What tools do you use?

Thanks to @appwork, @ideawebme, @clarkvalberg, @mattbond21, @tomhayes, @markwallis, @wbdecvar, @markskinner_, @aaroni268 for your prototyping suggestions.

Further reading

• Rapid prototyping tools revisited

In the end, I loved it, and ended up buying it. Here’s why.

OmniGraffle is a comprehensive, yet easy to use diagramming and drawing application. Drag and drop to create wireframes, flow charts, network diagrams, UI mockups, family trees, office layouts, and more.

It’s a great tool to take your sketches to digital

I have lots of A3 sketches, wireframes and diagrams on my desk. These all make sense to me, the problem is they don’t make sense to other project team members or clients, nor are they easy to share or distribute, so at some point I have to transfer these to digital format.

In the past I would use something like Illustrator (or Balsamiq for quick wireframing), but Illustrator wasn’t really made for this.

Omnigraffle is the perfect solution. It is the digital equivalent of an A3 sheet of paper and sharpie market.

Information architecture

Simple shapes and ease of taking notes. Similar to Keynote or Powerpoint but a lot more flexible and more control over how you structure your layout.

Sitemaps

Ease of creating and managing sitemaps (so so easy).

Wireframes

Lots of reusable elements for creating wireframes for websites and applications.

Check out these templates and stencils:

• Wireframing Freebie: 960 grid template for OmniGraffle
• OmniGraffle Wireframe Stencils

Well recommended

I didn’t go into much detail here but if you’re a UX Designer, or involved with this early stage design process, I definitely recommend you try out Omnigraffle (free 14-day trial).

Check out these short video tutorials for how to get started.

I’m only just getting into Omnigraffle myself so would love to know any tips or recommendations for usage if you have any.

As designers we often get carried away with how a sign up form looks and forget about the user experience. Border here, rounded corners there, maybe a hint of shadow…

Truth is users don’t care about how it looks. They care about getting through the form as quickly as possible. They care about what information you’re asking for and why you need it. They care about getting access to your website or app so they can start using it.

What’s the minimum amount of data you need to let someone in?

Ask yourself “Do I need to know this right now?”

Email address

The one thing you need to create an account is most likely an email address.

Everyone online has at least one email address so this is the perfect way to identify someone using your app and when you have their email you can contact them, send them setup details, keep them up-to-date.

Password

You more than likely need a password as well to let users into your app.

That said you can always email them a password then let them change it later, for the sake of giving them even quicker access.

It’s debatable whether you need a field to confirm the user’s password or not.

Username

If your app involves some sort of public profile, you’ll need a username that will identify the person. This username can then be used for login, as well as their email.

What you (probably) don’t need to know “right now”

• Date of birth
• Zip/post code
• Gender of the user
• First name
• Last name

All these are extra fields that will potentially scare your user away.

I don’t know what the stats are but I guarantee sign up forms that have these required fields end up getting a good lot of Joe Bloggs, born on 1st January from Beverly Hills 90210. Why? Because users just want quick access and they’ll enter the first thing that comes to mind that doesn’t lead back to them.

Gradual engagement

I’ve been reading Web Form Design: Filling In The Blanks, where Luke Wroblewski talks about gradual engagement.

Lets look at this process.

Sign up process 1: Facebook

1. I’m presented with this form. This is enough to turn me away as there are quite a few fields.
2. After submitting these details I have to complete a captcha for anti-spam.
3. I successfully sign up but an activation link has been sent to my email and I need to verify. I have to leave the site now to check my mail.
4. Verification email link clicked. Thankfully this wasn’t delayed or marked as spam.
5. I’m in. Now to complete the process, find friends etc.

See how many annoying things happened here. The thing is though, Facebook can get away with it. Your website can’t. If this was another site and Facebook wasn’t one of the biggest sites on the planet, you probably would have walked away by now.

Sign up process 2: Twitter

1. Sign up – pretty good, bit more fields than I would like but satisfactory.
2. After submitting details I’m presented with a captcha for anti-spam.
3. Now I’m in and I can start using it.

Twitter definitely has a nicer sign up process than Facebook. They also sent me an activation email but notice how Twitter lets you into their app (with limited access) before you have to click the activation link. Good job.

Sign up process 3: Geni

Geni is a family tree web app and has a very interesting sign up process:

1. You don’t sign up, you just start making your family tree.

Geni has a form on the homepage that records your email address, which is all they need to setup your account, but it’s cleverly disguised as part of the application so I never *really* sign up. Instead I’m jumping straight in and using the service.

Behind the scenes Geni has emailed be a temporary password to use until I create my own.

This is gradual engagement. I’m able to start using the service without actually signing up. I’m happy as there’s no time wasted. They’re happy as they have another user using their service.

Conclusion

Try to get the user involved first before asking them to sign up, then only ask for the information you really need.

If you need email confirmation (to prevent spam accounts) let the user continue to use your website in the mean time. Maybe close the account after a week or a month if they still haven’t verified, or restrict access to certain parts of your app.

Don’t scare users away with many fields. Often zip codes, DOB, even names can come later. Let them in fast.

For handiness make use of Twitter oAuth, Facebook Connect and OpenID etc. so users can sign in with 3rd party tools.

Further reading

This blog post is based on my own interpretation of a chapter of Web Form Design: Filling In The Blanks.

I highly recommend this book if you’re a UI designer as you undoubtedly work with forms daily. If you’re interested in usability, eye fixations, error prevention, web apps etc. then you should read this book.

• WebFinger – a protocol that lets users sign into a site using just their email address
• Sign up forms must die – a more in depth look at gradual engagement

What annoys you most about sign up forms? Have you tried gradual engagement?

The same principle can be applied to web design. Once you have your user committed, whether that be reading your blog post, signing up, making a purchase or making a contribution, design the next step so that the user flow doesn’t just come to a halt.

Blog

Someone has just read your blog post. Let’s assume it was a good post and they liked it. Rather than them leaving, satisfied with the knowledge you just provided, wouldn’t it be good if they would contribute or market your blog for you?

• Add share links to the bottom of your post and make it easy for users to share it across their social networks
• Ask a question that leads the user towards leaving a comment
• Suggest other posts that they might be interested in, and keep them on your site

At the end of each post, Design Informer encourages users to share the love, share their thoughts and also suggests other posts they may be interested in

Sign up

When a user signs up you’ve got them on board. A quick easy sign up process is extremely important but once you have them in through the door, you can encourage next steps.

1. Let them connect with their friends from other networks
2. Make it obvious where to start

Twitter does a good job of encouraging you to invite and follow friends from your other networks.

Beanstalk designs the blank state with an obvious ‘Create a new repository’ button and also provides some help for new users.

Contributions

When people contribute to your website, whether that be a status update, a review, a photo or even a blog comment, chances are they want to share that with their friends. After all, the reason they’ve contributed is so the rest of the world can see it.

By making it easy for users to share this link across their other social networks, they get to share it with their friends and it also helps get your own website or service out there.

When someone writes a review on Lookaly, they can easily share this review with their friends on Twitter and Facebook with the click of a button.

Contact form

Your contact form confirmation is often something that is overlooked. Once you’ve confirmed to the user that their enquiry has been received, suggest other things they can do while they wait for their reply:

• Check out our blog
• Follow us on Twitter
• Make a donation

When you submit your email to Ecliptic’s website, you are presented with a compliment, along with links to their Twitter profile and direct email.

Checkout

If a user buys something from you, fantastic, you got the sale. But why leave it there? If they’ve departed with their money for something you are selling, chances are they’d do it again.

Amazon uses a smart shopping basket and checkout system that suggests related products during and after you have checked out.

Conclusion

The key is not to lead your users to a dead end – keep the flow going, always suggest more.

Getting them on board first is the hard part, but once you have them committed, it should be easier to lead them onto next steps.

Is this something you’ve thought about? Have you any other suggestions for designing next steps?

A/B testing

A/B testing involves showing different users different versions of a site and measuring how each version performs.

• Design two (or more) versions
• Randomly show users different versions
• Track which version performs/converts better
• Evaluate
• Use the best version

Sounds complicated doesn’t it? Thanks to Google it’s not as hard as you think. Google has a Website Optimizer service that enables you to easily setup A/B tests and then analyze the results for you.

A/B testing in action

I recently setup a very simple test with Sharethrough changing the call to action text of two buttons and measuring conversion to the products page.

Some users seen these buttons…	and others seen these (50/50 split)
A	B 5% improvement

Version B showed a 5% improvement on conversions to version A, the original.

I must stress this is a very simple test I put together but it just goes to show that even the smallest text change can make a difference. I can now go onto setup more tests and experiment with button placement, language used etc. while measuring conversions to enquiries and conversions to user signups.

A/B testing resources

Before you get started with A/B testing, check out the following:

Carsonified: How to do A/B testing in WordPress

37 Signals: Writing Decisions: Headline tests on the Highrise signup page

UX Booth: How to increase site performance through A/B split testing

ABtests.com

Google: Website Optimizer

Do you use A/B testing?

Please share any experience or tips while doing A/B tests.