Tabs (earlier) and overlays (later) are two of the most widely used web interface patterns. By using them, one can organize a complex user interface in seconds, guiding the user to see what he’s meant to see and not get confused by other modules of the application.
When combined though, an interesting little beast emerges: the tabbed overlay.
A service that uses this kind of overlays is Google Docs. I use Google Docs often, mainly to collaborate with greek bloggers on interviews that consist a part of my monthly columns at PC Magazine.
The tabbed overlay is used when you try to invite other people to your document. You try it with me: head to Google Docs and click on Share > Invite people. You add an e-mail address or two in the invite textarea, you add a message, you click send and invitations go their merry way. You can also change permissions by clicking on the Advanced permissions tab and making the necessary changes.
But what if you want to invite people and change permissions, all in one step?
Unfortunately, Google Docs does not support that. You can either do one or another, since when you click on the Advanced permissions tab, the submit button changes from Send to Save & close. This led to an interesting error by my part, the other day.
I’ve filled in some e-mail addresses and then clicked on Advanced permissions. I then clicked on Save & close, thinking that the invitations will be sent anyway, since I’ve filled in the relevant details in the previous tab. Alas! Save & close just saved my permission settings and never sent my invitations.
Needless to say, I was kinda confused when I was informed that my invitation hasn’t been received. After tinkering a bit with the interface, I got it: I was wrong. The form does not “remember” my data from another tab and submits it all together. I must first invite people, then change the permissions. However, strictly from a user point of view, it would make sense if I could just enter my data in all tabs, hit one submit button and be done with, no?
This is one of the cases that the use of this UI module is not optimal. It’s not a major faux pas on Google’s part, but the fact that it even got me, a web designer who’s dabbling into UI design daily, is quite interesting. What about users that do not know about the form submission mechanics?
Maybe a different kind of UI magic should be in place there – for example, I’d move the two checkboxes from the Advanced permissions tab under a More options header on the Invite people tab, which would be hidden by default and visible on demand. Something like this: (expanded view)
I think it makes more sense that way – and we could skip the underwater usability reef that’s lurking there.
Hear that? No? It’s the huge web design uproar, caused by a (relatively) innocent post down there at Carsonified blog. It’s the sound of designers clashing their lightsabers mice tablets, asking for blood, waiting for revenge, twisting their thumbs pointing down.
Ok, I do kid, but seriously people, what’s the whole fuss?
For those oblivious, Keir Whitaker of Carsonified posted a blog post, calling designers to well, design a holding slide for the upcoming FOWA event, without being paid of course but earning your place on the screen, complete with URL or Twitter username. It was supposed to be an innocent design competition, supposed to be fun.
It’s not anymore.
Web-des superstars like Paul Boag and Mark Boulton cried foul at this contest. Along with other designers, they insist that this is spec work and people should not invest time at it, if they’re not getting paid. I’d say, alright, I’m the first one to claim that free is dead, but seriously…
Is it so important?
It’s supposed to be a simple design competition, the likes of which we’ve seen countless times on the interwebs so far. Why the revolution? Why demand money for such a simple (in my simple eyes) task? Either you like the idea and you do it, or you don’t like it and you don’t. Is this whole 130 comments thing really necessary?
I’d be more critical on Carsonified for their latest spamming failure, but this? Come on people. Where’s the fun in being a web designer anymore?
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.
