23

On a clothing website (in one of the navigation panels). I have sorted the dresses according to their colour (example and snapshot is listed below).

Below is the example

**Dresses by Collours**
Black Colour Dresses
White Colour Dresses
Red Colour Dresses
Green Colour Dresses
Yellow Colour Dresses
Ferozi Colour Dresses
Pink Colour Dresses
Rust Colour Dresses
Bottle Green Colour Dresses
Bright Red Colour Dresses
Deep Red Colour Dresses
Mehndi Green Colour Dresses
Shocking Pink Colour Dresses

Example is highlighted with red in the picture.

enter image description here

Is repeating a word in a navigation panel bad?

Graham Herrli
  • 7,416
  • 7
  • 38
  • 58
muhammad usman
  • 457
  • 3
  • 9
  • 5
    That doesn't sound like natural English to me anyway. I would not say green colour dresses: I would say green dresses. (That's in natural language. For a menu, cutting down on redundancy and simply saying Green, as suggested, is probably better.) – TRiG Nov 12 '13 at 16:52
  • Don't repeat anything. That applies to not just interface design, but to any sort of list at all. Alternately, just put color swatches. – AJMansfield Nov 12 '13 at 17:14
  • This question appears to be off-topic because it is about English language usage. – Graham Herrli Nov 13 '13 at 01:10
  • 3
    @3nafish: UX is almost always about communicating with users, and language is one of the most common forms of communication. Using language effectively definitely is on-topic. – MSalters Nov 13 '13 at 15:40
  • @MSalters. I see what you mean. My close vote was responding to the question asked in the body of the post (whether its better to say "black" or "black colour" or "black colour dresses" or "black dresses" or "dresses in black color") rather than the question in the post heading (whether repetition is okay). I have edited the post now so that both questions are the same and have retracted my close vote. – Graham Herrli Nov 13 '13 at 23:44

3 Answers3

38

To cut down on the amount of text that the user is required to read, you can change your header to read "Shop by Dress Colour", then list out each color beneath.

Shop by Dress Colour

  • Black
  • White
  • Red
  • Green
  • Yellow
  • Etc...

With the listing like this you don't have to repeat the words "dress" and "colour" throughout the list.

From some of Jakob Nielsen's studies, there have been recommendations to keep redundancy to a minimum, thus the recommendation above. Basically the idea is that the more you can reduce how much a user has to process, the more likely they'll be able to use your navigation without difficulty.

"People must expend effort to figure out the difference between links with similar names" (Prioritizing Website Usability, p. 189)

"Tighten up your links by starting with keywords or an information word. Remove extraneous words, such as repeating your company name in each link; this adds unnecessary complexity to the interface. Links that start with identical or redundant phrases require people to carefully read all of them to glean the differences." (Prioritizing Website Usability, p. 192)

ChrisK
  • 967
  • 8
  • 18
  • 3
    Can you provide any info on why this is better? Otherwise you're basically just repeating one of the questioner's own suggestion... – Lovis Nov 12 '13 at 13:56
  • 4
    From some of Jakob Nielsen's studies, there have been recommendations to keep redundancy to a minimum.

    "People must expend effort to figure out the difference between links with similar names" (Prioritizing Website Usability, p. 189)

    "Tighten up your links by starting with keywords or an information word. Remove extraneous words, such as repeating your company name in each link; this adds unnecessary complexity to the interface. Links that start with identical or redundant phrases require people to carefully read all of them to glean the differences." (Prioritizing Website Usability, p. 192)

     – ChrisK Nov 12 '13 at 14:12
  • 2
    nice, thank you. It would be even nicer if you add it to your answer :-) – Lovis Nov 12 '13 at 14:13
  • 2
    The original answer has been adjusted to include the extra explanatory text. – ChrisK Nov 12 '13 at 14:22
  • 1
    thanks @ChrisK and all who answered and helped me understand usability. – muhammad usman Nov 18 '13 at 23:36
20

Maybe a problem also is in the placement of the navigation/filtering control. Your additional navigation is to the left when the filter by color is to the right. Maybe you want to investigate into aligning your navigation to always be on the left?

Zalando handles this with displaying the actual colors in a grid instead of labels for the colors adjacent to their other filtering controls (price, fabric, pattern etc..).

enter image description here

AndroidHustle
  • 16,241
  • 2
  • 53
  • 80
  • 6
    I was going to suggest color swatches, but I'm not sure how well that would fit into the design of the site. Colors are definitely easier to spot at a glance than words, but color + word would be best for users who are colorblind. – cimmanon Nov 12 '13 at 13:54
  • 4
    @cimmanon do colorblind users care for the color of dresses? ;-) – Lovis Nov 12 '13 at 13:58
  • 4
    They do if they're trying to match it to their wedding colors, shoes, or whatever. It's not uncommon for a bride to say "pick whatever style of dress you want, as long as it is this color" to their bridesmaids. – cimmanon Nov 12 '13 at 14:40
  • 1
    @L.Mller my hat off to you sir/mam. =) – AndroidHustle Nov 12 '13 at 14:52
  • 6
    +1 even if just for the alignment. Honestly, even with the big red outline the OP gave, I didn't even see it - so ignored is the bottom right of a column on web pages. – BrianH Nov 12 '13 at 16:21
  • 1
    The swatches could, of course, have tooltips. Slightly more inconvenient for colour-blind users, but how much more so is something you'd probably want to test with some -- luckily they're not all that hard to find. – calum_b Nov 13 '13 at 11:06
  • 1
    Thanks @AndroidHustle I love your idea of colour swatches but i am saving it for new version of the same website. thanks for your time – muhammad usman Nov 18 '13 at 23:38
  • @muhammadusman Thanks Muhammad, I wish you luck! :) – AndroidHustle Nov 19 '13 at 07:38
4

What is shown in the picture is usually done for search optimization to match that full keyword, so it would be ideal from a SEO perspective to keep the full name there.

But we're talking about the user: that looks a bit spammy and repeating words is never ideal (especially 10+ times)

I'd suggest making a color palette like shown by the user AndroidHustle (image below), but keep that full name in the link somehow (e.g. leave the HTML the way it is, but hide the text and color the background via CSS)

This way you get the best of both worlds:

  • the links are semantic

  • the list is usable

    Palette of color

fregante
  • 373
  • 2
  • 8
  • Totally agree on the SEO front, when writing content there are other things to consider aside from just the UX, in this case getting users to the page in the first place via a search result. That said it does make me wonder how effective such messaging is whether for search engines or users. – firedrawndagger Nov 14 '13 at 03:27