User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

We're currently designing a portfolio website. On the front page, we have a navigation which takes the user to Home, Work, Information, Blog. On this front page, we'd also have a series of images showcasing the latest projects, presented chronologically like a blog.

The Work page would have a very long list of projects for the user to view. (Up to 30). We anticipate the user will be using this Work page as a central navigation to view different projects pages. Would such a central page be best as an JavaScript overlay, or as a separate HTML page altogether?

share|improve this question
There's no one right answer to this. It depends on too many particulars of your specific solution. That said, if you go with overlays, be sure they work comfortably on touch screen devices (many do not). – DA01 Aug 27 '13 at 17:54
Javascript is part of the implementation. Some developers may prefer overlays to be implemented using CSS. By "Javascript Overlay", do you mean an "overlay"? – Izhaki Aug 27 '13 at 20:50

If I understand the term "Javascript Overlay" correctly (a modal overlay) then it would be interesting to see any arguments for such a practice. Just to make sure I get this right, what will trigger the showing of the overlay?

An overlay typically has strong link to the parent page and follows a user journey with a Parent > Child > Parent flow.


Overlay may be appropriate when:

  • You need to grab the user attention.
  • You want to focus the user on a particular item.
  • It will be beneficial for users to see parts of the parent window.
  • When a quick user action is needed followed by quick return to the parent page, but the action requires additional information that may be too much for the parent page.

Cons of modal overlays

  • Confusing Back Behaviour - users may thing that back will take them back to the parent window.
  • No Browser Bookmarking

Given that in your case it is a central navigation page, users may wish to bookmark it.

Perhaps you should consider having the list of projects as a side bar, or as a menu item. But I would say that an overlay for such a key page in the application is not a standard.

share|improve this answer
With model overlays you can really see much of the parent page, if the use does want info from the parent page or perhaps to view the details of multiple children, the user needs an ability to Ctrl+Click (or mobile long click) to open details in a new tab. – Danny Varod Oct 27 '13 at 8:57

My thought is that 30 items lends itself to its own page. Perhaps in a year you will have 60 or more such projects, so maybe this list is expected to grow, or be pruned back to stay at 30 items. In either case, I think it deserves full-page treatment.

For a portfolio, your work should have salience. It's the primary reason for even having a portfolio site.

The full-page directory of projects also provides order to the collection by allowing you to present a thumbnail or small gallery for each project, some descriptive text, and a title, which might be harder to do in an overlay without getting crowded.

share|improve this answer

If you expect the user to explore many projects then the back and forthe of having different pages would offer a very disconnected experience. I think you can keep the user on the same page, and have persistant navigation (of project list) to allow them to switch the projects easily.

Also, overlay is just one option, it could also be displayed within the layout transitioning to a different one. For example, have a look at this and click on one of the results. You'll see the map growing and taking up more space to display details and the layout changing to allow for the rest of the listing to still be accessed. Scrolling is designed to respond to this.

share|improve this answer
Yeah, we feel it could be a bit of a disconnect. We're going to have a link underneath each project, for < Previous and Next >. Another simple option for the user to scroll through the projects. – tmyie Aug 27 '13 at 18:17
"explore many projects then the back and forthe" the converse of that, though, is that if they are all overlays, I may not be able to quickly pop them all into individual tabs. – DA01 Sep 26 '13 at 22:13

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

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