‘Top lists’ as heuristics for simple usability evaluations

Heuristic usability evaluations are a discount usability engineering method for quick, cheap and easy evaluation of interfaces; but if you can't or don't dare to apply usual heuristics, here's an alternative: 'top lists'.

Heuristic evaluation is one of the most popular usability techniques; it basically consists of reviewing an interface and check if it fulfills some well-known guidelines and principles (the “heuristics”).

Once you overcome the fear of performing a task with such a fancy name, the following step is obvious: choosing the heuristics (guidelines) to use. There are some popular heuristics lists, but there are some risks when using them for a usability evaluation:

  • If the heuristics are too generic, they don’t help you to identify real issues.
  • Otherwise, if the heuristics include detailed checkpoints, you may concentrate on small or very specific issues while overlooking the important ones.

Consequently I suggest using alternative heuristics: the ‘top lists’.

Which lists?

With ‘top lists’ I am referring to lists similar to these by Jakob Nielsen:Web mistakes (by Jacob Nielsen) 

I think this kind of guidelines might be used (or the mistakes avoided) in small projects, or even in big projects as a preliminar evaluation, or in other situations.

(more…)

METAeuFORiAS: Google is like a big brain

Versión en español aquí. We may consider Google as a “big eye” not only because of the images provided by Google Maps and Google Earth but also because it seems “to see” everything that is written on the web. But…

Versión en español aquí.

We may consider Google as a “big eye” not only because of the images provided by Google Maps and Google Earth but also because it seems “to see” everything that is written on the web. But in fact the way Google indexing process works is more like a huge brain.

Google logo with two brains

[…] keep on reading in METAeuFORiAS

D’oh! The attachment! A simple solution

A simple and easy solution to those forgotten attachments in e-mails. Hasn't it happened to you?

Has this ever happened to you? You want to send a file to someone, so you write a nice e-mail explaining what it is; then you click the send button, and some minutes later you receive the reply: “ok, very nice, but … where’s the attached file?”.

Yes, you forgot to attach the file. It’s a common but hard to avoid problem; a good rule is always attach the file before writing the e-mail, but aren’t there any better ways to avoid this?

Some systems, like GMail or Thunderbird, have options to alert you when you try to send an e-mail which includes specific words (“file”, “enclose”, “photo”, …) but has no attached files. It’s a nice idea, but far from perfect: you will still miss files if the system doesn’t detect these words, or you will get an annoying alert about an attachment you don’t want to send.

A simple solution

Here’s a simpler solution: the user gets notified of how many attachments the e-mail has when he/she is about to send the e-mail, not using annoying alerts but simply including that information in the send button, like this (GMail example):

Composing a message in GMail, with the button 'Send (0 attachments)' highlighted 

So when you are going to send the e-mail, you realize that the message has no attachments. Simple and effective, don’t you think so?

(more…)

A (better) Javascript badge for Twitter

Here you are a HTML/Javascript badge for showing your Twitter updates. Much better than the one at Twitter's web page!

So you want to show your latests Twitter updates in your web page? You can use Twitter’s badge, but the look isn’t great, and URLs neither @replies inside updates are not clickable.

If you want a better badge including clickable URLs and @replies (like the one at the left column of this page), just follow these steps:

Badge for Twitter

(more…)

WordPress: single posts using different language

A technique to include single Wordpress posts in a different language than the main language of the blog.

Publishing a multilingual blog is a hard task; you have to translate and maintain every single post, besides translating all the interface. But what about if you have a simple monolingual blog, and occasionally want to include a post using a different language? You can just write the title and the content in that language, but, as W3C guidelines says, additionally you should…

Clearly identify changes in the natural language of a document’s text and any text equivalents (e.g., captions). [Priority 1]

So here you are an easy way to mark a single post using a different language, using custom fields in WordPress:

1. Modify your template file(s) (tipically single.php, index.php, archive.php) where the following piece of code appears (the div block containing every single post):


<div class="post" id="post-<?php the_ID(); ?>">

Modify them by adding the highlighted code (to check if there’s a custom field called lang for that single post and include it as the language of the post, if not empty):


<div class="post" id="post-<?php the_ID(); ?>"<?php $custom = get_post_custom_values('lang'); if ( $custom != '' ) echo ' lang="'. $custom[0] . '"'; ?>>

2. For every single post written in a different language than the blog main language, add a custom field called lang and assign it the post’s language code (‘en’ for English; ‘es’ for Spanish, …)

Adding custom field 'lang' with value 'en'

3. And that’s all. Now, every post may be identified with its own language. Of course, you don’t need to include that field if the language of the article is the same language than the blog, as long as the main language is identified in the header of the web page.

Please, let me know it this works for you or if you find any bugs or improvements.

