Are expanding divs a bad idea for a mobile portfolio?

Question

Brief overview: making a portfolio for game design, have three seperate categories with 4-5 individual projects under each. Home page has general links and links that segues the user into one of these categories.

My question is how to best group several individual projects (each consisting of one-two paragraphs, a photo slideshow, and a title image) on a single page.

Initially I just stuck all the projects on one page and was planning on styling to visually separate the projects -- but I was afraid it was too much scrolling. So I'm wondering if making the user click on a title image to expand the project info (animated via jQuery) a bad idea?

Or asked differently, is it intuitive to click on a image if there's nothing else on the page?

On Desktop, I had planned to have a mouse-hover state for changing the opacity and revealing text for each title image ("More info" or "(I)" icon)...but then I realized I have no clue how to handle this on mobile.

I'd also prefer not to create separate pages for each project as there isn't enough information to warrant the back-and-forward clicking.

Thanks!

Answer 1

I found the article I mentioned in the comments.

Throughout our large-scale usability study of e-commerce product lists and filtering, numerous test subjects explicitly complained about pagination. Test subjects generally perceived pagination to be slow, and the presence of more than a handful of pagination links would often discourage them from browsing the product list. More importantly, test subjects were observed to browse much less of the total product list than on websites that rely on “Load more” buttons or infinite scrolling. On the upside, they spent relatively more time on the first page of results.

...

In short, in our usability testing, the “Load more” button solved the usability issues observed with pagination (whereby users explored less of a product list, and comparison of products across pages of results was difficult), and it solved the severe issues observed with infinite scrolling (whereby users superficially scanned products and were often unable to reach the footer).

Of course, there's a lot more information and detail in the article than what I quote here.

Answer 2

Clicking an image is a fine navigation strategy, insofar as you have additional information that conveys interactive-affordance, state, or 'elementality.'

In other words, find a format that clears shows that clicking / tapping can do something. You need this because hover doesn't exist on mobile [yet].

I would argue this is one of the benefits of the card format: the grouping of data implicitly conveys the 'image' has an object-nature. Modern interaction conventions have taught that objects are interactive (especially given an absence of other interaction queues).

Remember that this is 'very modern', and less-adept users will require explicit signaling, like the read more » link.

Answer 3

Have a look at this: Quickly threw a concept together for you,

It might be worth exploring imagine mixing the game images with the paragraphs

It's straightforward css if you like it I'll put the code on github for you. You can even put a little mask effect over the image that way the image won't hinder readability of the the text/paragraphs

http://mordor.co.za/misc/css-expand.php