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.
You may or may not know this, but I’m a terrible wannabe overachiever.
When I start working on a project, I don’t just want it to succeed, I want it to be the best. I have visions of extended A+ reviews from fellow web designers and enthusiastic phone calls from clients, analytics pages that go really over the top and thousands millions of happy users.
Of course, all this fantasy gets me in trouble more often than not. I bet you know why: creative procrastination.
What does it mean, in a nutshell? I’ll visualize it for you: me, staring at the screen, pen & paper in hand, designing in my mind, laying out HTML snippets, styling with CSS, solving complex design problems, conducting usability reports and studying ROI analyses.
All. In. My. Head.
That’s a bit too much, as you know. It usually means that by the time I lay down a single line of CSS I’m so tired and confused it’s not even fun anymore. But I love my work, so it should be fun right? Right. That’s why you just need to keep going.
Every time you stumble upon a web design roadblock and lose two minutes of your precious time thinking of how to overcome it, stop and run in the opposite direction, immediately.
If you’re pondering too much over a design problem, do a bit of brain-dead form coding. If you’re totally bored of coding HTML, stop and sprinkle a bit of CSS magic to your project. If you feel confined in your browser window, fire up Photoshop and start designing out of the box. Most important: never stop working on your project. Less thought, more work.
I guarantee, a moment’s gonna come that your project will just look at you, shiny, finished, and you’ll marvel at how streamlined your process was this time.
“But, Sug, what about the correct way of web designing?”, I hear you thinking. As with most design workflows, there is really no spoon. No panacea, no proper way of doing stuff. Hell, I always say “HTML first, CSS second” yet I always start coding CSS as soon as I get a vague idea of the site. Nasty, nasty Sug.
Learn your way of working and try to live with it. Don’t fret over the little things, they will eventually get ironed out before launch, promise.
Just don’t stop working.
One of the most common questions I get over e-mail & twitter is the infamous “Do you have any good design books to suggest?” one. I wouldn’t blame those people – there is an abundance of books (even good ones) out there and it’s really difficult to read between the lines, Amazon reviews or not Amazon reviews.
Due to this, I’ve decided to mark the first week of my #p52 project with this blog post. Without further ado, here are my favourite web design books of all time, in the order I’ve read them:
-
The second version (the orange one) of this book is one of the first books I’ve been fortunate to read on web design. And believe me, it’s a hell of a starter on proper web design, and by proper I mean standards-based.
This book is not a technical one – eventhough its second part gets into the nitty-gritty of stuff. Its value lies in the background information on standards, the definition of things like the browser wars, and the arguments pro and against standards.
It’s a great book to read if you don’t have a clue what the heck is web standards in the first place, and an awesome book to return to when all hope withers and clients are raving on your phone about scrolling marquees and animated .gifs.
-
What? I hear you say. Is she for real? A book from the *gasp* 2005?
I know, 2005 feels like an eon away in web years, but believe me, those 4,5 Amazon stars are not there just for show. Krug managed to pack a great deal of insight in a lightweight and funny book you could read on a plane trip.
Don’t Make Me Think, as Designing with Web Standards, does not focus on the technical aspect. Krug explains in simple terms why we must stop placing hurdles in front of our users (and potential clients) and demystifies some of the most common web faux pas.
If you could only get one book on web design, this should be it. Witty and to-the-point, Don’t Make Me Think is an essential book for all designers, developers and front-end magicians.
-
If Designing with Web Standards was the book that got me into the whole hullaballoo, it was Transcending CSS by famous web trickster Andy Clarke that guided me to the light.
Hyperbole? Probably. What I know is that Transcending CSS proved itself more useful than I’ve ever imagined and changed the way I wrote HTML & CSS forever. Gone are the usual code listings and “Reminder!” footnotes; Andy takes us into a wild ride around semantic code in a really, really handsome book you just love to flick through.
If you already have a solid grasp of CSS but you need that extra something that eludes you, try this book. I guarantee you will write better code, right after you flip that last page.
-
Those two little books by Robert Hoekman Jr. were two very pleasant suprises. I really didn’t know what to expect when I bought them, but they proved really valuable and informative.
Reading them, you’ll stumble upon concepts like kaizen and the 5S approach, while you’ll learn (using real-life examples, I always love those) how to chisel those interfaces of yours into UX masterpieces.
If you love application design and feel you can do better in keeping your interfaces lean and mean, these two books will help a ton, I can vouch for them.
-
This is one of my latest favs. I happen to love the way mr. Cederholm writes – he seriously makes me feel calmer, more confident and a little bit zen about web design.
Handcrafted CSS is a pretty recent book, so expect extended coverage of all the latest and greatest CSS techniques and a thousand and one reasons why you should use them, right now. I bought the DVD version, in which mr. Cederholm offers face-to-face advice about advances in CSS design and gives real-life examples of forward thinking in web design.
If you have any doubts concerning CSS3 techniques, if you still cling to IE6 with a vengeance and firmly believe that every design must look pixel-perfect in all browsers, do us all a favour and get this book. Like a cup of good green tea, this book will make you feel more balanced, instantly.
Disclaimer: All title links above contain my Amazon associate ID, so if you buy something by following one of the links, a little bit of shiny gratitude will come my way. Glee!
& 
