Using search box on icon platform pages
We designers use all sorts of websites to get icons and other assets that we can use in our prototypes. For example, materialdesignicons and fontawesome were some of my main resources for collecting icons in vector formats and svg for web use. If I could not find one, I would create it myself. If it doesn’t match the brand, I would make a new set from scratch.
Using these platforms makes things much easier for a designer working with a developer on a web/app project.
It’s an everyday task for a designer. If it’s for a low- or mid- fidelity prototype, it’s good enough.
Why use an icon?
In one of Nielsen’s studies from 2016, tests found that users find a solution 37% faster when using websites if the text is accompanied by an icon. They compared colored text and text with an icon and found that visibility is higher if it also contains an icon.
Harley, 2016 (https://www.nngroup.com/articles/visual-indicators-differentiators/).
Visual identifiers or so-called ‘markers’ such as icons help users to find a solution faster, as they contain differences that can be more easily distinguished from other, similar objects.
The problem
Some time ago, during work, I faced a dilemma regarding icons or visual identifiers for sorting data. I found out that not all users interpret their meaning in the same way and in fact often have problems recognizing these icons.
I’ve done usability tests on this. There does not appear to be a consistent interpretation among users on what the arrows mean. I seem to recall that even each user was not consistent, thinking the arrow down meant ascending in one case and descending in another.
(https://stackoverflow.com/questions/338166/which-direction-should-the-arrows-point-in-a-sorted-table)
Sorting data in lists and tables
The classic way of sorting or data sorting, which we use in the development of applications and websites, includes sorting according to the ascending/descending system.
Whereas increasing means increasing in size or importance.
And descending means moving or sloping downwards.
As a result, it is logical to conclude that increasing will mean the way up, and decreasing will mean the way down, which can be clearly illustrated with directional arrows:
↑ increasing ↓ decreasing
So, for numbers, ascending means sorting from 0-9 (from smallest to largest), and for alphabetic sorting, from A-Z (alphabetical). In the case of data that contains numbers and letters, when sorting in ascending order, these are sorted first by number and only then by letter.
With dates, the matter is a little more complex, since the higher year means the one closer to the present, and therefore the values are sorted from the newest to the oldest; first we look at the year, then the month and finally the day (depending on the continent).
Is ascending up or down? An arrow pointing up usually means larger or getting larger, so that should be used for Ascending order. An arrow pointing downwards usually means something is smaller or getting smaller and it should be used for Descending order.(https://stackoverflow.com/questions/338166/which-direction-should-the-arrows-point-in-a-sorted-table)
We often use arrow icons to visually illustrate the sorting direction. Of course, there are many other variations of icons appearing on the Internet.
Examples of sorting icons
Let’s take for example the rising icon, which, in addition to an arrow, also contains a series of lines of different widths strung vertically.
On materialdesignicons.com (currently pictogrammers.com), they put an arrow to the right of the lines for both icons (ascending and descending). In both sorts, they kept the direction of the bars and just reversed the direction of arrows. What’s interesting is that they used a down arrow for the ascending icon (from their search results) and an up arrow for the descending icon (from their search results). So the opposite of what we found earlier. If you want to make something bigger, you build more from the bottom to top, right? But on the other hand, the logic here would be that things on the web start at the top and continue to the bottom.
At fontawesome.com they offered two solutions:
- In the first solution they used the identical solution as materialdesignicons.com.
- In the second solution (sort search), they used the up arrow for the ascending icon and the down arrow for the descending one. In this solution, of course, it is necessary to reverse the direction of increasing the length of the lines.
The solution
In view of the above, it is naturally logical to conclude that the best solution is the last one – i.e. the one that uses an up arrow for an ascending and a down arrow for a descending one.
But is this really the best solution?
At this point we come to a conflict, as the reading direction is always from left to right and from top to bottom. The chosen solution forces us to read or we recognize the icon from the bottom-up direction.
For me the down pointing arrow/triangle should represent the way I usually read things (from top to bottom – from a to z) and the up pointing arrow is backwards from the way I read things (from z to a).(https://stackoverflow.com/questions/338166/which-direction-should-the-arrows-point-in-a-sorted-table)
So which solution is more appropriate?
It is better to ask yourself which combination of solutions is the most appropriate and in what context are the icons going to be used.
The first step to a solution would naturally be to check how individual solutions are recognized by users. For this purpose, a prototype of several different solutions can be created and the recognition of icons can be tested for individual or even variant cases according to the A/B testing system of different solutions.
1. First of all, I would do a quick test of intuitiveness on the users, namely by presenting them with images of icons. You should tell yourself what each of the icons means.
2. In the second step, I would create prototypes of solutions based on actual cases and determine which solutions take the least amount of time and user errors.
Within the process of finding a solution, I would use the technique of usability testing to find out how the user actually understands and uses the sort icons in a given context and combine it with the ‘think-aloud’ technique to obtain as much information as possible.
In the case of a real-life case study, I would like to convince the user that his interactions with the web or mobile solution are being recorded. Thus, they could be identified and classified for further research.
Conclusion
The most appropriate solution is the one where users correctly recognized the icon the fastest. In any case, the conflict can always be avoided by using simpler icons, such as just an arrow without other graphic elements. Less is more, they say, and when it comes to icon recognition, the most unambiguous path is definitely the best.
2023 october update!
While stumbling upon this case study that I did a while ago, some things changed on both comparing websites with icons. Materialdesignicons.com became Pictogrammers.com and Fontawesome.com got a new look – a redesigned website with a new search result algorithm.
Not much has changed, though. Except one thing – when you now type ‘ascending’ or ‘descending’ in the fontawesome’s search box, you get some basic sorting icons results. But if you search by keywords like ‘arrow’ or ‘sort’, you get quite an amount of results. And the labeling of the icons is not defined by some (un)common practice, it’s just labeled with a word ‘arrow’ if an arrow is visible, with a label of in which side it’s directing (up or down) and if it starts with the wide or short part on top.
So they named the icons and show search results based by what the icons represent in general, but left the decision of accurately choosing the icons (ascending/descending) to the user. That way they don’t get to decide about best practices, but just offer all available alternatives for designers.