As we are completing the external rollout of the latest version of Google Play Store client for supported Android devices, I want to talk about the reasons behind the redesign of the top part of item details pages. Our main goal is to expose the most relevant and fresh content to our users, and make purchasing this content as quick and simple as possible.

There are multiple ways to get to the details page of the specific item – from curated top-level lists, from category listings, from search results, from shared links in your G+ stream, from the widgets and more. When the user eventually lands on the specific details page we want to do two things. The first goal is to help the user reach the decision whether he wants to buy the item, or continue browsing elsewhere in the store. And in case the user has decided to make the purchase, the second goal is to make the purchase process itself as quick and seamless as possible. The main intent behind the first part is to “support” the decision to view the item details by exposing additional relevant content that would work further towards making the user click the Buy button. We aim to help the user find what he’s looking for (explicitly or implicitly) without overwhelming him with too many choices or too much information. This also goes to support the second part – in our quest to make the purchasing experience as seamless as possible we do not aim to enable accidental purchases or skip important steps such as showing application permissions or movie rental terms. If the user decides to part with his money, it’s good for the entire ecosystem, including our content providers (app developers, studios, book publishers) and our partners (carriers), but we do not want the user to feel taken advantage of.

With these two complimentary goals in mind you can now take a longer look at the logical and visual structure of the details page. Each and every single element is there to support these two goals, with visual styling working to both present a unified look across the different blocks, as well as create a distinct separation for those blocks that are deemed crucial to achieve the goals.

The vertical order of the sections is crafted to expose the most important information above the fold – where importance is weighed based on how well it supports the user’s decision to click the buy button. This is why you see app screenshots, movie trailer and album tracks above the fold. This is why we worked on moving the app preview trailer into the unified screenshot section in the last two releases. This is why you see badges (where applicable), rating stars and +1 count above the fold. This is why the item title and creator (app developer, book author, album artist) are larger and bold. This is also why we have a distinctly styled summary section. It contains the most important information about the item – the title, the creator name, the thumbnail and the action buttons.

If we did our job right, there’s enough information above the fold to guide the user to click the Buy button. But what if the user wants to read the full description or browse the reviews? That brings him below the fold, and if the action buttons scroll away with the rest of the content, the user will have to take an explicit action to scroll all the way up once he decides to buy. This is why the summary section stays anchored below the action bar while the rest of the content scrolls. Here I’d like to point out – and I’ll return to this point later – that this design decision has a side effect. Reserving a certain amount of vertical space to non-scrollable content necessarily means that you have less vertical space for the scroll container. This means that those users who do want to read full descriptions or read user reviews will have to scroll more. By the way, you would note that the entire content, including the summary with action buttons scrolls vertically on phones in landscape mode. Here we felt that taking half of the available height makes the scrollable area too small and severely affects the user experience.

Finally, in addition to having the Buy button always there in portrait phones and tablets, note that it is styled in bright blue. Here the intent is to make it stand out as much as possible – without using kitschy oversaturated neons – so that it can be found quickly scanning up the screen.

Now that I’ve talked about what we show on the details page, why we show it and how important is the summary section, let’s take a look at how we redesigned it in the latest version of Google Play Store – the screenshots below have the previous release on the left and the current redesign on the right. Our directive was that there were two things that were not working for movies, books and music. First, the cover art for these types of items is much more complex than for apps. Second, the horizontal layout of action buttons has resulted in an unbalanced distribution of section content for predominantly short titles of popular books, movies and albums.

The first part relates directly to the goal of providing the right information above the fold to help the user reach the decision to buy the item. If we show a very small artwork for book / movie / album cover, we are working explicitly against this goal. The second part is a little more subtle. If there are two action buttons, such as Rent SD / Rent HD for movies or Buy / Preview for books, then the user has to switch from vertical scanning of the sections to horizontal scanning of the buttons once the decision to act is reached. It’s a small bump, but a bump nevertheless. And so, the request was to show larger covers and to layout the buttons vertically.

At this point it is a pure design / eng exercise to come up with a solution that addresses these two requirements and improves the user experience as measured by the explicitly stated goals and as restricted by physical characteristics of small mobile devices.

If you look at the first screenshot that compares the details page of the same book in the two designs, you will note that indeed the cover is larger and that the buttons are stacked vertically. But changing the metrics and layout of an element cannot be viewed within the tight context of that specific element. We must consider the effect it has on its immediate vicinity, as well as more far-reaching impact on the sections around it.

Making the thumbnail bigger works well with stacking the buttons vertically. After all, it was the left button that “prevented” us from making the thumbnail taller to begin with. But if we leave the metrics of the title unchanged we will have to make the entire summary section taller to accomodate the height of two buttons. That, in turn, would make the scrollable area even shorter. That, in turn, requires revisiting the decision of smaller scrollable area vs. ever-present action buttons. Making the entire summary taller was ruled out pretty early on, and the only choice left was to lose the multi-line mode on the title – as you can see in the comparison of books details page. The immediate result is that books with longer titles kick off marqueeing and make it more cumbersome to read the full title. On the other hand, you can argue that showing a much bigger cover art balances this out, as most book covers (as well as movies) use large high-contrast typography so that it can be quickly scanned among other items on magazine shelves. So here you can see how changing the metrics of one element necessarily affects elements around it, and how it impacts the parameters that influence the overall design decision on where each element goes and how much space it gets – all based on how the entire design works towards achieving the target goals.

There’s yet another, although less noticeable impact caused by larger cover art. If it’s taller, it must be wider. The vast majority of covers for books and music are oblong, and we add more height than width. But the end result is that the new larger cover art takes more horizontal space. This necessarily means that both title and creator texts have less horizontal space than they had before – you can see how much extra space is left after the specific book author name. So not only we’ve switched from three-line to single-line for the title, but we’re also giving it less horizontal space. And we’ll also have to elide the author name sooner (it was single-line before, and you really don’t want to marquee more than one element on any screen).

This screenshot compares the movie details pages. Here you can see how the old and new design supported shorter texts. The smaller cover art was completely overwhelmed by the two gigantic blue buttons, and the entire summary section was leaning heavily towards left in case of two buttons, or was completely disjoint in case of a single button. The new layout makes things much more balanced and shows a much more attractive cover, all at the expense of a few extra vertical pixels. By the way, the extra pixels are actually the result of using a consistent layout – the height of the summary section for books and movies used to depend on how long the title was.

This screenshot shows how the new design supports album details. The predominant aspect ratio of album covers is 1:1 and we only have a single action button (to either buy an album or to listen to an owned album). Here, the cover art is slightly wider and taller which results in less horizontal space available for the title. In addition, the single consistent layout has eliminated stray vertical space between the Explicit tipper sticker and the Buy button, giving a few extra pixels to the track list. Last but not the least, we’ve eliminated much of the hanging whitespace below the album cover. Not all whitespace is bad, but that whitespace was.

