4

I am asked to put together a mockup for search results of business diagram. The typical business diagram looks like this:

business diagram

The entire diagram is in svg, the results must be highlighted to the individual step (i'm thinking of stroking the individual shape).

However, the user may also search for hidden properties (for example: high priority, or functional requirement, etc) that needs to somehow be displayed (perhaps in a chart next to it? I'm not sure what the best way to do it is yet)

I have never seen this done anywhere else on the web. I'm wondering if anyone has any good idea in the best approach for displaying the results, or point me somewhere that has examples of such.

|improve this question
  • This is an interesting UX problem. Would you have to display multiple search results at the same time, or just one at a time? – tohster Jun 8 '15 at 15:11
  • Multiple results will need to be displayed, yes. They may be in the form of multiple subartifacts (individual shapes from the diagram in this case), multiple properties from one artifact (or shape), and even multiple diagrams (with repeat of the previous two conditions). – CleverNode Jun 8 '15 at 15:14
3

This is a UX situation that occurs in many object-oriented or rich visual design programs where a visual objects onscreen have rich metadata. Examples:

  • Computer Aided Design (CAD) for physical objects and systems
  • Interior design (where materials and components may have a lot of metadata)
  • Electrical circuit design
  • Graphical programming languages (LabView, 4GL's, etc)
  • Project management software
  • Building Information Management (BIM)

In these apps, it's common to want to search object properties, but also to show the search results onscreen.

A typical pattern used is to:

  1. Provide a list of search results somewhere because lists can organize results better when the metadata or the object(s) are not visible onscreen. Lists also have lots of other advantages for search results such as readability, scannability, UX navigability, etc.

  2. Allow the user to navigate to 1 result or all results using the visual representation

Here's an illustrative example using a sidebar to accomplish the search and provide a list of results. A callout (dark orange background) allows particular results to also display related metadata:

enter image description here

There are many variations on this basic pattern, which can include:

  • Showing all results visually, instead of selecting one at a time (i.e. just outline all search results in orange and show more infrmation on hover)
  • Showing the search results and also a separate panel for the metadata/properties (rather than a callout)
  • Allowing the user to toggle between list view and schematic view for search results
  • ..etc.

You will need to tailor this approach for your application and users' specific needs, but this pattern should give you a start.

If you want to do more research, I'd suggest getting trial copies of some of the CAD/Design programs above and seeing how search works.

|improve this answer
  • The search panel that you highlight, is currently being used to display all searches of the "bigger" pictures -- all the diagrams in total, since multiple search items is a criteria. Your layout does look very clean though. Another challenge that I didn't mention at the question, is that the search results will return both artifacts (in this case, diagram) and sub artifacts (the individual shapes and arrows), so the decision needs to also be made whether there should be a separation of two, making the layout more messy and choppy. – CleverNode Jun 9 '15 at 14:39
  • @novina the 'modern' approach is to have a single search that returns both documents and content (in your case artifacts and sub-artifacts), and provide filters for users to narrow search results because the alternative of having multiple searches can create some UX work flow ordering issues. But obviously you are best equipped to figure out the right solution for your app because you and the stakeholders know the shape and size of the data best. – tohster Jun 9 '15 at 16:11
  • 1
    you're right. I just reserve the "filters" for the hidden properties. Not that there needs to be a limit, it's just, in this case, I was told properties already go up to 20-40, so the filtering itself is already complicated... so I was trying to eliminate more filtering in the mid-level (the sub artifacts level) – CleverNode Jun 9 '15 at 16:27
1

Sounds like a good application of tagging!

You could have a fixed set of tags that could be applied to each node, then a clickable list of those tags along one side or across the top, which serves as a filter. This could control highlighting for that category of nodes.

Here's a (censored) example of Trello labels being used as tags:

enter image description here

Similarly, tagging your nodes would make it very easy to see what's associated with what. How to display a tag is up to you: color-coded node or outline, badges, or not at all until a filter is activated.

|improve this answer
  • Maybe I'm not understanding you correctly, or you're not understanding me. The diagram structure cannot be changed. This is how it would look like. None of the shapes, arrows can be moved -- the diagram itself shows a complex business flow. The question is, how best to convey to the user that those are the matches. – CleverNode Jun 8 '15 at 18:15
  • Right. I suggested doing this by highlighting a particular node, or like you said, stroking a shape. You said "elsewhere on the web", so I assume this is in a browser. You can load and manipulate an SVG with JavaScript, but implementation is beyond the scope of this site. – wmassingham Jun 8 '15 at 18:56
  • Yes, this is on the browser. But that only solves half the problem. The other problem is to display search properties that's currently hidden. That's the main part of the question. I can always put a list next to the diagram, but it seems like there should be a better way to do it. – CleverNode Jun 8 '15 at 19:25
  • Fixed list, search box (maybe with autocomplete), or hover-menu maybe? I'd prefer the fixed filter list, since it shows you all the possible tags. – wmassingham Jun 8 '15 at 20:06
1

I think perhaps looking at how programs that allow you to create diagrams handles the properties of individual elements will point you in the right direction.

For example, Microsoft Visio, Balsamiq and Gliffy are all programs that allow you to create diagrams by abstracting or hiding the details for creating and displaying the shapes from the user, but also provides a way for you to interact with the data.

Now I am not sure whether the less advanced programs like Balsamiq and Gliffy are searchable, but I think that Visio and perhaps Axure do allow you to search on the diagram elements themselves, so perhaps you will be able to get some idea of whether it fits with what you want to do.

|improve this answer
  • Thanks. I'll look into visio and axure and report back -- however, both visio and axure has messy layout that I'm trying to avoid, so I'm not sure they should serve as examples. – CleverNode Jun 9 '15 at 14:37

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.