Recently in Usability Category

December 9, 2009

I really love the new layout of T Magazine. It's different, sleek, clean, and beautiful. The only thing I don't like about it is the fixed center column...it's just not user friendly and it's weird. If they use the rest of that column for more content, or maybe stretch some other feature across the center of the page, it would make the new look more enjoyable.

By kim | Permalink | Comments (1)

---

August 14, 2008

This week in A List Apart, there is a fantastic article by Lisa Herrod called Deafness and the User Experience. For all interested in making your sites as usable as possible, this should be required reading.

I have just assumed that for the Deaf, subtitles and captioning would be enough when visiting a website with audio or video -- and I never considered that there are things that need to be done on text based sites to provide a better, more understandable user experience. There are a lot of things, in general, I hadn't considered until now, like how sign language doesn't directly translate into what we speak or write. Lisa provides some great hints on what can be done to avoid language confusion and so much more.

Also, on her personal website, you can vote for her presentation on Aging, Cognition & Deafness: The Quirky Corners of Web Accessibility to be accepted for next year's SXSW.

By kim | Permalink | Comments (1)

---

August 13, 2008

About a month ago, I was visiting my Dad in Tulsa and I used his pc to check my email and do a little surfing. I didn't know, until I had to adjust my eyes to the huge font size, how bad his eyesight had become. I also didn't realize how terrible most websites look with pumped up font size.

Although people like Jakob Nielsen and Molly Holzschlag have been preaching the value of web usability and standards, sadly most websites don't allow for simple font size adjustment. It sometimes seems enough to use alt tags on images or to worry about how our sites look in IE6, but if most of us realized how terrible our sites look with 16px, 20px, or even larger font size, we would realize it's not enough.

Why should we care? How many older people are actually surfing the web anyway? A lot, actually, and that number is growing. According to Pew Internet and American Live Project, 70% of people aged 50 - 64 are online, and 35% of people over age 65 are online. As the rest of us will eventually be in those age groups, we'll be pumping up the size of our fonts, too...and it will pay off to start thinking about that huge fact sooner rather than later.

My Dad was online before I was, and at 69 years old, still spends a lot of time online. He does his banking and pays his bills online, he reads the news online and chats with his buddies on Google Talk. He shops for coffee and exotic beer...does comparison shopping before buying a new TV or lawnmower. He makes travel plans and searches for recipes, but because he magnifies the fonts, he isn't getting the same user experience that those of us with better vision are getting. He's a great example of how web-savvy older people can be, and of why we need to worry about designing for them, too.

I pulled up several news sites and grew the font size up to anywhere from 16px to 24px, and on a 1440 x 900 monitor, all failed. I measured all of the big players, since they're considered, for the most part, the ideal and are the sites most local organizations want to emulate. I tested in Firefox, IE6, IE7 and Safari. IE6 doesn't provide the same control as the other browsers, so many sites did better there for that reason. In IE7, using the zoom feature, the sites broke in different ways, since the page is actually zoomed instead of the font-size itself increasing. Firefox and Safari use a similar method of increasing the font size, and so the pages broke in the same way. The following shots are based on Firefox.

ABC News

ABC News' main problem was with content overlapping headers. The top story headline and teaser were cut off and the top nav was a bit jumbled. With a few styling changes though, their site could show well with big font.

NY Times

The New York Times did okay up to about 16px to 18px, but beyond that it broke. The bottom half of the page did fairly well, but the main content area at the top skewed all over the place.

CBS News

CBS became unreadable in areas with increased font size. Their top nav broke and the top story was partially hidden by the left navigation. A lot of their special features were broken as well, where it was hard to tell what was going on.

CNN

If you wanted to just look through the top stories on CNN's website with huge font, you would be in luck. The headlines and teasers fared well with an increase in font size, but the top nav didn't. There is overlapping and unreadability in that area, but with an improvement there, CNN would pass the big font test.

MSNBC

MSNBC was the worst offender. It broke after enlarging with just one click, and as the font grew, the more unreadable the site became. Headlines and content were cut off, text overlapped, there is no way to figure out what's going on in the world by looking at that.

I also checked out non-news sites aimed at seniors, and found that even the AARP website broke under the weight of big font, not to the point of being unreadable but to the point that some of the top nav links disappeared. The Ageless Project, which is a wonderful thing, also, sadly, broke.

I don't mean to limit the talk to advanced age, because there are younger people out there who are also visually impaired and who have to use a larger font as well. So it's not just the AARP's of the world that need to worry about providing a good user experience along with larger fonts. News sites in particular, though, should be concerned about the ability to present well under various text-sizing circumstances. Everyone needs to know the latest news, and people of all ages check it at least occasionally. It's only right to make sure they can read the news without fumbling around a broken layout. For the marketers and ad execs out there, it makes financial sense to make sure that everyone can access the site comfortably in order to click on the promotions, ads, etc.

I'm on a new crusade against big font discrimination. Check your site to see if it passes the test and if not, see what you can do to change that. Of course, it would be ridiculous to think that a site can look the same with various font sizes, but it can at least be usable, if not beautiful.

