Web site usability

Newbies to web publishing often mess up their sites. They make their content inaccessible due to their wacky layouts, distracting animations and JavaScript, and excessive slang.

This is ESPECIALLY true of the cut ‘n paste code users on Xanga. Lots of tech-savvy people despise Xanga. Some say it’s because of its closed-source, proprietary nature, but I don’t really agree. Xanga itself is okay, but it’s the individual people using Xanga that give it a bad reputation.

When people think they’re making their site layouts kewl, they also cause it to become counterintuitive and counterproductive.

Here’s the list of generally disliked practices for any site–not just Xanga. It’s in order of severity, starting with the worst offense.

  1. Text that is (virtually) the same color as the background. Also known as “spoiler text”. If you have to highlight text to read it properly, the user will be very annoyed. Highlighted text also often disrupts embedded images, inverting colors or dithering a dim color in. Also, it makes possibly nice layouts look disgusting because the words are “boxy” and every element on the page is highlighted. Why force your users to CTRL-A/APPLE-A, or worse, triple-click, just so they can read your page?
  2. 31337 $P33k, rAnDOm cApS, ALL CAPS, no caps, and rely hard2read chatr slang. C4n U 34$!1y r34d th1$? (Can you easily read this?) hOw bOuT ThIs, iS tHiS cOOl oR wHAt?! Capitalization was designed to help letters to naturally flow together, but rANdoM cAPs breaks up this flow, AND ALL CAPS CAUSES WORDS TO APPEAR IN BLOCKS WHICH ARE HARD TO READ. no caps n hrd2rd slang + carless mispelings will cause most visitors to head for that green left-pointing arrow on their browser.
  3. JavaScript alerts on page visit/close. Annoying. Simply and utterly irritating. “HI!!!! I hope you like my SUPERKEWL site!” Ya know what, I hate it already. Bad first impression. Browse away or click a link–what’s this? “I hope you liked my site! CYA!” What’s even more annoying is when these boxes pop up even when you’re just browsing to another page within the site. This is especially prevalent on certain people’s Xanga sites, where they blindly cut and paste from their favorite “HTML/JavaScript codes” site.
  4. Changing the mouse cursor. Why should the user have to look for their mouse cursor just because you thought a crosshair or a misleading “resize handle” (one of the different types of cursors that pops up to signify that you can resize) would look cooler. Mouse pointers are good context clues for users to see what they are doing. I’m always disoriented when I see resize handles, precision crosshairs, or the like, for no apparent reason.
  5. JavaScript which resizes or moves the entire browser window. For example, the window shakes on visit. Actually, if it’s a fun button-activated feature (like a SHAKE ME! button which shakes the browser briefly) it’s generally acceptable, because the user is expecting it to happen. Sites which resize the browser to full screen automatically, disturb the user’s preset, preferred browser size. The latter is one of my biggest personal pet peeves.
  6. Background music without an off option. Not everyone wants to hear your favorite song blaring on their speakers, especially if the person is browsing your site during work in their office.
  7. IE-only or OtherBrowser-only compatible sites. The web is a big place, and just because you use Internet Explorer on Windows doesn’t mean everyone is. Check your site on as many browsers, on as many different platforms, as you can. How do you use IE when you’re on Linux? Some people are using text-based browsers, so show consideration! (Text-based has superior speed as opposed to graphical rendering. I use it when on s-l-u-g-g-i-s-h machines.) Cross-platform tips:
    • Don’t leave users with graphical-only navigation. If you’re going to use imagemaps, make sure you have at least a small text-based nav at the bottom. It barely takes up any space on graphical browsers, and additionally, makes your site look more professional. It would look something like: home | about | more stuff | contact | copyright
    • Don’t rely on JavaScript. Many people either can’t view, or have disabled JavaScript in their browsers. See this article on how “JavaScript Should Enhance, but Not Take Away” from a site’s functionality.
    • Use ALT tags for your images. If the image has exceeded bandwidth/been moved or deleted/been blocked by the user/become corrupt, seeing words instead of a nondescript red X or broken image sign really helps. Additionally, text-based browsers cannot display images.
    • Aim for standards-compliance. Following strict standards increases your chances for correct rendering. If possible, go for XHTML.
  8. JavaScript mouse followers. Hey look, code for a JavaScript mouse following clock/banner/etc! I should add it to my site to bloat it and make it look cool Wait, some people might find it distracting. [think...] NAH, who cares about them. I think it’s awesome and that’s all that matters!
  9. JavaScript bouncies. These are less common, but extremely annoying. Little pictures float around in the background and jump around. Boing, boing, boing, AHHH!
  10. Blinking text or animated GIFs which constantly blink. Blinking text is a big no-no. If you want to put an animated GIF on your site, make sure it doesn’t abruptly jump about every second. Add a pause before it repeats.

In short, it’s quite easy to see when you’ve stumbled onto a beginner’s web page. Avoid these common mistakes and you’re guaranteed to have more frequent viewers.

5 thoughts on “Web site usability

  1. wow, you wrote all of that?? O_O oh, p.s for the background music thing, you can stop the music. all you have to do it click on the red X on your web brownser, at the top of the page. that’ll stop the music. but you can still continue to browse the website. SOMETHING I KNOW THAT YOU DON’T!!!!!!!

    x_o

    see youu.

  2. I realize that the stop button can be used to turn off background music, but it’s far from ideal. It also stops everything else on the page, e.g. animations, and if the page hasn’t finished loading, then the stop button will cause an incompletely downloaded page to be displayed.

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>