Design concepts for the graph layout view

[utunga]

Summary

The 'purpose' of the graph view is (a) to let people feel included, acknowledged and feel like how they sit within the overall community. It also, (b) let's people see the overall layout of a community who is who and what rough groups exist within that. A third (c) use case is for people to be able to interact with the graph and use it as a jumping off point to get more information about edges (acknowledgements), nodes (people) or (maybe) hashtags. Hashtags may or may not appear as secondary elements on the graph.

We have some design concepts already (see below) but nothing finalized yet. Before this can be built we need to settle on a final design.

NB See here for more background context on this project
https://utunga216.medium.com/the-together-project-8884e7521e35

Acceptance criteria

This is a design concept only so acceptance criteria are not so important but fwiw..

• Capture existing ideas from the group and from end users from the xchc user information guidance group
• Design concepts on the figma board
• Discussion with the group

Prior work

See Figma for latest/full mocks but here'a couple concepts

From @karenkun

From @courtbee

The circular images demo from vis.js. This is the libary that we have used to implement the graph layout in the current app, so using it's capabilities woudl be nice - but don't let yourself be too constrained.

Discussion

One idea that has been discussed (but not mocked up) is the idea that if you click on a node or edge the mobile app view splits into two - with graph on one half and an info box in the other half. The info box can provide basic information - eg name profile etc for a user or a quick summary for an edge.. and then the user can click on various elements in that info box to jump out of the graph view entirely and to the user, acknowledgement or hashtag in question.

This would allow them to stay 'within' the graph view and navigate around a bit. To potentially 'close' the info box if they prefer the overall view, and then to know they are jumping fully away from the graph when they click for more information. It also reflects that jumping in and out of the graph is going to be a relatively expensive operation for a mobile app so it will have a noticeable delay like 200ms or more before the page loads so it won't be something we can expect to do in a very snappy snappy way.

We may also want the graph view to be available (in somewhat anonymized form?) on the web - not just in the mobile app.

It may also be useful to be able to click a node and have the graph arrange around that node - using the simple force-layout algorithm so, for instance, a user can see themselves at the center and how things arrange around them. Or they can click a hashtag, and a bit like people sitting around a campfire see all the people that interact with that hashtag around that particular hashtag.