22

Note: I'm NOT asking for an icon suggestion.

I'm designing an online menu for users to order their food at a restaurant. I'm also including a filter so that they can apply their dietary preferences. For the icon, I've used the filter.

My question is if using this popular icon widely recognized enough to be clear for users to be able to understand it without including a label. How can I find out given the audience for this restaurant are from a wide range of nationalities. I'm more concerned about users who are not tech savvy.

enter image description here

Improve this question
17
  • 9
    Have you asked your target audiences whether they recognise it?
    – locationunknown
    Oct 2, 2020 at 5:03
  • 18
    Are "filtering" and "preferences" two separate buttons here or is it "filter preferences"?
    – Bergi
    Oct 2, 2020 at 12:50
  • 29
    "Preferences"? In English UIs, the word "preferences" is generally UI-synonymous for "settings" or "configuration" and uses the icon of a cog: people would definitely not expect it to filter a list by dietary requirements. Consider instead terms like "Requirements", "Diet", "Dietary", "Dietary needs" or perhaps best, "Filter".
    – Dewi Morgan
    Oct 2, 2020 at 15:01
  • 4
    NO icon is widely recognized enough to not need a label.
    – jamesqf
    Oct 2, 2020 at 16:47
  • 9
    Why oh why is that called a filter and not a funnel?
    – DKNguyen
    Oct 3, 2020 at 4:04

6 Answers 6

Reset to default
33

The NNGroup sums it up pretty nicely here: Icon Usability

A user’s understanding of an icon is based on previous experience. Due to the absence of a standard usage for most icons, text labels are necessary to communicate the meaning and reduce ambiguity.

There are a few "standard icons" that are almost universally recognized, such as the magnifying glass being used for search functionality, but they are rare. We, as designers/engineers must be careful to not assume an icon as universally recognized based on our own experiences, since we are as biased as everybody else :)

That being said, I would argue that the funnel icon is on the verge of being a "standard icon". When you search for filter on icon platforms such as The Noun Project or Material Design Icons or do a simple Google search for filter icon you will almost exclusively find funnel icons.

Do note: almost. So there are still other symbols used for filters out there, however rarely. Therefore it's save to say that the funnel is widely/mostly used and known but it's not the standard/universal/only icon for filter.

The majority of people will most likely know it from other websites, so in most cases it should be fine. If you want to make sure that as many people as possible will be able to understand and use your filter though, then you should add a text label. Letters are still the symbols with the least ambiguity after all :)

Improve this answer
11
  • 1
    And "almost universally" is not the same as "universally". I realize I'm probably an outlier, but icons just don't convey inherent meaning to me. They have to be learned, like Japanese kanjii - but worse, because there are only 1800-odd kanjii vs an unlimited number of icons, and there's a system to kanjii so I can look them up in a dictionary.
    – jamesqf
    Oct 2, 2020 at 16:51
  • 7
    I like @jamesqf's comment about kanji. Icons have a lot of the same issues as logographs, even down to "it made sense historically, now deal with it," like how we still use a floppy disk icon to mean "save" even though most people haven't even seen (let alone used) a floppy disk in over a decade, and "it really never made sense, but it's standard," like using curved horizontal bars to show WiFi signal strength, but straight vertical bars to measure mobile phone signal strength.
    – A. R.
    Oct 2, 2020 at 17:59
  • @AndrewRay you had to learn the meanings of the arbitrary symbols of English
    – theonlygusti
    Oct 2, 2020 at 18:07
  • @theonlygus: But there are only 26 of them in the alphabet, another 20 or so for numbers and punctuation. Even the basic printable ASCII character set is only 100 or so. Limited number so easy to memorize, all of them with pretty well fixed meanings. Icons? Pretty much unlimited number, none of them having an entirely fixed meaning. As e.g. a floppy disk icon for save (which I don't think I have ever seen): what kind of floppy are we talking about, 3.5 or 5.25 inch, or the even older 8 inch ones?
    – jamesqf
    Oct 3, 2020 at 3:44
  • 4
    I think for a lot of people (or certainly at least some people, but I suspect many), the value in icons isn't necessarily their inherent meaning, it's just the fact that the icon is an easily recognizable and distinguishable symbol which can be associated with some meaning through experience. E.g. personally, my brain is very quick to jump from an image to some associated concept even before I have any idea what the image actually depicts. Possibly quicker than reading words. @jamesqf I suppose it's different for you?
    – David Z
    Oct 3, 2020 at 10:58
13

No, use the icon with a label.

It's not safe to assume that people understand the meaning of the icon as it is used to adjust their preferences and to filter the results. So the meaning is already dubious.

When you search for a preferences icon you get mainly cogs and sliders. But when you search for filter icons you get mainly funnels and sliders. See below. There are just a few icons that are so commonly used (e.g. hamburger) that they can be used on their own, but the filter icon is not one of them. I found this article that might be interesting: https://www.quora.com/What-icons-properly-represent-a-Filter-action-and-dont-lose-meaning-across-language-or-culture?share=1

As a side note: both search results hint that the slider icon can be a good replacement.

enter image description here

enter image description here

Improve this answer
4
  • 1
    None of those images really convey their intended meaning, though. Some of the first set put me in mind of auto or bicycle mechanics, or maybe fixing mechanical watches. The second set are mostly funnels...
    – jamesqf
    Oct 3, 2020 at 3:48
  • Agreed. What are the blobs on 3 lines actually supposed to represent ?
    – PhillipW
    Oct 4, 2020 at 21:32
  • 2
    @PhillipW those are analog sliders, like the ones in soundboards or old sound amplifiers
    – Luciano
    Oct 5, 2020 at 9:31
  • Yes, I'd seen them as that as well: when Ghetto Blasters often had a "graphic equaliser' with some normally vertical slider control things :-)
    – PhillipW
    Oct 5, 2020 at 19:20
