UXChampion.com
Home > Guidelines 101

UX tips and Guidelines

These "tips" were originally published on Twitter, hence their brevity.
Where relevant, I've added some explanation.

It's genuinely difficult to create meaningful and useful tips in 140 characters, but at the request of some of my followers, I have dared to do so. If you'd like, feel free to follow me on Twitter to catch my latest UI tips.

Here are the tips I've published this far:

UX Tip 1: "Click Here"

Don't use "click here." It's non-descriptive of the action you want users to take. Spell out the action or resource in the link.

UX Tip 2: Word Shapes

We read by recognizing word shapes. Using Italics and All Caps destroys those shapes and slows reading speed and comprehension.

UX Tip 3: Use of Underlines

On the web, underline = hyperlink. If you need to emphasize something, use bold, not underline. Reserve underlining for links.

UX Tip 4: Bullet Shapes

Don't use bullets that can be mistaken for something else, e.g. triangles: they can be mistaken as expand and collapse controls.

UX Tip #5: URLs

URLs, e.g. http://yadaya... etc., are meaningless. Craft links that are insightful to users so they can make informed decisions.

UX Tip #6: Column Width

Reading long text lines in HTML (16+ words) can be tiring. Try mimicing periodicals and keep text column width at 8-12 words.

UX Tip #7: Yes/No Questions

Asking binary ?s on a form? Use checkbox with a positive response, e.g. "[ ] Allow so-and-so to contact me" - not radio buttons.

UX Tip #8: Required Fields

Required field? Tell users up front and include any formatting hints (e.g. mm/dd/yyyy) so they can get it right the first time!

UX Tip #9: Pogo-sticking

Don't make users "pogostick" to see multiple photos, etc. Make a slideshow-like experience so users can navigate back and forth.

UX Tip #10: Breadcrumbs

Breadcrumbs: Use heirarchical strings, not historical. Users arriving at your site via Google, etc. will have a sense of place.

UXTip 11: Image Borders

You'd think I didn't have to say it, but I saw it today: Unless it's intentional design, TURN OFF borders for hyperlinked images!

UXTip 11: Icons

Using icons? Use tooltips or labels so users understand clearly what they represent. Be sure to hyperlink both icons AND labels!

UXTip 12: Consistent Labeling

Create a taxonomy for your site to ensure consistency with button and link labels, e.g. use either "Login" or "Sign in," not both.

UXTip 13: Under Construction

Avoid "Under Construction" pages. If content isn't ready yet, don't link to it. Users hate dead ends and most likely won't return.

UXTip 14: Pop-up Windows

Avoid pop-up windows. They clutter work spaces and some users become disoriented by them. For dialogs, try modal windows instead.

UXTip 15: Where Am I?

Your site navigation should clearly inform users as to where they currently are, where they've been, and where they are going.

UXTip #16: Horizontal Scrolling

Never make users scroll horizontally. Present comparative data so it fits on screen and users needn't scroll vertically either.

UXTip 17: Default Link Colors

Respect the browser default link colors. E.g. Red & purple are default colors for active and visited. Avoid using them for links.

UXTip 18: Breaking the Back Button

Never break the browser's "Back" button. For many, it is their primary way of navigating back to previous pages.

UXTip 19:Clean Layout

Clean up the layout of your design: left align form objects, etc. Clutter and sloppy layout confuses users and makes them uneasy.

UXTip 20: Conventional Design Patterns

Use form elements, icons, lexicons etc. that are accepted standards on the web. Don't force your users to learn new conventions.

UXTip 21: Contrast

Create as much contrast as possible between text & its background- black text on white is best. Also avoid color combos that vibrate, like blue and red.

UXTip 22: User Tasks

Give users tasks they can accomplish from the home page besides reading company messaging - even if it's as simple as logging in.

UXTip 23: Frames

Don't use frames. No-zip-Unuh. Just don't. O.K.?

UXTip 24: Italics

If it's worth reading, make it readable. Avoid italics- onscreen they usually look bad and they mess with word shapes (remember?)

UXTip 25: Consistency

Be consistent! Buttons, icons, etc. should have the same appearance. Using the browser's default buttons makes that a lot easier.

UXTip 26: 80/20 Rule

Try the 80/20 rule: 80% of the page dedicated to content; no more than 20% dedicated to navigation. Keep ads etc., to a minimum.

UXTip 27: Word of Mouth

A satisfying user experience will result in more return visits, word of mouth endorsements, and increase sense of credibility.

UXTip 28: Most Relevant First

Make the most relevant information to the user and the user's most desired actions immediately accessible from the landing page.

UXTIp 29: Avoid Pagination

Keep articles on one page. Scrolling is easier than navigating to other pages - particularly when users need to revisit a section.

UXTip 30: Content or Ads?

Don't design content that looks like ads (unless they're ads). Users are blind to ads and won't see them.

UXTip 31: More Detail

Using "Next, Previous, View More, etc." to link to related content? Use tooltips to let users know what they are navigating to.

UXTip 32: Multiple Select

Allow users to select and apply actions to multiple items in a list as opposed to applying actions to one list item at a time.

UXTip 33: Strong Requirements

Every successful project starts with strong requirements. Know your users and discover their needs before you get started!

UXTip 34: Relevance

Keep your content relevant to your audience. Aviod temptation to start commuinicating info that is off-topic for your users.

UXTip 35: Proper Text Weighting

Mix it up with your text. Users give special attention to stuff that's in bold- so if it's all bold, they know not where to begin.

UXTip 36: Keep It Flat

Avoid multiple layers of navigation whenever possible. Tabs over tabs, etc. just gets confusing and the user loses their place.

UXTip 37: Test, Test, Retest

Test, test again, and retest. Then, when you're done testing, test some more. (Oh, and spellchecking is always a good idea, too.)

UXTip 38: Verify Workflows

Map user workflows carefully to capture any and all the necessary business rules for your design. Annotate rules on the wireframe.

UXTip 39: USer Advocate

Go to bat for the users. Often, Sales, etc. has differing agendas and generally bad ideas for users. Be prepared to fend them off.

UXTip 40: Wireframing

Many stakeholders are visual and only get it when they see it. Use wireframes to track and relate requirements to visual thinkers.

UXTip 41: Spell-Checkable Body Copy.

Instead of Lorem Ipsum as FPO copy, try "The quick brown fox..." or such. It looks more natural & won't hang your spell checker.

UXTip 42: User Expectations

Make oft-used actions clear to users & place them where users expect to see them, e.g. "Unsubscribe" listed clearly in the footer.

All Materials © Copyright 1995-2009 by Bobby Foster. All Rights Reserved.