No more double submits in web forms

Usually, submit buttons in web forms should be clicked just once; but many users click them twice or more. Why? Because they’re used to launch actions by double clicking (as on Windows icons). Because the server doesn’t replies instantantly, and…

Usually, submit buttons in web forms should be clicked just once; but many users click them twice or more. Why?

  • Because they’re used to launch actions by double clicking (as on Windows icons).
  • Because the server doesn’t replies instantantly, and they click again “just to see if something happens”.

What’s the result? The form data is sent twice to the server, and users usually don’t realize it; they just get the response to one of the submits. Try this simulation to see what happens when submitting several times the form before the server response arrives:

reset

This is not a big issue if it’s, for instance, a search form: the query is being launched twice but the user simply gets the result. It may be annoying if someone is receiving the same mail several times just because users are submiting several times the contact form. And it’s a real big problem when the user is submiting a payment (you can be pretty sure they don’t want to pay twice the same object!).

The solution

There’s an easy solution for that problem! Simply disable the button just after the form is submitted, and you can change the button text too. The result is something like this:

reset

This is done using the onsubmit form event:

<form onsubmit=document.forms['formname'].submitbutton.disabled=true;
document.forms['formname'].submitbutton.value='Sending...';" action="action" name="formname">
  <!-- some form controls here -->
  <input value="Send" name="submitbutton" id="submitbutton" type="submit">
</form>

With this technique, you achieve two positive effects:

  • avoiding the double submit problem; and
  • giving feedback to the user confirming the submit

Of course, there’s no perfect solution. If JavaScript is disabled at the browser, it doesn’t works; if it’s really important avoiding multiple submits (for instance, when it’s an economical transaction), it should be done at server’s level.

It’s really simple to use and without negative effects. Try it if you are really tired of multiple submits and tell me how it goes!

Something I still miss in Google Analytics

Google Analytics has a nice new interface, much more intuitive and usable, but I still miss something I think it would be really usefull: an integrated calendar of events. I can select a range of dates at Google Analytics and…

Google Analytics has a nice new interface, much more intuitive and usable, but I still miss something I think it would be really usefull: an integrated calendar of events.
I can select a range of dates at Google Analytics and get different statistics: visits, unique users, etc. But there are many events (internal and external) that may affect that data. For instance:

  • Changes at the site: contents, layout, etc.
  • Changes in Google Analytics configuration (for instance, in filters)
  • Google Adwords campaigns linking to that site
  • etc, etc.

Any webmaster would be happy to know how those events are related to the statistics, wouldn’t they?

How could Google do that? We already have a solution: Google Calendar. So we simply would associate a site monitorized by Google Anlytics to a calendar in Google Calendar. A webmaster could add events to that calendar, and they would be shown at Google Analytics.

Here’s an example; this graph shows a decrease in the number of visits on June, 2nd:

Google Analytics graph (without events)

Hmmm… What happened that day? Oh, maybe that new filter to exclude inner visits. With the feature I suggest, I would link the Google Analytics account with a Google Calendar which includes events related to the site, like this:
(more…)

A valid (X)HTML Flash badge for Twitter

Este artículo está en inglés; supongo que la mayoría no tendréis problemas en leerlo. De todas formas, espero escribir un poco más adelante sobre Twitter; si no quieres esperar, puedes leer alguna página que explique qué es Twitter. O, más…

Este artículo está en inglés; supongo que la mayoría no tendréis problemas en leerlo. De todas formas, espero escribir un poco más adelante sobre Twitter; si no quieres esperar, puedes leer alguna página que explique qué es Twitter. O, más fácil aún, regístrate y podrás añadirme para saber qué estoy haciendo en cada momento. 🙂

I have recently inserted the Flash badge for Twitter in my site; but the original code offered by them is not valid HTML. So why not use code that passes validation? Here it is:

<div style="width: 176px; text-align: center">
 <object width="176" height="176" title="what am I doing... (Twitter badge)" type="application/x-shockwave-flash" data="http://twitter.com/flash/twitter_badge.swf">
  <param value="http://twitter.com/flash/twitter_badge.swf" name="movie" />
  <param value="color1=255&type=user&id=USER_ID" name="flashvars" />
  <param value="high" name="quality" />
  <param value="twitter_badge" name="name" />
  <param value="always" name="allowScriptAccess" />
  <param value="transparent" name="wmode" />
  <param value="http://www.macromedia.com/go/getflashplayer" name="pluginspage" />
 </object>
 <a style="font-size: 10px; color: #0000ff; text-decoration: none" href="http://twitter.com/USER_NAME">follow USER_NAME at http://twitter.com</a>
</div>

And the result is (using my own user data):

Just some comments: