The lens review widget is a flash component embedded into our lens reviews responsible for presenting the results of our studio tests. The challenge of the project is that the lens review studio test output is intricate, multi-dimensional and in acute danger of misinterpretation.

The widget’s goal is to provide users with a constructive mental model of this dataset and an intuitive/responsive/encouraging interface with which to navigate it.

The broad data categories initially displayed are:

• Sharpness is the top of the list for most lens geeks. Not all lenses are created equal, especially considering the difference in the ‘sharpness’ of the image they produce. A single lens can vary greatly between different focal length/aperture combinations and even varies (non-linearly) from centre to corner within a single shot!
• Chromatic aberration is the colour ‘fringing’ you see around light-on-dark or dark-on-light objects in your photographs. Generally purple or green (but occasionally blue/yellow) this effect varies with focal length/aperture and distance from centre.
• Distortion is what causes real world straight lines to appear curved in your photographs. Zoom lenses in particular are prone to distorting ‘inwards’ (pincushion) at one extreme and ‘outwards’ (barrel) at the other. Distortion varies by focal length.
• Falloff is the phenomenon whereby the corners of the frame appear ‘darker’ than the centre (i.e. the light ‘falls off’ from centre to edge). Though often used as an intentional effect, falloff is generally avoided if possible and varies with focal length, aperture and obviously, distance from centre.

In practice these 4 effects are all present (to some extent) in every shot you take, so representing their individual effects is more complicated than simply displaying the raw images (which we also do).

Designing the user interface

With so much data to navigate and several dimensions to deal with (angle from centre, distance from centre, focal length and aperture) the process of designing a useful and intuitive UI was difficult. Eventually a standard hierarchy emerged:

1. Lens review. It may seem the obvious choice, but I’ve included it on this list as (if allowed in configuration) the user is able to change the review data being viewed within the widget.
2. Visualization. Sharpness & Chromatic Aberration, Distortion or Fall-off.
3. Focal Length. Or ‘zoom’ to non-photographers, is generally marked on lenses in arbitrary integer values (generally 4 – 7 per lens).
4. Aperture. The variable size of the ‘hole’ which regulates the amount of light entering the camera body. Stated in f numbers, an approximately logarithmic semi-standardized decimal value. The aperture values available for a lens depend on the focal length chosen.
5. Comparison lens review. Users reading reviews are constantly making comparative decisions, so the widget allows users to compare two lens reviews (or two data-points within the same review) cheek-by-jowl, hopefully improving comprehension. Of course, this requires user interface chrome to allow the user to choose.

There was much internal debate (which still rages) about this UI element which allows users to change/compare reviews, but the eventual decision was to filter reviews by system, lens and finally camera body. Note: Our lens tests are performed on a camera body (instead of an optical test bench) which has relevance upon the results.

The ‘slider’

The real challenge from a UI perspective was creating a UI element which allowed users to change focal length / aperture in an intuitive way, was brand-neutral and could cope with the intricacies of the focal length /aperture systems and their inter-relationship. After initially experimenting with flash’s slider component, I decided to abandon it and start from scratch (before you shout Not Invented Here, be aware that flash’s slider is a major usability dud).

Trim

Some neat little features that I pushed into the widget (usually late at night):

• Full screen mode: At any time a user can click the full screen button at the bottom of the widget to view in a new window/tab (selected reviews, visualization, focal length & aperture are retained).
• Permalinking: At any point, users can obtain a permalink to the current state of the widget to bookmark and/or link to (again the selected reviews, visualization, focal length & aperture are retained).
• Keyboard controls: A bit of a power-user feature requested by the guys in the office, the keyboard arrow keys can be used to control focal length and aperture. If multiple reviews are visible, they will all receive the inputs, allowing users to change the visualizations in unison (not currently possible via the sliders).

Though a few minor issues persist, I’m very happy with the current implementation. I feel it strikes the right balance between aesthetics, usability, accuracy, brand-neutrality and ‘fun’.

Time (and the forums) will ultimately tell.

an IM icon created for a friend (whose name is a homonym for che’s)

In the process I decided to adorn my IM profiles with the mighty ‘Pico’ icon, something that had slipped my mind for years.

 
My new IM icon (based on my Pico character)

The original artwork dates is from the flash-based pico game I made for a uni assignment at Hong Kong University in 2002. As I spent all my free (and a fair chunk of my uni) time exploring Hong Kong with my friends, the assignment was developed in a marathon 48 hour cram session in the HKU multimedia labs. 

The game wasn’t always called Pico 

The game itself is a pretty basic affair, but still makes me laugh when I see the artwork and animations. As a bonus, it’s fiendishly difficult (being alone in a CS lab at 4am does tend to warp a coder’s mind). Give it a go, it’s a great cure for apathy.

 
Hong Kong Island (including HKU) is an festival of stairs and elevators

The whole 2-day stint was surreal; the deadlines, the long walk along pok fu lam road, the long hours, the great music, the septuagenarian tai-chi club which trained (complete with weapons) right outside the labs at dawn (their existence was unknown to me previously and seems unreal still).

 
Pok Fu Lam road, connecting HKU campus to the halls

Hi-lights include

1. .Net 1.1 to .Net 2.0 upgrade (long live the MasterPage)
2. Amazon S3 for all image storage (dramatically reduced bandwidth and hosting costs)
3. Google map-based location search.
4. Creation of “Pusher”, a fire-and-forget image watermarking, batch uploading and data-entry smart client app (to create the 12+ thumbnail and preview versions of each image).
5. Creation of “S3 Viewer”, a smart client app for viewing/maintaining the thousands of S3 items and buckets which support the site.
6. ‘New Images’ atom feed (surprisingly easy to get going).
7. SQL Server 2000 to SQL Server 2005 upgrade (Common Table Expressions are the goods).
8. GeoRSS feed to (hopefully) ensure photographs appear in search results as geo-tagged objects.
9. Tag-clouds for hierarchical image categories.
10. Colour search (still beta, currently rewriting the search algorithm to favour colour coverage rather than colour fidelity).
11. Cleaner UI design.
12. Xhtml transitional doc type with vastly improved markup validity (flash still causing some issues here). Some tables remain, to be slowly phased out when I have time.
13. Flash 9 homepage scroller (flash cs3 didn’t play nice with my old flash 6 swfs).
14. Self installed and configured SSL.
15. New hosting provider (discountasp.net, very impressed so far)

All told the upgrade took about 3 months’ worth of train trips, nights and weekends (around my day job). It’s meant an overall reduction in sleep, but ultimately worth it. Now I have just to force myself to stop tinkering with it.