soledad penadés
repeat 4[fd 100 rt 90]

Archive for the ‘usability’ Category

20080312 Lightbox is ruining my user experience

A few online shops thought:

When the user clicks over the thumbnail, we'll open the larger image in a new layer over the content, so that we don't need pop ups.

I like to arrange my windows in a certain manner, so if a new one appears unexpectedly, it distracts me. Also, pop ups have a strange tendency to end behind the main window, which makes them completely useless (this often happens when you're constantly tabbing and switching between applications like I do). So I think the idea is good.

Unfortunately, the implementation is not. For some strange reason all of those shops chose to use a script called Lightbox, which, when clicking over images with the rel="lightbox" attribute, makes an overlay fade in, obscuring everything in the page, possibly showing a loading image for giving some feedback as to explain that unexpected behaviour, and when the image is loaded, it shows a new layer which sometimes painfully and slowly grows until it's the same size as the loaded image. And then the image might fade in from 0 to 100% transparency.

Isn't that description tedious and boring to read? Then imagine how tedious and boring is it to see it in action for every image you want to enlarge. Could you even imagine using it throughout an entire portfolio site? You guessed it correctly, I would only check two images; once I closed the second image I would close the portfolio tab as well.

There are even more ways of torturing the user with Lightbox:

If the big image is larger than your browser window, you would expect your browser to show you a version, adjusted to your window size, that when clicked would expand to show the full size image, like this:

Mackie image

But what you get instead is this:

Bad Mackie image

(Try it yourself here) Update: they have replaced the image with a smaller one

Where do I click to close it? I don't know - and if I mistakenly, instinctively press the Back button, it won't bring me back to the product profile, but to the previous page instead. Some of you may argue: hey but if you click in the overlay, it will close the lightbox! Now tell that to an average user, or occasional shopper. Sure they know what an overlay is, or where did the page they were browsing go…

Yet more vicious abusing of Lightbox: using it for extremely small images. Like for example this page:

Bad sushi image

Quite ironic: providing a larger image which is more or less the size of a thumbnail already, and even more, make the user wait for it to appear.

Also, did you notice that although sometimes ajaxy loading icons are shown, you never know what's the real loaded percentage? What if for some reason it gets stuck?

And I wonder if has anybody else realised that during the time the user is forced to wait for all the bells and whistles to finish, the browser could have loaded the image three or four times already? Or maybe the user could have examined the bigger image, verified that's what he wanted, and clicked the magical Add to cart button.

With all this I am not saying no to fancy effects and transitions, but no to abuse of technology instead. Lightbox is not going to make your website more attractive; in fact it will probably make it look like a run of the mill one, since everybody else is using it already.

What I would suggest is to have big, gorgeous and good quality images by default, so that I can get an idea of the details of the product at a glance. If I am really interested in it, I will request to see a bigger image, which will appear almost instantly on my screen; otherwise please let me browse comfortably, and I may find something else that I fancy, thank you very much.

UPDATE: gst posted this to reddit and you all have gone crazy. Whining as it might be, this is still my personal opinion as a user.

Having said that, please enjoy the whining or ranting or however you like to call it :-)

20070503 Sick of standards

Some years ago, a guy which wanted to communicate with his scientific colleagues decided to create a mark-up language called HTML, with additional stuff, which proved to be quite useful later on, such as the HTTP protocol. Surprisingly for them, these tools came to be very popular, even if (or because) they were quite loosely defined and far away from strict.

Since there was no authority for ruling what should or shouldn't be allowed in it, big companies somehow began to add new features to the language, because they wanted their own products (browsers!) to do funkier stuff than their competitors' products. So if one added BLINK, the other one added MARQUEE, the other one added FONT and so on.

Meanwhile, or maybe at the same time, an abstract entity called W3C was created. Or maybe it existed before! Anyway, although they attributed themselves the maximum authority over all-things-WWW, they were mostly ignored by both software vendors and HTML publishers. Publishers kept doing their loose stuff (if it works why should I change my way of doing things?) and vendors kept developing browsers which tried to fix publishers errors so that pages could be rendered even if they deserved to win one of those WTF!? prizes.

Some time after, people got concerned about the situation. Somebody thought Hey, all of this was meant for communicating but we are actually making it harder to communicate! We need to be serious about this!. And they decided to push for Standards to be used.

