UI Options for Displaying Connected Apps / Managing App Connections

Question

I am searching hard to find a nice way to show connections/interactions between various individual apps within an app store.

This is important for two reasons:

1. Certain apps exist mainly to provide services for other apps (i.e. Google Cloud Print)
2. Users need a way to understand and manage the flow of information from one app to another (managing settings centrally versus within each app).

Google Cloud Print is a good example here, since it is compatible with and enables printing from certain apps only. A top-down view of which apps' Print functions work with it would be useful.

And ideally, I'd take these connections further to show personalized app compatibility for each user at the point of purchase. When I go to download Google Cloud Print, I wouldn't have to read through the long list of supported apps in the description, but instead be able to quickly see which of the apps I've already downloaded work with Google Cloud Print.

Any thoughts on UI patterns suitable for depicting these connections? I've been hunting for examples but can't seem to find anything that does this at all, let alone simply and elegantly.

Any connection- or compatibility- related patterns that might even remotely suit this are of interest - so far I've had the most traction with some patterns from LinkedIn - so I'm happy to cast a wide net and then try to adapt/evolve patterns to suit these scenarios.

Answer 1

A possibility is to have some kind of indicator that tells the user they already have apps installed that are compatible with the app they're looking at.

Clicking the indicator will present a boxed/scrollable list of the actual installed applications. Placing a purchase button for the app at the end of this list would be a good idea, or at least close by. The knowledge that the app works with some existing apps out of the box may help direct the user towards positive purchase decision. Compatibility is a great selling point, so it could be beneficial that this indicator is one of the first few things they see.

The presented information could look something like the below on the current Google Play store. It's actually the desktop version of Play and the UI is kind of Windows mobile OS-ish but you get the idea.

You would just want to make sure that the scrollable list is not bigger than the device viewport height, as nobody likes getting stuck in scroll inception (where you want to scroll the page, but have get to the bottom or top of a child scroll box first). Especially on a purchase page.

Sorry not sure if this particular design has a pattern name or not.

Answer 2

I think there are some nice ideas/concepts/patterns presented here that you might want to take a look at and see if you feel inspired.

The process I would take to designing the display is based on the content that you want to display, and the relationship between the individual elements. Lets say that in general the dependencies are very flat leveled (i.e. no deep or chained dependencies) then something like a simple table or graph should be sufficient. But if there is complex dependencies, then I suggest just sketching out some examples and joining them together to see what type of overall shape develops.

In trying to present the entirety of the information, you also have to make sure that the content doesn't become so difficult to interpret that it is unusable. You might even just consider a simple search and return style display of information if there are many apps and you just want users to focus on the information that they want. It is part of the debate that revolves around the distinction between search and browse so I won't get into it here. If you want to provide some quick sketches of the relationships I can point you to some useful UI designs.