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.

It was first introduced in your Twitter timeline by a marketeer and you see it liked again and again in Facebook by more marketeers.

I’m quite sure that in the end, marketeers will cry wolf but noone will believe them.

I consider this funny actually. Imagine a situation:

Marketeer
OMFG guys, you’ve GOT to see this, there’s a yellow elephant walking in my garden!

Audience
*crickets chirping, tumbleweeds rolling*

Marketeer
Aw come on guys, REALLY!

Audience
…

elephant flies away on a pink cloud driven by unicorns

OK, I exaggerate. But you should have got used to it by now.

It’s my lunch break. I enjoy my lentils, while idly surfing around YouTube. I find this new hip-hop promo by the greek band Stavento. I hate greek music but Stavento is a secret crush of mine, plus they feature this amazingly beautiful and talented 16-year old. So I click on it.

I’m watching idly till I stumble upon the most awkward product placement I’ve seen recently. Like the porn flashes embedded to normal movies by Tyler Durden, it makes me cringe.

If you’re really anxious to see it, scroll to 2:45, up until 3:00.

Whut? NIVEA skincare products are now a trend between young, fashionable tweens? And they carry them around in their pockets? Who knew?

Seriously, who approves this stuff?

Some people working in advertising are funny.

They call web designers know-it-alls just because at some point, the latter refuse their marketing ideas of placing banners everywhere around the page, saying “Hey, that’s not cool”.

There’s an equivalent story.

A man punches his wife in a street. Another man passes by and says “Hey, that’s not cool”. The wife-beater replies with all the finesse of a 5-year-old “Go away, know-it-all!”.*

“Nyah nyah nyah nyah nyah omitted for obvious reasons.

I hate to point out flaws. Seriously. I get disappointed when I do so because my New Year’s resolution was to be as positive as possible this year. Plus, I’m no perfect myself.

Alas.

So I will speak with facts for this one. No sarcasm, no bitterness, because I respect people’s work. I’ll leave the conclusion to you.

I’m firing up GMail to see that I got followed by the greek department of Tribal DDB, @TribalDDBAthens. Hey, nice! Tribal decided to go social. Since I love hearing about new campaigns and advertising website launches, I follow back. Curious, I click on the link given in their Twitter profile.

Gonk. First hit. Website doesn’t work without the www prefix – as expected by naïve me, even if mr. @hakmem disagrees. It’s just a small thing though, someone mistyped the link while creating the profile, so I go on typing the www, eager to see the site.

Website welcomes me. Well thank you! Quite minimal though. Searching for a menu or something that looks navigational. Woot, a button! It’s in greek and labeled “Client area”. I’m not a client, zilch. Paying more attention to the copy, I realise that it asks me to visit the international Tribal DDB website and select “Athens” from its menu. Whut? I’m a bit unhappy about that. However, I’m determined to find more about their work so I click anyway.

Link doesn’t open in a new page, that’s good. Yay, the site looks similar, I like consistency. Searching for the “Athens” link the greek website told me about. Nowhere to be seen and still, nothing too navigational there, only a bunch of gold copy that’s about awards and not linkable. It’s nice that they’re so successful, but I don’t really care about awards. I’m itching to see work samples. Where are they?

After some seconds, I realise that there’s an enter site link on the left. Sighing on that (and on the “This site is designed for 1024×768″ text on bottom), I click on it.

Damn! A new window. Bleh. It seems that they’re using Flash for their site, but I’m prepared for that, many advertising agencies do. Grinding a bit my teeth I click on the ClickToFlash banner and wait for the loader to finish, thinking the actual website is about to launch. Wrong. That’s an intro.

See that “Skip intro” link up there? Yup, me neither. It’s so pale over the white background it’s painful to look at. And I can’t click on the actual intro to go on. I decide to wait it out and after some (precious) seconds, voila! The actual website.

Now, that “Athens” link. Playing a bit with my mouse over the ever-revolving city list on the left I find it. Wait, what’s “Health” doing between Hamburg and Helsinki? Is there a city named “Health”? Never mind. I click on Athens.

