In episode 8 of Screen Space 8: Length, Contrast, Alignment, and Critique

Welcome to Screen Space your podcast about creating usable, accessible, effective, and efficient web, blog, and new media design for the everyday (and non-expert) designer. It is August 3, 2008, and this is Episode 8 of Screen Space: Length, Contrast, Alignment, and Critique. The episode includes a few listeners’ questions, a discussion of the Screen Space Star Rating System, and a rating.

For any new listeners (or in case you forgot), I am Dr. Jennifer L. Bowie, a professor at Georgia State University. I teach and conduct research in areas related to new media, web, and blog design.

Now, let’s dive into the show. I have three listener questions today. The first is from Kristin Schierer in New York State. Kristin, who is redesigning the website I am rating today, asked “how much text would you recommend for 1 page?” This is a great question, so I though I’d answer it here. Ideally, text should be kept to under a screen per webpage. People don’t like to scroll, and any more than a screenfull makes them scroll. However, this may be difficult to work on some sites, and making the users click a zillion times to keep reading a single screen of text in a long document may also annoy them.

If you are putting the text directly onto your site, and not providing a link to a formatted printable form, then it is best to keep it under three screens of text. More than three screens and readers may get overwhelmed and may lose their place. Also, if you are going for more than a screen, make sure you use headings and other document design techniques to help them skim and keep their place. In addition, make it clear from the design of the site that there is more text “below the fold”. You can do this in many different ways, but the easiest is to just make sure you don’t have huge gaps of white space that could look like the end of a page. Do check your design on various screen sizes to see if it works.

As I covered in Episode 5: Web Writing 101, do provide links to printable documents. Instead of copying a long document onto your webpage, just put a link for the readers. If you have a lot of text you need to cover this might be the best way to do so.

My second question is from Stephen Eley, of Escape Pod. In Screen Space 6, I said that black and white have the highest contrast. He asked if white and black was the highest contrast or if yellow and black contrast more. This is a good question and the answer draws on some concepts I did not have space to cover in the episode. The real answer is both combinations are high contrast, but the highest depends on which type of contrast you mean. The yellow and black contrast is a hue contrasts. The white and black contrast is a value or a brightness contrast. I generally was discussing value contrasts, because the hue contrasts are more difficult to work with and when viewed by colorblind users the contrast can be messed up. For example the yellow and black contrast ends up being a light grey and black contrast for some colorblind users, and thus doesn’t have the same level of contrast. The white and black contrast should work the same for users with or without colorblind issues.

In addition, hue contrast can cause the blurriness and vibrating issues I discussed in Episode 7. So stick to value contrasts when you can.

I did find two cool sites you can check out for help with your contrasts. The Color Contrast Analyzer, by Colors on the Web, uses the World Wide Web Consortium algorithms for contrast to check your color contrasts. You just type in your colors and it let’s you know if the contrast meets the World Wide Web Consortium guidelines.

Also, there is a handy table at Standardzilla with various hue contrasts and examples of how they look to colorblind users. You can see how the yellow black. I’ll put the links to both of these in the transcripts [see belowor click on the embedded links].

My final question deals with alignment. In Episode 7, I discussed alignment and provided three types of horizontal alignment, left, right, center. “But what about fully justified text?” one of you asked. Fully justified text is an alignment option on many word processors, but it is not an option in many web design programs and would be rather hard to do. Justified alignment does have some problems. While it is left aligned, the forced right alignment creates odd spaces between words. These spaces can add up line after line of text and create rivers of white space in the text, which can be distracting and decrease the readability. However, justified text is still more readable than right aligned or centered text.

Next time you are reading a paperback with justified text try unfocusing on the page and see the rivers appear. I used to play Tetris a fair amount when I was much younger and if I read after playing for too long, I’d often try to fit Tetris shapes into the spaces provided by justified text. If you can fit Tetris shapes in, it is probably not a readable design (and I was certainly distracted!).

So, those are my listener questions. If you have a question, feel free to send them on via email or post them to the blog. Your question may be answered in an upcoming episode!

Now, finally to introduce my Screen Space Star Rating System. This system is developed to rate the usability, accessibility, effectiveness, and efficiency of site you submit. If you find a site that just is awful, send it on and I will rate it. If the site rocks, send it on and I will rate it. After much thought here is how the system works:

  • 3 Stars: My highest rating. This site is a great example of good web design and it is usable, accessible, effective, and efficient.
  • 2 Stars: This is an acceptable site. It may not be a perfect example, but it has decent design and is overall usable, accessible, effective, and efficient, with perhaps only minor issues.
  • 1 Star: This site is weak. It has many problems and needs work to be usable, accessible, effective, and efficient. However, there may be some redeeming qualities.
  • 0 Stars or a Black Hole: This site just sucks. There are no redeeming qualities. The site is not usable, accessible, effective, and efficient.

My first site was submitted by Kristin Schierer, the same persn who asked the first question. She is currently working on a redesign of this site. The site is for the First Presbyterian Church of Cassenova. This site earns 1 Star. The site has several minor to serious issues, and a few strengths. In order to keep this podcast short I’ll touch on only a few things:

    1. 1) The site uses images for key text without using alternative attributes (covered in episode 1) and this is a major accessibly issue. People who use screen readers or come to the site with images off will not even know where they are, as the site title is an image. In addition, they will not be able to navigate, as the main navigation menu is an image too. This fact alone resulted in the site getting only 1 star and not 2.
      2) Alignment: The text is aligned in many different alignments on the same page. The main page alone has the three types of horizontal alignments. Only one alignment should be used.
      3) Consistency: The site is not very consistent. For example, check out the main body text on each page. In some places it is left aligned, in some it is centered, in some it is both. Sometimes the text is in a box, sometimes it is in a floating box, and sometimes it is not in a box. The body font also changes, and if you look you’ll see even more consistency issues.

