Graphic Navigation
Graphical navigation is getting more common with apps like Clear and Mailbox using unlabeled gestures to navigate and perform action on different elements of the interface. A lot of people talk about this as a gestural interface, which it is, but it's also interesting that the words and labels have been eliminated from parts of the navigation. That kind of interests me in how you might remove words from other areas of navigation, at least partly as an exercise.
Image Based Filters
Filtering, aka "faceted search", has long been lists of text labels you select narrow to narrow down results. It's a very mechanical way to look at sets of things and is very rigid in the way that it decides things are or aren't part of the group. Good for picking electrical components, bad for picking wall paper.
For more creative exploration, the use of images instead of words seems to fit better somehow. In fact you already see some sites experimenting with color swatches instead of words for their filters. I wanted to explore what filtering would be like if it were only images
There are some obvious drawbacks to the idea:
- Terrible for SEO
- Most thought/tools related to Information Architecture assume text
- Users are a unfamiliar with it
Benefits
- Reduced translation needs (not all symbols are universal though)
- Ability to represent nonspecific concepts
- More fun!
Testing The Idea
I had an opportunity to test out the idea recently on an image gallery for installed products. As i was pursuing it I ran into a lot of trouble sharing the goals specifically because the benefits of using pictures is explaining things that are hard to use words for. I was specifically trying to go past purely representational images and sets to allow for exploration.
Challenges
I tried to use cut out paper thumbnails of the images we wanted to organize for a kind of image based card sort. It helped to discuss the concept but it wasn't so useful: card sorts are good for for rigid organization instead of fluid sorting, and we're still using words to describe groups.
Wireframing was only really helpful for sharing the page layout with developers as you can see below:
Prototype
This idea basically required a working prototype to allow for the really important discussions to happen. I think they break down to 4 major concerns
- What are the concepts for the set or subgroups of filters
- What images/symbols are being used to represent the options in those concepts
- Are the things being filtered assigned to the correct images/symbols
- How do you convey actions without words
All 4 of these are much easier to test on a working prototype that you can iterate quickly with for reasons discussed below.
Concepts
Most filters have a kind of a header that describes the group of options to select from. Without that label, there's a challenge to convey the nature of the set. I found maintaining subject matter within a set and varying graphic styles between sets helped convey the idea. In this case the subject matter was the type of building a product could go into, and one group used flat black icons while another had shades of grey.
One thing I had trouble with in this case was using esoteric or unexpected images for the filtering. I wanted to have people sort the images by something like season or ice cream flavor as something fun, but people were too task focused to enjoy that idea. The closest we got to taking advantage of nebulous image concepts were sets for room shape characteristics: boxy, curvy, horizontal, vertical, etc. Perhaps you could get the weirder concepts to work with larger sets of things that people are struggling with, like stock photography. It's would be great to try that out.
Symbols
The use of images needs even more testing than word when used this way in navigation. If you're trying to convey the idea "retail" do you use a shopping cart, shopping basket, or cash register? There's also the issue unique with how well images are executed to the concept. Images are kind of like words with pronunciation, accent, and tone baked into them. They carry more information than words, and more challenges to present that information correctly for the audience.
Filter Accuracy
There are a lot more judgement calls to make when using images than rigidly defined words. For colors, when exactly does something stop fitting into green and start being blue? Is this the type of room you might find in a hotel or not? The working prototype really helps to create small games of "one of these things is not like the other" for yourself first, and then end users. We're already working with a tenuous concept that users are trying to navigate without those comfortable words, it's so much harder when they start to understand the mental model and something breaks it.
Conveying Interactivity
Usability 101 is that people should be able to look at something and know what it does. People tend to be wary about trying things out when they're unfamiliar. Since this was a new idea for people, we had to build in a lot of affordances. To convey that the images on the left were filters, we used hover states to grey out the images that would be excluded if the filter was selected. We also had some issues when people filtered their way down to zero results, which some users had a very difficult time with. Initially we experimented with displaying a clear all icon when that happened. More user testing showed that filters within most groups were exclusionary so they should replace each other rather than stack up though.
Conclusions
Removing words from navigation adds a lot of extra challenges to a design. Computers are built to be good at working with words and specific instructions. Trying to remove them completely is tricky and requires rethinking through a lot of the lessons that much smarter people have laid out as best practices for organizational systems.
The idea might lend itself even better to larger sets of images being used for more wide open exploration. Maintaining the groups might be hard though. You would need either a small group of taggers with very similar design tastes or a large enough group that statistics would take over.
Fun idea to explore