Things are loading. That ever-revolving city-something list on the left is still moving – why? I’ve already selected a city. It’s starting to become too annoying but I’m blocking it out. My aim: work samples. Their menu: that.

I only have 1.5 or 2 degrees of myopia and I still have difficulty reading those menu options. Nevertheless, I click on Work. Meanwhile, the box that’s directly on the left of the menu keeps rotating empty blue cells. I wonder why for a brief moment but then I just click.

Yippie! The interface got larger, at last! Will see some screenshots. I see another revolving carousel and some lonesome logos. Naturally, I click on the carousel, on a thumbnail that tickled my fancy.

The text isn’t selectable but that’s alright. There’re some screenshots for me to check out, but they’re scaled down. I try clicking on them to see if there’s a bigger preview available, nope. I click through the available screenshots but I can’t see a thing. I click on the “view the site” link to see it in all of its glory. Yay! It works. Hmmm….

OK, back to the site. That’s a case study, so there’re three tab things with more info. I see the idea. I click on “Service” but I don’t find anything interesting. On clicking “Result” though, I get some interesting stuff…

“Undefined” alright.

So I leave this to you, dear readers: what do you think? Should I feel satisfied by this web experience? Did I achieve my aim? Did I learn something about this company?

I did. A lot more than you can imagine.

No amount of social media presence can fix a broken web image. Sure, you have a strong brand, a successful company, many happy customers. But seriously, this? I expected better, Tribal DDB.

So. The iPad. Cool, eh?

What, you don’t like it? Think Jobs under-delivered in his keynote? Thinking your tiny Dell netbook can do all that and more, even if you have to crouch to look at the screen and glue your hands together to type?

Yeah, I know. Tablets with full 9.7 inches of ultra-sensitive touch screens are so common nowadays. I mean, these things can even play HD video without crashing their way to reboot, yeah, that’s common too. And the interface? Pssssh, I’ve seen Excel worksheets looking better than that iCal view. And all that starting from $499? Gee, what were these guys thinking.

Seriously, people, get a grip. I don’t know what kind of mystic arcana you believed Jobs would unveil in his keynote, but really, are you that close-minded to think that the iPad is common and overrated? Have you seen many tablet PCs nowadays that look and function as cool and intuitively as the iPad looked in that intro video?

And don’t get me started about the lack of Flash support; seriously, who cares¹. Oh I know – Flash developers care. Look, my fellow developers, I admire your skills but seriously, seriously, don’t you ever think that maybe it’s the time to expand your skills a bit if you want to hop on the bandwagon?

Most developer complaints I’ve heard are based on the loose axis of “yeah I know I could do that and more with Cocoa, but I’m confident with my current set of skills and I don’t want to learn Objective-C”. This is wrong and you know it – this is as if PHP developers absolutely refused to dabble on Ruby & Python because they’re “happy with their current set of skills”. We’re called developers for God’s sake, don’t you think we should develop our skills every now and then?

The iPad is not made for you and me, fellow geek. It’s primarily targeted to people that are still afraid of interacting with PCs, those that don’t have a clue about drivers and web apps and Wi-Fi setup. And this is exactly the kind of people that won’t buy a Linux netbook, dear Open Source zealots – because as much as Ubuntu has made Linux user-friendly, there’s still much filling that shows between the seams.

One could argue that I’m a total iPad fangirl and everything above is the fruit of my utter fangirlism, but I assure you, I’m not that much of a fanatic cookie. I’ll probably don’t even buy the first generation iPad. But I’ve seen people getting it so wrong on the interwebs these days that I’ve collected a massive amount of ranting fume.

¹ Yeah, I know Farmville fanatics, you’ll have to stick to your netbooks to sow your corn, but I don’t really care about you to be frank.

After 3 years of heavy twittering (with a brief pause of some months – seriously, what was I thinking), I have familiarized myself with most of the service aspects, developing some kind of unwritten Twitter laws.

