eLife, being online only, is not constrained by print layouts and page budgets in the same way that traditional print journals are. We do have layout constraints, but they are the constraints of the web. To make our articles easily readable across many of today’s (and tomorrow’s) myriad devices, we are in the process of adopting modern responsive design techniques for our website. In going through this process we’ve identified that some of our online articles actuallyaresuffering from the effects of some of the constraints of the print medium, notably figure layout.
The problem with figure layouts
An author will often submit a figure image file that comprises a number of different panels arranged together. Five or more panels is not uncommon. This image file looks fine when viewed on a suitably large display. When viewing it on a narrower screen, though, either the image scales to fit the width of the screen, resulting in each panel being too small to be legible, or the user has to horizontally scroll the page in order to view all of the image, or manually zoom it. None of these are great options from a usability perspective.
The options we have at this point depend on the intent of the author. If the panels have been deliberately arranged in a certain way because that particular arrangement helps to communicate an idea, then things must be left as they are. An example of this is the figure below. It has 12 panels comparing diaphragm muscles under different conditions. It is clear that interfering with this arrangement would hinder communication of the authors’ ideas.
The arrangement of the panels in this figure has meaning. They should be left as they are. (Source: dx.doi.org/10.7554/eLife.00220.012.)
If, on the other hand, the panel arrangement is merely one of convenience then we have some freedom to try to improve the user experience.
Consider this next figure. Its panels appear to be arbitrarily arranged. If there is no intrinsic meaning in their arrangement, then it might be altered to improve the experience of the user viewing this figure.
The arrangement of these panels appears arbitrary. They could be suitable for improvement (Source: dx.doi.org/10.7554/eLife.00863.006)
Improving the user experience
If we can legitimately change the panel arrangement, then we can break out each panel as a separate image file. This means that each single-panel-image may now span the full width of the article on narrow displays, which can only increase the legibility of each panel, and so the communication efficiency of the figure.
So on a narrow screen where the combined panel image would be too small to view properly, we could transform this…
… into this:
(This blog isn’t responsive, but if it were, those stand-alone panels could be made to scale to fill the full width of the user’s display.)
Clearly, the individual panels will be much more legible on smaller screens if they can span the full width of the screen in this way.
How do we get there?
We could try to ask our authors to change the way they submit figures to us, but changing author behaviour is hard, and our attempts may not be welcome.
Alternatively, we could take an author's image containing multiple panels, and attempt to programatically determine the panel boundaries in order to automatically derive individual panel files from the combined image. This is something we think is worth investigating.
Do you like an image processing challenge? Tell us what you think of this idea in the comments. Would you like to get involved? Leave a comment and we’ll get back to you to discuss (if you put your email address in the ‘Mail’ field of the comment form, we won’t publish it, or use it for any other reason apart from contacting you in relation to this). Can you help us solve this problem?
