[EPIC] [RFC] Front-end user interface discussion

[echo6ix]

Compilation of UI UX related suggestions

• Clean, simple, and functional design
• Tags multi column list
• Tags thumbnail view
• Tags alphabetical side panel list
• Scene cards thumbnail overlays
• Scene cards custom thumbnail (let user upload thumbnail or select timestamp from scene)
• Performer page UI paradigm from Performer profile page UI enhancements #124
• Performer page side panel alphabetical performer list from [UI Request] Side panel alphabetical performer list #118
• Performer page performer tags and UI implementation from Performer tags #120
• Channels UI paradigm (aka parent and child studios, also including DVD collections as channels) from [Feature] Parent studios #115
• Image gallery UI paradigm from [Epic] Galleries gridview and other gallery enhancements #123
• Adaptive interface from [request] adapative interface #87 and Mobile view for stash UI #192
• Infinite scrolling from [Feature] Implement ajax load/infinite scroll pagination functionality #47 and Mobile view for stash UI #192

Clean, simple, and functional design

TLDR Lets not recreate the wheel for a clean, simple, and functional UI UX. We can take inspiration from sites like xHamster, PornHub, vPorn, etc.

Tags multi column list

Using a single column list is a poor use of space on any viewport for the default tag list view. A mutli-column flexbox list is probably the best use of space ala this xHamster tag page layout.

Tags thumbnail view

Re: #5 Thumbnails view could be inspired by Pornhubs concept found here. Where the list of tags would be on a left side bar and the thumbnails populate the majority of the viewport.

It's important to notice how the sites adapt to different sized viewports. For example, thumbnail view on a mobile viewport and grid view on a mobile viewport.

Scene cards thumbnail overlays

When scrolling through video thumbnails [in scene view] both sites utilize the thumbnail div to display specs. I think this is a good use of space that reduces clutter. For example something like this...

[Leopere]

I am almost even partial to Beeg.com because it's nice and sleek with its JIT loading and all of that but whatever we do we should aim for WCAG 2.0 and also potentially Material.IO design principals. If I can nudge things in and the specific direction it would be ideal to do this.

[iKeats]

Yo guys, as said on discord I made you a couple mockups of what I think an updated interface for performers should look like. Imho the performers and studios page are the core of a "collection" and the same edits could be replicated for the "studios" section.

Just a note, I updated the "performers in the scenes" look too, imho clicking on any of them should take the users directly to the performer page instead of linking to a filter on the main scene page. The thumbnail is a nice touch but totally optional.

[iKeats]

Yo folks. Here another mock-up, this time for the player interface. As of now it's seriusly cumbersome to navigate and to edit. Let me know if you like it and if it's doable. I think it is since I mainly just moved around stuff. The only bit I didn't put in are the markers. I don't use them cos they are a pain in the ass to insert manually but I think they could be put below the timebar like PornHub does.

[iKeats]

Food for thoughts: another improvement for the STUDIOS section could be to add a tab with the full list of performers that have scenes with the studio itself. Clicking on any of the models could link to the scenes tab of the updated performer page with a pre-applied filter that displays only the scenes from the studio you came from originally.

[echo6ix]

I think the interface has to be able to also look good and be functional on smaller viewports also. Not sure how well that is going to translate to something like a mobile device. Also for scenes with more than 2 performers the details area is going to get pretty crowded.

I strongly suspect the best approach to the interface is to imitate Pornhub and xHamster and then tweak it from there. They already have a clean interface that also works well on small viewports and mobile devices.

[echo6ix]

Here's a concept for the Grid version of the Scene page, obviously ripped off xhamster.

Summary
Addition of a side bar to the left with filter/sorting shortcut hotlinks and tag list.

Filter/sorting shotcut hotlinks
I found I kept repeating the same plenitude of mouse clicks to sort and/or filter the same things often. Newest videos (created at and sort by descending), Top videos (filter by rating), and Unrated videos (filter by unrated videos).

The glyphs I used for the shortcuts are from Font Awesome, an open source vector icon tooklit for the web.

Tag list
Displays a list of the tags in alphabetical order. Clicking a tag would navigate to /scenes?c={"type":"tags","value":[{"id..........

Tag list filter
The user is able to type strings in the input area to filter the displayed list of tags in real-time similar to the search input form on the same page.

Settings > Interface > Scene / Grid View
Include a toggle to enable or disable the side bar.

Mobile mode
When the viewport dimensions are a certain size that you determine is a mobile device I would use CSS3 like @media only screen and (max-device-width: 480px) { } or whatever is appropriate to hide the side bar altogether so it doesn't use valuable screen real estate.

[Leopere]

This is marked as Wontfix as it won't be done directly and likely needs broken into smaller steps discussion can be had here but we won't be addressing this directly.

[Leopere]

@echo6ix are there any updates that you've seen that could tick off any further boxes in this issue?

[Cromseth]

Does it makes sense to have an extra tab to studio page called "Performers" and index there the performers that has scenes/movies/galleries for that studio in your DB?? It could be useful to have the performers indexed (and not just scenes... maybe "orphan" galleries too?) to see which performers do you have scenes from each studio.

Just thinking out loud...

[Cromseth]

URL links in scene page should open the link in a "new" page. Now it redirects and you "lose" the Stash page.

[echo6ix]

Just having fun playing with wireframe here...

Scene List View

It's not that usable IMO. However, it can be. Inspired by this clean data grid UI. I created this.

• ability to add/remove columns
• columns can be sorted in ascending/descending order
• do not show scene covers (they're too big and break the clean layout), rather display an icon if a scene cover exists.
  • hovering over icon displays the scene cover
• collapsible scene edit side column per scene video page
  • depending on how many items are selected (with the checkbox), this can edit one scene or scenes in bulk
• Do not use chips in the table/data grid, it will add clutter. Separate multi-value fields values by a ; and truncate text that exceeds the width of a column with ...

EDIT: Related to #517

[echo6ix]

Adding these old scene details mock-up images I had posted to Discord a while ago where they're easier to find.

[develanon]

Can we take another note from the big providers mentioned in the OP and prevent device displays from going to sleep while viewing content? Stash is legitimately the only content viewer that does not seem to keep displays awake. I'm sure I'm not the only one to experience this. I also reported this issue as a bug, but this thread seems like a good place to bring it up.

[echo6ix]

Old thread. Most tasks completed. The rest aren't relevant anymore.