I chose to work on the Photo Gallery transition exercise because I enjoy photography and thought it would be a more interesting problem to engage. Included is a link to a functional prototype of the Photo Gallery followed by a discussion my process and the rationale for each step along the way.

Mobile Photo Gallery Prototype

I separated my process into the following steps:

1) Sketch initial ideas
2) Understand design problem
3) Refine sketches
4) Mock up best ideas
5) Build Prototype

I realize building the prototype represents a large portion of the work, but following this process, by the time I began building a functional prototype, I had a very clear idea of how I expected the transitions to look and feel – it was merely an exercise in transitioning from sketches to fluid animations.

Sketching Initial Ideas

Immediately after reading the exercise prompt and opening the .psd file from the designer, I opened up my notebook and began sketching out my initial thoughts.

The initial sketches served two purposes; to get my first thoughts on to paper, and to help get into a good mindset and begin actively engaging the problem.

Understanding the Design Problem

It quickly because apparent that my ideas were influenced by other photo gallery apps that I’d interacted with. With this in mind, I decided to take some time to understand how other applications are handling the transitions between grid and gallery view (and also the types of actions supported within each view). While by no means an exhaustive review, I looked at a couple of strong options, including the default Android Photo Gallery App, QuickPic, Photo Gallery (Speaker), and FishBowl.

Each app handled the transitions between grid view and gallery view differently with noticeable styles. For instance, the Photo Gallery by Speaker made heavy use of animations and generally felt like the images were always moving around. It has a fun and playful feel, but after opening and closing a few images, the transitions became too much.

For QuickPick, the image is transformed from the original thumbnail to the gallery view, while a black background is added (almost instantaneously). Fishbowl animated in the gallery view from the center of the screen, while applying a semi-transparent background, so the grid view was still visible in the background. The overlay is added after the gallery image is loaded. The default Android Gallery has it’s own subtle differences.

One key takeaway for me is that the transition should be fast and not superfluous. This exploration also gave insight into what gestures I should consider including, such as swiping between images in gallery view (all apps supported this), pinching to zoom, taps, double taps, etc.

Based on this exploration I sketched a diagram of the three different states, the actions that would cause transitions and actions supported within each state.

This process of exploration and understanding helped to narrow my focus and give direction on what my prototype should focus on.

Refining Sketches

With a better idea of the task I was working on, I went back to my notebook and refined my ideas in sketches. I generated a bunch of ideas quickly, focusing on quantity not quality.

I left my sketches for an evening and came back the following day with fresh eyes to pick what I felt were the most promising ideas for the prototype.

Mock up promising ideas

Using the .psd file provided by the designer I storyboarded a couple of promising ideas as shown below for the following transitions

On Grid Load

loadGrid1

loadGrid2
One thing I learned from looking at other photo galleries is that the images each take time to load. When first loading the gallery, providing feedback to the user that the photos are loading helps make the experience more enjoyable. The two options I wanted to try were: 1) fading in a grey rectangle, with the image appearing at the end of the fade, and 2) showing a loading animation (in this case a spinning circle of dots) until the image is loaded.

Transition from Grid to Gallery

Load Image from Center

animateThumb3

animateThumb4

In two variations of background, I tried applying a white opaque background to draw focus on the transitioning image at the center of the screen, making the transition to the black background only after the full-sized image loaded; and fading in the black background as the full-size image animates in. I find the changing background as the image grows to be distracting. The image is hard to see at first, getting lost in the still visible grid view. On the other hand. The opaque background helps draw the eye into the much brighter image in the center.

Transition from Thumbnail

animateThumb1

animateThumb2

Again, I tried this approach with both the black and white background. In this case, I prefer the black transition as the image grows. The difference is that it is easier to follow the image from its thumbnail and transitioning the background with the image, will ultimately be faster.

One issue I had with this design was that I had the actual thumbnail growing, leaving an empty space in the grid view. I found this to look a little odd and considered leaving the thumbnail in place as well.

Background Transition after Image Load

animateBackground2

animateBackground3
If transitioning the background after the image loads, I tried two approaches: 1) fading to black and 2) Sliding the background out from the image (like a curtain). Both approaches draw from metaphors of a theater, the first being the dimming of lights as a show is about to start, the second is adjusting the curtains to focus the viewers attention on the important content. I found the fade to feel smoother and more appealing.

Transition to Show Gallery Frame

animateFrame1

animateFrame2
A much more minor transition, I tried two approaches, fading in the frame and sliding it in from offscreen. Both for consistency and because it had a smoother feel, I preferred the fade in/out of the frame.

Building Prototype

The final prototype (available here) that I decided to create was based on the following mock-ups.

animateThumb3

animateBackground2

animateFrame1

I opted to create a web-based photo gallery because it would be fast and flexible. The only requirement I was given was that the gallery would be viewed on mobile so I wanted to cover as many devices as possible. The prototype covers each of the three views described here and rough representations of the transitions between states. I also included the ability to swipe left and right between images in the gallery view.

I used JQuery Mobile to build the prototype and the TouchSwipe jquery plugin for better gesture support.

Worth noting, while I was sketching the prototype, one aspect I had not considered was handling images with different dimensions. When I began to build the prototype, it was quickly apparent that the gallery needed to handle different dimensions well. For instance, what is the best way to show pictures that are much wider than they are tall and vice-versa? Ultimately I decided to try to optimize the space so that the image would fill as much of the screen without overflowing. Likewise, in the grid view I chose to keep the thumbnails all the same size, with each image completely filling the bounding rectangle, centering the image, and allowing the edges to overflow.

Again, the prototype is available at: http://p.alexjansen.me/FinalGallery/.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Be the first to comment.

Leave a Reply


You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

*