This is the latest addition to Google Play Store – magazines. You can see the same grid being used for the magazine summary, where we show an extra label above the Subscribe button. The right alignment of this label makes it clear that it is associated not with the label above it (magazine issue date), but rather with the button below it. The offer resolution dialog on the right is our new dialog that is shown in case we have more than two actions you can take on an item that you don’t own – such as multiple magazine subscriptions, or renting / purchasing a movie with SD / HD quality.

And here you can see details pages for books, movies, magazines and music albums side by side. Consistent cover size, button placement, paddings and margins ensure consistent user experience across all the different items, even if the user is not consciously aware of these changes.

The TL;DR version is quite simple. A design does not live on its own. Every single element in it, and the design as a whole must work explicitly towards the precisely stated goals. As the goals change, so does the design. It is a living breathing thing. Design turns a functional piece into a usable piece, and maintains the usability as the function changes. Don’t leave your screens to rot. Laziness begets laziness, and vigor begets vigor.

These screenshots show the content of the app purchase screen in one of the older releases of Android Market (before rebranding to Google Play). The screen combines billing information along with the list of all app permissions and various terms & conditions. If the specific application requests a non-trivial number of permissions the user can scroll down to view them all. An earlier entry on this blog has talked about the technical aspects of synchronized scrolling, whereas some content stays fixed (summary), some scrolls to snap (buy button) and some fully scrolls (billing table and permissions).

This screen is consistent with the system UI for showing application permissions. Permissions are grouped, you can tap on each group to view more detailed description, and by default we only show the dangerous permissions. The “See all” toggler allows expanding the normal permissions, following – once again – the system UI. I’ve been working on this screen on and off for quite some time (you can compare these screenshots with the earlier iterations to see slightly different styling of each permission group and vertical spacing around the buy button, for example). The next group of screenshots shows what happens when you tap on the “See all” toggler:

When the “See all” toggler row is clicked, it changes the arrow orientation to indicate that there is now more content below it that can be swiped up – as shown in the last two screens. This behavior was obvious to me because I know all the technical details behind the implementation and has been through these motions countless times during the original development and subsequent bug fixes and styling enhancements.

Which is why I was quite surprised to get an internal bug report that this behavior is not very usable. And indeed, if you compare the last screen in the first trio with the first screen in the last trio, the only user-facing difference is the direction of the arrow icon. That’s it. Nothing more. In fact, since we don’t want the arrow icon to be too heavy, you can even say that nothing changed as a result of user tapping this row. Which is bad. Quite bad. In fact, multiple subsequent taps on this row do nothing (user-facing) expect toggling the icon. Which means that if you tap this row in the rough vicinity of the “See all” label, your finger has most likely been obscuring the icon all along. This is a sure recipe to make your users angry.

It took me some time to understand why I didn’t see this as a big issue. I’ve been spending so much time on this screen, both as a developer and as a user, that I was going through the motions automatically. I know – as the developer behind this screen – what happens when I – as the user – tap that row. I stopped looking at the icon, just knowing that additional permission rows will be shown after the tap, and all I needed to do to see them was to swipe up. In fact, I’ve never looked at this screen as a first-time user.

Alex Faaborg talks about this in the “Advanced Design For Developers” session at Google I/O 2012 (starts around 4:40, with the quote at 8:30 mark):

I would argue that even though it’s really useful to have access to user research facilities, you don’t have to have them. You can just start running user tests in your head, basically short term amnesia. What you have to do is to encapsulate your mind, to forget the things that you know about your interface, to try to look at it with fresh eyes. Try to think about it as “OK, I’ve never seen this thing before.” If you can do that, if you can look at it with fresh eyes, try to let all the assumption that you’ve built up to fall away, then you’re able to do that kind of user test, just on yourself. And if you’re regularly doing that, it’s going to quickly improve your applications.

Here is how the interaction with the “See all” toggler looks in the latest version of the Play Store application:

The first screen shows the default state, where only dangerous permissions are shown and the toggler shows a downward arrow. When “See all” is tapped, we do two things:

• The label changes from “See all” to “Hide”. This follows the system UI and highlights the change in the visibility of normal permissions.
• We also scroll up the newly added content using the ScrollView.smoothScrollTo() API.

While the label change elevates the arrow direction toggle to a somewhat more visible degree, it is the smooth scrolling that shows the user not only that we have processed his tap, but that we’ve also added the relevant content (normal permissions). By scrolling the new content into the view we indicate that it’s there, and it’s ready to be read and consumed.

As you can see in the second screen, we limit the actual scrolling so that the “See all” / “Hide” toggler stays within the visible content area. For applications with few normal permissions (such as in the third screen) this means that we’ll scroll the content all the way to show all the normal permissions. For applications with more normal permissions the smooth scrolling will ensure that the user sees as many of them as we can fit, while not getting “bumped” down all the way to the bottom of that long list.

And so, be mindful of what you “know” about your application. The more you know, the less you see.

A man of a few words and emotions, slowly drawn into a deepening vortex of violence. “Drive” is a patiently woven tale of action, tension and darkness that revels in impeccably styled sets and meticulously raw drama. It is my absolute pleasure to interview the movie’s production designer Beth Mickle on how the movie came together, her most memorable sets and, how not, the story of the scorpion jacket.

Kirill: Let’s start with your background and how you got into the movie production design.

Beth: I started about ten years ago when I designed my first film when I was 21. I worked on several films with my brother when he was at film school at NYU back in 1999, and he had me working on a several student films helping out with sets, props and wardrobe. During the summer before my senior year at college a cinematographer friend of ours was planning to do a feature film; we worked together on a few films and he recommended me to be the designer. I did that – for no money – we just chipped in for the love and to get experience in feature films. That was called “Madness and Genius” with Tom Noonan, and it ended up going to the Toronto film festival, was up for Independent Spirit awards, played on the Sundance channel and did quite well for a little indie. We actually made the whole film for $18,000 (laughs).

That was how it began for me, and I was extremely lucky that the director of that film had gone to NYU with Ryan Fleck and Anna Boden who directed “Half Nelson”. About two or three years after I had done that first film, Ryan and Anna called to see if I would be interested in doing “Half Nelson” which will forever be the film that really began my career.

Kirill: And then you went on to progressively larger productions?

Beth: I did very small indies for most of my career, actually. That was how I was recognized, I think. And then they started to be a little bit bigger in size over the last few years until “Drive” came up. Ryan and I had stayed in touch after “Half Nelson” and they were looking for a designer and he recommended me for “Drive”. That is how I ended up on “Drive” which was another incredibly fortunate moment in my career.

Kirill: How does in general the selection process work? Do you show the stills and pictures form your previous productions, or some kind of a motion highlight collection?

