UX Brainstorm Club

1

Hey​ ​everyone:

I’ve​ ​been​ ​observing​ ​some​ ​other​ ​mobile sites​ ​-​ ​and​ ​I’m​ ​interested​ ​to​ ​hear​ ​if​ ​any​ ​veteran​
​Bubblers​ ​can​ ​reverse​ ​engineer​ ​the​ ​following:

The​ ​example​ ​I​ ​will​ ​use​ ​is​ ​facebook’s​ ​mobile​ ​site:​ ​(View​ ​the​ ​site​ ​on​ ​mobile​ ​to​ ​better​ ​understand)

1.​It​ ​appears​ ​they​ ​are​ ​using​ ​something​ ​similar​ ​to​ ​an​ ​"infinite​ ​scroll"​ ​that​ ​Bubble​ ​uses​ ​;​ ​the​ ​difference​ ​is, Facebook’s​ ​infinite​ ​scroll​ ​seems​ ​to​ ​be​ ​part​ ​of​ ​the​ ​page​ ​itself.​ ​Whereas​ ​Bubbles​ ​infinite scroll​ ​is​ ​an​ ​isolated container,​ ​separate​ ​from​ ​the​ ​page.

Two​ ​problems​ ​arise​ ​here:
​a)​ ​the​ ​repeating​ ​group​ ​(infinite​ ​scroll)​ ​has​ ​a​ ​minor​ lag​ ​in​ ​smoothness​ ​-​ ​because​ ​of​ ​the​ ​separation​ ​from​ ​the​ ​page​ ​itself

b)​ ​on​ ​Safari​ ​iOS​ ​there​ ​is​ ​a​ ​footer​ ​navigation​ ​tab​ ​(part​ ​of​ ​the​ ​browser),​ ​which​ ​will​ ​hide​ when​ ​a​ ​user​ ​starts​ ​scrolling​ ​down​ ​-​ ​however​ ​-​ ​because​ ​the​ ​repeating​ ​group​ ​is​ ​a​ ​separate​ ​container,​ ​the browser​ ​does​ ​not​ ​acknowledge​ ​the​ ​scroll,​ ​as​ ​a​ ​page​ ​scroll​ ​-​ ​and​ ​the​ ​footer​ ​will​ ​not​ ​disappear.
(That​ ​footer​ ​is​ ​taking​ ​up​ ​prime​ ​screen​ ​real​ ​estate)
​ ​Can​ ​anyone​ ​think​ ​of​ ​an​ ​alternative​ ​that​ ​could​ ​mimic​ ​the​ ​"infinite​ ​scroll​" ​that​ ​facebooks​ ​mobile​ ​site​ ​uses?

2.​Facebook​ ​has​ ​a​ ​navigation​ ​bar​ ​at​ ​the​ ​top​ ​of​ ​its​ ​webpage.​ ​This​ ​navigation​ ​bar​ ​disappears​ ​when​ ​a​ ​user​ ​scroll​s ​beyond​ ​it…

This​ ​is​ ​interesting,​ ​because​ ​it​ ​means​ ​that​ ​this​ ​navigation​ ​bar​ ​is not a​ ​floating​ ​group,​ ​it​ ​is​ ​ingrained​ ​in​ ​the​ ​page​ ​itself​ ​-​ ​BUT​ ​-​ ​if​ ​I​ ​were​ ​to​ ​place​ ​a​ ​similar​ ​navigation​ ​bar,​ ​in​ ​my​ ​infinite​ ​scroll​ ​repeating​ ​group​ ​-​ ​the​ ​navigation​ ​bar​ ​will​ ​be​ ​in​ ​each​ ​cell​ ​of​ ​the​ ​repeating​ ​group…​ ​which​ ​would​ ​be​ ​complete​ ​insanity​ ​form​ ​a​ ​users​ ​perspective​ ​
I​ ​don’t​ ​know​ ​how​ ​I​ ​could​ ​achieve​ ​this​ ​effect​ ​either…

I have​ ​thought​ ​maybe​ ​a​ ​condition​ ​that​ ​states​ ​"when​ ​this ​repeating​ ​groups​ ​scrolling​ ​position​ ​is​ ​greater​ ​than​ (beyond) ​X#​ ​cells​ ​-​ ​this​ ​navigation​ ​bar​ ​is​ ​not​ ​visible"
But​ ​even​ ​then…​ ​I​ ​don’t​ ​think​ ​that​ ​can​ be​ ​done​ ​yet,​ ​and​ ​that​ ​would​ ​likely​ ​be​ ​difficult​ ​to​ ​
implement​ ​on​ ​Bubbles​ ​end.

Anyway!​ ​At​ ​the​ ​very​ ​least;​ ​food​ ​for​ ​thought.​ ​If​ ​anyone​ ​has​ ​any​ ​ideas​ ​on​ ​this,​ ​
I’d​ ​be​ ​interested​ ​to​ ​hear.

Granted​ ​Facebook​ ​has​ ​an​ army​ ​of​ ​developers,​ ​and​ ​although​ ​Bubble​ ​is​ ​a​ ​seriously promising​ ​company/product;​ ​I​ ​don’t​ ​expect​ ​it​ ​to​ ​be​ ​able​ ​to​ ​do​ ​everything​ ​(yet ​​:expressionless:…:relaxed:)

Cheers

1 Like
2

I use full list on mobile. it takes a bit longer to load but then the list runs smoothly. I dont know how you would create the header bar or the footer tho.

3

@jordanfaucet, I share your pain. I long for the day this scroll feature is introduced. It seems essential to any sort of social app.

1 Like
4

@denverdave11 That full list option runs much smoother! And it may actually prove to be a critical piece in the “infinite page scroll” puzzle.

There is one problem with the full list option: for my app, the content that will populate the full list is dynamic in numbers (user submitted content) - which means if everything goes my way - that full list may contain a lot of cells! Load time will then be a serious issue.

Also @csblack; I think your situation may be similar to mine - and if you are thinking going the route of a native app (I am as well); I have a feeling that the infinite scroll will be a bit smoother - because their shouldn’t be much conflict (if any) between page and group - as the dimensions will likely be more “fixed” / also that damn browser footer wont be in a native app :smile:

5

At the risk of seeming like a desperate mad man, in love with his own keyboard: I have some new thoughts on this topic.

The “full list” option is soooo smooth for mobile scrolling! The full list option, is basically how the Facebook mobile site operates. If the “vertical scrolling” option could replicate that smoothness - that right there would be the answer.

  • An issue is: if the list is too long - the load time is too long. So if the full list option could have a feature where users can select “Load x number of cells to begin with”
    Then the only challenge for me and other users would be integrating a button that “Loads x more cells” into the interfaces of our apps.
    Ideally the “full list” group would automatically load the next cells when it reaches the last cell - but that’s getting technical

The full list option even takes the safari browser footer away!! :stuck_out_tongue_winking_eye:

I am thinking of using the full list option as it sits now - I may just have to re-imagine the nature of my app to reduce the size of the full list.

Using the full list option right now - there is only one problem I am having. Pretty significant too
The full list option expands the apps page…
So if i have a full list-repeating group with 20 cells, it stretches the page to 2000px or something, possibly more.
But my app page is 640.
So when the repeating group is hidden, and another group is shown, I have 1,360px of nothingness…
Any solution to revert page size, once repeating group is hidden?
@emmanuel

2 Likes
6

Maybe loading the list in a fixed number (each 10 posts, for example). In the Windows Phone’s Facebook app I can see if I scroll fast the text is loaded first, then images - so if I pass a non loaded image post, it just skips it.

If it could be done, while scrolling the list when the user stops that could trigger loading the next batch, since the user is reading, posting etc and it won’t notice loading disrupting the experience.

7

I agree triggering the load of the next cells, when a user stops scrolling would be cool!

I would use the fixed number of cells - but the way my app is designed - the page height is 640 and my cells are about size 620. So 10 or even 2 cells at a time, totally clutters the page! :frowning:

1 Like
8

If you load 10 at a time, the idea is to load posts offscreen, so you have 2 posts for page, you have 5 screens to scroll without loading. While running 10 posts, if the user stops (2 secs, for example) it loads the next 10.

EDIT - or better: just load 10 posts at any time. If you scroll 4, when the user stops the app loads the remaining to complete 10 (in the example, 6).

1 Like
9

Just make sure the height of the page is set to your original dimensions. I’m my case it’s 480. Sometimes when I make changes to the repeating group it stretches the page behind it. Just make sure to set the page back to your height and you won’t get the blank space.

10

Even with the dimensions set at 640 : the page still creates this massive empty space that is equivalent to the height of the repeating group…

I think I can work around this though - by moving some groups around and bringing things to the front.

  • thanks for your help and suggestion! That full-list group is going to end up working well for me I think.
1 Like