Jeremy Keith demonstrates what could be a disgruntled end user face.

Being a web developer and an avid spokesperson (for lack of a better term) for such things as accessibility and usability, I tend to browse the web and look at what other developers and designers around the world are creating. The amount of beautiful websites on the web today is stunning and I’m happy to see it come along this far. I’ve watched people like Jeffrey Zeldman and Eric Meyer pioneer it to where it is now and the journey thus far has been an experience (see how I threw that in there?). I’ve also found that a lot of times the term “beauty is only skin deep” applies heavily, kind of like makeup before showtime arrives.

Where to draw the line

The huge influx in use and introduction of object-based Javascript libraries such as Scriptaculous, MooTools and my personal favorite, jQuery, has catapulted usability and the “wow” factor greatly. Even the least savvy of designers can accomplish some impressive things with each library. I’ve also seen it do nothing but hinder websites to the point that they’re just plain unusable. Where do you draw the line? When does the shine really become too much?

A prime example of bad usability is when a website solely relies on a Javascript library just to navigate the page. I’ve noticed that a lot of designers are trying to use creative ways to navigate their pages. This is all fun and nice but there are actually a few reasons to avoid this at all costs:

1. Javascript can be disabled. Some savvy users browse website weary of what scripts may run in the background and potentially cause harm or hang. Unless your website degrades gracefully and can still offer easy navigation without the absolute need for Javascript, then you’ve got a huge problem on your hands.
2. A lot of these methods us an id for each content section div, thus all of your content is essentially on one page. This can greatly harm search engine placement. Search engines will only see your website as being one page when in reality you want search engines to index multiple pages from your website. This also greatly adds to usability because then the end user can go to exactly the page they want and not have to shuffle through some fancy navigation that slides, fades, serves you tea, sharpens your pencil, etc.
3. Older versions of Internet Explorer have trouble interpreting Javascript. IE6 is prone to throw “object undefined” errors with libraries like jQuery. I put this last on the list because support for IE6 should realistically be dropped completely in favor of versions 7 and 8.

Prior to the launch of any website, running rigorous usability tests with a set of random people has always been good practice. Handing it off to someone with no prior knowledge of the website’s existence and letting them figure it out for themselves. It’s kind of like giving a chimp a Rubix Cube and seeing how long it takes him/her (and how easily it is for them) to solve it. If it takes forever and they become confused and/or frustrated, then you should definitely be revisiting your creation before launch.

The user experience is like a ball of clay sometimes. Despite your numerous usability tests, even some users will be confused or hung up somewhere along the line. I’ve experienced this first hand and having a client that is very open to the feedback of their clientele makes the improvement process a whole lot easier. The same can be said about marketing. It can be hit or miss. You abandon the things that just don’t work, improve the ones that show promise and leave the things that are spot on.

Accessibility: A web for everyone

Accessibility is another factor that has both suffered and thrived since the earlier days of web design, due to the widespread education provided by pioneers in the industry (the aforementioned ones above that is). Accessibility should be a huge factor when creating a front end user interface for a large audience, and there should never be a reason to avoid making accessibility a target goal (especially when the practices to get there are so easily integrated into your everyday workflow). You should accommodate everyone.

The easiest way that I can relate this to everyday life is like this: Let’s say that you’re an engineer, drawing up blueprints for skyscrapers and various other buildings. Your job is strictly guided by codes that apply to everything—electricity, water, fire exits, extinguisher systems, etc. Another requirement for every building is wheelchair ramps and entries that are wide enough for a wheelchair to fit through. The building has to be accessible to everyone. The same applies to the web. Simply disregarding accessibility for any reason is essentially banning a certain group of users from viewing your website properly.

A fellow web developer friend of mine has had a cochlear implant device most of his life due to the fact that he is deaf. Like myself, he’s an avid movie, television and technology lover, but he has a justified beef with television and movie production companies: closed captioning is not enforced. It’s very lax and extremely inconsistent. Some movies offer it while others have absolutely no CC option whatsoever. It’s something that you think would be a requirement for all Blu-Ray and DVD releases. Apparently this is not the case, thus he’s unable to enjoy certain films and shows. This is a prime example of accessibility in everyday life.

