Usability of CMS Home Sites redux--the new Plone.org

The much anticipated Plone.org redesign has rolled out the door this week and from what I've seen on Twitter, its a winner. From what I've seen myself, its a winner. Welcome to 2010, Plone... 2010 and beyond.

Admittedly, I've got a soft spot for Plone, using it in my day job for implementing a variety of web projects. This week its been a portal for an upcoming UNSCR 1540 workshop. Last week it was a global security website. The week before that we used it as the modern front end for a legacy distance learning tool. So how's a guy supposed to be unbiased?


Let me turn back the page a month or so to my posting on usability and see how the new Plone.org stacks up with the old. Recall that I was ranking sites based on how few of Jakob Neilsen's "Top Ten Mistakes in Web Design" are evident. Low numbers mean fewer usability mistakes and a better home site.

Mistake	Old Plone	New Plone	Observations
Bad search
PDF files for online reading
Not changing the color of visited links
Non-scannable text	0.5		"F pattern" fully embraced
Fixed font size
Page titles with low search engine visibility	1	1	Buggy but expected to improve
Anything that looks like an advertisement
Violating design conventions		0.5	Hyperlinks within text block non-standard
Opening new browser windows
Not answering users questions	1		Targeted straight-forward references
Total	2.5	1.5

Plone. The homepage is very clean and now displays key information in the highly scannable "F-shaped" pattern that eye-tracking studies have shown is common when users are looking for something. News and upcoming events are in an unobtrusive font even though centrally placed--easy for the eyes to jump past if that's not what you're looking for. Large event graphics, which are, in a manner of speaking, advertisements from a newbie's perspective, are out of the way yet easy to find for community members (and exceptionally well integrated into the design, too). The main tree branch graphic perfectly captures the eyes' flow of vision, taking the new site visitor straight to "Explore the possibilities." On top of all that, the opening-bud theme resonates with me personally since I'm a reformed botanist.

Page titles remain tricky in the documentation and could be better for internal search engine visibility. There appears to be a bug in there--I found myself at a login screen when searching for "lock down your site."

The marketing box at the bottom of the page is gone, replaced by a concise block of text that addresses key pain points that potential Plone users might be bringing with them as they visit the site. It took me a moment to realize that the bold text represents hyperlinks--0.5 point off for not following standard hyperlink conventions here.

Plone.org now has only 1.5 of Neilsen's baddies, a 40% improvement over the previous 2.5 score and a 10% improvement based on the total scale maximum of 10.

Does anything give me real heartburn here? Nope, I'm very impressed, especially when compared with the numbers other CMS were scoring (5.0 - 6.0).

I was a little surprised when the "best security" link took me to CVE but not the pleasantly empty query page for Plone in the last 3 months or at least the NVD search page. Considering how unusable the CVE/NVD pages are, it might be better still to set up a dynamic page drawing down CVE counts for a couple dozen CMSs. (I think by making a criticism like that, I just volunteered for some Python scripting to solve the problem.)

I was a little distracted by the out of focus portions of the main graphic, but the longer I look at it, the better I like it just the way it is. There's also something just a little off about the Plone logo on the box, but its probably just the perspective being used on the angled container. Nice use of a single wet-tile graphic there--that's an often overused motif.

I saw a reference to "total world domination" with a trademark logo on the "New look" page. Not sure what that means, but I'm still leary of the concept based on my March 7 posting.

I do miss the colophon proper, if only because its a great printer's term to throw around at parties. That said, the footer is an outstanding example of how to arrange information so that its available but not in the way. Most site designers, including the old Plone.org, would highlight that material at the very top of the page and really cut down usability.

For those that haven't clicked on the "A new look for plone.org" news item and read all the way down to the "We'd like to thank the Academy" section, here's the list of those who made this possible:

• Iain Claridge of Netsight, who did the graphic design many moons ago, and kept improving it,
• Alexander Limi, Plone co-founder, who translated it into a simple and elegant Plone theme of real live HTML and CSS on top of xdv/Deliverance,
• The amazing plone.org admin team, who brought plone.org into the modern age by upgrading us to Plone 3, and continued improving the site and its setup:
• Alex Clark
• Laurence Rowe
• Tarek Ziadé
• Alexander Limi
• Steve McMahon
• David Glick
• Matthew Wilkes
• Martin Aspeli
• Graham Perrin
• Ricardo Newbery
• Ian Bicking,
• Paul Everitt and the crew at OpenPlans, who created Deliverance (and its sibling: xdv), the new theming system we’re using.
• The many people who updated, edited, rearrange and revised plone.org content in preparation for the relaunch.

In conclusion, I won't just give a tip o' the hat to the design team that rolled out the new Plone.org. I genuflect in their presence. Terrific job, everyone. Awesome!

Usability of CMS Home Sites

Color in the News

An interesting article on color and cognition turned up in Science today and its making its way into the mainstream media. The long and the short of it is that the color blue unconsciously enhances the performance of creative tasks. The color red unconsciously enhances the performance of detail-oriented tasks.

I think the take home lesson in terms of home site usability is that, all other things being equal, one should emphasize blue on those pages whose purpose is to elicit a positive decision about a CMS product. I believe that evaluating software and making a go/no-go decision is a creative task. Detail-oriented tasks (which would involve red pages) are in-depth analysis and feature comparison, more like reading and digesting CMS Matrix results and such.

Usability, Part 3

I'm continuing with my review of CMS and usability, triggered by my elderly parent's difficulties with accessing information on the web. I certainly can't survey hundreds of various CMS implementations and I don't have a handy panel of users to conduct timed usability tests, so I'm looking at something a little less ambitious (and a good bit less rigorous). I have scored each of the parent sites of a few top-flight CMSs against Jakob Neilsen's "Top Ten Mistakes in Web Design."

For the moment, I've limited my study to plone.org, drupal.org, joomla.org, and dotnetnuke.com. The results are displayed in two tables, again due to my CSS not displaying wide tables. Italics are simply to visually separate rows. The snippets of text are to help readers link a particular score with a discussion item in the paragraphs below.

The results have been enlightening and they mirror my earlier heuristic look-and-feel analysis. In the tables below, I've scored a point for the presence of each of Neilsen's top ten mistakes. Half points were given where the flaw was not deemed egregious or of minor impact. I urge readers to go to AlertBox and get the full description of Jakob's top ten mistakes.

Mistake	Plone		Drupal
Bad search
PDF files for online reading
Not changing the color of visited links			1	#0062A0 and #027AC6
Non-scannable text	0.5	No "F pattern"	1	Walls of text everywhere
Fixed font size
Page titles with low search engine visibility	1	"How to"	1	"Join"
Anything that looks like an advertisement			1	True advertisements
Violating design conventions
Opening new browser windows
Not answering users questions	1	"Market-ese"	1	Reverse chronological listing on homepage
Total	2.5		5

Plone. The homepage is mercifully uncluttered, but doesn't display information in the highly scannable "F-shaped" pattern that eye-tracking studies have shown is common when users are looking for something. Page titles in the documentation could be better and its often difficult to find a specific article unless you remember the exact wording. Try to "lock down your site" so people can't "join as users?" You have to search for "Close your site." Plone also has far too many items that start with the phrase "How to...." And finally items in the marketing box at the bottom of the page use catchy phrases that don't necessarily fit with the questions or concepts that a prospective new user might have. None-the-less, Plone.org had only 2.5 of Neilsen's baddies.

Drupal. Meanwhile, the heaviest hitter among CMS has a much weaker home site. Visited links barely change color, large walls of unscannable text are everywhere, and true advertisements are prominent. While it has an obvious simple search box, trying to "lock down your site" so people can't "join as users" results instead in hundreds of items about using "join" in queries. The lengthy reverse chronological listing of news items only serves to obscure important, basic information that first-time site visitors might be looking for. Drupal comes in with a disappointing 5 out of 10.

Mistake	Joomla		DotNetNuke
Bad search	1	No search box
PDF files for online reading
Not changing the color of visited links			1	No change at all
Non-scannable text	0.5	Mini-walls of text	1	Icons scattered; menu bar; "toolbar"
Fixed font size
Page titles with low search engine visibility	1	No "How to"	1	No "How to"
Anything that looks like an advertisement	1	"Contribute" icon	1	True advertisements
Violating design conventions	1	No "Home"	1	Pulldowns interfere with toolbar icons; no "Home"
Opening new browser windows
Not answering users questions	1	"What is?"	1	Questionable relevance; Where is the documentation? "Downloadable files"
Total	5.5		6

