Jeroen Coumans

Drupal user account pages

Thu, 09 Oct 2008 07:40:45 -0700

It's the little things that countâ¦

On a default Drupal installation, the user account could really use some love and attention. There are a number of predefined pages to allow users to register themselves on the website, but the usability of these pages is pretty bad. This post is about one little example: they all share the same title. I'm going to show you how you can fix that.

Have a look at the drupal.org register, log in and request new password pages. You'll note that each one has a head title of "User account | drupal.org", and a page title of "User account". While each page certainly has a different function, why would they all have the same titles? That's just weird and plain bad usability - a page title should be descriptive of the main function of a page.

Anyway, there are ways to override that. Drupal uses a placeholder variable to dynamically determine the page and head title based on the internal path. In your theme, you'll find something like the following:

And:

Since Drupal determines its context based on the path that is requested, simply checking for the arguments which are passed to the page is enough.

It's really simple PHP, checking for the first and second arguments (arg(0) and arg(1)). Note that instead of printing out the text, it's wrapped in the t function, which will make it translatable. That way, you don't have to edit the theme in order to translate your texts afterwards.
As you can see, there are two checks for the login page. That's because both the user and the user/login pages present a login page, and the Drupal menu that is presented on the account pages defaults to the user page. So we have to check if the second argument is empty, and if it's not, print the title of the login page. If we didn't add that extra check, we'd have overridden the default user account pages, which all follow the form user/uid, where uid is the numerical id of the user.

Just adding the same checks to the title will suffice to change it there as well. Full credit goes to the Drupal community, as this snippet is based on drupal.org. You can see it in action on the new CJP website: login, register and forgot password.

Thesis abstract

Fri, 21 Mar 2008 18:20:55 -0700

An average human being is capable of keeping approximately 6 items in his short-term memory. Then why do we still think it's natural that websites present us dozens, or even hundreds, of links to navigate through them?

According to Jakob Nielsen, navigation on the web is often overdone: there are too many links on a page. His research shows that users ignore navigation area's and dive straight into the content area. Despite the growing importance of disciplines such as information architecture and usability research, or the use of design patterns and content management systems in the website development process, navigation is still fundamentally based on clicking links in lists. Let's not forget that the Web as medium is still very young: "I think the Internet is still on Day One... You can't predict some of the really big changes. Who would have said that the development of the automobile would have led to suburbia?" (Jeff Bezos, Amazon CEO). So there is still plenty of opportunity for experiments with new interfaces to make information accessible. That is also the purpose of this thesis. Through a design research, this thesis will focus on exploring different concepts of website navigation.

To escape the confines of current ideas of 'navigation', this research will try to come up with different metaphors for navigation by doing user research in the form of a narrative enquiry. An example of an often used metaphor is the word 'menu', which relates the choice of a webpage with the choice of a dish in a restaurant. What other metaphors are conceivable, and what interaction concepts can be designed around them? This will be the central theme of the first part of the research.

Then the state of the art of user interfaces and interaction design will be examined to determine what concepts may be usable to create alternative forms of website navigation. For example, the concept of the Zoomable User Interface (ZUI) is based on distance: the further away an item is, the smaller it appears. Full details are visible when something is 'zoomed in'. This is very effectively used on Google Maps. Another example is the Textual User Interface (TUI), which is language-based and works by giving commands to the computer. Thanks to its speed and extensibility, this is a very powerful interaction mechanism. Although it may seem like nothing new, as command prompts are as old as the '70's, these principles are rarely used on websites, with search interfaces as the proverbial exception to the rule.

The result of these and other experiments will be a series of paper prototypes, wireframes, design
mockups and proof of concepts. These will be analysed from a qualitative point of view with user
research, and documented through thick descriptions. Of course, I will publish my results here in my journal as much as possible.

A write-up of the creation of the thesis image can be found in my portfolio.

Identity management

Tue, 18 Mar 2008 01:29:34 -0700

As the World Wide Web continues to evolve, people use it for increasingly personal and social purposes. The current social networking sites are quickly gaining critical mass, moving the adoption curve forward from an early majority to the late majority. In the Netherlands, Internet usage in is still rising, and the skills of surfers continue to improve. According to the Dutch bureau of statistics CBS, more than 2 million people have designed a webpage.
As we put more of ourselves online, our identity expressions become more and more shattered throughout the web. Facebook, Flickr, Last.fm and Hyves all represent a small piece of me and my online identity. Bringing these all together will take a couple of years, although with developments like OpenSocial, OpenAuth and OpenID the first building blocks are in the pipelines.

