Google Blogoscoped

Forum

Graphics in Select Boxes  (View post)

Stefan [PersonRank 0]

Tuesday, July 22, 2008
8 years ago11,394 views

Good idea so far, but you can – except for IE – display background-images in select-boxes with CSS.

Jack Hynes [PersonRank 6]

8 years ago #

Great tip. Think I might use this to rate and make sense of my unwieldy '(almost) definitive list of movies I have ever seen' list jackhynes.tumblr.com/post/3062 ...
Now I could spot the goodies and avoid the baddies! Quite a lot of work to get through though...

Tony Ruscoe [PersonRank 10]

8 years ago #

Neat trick.

Mrrix32 [PersonRank 10]

8 years ago #

Cool! I didn't know about the colour thing.
Although if you select one it shows up as black

Tony Ruscoe [PersonRank 10]

8 years ago #

Just remembered, I've been using the <optgroup> tag to add a separator between elements in a drop down list. For example, a list with "common" items at the top followed by all items alphabetically below. Something like this:

<select>
<option>Blue</option>
<option>Green</option>
<option>Red</option>
...
<optgroup label="&mdash;&mdash;&mdash;"></optgroup>
<option>Black</option>
<option>Blue</option>
...
</select>

NAPOLUX [PersonRank 1]

8 years ago #

That's really useful! Thank you!

Colin Colehour [PersonRank 10]

8 years ago #

When viewing the select box on the iPhone, there are no colors shown, everything is a default black color. Also, the first blank option is selected so it shows a checkmark next to nothing.


farm4.static.flickr.com/3040/2 ...


Since the iPhone uses checkmarks to show what is selected in a Select box, it makes using checkmarks in the actual select box a little confusing to the user. Example:


farm4.static.flickr.com/3118/2 ...

Tony Ruscoe [PersonRank 10]

8 years ago #

It seems the iPhone is yet another browser / device for webmasters to worry about when it comes to usability...

Colin Colehour [PersonRank 10]

8 years ago #

Yeah, the list of browsers to test against never seems to get shorter. Now you have to throw in mobile browsers like mobile Safari or Opera mobile edition.

Philipp Lenssen [PersonRank 10]

8 years ago #

Very useful info Colin. Interestingly enough this doesn't happen on Windows Safari (I just tried to check Mac Safari but can't reach the Mac at Browserpool.de). Accessibility-wise the checkmark may be just asking for trouble though, as it doesn't leave the details of how to display a selection to the browser. The star Unicode symbol may be a better use-case...

Michael Fagan [PersonRank 3]

8 years ago #

as was pointed out, Firefox at least will show background images, too bad no others do

you can see an example of mine from a few years ago on uwhub.ca/ (click on "advanced" and then see the "file format" dropdown)

K [PersonRank 2]

8 years ago #

"Although if you select one it shows up as black"
That's because the one displayed there is styled by styling the <select> itself. In Firefox at least, some browsers does it differently.

Caleb E [PersonRank 10]

8 years ago #

"Good idea so far, but you can – except for IE – display background-images in select-boxes with CSS."

But something not working in the majority market share browser is a deal breaker. Unless you want to cut off well over half of your potential customers....

Sas [PersonRank 1]

8 years ago #

are this graphics made in visual basic guys
[Signature URL removed – Colin]

Tony Ruscoe [PersonRank 10]

8 years ago #

<< But something not working in the majority market share browser is a deal breaker. >>

Unless it's an enhancement rather than a requirement. Like in Michael Fagan's example above.

Colin Colehour [PersonRank 10]

8 years ago #

Here is what it looks like in Mac – Safari Version 3.1.2 (5525.20.1):


farm4.static.flickr.com/3199/2 ...



Pretty much looks identical to what I see on the iPhone, including the checkmark behavior.

Ianf [PersonRank 10]

8 years ago #

I'd like to argue that select boxes/ drop-down menus for poll-like RANGE of even a few items should be avoided at all costs. Bad UI by default. If you need to pick something out of a range of kind items, use radio buttons instead, arranged side by side with no gaps between buttons, and the "worst" and "best" labels flanking the group left and right. Instant one-line overview/ visual feedback!

