Review Page Layout

[Jacob-Griffin]

Expanding on 2 points from the first bout of user testing (#12), this is to capture design ideas for for the final review page.

1. The player buttons

• [x] At the expense of some screen space, the player buttons should all be visible. The current plan is to have the row simply wrap, and span a few lines. While this does mess with the current layout, the current layout probably needs some adjustment anyway

2. The actual viewing (Old idea)

The fact that you can't see both the source and the result at the same time, is actually a use issue, as much as I prefer the sort of full-screen presentation of each card. Not to mention, the "full screen" carousel is just not helpful on vertical screens. Two solutions I'm aware of:

• Just going back to a scrolling layout, as suggested.
  • We could also make the stack have its own contained scrolling, if we wanted to ensure the player buttons are accessible at all times
• Doing a 2-card version of the carousel design. This would make the cards a bit smaller as well, which would give some room for improvement 1, but would require a minimum width

And of course, these are not mutually exclusive. As long as there's a use for both and the space to put the option, we could always let the user pick their preference. I'm going to try doing both, and see if it works out, but just going back to scrolling exclusively is fine

2b. The actual viewing as I'm currently implementing

Another option that I think gives the best of both worlds, is the previous suggestion that though these are all cards, text does not have to be given equal space. I'm considering making something like Gartic Phone's presentation, where it's presented like a phone chat. Text is left aligned in a message bubble (Only taking the space it needs), images are right aligned in a message bubble, and images can be viewed full-screen by clicking on it.

[Jacob-Griffin]

I've made some serious progress on the "Chat box" layout version. It's pretty similar to the old way, but:

1. Its scrolling is isolated so we can make sure the page controls are on screen at all times
2. There's a sensible way to prevent accidental peaking (next/show all controls)
   • There will be scenarios where 'show all' by default should happen, and I can do that (ex. coming from search, stacks you just looked at, maybe even just a toggle)
3. It's more understood as call-response

What I have:

• Isolated scroll area
• Bubbles with the sender and the content of either type
• Text left aligned, images right
• Next button that reveals only the next item, and scrolls down to show it
• Show All button that reveals all items at once
• Page does not scroll, only the content

What's left

• [ ] Finalize styling (I'll wait for user testing)
• [x] Auto show all logic
  • The cases I have working right now are
    1. Saving what part of a stack you've viewed
    2. Show everything when you came from a search result. (Search isn't in yet, but this is a flag I can set going in)
    3. Regular old user set flag. Technically accessible through console, but the actual function is working for if we want to just have the option
• [x] Lightbox+expand image on click
• Plus maybe a few other things I'm not thinking of yet

[Jacob-Griffin]

Last little thing besides style and issues that pop up is the "Return to home" button. It doesn't need to be nearly as prominent, but it should probably be afforded somewhere clear rather than just the user knowing to click on the site icon in the header. It probably shouldn't be in the same line as the chat-box progression buttons, so we'll need to find a different place for it than the bottom of the screen.

Maybe we can have an icon in the header near the theme switcher? Or even like a burger menu in the same spot with a few other options (If we have them)?

[Jacob-Griffin]

As worked on in the user testing issues #17 and #18, the return to home button has been moved to the header. The review page has the full height to expand, short of the player selector. Styling can still be finalized a bit more, but these are minor enhancements. Probably one more bout of user testing to ensure this is ready to go

edit: Due to branch management issues when setting up release channels and such, this already got merged. The older form of review page is still available in the files for now.

[Jacob-Griffin]

This seems to be well received in its current state and doesn't even bear mention anymore. Closing as complete