5

What is the best way to highlight a selected option in text/link format without using <strong> or <b>?

I cannot use underline as they are already links and are therefore the underline is used to show they are clickable.

I don't want to use <em> or italics as I believe it is too subtle and doesn't tie into the design of the site.

The best way would be to use bold, however making a text selection bold increases the SIZE of the text, changing the layout of the box in certain cases. Here is an example:

enter image description here

Currently ordered by "episodes" and therefore "Episodes" is bold and "Treatment Days" is underlined - immediately you can tell that you are viewing by "Episodes" and you can change the order to be by "Treatment Days".

However when you do this "Treatment Days" becomes bold and as such gets bigger, wrapping the line of text to the next line as such:

enter image description here

Aside from looking bad, it also pushes "Episodes" down which can be slightly confusing or awkward for users.

How can I better display this box? Bear in mind that the box itself is quite small (although may change width/height - it is a cell in a <table> and its width and height are dependant on the rows and cols in the table), but this is the "general" size it could be. As such things like having bullet points, or anything may be unusable as it increases the space.

Edit: after @mervinj's ideas and answers I have played with colours - I was having a hard time because the box itself is quite dark, and different colours weren't showing up well against the background. So I have come up with this: i.e. change the <span> background colour and text colour to show which is selected and which is selectable.

enter image description here

enter image description here

Does this make sense? Does it look "good". I think it looks a bit garish. Would you be able to see at a glance which area is "selected" and which area was not selected?

Edit 2: saying that... I kinda like this (half way house)

enter image description here

enter image description here

1
  • 1
    The two samples of your first edit are horrible IMO. are the blues or the whites selected? This is a problem even with single selection if only two options are present.
    – peterchen
    Aug 24, 2012 at 11:42

2 Answers 2

3

Why dont you do it the way Microsoft's Metro UI handles it by giving the selected text a specific brighter color and greying out the rest. This way the text size can remain the same but the selected menu item would be highlighted.

enter image description here

Another example of it being used on websites

enter image description here

So in your example,it would look like this :

mockup

download bmml source – Wireframes created with Balsamiq Mockups

Check the sites below for color contrast suggestions

Background and Foreground Colors Test Page

Color Contrast Checker

4
  • That's not a bad idea, although on the dark background I may not have as much choice on the colours. :) I'll have a play with that. Aug 23, 2012 at 13:19
  • Color it is. Make sure to significantly indicate selection when only two items are present; color saturation and/or contrast are good cues here, so the easiest is a consistent background exytending beyond the list area.
    – peterchen
    Aug 23, 2012 at 13:35
  • Hi, I've had a play with colours and because the background was dark and color apart from white wasn't showing up nicely. So I've changed the background color of the <p> element around the item and put the screenshots in my first post. What do you think? I think its quite garish personally, but what do you think? Thanks Aug 23, 2012 at 13:36
  • I like it though you could try some other colors to see what works best on grey (other than white). I also removing the underline (you already have a order by on top so the underline is redudant and might cause confusion whether its a link or not
    – Mervin
    Aug 23, 2012 at 15:15
2

One thing that can be improved in all of your proposals is the visual distinction between the 3 different elements.

If one looks at 3, for example, the three elements have each a different style, so it is hard to group the the two options from the header.

In addition, due to the word-wrap on 'Treatment Days' (especially as 'Days' start with a capital) you could run into troubles with users thinking 'Treatment', 'Day's and 'Episodes' are all different options.

In the examples below I've chosen to group the options by giving them indent. Then Top is based on coloured selection, B on dimmed not-selected, C on a check symbol.

I think it is fairly clear to see that C is the most appealing one to the eye.

3 visual options to alignment of options and emphasis of selection

Although it may appear funny for some (while to others not funny at all), I would recommend you briefly familiarise yourself with the Gestalt Principles - They can really help with questions like yours without one having to read hundrands of pages on design.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.