Joomla! This was the only home site that lacked an obvious simple search feature. When I finally found a search box one level down, its advanced search was useless to an outsider. How would I know to search a "chunk talk," a "transwiki," or a "JDOC?" Its first page text areas were reasonably deployed, although not in an "F-pattern," but each was a monolithic mini wall of text. The look-and-feel of the documentation area was completely different from other pages. The "Contribute" link looked like a pitch for money, and their was no explicit "Home" link on many pages nor easy to recognize bread crumbs. It took some getting used to the non-standard nav menu with its confusing "Main page" and "Main" links that went to different places. Finding "How to" documents was frustrating. Perhaps worst of all, there are things like the "Getting Started" link, which takes you to a "What is" section where the download link is buried below many column-inches of scrolling text. Joomla's site was beautiful and balanced but inconsistent not very usable with a score of 5.5.

DotNetNuke. This site had a number of Neilsen's sins. Visited links didn't change even slightly, icons were scattered across the page in both a panel of images and in a toolbar-like menu. The text menu bar expanded down and interfered with seeing the icons below and was awkward to clear. Finding "How to" information or any documentation at all was difficult. Why would I look under "Downloadable files" to find documentation? When I did search for items, the returned set was of questionable relevance. My question about "locking down a site" returned results that were absolutely off mark. The presence of true advertisements detracted from the main purpose of the site, unless the main purpose is to generate revenue for sponsors. DotNetNuke came in at the bottom of our four sites with 6 critical mistakes.

Summary. Clearly and not unexpectedly, all four CMSs have some weaknesses. Surprisingly, Plone comes out ahead of the pack while the other three had 5 to 6 of Neilsen's top ten usability mistakes.

Usability for Seniors, Part 2

Last week I took a heuristic approach to usability by comparing general look-and-feel of various CMS homepages. For someone who is ostensibly promulgating the use of rigor in assessing IT solutions, that seems a bit shallow (although still useful--first impressions count a lot on the Web).

Continuing with my look into features that are making it hard for seniors to use websites, I took a moment to track down Jakob Neilson's Alertbox, a must-read for anyone interested in usability. Sure enough, he has a very recent posting on aging and usability.

The bottom line is that his research shows a 0.8%/year decline in performance. That is, each year you need almost a percent more time to complete a given online task. In the span of a career (40 years) one can expect to need 32% more time. (Not 38%-- Neilson states that time-on-task degradation is a not a compound interest phenomenon.)

Neilsen points out that by the time someone born in 1990 is at the end of their career, they'll have had a lifetime of web experience. So 0.8% is probably not going to hold over the long haul. He estimates for long-term (>10 years) purposes a 0.5% annual loss in performance just on the basis of general cognative and motor skill slow-down.

Neilson also states that far better than attacking that 0.8% per year issue is to just make your overall site highly usable. According to one of his surveys, a 10% increase in development for usability results in an astonishing 83% increase in conversions. (A conversion is having the site visitor actually do what you want them to do--probably download, install, and use Plone.)

Increasing usability and touting the fact that Plone is senior-friendly taps into the fastest-growing segment of Internet users. Admittedly, seniors are probably not web portal developers, but they could be, and more importantly, they are more likely to be managers with decision-making authority over IT investments.

To continue to quote Neilson:

"Because so many sites are hard for them to use, seniors will shower you with business if you're the honorable exception who acknowledges their special needs. (And, those needs aren't even that special -- it's much easier to make sites usable for seniors than for users with disabilities.)"

Now back to assessing CMS usability, normally, one would conduct a functional usability study by taking a representative sample of users and have them complete pre-selected tasks. Metrics would be success rate and time to completion. One key take-home lesson from this is that site designers should clearly identify critical user tasks and make absolutely sure that those tasks can be carried out quickly and easily.

Since I don't have the luxury of a pool of users to measure, I'll take a different approach: I'll take each of Neilson's top 10 mistakes in web design and score sites against them. Here's his top 10 list:

1. Bad search
2. PDF files for online reading
3. Not changing the color of visited links
4. Non-scannable text
5. Fixed font size
6. Page titles with low search engine visibility
7. Anything that looks like an advertisement
8. Violating design conventions
9. Opening new browser windows
10. Not answering users questions

I'd like to emphasize that:

"Web site success is significantly associated with Web site download delay (speed of access and display rate within the Web site), navigation (organization, arrangement, layout, and sequencing), content (amount and variety of product information), interactivity (customization and interactivity), and responsiveness (feedback options and FAQs)." ACM, 2002 (Alas, the full text version appears to be gone.)

For now, I'll stop drinking the Alertbox coolaid and settle down. I hope to return with some examples and numbers in my next installment.

Usability for Seniors

I was visiting my parents yesterday at their new apartment in an assisted-living facility. Mom's broken hip last month has kept her from getting out much and so Carolyn did some online shopping with her. The excursion through the Land's End system had both of them lost in no time. Although it was clear to me, an IT professional, screens and menus had too many options and no clear overview of where you stood in the process and what was expected next.

We also checked out Dad's AOL e-mail account. The screen shot at left says it all--no wonder at 90 he can't navigate e-mail anymore. There are ads everywhere, dozens and dozens of links, multiple toolbars, multiple nested windows, multiple close buttons, lack of overall pattern, lack of focus, conflicting use of color. The interface tries to give you everything at once from a single screen. My company's internal webpage uses the same strategy and the result is that I hardly ever visit it.

I see the same thing with cell phones and note that some companies are producing phones with large numerals, simple interfaces, and clear access to the basic functions. With the folks, we stuck with a basic Verison phone and have not changed it in three years--probably never will. Same thing goes with TV remotes--some engineer thought that everyone of those 53 buttons was necessary.

Then there's Google, the epitome of simplicity. It does one thing and it does it brillantly. Given the comparison between AOL (or Yahoo!) and Google, it occurs to me to present a superficial look at CMS homepages. The following are all 1024x768 screen captures.

Double-click on an image to see the full-sized screen capture.

(Continued below after the mysterious gap. Gotta figure out what Blogger is doing with table tags and vertical spacing.)

	Plone.org has a pastel palette without a strong focus, spreading common functions out evenly without distracting (or focal point) graphics. The box at the bottom of the page captures key Plone features with useful but not over-powering icons without pulling away from the key material above.
	Contrast that with Drupal.org: deeper colors, clear focal point ("send money!"), a lot of space devoted to downloads, and most content "below the fold" just a news feed. Not much space given over to a rationale for choosing Drupal. The pale orange panel in the center almost apologizes for its collection of links.
	Joomla! has also choosen the deeper palette of dark blue with orange and green accents. Heavier use of graphics provides focus and the stark black download box works reasonably well for being tucked away in the lower right. The "Contribute" link scared me with its connotation of $$, but it goes to a very well done community activism page.
	WordPress (not truly a CMS IMHO) has a large graphic image that doesn't "do" anything and draws attention away from the download link. WordPress for Dummies jumps out due to its black-and-yellow thumbnail. A collection of three top-flight WordPress sites is lost off-screen at 1024x768.
	DotNetNuke goes with what I found to be strangely washed out color scheme despite the use of red. That's probably due to the use of the oddly meaningless background image with the pale red gear and faint grey swirl. Lots of space given over to sponsors, who take the focus away from anything DotNetNuke-ish.
	In closing, here's one of my favorites, Plone.net. Comfortable colors, four well thought-out functional areas, simple navigation, and artful use of the Plone logo in the background make this very attractive as well as usable.

I'll come back to this topic soon for two important reasons:

• As baby-boomers age, usability for the elderly and accessibility for the disabled and disadvantaged will become more important (as if we shouldn't be watching out for those populations no matter how small their demographic footprint).


• As the world, especially developing nations come to rely more on cell phones, simplicity of operation, clarity of function, i18n features, and ease of use on mobile devices will become increasingly needed.

Next week I'll go beyond simple first impressions and dig into the
numbers that capture some aspects of usability. Stay tuna'd....