Beth: It’s a mix of things. It’s almost always previous work in past films that I’ve done and people have seen, and directors and producers respond to. If I do few period films, people can see my work in that area and it can lead to jobs in other period productions. And then when I go in to actually sit down with the director I’ll bring in two things.

The first is my portfolio that has hardcopy photos of all the main sets I’ve done, and I always include “before” and “after” photos. They show the locations before we started working on them, completely empty stages or sets in a warehouse, and then after we’ve done our job to rebuild or decorate from scratch. This shows the transformations and the possibilities.

And then the other thing I bring to the interview is a book of inspiration photos that I pull together after reading the script and imagining my vision for it. I pull hundreds of reference photos for the overall tone and color, and then I pull out the top five or six sets from the script and show reference images for each one so that the director can see the direction I’m imagining for the sets.

And so we sit and I go through them all and see if the things I’m envisioning are along the lines of what the director has in mind, and it goes from there.

Kirill: How was the process for “Drive” specifically?

Beth: It all happened extremely quickly, it was a really unusual case. They were just three weeks out from shooting and they needed a designer to come in and work very quickly. So I was sitting at home on a Friday night after finishing a job a couple of days before, and I had another potential job that was going to start in few weeks that I hadn’t officially signed onto yet. I got a call from my agent, and he said there was a film with Ryan Gosling looking for a designer to come on board ASAP.

The next day I had a Skype call with the director and the producers for an hour-long interview, and that night they called and said “You have the job. Can you be on a plane to LA tomorrow?”

Kirill: So you only had three weeks before the shooting started.

Beth: Normally you have around eight to ten weeks, but it all happened so quickly that we only had three weeks from when I landed to do all the prep. This was the shortest amount of prep that I’ve ever had on a feature film; even on the tiny indies you get at least four or five weeks. But that was one of the things that Nicolas [Winding Refn, director] really responded to, he really appreciated that I was able to work very quickly under pressure to get everything done. It was very demanding. We would work 16-18 hour prep days from the minute I landed up until we started shooting. We worked over our weekends, with no days off throughout prep – and even then we didn’t have a day off until about three weeks into the shoot (Laughs).

Kirill: As I was watching the movie I noticed that you had relatively very few sets, with each scene taking much longer than in a typical action movie. On one hand you have fewer sets, but on the other you have the camera spending much more time on each one. Does that require more attention for each set?

Beth: Absolutely, and that’s a great thing to point out. We didn’t have a high volume of sets, overall we had maybe 15 total sets that we really had to focus on. And you’re right – we spent so much time on each of these sets. Even at the end in Albert Brooks‘ home where we spend perhaps 20 seconds in the scene, the original script and shooting had us there for two or three really long scenes in this huge house of his.

There was such a small number of sets. In the film I’m doing now we have over 50 sets that we’re building and dressing. And to only have 15 or 20 made the short prep a lot more feasible.

Sketch-up of driver/Irene’s apartments. Courtesy of Beth Mickle.

Sketch-up of Irene’s apartment. Courtesy of Beth Mickle.

Kirill: Did you have to spend much more time on each individual set because the camera ends up being there for minutes at a time?

Beth: Yes, and we ended up with a lot of detail, especially on Carey Mulligan‘s apartment and Ryan Gosling’s apartment. Those were the ones with the most focus, and both the actors were really responsive and collaborative. Ryan had a bunch of ideas for his set, and if you look at it, there’s one wall that has this kind of old toile wallpaper. We aged it to look like it had been there for several years, and it was Ryan’s idea. He said that he wanted one wall in the apartment to have an old wallpaper that has been there forever, something that you can’t explain, something that doesn’t fit his character but it had formerly been somebody else’s apartment and he didn’t bother to change or paint.

Carey / Irene apartment’s set. Courtesy of Beth Mickle.

He liked the idea that when you move into these apartments as you hop around as a nomad, you always move into somebody else’s space, into the decisions that somebody else made before you. What kind of linoleum floor to put down? What kind of carpeting? What kind of wallpaper? He wanted to play with that idea which I really liked. He also wanted to have a car engine part sitting on his table, something he’s working on it. That’s his only hobby outside of driving and listening to music in his car, and Ryan wanted to show that passion.

Kirill: Does it happen a lot that you have these conversations with actors about what they would like to see around them?

Beth: It depends. Some actors really want to be involved, and some actors are happy to let you go at it and then step in on the day to see what it is. I would say half and half. Ryan is extremely involved, and he was on “Half Nelson” as well. Probably two or three main actors on each film would want to sit down and have a conversation about their sets, bring some ideas. And the other half of the main actors are so focused on their performance and their work with the director that when it comes down to the set details, they don’t address it too much.

Kirill: Let’s talk about the car shop where Ryan’s character works. Did you use an existing location?

Beth: The space that we’ve used was the “Picture Caw Warehouse” company in LA which specializes in cars for films. They had one huge car bay out back that was empty and all white, with an office adjacent to it. We found that we wanted to shoot there, and we went in and did all the painting with rich blue tones, and did rich green tones for Bryan Cranston‘s office, and dressed everything from top to bottom. That was definitely another set with a lot of attention and a lot of details. We were there for days, and that was one of the sets that we dressed around the action – where Ryan would be working on the car, or where Ron Perlman would be walking around. We would pull the dressing around that in the background so you always see something behind them.

Bryan Cranston was really involved. He came up with a lot of ideas about what he would want to have in his office. We ended up doing a whole row of business cards lining the huge window in his office, little business cards tucked all along the frame of the window and piled up on the side of the wall. That was all from him.

Kirill: Did you do anything special with the cars?

Beth: It was so enjoyable. I went out to the vintage car lot and went through all of our options and picked the top 15 cars that we wanted to have in the background. Then we would bring them over and I would select 4 or 5 that would actually go into the car bays. We color coordinated it so that the right colors would end up there, with good rich reds, blues, greens as primaries, a few really sharp snazzy tones. Each day we would bring new cars and change them around to figure out what we want for each scene. I did learn a lot about cars, and a film that I’m doing now is a bigger action filled with lots of cars and car chases. It’s fun getting back into it.

Kirill: Apart from the pawn shop and the stunt chase, most of the outside scenes are just overhead shots of the night city streets. Was this due to production constraints?

Beth: Because we were a lower budget film in the eyes of the studio we didn’t do a lot of dressing outside. The director was great. He just said “it’s all the night time with naturally existing lights in LA and let’s not worry about adding light or signage.”

Another bigger interior set we dealt with was built right downstairs from where we built Ryan and Carey’s apartments. It was the strip club dressing room with the mirrors going around in a big circle, red drapery everywhere, ornate gorgeous red carpet on the floor. We did that from scratch, set it up on an empty warehouse floor. All through the prep the Nicolas [director] kept saying that he didn’t want to see the strippers on the stage, dancing around poles as you have seen them before. He wanted to go into a more interesting space, a place where we don’t usually go as an audience. And so we came up with the idea of a behind the scenes dressing room.

