Heirarchical Categories
Heirarchical categories are a common data type to encouter on the web. For example on a jobs posting website you often see options for searching by job category and location.
Often the relevance of search results to a user follows the structure of these categories. I might be particularly keen on UX engineering positions, but I also might be interested in UX design or research which are neighboring categories in the job type heirarchy. On the other hand I'm probably not at all interested in marketing positions, a distant category in the job type heirarchy.
Usually these fields are represented by drop-down menus, which do not reflect the nested structure of the values. An alternate representation I thought of is a series of stacked chips.
Here's an implementation of a job listing site with chip filters for location and job category.
Location
Job Type
Senior Software Engineer
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ligula elit, dapibus a justo sed, finibus ornare metus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nunc consequat aliquam pulvinar. Quisque eu ex mi. Sed suscipit nisi ac imperdiet scelerisque. Sed facilisis mauris purus, ultrices dignissim ex facilisis quis. Aenean vel lectus nunc.
US
Remote
Software Engineering
Backend
UX Engineer, Payments
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ligula elit, dapibus a justo sed, finibus ornare metus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nunc consequat aliquam pulvinar. Quisque eu ex mi.
Europe
Germany
Berlin
User Experience
Eng
Lead Copywriter
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ligula elit, dapibus a justo sed, finibus ornare metus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nunc consequat aliquam pulvinar. Quisque eu ex mi. Sed suscipit nisi ac imperdiet scelerisque.
US
California
San Diego
Marketing
Copywriting
UX Research Program Manager
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ligula elit, dapibus a justo sed, finibus ornare metus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nunc consequat aliquam pulvinar. Quisque eu ex mi. Sed suscipit nisi ac imperdiet scelerisque. Sed facilisis mauris purus, ultrices dignissim ex facilisis quis.
US
Washington
Seattle
User Experience
Research
UX Researcher (new grad)
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ligula elit, dapibus a justo sed, finibus ornare metus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nunc consequat aliquam pulvinar. Quisque eu ex mi. Sed suscipit nisi ac imperdiet scelerisque.
US
Washington
Seattle
User Experience
Research
UX Researcher II
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ligula elit, dapibus a justo sed, finibus ornare metus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nunc consequat aliquam pulvinar. Quisque eu ex mi.
US
Washington
Seattle
User Experience
Research
Software Engineer II, Frontend
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ligula elit, dapibus a justo sed, finibus ornare metus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nunc consequat aliquam pulvinar. Quisque eu ex mi. Sed suscipit nisi ac imperdiet scelerisque.
US
California
San Francisco
Software Engineering
Frontend
Infrastructure Software Engineer
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ligula elit, dapibus a justo sed, finibus ornare metus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nunc consequat aliquam pulvinar. Quisque eu ex mi. Sed suscipit nisi ac imperdiet scelerisque.
US
California
San Francisco
Software Engineering
Infra
Site Reliability Engineer
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ligula elit, dapibus a justo sed, finibus ornare metus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nunc consequat aliquam pulvinar. Quisque eu ex mi. Sed suscipit nisi ac imperdiet scelerisque. Sed facilisis mauris purus, ultrices dignissim ex facilisis quis.
Europe
Germany
Hamburg
Software Engineering
SRE
Senior Site Reliability Engineer
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ligula elit, dapibus a justo sed, finibus ornare metus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nunc consequat aliquam pulvinar. Quisque eu ex mi. Sed suscipit nisi ac imperdiet scelerisque. Sed facilisis mauris purus, ultrices dignissim ex facilisis quis. Aenean vel lectus nunc.
Europe
Germany
Hamburg
Software Engineering
SRE
Social Media Manager
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ligula elit, dapibus a justo sed, finibus ornare metus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nunc consequat aliquam pulvinar. Quisque eu ex mi. Sed suscipit nisi ac imperdiet scelerisque.
Europe
UK
London
Marketing
Social Media
Now remember the user from above. As a second example imagine a user lives in Berlin and would like to find a new job there, but is open to relocacting within Germany. I think this system allows both these users to browse results for their preferences more efficiently and intuitively than a flat drop-down would.