At Splash, I was working on an app that allowed you to capture and share 360° photos. To create a “splash”, you would open the in-app camera, start the recording with the tap of a button and rotate around yourself. While doing that, the app would capture many photos per second, which it would then stitch together in their respective positions on a sphere to create a 360° photo of your surroundings.
After capturing, you had the option to share your creation with followers, who then had the ability to like or comment on specific parts of the 360° photo.
When I joined the company, the result of many likes and comments looked like this:
The Problem
Since likes and comments were laid on top of the content and users were given no limits in the amount of feedback they could give, popular creations were quickly covered up in a forest of hearts and texts with no way to see the content they were referring to.
Finding the solution
The first idea that came up was to give each user a maximum amount of likes and comments per "splash". But very quickly it became clear that this was creating more questions, rather than solving the problem we had.
If I can comment on specific areas of a photo, why can I only do so X times?
How do we communicate to the user when that limit is reached?
Does this actually solve the issue we have?
Another idea was to add controls to the UI that allowed users to toggle likes and comments off, so that they could see what was behind. The issue with that was that users would never be able to see the content and the things people said about it at the same time.
It wasn’t about how much freedom or control we gave users. It was about how the information was displayed.
So how do you display context information that refers to a specific area in a piece of content that - because of its spherical shape - is infinitely scrollable in any direction, all without completely covering the actual content?
As it turns out, maps applications have dealt with the exact same issue for years.
When choosing a point of interest (POI) on a map, rather than displaying things like directions, opening times and reviews on the map itself, they open a panel at the bottom of the screen that contains all this information.
The advantage: Since the POI on the map itself it not covered, it is always clear to which part of the map a certain piece of information is referring to. In addition to that, users can choose to get more information in exchange for context by expanding the panel.
What we had to do was take this exact mechanic and apply it to the context of commenting on a picture.
This is what I came up with.
I seperated the view into two pieces. In the bottom half, you could see a list of comments that people are used to see from other social media apps. Because each comment was referring to a certain part of the 360° photo, one comment would always be the “selected“ one. The upper half of the display shows the part of the photo the selected comment was referring to.
With this solution, users would have the ability to select a comment and see the photo scroll to the respective part of the 360° photo the comment was directed at, without covering up the content.
I prototyped the interactions of selecting a comment, as well as composing a new one, with Framer. You can see the results in the GIF below.
