Crique of element

They have: 173 posts

Joined: Feb 2005

Simple enough critique requested.. Smiling

http://i10.tinypic.com/52515qv.gif

In the first bit.. do you think the "help icon" looks best placed beside the element (input) or beside the label (text)?

Secondly, which looks better - when the tooltip displays to the right of the icon, or below the element?

Thanks!

SonicMailer Pro - Professional mailing list manager & award-winning email marketing software
Download a FREE 30-day trial today!
Use coupon savemoreon4 and save 10%!

greg's picture

He has: 1,581 posts

Joined: Nov 2005

HELP ICON PLACEMENT
I think (personally of course) it looks better at the end of the element.
It looks neater to me, when it's next to the text it's a bit cluttered, whereas the element is just white space so it is not 'competing' with another dominant item (the text)

Also, with the pop-up next to the label, it covers the bit where the user will next click
i.e. look at the first input...address, when the user hovers over the help icon, the pop-up blocks the start, and about 80%, of the input field where 'most' users will want to click next. I still believe many users will not know you can click 'anywhere' in the input field and the help menu will dissapear and they can start typing.

So this way you are making it easier for users and making it neater and less cluttered!

TOOLTIP POP-UP
As for whether the pop-up appears to the right or below, I think to the right.
When the user clicks an icon, they are only concentrating on that one element and text that the icon help refers to. Both the text and element go from left to right, so when the user clicks on the icon and it pops up to the right, they continue the current flow of the item they are working on by it going to the right with the element and text

Rather than it drop downwards and you then have left/right up/down.
I know that is a bit 'picky', but that is what I would choose.

tinypic eh? Sticking out tongue

They have: 173 posts

Joined: Feb 2005

greg;219726 wrote: HELP ICON PLACEMENT
I think (personally of course) it looks better at the end of the element.
It looks neater to me, when it's next to the text it's a bit cluttered, whereas the element is just white space so it is not 'competing' with another dominant item (the text)

Also, with the pop-up next to the label, it covers the bit where the user will next click
i.e. look at the first input...address, when the user hovers over the help icon, the pop-up blocks the start, and about 80%, of the input field where 'most' users will want to click next. I still believe many users will not know you can click 'anywhere' in the input field and the help menu will dissapear and they can start typing.

So this way you are making it easier for users and making it neater and less cluttered!

TOOLTIP POP-UP
As for whether the pop-up appears to the right or below, I think to the right.
When the user clicks an icon, they are only concentrating on that one element and text that the icon help refers to. Both the text and element go from left to right, so when the user clicks on the icon and it pops up to the right, they continue the current flow of the item they are working on by it going to the right with the element and text

Rather than it drop downwards and you then have left/right up/down.
I know that is a bit 'picky', but that is what I would choose.

tinypic eh? Sticking out tongue

What about for those fields which are longer, and if it displayed to the right, it might be partially/mostly out of view? (As well, I want to keep this completely CSS if possible...)

SonicMailer Pro - Professional mailing list manager & award-winning email marketing software
Download a FREE 30-day trial today!
Use coupon savemoreon4 and save 10%!

greg's picture

He has: 1,581 posts

Joined: Nov 2005

Without knowing a bit more about your layout/site etc it's impossible for someone to tell.
We don't know if that on the image will be exactly as it is, i.e. right up against the left of the screen as it is in the image, or if you have a side banner or navigation menu to go in there. Is there a nav menu/banner/ads to go on the right?

The notes field is very long ATM, I would 'presume' you will be making it shorter but it will be deep, i.e. drop down the page for users to write text into.

These are things you will have to have a think about yourself, and play about with it so it fits nicely on a screen, over whatever range of resolutions/screen sizes you are coding for.
Provide some more info regarding the rest of your site content etc and I'm sure someone (if not myself) will be able to help you.

If you are using CSS layout now, it should be no problem re-arranging things around a bit more.

They have: 173 posts

Joined: Feb 2005

greg;219732 wrote: Without knowing a bit more about your layout/site etc it's impossible for someone to tell.
We don't know if that on the image will be exactly as it is, i.e. right up against the left of the screen as it is in the image, or if you have a side banner or navigation menu to go in there. Is there a nav menu/banner/ads to go on the right?

The notes field is very long ATM, I would 'presume' you will be making it shorter but it will be deep, i.e. drop down the page for users to write text into.

These are things you will have to have a think about yourself, and play about with it so it fits nicely on a screen, over whatever range of resolutions/screen sizes you are coding for.
Provide some more info regarding the rest of your site content etc and I'm sure someone (if not myself) will be able to help you.

If you are using CSS layout now, it should be no problem re-arranging things around a bit more.

I have a centered element on the page. On an 800x600, there wouldn't be any space. 1024 probably and anything above that for sure...

SonicMailer Pro - Professional mailing list manager & award-winning email marketing software
Download a FREE 30-day trial today!
Use coupon savemoreon4 and save 10%!

Want to join the discussion? Create an account or log in if you already have one. Joining is fast, free and painless! We’ll even whisk you back here when you’ve finished.