First a site I like:http://www.debianplanet.org/
It is very clear what is what and easy on the eye.

For some reason I am always confused when I use the drupal.org site.
Some points:

- Font color of links is hard to read, light blue on white or sometimes lightblue on blue.
Not everyone has eagle eyesight. At age 65 you get only 1/3 of the light you see on the age of 20. That is why pilots are not allowed to fly anymore after age 65.

- The sections are not clearly distinct.I know screenspace is valuable, but use a few pixels to make clear distinctions.

- Darker gray on gray is just to hard to read.

- when a link is visited it turns to dark blue, alsmost indistinctable from black text.

- consistent naming.We have "about" and "About Drupal" which point to the same.

- I count three menu bars. That is confusing.
First one is "search | archives | about | user account"
search is already on the front page. So is "about" and so is "user account" Why not drop this whole bar?

The second menu is: "Documentation | Forums | Mailing lists | Bug tracker | Development | Services | Contact"
It is the most prominent, but it also has features which are advanced and not for newbies.This bar is always visable but has no "home" item. A safe place to return to when people who visit drupal are lost. You have to figure out to click on the logo.Suggestion, put the word "home" below the logo.

Third menu: " About Drupal ? Features ? Drupal sites ? Screenshots ? Download"

This menu bar is intended for people who first visit the site. But it is less visable than the second bar and disapears when you visit one item, leaving only the second menu bar with obscure options for a newbie.

I have seen other drupal sites which really useable, so why can drupal.org itself be very useable?

Comments

ax’s picture

ie. with colors, spacing, naming, dropping the "search | archives | about | user account". after first reading your post, i didn't agree with put the word "home" below the logo - i thought that by now, everyone browsing the web knows and expects the upper left logo to be a link to the home page. after some more reading and thinking, now i actually do agree with this. interesting read: WDVL: Usability and Navigation.

Third menu: " About Drupal

cczona’s picture

The poster's suggestions, which I too mostly support, would affect drupal.org site design (or site config settings?) rather than Drupal project coding. Which of those Developer's Guide pages describes how to contribute at that level?

ax’s picture

colors and spacing must be done in the code (xtemplate stylesheet and template); the navigation bars are settings that have to be configured by an admin.

not much to contribute if you don't want to touch some files ...

cczona’s picture

You've pointed to the Developer's Guide twice. Again: which of those pages is the one which explains how to "touch some files as a drupal.org (vs. Drupal) contributor?

As for admin changes, how would one contribute there? By applying (somewhere) for admin access? By filing a feature request (even though that seems to be targeted exclusively to Drupal)? By submitting a request to the webmaster (presumably via info@drupal.org, if that is not an autoresponder)? There is a very clearly-identified, fairly rigourous procedure for contributing to Drupal. But what is the correct/expected procedure for initiating changes to drupal.org? That is not as obvious.

It's gratifying to discover that the Drupal user community is also welcome to participate in improving drupal.org. Clarifying how to do so would surely help to recruit people into such activity--including, I suspect, some who feel better able to lend some expertise as designers or webmasters than as programmers. It might also be useful to add "drupal.org website" to the site's taxonomoy for bug/feature reports, so that volunteers with that interest can readily identify work they could do.

Dries’s picture

First, setup a Drupal site; you'll want to use the Drupal 4.2.0 release candidate or Drupal CVS, not Drupal 4.1.0. Drupal CVS is preferred.

Then, mimic the drupal.org front page using the Xtemplate theme. This is easy; just copy-paste some content as well as the different navigation elements.

Next, implement the suggested improvements and once completed, diff your themes/xtemplate directory and mail it to the developers mailing list along with a screenshot and some explanation. The screenshot is useful to understand what changes you propose to the menus/links/headers or anything else that is specific to drupal.org and has nothing to do with the Xtemplate theme itself.

Such contribution would be much appreciated.

(Note that there is a "website" area in the "Tools" project. The area is somewhat hidden but maybe you guys could team up to resolve that as well. *wink*)

Anonymous’s picture

(Note that there is a "website" area in the "Tools" project. The area is somewhat hidden but maybe you guys could team up to resolve that as well. *wink*)

Ah yes, so there it is. (Though FYI to anyone else looking for it: the main category is called "Infrastructure" rather than "Tools".) Six of the items there are for "web site', including the new item you just opened in reference to this thread.