Anyway, the whole reason of this introduction is that I've made a small step in consolidating my Web presence - I have now merged my portfolio into my blog. I really liked the design of my portfolio so I tried to keep as many aspects of it as possible, and only made small tweaks as necessary (although there are many of themâ¦). There are some big improvements to the design though, mostly fixing mistakes from my last redesign.

First of all is a return of a navigation block at the top of the page. Since the previous incarnation only had two really big sections (the blog and the links), I didn't see a need for a permanent navigation block. But it's back with a vengeance, sporting a shiny jQuery-powered rollover effect.

The journal itself now boasts 10 entries again. This means more scrolling, but less paging, which is a Good Thing. This is more conform the Mullet-style layout I originally intended for the journal.

My elsewhere section, where I aggregate all my favorite website links, has dramatically improved thanks to the use of a four-column grid design. It's one of those improvements that seem so obvious in rertospect that I wonder why I didn't come up with it sooner. I've also increased the item count to 100, which is quite hefty, but very manageable. I found myself getting caught up browsing through my old links again, re-discovering old gems!

Thanks to the power of Drupal, I'm able to organize my portfolio in some pretty cool ways. Using the taxonomy module, every portfolio item is tagged with the medium or technology in which it is created. With the books module I created 5 distinct sections through which you can browse: my current freelance work, C-MD work, Solide work, print, and my early art work. For the landingspage I decided to use large thumbnails, giving an immediate (and for some, sufficient) idea of my work. Clicking on the images shows a larger version in a lightbox, while clicking the title or the casestudy link will take you to the permanent link of a portfolio page.