The site does general have a good color scheme (although there are contrast problems in places), and uses readable typefaces generally. The picture of the church at the top of each page is great and gives the site a nice feel.

And that is it for this episodes folks. Remember, keep your text to less than three screen in length, white and black is the best contrast for value and for colorblind users, and don’t justify your text. Join me next week for more on visual design of sites.

If you have questions, comments, or thoughts on what you want me to cover please send me an email at or check out the Screen Space blog— 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 to send a copy to that website with yellow on black text, but don’t change the podcast, do 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.

Episode 8 Links:

  1. The Color Contrast Analyzer:
  2. Standardzilla’s Colour contrast chart for colour blindness: colour-contrast-chart-for-colour-blindness/
  3. First Presbyterian Church of Cassenova:
icon for podpress  Screen Space 8: Length, Contrast, Alignment, and Critique [9:53m]: Play Now | Play in Popup | Download

8 Responses to “Screen Space 8: Length, Contrast, Alignment, and Critique”

I happened upon your podcast when looking for a podcast on typography to listen to at work. In the first 7 episodes, you’ve provided some basic but quality information on the elements of web design. Keep it up, the ‘net needs more introductory information on accessible design.

Some criticisms regarding your site:

1. Please, provide a link to play the current podcast episode near the top of each podcast page. This will be in keeping with providing the content the users desire in the most accessible location.

2. Your footer extends beyond the main layout box. This breaks the consistency of your design. Since the text color is the same or similar to your background color, text that crosses into this area is visually lost. It blends in. Also, your footer is center aligned; you stated in episode 7 that this was a weak alignment. Do you have a good reason for the alignment choice?

3. The episode 8 podcast is broken. Clicking on both the “download” text link and “audio mp3″ graphic link result in a 404 page. Clicking on the embedded podcast player results in never ending load time.

I like what you are doing with the podcast. I’d like to see (hear) more in the future. Design well!

Your MP3 link is not properly configured, you’ve left off the .mp3 and it does not work in the RSS feed either.

Aram, thanks it is fixed!

Thanks for fixing the link to the podcast for this episode! Thanks to Aram as well for identifying the issue.

About this episode’s content:

You mention that users don’t like to scroll.
Paul Boag (a leading voice in the movement for standards based design and accessibility) thinks that the notion “users don’t like to scroll” comes from an early Jacob Neilsen (web usability guru) report on web usability. This anti-scrolling assumption led to a movement in early web design for pages with content “above the fold.”

Today, the fold is no longer of the same concern it once was. Users have learned to scroll. This article by Boag details some of the elements of good design that are emerging lately, including putting additional content within footers:

Neilsen himself revised his findings on user interactions with scrolling. He maintains that horizontal scrolling is still confusing and irritating to users, but vertical scrolling is now understood, if not expected. The key (as you also state) is in letting the user know that there is more content on the page. Also, keeping the scroll bars in an expected format relieves confusion.

Neilsen’s articles:

One last link. This one is a study finding users can deal with scrolling.
Not all sites get scrolled, but that doesn’t mean the users don’t know how. Perhaps the content is poor. Maybe the user is a repeat user and already knows where to find what s/he is looking for.

Only a minority of users don’t scroll.

Hello Jeff,
I took me a bit to get to the footer fix sadly, but as you can see it is done. I also fixed #3.

I’m not sure what exactly you mean bu #1 and I asked a few other podcasters too. It seems like you may mean one of two thigns:
1) You’d like the flash player at the top of the post instead of the bottom
2) You’d like a flash player at a fixed point near the header for either the most recent episode or the whole playlist

Is either of these what you mean, or did you mean something else?

Jeff, you make some good points in the scrolling comments. Over time users have “figured out” how to scroll and that they need to scroll, and generally they seem more willing to scroll then what early Nielsen and others found (and as I will discuss in some future podcasts, usability studies can lead to findings that may not reflect real activities/actions anyway). However, requiring scrolling is still not something I would recommend. According to more recent work by Nielsen and Loranger only 23% of users will scroll on a first visit to a homepage, and the numbers drop for repeated visits. Interior pages do get more scrolling (42%). These are just numbers for scrolling at all. The amount users scroll is pretty limited: only 14% scroll beyond the 2nd screen of text (all this data is from Nielsen and Loranger’s Prioritizing Web Usability). So while they can and do scroll, they do not scroll far or even more than half the time. Thus, sites with text that requires multiple screen of scrolling may have no one viewing it beyond the first screen or too. This is one of the reasons I suggested no more than 3 screens—some scrolling is okay, but too much does still seem to lose people.

I do tend to try to keep things pretty basic in the podcasts too, or else I would have gone a bit more into scrolling. Your comment makes me realize this might make a good future episode. And, you even supplied me with some resources I can use for it. Thanks!

Hello from Russia

Did you know that USA and Europe blocked Wikileaks? What do you think about it?
By the way, anybody home?!

Something to say?