E.g. WORST <input name="test" type="radio"
value="-3"><input name="test" type="radio"
value="-2"><input name="test" type="radio"
value="-1"><input name="test" type="radio"
value="1"><input name="test" type="radio"
value="2"><input name="test" type="radio"
value="3"> BEST

Colin Colehour [PersonRank 10]

8 years ago #

dxdec.com/wod/formstyle/index. ...

The site above has some cool radio buttons that have a star shaped that gets filled in.

Ianf [PersonRank 10]

8 years ago #

Colin, not bad at all. I really wish the HTML powers that be had introduced an

<input type="slide" value="10" checked="3">

control element for linear-type input ops, perhaps with optional binary precision="0" (or "true/false") argument for integer or real-number return of input slider position; an ASCII approximation of the above make-believe input code:

Here |_|_|_Î_|_|_|_|_|_|_| Eternity

Philipp Lenssen [PersonRank 10]

8 years ago #

> E.g. WORST <input name="test"
> type="radio" value="-3">

On the other hand, some people may consider using label-less radio buttons bad usability, as they contain too small a click area when unlabeled. blogoscoped.com/archive/2005-0 ...

The recent interface fashion suggests to use a dynamic scripted row of graphic stars which react on-hover, but I'm not always too happy with that, especially since it often does not differentiate between stars-that-are-editable-and-clickable vs stars-that-are-merely-displayed (take a look at the Google Groups interface, which in some situations has one row on top and one at the bottom, and you're left to guess which is editable!). Sometimes, a simple dropdown box *may* be more discoverable and easier understood – not quite sure.

Ianf [PersonRank 10]

8 years ago #

Philipp, there's a semantic problem (I'd say deep-semiotic, but then I could be accused of lexicographic elitism ;-)) with stars as symbols in any progression. Could "one star" ever be equivalent to "-3" on a "-3 to +3" value scale? Could it express "0 stars"? Perhaps a "dark star" would be better here, but then the Western/ Caucasian/ Occidential by-default positive notion of "star," esp. in the context of color scales, differs most likely from (the scope of) Eastern/ Oriental meanings of same. Similar objections could be raised about labeled vs. non-labeled _discrete_ steps in a horizontal bad-to-good radio slider. And "horizontal" is the implicit equalizing value here, as any vertical setup, whether of radio buttons or menu lines in select boxes, is by default already a symbolic "Upstairs-Downstairs" arrangement. I don't have any data to back me up, --where's Jacob Nielsen[*] when he's needed?-- but I am pretty sure the horizontal range of

WORST oo•ooooooo BEST

(which is NOT the same as)

BEST ooooooo•oo WORST

choice, with but two end-labels, would come out far ahead as better ergonomic solution for polling user input, than a vertical one with labels for each choice.

[^*] useit.com

Philipp Lenssen [PersonRank 10]

8 years ago #

> there's a semantic problem (...) with stars as symbols in
> any progression.

I definitely agree with that. Does a single star taken on its own represent "better than nothing/ worth a star!" or does it represent "really bad, only one star!"? So I think if you do have such a stars interface it makes sense to use the additional label "worst" or "bad" next to your one-star icon to get the point across.

As for the vertical vs horizontal direction, interesting point to consider, too.

Ascanio [PersonRank 0]

8 years ago #

In the case of a single star for rating, one solution is to add the rest of the stars and show them faded.

This way the user will recognize the set of stars and see that only one is filled. The emptiness will easily be conceived as bad, while fullness will surely mean good in most cases.

Fact is that the star itself isn't a good choice either for bookmarking or rating, because it doesn't have either symbolic or iconic relations to the object or action.
If you look at the star, you will understand it's function only by it's context, and by the fact that loads of websites have used it for rating, so it's (kind of) a convention, which brings us closer to the symbol, but yet it's not an all-round convention, rather it's one specific to the vocabulary of websites.
So it required the average user to learn such vocabulary before the communication becomes intuitive.

For such reason a more effective symbol should be used in place of the star.

This thread is locked as it's old... but you can create a new thread in the forum. 

Forum home

Advertisement

 
Blog  |  Forum     more >> Archive | Feed | Google's blogs | About
Advertisement

 

This site unofficially covers Google™ and more with some rights reserved. Join our forum!