We just got back our first taste of the final widget and heads-up-display UI design from our recently hired artist, Julien Martin so I figured it might be fun to look back at some of the early design concepts for PhotoSpector. Now that Julien is going to make our functional design beautiful, we can safely look back at our early design experiments and laugh at how ugly and non-functional they were at the beginning.

PhotoScope-UX-3.3.1PhotoSpector started out as a professional image viewer, built on an industrial-strength virtual texturing system modeled after 3D game engines to provide support for huge images beyond the boundaries of the mobile graphics or memory systems. The primary operations were panning, zooming, toggling and wiping between similar variations of the same image. From the get go, we wanted to provide a workflow tool that allowed you to load and compare image that have been slightly modified by, say a fancy filter, or due to variations in parameters. For example, when working on Glaze, I would constantly make subtle changes to the algorithm and I wanted to compare the previous and current versions of the final images to check their quality and to see if anything changed. I also really needed to be able to see very subtle changes, even to individual pixels.

We had also learned about the importance of image metadata from our Glaze iPhoneographers, who insisted that we maintain the metadata from the original image in the Glazed output. This turned out to be our first foray into the ALAssetsLibrary, which is a relatively new iOS library that is the only way to access photos in the main device gallery and to load and store metadata. We wanted PhotoSpector to be a real tool, for developers like us and (semi) professional iPhoneographers.

PhotoScope-UX-3.5 So we knew immediately that we had to provide a simple and direct way to view the image metadata. We had been pretty frustrated with other apps that displayed metadata in various panels and modal displays which required lots of touches and navigation to find the fields of interest. We wanted to be able to quickly scan the raw, un-prettified and un-modified metadata, and also to compare metadata fields between images. My dad is a Radiologist, and some of my first programming work back in the ’80s was for the medical imaging market where they simply don’t stand for any prettification of data — they only want to see the raw information. This is something I’ve seen over and over again as I worked with professional artists, who always choose function over flash.

We also wanted to support wiping between image versions, a feature we had back in film production when Gilles and I worked at PDI/DreamWorks. Its a flashy feature that makes for good demos and can be useful when comparing variations of the same image — a common theme in PhotoSpector. Most pros prefer to toggle, rather than wipe, between images, but as long as it is easy to do either one, it is better to have both styles.

PhotoScope-UX-5.6Our next rounds of changes started to play with the tabs to try and have some way of connecting them to the images visually. Initially we had assumed you would simply specify a small set of variations of a single image, so it would be, ehem, “obvious” which one was which. This is just shorthand for the programmer waving his hands wildly in an effort to avoid hard design problems. Our first attempt was to have “cutaway” tabs that allowed you to see down through the current image into the image associated with the tab. Then, as you wiped, the bottom image would expand vertically and become visible along the entire edge.

Following the theme of detailed image inspection, we switched from a manually moved magnifying glass to a new design for our Pixel Inspector that kept the focus on the central pixel and let you use the standard pinch and zoom motions to move the image, rather than the magnifying glass. PhotoSpector-UX-6.1 Once we thought of this UX inversion, it seemed totally obvious as the better solution, mostly because we couldn’t really figure out what to do with the old magnifying glass as it got close to the various image edges. We also knew it was hard to navigate when you were totally zoomed in, so we stole an idea from games and added a minimap to make it easier to keep track of where you were in the image. Of course the main tool here is the numerical value display, which allows you to inspect individual pixel color values, a must have feature for the typical detail-oriented, slightly ADD, professional image artist.

We kept struggling to figure out how we wanted to load images into PhotoSpector. We had assumed we’d just use the standard Image Picker provided by iOS, which lets you choose from your gallery. Or maybe we’d use a commercial image picker, like Filepicker.io, which adds support for cloud services. After much gnashing of teeth, we finally decided to take the plunge and expand the scope of PhotoSpector significantly by embracing search and keywords. We decided to add a full album and group viewer which would let you navigate your images similar to the Photos app, and create search-albums that would be able to look through the image metadata in interesting ways to make organizing and finding images much better than using manually created folders. Search is the new way to find things, and folder are so 90’s.

PhotoScope-UX-8.0-AlbumsUnfortunately, our first efforts were very skeuomorphic, with very physical-looking albums, but the function was there from the beginning. We knew iPhoneographers and professional photographers used image keywords, flags and star ratings while they were de-rushing their dailies. We knew it would be important to allow you to add keywords to track which apps were used to filter the original, and to post those tags along with the image when it was uploaded to Flickr, or stored on your desktop. And we figured it would be nice to also allow you to search for keywords, as well as more complicated information stored in the metadata, like the manufacturer (searching for “Apple” will find all pictures taken on Apple-manufactured devices, for example).

PhotoScope-UX-8.0-EditGroupWe also added a thumbnail view which would allow you to select multiple images for simultaneous operations. We knew that pros really wanted to scan large numbers of images quickly, apply a few quick tags and perhaps backup or share some images to the cloud easily. Our initial viewing tool had become a bit bigger. It now was at least a bit of an image organizer. We tried out a few schemes for using keywords at a deeper level, but eventually simplified things, at least for the initial version, to just support flagging. No stars. No keywords. This was doomed from the start, but was a second attempt by the programmers to wave their hands wildly trying to avoid the ever-increasing feature creep that was taking a month-long project and turning it into four months of development!

PhotoScope-UX-8.0-ImageViewOnce we had bitten into the apple, we couldn’t stop ourselves. We figured, heck, if we’re going to do this, let’s do it right and add the minimal set of features you need to work with images — a bit of cropping and some color correction. That’s entering into the world of photo editing, which is an enormous space, but we knew we had a pretty good texture engine underneath that could handle viewing enormous images, and that we were going to be doing everything with custom OpenGL shaders, so we might as well throw in a bit of realtime color correction! At this point, when we realized that we weren’t going to be showing a few variations of the same image, we switched over to a thumbnail list instead of tabs, but we kept the tab-like concept of pulling from those thumbnails to initiate the wipe against the current image.

All of the core features of the app are now working. We switched to thumbnail stacks and black backgrounds ala the Photos app over the last few weeks, and cleaned up some of the toolbar layouts. Functionally, it feels like we have most of the major UX design obstacles behind us. Now Julien is taking our current stand-in design elements and creating a truly professional look for PhotoSpector.

PhotoSpector_UI_AlbumsView_2.2Here’s a sneak peak at some of the very first mockups from Julien. They are not complete yet, but it already looks so much cleaner and pulled-together than our current design. I can’t wait to get the final versions working inside the app over the next couple of weeks!

PhotoSpector_UI_ImageView_2.1We’ve decided on a flat (i.e. non-skeuomorphic) look, using a dark gray theme with lavender highlights. The albums are now displayed as thumbnail stacks, similar to the default Photos app, but with an image count badge and a slightly different font. We’re adding a subtle textured noise to the background that will scroll with the foreground objects along with a central highlight over the background to provide some interest. We’re also adding dropshadows to thumbnails and the main image, when zoomed out.

Next up, Julien will start work on the app icon, which is a bit scary since it means we’re heading into the final stretch before Beta testing begins in a few weeks.