101 UX Hacks: A Cheat Sheet for Fixing Any User Experience

You asked for it, now you’ve got it. Go through this list of UX Hacks with any website or software and by the end you’ll have a pretty fantastic, elegant and intuitive application.

      Visual Design

  1. Be consistent. Pick a design style and stick with it. Every page should be a minor variation on a theme.
  2. Never use more than 3 colors on your website. One neutral (gray, pale blue, pale yellow), one accent (any bright color) and one bold (white, black). Do the same for your living room.
  3. Use less colors if you use more images in your web design. It will make the images pop.
  4. Don’t use flashing anything.
  5. Don’t use Flash.
  6. Don’t use dark backgrounds for text.
  7. All websites must be responsive.
  8. If you make everything big, bold and loud, then nothing is big, bold or loud. (Same for making everything small.)
  9. Use more white space – it will make everything easier to read and less intimidating.
  10. Text should be #000, #333 or #666. Anything else is too light to read.
  11. Headers should be graduated in size, with H1 the largest size and H6 the smallest
  12. Use images. Nobody likes to see a whole screen full of text.
  13. Use at most 2 font types. Helvetica should be one of them.
  14. Underlines are only for links. Book titles should be italicized.
  15. Don’t use splash pages.
  16. Make your pages scanable by using heading, subheadings and spaces between blocks of text.
  17. Use images with people in your website. They’re friendlier and more compelling than those generic,  stock-art photos.
  18. Use pictures of yourself doing something spontaneous and fun. Headshots are canned and look it.
  19. Identify the section at the top of the screen. E.g. Contact Us
  20. Don’t center align all your text.
  21. Line height should be 1.5 for all paragraphs
  22. Leave 2 lines before headers and 1.5 after

[divider]

Startup Stock Photos

