3

I am trying to redesign a filter menu for a link analysis webpage. The page displays different kind of links as icons and arrow in between each link to describe the connection between each link. There are 3 main categories of links and several sub categories. There are also several different connection types.

I want to redesign the current filter page as it is very messy. It is a sidebar containing a mixture of dropdowns, accordions and slide out menus. I want something simpler and more consistent.

Current Diagram (simplified):

Category 1
-- Subcategory 1
----Connection Type 1
----------- Connection Direction 1
----------- Connection Direction 2
----Connection Type 2
----------- Connection Direction 1
----------- Connection Direction 2
-- Subcategory 2
----Connection Type 1
----------- Connection Direction 1
----------- Connection Direction 2
----Connection Type 2
----------- Connection Direction 1
----------- Connection Direction 2
-- Subcategory 3
----Connection Type 1
----------- Connection Direction 1
----------- Connection Direction 2
----Connection Type 2
----------- Connection Direction 1
----------- Connection Direction 2

Category 2
-- Subcategory 4
----Connection Type 3
----------- Connection Direction 3
----------- Connection Direction 4
----Connection Type 4
----------- Connection Direction 3
----------- Connection Direction 4
-- Subcategory 5
----Connection Type 3
----------- Connection Direction 3
----------- Connection Direction 4
----Connection Type 4
----------- Connection Direction 3
----------- Connection Direction 4
-- Subcategory 6
----Connection Type 3
----------- Connection Direction 3
----------- Connection Direction 4
----Connection Type 4
----------- Connection Direction 3
----------- Connection Direction 4

Category 3
-- Subcategory 7
----Connection Type 5
----------- Connection Direction 5
----------- Connection Direction 6
-- Subcategory 8
----Connection Type 5
----------- Connection Direction 5
----------- Connection Direction 6
-- Subcategory 9
----Connection Type 5
----------- Connection Direction 5
----------- Connection Direction 6

Each category is different and each subcategory is different, but the connection types and connection directions are the same for each category (hence the numbers above).

Filtering is allowed by any category, subcategory connection direction and connection type. They can all be selected, all deselected or any combination in between.

Because there are so many different options I am having a hard time trying to get it organised simply.

Does anyone have any ideas of how to allow the user to filter all the different options, and showing all the selected filters clearly?

Example based on: http://www.infoglide.com/wp-content/uploads/2012/09/sla-visual-example.jpg

enter image description here

Gender
-- Men
---- Lending
-------- To
-------- From
---- Belonging
-------- To
-------- From
-- Women
---- Lending
-------- To
-------- From
---- Belonging
-------- To
-------- From

Phone
-- House
---- Call
-------- Incoming
-------- Outgoing
-- Cell
---- Call
-------- Incoming
-------- Outgoing

Document
-- Report
---- Exchanged
-------- Sender
-------- Recipient
---- Seen
-------- Sender
-------- Recipient
-- Cheque
---- Exchanged
-------- Sender
-------- Recipient
---- Seen
-------- Sender
-------- Recipient

So far example a person might want to only see 'men' 'lending' 'to' and 'cheques' 'seen' (by the) 'recipient', so will filter the rest out.

1

I think a tree view design may be one of the solution. I've recently came across a similar issue and solved it through having a tree view design. It is as simple as having folder structures in your windows pc. I'd look at it as a parent and child relationship. Here is an example I found. Representing a tree view and introducing a search as well as multi select. Hope this helps.

enter image description here

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.