UX Copywriter portfolio

Usability (UX Thinking)

The difference between clarity and confusion? Scroll down for examples.

How to improve Usability — the User Experience

Below are examples of good Usability, and how to correct Usability errors. Frankly, the errors are so obvious and the solutions so simple that they hardly seem worth mentioning.

But sometimes that's the problem. Things seem obvious ... except to the first-time user.

There may be other reasons. Many UX design errors exist because ...

The project was large and other programming and User Interface issues took precedence.
Microcopy may have been left to programmers.
A release deadline loomed, and after release, nobody got back to fixing nits.
The company picked up a business partner's code – or even their page – and didn't vet responsibility for adapting it.

But sometimes fixing it just doesn't seem important. Well, it is important. It merely takes a UX Thinker. And it's usually not hard to fix.

Color Keys Register/Login Form Hint Microcopy Courtesy Forms Flow Data Display Planning

Color Keys

SITUATION:
User has Deleted emails from Inbox, now needs to permanently remove them from Storage. Deleted emails are represented by the yellow bar.

RESULT:
After removing all Deleted emails, the bar (below) shows lots more headroom in Storage. But ...

ISSUE:
Why is there still a yellow portion? User first thinks an error occurred. Do some Deleted items remain? Actually, now yellow represents Sent Items.

SOLUTION:
Make color keys consistent. Deleted items should still be yellow, even if no Deleted items remain.

NOTE:
Word "Items" was inconsistently used and unnecessary. "Drafts" existed in original situation, why not on that bar? When Drafts were broken out, "Other" did not change size. This suggests bar is approximate, but that's okay.

Register/Login

SITUATION:
At a jobs site, the User is asked to sign in or register, but User doesn't recall if they already have an account. (This is not the site of the company offering the job.)

RESULT:
User Sign-in fails, producing error message.

ISSUE:
User didn't notice the top bar, which is often percieved as a decorative border. Colors and design do not make clear whether "Register" or "Sign In" is selected. (From instruction and error mssg, it seems Sign In is selected.)

SOLUTION:
1) Move buttons away from the edge and separate them. 2) Indicate which button is selected. There are right and wrong ways to do that. 3) It's tempting to say the incorrect field should be identified, but what if this person typed the address of a similarly named User? An option to display password will help confirm it was entered correctly. 4) Initial instruction on form should be "Please Register at [jobs site] or Sign In, to ..." or "Please Sign In or click Register, to ...", depending on which is default.

NOTE:
Don't require User to go through Forgot Password just to learn that there is no such User. Confusion or hassle will undesirably encourage User to visit the employer site directly.

Form Hint

SITUATION:
User supplies phone number, including Country Code.

RESULT:
Entry looks complete and correct, but isn't, producing mysterious error message.

ISSUE:
User didn't realize the Country Code shown in the field is slightly gray, which was meant to indicate it's an example. User must type over the the example, which – thinking it's already supplied – is not intuitive. Error message doesn't fully explain the desired action.

SOLUTION:
Redesign form and/or the error message. (Some options below.)

NOTE:
If user includes leading digits (e.g., "001"), system should reformat accordingly.

Microcopy

Original	Revised	Note
E.G., A physical fitness site: Oh No. It looks like we're having issues serving this page.	Ooops — you've found a weak link! Check your spelling, or visit one of these related pages. If it was a bad link, please report it here.	● Avoid corporate- and tech-speak. This isn't an issue. It's a problem. ● Relate the text to site's subject, short and sweet. Or make it fun; just don't be flip. ● A visual would be nice, related to the error statement. ● Make the message headline clear, friendly and obvious. Don't bury it in the page border or body text. ● Include alternative links to probable or popular page(s). ● Consider databasing errors and if the incorrect URL is in it, say it has been reported and will be dealt with soon. (And do that!). If not, provide a link for reporting the bad link. Expedite it by capturing the referrer, the erroneous address, etc. to populate the form. But don't take user further away from their last good page. ● FAR BETTER: Regularly review logs for errors and repair or manage them proactively, so there's no need for reporting.
Other Capabilities CNC Machining Assembly Insert Installation Helicoils, PEM Nuts Spot Welding Riveting Sand Blasting	These additional services enable us to fabricate your parts even more precisely. We can finish, assemble, and install, making them ready to use. [List]	Why not explain the advantage?
Headline: Contact Us Our management, design department, factory, customer service and order desk are all located in California. You may also contact us for the location of a distributor near you. (address etc.)	Headline: We're easy to reach. All our operations are in the USA — management and factory through sales and service. For fast, personal attention, contact us directly or for the distributor near you. (address etc.)	The address shows they are in California.
Ferry Flight? We have experienced pilots on call ready to make many oceanic crossings including the Atlantic, Pacific and Indian seas.	Ferry Flight Our experienced pilots deliver across land or water, including the Atlantic, Pacific, and Indian oceans.
[About an orientation seminar] You'll discover if you fit in. And we'll tell you if your skills fit in.	We'll tell you how your skills fit in. You'll also discover if *you* fit in.	Good news first. Clincher second.