Writing

  • Ask a friend to proofread. You can’t find all your own typos.
  • Write a unique synopsis for each article on your site for use in Tweets and Posts.
  • Include an attribution (via @susanrits) so once an article is shared everyone knows where it came from.
  • Don’t update the Copyright year every new year. You want to show when you first earn the copyright, because priority is everything.
  • Sound friendly and polite in all your messaging.
  • Be transparent. Don’t try to trick your users, don’t hide your goals. They’ll like you better for being authentic.
  • Write short, clear sentences with very few adjectives.
  • Start with what you do. Don’t assume anyone landing on your website already knows. E.g. “We make …”
  • Tell your prospective customers why they want to work with you. Don’t assume they’ve figured it out. E.g. “You want to work with us because…”
  • Don’t use cute names for buttons. User won’t know what they mean and they won’t click on them.[divider]

    Navigation

  • Use one top-level navbar on every page so users can always find their way back.
  • Don’t disable the browser back-button. 40% of all clicks are on the back button.
  • Pick the 5 top activities your users will want to do, and make sure they are your 5 top navigation items.
  • Don’t use text smaller than 13pt. 16pt is best for blocks of text.
  • Use a grid so your website is responsive to mobile.
  • Don’t vary where you put the navigation. If you start with it on the top, keep it on the top for all pages.
  • Use one color for all your links and buttons, and don’t use that color for anything else except the logo.
  • Use the same button style everywhere.
  • Organize your website like you organize a filing cabinet: think main categories, subcategories, sub-subcategories.
  • If the page takes longer than 15 sec to load, your images are too big.
  • Clicking your logo takes user back to the home page.
  • Put your contact information in the footer of every page.
  • Menus should also identify where the user in in the website or software.
  • Make sure your top-level navbar is always visible, no matter how far down the page the user scrolls or what page they click to.
  • Simplify your website until a user can easily make a mental map of its layout.
  • Remove everything from your software except what is absolutely necessary for the user to accomplish his task
  • Don’t make a new window open with every new page.[divider]

    Interaction Design

  • People read from left to right, top to bottom in Western countries, so organize your tasks on the page from top left to bottom right.
  • Don’t scroll horizontally AND vertically.
  • Keep your submit button close to the end of the form.
  • Search is for people who know what they’re looking for.
  • Scan is for people who aren’t sure what they’re looking for. (You need both)
  • If you give a user an error message, make sure it’s one they can both understand and take action on. GOOD: “Oops, that doesn’t look like an email address, please try again.”  BAD: “Valid authentication credentials were not provided”
  • Give the user feedback when a form was correctly submitted. “Thanks, we got your information and we will contact you.”
  • Buttons and links should change color when clicked on, so the user knows they clicked on it.
  • Don’t require the user to hover over an object in order to get more information.
  • Don’t require a user to click through multiple pages to read an article or get more information.
  • Use permalinks so users can share your pages with their friends.
  • Use Social buttons on every page, so users can share your content with their followers.
  • Try to use words instead of icons. If you must use icons, make them very obvious.
  • Use tool tips with your icons.
  • In complex processes (like multi-page forms) include a progress bar so users know when they will complete the task.
  • Make your form boxes big! At least 16pt.
  • Use target=”_blank” for external links so they open in a new window and users don’t lose track of your website.
  • Help your user out. If I don’t name a document, it should create a default name for me.
  • Don’t place restrictions where they aren’t necessary. For instance, allow all of these when entering a phone number: (206) 555-1234  206-555-1234  2065551234  206.555.1234  1-206-555-1234
  • Always provide a link to reset your password.
  • Make text input boxes expandable so users can actually write a paragraph in your box.
  • Think through your onboarding process. How does the first time user go through your website or application?
  • Think through your power-users needs. Do you provide shortcuts and refinements that allow skilled users to organize and customize?
  • Identify one main task every user will want to do with your software or website, and make sure it’s the easiest thing to find and do on your website.
  • Space links and buttons out so that mobile users can tap them
  • Use warning badges sparingly. If everything is ! then nothing is !
  • Don’t over-use audible alerts on mobile. If you do, your users will turn them off.
  • Don’t make any task require more than six steps or the user will abandon.
  • Don’t delete content from a form when user has to come back to fill in missing boxes.
  • Don’t use freakin’ Captcha! It’s not human friendly either. Use JavaScript, mathematical questions instead (“how much is 1+1”).[divider]

    Advertising

  • Try not to use modal windows that interupt the use flow – it frustrates users to suddenly have to stop what they’re doing and deal with your goals instead
  • Make sure links on ads don’t look like links on your site. Nothing irritates a user more than clicking a link and ending up at an advertisement.
  • Don’t let advertising dictate usability, it will only lead to failure in the end.
  • Don’t require users to register before they sample your website or application.
  • Only sleazy websites use pop-unders.
  • Identify ads as advertising, or risk alienating your readers.
  • Never use more than one popup per section (not page, section)[divider]

    Testing

  • If your Mom can’t use it, 80% of the people out there can’t use it either.
  • Do a quick focus group with your friends. Ask them these three questions about your business website: What do we do? How can you find out more about our work? Where is our email address? If they can’t answer without your hints, you haven’t designed it well enough.
  • Include a place where users can give you feedback on your site.
  • Read all the feedback you get for your site.
  • Click on every link and try out every form before you launch.
  • Once a month, click on every link and try out every form. (I don’t know how, but they always seem to break.)
  • Test your site on mobile phones and tablets. Don’t make mobile users pinch and scroll.
  • Identify the 5 main pain points for your users and focus your first efforts on eliminating those.
  • Don’t ask your users how to design the software, they don’t know.
  • Ask your users what they wished the software would do if it were magic. Then figure out how to do that with technology.
  • Ask your users to complete a task, then watch what they do. Where they hesitate or backtrack is where you have things to fix.
  • Do several rounds of testing, but only have 4-5 people in each test. Usually 3 to 5 respondents per round are enough to encounter many of the most significant problems related to the tasks you’re testing.
  • Ask users to think out loud as they’re completing tasks so you understand the thought process.
  • Don’t provide hints or tips — you won’t be there with hints and tips for everyone using the software.
  • Don’t ever, ever do this: www.worldsmostannoying.blogspot.com
  • By | 2015-10-28T08:00:11+00:00 October 28th, 2015|Uncategorized, UX Tips & Tricks|2 Comments

    About the Author:

    2 Comments

    1. […] You asked for it, now you've got it. Go through this list of UX Hacks with any website or software and by the end you'll have a pretty fantastic, elegant and intuitive application.  […]

    2. […] “You asked for it, now you've got it. Go through this list of UX Hacks with any website or software and by the end you'll have a pretty fantastic, elegant and intuitive application.”  […]

    Comments are closed.