Sketch-up of strip club set. Courtesy of Beth Mickle.

Strip club dressing room set. Courtesy of Beth Mickle.

Kirill: It was this big splash of color

Beth: That was really exciting. Nicolas said “Do something, I like mirrors, I like red drapery. Play with it”, and we had no money to do it. We ended up finding a ton of mirrors. We built them onto moveable frames and I drew it up as this big circular rim of mirrors so they would all hit each other and reflect back and forth. We couldn’t afford a ceiling so we just had red drapery hanging all across the ceiling. We found this great carpet with swirling gold and jewel shapes on it, and we used that as the ground flooring. And finally our set decorator, Lisa Sessions found these beautiful dressing lacquered tables and it all came together. We added beauty bulbs around each of the mirrors and it all became this glittering mirrored set. To this day that’s probably my favorite set in the whole movie.

Kirill: Were you sad to tear it down once the shooting was complete?

Beth: Yes, it’s always sad to pull these sets apart as quickly as they came together.

Kirill: Even though you didn’t have a lot of external scenes in “Drive”, in general you have much less control over the external locations, especially for long shots.

Beth: Especially on smaller films. You’re part of the process when you’re picking the exterior, going out with the location manager looking to see what streets look the best, what streets have the best signage and the best layout. You’re involved with it, but on smaller films you don’t really have the budget to do a whole lot of changing there. Actually on the film I’m doing now we’re doing this Western street corner, painting the building facades, doing different signage throughout the decades everywhere, exterior lighting. It’s great when you have the resources to spread this far.

Kirill: Going back to the few outside night scenes in “Drive”, did you play with the lights to bring out certain specific areas?

Beth: That was mostly our cinematographer, Tom Sigel, and he did such a beautiful job with it. We did bring in a dozen sodium vapor street lights for the scene where Ron Perlman drowns in the ocean. We lined them along the Pacific Coast highway to provide more light for that scene.

Kirill: You already mentioned that the director wanted natural light. There were quite a few inside scenes happening in broad daylight where the outside light was let in in a very low, almost horizontally bounded pyramid. Did that affect the way you dressed up the interiors?

Beth: Not too much. We did have conversations with the cinematographer on what kind of light was he imagining to use – daylight, natural light, table lamps, standing lamps, overhead lighting. Once you know the layout of the set that definitely helps you to dress it and to think about the colors you’re going to use.

Kirill: What about the quality and spectrum of the light? Does it affect your choice of colors, textures and patterns for the set dressing?

Beth: That’s always a big thing when you’re choosing colors —you need to know what kind of lighting there will be in the room, to know which colors would work well and which won’t.

Kirill: Let’s talk about the scorpion jacket. What’s the story behind it?

Beth: None of us expected it to become such an iconic thing. It was just a fun byproduct of the film. I think that the idea came from Ryan [Gosling] and our director, but I’m not 100% certain. We knew that we wanted to have a scorpion on it, so we had the graphic designer Megan Greydanus work on the different scorpion symbols to put on the back of it. The costume designer Erin Benach worked on several different designs, tried everything – brown jackets, gray jackets, ivory jackets, aged ivory jackets with black trim, white trim. What color is the collar? What color is the cuff? We went through countless versions. We had camera tests on it, and finally we landed on the version that you see in the film. Erin did a fantastic job with it.

We wish we would have known what a recognizable item it would become. Ryan has one of the jackets, Nicolas has one of the jackets. We needed to have about six or eight of them by the end because it goes through different stages. It’s newer at first, and then it gets dirtier and then it gets bloody… then bloodier!

Scorpion illustration with Pantone legend. Courtesy of Beth Mickle.

Kirill: There are certain comparisons that have been drawn between “Drive” and film noir from 1940s – with low lighting throughout the movie, slanted camera angles and the overall pervasive atmosphere of doom for the main characters. Did you have any particular references?

Beth: We watched a few French films. “The Samurai” by Jean-Pierre Melville (1967) was one. We watched a few Jules Dassin‘s films, and Japanese Technicolor films. Nicolas really liked the colors in those. We watched “Irreversible” for some of the fight scenes to get sense of how he wanted the violence to go. The prep was so quick and we didn’t have a laundry list. Nicolas also wanted “Drive” to go in the theatrical direction of “Bronson”, so we kept that in mind.

Kirill: Let’s talk about Carey Mulligan’s character. Even though she essentially leads Ryan Gosling onto a doomed path, she is a very soft spoken, shy girl. Everything about her is very quiet – the fabrics, the wallpaper patterns, her hair style. Was this intentional?

Beth: Definitely. We went through lots of different options for her place. We knew we wanted her place to be a place where Ryan’s character would want to come to, a place that is warm and comfortable – versus his place which was very sparse and less inviting.

Carey / Irene apartment’s set. Courtesy of Beth Mickle.

Kirill: You mentioned that the strip club was your favorite set. Was there any other set that you particularly enjoyed?

Beth: The motel room with Christina Hendricks. I was crazy about it. The location had pink walls and brown carpeting. We went in and did the pale blue wallpaper with little gold medallions all over it. And we found this beautiful bed spread with soft pink floral patterns and the same soft blue color in it, and some browns – it was a perfect complement to the wallpaper. we aged everything down to a slightly worn-in look and it ended up being this dynamite moment in the film. We added some large mirrors into the room for the DP [director of photography] to get some really interesting shots of Christina. We ended up spending so much time in that room even though it’s this tiny claustrophobic space.

Kirill: Did you build it from scratch?

Beth: No, it was an existing motel room. We couldn’t pull the walls out like you normally can, and we had a very few windows so you couldn’t even shoot through the windows. The director and the cinematographer were both really creative in figuring how to shoot it and make it work. Then we ended up having a lot of action in there where Ryan ends up killing the two perpetrators. Just to try and get all the choreography in that little room was pretty challenging.

Kirill: Did it end up destroying the set over and over again?

Beth: We got blood splatters everywhere and we had to replace a lot of wallpaper pieces stained with blood. Between setups we would CLEAN the carpet. The set was very simple but to me it was one of the more memorable sets on “Drive”. One of the reasons why I love working with Nicolas is that he’s OK with pushing the envelope visually. He’s OK with going into a heightened direction visually, taking a few risks to play with the visuals a bit more. Some directors prefer to play it safer, to have authentic interiors and not take too much attention away from the action, to have sets that are very straightforward. Nicolas really loved to turn up the volume on each of the sets, to turn up the volume on colors. Designing for him is really exciting because you get the opportunity to pick bolder metallic wallpaper patterns and put them up, to do a set with bright red everywhere, and wild mirrors everywhere. He just loves it and wants more of it.

