Relationship widget - Requirements + Mockups

[lustoykov]

For the predefined entities we'd let the backend algorithm generate up to 30 entries that we can display. Relationships and Entities entries would have different color (for instance blue for relationships and green for entities). Whenever Relationship / Entity is clicked, other entries become inactive (like opacity 0.5) and we show table view.

So user can explore each predefined entries.

There would be a search button - whenever clicked we don't open another page, but the widget transforms into search widget that would work similar to the one we merged, but more intuitive. With another button click we can transfer back to the predefined entries.

Do we agree on this first very rough description?

[chaoran-chen]

I had a small idea last evening and am building a small prototype right now. I should be finished by today evening.

[lustoykov]

We could discuss it as mockups instead of spending whole day implementing?

[chaoran-chen]

Yes, you're certainly right. It's just that I'm not sure how to describe it clearly, and I'm finished now. I will post a link to an online demo in few minutes.

[joern-vh]

Sorry guys I have an exam tomorrow, afterwards I will think about it some more, too :)

[martomi]

So here's my idea / proposal for the relationships:

We should have the same top bar as the timeline widget for consistency. It allows users to maximize / minimize the widget and download the data to explore it locally. On the top left of the widget, we show the entity of interest (which would be Mozart in that example).

The rest of the widget is kept very simple and (hopefully) intuitive. We would have a table showing the relations of Mozart to other entities. There could only be about 6-7 interesting relationships if we present the data in the proposed way. The relationships will be shown without any input from the user. They should be predefined and delivered from the backend.

Now to the interesting part: I propose the search function to work just like a filter on the table. A relationships has the following form: Entity - Relation - Entity. The search would search for any string matches inside that tripple and display the results in the same table format. The words that are matching the search string will be highlighted. That means: No separate suggestions for entities, relations, no additional clicking to select entity. Only filtering through text input. Things to consider: Would it be technically possible to perform those searches live? It would be cool if we can be doing the filtering while the user is typing.

Additionally to the search filtering, I propose we make all entries in the table clickable. This should be signaled to the user by on hover change of color as well as pointer mouse and maybe a tooltip hint. After clicking on a particular relation the user will see all relationships for that relation. Example:

Last but not least: Every table entry will have links to check the Source of the information as well as an option to Flag the content for inaccurate information.

Edit: I haven't depicted it, but of course we can still / should have pagination on the bottom of every screen and that would allow users to explore more in the limited space.

Edit2: The current state of the widget is deployed here: http://54.68.164.199:8081/relations-app.html#
and can be used as a reference point. Let us decide if the changes I'm proposing make sense or not.

@vviro your feedback will be appreciated here too!

[lustoykov]

Things to consider: Would it be technically possible to perform those searches live?

No, but it could be quasi-live. Proposal is awesome!

[vviro]

@martomi I like the layout, very good!

One minor suggestion: replace the word Flag with an icon, and maybe Source(s) too. Are they always visible, or maybe only on mouseOver? Could we display several extended snippets from the sources on mouseOver on a list entry? What happens upon a click on an entity or relation? Does a new filter version of the widget (for example, if one clicks on a found relation)?
We also need to see what happens when the user clicks on them. Does a popup open? what's inside? Maybe this is covered by another issue, or maybe this is a good place to discuss this.
Also, is there any kind of "more" link that the user can click in order to get more of what they are seeing in the widget? I'm missing some sort of defined bottom, a closure of the widget from below a little bit.

[martomi]

@vviro Thanks for the feedback. I like the suggestion for replacing text with icons and making them only visible on mouseOver. See below:

This is assuming that the user is currently hovering over the first table entry. I've also added pagination on the bottom to resolve you concern about the undefined bottom part.

What happens upon a click on an entity or relation? As I've already mentioned above, we show all relations that contain the selected / clicked entity / relation.

See what happens if we click the relation "is influenced by":

and here's what would happen if you click on the entity "Johann Sebastian Bach":

Additionally, I did some mockups on what could happen if the user clicks on the flag and sources icons. Take a look below:

The sources view could show a small scrollable window that contains the top N sources of the information with a link for every text snippet.

What do you think?

[gyachdav]

I really like this! Will have to take a closer look when I get back home but his looks like a big step In the right direction. As this is a data exploration tool navigation is key here. Is there a way to trace back my activity? If I clicked on several entities one imafter the other cam would I be able to hit the back button to bring me back to a crossway where i willl decide to go the other way?