Courtesy

SITUATION:
User fills in a text field. User does not learn about the limit on the number of charactersi allowed, until the limit is reached.

RESULT:
User must revise the text, perhaps entirely.

ISSUE:
User is annoyed at having to revise text that he or she would have written more concisely to begin with, had they known the limit. Frustrated User might abandon the form, costing the site owner user satisfaction, valuable feedback, and even a sale.

SOLUTION:
1) Disclose the limit before the User starts replying. 2) Show the limit above the field. E.g.: "Limit 600 characters."

NOTE:
If limit is reached, handle the error elegantly. Some forms overwrite trailing text, or destructively place inserted text at the end of the field. This is confusing at best, especially if not immediately discovered and understood. It makes yet more work for the user.

And a personal peeve: The "misplaced only." The word "only" belongs next to the word it modifies. (It should be "You can enter only 600 characters." Technically, putting it before "enter" means you can only enter characters, you can't revise them, etc.) But I hear or see it placed correctly only a few times a year, and have given up on this issue. As long as people understand, that's sufficient. After all, comprehension is at the heart of UX Thinking.

Forms

SITUATION:
Typical form, first customer contact.

RESULT:
Let's ask for everything?

ISSUE:
Although it would be nice to acquire as much data as possible, more fields discourage overwhelm the eye and discourage the user. Especially if many are "required."

SOLUTION:
1) Minimize the number of required fields, as they tend to reduce response. 2) Require only those needed to qualify visitor, and to respond to the visitor as visitor prefers. 3) Indicate required fields in bold and/or color, not just asterisk. 4) Eliminate "Address 2" or be specific. Customers placement of address data will be inconsistent. 5) A quote and an estimate might be thought to be the same thing. If a firm quote based on very specific information is offered, consider making it a separate form, linked from here.

NOTE:
Keep the intro a short, inviting call to action. Omit the obvious. If a benefit or position statement can be briefly incorporated, that's an option. Make the Note field expandable by the user, with a very large character limit, if any. In other fields, allow user to type beyond the visible limit, automatically scrolling.

Flow

SITUATION:
In Microsoft Outlook, User defines a Rule for handling specified email(s).

RESULT:
This step isn't "wrong," but it is inefficient, and annoying.

ISSUE:
After ticking "Category" in top pane (Step 1), User must then click "Category" in bottom pane, which produces a selection dialog (here shown reduced in size). If user absent-mindedly clicks "Next" (Step 2), the wizard refuses to proceed until a category is chosen. Thus three clicks are required to proceed, instead of one.

SOLUTION:
On ticking "Category," wizard should pop up the selection dialog automatically.

NOTE:
Outlook's overall Rules management interface is unimproved since 2010. For example, the master list of Rules cannot be sorted to facilitate "housekeeping." While we're at it, the phrase "category category" (rather than "specified category") is nonsensical.

Data Display

SITUATION:
Data is displayed to user with each field on its own line, along with field names.

RESULT:
Display is awkward for reader to read and to use.

ISSUE:
The display design ignores user's viewpoint and potential needs. Except possibly for rare instances of a naive international user base, the user can tell an address from a phone number, so the field names are unnecessary. In addition to cluttering the screen and wasting real estate, they make it clumsy for the user to copy onto an envelope or into an addressbook.

SOLUTION:
1) Omit field names. 2) Concatenate fields to conform to familiar formats. 3) In phone numbers, put B, O, and M before the number, not after. 4) Add an extra space or two between numbers, making them easy to refer back to when dialing.

NOTE:
The "Address Info" bar graphic is similarly superfluous.

Planning

SITUATION:
Email hosting service replaced Webmail with Microsoft Outlook. Users need to set retention policies so storage won't fill up. Settings modal shows a choice of intervals, and a link for defining one's own. Or so it seems.

RESULT:
None of these policies are clickable, and the Add New Policy link produces a blank page that also does nothing.

ISSUE:
A tech rep explained that these panels are relevant only to Microsoft Global Administrators, useless to ordinary hosting customers.

SOLUTION:
1) When planning the software partnership, determine who will adapt the interface for End Users. 2) Let End User define custom retention policies. Otherwise, the only "solution" is for user to manually bulk delete stale emails, a chore taking up to 20 minutes. 3) At least state the default retention interval, and delete this useless, frustrating screen.

Color Keys Register/Login Form Hint Microcopy Courtesy Forms Flow Data Display Planning

I also frequently post informative, supportive, and other comments on Facebook, etc., sometimes receiving thanks and hundreds of "likes."

These pages are also UX and web-related:

UX Writer. Is there any other kind?

Copywriters as UX Writers?

Interactive Copywriting

Writers and Websites

How-to Help Advice

What Kind of Editor Do You Need?

Social Media

a wide range of other UX writing samples

Web Work

Search Engine Optimization

Copywriting Services: a dozen ways I can help you

You can also interactively search for UX among my Samples.

For more details, e-mail me now, or request an estimate.