Playing With UI Design... (Looking for comments)

[Renegade]

I've been playing with some UI design, and thought I'd try some fun. I don't have a lot of time to do it, so I took some shortcuts and just "got it done".

This portion of the application here uploads a resized or cropped photo to TwitPic with a comment (111 chars) then tweets it on Twitter.

Playing With UI Design... (Looking for comments)

Now, you can of course cancel, but I thought I'd add in a warning. But the regular warning icon of a yellow triangle with an exclamation mark seemed a bit boring, so I went with this:

Playing With UI Design... (Looking for comments)

I like the smiley. It seems fun. I think it will be entertaining for people, and should solicit a few laughs.

Does it work?

[cranioscopical]

It's a neat idea.
I wonder how many people fail to read the content of requesters and commit based on the image/icon alone?
Because it's cute might it fail to alarm?
Could you place the usual warning triangle beside it somehow or is that just too clumsy?

[wraith808]

Chris has a good point.  Could you perhaps put the smiley on one side, and the more traditional (or maybe a cartoonized version of the original) on the other?

[Renegade]

I think it's kind of an either or thing.

I tried a quick mockup in Photoshop, and it seems cluttered.

I was hoping that the shocked smiley face would serve the same purpose. The window itself has a traditional warning symbol for the window icon, though you wouldn't see it in Windows 7 (I forget about Vista) in the task bar.

[mouser]

I think the icon is going to do its job well at making them pause to read the messagebox before clicking a button.  

[Stoic Joker]

Having spent a good deal of time walking people through things. I've come to the conclusion that the reflexive clicking types just can't be helped ... Even if you add a blood curdling scream to the event.

For the rest, the graphic (and crystal clear button text) should do just fine to convey the importance of the next move.

[wraith808]

I think it's kind of an either or thing.

I tried a quick mockup in Photoshop, and it seems cluttered.

I was hoping that the shocked smiley face would serve the same purpose. The window itself has a traditional warning symbol for the window icon, though you wouldn't see it in Windows 7 (I forget about Vista) in the task bar.

-Renegade (May 01, 2011, 08:15 AM)

Another idea that might help... how about the traditional symbol in a thought bubble over the icon's head?  Or integrated into the current icon somehow.

Having spent a good deal of time walking people through things. I've come to the conclusion that the reflexive clicking types just can't be helped ... Even if you add a blood curdling scream to the event.

For the rest, the graphic (and crystal clear button text) should do just fine to convey the importance of the next move.

-Stoic Joker (May 01, 2011, 09:41 AM)

Or not.  He does have a point (and not just the one on his avatar's head...)

[Renegade]

I think it's kind of an either or thing.

I tried a quick mockup in Photoshop, and it seems cluttered.

I was hoping that the shocked smiley face would serve the same purpose. The window itself has a traditional warning symbol for the window icon, though you wouldn't see it in Windows 7 (I forget about Vista) in the task bar.

-Renegade (May 01, 2011, 08:15 AM)

Another idea that might help... how about the traditional symbol in a thought bubble over the icon's head?  Or integrated into the current icon somehow.

-wraith808 (May 01, 2011, 09:54 AM)

Actually, I like that. That could work. Never thought about that. I was thinking in discrete terms -- mostly due to my limited editing capabilities -- I *edit* graphics -- I do not *create* graphics.

I'll see if I can manage to find something that fits the style of the smiley, then see if I can work it in. It may end up being too small, but I think I can work around that by making it wide rather than high, and then reworking the text to fit properly.

Thanks~!

[f0dder]

Ugh - not really a fan of those über-custom GUIs, it just seems so pointless except for a few very specialized applications.

That said, it's not the worst I've seen. The progress bar stands out like a pedobear in a kindergarten, though, something heavily needs to be done about it... ASAP!

[worstje]

I'm no fan of those custom GUIs either. That said, this one grates my eyes. (Sorry.)

In my eyes, besides the neon-green progress bar, I think it lacks contrast. Gradients are pretty old fashioned as it is, and yours go from pretty dark gray to a rather light shade, while your buttons seem to have the exact reverse-gradient (to&from colours mixed around). I'm not saying 'make your buttons slasherfest-red', nor am I saying 'dump the 80s grays'... I'm saying 'a good UI draws attention to the elements that matter', and the buttons get little, the progress bar gets too much, and wtf am I looking at the background anyway?

I hope that helps.

[Renegade]

For interest/balance, I'm posting the basic UI:

Playing With UI Design... (Looking for comments)

Just to provide context against the colors.

Still looking for comments as some people have hit on issues I've been wondering about.

[oblivion]

Still looking for comments as some people have hit on issues I've been wondering about.

-Renegade (May 01, 2011, 11:18 AM)

My two cents: my tiny amount of training in design tells me that the best designs are those that don't appear to be designed at all -- underlining the "highlight what matters" point above, I guess.

The grey screenshot is VERY grey, and perhaps gives a subliminal impression of functionality over excitement.

Personally, I like the shocked smiley for the warning: it DOES draw attention to itself, which is what you want. From that viewpoint, it's worth considering diversions from "standards" when you want to increase the chance that the user might actually read what's onscreen. It's a balancing act, I guess, but isn't everything?