By kim | Permalink | Comments (0)

---

June 8, 2008

This has been the subject of much debate, and probably always will be. The question has been asked again at OJR, where people are asked to choose the best web font from the following: Arial, Courier New, Georgia, Times New Roman, Trebuchet MS and Verdana.

Verdana has the lead, followed by Arial and Georgia. Those are definitely my top three faves, but I think I prefer Arial, because in long paragraphs Verdana doesn't look as clean. Georgia is beautiful and easy to read, and I like using that for certain design styles as well.

Michael Surtees wrote about a British design company called Message that is conducting a survey on font and usability. This is a wonderful study, and allows you to choose from several font styles which can then be re-sized to what's readable to you. You can also adjust the column width and line height, so they go further than just asking what the best font for the web is. After participating, you're given the option to email them to receive the results, once they come in. I'm very anxious to see how the study turns out.

By kim | Permalink | Comments (0)

---

May 31, 2008

Although our sites have been concerned with SEO to a small extent for a while, there has only recently been a push to educate our site managers with deeper knowledge of what needs to be done to put their sites on top. One of the biggest and simplest things that can be done is to take another look at the headers and determine whether or not they can be read by search engines.

Using graphic headers has been criticized by a lot of usability experts because of the inability for search engines and screen readers to see images. If you add your graphics into your page in the right way, though, you can have your graphic branding and also be seen by every user out there, no matter how they see the web.

Do it with HTML
For those who embed their header images into the html, the solution is simple. Use alt text to spell out the header so that both search engines and those who use screen readers can "see" the image. I'm sure that most people know how to use alt text, but for those who don't, do this:

<img src="http://www.yoursite.com/IMAGE_NAME" alt="description/title of image here" />

Do it with CSS
You can also combine text with a graphic header that is embedded in your style sheet. To do this, create a div for the text portion only, and set the left margin at -5000px. Then place that div inside of the one that contains the graphic, and you'll get the same benefit as alt text without having to use the image in your html.

CSS:
.headerText {margin-left: -5000px;}

HTML
<div id="header">
<div class="headerText>TITLE TEXT HERE</div>
</div>

The title text will still be readable by search engines and screen readers, but won't be visible so you can still use a graphic header.

By kim | Permalink | Comments (0)

---

May 22, 2008

Looking over W3C's list of stats on browser popularity , it amazes me to see that some of the most high profile sites online are still designed to be best viewed in IE, without consideration that the site often looks horribly broken in Firefox, Safari, and Opera. Even worse, a site will be designed based on what it looks like in one version of IE, to the detriment of not only the other version (I'm talking the difference between IE6 and 7) but to the other browsers, as well.

Experienced developers who do it for a living already know this, and they test their pages in all of the five above-mentioned browsers before making them live. For those who code web pages as a secondary (or third or fourth) duty to their primary job responsibilities though, many don't have a clue about the browser differences.

Why does it matter? Because according to the W3C's list, as of April of 2008, both IE6 and IE7 users comprise a total of 53.8% of the population, Firefox 39.1%, Safari 2.2%, and Opera 1.4%. The only browser that's gone down in popularity is IE6, understandably, as more users either upgrade to IE7 or make the switch to another browser.

It's important to note that Firefox has seen a popularity jump of 2.1% in the last month, whereas IE7's rise in popularity was 1.6%. Safari has climbed a steady .1% for every month this year, as more people switch to Mac from PC. Opera has stayed steady at 1.4%, still being the underdog in the series but having the best mobile browser capabilities.

People are discovering Firefox as a safe and friendly way to browse the web, and its popularity is significant. Most of the techie types I know use Firefox, both for its security and user-friendliness. We all then preach the Firefox word to our families who have problems with IE and to aspiring developers who use the developer plugin for troubleshooting.

Because of this, and because of the growing number of people who are committed to using the Mac with its Safari browser, it is significant. Almost half of your audience (and the most web savvy) don't use IE, and that number is growing. It is imperative that all sites, especially news sites that need to reach all the people, are readable in all browsers.

One website I feel comfortable picking on in regard to how it looks in non-IE browsers is MSNBC. Even though it is a Microsoft site, it is primarily a news site, or at least that's the way it presents itself. Because it functions properly only when viewed in IE though, it's losing a huge number of readers who use other browsers. Those lost readers are also lost revenue in that if they can't view the site, they can't click on the advertising that pays the bills. Seems to me that even Microsoft would see the problem with that. But because of the lack of compatibility, they risk losing readers to CNN or some other news site that does function properly across the board.

Don't let your website fall into this category. It is easy to download all of the browsers to ensure that you are reaching the greatest audience possible. There is even a stand alone version if IE7, which means that you can have both IE6 and 7 on your computer at the same time. If you've upgraded to IE7 already, you will need to strip that upgrade back to version 6 (ask a knowledgeable friend if you're unsure about how to do this), but it is worth it.

By kim | Permalink | Comments (0)

---