People don’t take well my Twitter presence at times, so I’ve decided to make a post about it and share: am I a bad Twitter-er people? Do you do these things too?

Without further ado, my patented unwritten Twitter laws™:

• If you follow me and I don’t follow back and you’re absolutely pissed (there are some people who still do that), try to reply at some of my tweets in a coherent, non-jackass way. Fat chances are, I’ll eventually follow you.
• An e-mail containing your follow data arrives in my inbox. I always check your twitter page and do a bit of mini-stalking (apart from obvious spambots). If your twitter stream is full of titles + links, you fail. If it’s full of replies to other people, you fail. If you don’t have an online presence, anywhere, you fail. If you have a link to your facebook account or (God forbid) to your twitter account (endless loop anyone?), you fail. If your twitter stream is protected (seriously?), you fail again. If, however, you express coherent thoughts, no matter the language, no matter the subject, you’ll be likely followed back. It helps if you’re kinda hot too, in a steamy geek kinda way.
• You’re absolutely appalled by my Twitter activity and you decide to unfollow me. If your life or work isn’t spectacular enough to keep my interest in you, don’t expect me to stay a follower of you for long. It’s not a matter of revenge: when I follow someone, it’s because a) I admire their work or lifestyle b) I’d like to know them better (that’s more suitable for Greek twitters). If you decide to unfollow me, you don’t want me to know you better, so if I don’t really admire the things you do, poof! I’m gone too.
• Contrary to some predictions, you can make money off Twitter (or social media, as the cool kids call it). Not directly, I’m not DELL. But most of the freelance jobs I’ve been offered were based on Twitter interaction. I consider this a huge success for my Twitter presence and I don’t really care I have yet to reach 1000 followers.
• I’m all for conversations for Twitter, but please. Not lengthy ones. Don’t expect to draw conclusions from Twitter, it’s not for solving complex geopolitical problems – it can give the hints to transfer the conversation to some other medium though (thanks @stazybohorn).
• I’m perfectly fine with you posting links to your latest blog posts on your Twitter stream. Some people are complaining about this, but I’m not. Since I rarely (if ever) fire up my feed reader, it’s a nice way to let me know of your new posts. I’ll definitely check those out.
• What’s highly annoying: littering a perfectly coherent tweet with inline hashtags. #this is not #cool, #people.
• What’s highly annoying #2: auto-tweeting apps. Think gowalla, foursquare and the like. For the record, I’ve used a command-line hack to filter my Tweetie stream of that jargon. You can find it here. (thanks @olrandir)
• Yes, I’m greek, but I tweet in english. I also blog in english. In fact, about 80% of my online presence is in english. Why? Because english is a simpler, more techno-friendly language that reaches to billions of people, and not just some thousands. I’ll always reply in english, except when what I want to say has only meaning to greek followers (that will probably be a reply to someone though). Case study: this joke tweet reply.
• Fact: even if I respect your work, if you’re a cold elitist bastard at Twitter, you’ll always be a cold elitist bastard to me.
• Personal reminder: you can’t DM people that don’t follow you. You can’t DM people that don’t follow you. You can’t DM people that don’t follow you.

Hm, I think that’s all for now. Feel free to add your own pet peeves, usage patterns and unwritten laws.

God I love Twitter.

Flickr credit: directfromcannes

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:

1. 

   Designing with Web Standards (3rd Edition)

   By Jeffrey Zeldman

   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.

2. 

   Don’t Make Me Think: A Common Sense Approach to Web Usability, 2nd Edition

   By Steve Krug

   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.

3. 

   Transcending CSS: The Fine Art of Web Design

   By Andy Clarke

   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.

4. 

   Designing the Moment: Web Interface Design Concepts in Action & Designing the Obvious: A Common Sense Approach to Web Application Design

   By Robert Hoekman Jr.

   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.

5. 

   Handcrafted CSS: More Bulletproof Web Design

   By Dan Cederholm

   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!