vincent bidaux  freelance web and application design

I remember when OpenID has been announced I was thrilled because I’ve been waiting for such a service for a long time. So many services, sites, forums to subscribe to, blogs to comment on, and often discouraged to create a new user account for just a one-time contribution. Most of people ended up creating the exact same account on dozens of websites: same login, same password, which is a terrible breach of security.

So I thought it would be great, and it would be easy to use and understand. It took some long months, even years, for the service to become popular and for platforms, CMS and framework to propose its implementation. Today, it’s almost everywhere. But in most cases, it’s not easy to use, because of bad practices that come with it.

Best example of bad practice

Very often found : a single field asking you to log in with OpenID.

The previous example comes from http://paris2009.drupalcon.org . It’s a Drupal website, and you’re ending up with this situation when you just activate the OpenID module on a Drupal website. It’s going to work for users who already know more than a bit about OpenID, but not for new users. Even if you click on the “What’s OpenID” link you’re not going to be told what you’re supposed to type in the field. Morevover, if you finally get what to type, you’ll be ask just after to create a full new account, yes, with a login, a password and various informations the site requires. Ok for the informations, but what’s for the login and password? Of course your account appears to be linked with your OpenID, but I really don’t see the point here. Mostly useless.

So what is a good practice for OpenID?

Check below how StackOverflow propose you to log in using OpenID:

That’s it, just click on one of the services you belong to, and you’ll be loogged into the site with a new account. Nothing to fill, nothing to tell. Click it. One told me that StackOverflow is known for this kind of OpenID good practice, so don’t hesitate, copy them! You want OpenID on your site? Do it the right way and propose these services buttons. If you don’t, don’t bother implement the single field, I bet that almost no one is going to use it.

A bit more about UI, User experience and openID

Notice how StackOverflow don’t propose you to create and account without using OpenID. They made their choice: no user account beside OpenID. Usually, when you try to login into a site, you’re getting prompted to enter your login/password or to create an account. Then if you decide to create one, you’re proposed to do it within the site’s user system, and a link invites you to log with OpenID. So in the best case scenario you’re two or three clics away to start registering. Why so much? OpenID option should be there right away, and even if it’s not the only way to login, it should be proposed alongside of the normal registering form, not in a different page. Remember that we don’t want interactions. We want to minimise our interaction. (citation got from a tweet of Leisa Reitchelt at UxLondon 06/09)

• Paris2009.drupalcon.org
• stackoverflow
• drupal
• opendID on wikipedia
• List of OpenID provider

Theere is also a usefull IRC channel called #drupal-design on the freenode.net IRC server. Last but not least, people from Acquia just created a dedicated area for Drupal themers and designers.

There’s also a twitter account to follow and a flickr group to post contributions.

This year, I’re read a lot about the Zen theme, I’ve even met Zen people at Drupalcon Szeged this summer. I was convinced this was the way to take. After a few months and two projects started under the Zen theme, I can say I’m largely missing the Zen point. But I need to investigate a bit more to avoid saying silly things about it.

What kills me in Drupal is the basic layout for fieldsets elements, and especially that the title label is printed over the top border of the fieldset, and that I NEVER find where to cancel this property.

Zen theme fieldsets

Garland theme fieldset

Why would you place a label on top of a border? Is this because it has been the case in any Windows dialg since Windows 3.x? That’s my only explanation. But where it kind of works for dialog zones in the MFC (Microsoft Foundation CLass, gathering any UI element of MS Windows), it does not for and online UI, I think.

So I’ve been trying to style these elements in a more simple way, for the page to gain in readability: I want the user to clearly distinguish collapsed and not collapsed fieldsets on a page.
I could’nt find a way to do this properly with the already printed code, wich look like this:

Original fieldset code in Drupal

So I ask developpers to print me an outer element to play with:

Modified fieldset code in Drupal, with an outer element

Then, it’s much more evident to style the whole element. Here is what I obtain as a basis, with a plain background color and a revised and better balanced arrow icon:

Redesigned fieldset in Drupal, styling only the outer element

Isn’t it better ? What is cool with these changes is that they affect the entire site, back-office and online backoffice zones.

Finally, here the CSS code I made for these changes :

fieldset
{
    padding:0 10px 10px 10px;
    color:#4A4A4A;
    border:none;
}

.fieldset-outer {
    background:#f0f0e6;
    border:1px solid #BBBBBB;
    overflow:visible;
    margin-bottom:10px;
    margin-top:10px;
    clear:both;
}

• The zen theme
• Drupal.org

Edit : 2009 Sept, 25th

You’ve been asking for some more technical details about the developer side of the modification. Pierre Cotinière from OWS gave me thise details :

Orininal changes were made in Drupal 5. But this mod will work in Drupal 6 and 7. You have to edit the template.php file. Details here : http://api.drupal.org/api/function/theme_fieldset/6

Here is our code :

function zen_fieldset($element) {
 if (!empty($element['#collapsible'])) {
 drupal_add_js('misc/collapse.js');
 if (!isset($element['#attributes']['class'])) {
 $element['#attributes']['class'] = '';
 }
 $element['#attributes']['class'] .= ' collapsible';
 if (!empty($element['#collapsed'])) {
 $element['#attributes']['class'] .= ' collapsed';
 }
 }
 return '<div class=\'fieldset-outer\'><fieldset'. drupal_attributes($element['#attributes']) .'>'. ($element['#title'] ? '<legend>'. $element['#title'] .'</legend>' : '') . (isset($element['#description']) && $element['#description'] ? '<div>'. $element['#description'] .'</div>' : '') . (!empty($element['#children']) ? $element['#children'] : '') . (isset($element['#value']) ? $element['#value'] : '') ."</fieldset></div>\n";
}

