Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

I always find it hard to judge the readability of my site and there is so much conflicting information out there. So I thought I would ask for some options here. Could you please take a quick look at my site and let me know if the readability is good?

http://www.forex4noobs.com/forex-education/

Please ignore the green and black headings I still need to play with those. I need advice on the main body text.

Current settings are:

font-family:"myriad-pro-1","myriad-pro-2",HelveticaNeue,Helvetica,Arial,serif;
font-size:14px; 
line-height:1.43em; (roughly 20px)

Any advice on how to improve readability would be greatly appreciated.

share|improve this question
    
people will get different views of the text depending on the OS and what fonts they have installed so take care how you analyse the comments here. –  Roger Attrill Aug 17 '11 at 9:55
    
I think possibly 'Readability' in the question might not be the right word - this is what readability is: en.wikipedia.org/wiki/Readability –  PhillipW Aug 17 '11 at 9:57
    
@PhilipW: I think Readability is fine. Even according to the wikipedia article it has to do with ease of reading. Font choice (both face and size), while primarily addressing legibility, plays a big factor in readability and is affected by other layout factors such as line spacing, word spacing, character spacing (please no variable char spacing), line length, raffled or lined-up line-endings, white space between paragraphs, white space between headings and paragraphs etc. –  Marjan Venema Aug 17 '11 at 10:43
    
So maybe it would be clearer if the question specified just the graphic design (rather than the content) elements of Readability. –  PhillipW Aug 17 '11 at 12:33

4 Answers 4

up vote 13 down vote accepted

The biggest problem is the visual emphasis lost by the bright colour (in this case green). You can say "ignore the other colour", but it's the biggest problem with the readability! So it's hard to successfully improve the readability without working on that colour.

  • The menu on the left is very high contrast, causing it to distract the reader from the main text area. I would significantly reduce the visual weight of the menu by removing or reducing the green background colour of menu items.
  • The green colour used by headers is too bright/low contrast and makes it hard to read. It also receives less visual emphasis because it's often situated directly above a big, bold, black header. But that black header is actually a sub-header to the green one. Consider switching the colours around and making the more important header bigger to more obviously suggest the right hierarchy. I would also darken the green quite a bit; I'm having trouble reading it and I'm not in the sun (nor do I have poor eyesight).
  • The page title is kind of invisible, again because it's green. Make it black or some other colour that jumps out, and make it much bigger. Add a margin between the header and the body text - whitespace helps emphasise things.
  • Add whitespace between paragraphs of text and subheaders, again to emphasise that you're entering a new section.
  • Add a lot of whitespace at the bottom of the page after the content so I don't have to bring my eyes to the bottom of the monitor just to read the page. Whitespace here will also give my eyes a rest instead of cramming everything together.
  • Your main body font choice and size is pretty okay, as is the line height. Consider slightly increasing the line-height between paragraphs.
  • Why use Verdana and Arial haphazardly? Improve readability by sticking to one font. A good rule of thumb is to simplify fonts to one per family (eg. serif/sans-serif). This only applies to text you read; obviously designers should be free to choose fonts for other purposes.

I changed a few things using Webkit's inspector feature to give you an idea of what I'm talking about:

enter image description here

Note: somewhere along the way the images in the menu went missing; that wasn't intentional. Keep them! They're great chapter indicators.

share|improve this answer
    
Great answer, thanks! –  Nick Aug 19 '11 at 4:20

First, I love the ninja analogy. I mean, you can't go wrong with ninjas.

However, it appears you're trying to accomplish too much on one page. Break up your message into several pages and boil down your information to a succinct paragraph or two. Then, provide links to the more detailed info.

Lead with statements that entice the reader to read more. Your first question is an excellent example of this. I recommend increasing its font to grab the reader's attention.

Want to Join Our Forex Ninja Academy?

If you hook the reader with your initial message, they will automatically click to read further.

Nice work!

share|improve this answer

There are too many words.

I'd do rather a heavy editing of your text to reduce the amount of words to the absolute minimum.

share|improve this answer
    
Can you explain why having too many words is a bad thing? –  Rahul Aug 17 '11 at 9:30
2  
Users don't like reading instructions. They just want stuff to work. MS Office used to ship with 1000s of pages of instruction books. And few people actually read them. So MS realised that they could still sell the product without any of the instruction books... I posted this link before: joelonsoftware.com/uibook/chapters/fog0000000062.html. 'User's Don't Read Anything' –  PhillipW Aug 17 '11 at 9:40
    
Users "don't read anything" in the context of user interface copy. People do read articles, especially articles they specifically need to read to understand the course they're signing up for. Can you show how Joel's point applies here? –  Rahul Aug 17 '11 at 11:56
    
Joel again: "The very fact that you're reading this book puts you in an elite group of highly literate people. Yes, I know, people who use computers are by and large able to read, but I guarantee you that a good percentage of them will find reading to be a chore. The language in which the manual is written may not be their first language, and they may not be totally fluent. They may be kids! They can decipher the manual if they really must, but they sure ain't gonna read it if they don't have to. Users do just-in-time manual reading, on a strictly need-to-know basis". –  PhillipW Aug 17 '11 at 12:38
    
And since I ran out of space: 99% of the time websites have to be their own manuals. –  PhillipW Aug 17 '11 at 12:41

My first impression is that you should increase spaces between end of text and new headers, the site gives a "heavy" impression, a lot of text is on a rather small space. White space, images or something else non textual is often used to lighten sites up.

share|improve this answer
    
+1 A little markup also helps to break it up visually from a monotone block of text and also brightens up the reading with a little expressiveness. But not too much. –  Roger Attrill Aug 17 '11 at 10:02

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.