11

I do see the funnel icon used widely for "filter" but in this case you've labeled it "preferences", so I think we have a bit of a disconnect there. I would expect most users to think of "preferences" in terms of what colour their background is, quite different than filtering content (as in selecting the results of a search).

Objectively I've always thought the funnel to be a poor metaphor for filtering in the sense of discriminating or selecting, because IRL funnels collects a broad stream of material and channel it all into a destination—rather the opposite conceptual function of a filter function. "Sieve" or "winnow" would be better metaphors but I couldn't begin to guess how to represent them in a simple icon.

However, whether the icon is well-founded metaphorically is secondary to whether the user is familiar with it as a common software icon. Any number of people have come to recognize the common icon for "save file" without ever knowing it represented a now-obsolete storage medium.

Bottom line, I would vote "yes", the funnel is recognizable for a filter function, providing it's about selecting the results from a search.

Improve this answer
3
  • 2
    Of course in school science lessons what you do with filter paper - is put it in funnels :-)
    – PhillipW
    Oct 2, 2020 at 16:03
  • @PhillipW or those people old enough to remember how to old-school make coffee.
    – infinitezero
    Oct 5, 2020 at 11:53
  • Oh yeah! I did not see this before your comments.
    – CCTO
    Oct 5, 2020 at 17:51
5

To answer the question: the filter icon isn't used much.

If you want to use it and you have space adding text "Filter Results" is always going to make it make more sense to people who speak English.

Improve this answer
3

agree with the above answers, but note that the CONCEPT of "filter", even if that word is spelled out, won't be obvious to many users (confirm this via User Research). My 85 year old mother, for example, never uses a filter in the kitchen (food-cooking context) and would never guess that's where she'd tell the computer about her "dietary restrictions" (hint, hint, that might be a better label). To her and others like her, a filter is something in the basement on the furnace, or the drinking-water contraption in the fridge door, or maybe she'd think it's a "screen" - the colander for washing vegetables or draining pasta, etc.

Lesson: avoid abstract general terms (especially technical computer terms) when a domain-specific word is more commonly understood by people familiar with that context. Thus they can understand the term without mapping it to some more abstract term. In this context, restaurant dining, use restaurant/dining context words like "special diets" or "special menu", or "dietary restrictions". (the submenu that appears containing the "filter terms" can further explain, for example "only show me entrees compatible with this diet:")

Note that by going through this analysis, a more natural mechanism may be better (than "filtering" a single giant list of entrees); instead, several specialized-diet mini-menus can be available. I'll bet that's what many restaurants do with their physical-world paper menus.

Thus right at the top of the navigation, offer those alternative menus, or, if, like many paper menus, items are annotated with icons to classify them as "vegan", "celiac", "kosher", etc, whereever your "key" exists to explain those icons (on paper menus, typically at the bottom of each page or the first page), include navigation choices to go to Special Menus containing only such items.

Improve this answer
1

It is commonly used, but I doubt it it recognised as widely as some other more common icons such as settings (cogs), home, hamburger menu, and so on.

Myself, despite decades of use of tons of software and sites and being quite attentive to UI/UX issues, it always takes me a few seconds to actually match the icon to its meaning. Probably because the shape is often a bit too generic to be actually recognised immediately as a funnel (it's more like "a weird triangle with a bit sticking out", and because funnel and filtering are not quite synonymous for me (a "real" funnel does not filter anything).

Whatever the icon, you'll need to add some text. Note that Preferences alone might be ambiguous as well. Many people may take that to be generic software preferences, such as colours, presentation (list or pictures), size of text or pictures, number of items per page, and the like.

In terms of text, I see two options:

  • A more explicit Dietary preferences, though this is applicable more for things like "vegetarian", "vegan", "kosher", "allergies"

  • Filters, which works for the above, but could also be used to include more generic things.

In both cases, the filter icon:

Source

would seem like a more appropriate fit.

Improve this answer
5
  • Hamburger menu would be amusing given the context
    – Caius Jard
    Oct 3, 2020 at 9:20
  • I'm with you until your suggestion of a slider icon, which immediately implies continuous ranges rather than "yes/no" questions - paired with the word "preferences", I might expect it to be about ranking a series of options and hoping to get my first choice, or changing the order of results in some kind of "inspirational search", rather than hiding things I'm allergic to or go against my religious/ethical beliefs.
    – IMSoP
    Oct 4, 2020 at 13:51
  • That icon looks like 3 people with big hats riding bicycles. At least the funnel looks like a funnel.
    – PhillipW
    Oct 4, 2020 at 21:36
  • @PhillipW Touché, sir! For some reason, it seems more obvious to me than the funnel-as-a-filter ever has been, even though I've probably seen it less often and only more recently. Interesting.
    – jcaron
    Oct 4, 2020 at 21:54
  • Its in the zone of visual illusions as your brain can "make sense of it" lots of different ways. These will always be swayed by past experience: in my case its influenced by the meme of 'Mexicans doing x,y,z' which people used to play when I was a kid: teflpedia.com/Visual_puzzle
    – PhillipW
    Oct 5, 2020 at 9:10

Your Answer

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

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