Nashville Medical Media Gallery

Overview

We needed a leaner media gallery for one of the core sites at Dallas Market Center.

Let's take a look at how this evolved.

User Feedback from the Existing Galleries

1. Too much scrolling

2. Galleries took very long to load

3. Video and photos should be combined into a single gallery

At the same time, we were working on developing a new custom CMS, so my vision was to deploy a solution that would satisfy the original request and also be an easy-to-reuse scaled-down version, like a gallery category. 

Design Challenges

Using the existing content, there were 4 main components to a photo gallery to remain in the new design: 

1. Gallery title 

2. Thumbnail images

3. Hi-res/Lo-res download links

4. Image captions

Initial Design

 I felt some further fine-tuning was needed to keep the design compact and easy to navigate.

Suggested Improvements

1. Add titles - From the initial design, the gallery and thumbnail are disjoined. Users aren't yet able to tell which set of photos or videos is selected.

2. Pagination - While having the new NEXT/PREV buttons on either side of the current set of thumbnails satisfies the "more compact" feature, users don't know how many times they may have to hit NEXT to see all photos in a given gallery.

3. Link styles - Thick outlines around the thumbnail signal which image is selected. But how would it look like when a user hovers over one they want to select?

4. Download links - It's hard to tell that the text below the photo caption are actually links. Styles added to these links like a contrasting color, font formatting like bold or even a large button for each size of image would help.

5. Navigation and playback controls - After a given image from the thumbnail set is selected and displays below, The UI needs "convenience controls" so a user can lazily (i.e., not move the mouse much) navigate to the next photo or video playback controls.

Usability Considerations

1. Possibility of More than 35 Galleries on one page - After a user selects, for example, a gallery title from the second row, the gallery details display below the last row. How would this look if we had 6 or more rows of gallery sets? A user would need to still do a lot of scrolling to navigate between galleries.

2. Possibility of More than 200 pictures in One Gallery - How would the pagination bar look when you go over 4 sets of thumbnails? Would the "bullets" continue to add to the width of the tab? If only 4 "bullets" displayed, how would you know if you were on the 5th or 18th set by shapes alone?

Second Iteration

In order to design a more compact container for the 35+ galleries, there needed to be a way to add controls that would hide/show content together with informational elements to know where a user has navigated to within the gallery container.

Possibilities and Extras

1. Duplicate Paging Controls - On the top and bottom of the gallery details we now see fixed controls to navigate through each set of photos in a given gallery.

2. Horizontal Gallery Thumbnails - If more than 4 galleries are needed, a NEXT (down) and PREV (up) button shows to slide the next set of galleries in place.

3. Graphic Download Links - Overlayed on the current full size photo, we see the links to get hi-res and lo-res images.

From a development standpoint this turned out to only involve 3 components. A javascript document to build the gallery container, a new template page CMS admins can choose to add galleries to and an XML file to hold all the gallery data like titles, links and captions. It was really exciting to go through all the iterations of design before a single line of code was written. I enjoy going through planning phases like this for even the simplest enhancements.