If you’ve been following the progress of the web over time, it seemed as though there were two distinct user experiences. One set of sites seemed to be based in markup and text. They were practical and hard working. Sometimes they were built with standards which meant the code, script and design were in separate places to make them easy to update and take advantage of dynamic data. Sometimes it had “design”, it was epitomized in sites like Google and Amazon. There was another web, this was the web of Macromedia/Adobe Flash. These sites were “designed”. They promoted sexy things like brands and entertainment. They tended to take place in one window, but contained features like animation, gaming, motion and other trappings of rich media. In fact rich media banner ads were one of its main uses.
My interface hero came far before this turn, in 2006, but pointed the way that the HTML web could be as cool as the Flash based sites. He solved a particular thorny problem in experience design, while inventing a thoroughly modern way to handle a particularly odious convention known as the ‘modal dialog’. The modal dialog steps in when you need further information from the user to act upon their choice. This can take the form of a dialog box which contains a confirmation or other choice. It has a rule that it must be decided before proceeding. It has the heritage of the desktop convention of a ‘print’ dialog. Often you are locked out of the underlying program before you make the decision it asks you for. It makes you stop and think, and we know that is always something interfaces should try to avoid.
How then could you handle these sometimes necessary choice or modal interruptions while still allowing the user to go back to what they were doing, and not resort to the ‘back’ button (or the ‘undo’ of the web as I like to think of it). Enter Lokesh Dhakar (@lokeshdhakar) who saw an opportunity to enhance a common problem – enlarging a thumbnail image.
Designers attempt to fit as much as possible on the screen. When browsing, pictures offer color, variety, and personality to a page that would otherwise be overly textual. However, these thumbnails are small and tough to see. What if you want them bigger? Do you click, go to a ‘detail page’ (see flickr.com) or could you stay where you were and just enlarge them without leaving the page?
In December of 2006 the script Lokesh wrote took any link to an image from a smaller image and rendered it inside the current window. To make it even sexier, he added a dimmed background (with either a transparent image or if the browser could handle it, transparency) and then used a technique to ‘grow’ the image from a seed to the full size. Add a close box, or the ability to click off the image and dismiss it, and you have an interaction that spread like wildfire. It was unobtrusive, meaning if it didn’t work for whatever reason, the user would still see the image in another window. Therefore it was painless to add to any HTML site, and it became quick to add to many sites. He had the good fortune to name it ‘lightbox’ which was easy to find on search engines, and the script was easy to see by viewing source code too.
It was taken by others and improved over time. Adding the ability to paginate through slideshows, add real HTML to recreate those pesky dialog boxes, and other great tricks make it a pattern that is the standard for when you wish to focus the users attention. Variations include the tooltip and the popover. While a small thing, patterns in user experience design are precious, and those that work to create them for all of us to benefit from should be recognized. Cheers!