Drupal Human Interface guidelines? Are we ready?

Events happening in the community are now at Drupal community events on www.drupal.org.
morphir's picture

The topic says it all - I want us to consider if we might be ready to implement the Human Interface Guidelines into Drupal themes. First and foremost within Drupal core themes and modules.

These guidelines might include:

  • Standardized input/output messages
  • Layouts of menus
  • Menu structures
  • help and manuals
  • Page layouts
  • Semantics
  • ....you name'em grandma!

Critics might argue that such guidelines are to specific and takes away freedom from the designer to "go wild". But we are standardizing the code with our apis, so we can easier develop modules. And not everyone (very few actually) are interface experts. So providing a standard way to present form filling processes, error messages and menus can be a at great help for all those geeks that prefer caring about their code rather the presentation.

What is your thoughts on this? Are drupal ready for such commitment?

Edited
A new group for icons are already started, see http://groups.drupal.org/icons-drupal

Comments

A Plea for Visual Sanity...

dahacouk's picture

Read this if: You design usability solutions and/or web sites around absolute pixel sizes for content blocks, panels, fonts or any web page element. In short, this is a plea for enabling a browsing user to view a Drupal powered website using the whole of their browser width and large fonts (without the content degrading to an unrecognisable mess). It's a plea to give a little bit more control to users to decide how they view their content.

Background: I am a Mac user. I have a 30" (2560 x 1600) screen. Right now Safari is set to about 2/3 of the width of my screen (roughly 1700 x 1000). My minimum font size right now is set to 18. I'm not visually impaired - I just get eye strain reading fonts much smaller for too longer time. My eyes are 80cm from the screen.

Check your sites: What happens if the minimum font size is set to size 24? Does your site still look nice? Or does the text stick out of the box because it expects all users to use font size 8. Try this with http://drupal.org - it's pretty good but not perfect. Try http://www.htmldog.com - wow - notice how the left hand menu block sizes with the text!

Default me: I'm not trying to suggest that we don't let designers design sites how they wish. What I'm suggesting is that all the default themes and plugins adhere to these design principals - maximum width content and large font niceness. So many people just whack up their websites using the default settings.

Not rare: Is this such a rare scenario? HD resolution screens (1920 x 1200) are not so uncommon these days. And there's gonna be more coming.

Browser space: Please don't use absolute pixel widths for content blocks. So many websites crush the content into 600 or 800 pixels wide - so many - Apple included. And I get all this wasted space on either side - let me decide how wide to make my browser please. See: http://www.couzinhub.com/node-UI/Node-form-1.jpg for a fixed content width in pixels. It's all a hang over from designing for paper - but the web is a new medium - geddit?

Font size: Simply put, it's really dangerous to put text (which a user can size up and down at their own control) into a bounding box with fixed pixel dimensions. Please can we find a way around this problem and build it into the default theme? Bounding boxes need to be flexible.

Expected response: "Daniel, why don't you just create websites that fulfil your criteria of full browser width content and the ability to use large font sizes without the content degrading? You can code your own CSS, etc." Well, that's cool for my sites but what I'm really concerned about is all the sites I want to view. All the sites that use Drupal's default theme, etc. I want the defaults to play nice.

Why now: I've been taking a look at various usability mockups and trying them out. Here and there I see my page mess up because the designer never envisaged a large font being used. See: http://drupal.geek.nz/static/node-form/default/1.html and how the text within the "menu settings" block stick out of the bounding box with large font sizes. I want to put the case now so we can rectify the situation.

Resolution independence and zooming: I know this is not a Drupal issue but people may say that when resolution independence and zooming arrive on Mac OS X then I'll have no problem. No, this is not the case. If content has a fixed width neither of these "features" solve the problem.

Who am I: I was at DrupalCon Barcelona last year. I attended the usability round table. I'm a bad PHP programmer and no expert at web design. I'm playing with Drupal at the moment but very soon will start to move http://www.kendra.org.uk and http://www.freewheelers.com to it. These are large projects. And I know the design sucks - that's why I'm moving to Drupal! ;-)

'Drupal Human Interface guidelines? Are we ready?' - I hope so!

Cheers Daniel

Yes, we are ready

drumm's picture

Starting with the goals we started drafting at UMN, I would say yes, we are ready. The two other good things to start with are

  • Personas for Drupal users. Everything usability-wise is easier if you know your audience.
  • Document existing practices such as
    • Messages (drupal_set_message())
    • Local tasks (tabs)
    • Menus
    • Every form element
    • Fieldsets
  • Documentation standards, because our own documentation should be consistently good. Such as:
    • Page templates & standardized headings
    • Use of examples

Always document the in-use best practices exemplified in core. If the use of a UI element in core is nonideal and not worth documenting, then it should be improved, then documented. Consistency of core should be checked and improved once something is documented.

The best workflow is to start drafting in wiki pages here and post to the Drupal.org handbook once we are comfortable with everyone following it.

A few guidelines I can think

stevebayerin's picture

A few guidelines I can think of are:

Help and registration links are usually best placed at the top right of the page. (Thats usually the first spot of the page new users look at when unsure of what to do)

Paragraphs should be around 80 to 120 characters a line (to bring it in line with the amount of text in a line in a novel or column in a newspaper. Very long lines usually leads to fatigue for the reader.)

How does a white space of at least 12px in between blocks sound?

Help messages or new user directions are concerned, keywords ought to be given a font-weight of bold at least.

Help messages also could use titles eg. for the block administration page in Drupal 6 on the url path http://domain.com/?q=admin/build/block the help message for blocks could start with a title "What are Blocks?"

Usability

Group organizers

Group categories

UX topics

Group notifications

This group offers an RSS feed. Or subscribe to these personalized, sitewide feeds: