sugarenia.com

I have a love/hate relationship with web design.

It’s what I like to do. When I first coded a website, looked at it and thought “hey, that’s nice”, I decided that’s what I wanted to do for a living. Even though I have a Computer Science degree and I’m lacking in graphic skills, I love learning about the basics of design through trial & error.

On the other hand, empty Photoshop documents scare me to death. When a project starts and I have to start thinking out of the box, my mind shuts down. For a person as dependent on method and rules as I am, creativity is a huge struggle sometimes. I can prototype and wireframe a project’s ass off, but when it comes to design, I feel like a rabbit in front of headlights. So many possibilities!

Long story short, I get quite paranoid while designing a website. And I thought I should share it with you, dear readers.

Here are the phases I’m going through while designing:

1st phase: Fear of the dark blank slate

Launch Photoshop. File > New. Stare at the screen till eyes feel tingly. Shut down Photoshop and open WoW. Play till eyes bleed.

2nd phase: GTD

I’m feeling quite guilty at the moment, so I usually break up the design process in itsy little steps and enter them in OmniFocus. I start working on the first todo, typically “Launch Photoshop”. Something fancy gets my attention on Twitter. 90 minutes and 12 clicks later, I launch Photoshop and create a new document.

3rd phase: Procrastination

I start translating my wireframes to .psd talk. Typically, that means that I just copy my wireframe to Photoshop, trying as hard as possible to avoid any kind of creative thinking at this point. I obsess over grey boxes and alignment, till I remind myself the finished result will hopefully not look anything like it. I try to switch my mind to creative mode.

4rd phase: Guilt

By now, quite some time has passed and I’ve got nothing to show. I turn to the web for inspiration. It dawns to me: every web designer out there is more productive and creative than me! Every single link I click on is a nightmare. There’s a devil on my shoulder whispering “See how well she’s done it? And in so little time? Try to beat THAT”.

5rd phase: Denial

This is the worst phase, both for me and the people around me. I become moody and unapproachable. I answer to questions with grunts. I mope around the house, wearing pj’s and eating trash food. I’m convinced I’m a fraud, that I somehow managed to cheat people into thinking I’m a designer. No colour scheme works, Photoshop tools give me hell, I can’t even draw a straight line. I sometimes cry. I sometimes have fits. All in all, I behave like a brat.

6th phase: Spark

While browsing every website from Dribbble to Youporn [NSFW obviously / but safe for MY work / mwahahaha / yeah.] and squeezing my mind trying to come up with something, I see it. My spark. My inspiration igniter. It doesn’t have to be a full website, it can be a background or a button or a textured line. The world shifts, everything clicks into place, a feeling of warmth inside me tells me: Everything’s gonna be alright.

7th phase: Execution

That’s where the real design happens. I form a bubble around my design. I’ve been known to talk to myself during this phase – things like “Oh I know! It’ll look exactly like this” are occasionally heard in Casa Sugar. I design like there’s Devil hot on my tail. Sometimes I forget to breathe. Double rainbows all across the sky, unicorns fetch me sandwiches and I keep wondering “Gee, how could I question myself? I’m a great designer”. Yeah, modesty doesn’t really work in this phase.

8th phase: Delivery

[Save for Web|Archive]. Fire up Gmail. Attach & send.

And this happens every. Single. Time.

If that’s not a love/hate relationship, I don’t know what is.

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.

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.