Getting this all to work in Drupal the way I wanted to involved some heavy themeing work, which I'd be happy to write up if anyone's interested. Unfortunately, there were quite some places where I couldn't override a theme function or manipulate Drupal's HTML output (I'm looking at you, Views module), and it was time-consuming to find the proper way to handle these cases. I resorted to manipulating the DOM with jQuery to fix some annoying bugs.

I made no effort whatsoever to get this working in Internet Explorer 6. I don't intend to either, unless anyone has compelling arguments otherwise. Less than 4% of my visitors uses Internet Explorer 6, which is such an insignificant amount that it doesn't warrant the extra development time and headaches.

Design literature

Fri, 11 Jan 2008 13:37:08 -0800

I'm assembling a list of books for my research. This list is already too long, which probably means my subject is too broad. However, I like to read and these books will come in handy no matter what!

On (interaction) design:

In the Bubble: Designing in a Complex World - John Thackara
Computers as Theatre - Brenda Laurel
Interface Culture : How New Technology Transforms the Way We Create and Communicate - Steven Johnson

Technical and methodological books:

Thoughtful Interaction Design: A Design Perspective on Information Technology - Jonas L

Design Research

Fri, 11 Jan 2008 13:37:07 -0800

As you might be aware, I'm currently doing a master Communication & Multimedia Design (C-MD). Coming up with a good research subject is, for most of us, one of the hardest tasks. To make it easier, we were asked to setup a blog to reflect on our interests, hobbies, experience, philosophy etc. Rather than spin off another web site, I'm going to post my thoughts here under the tag c-md.

The first phase of my design research is a discovery phase. With almost a year to spend on any subject within the context of C-MD,, what should I choose? Obviously, it has be related to my previous work and interests, and should also be socially relevant. But my interests have always been rather broad, encompassing cultural trends and concepts such as new media, Web 2.0, co-creation and user-generated content, virtual communities and Open Source, to methodologies and techniques such as interaction design, gaming theory, artificial intelligence, knowledge management, accessibility and usability, and the semantic web.

What I like most, though, is to think up of creative solutions for converting traditional knowledge management problems into a web-based solution, making use of the strengths of the Internet as a new medium. My reasons for doing this master were to more fully educate myself on the medium-specific strengths and weaknesses of the Internet, and its related creative professions. There is a lot of potential on the Web due to its hypertextual, multi-media nature, but most of it is untapped or undiscovered. But unlike photography, radio, television or film, the Web is a fully interactive medium with lots of social potential. Only now, with the trends and techniques that are developed under the Web 2.0 umbrella, are we untapping some of that potential. So that's an area I'd like to work on: the medium-specific strengths of the Internet and its social and interactive potentials. But obviously, that's still way too broad for a specific research subject.

A while ago, I stumbled upon the website politieonderzoeken.nl. This website represents the first humble babysteps of the Dutch Police to use the Web for engaging the public in solving police cases. I really like this concept, although I hate the execution of the website. On the most basic level, the site is technically built in invalid and inaccessible XHTML, thus failing to comply with the Dutch Web guidelines, which are mandatory for all governement websites. And to add insult to injury, all basic and mostly textual information is encoded in Flash, thus rendering it completely inaccessible for search engines, not to mention that its a proprietary technology, not an open standard.

Technical problems aside, I think the concept of the police and the public interacting in a meaningful way to solve crimes is essential for a more efficient and engaging use of the Web. And while I can see that the police has to censor comments on the site so they won't hamper with the investigation, by what other means can people on the Web be used as a collective intellgence? And in what ways can these solutions be abstracted or standardized, sort of like design patterns for harnessing human intelligence? The Amazon Mechanical Turk can be seen as a first commercial exploitation of this idea.

My research proposal (at least for now), would thus be to investigate and experiment with interaction patterns in order to utilize their collective knowledge and potential. This goes further then setting up a virtual community, although that would be one of the first steps. One of the areas that I'd love to look into is the Alternate Reality Game, which uses game design theory to mobilize individuals and groups into solving certain puzzles:

"An alternate reality game (ARG) is an interactive narrative that uses the real world as a platform, often involving multiple media and game elements, to tell a story that may be affected by participants' ideas or actions."

While they're pioneered and most often used for marketing purposes (an early example was the ARG around the movie A.I.), they're also used to explore future trends and ideas. For example, the ARG World Without Oil uses a simple future doom scenario ("what if the oil supply of the world would run out?") to engage users into creating video's, blogs, photo's, stories, and discussions which revolve around this concept (see for more discussion the blog post World without oil: Democratic Imagination?):

The potential for ARG's as real-world collaborative problem-solving platforms is enormous, especially when mixing in real-world problems, such as the questions raised by the police in their website. The ARG could be an encompassing genre within which to create puzzles, challenges and question for users to solve. I'd love to explore their potential as part of my research next year.

Thoughts? Comments? Criticisms? Please provide your feedback in the comments!

Simple, accessible jQuery menu

Fri, 11 Jan 2008 13:37:07 -0800

Not every website needs to be powered by a content management system, or even a simple blog engine. Sometimes, a fully powered CMS like Drupal or Joomla is just a little too much. Sometimes it's not even possible to use a database and all you have is your webserver, maybe equipped with PHP or ASP. For a simple website, it's even overkill to add the complexity of a database, and all you want is just some folders with static HTML files in them. But to make it easier to maintain and expand this website, you create some simple templates for the header and the footer, so you don't have to change all files if you need to change the copyright date or the tagline. These are included via some server-side processing, for example, with Apache server-side includes, or PHP includes.

But then you run into a roadblock when you try to maintain your navigation in a similar vein. Being a good standardistas, you use an unordered list for your navigation, and use CSS to present it. But in your navigation, you want to highlight the currently viewed page, since this greatly enhances the usability of your website and lets readers know where they are. And that requires a predetermined strategy to setup and maintain, such as using body id's and menu id's, or using PHP to match the page with the proper menu. These solutions have some drawbacks which led me to investigate an alternative solution. In this article, we'll look at some common techniques for highlighting the current menu item in an otherwise static website, and at a Javascript-based solution.

The ALA way

First of all, the most common solution is to add a class to the active menu item and style it with CSS. For example:


  Home
  Products
  Contact

And in your CSS:

#nav a {
  color: #999;

}

	#nav a.active {
  color: #000;
  font-weight: bold;

}

That's easy enough to build, but it requires that your menu adapts itself to the current page in order to add the required class. You could use PHP to solve this, by adding some logic in the navigation file to match the current page with a menu item. This is essentially the approach that is explained in the ALA article Keeping navigation current with PHP. For each page, a unique id is added to the top, and each menu item in the separate navigation.php checks to see if the page id matches the menu id. If it does, a class is added which is styled with CSS:


  Home
  Products
  Contact

