This repository has been archived by the owner. It is now read-only.

Implement UX for scrolling in Home View #372

Open
antlam opened this Issue Nov 30, 2016 · 9 comments

Comments

Projects
None yet
3 participants
@antlam

antlam commented Nov 30, 2016

As the cards get longer we need to account for how our content scales, how a user swipes to the next card, and how our UI adjusts.

@antlam antlam added the UX label Nov 30, 2016

@antlam antlam self-assigned this Nov 30, 2016

@antlam

This comment has been minimized.

Show comment
Hide comment
@antlam

antlam Dec 1, 2016

home - scrolled a bay

A quick WIP to show what's in scope here.

  • Map View button animates out (animation TBD)
  • Name, Categories, and URL stays fixed in position as soon as the card UI hits 16px margin from the top
  • Header image carousel scrolls off screen (like we have now)
  • Background image fills remaining space
  • maintain 16px margins from bottom of the screen
  • maintain 24px margin under URL
  • faint fade to white as content scrolls "under" the Name, categories, and URL section.

antlam commented Dec 1, 2016

home - scrolled a bay

A quick WIP to show what's in scope here.

  • Map View button animates out (animation TBD)
  • Name, Categories, and URL stays fixed in position as soon as the card UI hits 16px margin from the top
  • Header image carousel scrolls off screen (like we have now)
  • Background image fills remaining space
  • maintain 16px margins from bottom of the screen
  • maintain 24px margin under URL
  • faint fade to white as content scrolls "under" the Name, categories, and URL section.
@brampitoyo

This comment has been minimized.

Show comment
Hide comment
@brampitoyo

brampitoyo Dec 5, 2016

Collaborator

I’ve mocked up the scrolling animations in slow motion – so you can see how each element animates – and divided it into two separate parts.

Part 1: initial state, until the card UI hits 16 margin from the top

I’ve mocked up two possible Map View button animations:

  1. Scrolls up + fades out
  2. Scales down + fades out

Part 2: Content scrolls “under” the top card section, until the end of content

Content scrolling animation.

Thoughts?

Collaborator

brampitoyo commented Dec 5, 2016

I’ve mocked up the scrolling animations in slow motion – so you can see how each element animates – and divided it into two separate parts.

Part 1: initial state, until the card UI hits 16 margin from the top

I’ve mocked up two possible Map View button animations:

  1. Scrolls up + fades out
  2. Scales down + fades out

Part 2: Content scrolls “under” the top card section, until the end of content

Content scrolling animation.

Thoughts?

@antlam

This comment has been minimized.

Show comment
Hide comment
@antlam

antlam Dec 12, 2016

Scales down + fades out

Nice! that's what I was thinking. But I pictured it with some more "bounce". Perhaps useful to see it at full speed?

Content scrolling animation.

Nice! looks good to me

antlam commented Dec 12, 2016

Scales down + fades out

Nice! that's what I was thinking. But I pictured it with some more "bounce". Perhaps useful to see it at full speed?

Content scrolling animation.

Nice! looks good to me

@mcomella

This comment has been minimized.

Show comment
Hide comment
@mcomella

mcomella Mar 6, 2017

Member

Before I realized this was an issue, (in my free time) I started cleaning up the code and adding the scrolling inside the card so the card never moves while scrolling:
simulator screen shot mar 4 2017 18 02 27

Notably, this conflicts with:

Header image carousel scrolls off screen (like we have now)

@antlam, @brampitoyo Is my implementation something that would be desired? Notes:

  • In my implementation, it's straightforward to add scrolling the content under the Title/category/url header
  • My implementation greatly simplifies the code and is done-ish now. It'd require extra work (and I'm concerned it'd be really tricky) to do the implementation in this bug (as far as I understand it, move the card under the user's finger, stop it when it hits the top of the screen, then continue scrolling the bottom of the card up, leaving the title/category/url header in place).
    • An unresolved UX issue: how does a scrolled card animate out when we pan horizontally to the next card?
  • There are a few remaining UX issues with my implementation:
    • It's not always clear that a user can scroll inside the card
    • When the bottom-most description view (Yelp) is expanded, it expands outside the visible card and, since it's not clear a user can scroll, it's unclear the description has even expanded.

