: What is a better way to present two elements with "load more" function Here is the problem: Two element. Instagram and Flickr. They both show 4 images then the user has to click on Load more

@Jessie844

So the standard way to load more stuff at the point the user needs more stuff without requiring them to take an action to get it ("lazy loading") is "infinite scrolling", or, loading more stuff as the user scrolls towards the bottom of the page (like Google Images, Facebook etc). Here's an article on it.

You probably already know that the problem with using infinite scrolling here is that there are two sources of new content. How to deal with this depends on how important that choice is:


If flickr vs instagram is an important choice on your site, i.e. if you're essentially asking people to make a choice between two separate options, then it makes sense to have a button like a 'load more' button that is the user 'choosing' that option. Then, once they've chosen the option, you can have the button shrink the other option to, say, just a small tab at the top, make the chosen option (instagram or flickr) go full screen, and then bring in infinite scrolling with the feed of chosen content full screen on the page.
If the choice of Instagram or Flickr isn't that important, why separate the images based on where they come from at all? Why not have one feed, of images from both sites mixed together, and have more images load when the user scrolls to the bottom of the page? Or, two vertical columns side by side?

Vote Up Vote Down