As part of the “In Motion” series, I did a few interviews about screen graphics and the way they are portrayed in futuristic sci-fi movies, and one of the “usual” questions I ask the person is where they see the human-computer interaction going in the next few decades.

And then, as I was talking with Scott Chambliss, the production designer of “Star Trek”, about how he approached designing the computer environment of the Enterprise Bridge, especially given that it’s happening in a rather distant future (250 years from now, give or take), I realized that I’m not really being fair.

Asking such a question immediately puts the other person on the defense. Look at where we were 25 years ago, and look at where we are now. The pace of technological evolution is incredible, and there’s an amazing amount of research going into all these different directions, some proving to be niche experimentation, and some reaching and changing lives of hundreds of millions of people. Asking somebody (who is not an extrovert futurist) to predict what will happen in the next 25 years is unfair. There’s just no way to be able to do that, and there’s an extra layer of being indexed forever and having people point fingers at your old self and how completely wrong you were at the time you made that prediction.

So here’s my resolution. I’m not going to ask this question any more. No more “Where do you see human-computer interaction going in the next 25 years”. Instead, I’m going to ask about where they would like it to go. What is bothering them now, and how that can be eliminated? How this can make our lives better? How this can be enriched without isolating us even more from our fellow human beings?

My own personal take on this is that interacting with computers is too damn hard. Even given that I write software for a living. Computers are just too unforgiving. Too unforgiving when they are given “improperly” formatted input. And way too unforgiving when they are given properly formatted input which leads to an unintentionally destructive output. The way I’d like to see that change is to have it be more “human” on both sides. Understand both the imperfections of the way human beings form their thoughts and intent, and the potential consequences of that intent.

What about you? Where would you take the field of HCI in the next 25 years?

Continuing the ongoing series of interviews with illustrators, it is my pleasure to welcome the talented Dan Page. Dan’s editorial portfolio includes clients such as Time, The Washington Post, The Boston Globe, Forbes, Reader’s Digest and many others. Every illustration packs a powerful twist, with a unique, strong and expressive visual delivery. In addition to his extensive editorial work Dan has also illustrated a number of book covers, most prominently for the Vinyl Cafe series.

---

Kirill: Tell us about yourself and how you started in the field.

Dan: I grew up in the suburbs of Toronto and went the regular route to be an illustrator. I had artistic talent growing up, went to art school (Ontario College of Art and Design), but never imagined an Illustration career at the time. Like many students, I simply gravitated towards Illustration from all the options art school had to offer. The course that hooked me was a third year Editorial Illustration class, taught by the late Jerzy Kolacz, an immigrant from Poland, and a respected conceptual Illustrator. Jerzy had a way about him, a master at crafting ideas, and inspiring students to think conceptually.

Kirill: What informs and shapes your taste and style?

Dan: My work is shaped by communicating ideas through  images. I like to take a graphic approach.  I love a good line drawing, playing with different textures or even now silhouetted shapes.

Distilling things down and not overloading a composition gives me the end result I’m striving for.

Kirill: Do you want to carve out a consistent and recognizable style, or are you willing to push and explore different directions as time goes by?

Dan: I love to explore and push things, it keeps things fresh and exciting for me. Exploring new techniques new possible ways to complete a final has become part of my process.

With technology you can make a few different finals up to the last minute of a deadline. This was not possible a decade ago, at least the way I would work back then. You needed to be sure of how you would approach a final with little wiggle room for changes. I’ve been Illustrating full time for over 20 years.

I know from personal experience that without pushing and exploring, surviving a long career is difficult. Creating new ways of approaching assignments is reenergizing. It makes work feel less like work.

Kirill: Your editorial illustrations seem to be about distilling the main subject into a single, powerful, thought-provoking idea. Is there any sort of organized process behind this, or more of a sudden bolt of inspiration?

Dan: Coming up with original ideas is the most challenging and difficult part of my process, but also the most rewarding. I wish it was easier since it’s always done under time constraints – the all powerful deadline.

It’s an unpredictable process. While I’ve experienced the gift of a sudden bolt of inspiration, I would never bank on it, but every day I hope for it!  It’s usually old fashioned hard work and not organized at all. it could be a sketching process, researching subject matter, google searches, calling friends for insight, taking a break, taking a drive, grabbing another coffee, taking a shower, looking up past sketches… and then the a-ha moment!  Immersing myself in the subject matter visually and intellectually, letting it soak in consciously and sub-consciously would best sum up this process.