I can get you a build, if you'd like!

Member

mcomella commented Mar 6, 2017

Before I realized this was an issue, (in my free time) I started cleaning up the code and adding the scrolling inside the card so the card never moves while scrolling:
simulator screen shot mar 4 2017 18 02 27

Notably, this conflicts with:

Header image carousel scrolls off screen (like we have now)

@antlam, @brampitoyo Is my implementation something that would be desired? Notes:

  • In my implementation, it's straightforward to add scrolling the content under the Title/category/url header
  • My implementation greatly simplifies the code and is done-ish now. It'd require extra work (and I'm concerned it'd be really tricky) to do the implementation in this bug (as far as I understand it, move the card under the user's finger, stop it when it hits the top of the screen, then continue scrolling the bottom of the card up, leaving the title/category/url header in place).
    • An unresolved UX issue: how does a scrolled card animate out when we pan horizontally to the next card?
  • There are a few remaining UX issues with my implementation:
    • It's not always clear that a user can scroll inside the card
    • When the bottom-most description view (Yelp) is expanded, it expands outside the visible card and, since it's not clear a user can scroll, it's unclear the description has even expanded.

I can get you a build, if you'd like!

@antlam

This comment has been minimized.

Show comment
Hide comment
@antlam

antlam Mar 6, 2017

An unresolved UX issue: how does a scrolled card animate out when we pan horizontally to the next card?
It's not always clear that a user can scroll inside the card
When the bottom-most description view (Yelp) is expanded, it expands outside the visible card and, since it's not clear a user can scroll, it's unclear the description has even expanded.

Leaving this one to @brampitoyo ;)

I can get you a build, if you'd like!

Yes please! Feel free to just send a one over to us. In general, always great to get things on device.

antlam commented Mar 6, 2017

An unresolved UX issue: how does a scrolled card animate out when we pan horizontally to the next card?
It's not always clear that a user can scroll inside the card
When the bottom-most description view (Yelp) is expanded, it expands outside the visible card and, since it's not clear a user can scroll, it's unclear the description has even expanded.

Leaving this one to @brampitoyo ;)

I can get you a build, if you'd like!

Yes please! Feel free to just send a one over to us. In general, always great to get things on device.

@antlam antlam assigned brampitoyo and unassigned antlam Mar 6, 2017

@brampitoyo

This comment has been minimized.

Show comment
Hide comment
@brampitoyo

brampitoyo Mar 7, 2017

Collaborator

When the bottom-most description view (Yelp) is expanded, it expands outside the visible card and, since it's not clear a user can scroll, it's unclear the description has even expanded.

In this case, I think it’s a good idea to let card height expand dynamically to follow content height. The idea is that, when the content expands downward beyond the screen, it becomes visually clear that you’re supposed to scroll down to see more.

But you can also argue that this would complicate the code. What do you think?

untitled

Collaborator

brampitoyo commented Mar 7, 2017

When the bottom-most description view (Yelp) is expanded, it expands outside the visible card and, since it's not clear a user can scroll, it's unclear the description has even expanded.

In this case, I think it’s a good idea to let card height expand dynamically to follow content height. The idea is that, when the content expands downward beyond the screen, it becomes visually clear that you’re supposed to scroll down to see more.

But you can also argue that this would complicate the code. What do you think?

untitled

@brampitoyo

This comment has been minimized.

Show comment
Hide comment
@brampitoyo

brampitoyo Mar 7, 2017

Collaborator

@mcomella If we’re going to allow the content to scroll without moving the card itself, what we can do is put a subtle white mask on top and bottom sides of the card.

kona-scroll-i03

An unresolved UX issue: how does a scrolled card animate out when we pan horizontally to the next card?

