Any theme with high usability?
I have browsed through a large fraction of the available themes, and have not found any that satisfies substantially all or most of the usability recommendations that you can find here:
http://www.useit.com/alertbox/9605.html
On the above web page look also at the "Other Top-10 Lists" section and all the links in that section. Can anybody recommend a theme that comes somewhat close? Besides an occasional failure to validate, some common un-met goals in existing themes are:
- Nain content text is black-on-white. Links can be easily distinguished from non-link text. Followed links can be easily distinguished from not-followed links.
- Text flows to fill the screen and no sideways scrolling is necessary
- Most of the screen is used to display main content. Menus and sidebars take up much less space than the main content, even when using an 800x600 screen and Opera and magnifying text size with control-scrollwheel.
And oh, it would also be nice if the theme that I can find uses non-scrolling sidebars (using the "position:fixed" feature of CSS, without JavaScript), so they remain fixed in place as the main content scrolls up and down. For an example of this visit the following URL with Opera or Firefox:
(It appears that you can fool IE into doing this too; see: http://www.cssplay.co.uk/layouts/fixed.html .)
I will create a new theme if necessary, but it would be nice to find an existing one.
Rahul
Good old Jakob
I find that the default bluemarine theme is a good starting point:
> Nain content text is black-on-white. Links can be easily distinguished from non-link text. Followed links can be easily distinguished from not-followed links.
yes
> Text flows to fill the screen and no sideways scrolling is necessary
yes (* under normal use)
> Most of the screen is used to display main content. Menus and sidebars take up much less space than the main content, even when using an 800x600 screen and Opera and magnifying text size with control-scrollwheel.
yes (you might want to use only one sidebar if you are having trouble with narow content columns)
* Bear in mind that there is no such thing as absolute usability, it is always related to the user and the environment. And there are always tradeoffs.
By the way, I think that non-scrolling sidebars are usualy a very bad idea from a usabliity point of view. For example try using http://www.w3.org/QA/Library/ and reduce your window height, or increase the font size.
bluemarine usability issue
Thanks for the referral to bluemarine. I did try it already, and found that it has two limitations when the browser has been told to use a certain minimum text size. First, the main text column is quite narrow to begin with--less than one-third of screen width on a 800x600 screen when viewed with Firefox. Second, using Opera or Firefox, when control-scrollwheel is used to magnify the text further, the main text column gets even narrower. So the user ends up scrolling madly up and down to read the main text while there are huge empty spaces columns to the left and/or right.
Compare with drupal.org, which behaves well. The main text width remains quite reasonable at any magnification, even on pages with both left and right sidebars (e.g.: http://drupal.org/about).
Rahul
P.S. I did not understand what you meant by "non-scrolling sidebars are usually a very bad idea", even after I looked at the URL with a reduced window height and large text size, with both Opera and Firefox.
I see your point, the
I see your point, the sidebars are using way more width than necessary in bluemarine, that's one thing I would like to improve.
By the way, this is what I meant with the non-scrolling sidebars: Screen capture
You end up having 2 scrollbars in the best case, there are instances where part of the sidebar can't be seen because it falls bellow the fold, and you can't scroll.
scrolling position:fixed menu
Thanks for the screen capture. I haven't encountered any real problems using the fixed-position scrolling sidebar, despite testing with IE, Firefox, and Opera. I am using such a fixed-position menu here:
http://servers.rahul.net/
Please let me know if you see any anomalies at the above URL with a specific browser/screen combination. (Of course, if you make the screen height small enough, at some point things will break down, but then, pretty much any web page becomes unusable with a shallow enough screen.)
But anyway, fixed-position sidebars are not one of my primary goals in looking for a usable theme. I would be happy with a modification of bluemarine in which the main content behaves like the main content on drupal.org.
Rahul
core themes
accessability listed here.
http://drupal.org/node/44661
No current contributed theme does the sidebar fixed while scrolling. Not normally a feature desirable in a general purpose generic theme.
-Steven Peck
---------
Test site, always start with a test site.
Drupal Best Practices Guide -|- Black Mountain
usability vs accessibility
Thanks for the reference to the Accessibility page. Even though accessibility is also one of my goals, that is relatively easily achieved by using one of the supplied themes such as Bluemarine. Usability is a much greater challenge, as discussed in http://www.useit.com/ and its many pages on this topic, and apparently not well-implemented in any of the standard themes supplied with Drupal. (The theme used at drupla.org comes very close, though.)
I did find your link to the "Drupal Best Practices Guide" to be very helpful.
Rahul
also
More of a general article. I figured out how to port the Yahoo GRID CSS layouts as a Drupal theme template and have the first article here that may help provide a good base foundation for a theme. I intend to write some more in hte next week or two.
Thanks for the comment on the best practices, I wrote several of them (and others have added their expertice) to help people avoid or deal with issue's ahead of time rather then lose their sites later.
-Steven Peck
---------
Test site, always start with a test site.
Drupal Best Practices Guide -|- Black Mountain
Nice link about the Yahoo
Nice link about the Yahoo Grid templates!
My issue with them though, they are all fixed-width (in pixels) designs that may not necessarily be convertible to a "fluid", percentage-relative or em-relative layouts...
__
Personal home page | Rhombic Networks: Drupal-friendly web hosting
I like to think my theme
I like to think my theme Sands is fits Dr. Nielsen's guidelines. Some things that irked me with many existing Drupal themes was the use of fixed fonts and hard-to-discern links, both addresses in Sands. Bluemarine is not a bad starting point either; it was the starting point for Sands as well.
__
Personal home page | Rhombic Networks: Drupal-friendly web hosting
sands_css : middle column shrinkage
Thanks very much for pointing to sands and sands_css. I vaguely remembered having looked at them before. Your link colors are more readable than those of bluemarine and drupal.org. There are some black links, but I can modify colors easily, so I can make them blue if I want to, so no problem.
I tested them again and now I know why I did not use your themes. I didn't previously use sands because with sufficiently increased text size it overflows screen width and require sideways scrolling. I just downloaded and tested sands_css and unfortunately it has a misbehavior similar to bluemarine: As I use control-scrollwheel to increase magnification, the two sidebars grow and the middle column shrinks, until most of the screen width is occupied by the sidebars. sands_css is better-behved than bluemarine in this respect, so the middle column shrinks less quickly, but it does keep on shrinking.
Can you suggest a small modification in sands_css that would make the three columns retain their respective sizes as magnification increases, the way drupal.org behaves?
Rahul
em-relative vs percentage-relative layouts
The idea behind certain links being black is that these links are not clicked often. Links in the breadcrumb, post information (taxonomy list, username), etc having the same color as other links can be distracting--there is simply too much underlined blue text on the screen! Drupal.org recently started doing this as well: certain links in the bluebeach theme are a more dull shade of blue, which I think differentiate links that are there for convenience as opposed to links to actual content.
There are two kinds of what are called "relative" layouts. Sands and Sands_CSS completely rely on the "em" measurement, while Drupal.org's Bluebeach theme relies on percentages. Em's scale with font size, while percentage scale with the size of the window. Nielsen doesn't really go into what is better, because in the end it is a preference thing. You can find many arguments on the Internet about what is better, none with a clear winner. My preference was to use an em-relative layout rather than a percentage-relative layout.
I personally think em's are better. You almost always have some control over font size, but almost no control over window size--what if you're stuck with a 800x600 display? With small and large displays, percentage-based relative layouts tend to break. You'll end up with columns that too small, or too wide. I've had problems with this and Drupal.org, especially on pages where the sidebar has a lot of content (e.g. handbook pages). I think your use case of adjusting font size is a little contrived: you normally wouldn't be making your font size so large unless your monitor could actually display the entire page.
It would be a complete nightmare to turn into Sands_CSS into a percentage-relative layout. However, turning the tables-based Sands theme into one is easy: replace all occurences of "14em" in columns.css with your favorite percentage (e.g. Drupal.org's bluebeach uses 21%) and it should work fine.
__
Personal home page | Rhombic Networks: Drupal-friendly web hosting
em vs %
Thanks for the "21%" hint. I had to change 14em to 12% (not 21%) to get a drupal.org-like look. It's better, but the middle column still shrinks when I magnify with control-scrollwheel.
As for the em versus percentage debate, I am firmly on the sidelines, because I am looking for a specific result, no matter how I achieve it. The result I want is that the main content remains main content, and doesn't shrink in width, and the sidebars remain narrow and don't take over the screen.
But this does not mean that I want lots of links in the sidebars the way drupal.org has them. Lots of links are OK on one or two pages used primarily for navigation. On all other pages, my preference as a user is to see just a few links for global navigation, and that all other links be locally relevant. On the drupal.org handbook pages, for example, the entire right-hand-side sidebar (account/login section and forum postings) could be eliminated.
With fewer links, and more main text, narrow sidebars will be just fine.
Rahul
I think this necessarily means you want a percentage-relative
I think this necessarily means you want a percentage-relative layout.
I will look into why Sands doesn't respect a percentage size... because with that change, the layout should work identically to that of Drupal.org. I may have some other size set in ems elsewhere.
__
Personal home page | Rhombic Networks: Drupal-friendly web hosting
Less than 15% has no effect
Thanks. I also found that anything less than about 15% seems to have no additional effect, i.e., the sidebars get no narrower.
Rahul
Bluemarine sidebar size
Just change the width: setting in style.css to 10 or 12 em in style.css
#sidebar-left, #sidebar-right {background-color: #ddd;
width: 16em;
/* padding in px not ex because IE messes up 100% width tables otherwise */
padding: 10px;
vertical-align: top;
}
I've used bluemarine as a start point for a new theme, and had very good results even from just hacking the stylesheet :-)
Take a look at this page on Lullabot for more useful info about controlling themes.
Same problem
Tried it. Same problem, I'm afraid. With width set to 10em, sidebars start narrower, But as the screen is magnified, the sidebars rapidly grow to take over the screen while the middle column shrinks and becomes too narrow.
Thanks for the valiant try.
Rahul
I made a comment about
I made a comment about percentage-relative and em-relative layouts above. If you set the width to something in em's, it will resize on font-size change. The original poster does not want this.
__
Personal home page | Rhombic Networks: Drupal-friendly web hosting
Thank Pbarnett! I was able
Thank Pbarnett! I was able to change the width of the bluemarine side columns with your suggestion. That helped a lot!
Brian
Still no success
Nine months after I made my first posting here, I still have yet to find an existing Drupal theme that satisfies all the usability guidelines I mentioned. It's a good thing I wasn't in a hurry (though I am now).
Rahul