Kirill: But on the other hand you don’t want to overdo it.

Beth: That’s the balance. You have to find it. There are some films that go overboard and the design is screaming for attention, it dominates the frame. You don’t want it to become that, unless that’s one of the goals of the film. There are certain movies where the director does want the visuals to dominate in some scenes, and you do want it to be a more visual experience. And Nicolas is really drawn to that. The film I just did with him in Thailand is very visually driven. He wanted it to be a wild sensory experience for his audience, and so it is actually much more heightened than “Drive” was. I’m really looking forward to seeing how it comes out; we took lots of risks in it and did lots of unusual things visually. I do agree that on some films you don’t want to go too far and to take away from the story. In “Drive” we just wanted to create this sort of fantasy version of LA where these two characters meet and fall in love. That was the idea that we based everything on – that it’s actually a beautiful love story between the two characters. It’s not a story about the pawn shop robbery, it’s a story of two people falling in love.

Kirill: Stepping away from “Drive” into a more general field of your craft, let’s talk about the technological progress in home entertainment. You started with smaller student and indie productions, and then moved into bigger films. About four years ago BluRay has won as the consumption format for the home entertainment systems, bringing a rather high level of details with it. Does this mean that you can’t “cut corners” anymore in your everyday work on the sets?

Beth: Absolutely. It’s one of the bigger challenges that we have to keep in mind these days as we’re doing the sets. They’re shooting digitally and the details are so much sharper. It’s a lot less forgiving. The aging on the walls has to be just right, the colors have to be just right, all the little visual details in the background and the dressing are no longer in soft focus in the distance. They are much more visible now, and that’s something that we do have to keep in mind. But on the other hand there’s this fantastic thing with digital that you have the ability to go back in post production and fix a lot of things. If you don’t like the color of something you can play with the colors in post. Or, for example, as we were bringing a lot of wallpaper pieces, if some of them don’t line up and you can see seams, you can fix this in digital post to make it go away. It has its pluses and minuses.

Kirill: What about shooting in stereo for 3D productions? Even if you haven’t done any of those, it seems to be increasingly prevalent these days.

Beth: It’s absolutely more and more prevalent. My boyfriend Russell Barnes has done three films that were shot in 3D format. I actually talk to him quite a bit about it. I’ve watched him work with it and one of the things that he’s much more aware of is that the 3D space has these visually different planes that you’re dealing with. With set dressing you end up creating different fields: the foreground, the middleground and the background. You want to make sure to have separation between them. Another important thing is the lights. The lighting for 3D is always interesting because you have to have a lot of lights to pick up all the details in the 3D format.

Beth Mickle and Russell Barnes at BAFTA 2010.

Kirill: Can you recommend a few productions that particularly impressed or inspired you?

Beth: One of my favorites is “Far From Heaven” with Julianne Moore. It’s one of those films that has an absolutely stunning design, well thought out and beautiful choices everywhere in it. Another one of my favorites is “All The Real Girls” by David Gordon Green — it has very authentic, naturalistic sets, feels like a true documentary.

And here I’d like to thank Beth Mickle for this wonderful opportunity to learn about the design process of “Drive” and for sharing the additional materials.

At times futuristic, at times mirroring the outer edge of the latest research, and almost always an integral part of the story. In this conversation Jayse Hansen talks about fictional user interfaces, his approach to the initial research, interaction with the movie director and visual effects supervisor, and how these interfaces shape and are shaped by their real-world counteparts. Jayse has recently completed his work on “The Avengers” and he delves into how shooting in stereo has affected the design of Iron Man’s helmet HUD. He also talks about the future of user interfaces and, in particular,  exposing huge sets of data for smart consumption and effective non-linear navigation.

---

Kirill: Let’s start with your background and how you got to working on user interfaces in movies.

Jayse: I was just a kid that loved film and wanted to get into it, but I had to do it in a roundabout way because I lived far away from the main centers of action, and didn’t really have the means to go to school for it. I started by teaching myself graphic design for print from books and asking designers everything I could. Most told me I’d never be a designer unless I went to school for years and years. What I found was that some of those schooled designers came out very cocky but lacking the skills to actually back it up. So I took the hard road, and bought a library of books on design, asked for critiques from designers I respected, and grew as much as I could.

I then moved into Flash-based web sites, did some UI design in the old Stardock theming community, and finally into motion design. And then a friend of mine, Mark Coleran introduced me to the fact that people actually get to design screens for films. If you’re a good UI-designer and a good motion-designer, then you might be a good fit for FUI’s (Fictional User Interfaces.) I thought that would be about the best job in the world.

I realized that since I was little I’d always paid attention to the screens in film, for example, the x-wing targeting displays in “Star Wars” or the holographic globe in the “Return of the Jedi”. With shows like ‘Knight Rider’ or the Delorean in ‘Back to the Future’ I’d always wanted to know what all the displays on his dashboard were and how they worked.

I sent Mark some UI work I’d done and luckily he didn’t laugh at it. He thought it was decent enough to start sending my name around. So I got my first gig doing concept work for Dead Pool’s vision and Striker’s command center screens on “X-Men Origins: Wolverine“. And after I got through the first door it just kept on going because there really are only a few people out there that specialize in this type of work. I think the detail involved might kill a few people, but I thrive on it.

Kirill: What is the process of creating screen graphics for these fantasy user interfaces? Who do you usually work with?

Jayse: There are usually two sides to it, although they’re somewhat merging. One side is called “playback design” where you’re designing before they start filming. In this case you may be working with the film’s art director. You may get a part of the story or a part of the script and you’ll be designing screens for them to use on-set while they’re filming so that the actors can actually interact with it. The other side is called “post-replace” and those are designed and composited in post-production after the filming is done. There, you’re usually working with the VFX Supervisor and the director.

Hero screens seem to be becoming more and more post-replace, as the director and editors have a clearer vision at that point of what the screens should contain. “Hero screens” are more about story-telling or clarifying. The director will focus on them to move the plot along or to quickly clarify a certain point.  They’re usually in focus and seen closeup, sometimes even full screen as in “2012“.

I’ve been doing hero screens for the most part, and for this type of work I’ll usually get a rough edit and all or part of the script. Reading through it is never wasted time – as I pick out parts of the story that really inform the design and the aesthetic. Then it will be a conversation with the director, vfx supervisor and the leads of the company that I’m working for about how to make it look super sexy and tell the story at the same time.

Kirill: Do you get a rough estimate on how much screen time and screen estate you’re going to get?

