Transcript: [Please note the transcript may not be exact, as I ad-libed in a few places.]
On this episode of Screen Space: Five things to avoid on your websites
Hello and welcome to episode two of Screen Space: Five things to avoid on your websites. Screen space is a podcast for anyone with a website, blog, or other new media. This is not for experts—although experts are welcome to listen. This podcast is for the rest of you who want to make your websites usable, accessible, effective, and efficient—whether that site is a small business site, a personal webpage, a blog, or even a MySpace page. I am Dr. Jennifer L. Bowie, and I teach web design, user-centered design, digital rhetoric, and more at Georgia State University. In addition much of my research is in these areas. I draw on my own research and that of others in this podcast.
Today’s topic is the opposite of last episode’s. Instead of five easy things to do to make your websites stronger, today I am going to talk about five things to avoid. Each of these design mistakes is fairly easy to avoid and in many cases actually making these mistakes takes more time and effort than not doing it. By avoiding these five mistakes your websites and new media will be more usable, accessible, effective, and efficient.
Please do note, while I am calling these mistakes, there may be some cases in which they are necessary. Generally do avoid these, but if you have a really good reason and can get 10 random people and one web designer to agree with you, go for it.
The first design mistake, requiring right scrolling, is really the easiest to avoid. Do not make your users scroll right to use your pages and especially not to read text. One of the most annoying things you can do is make them scroll to finish reading a sentence. I know I often just leave pages that do this, and so do many other users. So, don’t do this. The easiest way to not do this is to use relative settings in your page designs—set your design elements like tables and layers up as percentages of the page—50%, 82%, 100%. This way they should always take up the same percentage of space in your window and not lead to designs that extend beyond the sides of the browser window. The alternative to relative is absolute and this is where you set the pixel size of the elements on your page: for example 100 pixels, 460 pixels, 1000 pixels. The elements will remain this size, regardless of the window size and thus may lead to users needing to scroll right to see the rest of the page. You can easily tell if a website uses relative or absolute sizing by changing the size of your browser windows. If the design elements—like that pink column on the right—stay the same size, it is absolute. But, if the design elements adjust to take up the same percentage of screen space, then it is relative. I’ll put two examples of the same page set in relative and absolute in the transcript so you can see what this looks like. I’ll even make the column in the right pink. There are other factors that can lead to wide pages that require right scrolling. Check your designs out in a variety of browsers and windows sizes. Remember, do avoid right scrolling.
The second design mistake to avoid is asking for personal information too early. Generally users do not like to provide personal information, especially for sites they do not yet know or trust. Not only does providing the information take up time, it can also lead to issues like identity theft. Of course, personal information is often necessary at some point during the use of websites, especially commerce sites. But, do not ask for this information too early. Let the users enter the site and use the site as much as possible before asking for whatever personal information you need. Whatever you do, do not require them to provide personal information to get into the important parts of the site. If you do, it is unlikely users will provide the information and will never get to that key content. You will lose users and customers if you do this. One of the major cell phone carriers had issues with this problem on their site a few years ago. I was browsing all the major carrier sites looking for the best deal to fit my cell phone needs. On most sites this plans were easily accessible, but one major carrier required me to provide my cell phone number before they would give me any plan information. As a user this annoyed me. I didn’t know why they needed it and I could just see them calling me and harassing me. As a designer who knew that this was a bad design choice, and I was further annoyed. As a designer and user, I refused to even consider this carrier after that. While my response may be more extreme then some people’s, it is quite likely requests for personal information like this will turns users away before you can even sell the cell phone plan or whatever it is you have to offer. So, in short, do not ask for any personal information before it is completely necessary. When you do, make both why you need this and what you will do with it clear.
The third design mistake is including a splash page on your site. Splash pages are those pages that come up before you get to the homepage of the site. Often they are highly visual or they may have some animation or sound (or all three). Frequently these pages take time to load and require users to wait. They will sometime have a “skip intro” button, but these buttons may take time to load. Even when they are just images or load quickly, these pages require the user to wait and find the link or button that will take them to the homepage of the site. While some designers see these pages as a magazine covers that will attract users, they are more like the tricky packaging of a new CD—they just slow users down and keep users from what they want—the CD or the site. When they force the user to view some animation or something else that takes time it is even worse—perhaps like requiring users to watch a video about what the CD has to offer before letting them even start to struggle to open it. This is of course silly after people have bought the CD or gotten to the site. Often users will do one of two things when they get to a splash page: they will simply abandon sites when they see splash pages or, if available they will click on the “skip intro” link. In fact, I heard during a presentation that “skip intro” link was the most clicked link on Disney.com’s site when they had a splash page. Users do not like splash pages, so don’t make they suffer—avoid using splash pages.
Interestingly, the three major candidates in the presidential election process right now (and I just checked this) use a combination of these last two things I suggest avoiding—requesting information and splash pages. Hillary Clinton, Barrack Obama, and John McCain all have splash-like pages that ask for personal information before one gets to the homepage of their campaign sites. In fact, on two of these pages it is difficult to even figure out how to get into the real site without providing personal info. On McCain’s splash page the link it not obvious and on Obama’s page there is no clear link, but the header image will get you there. Clinton’s page actually makes the link the most obvious, and thus users may be more likely to end up in her campaign site and not leaving thinking they must provide personal information. While I can see why these candidates may want to collect this information, it seems wiser to get users onto the campaign sites first and then to ask.
Moving on, the forth design mistake to avoid is putting information or links you want the users to see in the “banner blindness” areas. Users have learned to ignore ads on websites. Since ads typically occur in a few spots on pages—particularly the right side and a chunk at the top—users no longer look in these places. In addition, many users ignore anything that looks like it might be an ad. Thus, users have developed “banner blindness”—they simply do see these certain parts of the screen. In the transcript I’ll link to an Nielsen article that shows some eye tracking images and the lack of any visual attention to the “banners” on the page—it is enlightening. The best way to avoid banner blindness it to not put things that look like they could be ads anywhere on your page. Also, do not put anything important on the right side of the page where ads typically are, nor put any highly visual information in the typical location of banners at the top of page. Whatever you do, do not put anything that looks like an ad in these two locations—right and top—because users will especially not see these things. Of course if you have ads, feel free to leave them in these places, but realize they will not be seen. Also, if you have information you don’t care if your users see, then feel free to put them it these banner blind locations. Otherwise, avoid putting information in your site that looks like an ad or is in the typical banner ad locations of top and right.
The final thing to avoid on your website is including moving or flashing images or text. In the mid to late 1990s, many website had spinning globes, moving flames, blinking text, scrolling text, and other such devices. Sadly, this trend is not yet over. Even now pages will have dancing ads, moving images, and text on various locations within their site. While there are many cases where animation, movies, and other such things are important elements to the site, I do not generally recommend having moving or flashing content on your site. Certainly do not have moving or flashing text. This is very hard to read and many users will not read it. If they must read it then they will likely get annoyed and may forget whatever it was they were reading the text for. Moving images should not be used for decoration only. The movement will distract from the main content. In fact, the movement sets off what one professor of mine called our “bear detectors”. Humans developed these bear doctors to not be eaten by bears, or lions, or tigers, or other larger predators. When humans see movement in their peripheral vision (whether it be a bear or a spinning globe), they will look at it to see if they should go into flight or flight mode. While your website is not a predator we have to flee, at least I hope it is not, movement on the page will still cause issues. Users will be distracted by it. The movement is particularly bad when you want users to pay attention to anything else on your site—such as a long page of text. Many users find it particularly hard to read when there is distracting movement elsewhere on the page. I know I’ve stopped reading pages when this has happened, and I am sure you do not want that. Unfortunately many advertisers have discovered the bear detectors and created ads that move—I am sure we are familiar with the dancing people in the mortgage ads on sites—and thus movement is beginning to be linked in users minds to ads and then associated with the annoyance of ads. So, avoid moving or flashing images and text on your site. Do not set off your user’s bear detectors!
In conclusion, I suggest you avoid these five design mistakes:
1) Requiring right scrolling
2) Asking for personal information too early
3) Including splash pages
4) Putting informationor links you want the users to see in the “banner blindness” areas
5) Including moving or flashing images and text
By avoiding the mistakes, your websites will be stronger and more usable. Plus, you will not set off the flight or fight response.
Join me next time for tips on homepage design. If you don’t subscribe, do consider subscribing as we have some great upcoming topics including accessibility, user-centered design, writing for the web, sound on the web, graphic design basics like typography and color, intellectual property and copyright issues you should know, multimedia use, and even a critique of the presidential candidate’s websites.
If you have questions, comments, or thoughts on what you want me to cover please send me an email at jbowie@screenspace.org or check out the Screen Space blog—www.screenspace.org. Have fun and design well!
Screen Space is licensed under a Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 United States License. So, feel free to share as long as you don’t change it, give me and Screen Space credit, and don’t make any money off of it.
Screen Space’s opening music today is “African Dance” by Apa Ya off of Headroom Project and the closing music is “Survival” by Beth Quist off of “Shall We Dance”. Both these selections are available from Magnatune.
Podcast Episode Links:
- Relative Web Page Example
- Absolute Web Page Example
- Nielsen article with banner blindness eye tracking images
The Blog Feed
Thanks for the great podcasts. I’ve been working on a redesign of our church’s website, and these have been good reminders of what to do and what not to do. It also gives me something to point to when the committee says “Hey bring back the animated header image!”. That was the first to go…out of the corner of my eye it looked like a lightning bolt was striking the church, and I couldn’t for the life of me figure out why someone would think that was a good idea.
Left by Kristin on April 22nd, 2008