"Standards" is quite an abstract term as well, but has proven to be very productive and led to lots of literature, conferences and even job titles. All of a sudden and along with the blogosphere explosion, masses of bloggers began to discuss about Standards, the need for using them and the best techniques for each use. Actually, there was just a handful of people leading the masses, which diligently contributed to rolling the standards snow ball by copying and pasting and trackbacking and pinging to the leaders' blogs, so that they could label themselves with a "I'm a standards developer" in their sidebars, along with a long list of links in the blogroll (including at least one link to A List Apart) and a couple of 88×31px icons proudly proclaiming they passed a syntax validation test.

Parallel to all of this were the normal people which saw themselves in a transition phase where developing desktop applications was a no-no and the general trend was to have a web client interface plus a web server. Some of them just sticked to whatever they found handy, like using tables for laying things out in their application. Some others tried to make sense of all those things which they read in the forums and blogs in the outside world, but it was all too late. It had gone crazy!

When W3C saw their little children going with big bad boys they decided to prepare a long list of directives, working drafts and normatives which they should follow if they wanted to be good and be amongst the golden top of good formats, but they kept being loose and indeterministic, making it harder for developers (instead of easing the process of creating good mark up). More literature about standards was generated, this time resurging in differently flavoured waves: now worried about usability, now accessibility, then XHTML, then XML, then XSLT, then something else. Everything was OK as long as you were worried about standards.

And concerned about standards people, seeing the slow reaction ability of W3C decided to create their own groups, like WHATWG and WHATEVERELSE (joking). Vendors sometimes belonged to both (W3C and independent groups), making the whole thing even more complicated because… who are you going to listen to?

Developers tended to position themselves in two groups:
A) the ones trying to make sense about standards. Spending too much time trying to make sense of technical documents which were too many years in "draft" status, while vendors had implemented them however they felt was more convenient, years ago.
B) the ones which completely ignored everything, to the horror of group A

Group A believed group B weren't professionals and Group B believed group A spent too much time fixing the errors of others and fussing about abstractions instead of focusing on getting the job done.

And both were right.

If you want to have a developer title, stop creating abominations. Producing invalid code which renders badly in serious browsers is like being a C++ developer and producing code which leaks memory like crazy and then asking the operating system to clean up after your horrible code. You should be kicked out of the profession!

But on the other hand, being a developer doesn't mean one needs to devote all of the precious [free] time to learn about browser render errors, hacks, different box model theories, and so on and on. Being a developer means one wants to develop, not fix what is inherently wrongly designed (unless one gets to work in one of those projects, that is). Developers are here for the business.

What are you here for?

20070316 CDmon rules!

It has taken longer than it should have done, but at last I can say that my domain (soledadpenades.com) is registered and managed in a good place - that is: CDmon!

I registered it for the first time around seven years ago. By that time, I hardly knew anything about domain registrars and so just went for the first one that someone recommended me - directnic. It was also the "it doesn't matter if it's hard to use" times, so even if the interface was a bit clunky to use, it didn't make any difference. At the end, it was a place which you just visited once a couple of years, for renewing the domain.

I also didn't even have my own hosting, I depended completely on free hostings like geocities first, and the nice hosting provided by scenesp later, so my domain acted basically as a redirection to whichever my current hosting was.

But then I moved to textdrive and started learning a lot more about server side configuration and tweaking. Directnic didn't provide much functionality, so I decided to switch to cdmon as soon as possible, since they have been giving me an absolutely excellent service for domain registrations and hosting (see xplsv.tv for an example of cdmon-hosted site).

I went to directnic and modified the contact details for my domain, since they were still using my old university account (which was cancelled some years ago). I clicked update and began all the procedures for transferring the domain.

CDmon warned that I should pay special attention to a confirmation e-mail that I should click for beginning the transferring process. Days passed, nothing ever reached my inbox. I was like crazy scanning all the folders, just in case it had gone to the junk folder. Where was my e-mail? Almost one month later I wrote to cdmon. For some reason they had sent the confirmation e-mail to my old university account. How come? Hadn't I just updated it in directnic prior to beginning the process? Weird…

I apologised to cdmon (since it was none of their fault) and went back to directnic control panel. Shockingly, my old university e-mail was still there. What's going on here?!, I asked myself. I repeated the process, entered the data again. But before asking cdmon to request the transfer again, I checked again the data. Guess what: the old e-mail was still there. I was beginning to get angry. Quite angry actually. But I managed to control my anger and opened a ticket in directnic. Enter the absurd world of directnic:

