7

Our UI has a table of data, with the first row containing input fields in each column for searching based off the data in that column. We want to add a dropdown that determines how that search text is used. We want to be able to do the following comparisons:

  1. Greater than (only retain rows that have values greater than the value specified)
  2. Less than (only retain rows that have values less than the value specified)
  3. Equals (only retain rows that have values equal to the value specified)
  4. Contains (only retain rows that have values that contain the value specified. For example, if the search text was "ee", the values "beet", "eel", and "fee" would match, but "beat" would not))

Space is at a premium, so ideally, each value in the dropdown would be one character. For the 1st three above, we would use ">", "<", and "=". However, I'm not sure what character could be used for "contains." Ideally, it would be a single character, but I could live with 2 or maybe even 3 characters. I just don't want to have use the word "contains". Is there any symbol that a user would intuitively recognize as meaning "contains"?

Also, we're considering being able to do a "starts with" and "ends with" search, so, if there are symbols that would tie in these 2 with the "contains" search, that would be of great help.

I should also note that the users probably won't know more than basic mathematical symbols. I'm hesitant to use some of the symbols mentioned in the current answers (, ), because I'm not sure many users would recognize what they mean.

  • Could you provide a image or mockup for the dropdown? I thought about an answer but I might not apply to your case. – Alejandro Veltri Apr 1 '15 at 15:47
6

As a front-end developer, I'd make a custom control which shows just the symbol when collapsed and the symbol + text when expanded.

This way both concerns (about space and symbol choice) turn less important, because when the dropdown is expanded, it's supposed that the intended action is just to make the selection so you don't care about it taking more or less space, then you could just show the text when expanded, so the symbol serves just a reference of the text.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

  • 1
    I like this approach as it gets the best of both worlds – dnc253 Apr 8 '15 at 15:20
4

The mathematical symbol for "contains" is . For "starts with" and "ends with", the symbols ^ and $ are used in regular expressions. However, it is unlikely that your users are familiar with these symbols in this context.

Use WILDCARDS instead. Most users recognize the use of asterisk * as a placeholder for unknown text during textual-search. This way, you'll also be able to completely drop the dropdown.

User enters *ee* - search for text containing ee.
User enters ee* - search for text starting with ee.
User enters *ee - search for text ending with ee.

A search tip might help!

mockup

download bmml source – Wireframes created with Balsamiq Mockups

  • Actually, means "subset of", or "contained in". would mean "contains". – O. R. Mapper Apr 1 '15 at 14:43
  • But that requires someone to be familiar with those symbols. Because I'm self taught in higher math and haven't had much practice, everytime I need to write a formula/equation involving sets, I need to look up those symbols. – Cole Johnson Apr 1 '15 at 15:19
  • Might want to mention that the symbol is U+2283 SUPERSET OF. Also, for wildcards, how many people are familiar with Windows' syntax that "adds" ? meaning any one character? Because you could add that. – Cole Johnson Apr 1 '15 at 15:23
  • @ColeJohnson: You're right Cole. Users are very unlikely to know what , ^ or $ means. Or even ?. Best to let the asterisk handle all the cases. There could be a helper tool tip around the search for assistance for those unfamiliar with even *. – SNag Apr 1 '15 at 15:29
  • @ColeJohnson: Windows doesn't "add" much there, ? is simply one of the characters commonly appearing in glob pattern syntaxes, not restricted to Windows. – O. R. Mapper Apr 1 '15 at 15:32
1

From a UX perspective most of those symbols are problematic with the exception of '='. I'd imagine your users are familiar with '>' or '<' for sure, but even that could be troublesome as some people might need more context. All those others indicating 'contains' etc are definitely not user friendly. If this is only ever going to be in a PC setting within which users are navigating via a mouse/cursor then maybe you could go with those symbols and look at using a tooltip on hover to describe what they represent.