I tried to start a new Documentation page, based on this discussion, about contributing to drupal.org. It turns out that the "create new page" link doesn't currently list contributing to the docs as one of the options. So for now I can only wait for that new bug report to be closed. In the meantime, if someone else wants to post such a page, please do!

cczona’s picture

Oops. I forgot to mention mention this about the theme issue:

Is it advisable, or even necessary to change xtemplate? After all, for sites with a distinctly youthful readership, its small fonts and low-constrast colors probably remain satisfactory or even preferable. This original poster isn't suffering so much from a failing of the theme design as from a lack of alternatives to that particular theme's limitations.

It seems to me that the needs of people in his/her position could be met by simply activating a secondary theme--one which does not share the same limitations. That way everyone gets to view drupal.org at its most readable, while experiencing one of the most practical benefits of Drupal's user customizability.

cel4145’s picture

What about font size buttons, such as on Wired?. Two style sheets: a smaller one, the current default, and a larger one, that would increase font sizes by 20%, would go a long ways towards improving readibility. Seems like xtemplate could handle this, couldn't it? Make it a switched xtemplate configuration option in admin->themes->xtemplate, much like the search box. This feature would then be obvious and available to site visitors, without the need for logging in and setting a new theme under "edit account."

Meanwhile, just to throw in a usability note, the visited link color in the main content area is hard to read on some monitors. Shows up okay on my SXGA laptop screen, but on my 19" CRT at 1280X960, the visited link color is barely distinquishable from the regular text. It's not a great monitor, but not awful, so I imagine that others would experience the same problem.

Dries’s picture

People that are visually impaired use (or should use) modern browsers that lets them specify the minimum font size. Font size is not (or no longer) something we should worry about; the browser is taking over that job. The color scheme probably is our responsibility.

cel4145’s picture

True. Yet, not all Internet users take advantage of the minimum font size settings or text size options. And adding extra accessibilty is one of those things that is noted by those who need it, but often overlooked by those who don't. I wear glasses, and while reading on the web is generally not a problem, I do tend to notice when readability in terms of font size and color are an issue. I can set the default font higher on Mozilla, but then some sites look awful.

At the same time, a high resolution theme specific theme with larger font sizes is also useful for those who run resolutions a good bit above 1024x768. I had a request from a member on kairosnews.org for an alternative theme which makes the fonts larger. Took fifteen minutes to edit the default style sheet and add in an alternative theme. After implementing it as an option for all members, I ended up using it myself ever since and have noticed in the db that a few other members, other than the one that asked, are using it as well.

So, after whatever changes in color are determined for xtemplate, I'd be glad to take it and adjust the font-size definitions and test it as an alternative.

Anonymous’s picture

If there's agreement that the theme should be modified, may I also suggest we also consider another usability refinement at the same time? To whit, adding a bit more visual distinctiveness to the tags commonly used for quoting (i.e. q, cite, blockquote). On many forums, for example, it's typical to add formatting such as:

  • extra margin
  • extra padding-left
  • a border
  • background-color (gray?)
  • different font-face
  • font-style: italic or font-weight: bold

Combining all of the above would surely be overkill, but is there a consensus on which would best serve to visually distinguish a quote from surrounding text?

-cczona (drupal.org insists that I post as Anoymous today)

cel4145’s picture

Had that problem last night. After logging in, could only view edit account or view my own information. Otherwise, for any other link, drupal logged me out. Was a problem in both IE 6 and Mozilla 1.4rc1. Even tried deleting cookies.

Somehow, though, I fooled it by having it email me a new password and using that. Don't know why that worked, but it did???

keithinstone’s picture

Also, the >> characters often are used in breadcrumbs, which imply NESTING. Screenshots >> Download means you are Downloading screenshots.

Use vertical bars (|) instead between like on other horizontal lists, or use some other character besides >>.

flash guy’s picture

