Experiment in Making an Article Sidebar More Readable and Visually Appealing
I recently read a great article on Boxes and Arrows about the myth of the fold.
Turning to the sidebar to learn more about the author, I was struck by some of the design decisions that had been made regarding this part of the page, most notably the choice to right-align all the sidebar content.
As I looked a little deeper I began to wonder how much more readable the content would be if it was left-aligned and paragraphs were used. How might the visual design be improved if more differentiation was made between the sections? What if the text was a little smaller to better separate it from the article? And so on.
I couldn't resist firing up the 'Edit HTML' feature of the Web Developer toolbar to find out. Here are the results of 20 minutes or so of tweaking:
The original Boxes and Arrows article sidebar is on the left and my version is on the right
Note: I edited down the long bio text in both examples for the sake of this experiment.
Clearly, the left-aligned content is easier to read. I also find that the smaller text is still very readable because of the use of paragraphs and that the whole sidebar is more scannable because it takes up less vertical space.
I like the way the revised sidebar is more distinct from and subordinate to the article content. Given more time I would likely experiment more here, perhaps through the use of different font styles (capitals or italics) and colors (other shades of gray).
I find the 'most commented stories' section, in particular, to be much easier to scan in my version. It really doesn't work in the original.
I also 'fixed' some odd design choices. In the original example, the 'Blasting the Myth of the Fold' link is not colored orange like the rest of the links. However, the '136 Reputation points' text is colored orange but is not a link.
So, what do you think of the revised version — better or worse?
Posted on: July 2, 2008 | 25 Comments
Recent Entries in "Web Design"
- Are You Focusing Too Much on Your Home Page? (41)
- Keep Track of Your Styles with a Content Formatting Quick Reference Guide (13)
- US State Tourism Web Site Design: Two Years On (Part 1) (16)
- ESPN Web Site Redesign (10)
- Web Design Predictions for 2009 (26)
- Shopping Cart Design Showcase (11)
- 10 Handy Web Analytics Extensions for Firefox (13)
- Are Server Side Includes Still a Relevant Technique for Managing Large Web Sites? (22)
- Borders Magic Shelf: A Clever Take on the Home Page Promo Area (3)
- CSS Rounded Corners 'Roundup' (82)
- Using a Background Image Grid to Lay Out Your Web Site (43)
- Typography for Headlines (40)
- Blog Comment Form Design Showcase (15)
- Blog Comment Design Showcase (36)
- How to Get a Job in the Web Industry (24)
- How to Create a Block Hover Effect for a List of Links (32)
- How to Write a Web Site Creative Brief (6)
- How to Style 'Author' Comments Differently on Your Blog (9)
- How to Style an A to Z Index with CSS (5)
- Designing Interfaces: Patterns for Effective Interaction Design
- Blog Design Solutions
- Designing Web Usability
- 101 Essential CSS Tips, Tricks, & Hacks
- Web Standards Solutions
- Web ReDesign 2.0: Workflow that Works
- The Zen of CSS Design
- Don't Make Me Think
- Bulletproof Web Design
- DOM Scripting
- View more recommended reading…
25 Comments Posted
The revised version is much better. It seems more logical and easier to scan.
1. Posted by Heather on July 03, 2008
That is a huge improvement. It's amazing how much more readable it is.
If you haven't already, you should consider sending the blog author a link to this post so she can see for herself.
2. Posted by Aaron on July 03, 2008
yeah aligned to the left is much easier indeed. Who was the nimcompoop who designed it right aligned?
3. Posted by Jermayn on July 03, 2008
The left aligned version is easier to read, though the smaller text does make it unnecessarily more difficult to do so for those with poor vision, such as myself. I'd hate to have to zoom in or apply a user stylesheet just to read the Web page's sidebar in Opera.
4. Posted by Dan Schulz on July 03, 2008
It works much better after your tweaks, even keeping with the same style. As Jermayn said, the font size may be an issue for some, however, in my opinion having the font the same size as the main body will just add clutter and the page will appear busier than it really is, hence less readable and this will put some people off. It's a trade off between accessibility and usability in this case. Personally I'd go with usability.
5. Posted by Web Designer - Evan Skuthorpe on July 03, 2008
I meant as Dan Shulz said, not Jermayn...
6. Posted by Web Designer - Evan Skuthorpe on July 03, 2008
waaaay better! and with minimal tweaking too.
i also noticed some of the bio doesn't really seem to make sense.....or is that just me?
7. Posted by Marianne Yates on July 03, 2008
Its amazing how that little bit of extra effort can make it appear so much organised and professional.
Nice effort!
8. Posted by Dan Collins on July 03, 2008
Great improvement! Good example to learn from!
9. Posted by Edwin on July 04, 2008
Dan — good point. I'm sure there's a happy medium that could be found.
Marianne — I edited out some of the bio text to reduce the length of the sidebar. That's why it doesn't read properly.
10. Posted by Christian Watson on July 06, 2008
Awesome Post like the idea
11. Posted by Jon on July 07, 2008
Your revisions make the whole thing so much easier to read. The smaller font looks a lot classier too.
12. Posted by Matt on July 07, 2008
Yep - way better. Thats something I wouldn't have noticed without the side-by-side.
Maybe its just me, but my mind doesn't process unstrucutred/semi-strucutred text too well. Might be too many years of being a dev, but thats just how I work.
Nice work.
13. Posted by Matt Berseth on July 08, 2008
Goes without saying your REVISION is much better/clearer. Just curious from a scan ability point -- though somebody might have some argument of some kind against this... what if you made each the items above the 3 HR's or whatever BOLD?
Personally I found myself bouncing above and below the HR to distinguish a little bit. For me I'm thinking the BOLD may have quickly aided my SCAN and differentiation between content... especially given Milissa's name was highlighted in orange to begin start things off.
Maybe crazy logic... for me seeing that orange beside her name first somewhat made me think that other section divisions would be noted in orange as well... though if the orange by her name is a LINK then that changes the story a little bit.
Thanks
14. Posted by mbh on July 08, 2008
Much clearer indeed, but any change to add breathing space around text will have this instantaneous effect.
I think there is a case to suggest that having text right aligned can be an oddity that draws attention and could therefore in some cases could be a desirable effect - striking a balance of course.
15. Posted by Kudos on July 10, 2008
By setting it to a left align you allow the content to be scanned much more naturally than with it right aligned. Shrinking the font size helps also as it makes the content seem cleaner.
16. Posted by Houston Web Design on July 15, 2008
Very nice. It is much cleaner now.
17. Posted by Rexibit Web Services on July 22, 2008
Very nice, a big improvement. Definately looks crisper and more professional.
Regards,
Scott @ Onlineworx
18. Posted by Onlineworx Web Design on July 23, 2008
I also agree that the revision is easier to read, to be honest I think making the headings a little smaller helped a hell of a lot.
Paragraph formatting also helps, in general people prefer to read short paragraphs on the net so separating them up does the world of good.
19. Posted by Soula on July 29, 2008
Very good re-design.
20. Posted by Kev on July 29, 2008
Wow, that is all I can say about the side-by-side. As you edited out the information on the left image, and the one on the right has all of it - that is truly amazing at how much a little tweak can change the flow.
I am someone who feels that the use of a website should be natural and flow as you would read a book. This leads to a greater degree of usability.
I really do like the revised version and hope the author finds this article.
21. Posted by Rexibit on July 31, 2008
text aligned to the left is way easier to read. Your way is way better.
22. Posted by Brandon on August 05, 2008
I agree, much clearer and lends to a page organization and really to be brutally honest, sanity. The first attempt was scattered and impossible to skim and take in.
As for the font size, I agree with Evan...on rare occasions you have to make a choice between usability and accessibility. I think usability is the right choice here.
Cheers
Mike
23. Posted by Mike - Elegance in Design on August 16, 2008
The revised version is definitely much clearer and a better way to go.
On a design point, for your comment form here, having white text on a yellow background is really annoying and makes it difficult to type. Might be worth making the text black for the Name and Email fields.
24. Posted by web design uk on November 28, 2008
Maybe Milissa, in her position as Director of User Interface Design ..., has taken note of your 100% improvement of the sidebar and suggested to the sites devs that they take appropriate action.
25. Posted by Cambo on December 28, 2008