2

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?

Portfolio mockup

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!

  • Also, if it matters any, I am using the smoothState.js library to provide more seamless transitions, particularly that of sliding - hence why I thought to have sliding/expanding divs – Robert Lee Mar 19 '16 at 14:33
  • 2
    I just read an article, yesterday, showing that the "Read More" idea of expanding content is far more preferable. Of course, I can't find the article now. – Rob Mar 19 '16 at 15:02
  • That's a good idea - the only concern I have is that most sites tends to use the same size for the text and the 'Read More' link. Do you think that would work well on mobile or would a button probably be better? – Robert Lee Mar 20 '16 at 17:28
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.

0

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.

-1

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

  • While the code may be useful, this doesn't actually answer the question of whether or not it is a good idea. This is a UX Q&A site - questions are about what should / shouldn't be implemented, not how to implement them. – JonW Mar 21 '16 at 10:50
  • Well okey then. – Erik Thiart Mar 21 '16 at 11:04

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.