The UX Household

My view of the user experience has always been simple. I consider the user experience to be a house that serves as a home to a set of roommates. Each roommate contributes something different to the household:

• User Experience
  • Usability – The head of household. Usability is the ease at which a user can become acclimated to a website, to put it simply. All elements that come after usability are essentially contributors to the usability of a website.
  • Accessibility - Accessibility is the roommate that goes out of its way to make every guest feel at home. Accessibility is the practice of making your website easily accessible to people with disabilities. This includes (but is obviously not limited to) people that use screen readers.
  • Content – This is the guy that always has information to share and is easy to get along with (as long as the rest of the roommates don’t piss him off or something). Hindering the ease at which the user can gather the page content or somehow breaking usability, thus hindering your user’s ability to read the content, can cause huge issues. Ultimately your “house” can become chaotic, sort of like those reality TV shows. “Content” is fairly self-explanatory and at first glance can seem like a broad term. Your content is the meat and potatoes of what your website conveys. Keeping your page content concise and clear is usually your best bet. Most users are more apt to read bullet points and look at images before they’ll read paragraphs.
  • Functionality – This roommate keeps the content guy grounded and often times brings out the best in good ol’ content. Functionality is basically the fluidity with which your website’s special features interact with various browsers, resolutions, etc. and how well they hold up. Your user shouldn’t be solely relied upon to have extra features or add-ons in their browser or browsing environment just to make your website’s featuers work properly. An example of bad functionality is when you create effects in jQuery that break, shift or just plain fail when the user provokes something such as a browser window resize or a font size adjustment. The same applies to all aspects of the website. Shifting divs can be an issue if you haven’t properly cleared elements and the viewfinder encounters a resize or a resolution that the website was never tested on.

Searchability: How easily can you be found?

Another aspect that I think could be factored in as a “roommate” is searchability. The ease at which your website can be found can greatly help or hurt the user experience. There are many factors that can contribute to the rise and fall of your website when it comes to being found at all:

• meta tags: description, keywords… – Although most search engines are doing away with a lot of them, having a description meta tag is crucial. Without it, search engines rely on the next best thing to grab: your page content. Some people will tell you that the keywords meta tag is dead but that is not completely the case. There are some search engines out there that still utilize it, so keeping it won’t hurt you. It’s good to be safe than sorry.
• Heading tags: h1, h2, h3… – Search engines “crawl” websites and follow by the structure of elements provided to them. Having properly ordered heading tags and using the <p> tag to enclose page copy, is good practice and should be utilized.
• Relevant page content – This tends to be a trial and error aspect of searchability. Keeping your content relevant and concise to what the website is about is important, but make sure not to be redundant. Example: if Google sees a keyword within your page copy that is used numerous times through the same paragraph, your website can be penalized.
• Fresh page content – The frequency at which your content is updated can make or break you. If Google or any other search engine scans your website over a period of 6 months to a year (roughly) and sees that your content has not changed, your rank will suffer. Keeping your page content up to date will help greatly. If you find it practical, having an active blog can help. I stress “active” here because having a blog is one thing but having a blog that is never updated will hurt you more than it will help you. An inactive blog page is another page for search engines to penalize you for.

Think about it. Unless all of your website traffic is miraculously direct traffic only, your website is going to suffer a huge deal. If people can’t even find your website, then all of the aforementioned aspects of the user experience are out the window. You have to get the guest in the door before you can do anything else.

Wrapping it all up

The user experience can be a very broad term but there are many aspects that make up the “household”. If all of the roommates can’t live in harmony, the entire house will suffer. There should never be an excuse to ignore any UX element, unless the client just doesn’t have the budget or the website is strictly for internal use and is only available to a select audience.