Kirill: What’s the technical process? Pen-and-paper first, and then transition to digital tools?

Dan: Yes, pen and paper then scanning things into Photoshop, that’s the general rule. Along the way I may have an idea for something new to try. The technical end is the more predictable part of the process. I enjoy both the traditional and digital parts of this process equally, the combination of the two offer endless possibilities. I remember when my process was all traditional from start to finish. In retrospect creating art work then wasn’t as exciting compared to incorporating the digital element in my current work. This additional element eliminates the monotony of the process. Its like driving somewhere and taking the same route every time. I find that the digital process takes you on new interesting twists and turns all the time, yet arriving at the same destination.

Kirill: Once the magazine is published, do you ever wish to go back and tweak that illustration? Has it ever happened that you had what seemed to be an even better idea after the process has been completed?

Dan: Absolutely, I’m not satisfied with everything I’ve done. With all the different variables involved when an assignment is underway, the stars don’t always align. There is a collaborative element to illustration. My sketches have to be approved by Art Directors and Editors  and my preferred idea may not be the one approved by the AD / Editor for whatever reason. You just proceed, and that’s part of the job. Getting a second and third set of eyes involved in the process can improve my ideas as well. I am flexible and have benefited from great art direction many times.

Kirill: How different is it for you working on book covers? How do you approach capturing a larger story in a single illustration?

Dan: It does feel different when working on a book cover, but I try to remind myself that it’s not. There is a throw away aspect to magazine illustration, if you do a bad illustration, it will be gone the next week or the next month.

Not with book covers, you put more pressure on yourself thinking they will be around for a real long time – you don’t want to screw it up. Plus, that feeling carries over to the book publishers, this is their baby you are working on, you can sense it in all your communications with the Art Directors. They want to make sure it’s just right. I try to just focus and keep doing my thing. I do find reading the whole book helps in the process, rather than working from a synopsis. On the other hand, I’ve done a number of covers for the author Stuart McLean and he’d rather I create an intriguing image that may compliment the title without reading the books or knowing anything about them. This has been very successful as well.

Kirill: How do you preserve color fidelity when the final product is targeting print media, such as magazines or book covers?

Dan: Amazingly what I see on my iMac usually is translated to print, whether they are RGB or CMYK files, it always seems to print without problems. I don’t have to do anything special to preserve it.

Kirill: You’ve done a lot of work for what used to be traditional print media. Do you see any changes that affect your work as the magazine and book publishers are exploring digital editions and a variety of smaller screens and different form factors?

Dan: I keep hearing there may be changes, I’m sure there will be but it hasn’t impacted my work at this point.  I remember what I was doing when they announced on CNN that Newsweek is going all digital. It hit me that times were changing. I don’t foresee it affecting work flow, as media still will need graphics in some shape or form. I have done some assignments for digital use only, it seems like the transition is a slow process, giving graphic artists time to adapt along the way. But as for now, print is not dead.

Kirill: What’s the weirdest client feedback that you’ve received so far, if you don’t mind sharing?

Dan: It involves one of the most famous magazines on the planet and one of the most famous editors. It ended with a kill fee. I tried to push the boundaries a little and found out that there is an actual line that you can cross.
I thought I’d never work for them again, but I’ve worked for them recently. I guess I didn’t go too far over the line.

Kirill: What do you think looking back at your own work from a few years ago?

Dan: There’s an evolution that takes place. I always want to go forward and try new things and feel like my work is changing and growing, but deep down you want it to be better than before. That is difficult to do.

Kirill: How important is it to invest time in personal projects?

Dan: It’s good to break away from the regular routine and structure of making images. You can find a new technique or explore subject matter that you’ve always wanted to do but never get the chance.

Personal projects can elevate your work as you usually delve into subject matter that is close to your heart. This is probably when you can get the opportunity to do your best work, so it’s very important.

Kirill: What do you do when you run out of ideas and get stuck?

Dan: I may have already touched on this when I discussed my process. I get stuck all the time. Having a deadline surely helps, sometimes having a shorter amount of time in a deadline gets ideas flowing more.

There must be a psychological reason for this. I’ve been through experiences where I’d send in a set of sketches where I racked my brain, turning over every stone… only for all the sketches to get rejected.