I would argue we shouldn’t be too smart here. On horizontal scroll, we’ll show the next card but preserve the user’s vertical position on the previous card. If they had scrolled down too much and now want to go back up, they can simply scroll.

Thoughts?

Collaborator

brampitoyo commented Mar 7, 2017

@mcomella If we’re going to allow the content to scroll without moving the card itself, what we can do is put a subtle white mask on top and bottom sides of the card.

kona-scroll-i03

An unresolved UX issue: how does a scrolled card animate out when we pan horizontally to the next card?

I would argue we shouldn’t be too smart here. On horizontal scroll, we’ll show the next card but preserve the user’s vertical position on the previous card. If they had scrolled down too much and now want to go back up, they can simply scroll.

Thoughts?

@mcomella

This comment has been minimized.

Show comment
Hide comment
@mcomella

mcomella Mar 10, 2017

Member

via Slack: antlam preferred the card to scroll to the top of the screen. My response:

I don’t think moving the card while scrolling will be feasible:

  1. It’d take a lot of custom code and I’m not interested in doing it in my free time (sorry!). There are higher priorities during work hours
  2. The custom code is likely to complicate the code, which will make it harder to change other (probably more important) things
  3. It’s a prototype and the design could change so I’m not sure it’s worth investing the time (edited)

Do you want me to pursue it without moving the card to the top of the screen?

I think I can do both of Bram’s suggestions in the bug (move bottom of card off-screen, white mask

Animating any change in size to the card will be hard though (it’d just pop to the new position instead)

And Bram responded:

mcomella Thanks for letting us know about feasibility! I’ll talk to antlam about it shortly and let you know.

@brampitoyo Do you have further thoughts? Should I pursue your two requested changes?

Member

mcomella commented Mar 10, 2017

via Slack: antlam preferred the card to scroll to the top of the screen. My response:

I don’t think moving the card while scrolling will be feasible:

  1. It’d take a lot of custom code and I’m not interested in doing it in my free time (sorry!). There are higher priorities during work hours
  2. The custom code is likely to complicate the code, which will make it harder to change other (probably more important) things
  3. It’s a prototype and the design could change so I’m not sure it’s worth investing the time (edited)

Do you want me to pursue it without moving the card to the top of the screen?

I think I can do both of Bram’s suggestions in the bug (move bottom of card off-screen, white mask

Animating any change in size to the card will be hard though (it’d just pop to the new position instead)

And Bram responded:

mcomella Thanks for letting us know about feasibility! I’ll talk to antlam about it shortly and let you know.

@brampitoyo Do you have further thoughts? Should I pursue your two requested changes?

@mcomella

This comment has been minimized.

Show comment
Hide comment
@mcomella

mcomella Mar 10, 2017

Member

Spoke with antlam on vidyo:

In the current experience, when the user scrolls to read long-form content, we move the photos off-screen because they're no longer important – my experience is a regression from this, where the photos remain on the screen. As such, we don't want to continue pursuing my implementation.

My intention was to simplify the code by re-using ExpandingCardView – we can still do this in the current experience.

To continue to pursue this design, I would recommend first refactoring the carousel layout by separating group layout/transitions from the individual item interactions (use UICollectionView?). Then hopefully it will be simple enough to pursue this solution. Anthony gave great advice at looking at other open source solutions which have done something similar – an example will be a scroll view that affixes new headers as it scrolls.

Member

mcomella commented Mar 10, 2017

Spoke with antlam on vidyo:

In the current experience, when the user scrolls to read long-form content, we move the photos off-screen because they're no longer important – my experience is a regression from this, where the photos remain on the screen. As such, we don't want to continue pursuing my implementation.

My intention was to simplify the code by re-using ExpandingCardView – we can still do this in the current experience.

To continue to pursue this design, I would recommend first refactoring the carousel layout by separating group layout/transitions from the individual item interactions (use UICollectionView?). Then hopefully it will be simple enough to pursue this solution. Anthony gave great advice at looking at other open source solutions which have done something similar – an example will be a scroll view that affixes new headers as it scrolls.

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.