I hope that you’ve gotten this far and that you found my insight informative. I am in no way the ultimate spokesman for user experience studies but I like to think that I have a detailed grasp on the matter. I would love to hear your thoughts! Please take a moment to leave a comment below. Thanks.

Similar Posts

• Tables vs. CSS? This debate still exists?! (1)
• 2008 A List Apart Survey: Tomorrow! (0)

I came across this article via @paulrobertlloyd.

K.I.S.S. means keep it simple stupid and that means tables because tables are simple. And they also work!

Have fun trying to update a tables-based website! Also, have fun with your 10 million lines of HTML, as opposed to my 300 or so. Why is this discussion even going on? Everyone has come to the conclusion that designing with divs is far easier. Aside from the fact that TABLES ARE FOR TABULAR DATA, not layout. They were NEVER designed for page layout. In fact, the web wasn’t even expected to be where it’s at today. I hate how this article tries to teach readers a bunch of shit they discarded ages ago. Hey, that’s cool. If you want to use tables for layout, that’s your prerogative. I’m gonna stick with my realistically simple div-based layout. Thanks anyway.

Tables, at the time, were the only known solution for layout. They were a band-aid. A boat in uncharted waters. And like most things, the div method was discovered, fine-tuned and put into the game because it’s easier. The same applies to CSS. CSS offers global control to a website and gives the designer a better platform to make future website updates on.

It’s one thing to use the regular CSS style to replace the same fonts that will be used all over the place. But it’s another when you take little bits and pieces of code out of the page and bury it some huge .css file and then try to figure out and try to remember where they all came from and what each piece of code did 2 months from no.

What a cop out. “I can’t remember the names I used on my div containers!” Are you actually serious? This entire article screams a bunch of words in my head. The biggest one is “LAZY”. I can go back to a layout I did 3 years ago and only spend about a minute remembering the structure I used. You know why? Because it usually involves about 5 to 6 containers, all named accordingly to what they are. They also require far less markup than your shitty tabular layout. Get out of Dreamweaver Preview mode for once in your life. Go ahead, give it a try. I know the Matrix is a scary world but some day you have to jump in and take the reigns. Just like the thousands of people that did the same and are making beautiful websites because of it.

Let’s take the website that posted this article into consideration. They use inline styles. INLINE STYLES. What happens when it comes time to update the website? Are you going to do a find and replace and pray that it doesn’t bork your entire website? Better make a backup first. Actually, it looks like it was designed back in 1995 so I doubt they ever update their website, other than fill it with articles that are completely irrelevant to today. To top it off, the website is driven on .NET.

I remember setting up a dedicated .NET IIS server. Yeah, I remember how much I fucking HATED every moment of it. Setting up every folder as an application, shoveling through weird errors, pulling all of my hair out. But that’s beside the point. We all know that Microsoft makes EVERYTHING needlessly inefficient and difficult because they feel like they have to hold their ground and use something proprietary. We also know that they never follow any sort of standard, except for their own. This article even covers that. ie, Publisher (absolute crap), Frontpage (complete garbage), Internet Explorer (do I even have to say it?), Silverlight (Flash clone).

The ratio of people who use CSS/div layouts, vs. Table layouts is far unbalanced, unless you’re stuck in 1995, and/or uneducated, and/or just plain lazy, and/or just plain stubborn. I know a few designers that still use tabular layouts. They’re also the same people that use inline styles, NO meta tags, Photoshop’s automatically generated HTML and no alt tags for images.

Let’s be realistic here. The table layout method will never again gain any sort of momentum. It’s done and gone. If people want to continue using it, that’s fine. The only people that will complain are the professionals like myself, who have successfully put the div/CSS method into play for years with flying colors.

Similar Posts

• The User Experience Fog (4)
• 2008 A List Apart Survey: Tomorrow! (0)

You can check it out at A List Apart tomorrow.

Similar Posts

• Bloqhead Gets WordPressed Up (0)
• Advice Dog! (0)
• Hurry Up and Wait (0)
• Drupal Hell (0)
• CMS Made Simple 1.3 (0)