You get asked for more ideas, and you think to yourself that there are no ideas left, I’ve thought of absolutely everything! Instead I say, OK I’ll see what I can do… and surprisingly I end up nailing it with something unexpected right at the last minute. PHEW.

Kirill: What’s the best thing about being an illustrator?

Dan: The best thing is that you are making art every day – it doesn’t feel like work.

And here I’d like to thank Dan Page for taking the time to answer a few questions I had about his craft. You can find more of Dan’s work on his main portfolio site and his agency page. All illustrations used with the author’s permission.

This hasn’t strictly happened in the latest release of Play Store, but worth mentioning nonetheless. The screenshots below show the layout changes made in Play Store 4.1 for editorial pages.

The header underwent quite a few layout changes. In a single-column mode we swapped the description and the video to result in a more pleasing aesthetic flow that begins at the top of the page. The rather random 2-line collapsed description has been replaced to have the description section have the same height as the video element. The video element itself is a fixed 16×9 block that goes edge-to-edge with no unsightly gray pillar bars. Finally, the last few characters of the last line in collapsed description are faded out with superimposed “read more”, removing the rather awkward dangling arrow caret that we used to have.

In landscape mode the header goes to two columns – video element on the left and description on the right. The description is limited to show as many lines as possible without vertically overflowing the video element.

Card content underwent grid alignment as well. In portrait mode the cards go edge-to-edge with consistent visual and layout treatment of the price element. We’ve also tightened up the line spacing of two-line titles and went to two-column layout in landscape mode. Pretty much all pillar bar margins are gone, resulting in a better defined grid and a better usage of available screen estate.

For these screenshots I purposefully chosen an editorial collection that mixes items from various media types. Such collections present an interesting design challenge to balance the exposure of cover art with grid alignment. Cover art for apps, albums, TV shows and movies is fixed aspect ratio (1×1 for the first three, around 1.441×1 for the movies). Books and magazines are mostly in 1.35×1-1.52×1 range, but there is significant variation in some of the genres, particularly children’s books. When you have a collection of items with varying aspect ratio of cover art, what gets aligned?

Our current approach is to have two fixed aspect ratios – 1×1 for apps, music and TV shows and 1.441×1 for everything else. The second aspect ratio is a perfect fit for movies, and lies rather conveniently in the middle of the “regular” range for books and magazines. If you browse those sections in the Play Store you will notice that the covers go edge-to-edge along one axis (vertical or horizontal) with white space on the sides along the other axis.

Mixed content in the same collection (such as editorials, wishlist or recommendations) presents another problem that can be seen in this screenshot:

For aesthetic and alignment reasons all cards in the editorial collections have the same height. What happens when you have items of mixed aspect ratio? Our previous approach was to allocate fixed width and vertically center the cover “asking” it to fill as much of that width as possible. It resulted in a rather unbalanced look of cards for items with 1×1 aspect ratio – such as albums in this specific collection.

In the latest release of Play Store we have revisited this approach. The cards still have the same height, but the allocated width depends on the actual type of the specific item. Movies, books and magazines continue getting the width based on 1.441×1 aspect ratio. Apps, albums and TV shows, however, get more width for their cover art – based on the 1×1 aspect ratio. This results in a much more prominent space given to the cover art. As with every design decision, when something gets more space, something gets less. In this case, there’s less horizontal space available to the title and the item description. The title might go from one line to two lines (or even get cut off). In addition, we no longer have a single vertical line that has all titles, subtitles and descriptions aligned to it. Instead, we might end up in something of a zigzag that has its shape defined by the sequence of items within that collection. That is a conscious tradeoff in this decision.

And while up until now I’ve talked about portrait and landscape phones, it doesn’t mean that we forgot about larger devices. If anything, the positioning of the different elements used to be even more random on those devices. The screenshots below show the changes that were made to impose a consistent grid that enforces structure and flow on the editorial collections.

One of my favorites here is how the card grid columns “extend” into the header, forcing the video element to be positioned edge-to-edge in the first column. And, with more horizontal space to give to the header description, this particular one has just enough space to show the full description without the need to go to “read more” collapsed mode.

