[Design] UI & UX for Media Display in feed

Open setch-l opened this issue 1 year ago • 1 comments

We need to improve the way non-text media appears in the feed. This is the first of two pieces of design work related to content in the feed. For now we will NOT prioritize auto-playing vidoes in the feed or animated gifs. During implementation we'll work on the loading issues.

AC-

Carousel image display
Video Display
Click to play video in feed
Animated gifs in feed

Apr 10 '24 14:04 setch-l

UX Research

As part of this ticket I did a Study on media playback in multiple social apps where, for:

I analyzed how they display:

single media items, especially with extreme aspect ratios to test their viewport cropping limits
and multiple media items to see how they're organized

and took a few notes of what I think are their strengths and weaknesses.

Here's a preview of what I tested on each app (in this case, Bluesky):

UX Design

You can find all of the designs below in this Figma page.

Principles for media display in Nos

Based on my findings of what works well and what doesn't in other social apps, I defined 10 principles for media display I want my solution to comply with:

Consistency - The app must display similar content in a similar way using the same patterns.
Affordance - User must be able to understand the media attached to a note just by looking at the preview.
Use of Space - Preview must use all space available within a viewport that is fully visible in the app without having to scroll, for both horizontal and vertical media.
Ease of implementation - The solution must use as much as it can of what is already implemented to save development time.
Optimize for media taken on a phone - Photos and videos taken spontaneously on a phone must look good without having to crop or edit it.
Follow content - If most content in a gallery is vertical, preview should be vertical. If most content is horizontal, preview should be horizontal.
Follow first item - When an equal number of vertical and horizontal items are displayed, the carousel must adopt the aspect ratio of the first item in the gallery.
Simplicity - Solution must consist of very few elements and must work for all possible cases.
No distractions - Avoid background elements like gradients, shadows, gaussian blur that are strange to the original media and which can affect the visual experience.
Allow full visibility - Users must be able to see content in its full size and original aspect ratio by tapping on the preview.

Default aspect ratios of common media

I started by listing the usual media items we will be displaying, along with their aspect ratios:

Horizontal viewport

Then I followed a simple proocess to determine the aspect ratio of a horizontal viewport for our media preview.

Vertical viewport

And the same process to determine the aspect ratio of our vertical viewport

Multiple media items where most are vertical

Applying principle 6) Follow content I determined what would happen when most items in a gallery are vertical (preview is vertical) and how horizontal items are handled in this situation:

Multiple media items where most are horizontal

I applied the same principle 6) Follow content to determine what would happen when most items in a gallery are horizontal (preview is horizontal) and how vertical items are handled in this situation:

Equal number of horizontal and vertical items

As an edge case of the previous cases, by applying principle 7) Follow first item I determined what happens when there's an equal number of horizontal and vertical items:

Visual Design

Single media display

I applied the UX Design above to produce visual representations of the following user flows for single media display:

Example of single media display:

For each case I added a simple schematics diagram on the left, where I show how the first item of the gallery (cover) will behave:

And then a user flow with notes and gestures explaning what the user does to visualize media both inline and in full-screen.

Multiple media display

I designed two alternatives for multiple media galleries:

For each case I started by listing the media items in the gallery:

And then a diagram applying principle 6) Follow content to determine the aspect ratio of the gallery:

Following with the schematics of the gallery preview:

And a visual user flow with notes andgestures of this gallery:

@setch-l Let me know your thoughts on this. I hope it gets us closer to a more solid media display and playback experience.

May 06 '24 14:05 Chardot