Jayse: Sometimes screen-time has not been determined yet and we’ll have a little of a back and forth discussion. For example, for “The Rise of the Planet of the Apes” they came to me through G-Creative Productions to do the boardroom sequence where James Franco is explaining how a new drug, ALZ-112, is going to help cure brain illnesses and make everyone smarter, including apes! In that sequence, as he’s describing the process, the drugged chimp goes crazy and jumps through the glass presentation screen at the very end. The entire sequence, which ended up at around three or four minutes in the final movie, was originally just text on a page. Although it was really well written, it didn’t have much in the way of descriptions of visuals.

So before filming began, they wanted to flesh it out in terms of what would be on the screen behind James, which on set was simply a large, 11’x17′ blue screen. In addition to visuals, they wanted to know the overall pace of the scene. I started by doing a roughed out animatic sequence. I needed pacing so I recorded my own voice doing all the actors’ parts. Director Rupert Wyatt used that on set to pace it out, and then about four months later, after they filmed it, they came back for me to do the final shots.

Kirill: So essentially you are doing a very dynamic pre-vis sequence, and not just a bunch of static image boards.

Jayse: Yes, it’s basically pre-vis for filming – but it’s also somewhat post-vis for the post-production work. I even had a little terribly-animated Poser-monkey in there just to convey some of the ideas.

Kirill: Do you get a relative freedom for your first explorations, and then refine it based on the feedback from the director or the VFX company?

Jayse: Exactly, yes. There’s a ton of freedom upfront and that’s what I really like about it. They are really relying on me to provide what I think the content should be, and so they’ll usually be very general in the script or description. So beyond that it’s up to me, or the team, to do the initial research and flesh it out.

Kirill: Let’s talk about the research phase. You did a virus proliferation map for “Contagion” and brain cell activity simulation for “The Rise of the Planet of the Apes”. Do you go to the technical literature on the subject to get a roughly plausible visual language?

Jayse: Yes. I really love doing the research. Unfortunately there is always a deadline, so you can’t get a degree in the fields I study – even though some of them are so interesting I’d love to learn more – like learning to fly in order to design the upgraded Iron Man HUD.  I will continue to learn that type of thing! But, because the pace is pretty fast, I do try to talk to people who either work in that field or have done that kind of work, and of course there’s a ton of web research.

For example, for “Apes” I made PDF’s of research for each of the 20 or so different story-points that had to be told.

I did some reading about chimp research, and how they display that data in terms of graphs, and a ton of work on how they map the brain. Jorik Blass has done great research in diffusion tensor imaging of the brain and it turns out to be this beautifully complex look which I recreated in Cinema 4D for some of the brain sequences.

Kirill: Do you have any specific directive to take that look a little bit beyond what is available in the real-life systems in that particular area, to make it a little bit more sexy or appealing?

Jayse: I always assume that they want something that feels grounded but is at the same time sexy, or “Hollywood” as they call it. I only had one time where they came back to me and said, “make it more Hollywood” (laughs). I tend to amp stuff anyways, and that’s my goal to make it look more polished, more sophisticated, as well as tied into the general art direction of the film itself.

Kirill: But then on the other hand you’re not supposed to steal too much attention away from the main characters.

Jayse: Exactly, and it’s a big balancing act. A lot of designs I do use the composition rule of thirds or the golden mean to direct the viewer’s attention to the actor. In “The Rise of the Planet of the Apes” the designs were done very intentionally to always make sure he was the focus. Sometimes the main graphic would literally ‘point’ to him.

With Avengers, I was directed to design the glass screens with a lot of negative space, or lots of black in other words, to make sure when you’re looking through the screens you can clearly see the actors’ faces and performances.

Kirill: Do you start with the physical medium of pen and paper, or do you go straight to the computer?

Jayse: I always sketch first. Though I’m also comfy with starting digitally first as well – I just prefer thinking with paper. I give myself permission to ‘draw badly’ and sketch out everything without rulers and without rules. Just let things flow from your brain kind of thing. I went through two notebooks for “The Rise of the Apes”, and three notebooks just for Ironman’s HUD for “The Avengers”. It’s the quickest way to test out ideas, and visually ‘think’. I always try to go away from the computer, away from electrical interference, get out. I have an art-room in my house with a big drafting table and a nice view out the window, and I like to go there to brainstorm.

Kirill: Do you keep a notebook to collect your ideas in between the projects?

Jayse: Yes, and I have that in both the physical notebook and on my phone. I would snap pictures and put them in Evernote. Mark Coleran has a huge folder of screen references that I was super envious of – so I started making my own. I came up with my own way of categorizing them by screen type – like ‘Facial Recognition’ or ‘Thermal Imaging’ or ‘Access Denied’. Inside each they’re broken down to real-world applications, film, hardware, and ‘unrelated-but-inspiring’. I track the existing movie references so that I’m not repeating them, but also to be inspired. I also have stuff that maybe is not related at all – a painting, maybe – but it has a neat feel or a neat color palette to it, and that is perhaps the best reference to use to make your stuff look unique and new.

Kirill: Getting back to playback designs that are used on the sets and hero screens developed in post production, which one is more interesting for you?

Jayse: I actually like both. I’m yearning to just do some background screens sometimes – pure interface-love. But I guess generally I like the hero screens best. Having a story to tell, or a narrative is one reason I love designing for film. You also have more definition of what is happening in the scene and you also tend to get more time to get it right.

Kirill: In your interview for FxGuide you mentioned that this was your first production done in stereo. This makes it even more important to work in post-production, as opposed to “flat” playback background sequence.

Jayse: Right. Although the screens themselves didn’t have depth, the interaction of the actors with the glass screens was all improvised on the set. They filmed with just glass screens, with no tracker markers. It was interesting to get the footage and see how different actors interact differently with these screens. Nick Fury (Samuel Jackson) was just moving and swiping things – usually in a somewhat angry manner. Banner (Mark Ruffalo) would timidly slide things slowly, purposefully up and down, and then Tony Stark (Robert Downey Jr) would just go crazy turning things, sometimes using his index finger and pinkie to slide. We would always think that he was probably just messing with us, “let’s see what they come up with” type of thing. There was really no direction in terms of what it would be.

Kirill: So you’re designing each type of the interface around this fluidity.

Jayse: Yes, we designed and animated it to work with those movements. Another awesome designer who I worked with, Jonathan Ficcadenti had the fun task of coming up with the graphics behind a thumb-twist and dual finger slide, tap tap. We came up with a lot of ideas over a few beers – but in the end it took a few design variations to actually get that to work.

Kirill: Apart from doing more modeling for the stereo environment, do you see that it affects the way you approach designing the on-screen elements?

Jayse: This especially affected the HUD. This was the first time that it was done in stereo and I was surprised by how much it changed pretty much everything that we did. A lot of cheats would no longer work – because stereo reveals that they are just cheats. Also – they didn’t want shallow depth of field in these HUDs. In the previous HUDs you could get away with a lot of stuff being out of focus and blurred out to get some sense of depth. And so it was easy to put things in front of his face or move things around more dynamically. But stereo purists like stuff to be mostly in focus because the viewer’s eye is what determines what is in focus. We were worried about it at first, thinking: are we going to deliver two versions, one for the 2D version of the film, and the stereo one for the 3D version? And that would have been just a nightmare, so we had to come up with something that would look good in both 2D and 3D.