As part of the bigger redesign of the Play Store (cards, cards everywhere) we also created a new tab strip. What’s nice about this strip that it can fit multiple tab titles on larger screens, while also allowing swiping it independently of the view pager itself and selecting tabs all the way at the “other end”. That functionality, however, resulted in a very jarring sliding transition on the underlying content. It can’t really be conveyed with a sequence of screenshots, but if you have a pre-4.3.10 version on your device, go to the landing page of apps or movies, swipe the tab strip all the way to the end and tap on one of the titles. If you are on a fast connection (4G / WiFi), the data for that tab is loaded before view pager completes its sliding transition to select that tab, and the UI thread is swamped with too many pixel operations to be able to both slide the tab and fill its content. The fact that we’re also configuring the pager to load the content of one tab to the left and one tab to the right of the selected one is not helping.

The omni-present Adam Powell suggested waiting until the view pager sliding transition is complete and only then do the data load. That deceptively simple sentence has lead to a rather gnarly, but stable enough solution that has made its way into the latest release of the Play Store. Let’s look at those gnarly details, starting with what happens when you tap a tab title:

1. Click listener registered on the tab text view calls ViewPager.setCurrentItem
2. ViewPager calls instantiateItem of its adapter for the newly selected tab and two tabs on the sides.
3. ViewPager starts the sliding animation and transitions from IDLE to SETTLING state notifying the registered OnPageChangeListener.onPageScrollStateChanged listener callback.
4. ViewPager notifies the registered OnPageChangeListener.onPageSelected listener callback that a new page has been selected.
5. ViewPager completes the sliding animation and transitions from SETTLING to IDLE state notifying the registered OnPageChangeListener.onPageScrollStateChanged listener callback.

What we want to do is to set some kind of an indication before step 2 above to defer data loading / display until step 5 has completed. The first gnarliness comes from the sequence itself, where tab selection event happens way after the adapter was requested to instantiate the newly selected tab. If you start data loading in instantiateItem and you’re on a sufficiently fast network (or already have cached data locally), you will end up starting to bind the data for the selected tab well before the sliding transition has completed. I personally would have preferred a slightly different sequence of events, but hey, I’m not going to complain. So…

Given that we “own” our custom tab strip implementation, we can fire a “pre-select” event before calling ViewPager.setCurrentItem. In the handler for that event we propagate the boolean bit to postpone data loading until after step 5 has been completed. In step 2 our adapter checks the value of that bit and does not initiate data loading. In step 5 we go over all deferred tabs and ask each one of them to start data loading.

We end up effectively postponing data load in favor of a much smoother UI response to the tab click. Yes, the data will arrive later than it used to. If you’re on a fast network, the UI will return to a usable state at roughly the same time, as the UI thread completes the sliding transition much faster. If you’re on a slow network, the delay in beginning the data load is not very significant (pager sliding transition completes quite quickly).

There’s a new point of failure here. What happens if we don’t exit that deferred mode? We’re relying on a very specific sequence of events that needs to happen in a very specific order. If, for any reason (not that I’m saying that Adam has bugs in his code, but just saying) we don’t get the SLIDING -> IDLE state transition, the newly selected tab will never have its data loaded. That’s not good. A rather gnarly and brittle (but apparently functioning) hack is to post a delayed Runnable on the UI thread in our pre-select callback handler. If 500ms pass since we’ve posted that Runnable and we didn’t have the IDLE -> SLIDING transition, we force-exit the deferred data load mode for all the tabs. Otherwise, if that transition does happen (step 3 in the sequence above) we cancel the delayed Runnable and let the sequence complete.

This change has been made rather late in the development cycle, and one of the reviewers’ suggestions was to postpone the data binding instead of data loading. The contention is over the UI thread – between tab sliding and tab data binding. Why postpone the data loading then? Start loading the data, and only postpone the binding of the loaded data. Without any guarantee [TM], this is what we’ve added in the development branch. The sequencing of the events is still the same, but instead of deferring the data load in instantiateItem we defer the data binding when we get the data back (from network or local cache). The UI thread is handling the sliding transition, while the background worker threads fetch and massage the data. As the data arrives, we look at the current state of the sequence. If the sequence is complete, we bind the data immediately. If the sequence is not complete, we enter the deferred data binding mode. As the sequence completes, we go over all tabs in that deferred mode and notify them that they can start binding the data.

Gnarly? Check.
Brittle? Check.
Could be better if I knew how to bribe Adam to change ViewPager without breaking a gazillion apps that rely on it? Check.

But hey. It seems to be working. And, nobody said that you will always write nicely looking code that removes jank.