Also since this provides a bunch of interesting tidbits, let's help those tidbits go viral by creating a "share" button that will plug into social media.

[lustoykov]

Correct me if I'm wrong, but I think this navigation is only one level deep and for that @martomi has provided a "Back to all Relations" link / button.

Can we start implementing it as it is? Deadline is very soon and the widget is very ambitious.

I like the share via social media suggestion.

[martomi]

The way I have thought is one level deep, yes.

We could easily make it possible to click again and go to a quasi-deeper levels, but without the possibility to go back to a crossway. We would use the same "Go back to all Relations" link. I think this would give us 80% the value for 20% the implementation effort.

Besides, I think It's interesting to explore deeper and going back to a "crossway" would be very rarely used feature that can also be achieved by simply using the search bar. No need for complex state keeping and cumbersome navigation for back / forward.

Another Idea: We can save a list of the last N entities/relations the user explored and suggest them in the search bar. E.g. when the user clicks on the search bar a dropdown would show the latest explored entities/relations. I think this would be perfect for going back as suggested by @gyachdav

The idea for a share button is definitely something interesting to add!

[chaoran-chen]

@martomi, great job! The images are very nice and the design looks quite matured! I have only one question.

A relationships has the following form: Entity - Relation - Entity. The search would search for any string matches inside that tripple and display the results in the same table format.

Does it mean that different first Entity could be displayed? Because in the images, it seems that the first Entity would, e.g., be Wolfgang Amadeus Mozart and cannot be changed..? Because if it is the case, we could not display information where the subject is Mozart's father, Mozart's trip to italy or where someone else has spoken something about Mozart.

And looking at the provided sample data in MusicConnectionMachine/RelationshipsG3#21, I guess that we will have a huge amount of cases like that, where the information is about someone but the someone is not the only subject. Can this widget also present those or would they be useless (at least at the beginning)?

[martomi]

@chaoran-chen You're making a good point. I think they'll be useless at least in the beginning... Yes, we have the first entity fixed to the entity which the page is about and that's the only option that would make sense in my opinion. We can't display any relationships which might have something to do with Mozart, but might as well have nothing to do with him.

In my opinion that would be rather a task for the relationship extraction teams. It should be possible to take your example "Mozart's trip to italy" to generate a proper relationship which we can work with. E.g.:

Mozart - made a trip to - Italy

[gyachdav]

Now that we're more or less clear on how the widget should look like, I would like to suggest an enhancement that would fit the SPA mode.

If you recall from presentation week, we spoke about the Spotify layout and how it would fit this case. I believe that if we have a few entities that connect to our anchor entity we could present the relationships this way:

In this layout the anchor entity (composer, piece, score) may appear at the top left corner represented either by text or an image. The search bar and toolbox buttons will remain as suggested above.

Then the next three sections will be split by relationships in which each section will show a one to many relationship_nam-entities representation in a horizontal layout very much like the spotify and itunes layouts search results. The plus button will enable a scroll among the many entities.

(here is an example of search results on my mac using iTunes)

An event will fire when the mouse rolls over an entity exposing the text for the source and a button that allow a feedback (thumbs-up, plusone or flag). A share on social button should be plugged there as well.

Scrolling through the list of relationships will be enabled through the load more button.

Thoughts?

[vviro]

@gyachdav Yes, this makes sense. I would also add a transposed version of the same, where instead of relationship rows we would have entity rows containing various relations. The entities would be sorted by popularity/importance/interestingness. One would be able to switch between the two modes.

Also, maybe there is a way to graphically highlight a bit more the connection between the anchor entity and the relations? To make it a bit more structured. Just a thought. It is already good, but maybe could be made even more obvious to the eye. Maybe by moving the search bar a bit to the right, so that the eye automatically moves from Mozart downwards to "is influenced by"?

[vviro]

@martomi regarding the reference popup it might be good to point the user to a full page containing the list, since it would probably be quite long for the relations and entities we will be showing. A short preview on mouseOver would also be good in the current form.

[gyachdav]

@martmi any updates on that? What is the next milestone for this feature?

[lustoykov]

@gyachdav we started implementing the small widget first. Have a look #61

[martomi]

Continued in #61