Otherwise I'd consider (I'm aware that perhaps your project/table may not permit this) having a drop down that is larger than the columns or rows around it i.e. sitting on top of the content around it. As it's only going to be used then disappear so it doesn't matter if it obscures other things and then you have the real estate to put full words.

Obviously tables are really annoying to style or build unconventional functionality into so don't take that suggestion too seriously. My main point is this:

Words over symbols if you can find a way. That's the best option in terms of UX.

1

Usability is more important than accuracy

At least, in most cases.

  • While the symbol may be compact and precise, it will be unfamiliar to many lay users so it may not be the most intuitive choice for your search. On the other hand, ff your users are technical, it may be a fantastic choice.
  • Space may be at a premium, but unless you are designing for a smartwatch or a really small device the difference in size between symbol and text menus is not that great.
    • Indeed, with touch- and mouse- interfaces, a larger menu can be more usable anyway.
  • The Az and ellipse (...) icons are often used in text searches, so you may have some luck using those to denote concepts like contains, starts with or ends with

Here are two sketches, one with symbols only, and one with symbols + text to make the point that the difference in menu size is not that great.

enter image description here Only you can decide what is best for your app.

0

There is a mathematical symbol for expressing something like 'A has x' and it's the subset symbol: ⊇ and ⊆ or ⊂ and ⊃ (there is clearly some disagreement on how to use it consistent). I highly doubt this symbol is recognized by most users. Maybe use the word 'contains', or if space is really sparse, maybe use the word 'has'?

Maybe these links are useful: http://en.wikipedia.org/wiki/Subset https://math.stackexchange.com/questions/417007/mathematical-symbol-for-has

If your users are developers or something alike, you could consider { }, [ ] or / /.

0

While other answers have correctly pointed out the symbols for supersets and subsets, if you are ok with mathematical symbols, you might also consider , where x ∊ Y means x is an element of Y.

x ⊂ Y means x is a subset of Y, which is, strictly speaking, not exactly correct, as elements of sets have no particular order. Thus, for the expression "ee" ⊂ "beet" to make sense, ee and beet would have to be considered sets of characters, while ignoring the order of characters. Strictly speaking, the correct symbol to use would be , unless we want to exclude the possibility that x matches the entire string.

x ∊ Y is a bit more accurate in this regard. While "ee" ∊ "beet" still is not entirely correct (as beet would again have to be interpreted as a set), one might argue that if beet denotes the set of all substrings of the text "beet", this could mathematically make sense.

In any case, the "spoken form" of allows for a more natural way of expressing the contains relationship, as "ee" ∊ "beet" can be read as "ee" is an element of "beet". In some languages, this is further helped by the obvious resemblance of the symbol to the first letter of the word it stands for, element, whereas a could be mistaken for a "strange-looking c". Rather than the word subset, this could be associated with contains/contained in, but exactly as both contains and contained in would fit, the direction could be confusing, whereas there should be no such issue with ("is elemented in" isn't a word).

Lastly, and this might be very location-dependent, the mathematical symbol might be slightly more well-known than the symbol. At least as far as I remember, I got in touch with the symbol in my regular math classes at school somewhere between grades 6 and 8 (i.e. at roughly 12 to 14 years of age), whereas I'm not sure I ever saw the symbol (or related symbols) before entering university.


Alternatively to these mathematical symbols, you might use some other short notations:

  • in comes to mind, as it could be used interchangeably with the above .
  • If you need to express the relationship the other way round, i.e. not x ... Y, but Y ... x, has might be an option, although it doesn't sound as natural.
  • No specific symbol at all - either, you don't distinguish between contains and equality, in which case no specific symbol would mean check for partial or complete equality, or you especially indicate complete equality with the equals sign, and leave partial equality as a "default" that is not marked by any additional symbol.
0

Such great suggestions in here, but I'd suggest:

  • For Starts with, ... is about perfect, and it generally fits as a symbol
  • I'm a power user, but I like *.* for Contains
  • Equals and the others, Symbols work great, but you weren't really asking about these =

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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