Dear Wikipedia,

don’t do that.

Users act by habit. Yours is a search-based service. You moved the search box (the single most-used element of your design) from the center left to the top right. You have a fluid design. People love 24” or even 30” monitors.

Do the math.

It’s a wonder users haven’t started a riot yet. If I were a hardcore Wikipedia user, I’d have started one for sure.

I absolutely love most of the work of Squared Eye. So much attention to detail and lovely designs, I always love that. They even went as far as to provide us with two awesome looking case studies based on two of their works – lovely, lovely.

I often use one of their sites, PatternTap.com, to find design tidbits and get inspiration when designing a widget (since I don’t have my LittleSnapper library with me when at work). Most often than once, I found myself trying to search / browse among the stored screenshots for a specific style.

PatternTap provides two ways of filtering images: by tags and collections. I haven’t had much luck using both. Let me explain why.

Are those all?

First of all, when clicking on one of the options above, you get a nice sum of relevant keywords. I always find myself wondering, what, that’s all? Are those all the possible tags that people used? Are those all the possible collections of all users? For some weird reason, this way of showing stuff does not convince me that it’s accurate.

Alphabetical? Reverse Alphabetical?

Are those tags / collection names sorted? If yes, how? I’d prefer it if they were presented in an alphabetical order, I wouldn’t have to scan the whole list to make sure the tag I look for is not included.

Collections without Images?

Some collections I’ve tried (namely Borders) yielded zero images in expected results. How can that be? Why is the collection there anyway if it’s empty?

Dude… wait, what?

Users are notorious of their short memory. Then how come there’s no indication whatsoever of the sorting filters I’ve used in the next page? The breadcrumbs only say, Collection / Sort. Yes, sort, but sort by what? There is a (wise) Reset button, but no obvious way to see what you’re resetting. You have to re-open the Tags or Collections menu to see what’s selected and what’s not.

Plus, uhm…

A tiny “no results” bug!

I may be nitpicking there, I don’t design better than those people but I found those flaws while using their site, not while admiring their work. It’s just some issues that could be easily resolved, in my humble opinion, leading to an even better service.

I don’t read Gizmodo, but I stumbled upon its new (?), threaded commenting system today.

By paying a bit of attention to the way Gizmodo comments are designed, I encountered some flaws.

The notification rows for new replies under the comments are nice and big. They are also placed quite close to the original comment, a method that uses the idea of proximity to simulate relevance. So far, so good.

Nevertheless, they could use some more love: when opened up, the actual comment loads into another “module” (box), so the sense of proximity is ultimately lost and the user’s attention is fragmented between three different blocks – all parts of the same discussion. It gets worse with more replies – check it out:

Plus, why must a user click on either the linked “X replies from” or the author names or the nice big plus icon? For some weird reason, there are two links at the same phrase – both do the same thing. All of the row should be clickable – big shiny happy clickable areas, remember?

Another problematic aspect is the actual reply to comment form.

When the user clicks to add a comment, she’s presented with a threefold list of ways to reply – one of which (Facebook) is disabled for now. Then why even bother add it to the list? It only adds clutter to a supposedly simple thing as a comment form. Just add a tiny notice there somewhere, that Facebook comments will soon be supported, and tada.

Moreover, I’m sure that most users leave comments as guests – why not load automatically the guest comment form then and lose a click? Plus, after the user has chosen a way of commenting, lose the humongous list – it’s not needed anymore. Add a “change mode” link and give the user the chance to go back and choose another commenting method. Simple as that.

Also, what does the “Start a new discussion link” do anyway? I click it, zilch.

OK, enough ranting for the start of a month as productive as October. Have a nice autumn creativity boom, people!

I don’t actually read Motley Fool, but I recognize it can be a good and sometimes fun resource for investors, plus it has a pleasant design that for the most part, shows real attention to details.

So I was browsing around this Sunday morning when I was hit in the face with this:

Notice what’s wrong? No bail out option. No close link, no no thanks button, escape key does not work, nada. All that in the form of a pesky overlay that hides the content. I tried the “Click Here” button to no avail, as you see. I had to reload to be able to read the article below.

I can understand the practice of this, I cannot accept it, though. This is not the way to go to convince people to subscribe in a content site – and to be frank, I don’t think that Motley Fool actually needs this kind of stuff.

Thumbs down.

motley fool, overlay, usability, content

I’m not very familiar with Firefox design conventions, but I admit I fell for this. And you know that’s always a bad sign for usability, me failing in tasks. Har har.

When presented with the “Firefox Add-on Updates” little window on a Windows machine (hence, no strong highlight in pre-selected buttons as below, in Mac OS X), I accidentally clicked on “Skip”.

Somewhere, somehow, my mind has decided that on the right is the way to confirm and finish a job. The place for the “OK, get done with it and let me be” button.

I would swallow on my mistake, if I hadn’t realised that on the next screen, when the add-on update has been successfully applied, Firefox features a “Continue” button – this time on the right.

Pardon me, for I am confused. What goes on the right? OK or Cancel? Papa Nielsen, get me out!

firefox, ok, cancel

It’s quite a long time that I’ve read Designing the Obvious by Robert Hoekman, Jr., but I never managed to write a proper review for this little gem of web design books. I think now is the time for proper credit.