The consequence of this is that everything is in focus – so everything is readable. We ended up with a much more detailed look where we can read, for the first time, the small micro text and so we made sure that all the text is related to the scene, and all the graphics had a purpose – which is the way I like to design anyway.

There was another thing that happened in the stereo process. In the previous HUDs you could fake things in terms of where they were in Z space. You could have something that is closer to his face but small, and it would look all right. You’d put it closer to have it move less with the track and look more stable – so it’s a great cheat in 2d. But once you put it in stereo, suddenly it would look like it was inside his face. It was kind of an optical trick that worked in 2D, but doesn’t work in 3D and you realize, wait, that’s actually inside of his cheek – that looks awful! So you had to redo the positioning and scale of graphics to make sure that it felt right in stereo as well as looking right in 2D.

But designing in stereo also gave us the unique opportunity to use depth to differentiate designs. There are two HUDs in the film. The first HUD, Mark VI, designed for Iron Man II, was kept a bit more flat and the intraocular distance less spread, for less stereo depth. The second, new updated Mark VII HUD – the one he jumps into during the final battle sequence – was where we pushed the 3D depth a bit more. Really it was just spreading the two left-right cameras in After Effects a bit farther apart.

Kirill: It would seem that 3D is more affected by the difference in how people perceive it through these special glasses they hand out in the theaters. Did it happen that you got such a feedback that some of the parts would appear inside Tony Stark’s face, but it looked all right to you?

Jayse: We had a lot of going back and forth between different people (laughs). And a lot of tests! The visual effects supervisor, Janek Sirrs and the stereo team had the final say. We relied on their expertise a lot. In terms of pixels, we had worked out where his cheek actually lived. We looked at it in the blue and red format, and you can count the pixel offset between the two versions to estimate whether the specific element was too close or too far out. Stephen Lawes (Cantina’s Creative Director) and I developed a ‘cheat sheet’ for our team of people working on the final stereo run.  It listed general z-space coordinates for each major element to keep them consistent from shot to shot. He’d spent a lot of time figuring out the ideal space of the elements so that it didn’t feel too empty or too crowded.

Kirill: Do you see this as the path forward, stereo-first productions for sci-fi movies?

Jayse: Yes. Like it or not, so far it’s proven to be a good money-maker, and if nothing else, that will continue it. I actually really liked working on this in stereo. I think that HUD was one of the things that was meant to be seen in stereo. Once we did our first stereo tests, we all got pretty excited about how it looked with depth. It felt like you were in the HUD with Tony Stark, which was pretty cool.

Kirill: Did you have any specific instructions on what to avoid in your stereo work?

Jayse: Well I learned that there’s a James Cameron approach to 3D – which is to have the most foreground object be at picture plane and everything else to recede back. And that’s a really nice way of doing it. And there’s another way of doing it, the more typical way, where you have your main action at picture plane and you have stuff at front come forward into the audience, and background things go back. But having stuff come forward ‘into the audience’ can tend to produce headaches – especially if you have a lot of action – and camera shake – basically all the things you see in our HUDs. You’d also have a lot of elements cutting the picture-plane. So we were aiming for picture-plane and back since that worked really well on “Avatar”, for instance.

But we had a problem with the HUD. You can put all the graphics that are in front of his face at picture plane, and then have Robert Downey Jr.’s face recede super far into the background – but then the HUD feels cavernous. We had a lot of different tests and we finalized on having the picture plane on his cheeks. Otherwise the HUD ended up feeling like a rather overly-capacious closet (laughs) when he was pushed too far back. But now we had graphics coming up front and we were worried about very fast 3D movements and motion shake as he’s flying. Would it make you dizzy or nauseous? And how would cutting from scenes where your eyes are focused on distant NYC landscapes to super close-up shots work. I have to hand that to Stephen Lawes, Janek Sirrs and the wizards at Stereo D. It ended up working really well.

Kirill: There is a lot of emphasis on interactivity. If you look back at “Star Wars” and “Star Trek”, or even the movies from 1990s, there wasn’t a lot of real interactivity. Perhaps there was not enough technical capacity to do this, but nowadays it’s an almost implied part of your job.

Jayse: Everything is interactive these days. It used to be keyboards and mice, but these days it’s all touch screens or holographic or a direct-neural-interface, such as the HUD which works off of both line-of-sight and the neural-oscillatory-activity of Tony Stark.

Kirill: Do you see this connected to the renewed interest in UX in the real world software, with touch-first hardware from Apple, Microsoft and other companies? Is this affecting what you do?

Jayse: Absolutely. People used to be a little bit mystified by a few things – such as interactivity – but now it’s completely natural for an actor to walk up to a glass screen and do swipe or twist movements to zoom in. That’s where it changed. It’s no longer mysterious; it’s just pretty much everyday life. Same with glass screens – people think those will never happen but they’re already here.

Kirill: And you get to cut corners here and there, as you’re not creating real-world systems for the real-world environment.

Jayse: Yes, we design them to a degree that it works for the story – which is the most important – and reality comes in as a second. Full functionality is lacking, as we don’t need it to be working in eighty different situations like the real software would, and we’re quite thankful for that. We simply don’t have that kind of time. So yes, we gladly cut a lot of corners. It’s also what allows us to think outside the box a bit. I’m not worried about how a programmer is going to have to make this all work.

Kirill: Looking at this the other way around – do you see the fantasy user interfaces leaking from movies into the real-life software, perhaps a few years later?

Jayse: I think it grows consumer demand for that type of thing. For instance I just started working on a ‘top secret’ real-world government UI design project. I guess they were jealous of the way government screens look on film (laughs). They don’t want theirs looking like an Excel spreadsheet when it could look better – and work much more efficiently – by being better designed. People ask me “do you prefer function or form first” and I think that they are inextricably related. A badly designed interface is not going to function very well, and that’s what I really like about user experience. You can’t separate the two. You can’t say it functions well without it being formed well.

Kirill: You work with real-life software tools on a daily basis. What do you see as the main source of pain for you as the user of the current crop of user interfaces? What would you change if you were a king in the world where the software works for you instead of fighting at you?

Jayse: It’s a good question. I think a lot of software could benefit from a nodal approach if done in the right way. That may be because I’m a very visual kind of guy, but the software that is currently done in that way – which is basically a lot of compositing software, like Nuke, Shake, or Flame – and how it works with nodes and links between the items really makes sense to me. Some of the recent real-world interfaces that I was working on reimagined the Excel spreadsheet look as a node-based interface, and I think it will work well that way.

