1

I'm a novice to UX and I'm looking for ways to prevent my game design portfolio from being bogged down by poor design choices.

On one of my pages, there is going to be a table of several projects that, upon selecting an image tile, expands to a dialogue that contains the project name, description, and a gallery. The dialogue is supported by two arrows to access the preceding/succeeding project from the table.

Poor drawing My first question is what would best describe what I'm trying to accomplish? A lightbox with a gallery inside it? A gallery within a gallery? I'm not quite familiar with the terminology.

Second, I intuited that it would be tedious to open a project, read its contents, close the dialog, then open the next one -- so I thought adding left/right arrows to quickly jump between the projects. Is this a reasonable thing to do?

And lastly, is this good UX at all? I originally proposed having the multiple galleries on the single page (without the dialogue window) but I feared it would be an information overload.

Thanks for the help!

Edit: To elaborate, each dialogue would contain a game prototype/demo I worked on. It would contain things like game title, my role in development, software/libraries used, brief description of the gameplay, and several screenshots of footage. As I'm a programmer, the graphics aren't the most visually pleasing, so the provided descriptions holds equal importance in my opinion.

1

Another way to get around the navigation between projects (when you're already looking at the detail of an individual project) would be to split your page - one part of the page can hold a thumbnail gallery, the other shows the content for the currently-highlighted project, with a multiple image selector and your descriptive text. This prevents the user getting 'lost' in the lightbox if they don't understand how to close it, and means they wouldn't have to scroll through all projects.

How you would split your page (horizontally vs vertically) depends on the volume of your content and your desire to show large, detailed images. If you want high resolution images, put the gallery scroller horizontally at the bottom of the page, with the images front and centre. If it's more about seeing quick peeks of content, split the page vertically and give more room to the gallery.

Bear in mind that if you think users are going to be more often than not viewing this on a small screen (mobile), my solution is invalidated due to real estate issues. Unless you want to create a mobile version, which is somewhat unfashionable these days.

| improve this answer | |
  • Thanks for the suggestions everyone, I think I'm biased to Tom's solution because in my first draft I had something similar to this effect - and now that it's been articulated better, I think I'll go with it. As for mobile, I already have a mobile-incompatible home page, so I'll be making an alternate, condensed version of the site. – Robert Lee Jul 16 '15 at 15:28
0

Need more context on what the outer galleries are, but you could try using tabs for the user to switch between galleries (while keeping the way you have to navigate within the gallery. It might make the user feel more comfortable since they will be seeing all the galleries available at a glance and tabs seem to be a more structured navigation.

| improve this answer | |
  • So tabs for each project they open? Or making the dialog not modal? The outer galleries are effectively tiles in a table/grid, kind of like Windows 8/10 Metro apps. The dialogue that opens contains the small image gallery, text, and arrows to switch between this tile/project and the next. – Robert Lee Jul 16 '15 at 13:37
  • All your projects should show as tabs at any time. Don't open tabs as the user makes his/her way through your page, it will lead to an inconsistent navigation and might make the user spend too much time with tabs organization rather than the content. – CodeManX Jul 16 '15 at 14:25

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.