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.

I learnt something truly delightful last week: a greek paper, Eleftheros Tipos, was among the five best designed newspapers of the world for the past year. I’m glad E.T. design got awarded because I absolutely love its print design and I’ve been following its progress since its redesign first launched.

But when I recited the story to my family, my sister had an absolutely negative approach. She couldn’t believe how such a newspaper got an award, because according to her, E.T. is a very difficult to read and skim newspaper.

That brought back memories – noone cares about your design dude, remember?

Are we sure that what us, designers, consider a cool design, is a cool design for everyone else? No, I don’t think there is a perfect design that can work as a panacea and please all people, but still. A newspaper gets a design award, and a potential reader absolutely hates it. Why?

I don’t take myself off this – when I see something I can’t have a professional opinion on, for example some print ad or poster that’s considered well designed, 90% of the times I’m like, wtf. People like this? The fake Bauhaus effect and diagonal lines? These usually bore me to death. But other people seem to love them! What gives?

Where do we err? What should we do to design things that both our users and fellow designers will love?

Image courtesy of snd.org

Whew, that was a mouthful.

I was browsing the other day when I stumbled upon (literally, not using the tool) a weird site: at first, I’ll confess, I thought those green rolls where BP oil barrels. But they aren’t! They’re sushi rolls! I think!

Try hovering them. They move! Moving sushi rolls! Kawaii!

OK it may sound cheesy, but I like how the used the dojo metaphor in conjunction with the sushi one. Even though I hate the auto-play video on the front page…

Last week, the new redesign of the Basecamp landing page was announced. The trend-setter 37Signals managed to take a quite usable and efficient landing page and make it into something even prettier and more interesting, setting again new standards in landing pages design.

I especially like the subtle texture and colours used, as well as the big, clean, shiny screenshots that attract the visitor’s eye at once. For some reason, this version of the landing page actually made me click on the videos and see them all, something that the previous version has not made me do. They’re kinda cool by the way, especially the Threadless one, be sure to check them out.

I’m not too sure about that big button though. For some reason, a gradient-y, shiny button feels kinda out of place, but maybe it’s just me. Moreover, the screenshot thumbnails differ from the full screenshots – why? (Try it for yourselves, check out the third one – do you see what’s shown in the thumbnail anywhere?) And maybe, maybe, the whole page feels kinda dense in the middle. But then again, it provides loads of useful information at a glance, which is good.

Knowing a bit about 37Signals, I’m sure this is not the final version of the landing pages. Minor redesigns and tweaks will surely take place during the following days – and that’s what every great design must endure. Countless tweaks, till it achieves the desirable standards.

I already use Basecamp with the rest of the CSS3.gr folks to keep things in order, and I must tell you, it works. I consider upgrading to a paid account soon, since you can’t beat some of the features it provides.

What’s so special about a Javascript animation library site?

It’s so simple and cute it hurts. That’s special. Especially considering other Javascript library sites.

Take a look:

Yes, of course, not much info is portrayed, there is no function breakdown or examples that I can quickly check out, but hey – the page states its name, its features, its size and two links, to download and see manuals (ok, some ads too, but I can’t blame anyone for putting ads on a site). Enough for a small project.

Sometimes it’s not so bad to radically reduce frontpage content, especially when working with a niche.

And who am I kidding, those moving clouds & trees look très cute.

One of the newest kids on the productivity (or as all the cool kids call it, GTD) field is The Hit List, a polished task management app from PotionFactory, the mama of Voice Candy and Tangerine!.

Having used (for just a bit) a ton of task management apps, both on Windows and on Mac OS, I can tell if one of those buggers is gonna be a hit or not. And this, my friends, is a direct crossé to the jaw of procrastination.

Things? I never quite got used to it. Sounds illogical, but it never managed to fit my workflow. I didn’t like the way it handled tasks and projects and ‘areas’, plus it stayed in beta phase for too long.

OmniFocus? I would love it. If I was Merlin Mann. I’m a quite simple-minded girl and OF was just too much for me.

iGTD? Anything with “todo” somewhere in their name? You name it, I’ve tested it. Nothing worked. So I’ve settled with TaskPaper and all its simple-text, cross-platform goodness. I use it everyday for simple lists, but I wanted an application to keep track of greater projects and complex to-dos. Enter The Hit List.

It’s sexy (even in its public beta incarnation), it’s pleasant to use, it makes you wanna do things, cross them off your list and then add some more (actually, I don’t think that’s a very good side-effect, but whatever).

What I loved:

• Getting around using only the keyboard. I cannot remember myself ever learning all the shortcuts of an application, but I’ve quickly mastered THL ones. It even has a ‘game mode’, where you can move tasks around with W, A, S, D. Support for vi and emacs text shortcuts included. Quicksilver-like “Go To…” functionality. What’s not to love?
• Nested tasks. Yes, at lasts, a task is not just a single action, it’s a tree. Thank you.
• Tabbed view, so handy and card view, which lets you focus on one task alone, adding notes at will. Perfect for brainstorming.
• When you finish a task, a pleasant sound greets you. That is one of the things that makes you wanna complete more and more. Excellent work in visual and aural cues.
• The overall level of polish, given the fact that it’s still in beta (I cannot get over Things prohibiting me from dragging stuff to the sidebar).

I have heard many people comparing The Hit List to Things, but this is like comparing your sexy new girlfriend to your interesting-looking, but pyjama-wearing ex. Yes, THL is a polished task management app like Things, but fares better in almost everything in my starry eyes.

Be sure to download it and give it a go if you’re into it. And check the default Learn The Hit List project for more insight.

* If you don’t get NKOTB, jesus. I’ve gotten way old.

Readernaut is a fun fun fun social networking service, focused on book lovers. It does some simple things and it does them well: it helps you add books to your inventory, track your reading progress and share it with your friends. You can also add comments, reviews and quotes to the books, visible to everyone.

What’s very special about Readernaut is its minimal, functional design. It uses icons to signify actions and is very simple and fun to use (well, apart from some thingies or two, but those are to be expected, as it is still in beta).

Some of its interface highlights:

You can find the rest of my screenies in my Quicksnapper arsenal. I especially love the above ultra simple, ultra cute contact / feedback form at the bottom of the page. Well played.

All in all, Readernaut has all the features to succeed: it’s simple, it’s pleasant, and it actually gives you motivation to read (to show off to your equally nerd friends, most likely). I’m sure we’ll talk about it further this year.

I love Readernaut, and so should you.

Hey wait, haven’t I blogged about Just Watch the Sky in the past? No? Shame on me.

Just Watch the Sky is a fun, fun, inspirational project that glorifies lyrics by making (typographic) art out of them. You can also listen to the respective song in the embedded player. Very cool.

Some of my favourite works are:

Eventhough it’s not as updated anymore, I still use it all the time to browse through some impressive typography and well suited colour palettes and get inspiration.

Just by looking at one of those, millions of ideas come. Unfortunately, I’ve lost the link to the original creator (I’m really ashamed about this), so if you see this post and you’re the daddy of this, please drop me a line.

So pwetty.