I think one of the biggest challenges of software and data design is the amount of data that it has to make accessible to the end user. I’m extremely interested in ways of mapping complex patterns of information – looking at patterns rather than individual pieces – and I see a lot of work exploring that which is really exciting to me such as Circos.

I integrated parts of those ideas in the Mark VII HUD diagnostic. It showed him an immense amount of data on his suit at a glance, but yet you can’t read each individual thing. And you’re not meant to – he’s looking at the patterns of it. He could zoom in if he wanted to see each one, but he knows where each piece of data lives and he can see at a glance whether it’s OK, or whether it’s depleting or malfunctioning. And so he can read the patterns at a glance, rather than just raw information. I really got into it designing the HUD. This guy’s got so much info coming at him from Jarvis, his suit computer. How does he read it? What he’s supposed to look at? How can he read it and fly his suit at the same time? He has to be able to glance at stuff and absorb the data in an instant.

Kirill: Projecting that into the real-life software, you’re talking about investing time to understand how to reduce the visual complexity of the information.

Jayse: Maybe not reduce it. Simplicity is very relative after all. Some people, like Tony Stark, are very comfortable with immense displays of data. The challenge is how to display it in a way that is understandable and useful to the user at a glance. So it can remain complex – yet convey what you need simply and effectively.

Kirill: There’s been a recent explosion in the interest in infographics, how to take these big data sets and distill them down to the underlying traits and tendencies.

Jayse: Exactly. For so long we’ve relied on a linear display of information, such as a family tree. But there’s so much data now that it kind of fell apart in the 1950s and 1960s. For a long time there’s been so much data that we haven’t been able to organize it, the tree stopped working and we ended up with all this scattered data. But recent advances in network visualizations and network complexity mapping have come out and allowed you to organize all that data in a way that makes it useful for you, once you learn how to read it. A radial network map might look futuristic to you now – but it will soon be as familiar to you and your children as a family tree.

Kirill: Bringing it back to your film work, is this where your research comes in, to know what is that information that is supposed to be shown to the main character interacting with your screens?

Jayse: Yes. For “The Rise of the Apes” it was a lot of medical visualization, and for “The Avengers” it was studying the aircraft carriers and how they work.

For the HUD it was studying combat aviation HUDs and what kind of information they display – how they change in different modes etc. I consulted with an A-10 fighter pilot. I would explain the general situation of something like flying low through a city and ask him what kind of stuff would he want on his ultimate HUD. Then I’d add my sense of dramatic alternative UIs and merge it altogether. But that information changed how I designed the new Mark VII HUD.

If you just started out to design something ‘cool’ in a HUD – you’d just end up with a bunch of circles and random text and I think it would just feel wrong, even if you couldn’t put your finger on why.

Kirill: Can the work you’ve done to understand and map visual complexities of real-world data in fantasy user interfaces affect the real-world software?

Jayse: It’s possible. I’ve recently had a few new offers to design real-world UIs… so we’ll see. With Iron Man’s HUD it’s always a balance between too much data or not enough. But that’s the balance with real HUDs as well. I asked the fighter pilot, Johnnie Green about information overload and he said that the standard HUDs are always overloaded with information. In fact, he said the first thing he teaches his students is how to focus on the important stuff as you need it, how to zero in on the information that you need and blank out the rest.

Real F-18 HUD

Mark VII Iron Man HUD

Kirill: You mentioned growing up on the interfaces from “Star Wars” and other older movies. If you look at them now they look quite dated, as they were built within the confines of not only the old hardware, but also within the confines of what the designers could think about. Is this going to happen to your current work in 40-50 years?

Jayse: I’m sure it will. When I look back at the interfaces in “Star Wars”, I totally appreciate them and I think they were well-designed. They immediately tell the story of what they were trying to tell, and for that I love them. They do look dated because of their simplicity, but we may always go back to simple, so it could come back around. Minimalism and Maximalism are constantly in and out – like an ocean. And I love both – I just don’t love indecisive in-betweenism. I think we’ll probably see less grid-based design and more organic pattern-based data-design – and much more holographic displays which are really exciting to me. In the end though, good design will always be good design, and in a way it may always be timeless. If you look at the screens of “War Games” and the big command center at the end – and I saw a screenshot the other day – that was just gorgeous.

Kirill: Wouldn’t that be affected by your impression as a kid growing up seeing that? You’re not really viewing it objectively from where you are today.

Jayse: It’s always hard to be objective about this stuff when you have your own personal memories integrated into it. But design is a learned discipline, and I look at things very differently now than when I was a kid – and those screens still look pretty sexy in their lo-fi kind of way.

Kirill: There’s a recent trend – in “The Avengers”, “Avatar” and quite a few other productions – to gravitate towards translucent screens with no visible batteries or wires where you fling stuff between the screens and you can look at the 3D models projecting from them. Can you realistically expect this to happen in the next 15-20 years?

Jayse: Absolutely. There are DJs already using glass screens in their sets. You can be in the crowd looking at the DJ and see his face, see him interact with the virtual turntable.

I think they have a few things to work out, but it’s all being done right now. I can’t wait to see paintings being created this way. The Explay Crystal phone was just released with a transparent display. Think of it from an interior design point of view – a sleek office full of transparent screens looks so much more open and nice than one with ugly black LCDs blocking the view. And in Avengers, Joss used them beautifully – even having conversations between them.

Once they figure out how to parametrically blur and ND, or darken down the background they’ll find wider adoption. I can’t wait to get mine.

Part of designing for films is that sometimes people will say that it looks too advanced for this film, but you always want to design a bit more advanced than what’s current because you don’t want the aesthetic-life of the film to only last a year or two.

You want that film to look good five years from now, ten years from now. Nothing dates a film like old cell phones or having an outdated looking interface on it. So for Fury’s screens – they wanted them to be less high-tech and polished than Stark’s interfaces – yet still be very advanced. If they weren’t, in two years it would be like Fury walking up to his monitors and pulling out a Motorola flip phone with a red LED display. It’d immediately date the film and you’d be pulled out of the story for a second or two. So I’m always looking to never have the design be dumbed down or be too current just for his reason. You want it to hold up years from now.

Kirill: But you also you don’t want to go too far beyond what seems to be reasonably futuristic.

Jayse: Yeah you don’t want it to stand out for just being crazy. It will just draw too much attention for being too ‘out there.’ That’s where tying it in to the art-direction and design of the film as a whole is important to me. But keep in mind; sometimes we’re unaware of what is truly ‘current’. Some of the really amazing data design that looks so next-level-futuristic is actually being done currently… right now, in the real world. For me that’s pretty exciting stuff.

And here I’d like to thank Jayse Hansen for this unique opportunity to graze the surface of what it takes to create screen graphics and user interfaces for movies, and for sharing his process and behind-the-scenes pictures with us.