Me:

I'm trying to modify the contact details in order to have a working e-mail address in it, but each time I try to update it, it just rejects the changes and shows the old values in the form, without giving any error whatsoever.

Since this is really urgent, I'd really appreciate help in this topic.

Thanks!

Answer:

To modify your Account Information, please follow these directions:

1. Log into your directNIC account at https://secure.directnic.com/myaccount/
2. Select the 'Customer Settings' tab on your main menu.
3. Click on the 'Account Information' link
4. Enter the changes in the Account information that apply
5. Click on the 'Update' orange radio button toward the bottom of the page
[...]

At this point I felt like: Ok, did they really read my question? Ok ok ok… let's calm down, they aren't assuming that I know how to use a form, maybe they have really clumsy tickets to solve, or whatever… let's explain them the problem again, more wordily:

Me:

Sorry, this does not solve my problem. What I can't change are the contact details for my domain soledadpenades.com

If from here (https://url1) I click on "Modify contacts" and then proceed to modify the contact Soledad Penades (at https://url2), no matter what I do, it doesn't get updated. I click the orange button at the bottom which is labelled as "Edit Contact", the form appears again with the newly entered data but if I repeat the process, I still get the same OLD data which was at the beginning.

There's something wrong in your system which is rejecting my data, I don't know why, since I removed all "strange" characters like accents and so on from the inputs.

If you need any further information I'll be glad to help you in order to solve this issue.

Thanks!

Answer again:

Hello

Try removing the "+" out of the phone number. Often the change will be rejected because of a strange character or the system cannot recognize the number format (like a phone number). Also where you changed your name, I see a "?" where an "e" should be in your last name.

The system is functioning properly because it shows an attempt to modify, unfortunately, it is rejecting the strange characters or the format of the phone number.

Hope this helps, please don;t hesitate to reopen the ticket if you are still having issues and we can revisit the problem.

Hold on! Read that one again: The system is functioning properly because it shows an attempt to modify, unfortunately, it is rejecting the strange characters or the format of the phone number.

At this side of the world, a system does not work properly when it can't do what it's expected to do and even worse, it doesn't give any feedback at all. If I was the developer for that back-end my cheeks would be flushing in red just by reading at this ticket.

First they change their encoding so that my surname mutates from Penadés to Penad?s, and then they decide that +'s in the phone numbers (which are international phone numbers) aren't going to be acceptable anymore, all of this, without giving any note of warning whatsoever.

I couldn't believe it.

I really mean it, I read their answer like three times, thinking: they are an internet company, they do not sell any physical goods, they may have lots of international clients, they may know there are things like accents, they may know that there are more countries other than USA, or was I expecting too much from them? This can't be happening but it is indeed happening, so let's try again.

After removing all "strange" characters and leaving it all with just plain alphanumeric characters, I could finally save the data and get them really updated. Funnily enough, it did confirm that the changes had been saved.

Wrote them again:

Hi, seems that it worked.

But I really think you should consider to give *at least* a note of warning. Something like "Hey, could you please remove what are not numbers from the phone field?", instead of just returning to the form again, which is not what I would label as "functioning properly". I couldn't change my "?" because your system was rejecting any single change I did, but wasn't able to tell me what was wrong (which was the + in the phone number).

It would really help people in this situation, since it's not weird to enter the number with a +, specially for this type of international businesses.

Thanks for your help!

Never got any response.

Yesterday was supposed to be the D-day, my domain was going to be at its new home (cdmon) definitely and so it showed in the control panel. There it was! my sweet little domain… I could modify it and block it again, using cdmon's interface. But then I thought: will it still show at directnic?

I logged in again at directnic. Guess what: the domain still appeared there. And it might have stayed there forever if it hadn't been because I have sent them a ticket asking why was it still there if I had transferred it to another registrar, then they have deleted it.

Conclusion: CDmon rules. If you need domains or hosting, buy them there. They are professional and they care about their clients.

20070204 British Airways do not like Spanish names

Error at British Airways

Or that it seems. I tried to enter my full name (which makes up to the big figure of four words) and the system decided it was too much for it. No more than 29 characters are allowed when specifying the full passengers' names.

It shouldn't be much of a problem if it wasn't by this stupid hysteria surrounding flights and security, and the lack of education of some British people which do not understand that there are places in the world where people have more than one name and one surname. Then you show them a passport with the name in full and they get shocked and do not know where to look at, and what is which thing, even if you're pointing at your surname and saying explicitly: this is my first surname, and this is my second surname. And those two words over there are my name - yes, my name is actually two names.

But they look at you like if you stole your passport or something - even if the photo clearly shows that you are indeed you.

In a way, we could also blame that stupid spanish/catholic tradition (I don't know if it's still in use) which dictated that all names to be used in a christening should appear on the Bible and otherwise they should have a biblic name appended at wherever point suit better (whether it was the first or the second name). So most of my generation (and previous ones) ended up with superfluous names prepended or appended to the name that we really use, and we have to revive the extra name for the paperwork.

At the end, the problem is that these long names are unpractical in most of the times. While most of the forms in Spain can accomodate my full name (although not my sister's, funnily), I still haven't found any place in UK where I haven't had to crop or summarise my name somehow.

I must recognize, though, the creativity of the clerks and functionaries is excellent. Within two years here, I have no less than seven variations of my full name, with solutions like:

  • abbreviating all except the first surname (feels a bit like american high school movies, like J-C, M-S, etc)
  • using only the extra name and the first surname (I don't use to respond to that name so when people gets to me using it I usually ignore them until I find out they are speaking to me)
  • using the extra name and mispelling my first surname (lots of variations on this one)
  • using the extra name and the second surname (makes my mum feel proud)
  • using first name, first surname (more normal)
  • using only the surnames (this makes me feel like being at school again)

But getting back to the point, why didn't they just limit the maximum size of the form input boxes? Or maybe they could have added one of those nasty and annoying "Allowed characters count" messages which do a countdown while you enter the data until all of a sudden turn the field's background colour into a bloody red which makes you feel ashamed and cry painful tears of guilt!

It would have been easier and I wouldn't have had to reenter again much of the info in the dropdowns which as expected, is so much of a pain to fill again when there has been an error, that the programmers decided to not to implement it. I wonder if they are preparing each form manually for a site of such a big size as british airways.

20061217 Easier and more secure

"Easier and more secure": That's how Microsoft describes the brand new Internet explorer 7. I don't really know about the security since I haven't used IE7 myself, but on Friday I got a desperated call for help from one of the colleagues at the office.

Could you please help me with this browser? I lost one toolbar… don't know how…

It looked like a simple issue. I know lots of people which have problems with Office's toolbars and are always "losing toolbars". So being a Microsoft product, it had to be the same problem…

But when I got faced with that interface… oh my god… I had seen the screenshots but the real, it's-executing-right-now sensation was absolutely terrible. I came to the desktop and the girl was in a crazy state of confusion:

This explorer just got updated and since then I can't find any of my stuff… and it has this tabs thing which i don't know how it works… it's opening pages in those tabs and I don't even know how to close them… oh well.. but the worst thing is that I lost my menu toolbar!

Funny, isn't it?

I couldn't stop my eyes in a single point … all those buttons in that clunky collection of different interface styles, and in my mind just one word: crazy! crazy! crazy! crazy!

To be honest, I didn't know where to look for the toolbar either. Tried clicking here and there, got nothing useful. It took me like 5 minutes to find out where to click and enable the menu bar again (after clicking on everywhere else, really, using the old trial and error technique), and left with a confused state of mind as well.

How can it be so complicated? When other browsers are just reducing the interface to the minimum (for example, it was being considered to merge the stop and reload buttons in Konqueror, if I recall properly), there we have the new blue e generation with increased difficulty even for advanced users (I think I can consider myself an advanced user).

It basically doesn't work. If I can't figure out the meaning of the icons (and I have seen LOTS of icons since I first used a computer) how do they expect anybody else to understand it? And it's not that I can't figure out what does each icon mean, the additional problem is the organisation of the top area. When I thought everybody agreed with the "if it works, doesn't fix it" rule, they go and split the traditional back-forward-stop-reload toolbar in two. Which creates confusion. And in the second row, there's that star. What's that for? One immediately thinks that it is for creating new tabs, since it's in the same line that the tabs are. But then, what's the purpose of the + icon? Is it an special type of tabs? and even more, what's the point of that empty little tab at the end? if I click it, will it create another tab?

And why is each icon completely different from the others? Confusion! confusion!

I think I'm still confused!