sometimes website navigation really useless.
It looks like author never "thinking all parts of website" :(

Anonymous’s picture

Interesting followup.

If I find the time I try to setup a example drupal website so that usability changes can easely be reviewed and incorporated if approved.

- drupal clone
- screenshots.
- diffs
- usability notes.

Onno Niem.

Anonymous’s picture

I would like to see the "read more" link moved before "add new comment" and somehow made to stand out better. There is a big risk that people don't notice it at all and read the whole article....

ax’s picture

often miss it myself. maybe even better is something like "[...]" (is this "ellipsis" in english?) directly after the text as seen on the rompe blog (scroll down to find a teaser'ed node).

cel4145’s picture

Saw your project posting on site usability. A suggestion:

If the "search|archives..." menu is removed, move the search box above the "Documentation|Forums..." menu. Then, place "Home" in front of "Documentation." As someone reads from left to right from the Drupal logo, "Home" will be the first thing they see. Should be very visible that way. On the other hand, adding "Home" underneath the logo might, I think, detract from the layout.

See how "Home" looks this way at Open Education (sorry, didn't use xtemplate, so no search box).

moshe weitzman’s picture

i also think that link is just too subtle. the ellipsis idea is good.

al’s picture

Having something like [...] is a Good Plan, IMHO.

I'm struggling to think of a good way of doing this that isn't theme-specific. Or isn't that an issue? I.e. should it be a theme thing, rather than a site-wide thing?

moshe weitzman’s picture

i think leaving this up to the theme is reasonable, if that makes code simpler

al’s picture

Additionally, the "third menu" has seperators of » (»), which look confusingly like breadcrumb trails. These should become |, like the rest of the bars.

kika’s picture

> Why not drop the smallest menubar?

dropped

> This bar is always visable but has no "home" item.

"Home" is added

> Use vertical bars (|) instead between like on
> other horizontal lists

Using now

> Font color of links is hard to read
> Darker gray on gray is just to hard to read.
> when a link is visited it turns to dark blue, almost
> indistinctable from black text.

These issues are in works

> The sections are not clearly distinct.
> I know screenspace is valuable, but use a
> few pixels to make clear distinctions.

I am not sure what do you mean by "sections"?

> This [third] menu bar is intended for people who first visit
> the site. But it is less visable than the second bar
> and disapears when you visit one item, leaving only
> the second menu bar with obscure options for a newbie.

should we display the menu (and the intro message) on all pages then? It is simple to implement, but is it usable?

ax’s picture

>> The sections are not clearly distinct.
>> I know screenspace is valuable, but use a
>> few pixels to make clear distinctions.
>
> I am not sure what do you mean by "sections"?

blocks and boxes. for instance, at the drupal homepage, the margin between the first two articles ("Drupal 4.2.0 release candidate" and "Usability http://drupal.org/ start page") is /smaller/ than the margin between the first article's last two lines ("http://www.drupal.org/drupal/drupal-4.2.0-rc.tgz" and "» 12 comments | read more | administer | 473 reads"), suggesting that the first article's last line is part of the second article. this clearly is confusing. i'd suggest to add some clear visual separation, ie. a <hr> or light-background-color the boxes and separate them w/ some pixels of white.

similar with the blocks at the right. instead of a continous grey through all the sidebar, separating them with some pixels of white would be helpful.

>> This [third] menu bar is intended for people who first visit
>> the site. But it is less visable than the second bar
>> and disapears when you visit one item, leaving only
>> the second menu bar with obscure options for a newbie.
>
> should we display the menu (and the intro message) on all pages then?
> It is simple to implement, but is it usable?

no. the important links (which i think are "About Drupal" and "Download") should go to the main menu bar, and the more <cite>obscure </cite> options from there to the second menu bar. these are, i'd say, Mailing lists | Bug tracker | Services. roundup:

main menu bar:

Home | About Drupal | Download | Documentation | Forums | Development | Contact

secondary bar:

Features | Screenshots (shouldn't be linked until we actually have some (for 4.2)) | Drupal sites | Mailing lists | Bug tracker | Services

cel4145’s picture

"blocks and boxes. for instance, at the drupal homepage, the margin between the first two articles ("Drupal 4.2.0 release candidate" and "Usability http://drupal.org/ start page") is /smaller/ than the margin between the first article's last two lines ("http://www.drupal.org/drupal/drupal-4.2.0-rc.tgz" and "» 12 comments | read more | administer | 473 reads"), suggesting that the first article's last line is part of the second article. this clearly is confusing. i'd suggest to add some clear visual separation, ie. a


or light-background-color the boxes and separate them w/ some pixels of white."

aligning the .node .links div to the right and adding some extra bottom padding to the div would also work, wouldn't it?

"similar with the blocks at the right. instead of a continous grey through all the sidebar, separating them with some pixels of white would be helpful."

adding left padding for .block .content could also help to set off the blocks without having to introduce any block separators.