DtO is a very pleasant and easy to read and use web design book, while at the same time is tons useful. The writing is simple and very pleasant, enriched with proper screenshots and relative images to avoid eye strain. The very size of the book is quite small – it’s not meant to be a bible, more of a handbook full of good advice.

It explores real-life web applications and sites to give you solid advice on information architecture, feature creep and simplicity in design. The book is relatively new and the examples are very current – so no stress there.

The author also establishes what I like to call the GTD methodology of design, calling it 5S. The 5S stands for five Japanese words starting from S, which are… Uhm, I think I shouldn’t spoil your fun.

What I really enjoyed were the Interface Surgery sections, where real-life problems met their solutions in a deductive way. Very useful indeed.

All in all, it’s a no-nonsense book that does everything that’s supposed to – and maybe a little more. I think it deserves a place somewhere in your web design / development shelf. It’s well worth its money.

designing the obvious, robert hoekman jr

Percentages and the ways they can be displayed in web pages are not exactly the hottest trend of the mill, but it’s something that bothers me for quite some time now.

When do we need progress bars in web design? Mainly when we undertake a multi-step task, like a survey or a shopping form. They can be replaced with step breadcrumbs (like in Amazon.com checkout procedure) but when the number of steps goes over the top, progress bars are really the only (visual) way to go.

In the desktop apps field, progress bars are used the whole time for portraying installation times, required time for completion of a copy-paste procedure and so on.

But in web design, their role is quite diminished. However, they cannot be taken lightly – they’re a strong visual cue of what is to be expected and help users with their notorious impatience.

I have just recently taken part in an IA survey, held by mr. Patrick Kennedy, and I noticed something strange – the progress bar used on the top right did not comfort me at all. On the contrary. Check it out:

So what’s my progress? I know the progress bar itself moves a little by each page I move on to, but exactly how much? Are there many more pages? Are there just a few? You can only theorize here, based on observations on how much the bar moves after each page. It’s all pretty vague.

How could this become more usable?

First of all, ditch the numbers. I already know that a progress bar has to start at 0% and end in 100%. Gimme the current percentage, that’s what I’d like. Don’t bother with showing the remainder as a percentage – that doesn’t really add to the information showed, but adds very much to clutter and confusion. Oh, and maybe add a page countdown to have me completely covered.

There you are. I’m happy now. May not be much, but at least there’s some actual info shown.

IA, survey, progress bar

Motion detection mechanisms are quite common nowadays, especially in public toilets and WCs. Light goes on automatically when you enter the WC, water goes on when you place your hands under the tap, and so on.

But I don’t think that works, UX-wise. Why? Let me explain.

Let’s say you’ve got a toilet cubicle with a motion detection mechanism to turn on the light. If the mechanism is not properly placed, it will really be the last thing you try: You go in the room, you search automatically around for visible switches, you find none, you wiggle around a bit more, maybe even leave the place and come back again, and finally you shrug, deciding that oh well, what has to be done has to be done, even in the dark. And tada! You enter the cubicle, light goes on. Leaves you baffled (and relieved).

Now let’s take the other example, one of my favourites: let’s say you have a tap with motion detection. You see it, see no visible way of controling it, no stickers around. You try turning it (I know I’ve done that many times) but it won’t work. You look for buttons on the wall or on the floor, ’cause hey, you’ve seen that around, but there are none. No visible way of controlling a tap. What would you do? I’ve left. Many times.

So the problem with motion detection is exactly this: They usually are planted in the last place you’ll ever check. Getting your hands under a tap without turning it on somehow is really the last resort, not the first thing in your mind.

I know that motion detection systems are a great way of ensuring economy both in use of power and water, but sometimes, the fanci-ness of it all really gets on my nerves.

I think the Trident Senses chewing gum has one of the most convenient and intelligent gum packages that ever existed.

Check it out (warning, totally hideous picture from mobile phone):

It opens like an envelope and has two “shelves” for the pieces of gum. If you start eating them from the lower shelf, you can rip it off when all gums are gone, and tada! You have another – albeit slimmer – handy gum envelope at your disposal.

It’s one of the everyday design bits that makes you go “Wow. Those people took it seriously!”.

P.S. Am I the only one that thinks they should offer another flavour, more red-fruity? Think strawberries and cherrries and berries. Yum!

trident, senses, package, design

Pattern repositories are a nice and useful – for once – trend. What are they? In their basic form, they are just galleries with screenshots coming from different sites, showcasing the different approaches in, let’s say, search boxes or contact forms.

I’ve followed almost all pattern repositories that emerged during the last few months – most of those though had trouble updating with the latest site releases and became stale after a while.

Since then, I’ve relied mostly to Flickr for finding inspiration for specific web design modules, until I thought oh what the eff, I’ll post my tids’n'bits from here and there too. Be sure to check them out, I’ll try and update it as much as I can.

Partners to the crime: Paparazzi! for the full screen site screenshots, Skitch for the insta-uploading to Flickr.

P.S. For something more substantial than my mediocre attempts, try out Pattern Tap, the latest and greatest in patterns sharing.

pattern tap, pattern, repositories, ux