Hope it helps

Tech holydays this year for my friend Cedric and me, as we are attending the Drupal 2008 conference in Szeged, Hungary. I’ll join Cedric in Ljubljana, Slovenia, then we will ride his truck to go up to Szeged.
I’m eager to see Szeged, the historical bath, the music festival, and almost 400 participants at the conference. So much to talk about with the various Drupal projects currently running.
I hope I will get a camera by the time I leave Paris!

Links :
Drupalcon 2008
Szeged on wikipedia

My first big Drupal project, Seronet.info, is now online for three weeks. And successful! I’ve learnt a lot working on this one as an artistic director, in charge of the design, templates and CSS styles as well.I teamed up with Open Web Solutions, a company made of close parisian talented ingeneers friends. And it’s the begining of, I hope, a long serie of developpments based on the Drupal CMS. Coming, to CMS, really, there’s no more alternative than Drupal. Considering its talents to manage content types and users, Drupal is the best choice you can make. We are currently redesigning, for serious clients, websites previously built with other solutions, such as Typo3 (who appears to be a backend nightmare for its users).So, Seronet is a social network for HIV positive people, mainly. It belongs to Aides, an association who can be compared to ActUp (even if it’s not, and ActUp France does exist). The site has been launched during the Parisian Gay-Pride, and will very soon reach its 1000th user.We signed this project in December 2007 and have been working on it since. I had to make three different graphical propositions for it. The first two were too close to a news publishing system. We then broke this layout to propose something more web-2.0-participative style, and it worked well.

What can I personally learn from this experience ?

• Finding a way to present middle steps during the artistic phase can be a good idea. I mean,in between the mood borad phase and the graphical proposals. This can save a lot of time, especially if your clients are quite aware and experienced in the web domain.
• Voluntarily leaving in you design a crappy elements will help to gather all the negative energy on something. I have a personal theory on this: put a craapy looking block with Comic-Sans in your design. A lot of people are going to talk endlessly about it: these are not the people you want to get feedback from. Some other will ignore this item to focus on the hierarchy issues of your design: this is the people you want to listen carrefuly. First group is talking with their heart, it’s all about their own emotion and sensation. Second group is speaking with their mind, being able to take some distance with the design and to ask themselves about the end user sensation.
• Starting the templating and CSS process too soon can be a mistake. You have to wait for all the elements to be in place, in order. During this time, help the coders to respect the prototypes, ensure yourself that everything is in good place, or you will have to re-template it later. Everything at the good place means you may not even have to touch to the TPL file. Also be sure that the code parsed is correct, semantic (h1 only for the website title, <p> for every text…) and that the <span> you’ll need later are correct.Work with a good start theme : Zen appears to be one: it has an empty CSS file with already declared classes. When everything has been parsed in the right place, and been tested, go CSS. It’s also, in my opinion, your best chance to be W3C compliant at the end.
• Designing a logo in 3 days is just not enough. It won’t let enough time for you or your client to switch from a concept to another. 3 days is just enough to explore the first phase of proposals.
• As a designer, set up you own working copy on your own server. And if you can, make it a real distant internet server, not the crappy machine in the corner of the studio. If you’re not already into it, start learning Subversion. And if you’re about to start, give yourself the best chances to do it right : do it command line! Tortoise can be usefull, but it means having data on a local machine.Push dats to the server and you’ll get the benefit of being able working from anywhere, anytime with no preparatio, on any kind of machine. Backup elements of your server on a regular basis. Backup. Did I say Backup? BACKUP!
• Chose your editor wisely, and keep it simple stupid: Dreamweaver may be good at coding, but it is complicated and expensive. Eclipse, Zend studio, TextMate, UltraEdit are good unexpensive solutions. Keep an eye on Vi of course, this will keep you out of troubles from time to time.

What can we all learn from this developpment ?

• Working for a cause is more interresting than for something you don’t really care about. None of us in the dev team is directly concerned by the HIVC, but let’s face it, we’re all in our 30-35’s, and AIDS was there since we’re kids. We felt concerned.
• If you don’t go to prototype, you will regret it later. Or at least you will end up spending a lot more time on some views that was necessary. By now on, we’re going to “spec” and prototype a lot more, with strong validations at the end of each step.
• Attaching too much importance to the homepage is what your client want, but not the project interrest. You have to ask yourself : what will be the most important, visited, valuable views of the website you’re going to build? List them, and start designing, zoning, prototyping. Ignore the home page for a while. I mean totally ignore it! This will come in last. People arrive on a website, for 70% of them, by a random page, from a search engine or another website. Only if they find the content valuable, they will click on the logo to have a look on the homepage. If the inside of the site is lame, they’ll never going to end up on the frontpage. So you have to do great design for the inside, and for the same reason, you have to link to essential stuff in your footer, and to add a description of you site and mission in it as well: the footer is going to appear on each view of your site. Don’t hide from you visitors. On Seronet, we spent a lot of time on the homepage. After three weeks online, what are the most used pages of the site? The chat page, and the personal mail page: two views that weren’t clearly the center of our preoccupations.
• Don’t wait too long to test it under IE6, especially if you use such things as javascript fancy blocks. And when I say too long, I think never wait a single minute.

This is what comes to my mind when I think about the project now. I’ll have the occasion to talk about the in-depth post mortem we’re about to do about it. I’ll also write about the artistic pahse and proposals, and about Drupal itself. I hope some of the advices can be usefull to some of you.

External links

1. Seronet.info & Aides
2. Open Web Solution
3. Subversion : Subversion is an open source version control system.
4. TextMate

Don’t underestimate those numerous 1px IE bugs
…and don’t think you’ll fix them all in one day.