It's a nice solution, but it still requires too much work: each page must include a unique identifier, and for each menu item you have to add a verbose check. We're looking for a solution that doesn't require any server-side logic, just some means to include files. Adding a page to your site should be as easy as creating a new page and adding a new link in the navigation file.

CSS-only does the trick

An alternative technique uses body id's and navigation id's. Each page page is assigned a unique id, just as each navigation item. If the body id and the navigation id are the same, then the menu item should be highlighted. Then you can add CSS rules for each combination of page and navigation id. Here's an example:

#home a#nav-home,
#products a#nav-products,
#contact a#nav-contact {
  color: #000;
  font-weight: bold;
}

Essentially, it's the same solution as the PHP method above, except it uses CSS to determine the logic of matching page id's with menu id's. Therefore it has the same drawbacks: each page requires a unique id, and adding a page means that your CSS needs to be changed. Our solution shouldn't require that much work or that much code, and should be unobtrusive: it has to work with our current markup and CSS.

The Javascript way

With Javascript, we can maintain our HTML and CSS seperate from the main file. We can use it to figure out if the page we're currently viewing matches a menu item, and if so, add a class to it which is styled with CSS. This solution doesn't require any page identifiers, serverside scripting or additional CSS rules for new pages. We start with the following minimal markup:


  Home
  Products
  Contact

And this minimal CSS:

#nav a {
  color: #999;

}

	#nav a.active {
  color: #000;
  font-weight: bold;

}

To make it really easy, we use the excellent jQuery library to do the hard work for us, all we need to do is add the logic to figure out if the current page matches a menu item, and add the class="active" to this item. This is accomplished with merely four lines of code:

jQuery(function($) {
  var path = location.pathname.substring(1);
  $('#nav a[@href$="' + path + '"]').addClass('active');
});

It looks a bit complicated at first sight, but it's not so difficult.

The first line, jQuery(function($) { is shorthand for $(document).ready() and makes sure that all code within will be executed as soon as the DOM is ready. The second line, var path = location.pathname.substring(1); creates a variable called path which contains the path to the current page as it appears in the browser address bar. The third line is a bit more complicated. The first part, $('#nav a[@href$="' + path + '"]'), searches within the nav element the link whose location (the href) is equal to our variable path. The second part, .addClass('active'); adds the class attribute with a value of "active" to that element. The last line, }); closes the jQuery function and finishes our code.

That's all that is required. I've created a basic example that includes all of the above ingredients.

This is an accessible solution that only requires minimal markup. Since we use valid and semantic markup, all content is readily available for search engines, screen readers, mobile devices and other user agents. We enhance this markup by using CSS for presentation, and add Javascript to further improve the user experience. And finally, it's easy for us to setup and maintain.

Spicing it up

But wait: we can go further with this! What if your site grows and you decide to add some articles. To make it easy to maintain, you put each article in its own folder under /articles/. Your navigation.php would look like this:


  Home
  Products
  Articles
    
      Article one
      Article two
      Article three
    
  
  Contact

As you can see, it's still a simple list, and the the articles submenu uses a nested list for it's sub navigation. Clean and easy, just as we like it. Our Javascript file is well equipped to handle nested lists, but wouldn't it be nice to only show the sub navigation if the articles link is chosen? Remember, since our Javascript is added on top of semantic markup that is styled with CSS, it works unobtrusively and enhances the page for users with Javascript enabled, but doesn't interfere with clients that don't have it enabled.

Let's see what we can come up with. First of all, we'll hide the subnavigation with Javascript. Since we also will use Javascript to show it, we make sure all functionality stays in the same layer. No Javascript, and everything is shown. This is easily accomplished with jQuery with this line:

$('#nav ul').hide();

The first part selects all unordered lists within our #nav element, and the second part hides it. This is an important design principle of jQuery, namely the ability to select HTML elements and apply behaviour to it by chaining them. We will use this ability to expand the menu matching code and add an action that will show the sub navigation:

.siblings("ul").slideDown();

Chained together, it looks like this:

$('#nav a[@href$="' + path + '"]').addClass('active').siblings("ul").slideDown();

The siblings selector makes sure that when a menu item is chosen, all lists within the same element will slide down. Remember that our sub navigation is in a list item together with the link. Therefore, the

sibling

Finally, to make sure the menu stays expanded when a sub menu item is selected, we need one last line to show the parent list.

$('#nav a[@href$="' + path + '"]').parents("ul").show();

We need this to be a separate line since in an expanded menu, only the sibling's unordered lists are shown, not the parents.

Altogether, our site.js looks like this:

jQuery(function($) {
  $('#nav ul').hide();
  var path = location.pathname.substring(1);
  $('#nav a[@href$="' + path + '"]').addClass('active').siblings("ul").slideDown();
  $('#nav a[@href$="' + path + '"]').parents("ul").show();
});

I've also created an example of this slightly more advanced menu. Note how the sub menu slides down when you click on articles, and stays shown when you select an article.

So there you have it, an easy "plug and play" Javascript solution for keeping your current menu item highlighted that will allow you to use minimal markup in a seperately maintained navigation file that can be included with your method of choice (this is left as an exercise for the reader).

Was it helpful? Was something not clear? Can you think of improvements or do you use another technique? Feel free to leave your feedback in the comments!

Thesis proposal

Fri, 11 Jan 2008 13:37:06 -0800

My pre-master year at C-MD was concluded on the 25th of june with a presentation of my thesis proposal. My ideas have shifted quite a bit and my proposal evolved with it.

Initially, I wanted to explore the possibilities of Web 2.0 for police research, by building on the police's initial steps on the web with politieonderzoeken.nl. However, this was too narrow, although I worked out some ideas in a study course on creative design. Brainstorming more about using the web for crime solving gave me the idea of a murder game, and with this idea in mind I found World Without Oil a great inspiration. This concept had all the ingredients: a mix of reality and fiction, community building, collective intelligence, user-generated content and cross-media story telling. This Alternate Reality Game, as it is called, is my example of how the web can be used to narrate, perform and collaborate on social issues that are too big for any one individual to solve. This would become my subject for my thesis proposal as I presented it:

"How can the Alternate Reality Game be used to make the world a better place?"

Due to the many exams we had in June I wasn't able to further refine my research question, as it is still way too broad. When college starts again in September, I'll have a couple of weeks to tweak it and turn it into something that's measurable and executable within a year. I'll probably work out one specific aspect which interests me, for example to investigate how game elements can be used in community building to increase the participation ratio.

In any case, if you're interested, my research proposal can be found in the articles: Everything is a game. Feel free to comment on it!

Edupaper

Fri, 11 Jan 2008 13:37:06 -0800

Edupaper is an innovative company with a green goal: it intends to reduce paper use in education by implementing mobile applications. Using electronic paper will reduce the number of books students need to carry, and in effect reduce the number of trees which have to be cut for books that students. Furthermore, by equipping and connecting them with Open Source Software such as Dokeos, it will enable students to learn more efficiently. Of course, when Frits Hoff, CEO of Edupaper, approached me for designing his website, I gladly accepted.

After a few iterations we finally settled on this design, which I am quite fond of. Since modern electronic paper has such a high resolution and strong backlight, it's allmost as sharp as regular paper and can still be used outside. To support this communication goal, I focused on the typography, using large corpses for legibility and employing a vertical rhyme. Another goal was to make it as clean and fresh as possible, which I think is achieved very nicely by the use of just a few supportive colours.

The design was built as a Drupal theme. There were some small challenges, mostly in getting the vertical rhyme just right so it would line out with the background stripes. There was a very annoying issue with images seemingly getting a 7px padding in Firefox, which was clearly seen in Firebug, despite that all paddings and margins were explicitly set to 0. To solve this, I resorted to floating all content images, which isn't very nice but at least they line up properly.

For the logo, I used an alpha-transparent PNG image, since I wanted the background lines to shine through. This meant that a little bit of Javascript had to be used for Internet Explorer 6, which doesn't support this natively. It was very easy with a jQuery plugin, but unfortunately it required upgrading of Drupal's jQuery version, which is stuck at 1.0. The Drupal developers decided to stick with the same major version of jQuery so module developers have a stable target to work with, but it makes it so much harder for us theme developers since most plugins available nowadays require version 1.1. Fortunately, the jQuery upgrade module takes care of upgrading Drupal's Javascript so it works with jQuery 1.1, but it requires you to replace the system jquery.js. This isn't always feasible, especially in a multi-site installation. But I digressâ¦

All in all, I think the website turned out great, and I'm certain it brings a new level of professionalism and clear communication which will take Edupaper to the next level.

YUI grids extension

Fri, 11 Jan 2008 13:37:05 -0800

Despite the extra required

tags, I regularly use the Yahoo! UI grids framework. This provides several advantages when buidling multi-column layouts with CSS. Besides speedy development and source-order independence, it gives you a lot of flexibility when creating your site. More practically, it's extensively tested in A-grade browsers which includes the ancient, but still widely used Internet Explorer 6). Lastly, they're almost completely driven by classes, which means you can add your own, semantically chosen, id's.

The default widths provided can be used for pixel-precise layouts while maintaining font-size based scaling, but there's one curious thing about the default grids that has always bothered me. For the left sidebar, they provide widths of 160px, 180px and 300px, while for the right sidebar, they provide 180px, 240px and 300px. This asymmetry has bothered me long enough, so I whipped up some code for two additional sidebar configurations: the left 240px sidebar, and the right 160px sidebar.

You should be able to add the following code to any release of the grids.css:

/* yui-t8: 240 on left */
.yui-t8 #yui-main {
  float: right;
  margin-left: -25em;
}

.yui-t8 .yui-b {
  float: left;
  width:18.4608em;
  *width:18.016em;
}

.yui-t8 #yui-main .yui-b {
  margin-left:19.4608em; 
  *margin-left:19.016em;
}

/* yui-t9: 160 on right */

.yui-t9 #yui-main {
  float: left;
  margin-right: -25em; 
}

.yui-t9 .yui-b {
  float:right;
  width:12.3207em;
  *width:12.0106em;
}

.yui-t9 #yui-main .yui-b {
  margin-right: 13.3207em;
   *margin-right:13.0106em;
}

I tested them in the major browsers and it seems to work really well (it would really surprise me if they didn't, since I used the exact same measurements as in .yui-t1 and .yui-t5).

Drupal image attach block module

Fri, 11 Jan 2008 13:37:05 -0800

I recently created several PHP blocks for a Drupal website that made heavy use of the image module and the image_attach module. While the block creation wasn't very difficult, it was still a process that took me a long night of researching api.drupal.org and fiddling with SQL queries. (It was a great exercise though, since I hadn't practiced my PHP/MySQL skills since I followed a basic course at C-MD last spring. It's amazing how much you forget if you don't keep practicingâ¦ )

Anyway, the website I created these blocks for has an extensive product database set-up as custom nodes in Drupal. Besides presenting plain text information on their products, they also wanted to easily maintain their product photo's, and present them in galleries. To make this possible, I set up the image module. All photographs were imported at once via FTP, and attached to individual product nodes through the image_attach module. This proved to be very useful, since they could attach the same image to various products, e.g. for variants of the same product, and also multiple images to one product.

The challenge was for product pages to display the images in the sidebar. In Drupal, there is a clear seperation between node content and all other content, and they don't mix very well. So it's very difficult to display a piece of content in another place on your website without resorting to hacks or writing checks in your theme display logic. After Googling for a while, I took it upon myself to write two PHP blocks: one that displayed the attached images to the currently viewed node, and one block that displayed the nodes attached to the currently viewed image. This established the relationship between image and product, and allows users to click through the photo album to products, and vice versa.

Setting up these blocks wasn't particularly hard with the great example of the hook_block function provided with the Drupal API documentation. With this template, it was mostly a matter of copying the provided code, and filling in the blanks for displaying my own queries. I spent a lot of time investigating Drupal's query functions, and searching for ways to access node information in a block context. For that, the following snippet proved very handy:

This loads the node object, the concept in Drupal for a content page (as opposed to dynamically generated pages, such as listings of pages). Knowing what piece of content a user is currently viewing is essential for determining if the block needs to do something with it.

While the PHP blocks work great, I decided to go the extra mile and create modules of them. This has numerous advantages. By creating a module, the functionality can be easily deployed on other Drupal installations. For this customer, several localized product databases will be set-up. In a multi-site setup, this will mean that the codebase can be maintained and updated from one codebase. Also, the block can then have it's own theming, instead of the generic block theming. And it's possible to define addtional defaults or configuration settings.

I'm sure there are lots of improvements that could be made to this module (and I'd love to hear about them!), but it's quite usable based on my own tests. I'm not sure if it should have a long live, since it would be perfectly acceptable for the Image module maintainers to integrate this in their own module. Nevertheless, I've attached the current code for you to download. Please leave a message if you find it useful, or if you have any suggestions for improvements!

WYSIWYG editor usability tip

Fri, 11 Jan 2008 13:37:05 -0800

Open Source WYSIWYG editing in CMS still sucks, but with developments like the WYMeditor ("What You Mean" editor, built on jQuery) the situations is improving steadily. This editor lets content writers focus on the structure of their document instead of visual layout. As you can see, this editor provides subtle clues about the type of content you're currently editing with a clever stylesheet. Unfortunately, the WYMeditor is still in early beta, and Drupal's module lags a couple of versions behind.

Until it's finished though, it's very use to use the WYMEditor stylesheet in your current editor (I mostly recommend FCKEditor in a stripped configuration, but TinyMCE works just as well). The stylesheet used by WYMEditor makes it very clear wether you're editing a block level element or an inline element. It adds little icons to signify the semantics of the elements. This makes it very easy to determine if there are any stray headers or paragraphs in your content, a problem that often occurs after copious editing but that is nearly impossible to fix without editing the source code.

Using this stylesheet in your own editor is very easy. Just download a copy of WYMeditor, extract it and copy the entire contents of the iframe/default/ directory to a speficic location on your webserver. In FCKEditor, you can edit the file fckeditor/fckconfig.js and edit line 32, which states:

FCKConfig.EditorAreaCSS = FCKConfig.BasePath + 'css/fck_editorarea.css' ;

The last part (css/fck_editorarea.css) points to the location of the CSS used by FCKEditor's textarea. Adjust it to reflect the location of WYMeditor's CSS file, which is called wymiframe.css.

Note that it's not necessary to manually adjust this file if you use the Drupal module for FCKEditor. Just go to admin/settings/fckeditor and put the location of wymiframe.css in the Custom stylesheet field, like this:

That's it! Happy editing!

Do you use personas?

Fri, 11 Jan 2008 13:37:05 -0800

37signals state that they don't use personas because:

"We use ourselves. I believe personas lead to a false sense of understanding at the deepest, most critical levels."

Personas are poor substitutes for real people, they argue, and you should always base your decisions on the problems and behaviour of real people instead of passive abstractions of people. This reasoning fits perfectly with their "getting real" process, which argues for a very agile development process.

It's an interesting point, but this doesn't mean that personas are therefore useless. Of course, personas should never be used as stand-ins for actual users, and thus can never provide the feedback that real people provide - it's impossible to do usability testing with them!. Rather, they're a heuristic tool to contextualise your design problems. Personas allow you to frame your design in a way that puts the goals of real people at the epicenter of your interface. By making personas an integral part of the story that your design tells, they become a common ground for all involved parties, stakeholders, developers, designers, managers.

Personas should be based on proper, qualitative user research. The data can come from various sources, eg. interviews, discourse analysis, observations, surveys etc. The analysis is actually the hardest part, since it's very difficult to step outside your own frame of mind when trying to really understand people's behaviours. The ethnographic techniques can be learned quite easily, but the proper understanding of the methodology and the required reflective use of it makes it a very difficult task without academic education.

Clay Spinuzzi's observation that designers often frame themselves as 'heroes' to rescue the poor 'users' is a perfect example of designers executing a naive, superficial user research. But the solution is not to use yourself as the intended user of your application, unless you're building a product which is only meant to be used by yourself. Doing the proper research and crafting personas and scenarios are a good first step in designing not just for yourself. However, even 37signals can't be as arrogant as to presume they're representative for all the possible people that their products intend to reach. As with any tool or methodology, using it without proper understanding ultimately leads to failure, but that shouldn't be a reason to dismiss the tool completely.

Edit 18/11/07: Other people weigh in as well.

Jared Spool makes a similair point on the difference between crappy personas vs. robust personas
Boxes and Arrows publishes a timely article on building a data-backed persona
Andy Budd chips in with a post on rethoric sensationalism

We feel fine

Fri, 11 Jan 2008 13:37:04 -0800

Did you know that people are happiest in Hawaii and saddest in Singapore? And that people feel most sexy in Las Vegas? We Feel Fine is an art experiment that has collected allmost 10 million feelings from 2 million people around the world and has built a unique interface to dive into this data. The project of internet artist Jonathon Harris and Googler Sepandar Kamvar has been harvesting the expressions of human feelings from a large number of weblogs. The system searches occurences of the phrases "I feel" and "I am feeling", and stores these in a database. It also extracts additional metadata, such as age, gender, geographical location and even weather conditions.

The interface is a thing of beauty in itself.

The interface to this data is a self-organizing particle system, where each particle represents a single feeling posted by a single individual. The particles' properties - color, size, shape, opacity - indicate the nature of the feeling inside, and any particle can be clicked to reveal the full sentence or photograph it contains. The particles careen wildly around the screen until asked to self-organize along any number of axes, expressing various pictures of human emotion. We Feel Fine paints these pictures in six formal movements titled: Madness, Murmurs, Montage, Mobs, Metrics, and Mounds. (http://wefeelfine.org/mission.html)

Panel

At the top of the screen, there are the various attributes that function as advanced search parameters. These allow you to answer questions such as "How are women in the ages of 20-29 feeling on a rainy day in New York"? The top bar always shows the currently selected parameters, and hovering over it will open up the selection panel.

The navigation metaphor is based on movements that can be selected by scroll ingover the heart at the bottom left corner of the applet and clicking on the desired movement. In essence, each movement is a separate visualisation on a selection of the data.

Madness

The default movement, Madness, displays all particles shooting around the screen wildly until one is clicked, after which it reveals its content.

Murmurs

The Murmurs movement displays a scrolling list of the selected feelings.

Montage

The Montage view loads all images in a mosaic. Effectively, it shows you how a feeling "looks" like. Photographs can be clicked to zoom, revealing the associated sentence and author information.

Mobs

The Mobs view reveals the statistical patterns in the chosed queries. It shows the most common metrics from each of the feeling, gender, age, weather and location attributes.

Metrics

The Metrics views shows statistical anomalies of the various attributes, the traits that best distinguish the chosen query from the global average. Like the Mobs view, Metrics is divided in five axes.

Mounds

The last view, Mounds, shows every feeling in the database, scaled and sorted in order of frequency. A small horizontal scrollbar can be used to traverse the complete database.

In all of the movements views, the particles content is revealed by it's size, shape and color. The top 200 feelings are manually assigned colors that roughly correspond to the feeling (e.g. happy is bright, sad is dark).

The end result is a fascinating look into the anonymized public feelings of people all over the world. People's most private feelings are public at the same time, particular while global, acquiring new meanings by being remixed into a large lump of similar data, becoming small and large pieces of customizable, collective art works.

It's interaction design is also very refreshing. Instead of opting for your standard search queries, Jonathan has created a beautiful, animated, organic interface which reacts to your every movement, making it feel very lively and yet unobtrusive. Every time I open the applet, I feel myself drawn to all the floating particles, endlessly combining options and diving deeper. This is without a doubt a very addictive, playful interface which is at the same time very efficient at unlocking the power of the underlying database. It's not very intuitive and definitely requires some instructions or learning before opening it, but it's a small learning curve and is well worth the trouble.

The interface is built as a Java applet, and all visualisations are done via the Open Source Processing scripting language. While the applet is obviously the most important aspect, the creators also added some social features. There's a gallery which allows you to save interesting images and send them by mail. It also shows the most sent, most saved and featured "montages" as they're called, and thus provides a sort of best-of.

Last but not least, We Feel Fine also provides an API, which allows you to build query its database and build mash-ups. Strangely enough, the first mashup has yet to appear, as a quick search yielded no results.

Other sources

There's an interesting interview with Jonathan Harris on the efforts and thougths that went into We Feel Fine, and the rationale between the particle system, which is the metaphor behind most of the movements. Also, don't miss the excellent presentation Jonathan did at TED: Jonathan Harris: The Web's secret storie, which gives a very nice overview of the complete application and the philosophy behind it.