Huds & Guis

Tom Clancy’s The Division – Interface Design

I can’t tell you how excited I get when I come across cool UI in games. Not only do you get to see the interface in action, but often you get to interact with them. The latest thing that’s got my heart pumping was the trailer to Tom Clancy’s The Division.

Here’s a breakdown of the things I liked about The Division’s UI:

The main character HUD
Beautifully designed, instead of framing the screen with game information, the UI is incorporated into the environment creating a more immersive experience. The game HUD is anchored to the player and on a slight angle, which helps with the illusion of being part of the environment. I love the subtle movements it makes as the character moves and how it immediately stops as the player pauses to look around. It adds to the tension of the game.

Holographic Wrist UI
Great example of a diegetic interface (see article Dead Space 2 – Diegetic Interfaces), this features a carousel type UI that wraps around the character’s wrist. I really like this concept, it looks fantastic and I can imagine it being very useful. The only thing is I’m not sure how the character scrolls through different options though, but maybe it was better for the game experience not to worry about it.

You can see other examples of wrist mounted UIs in Final Fantasy (HUDs Collection), Continuum (‘Brain Control’ clip). and the Mass Effect games feature the ‘Omni tool’.

Holographic map
This was so unexpected! It’s an idea that was also seen in Iron Man 3, but in this example the hologram is scaled down for navigating. It allows the user to navigate through the city from the perpective of a giant, which feels like such an intuitive approach. I also love the look of the map and how it animates out and the audio that comes from selecting different points of interest.

Another cool feature is shown further in the video, where the main character happens by a map in the police station, which he scans and updates his map automatically.

Way finding
Throughout the world, street names and interest points are subtly labelled by floating typography, which enhances the feeling that the game is situated in a ‘high tech’ world. What’s more is the progress bars and action elements like when the character unlocks the strong box, makes it feel like your whole world is an interface.

It’s quite a nice way of forming the game’s narrative without having to rely on traditional ‘out of game’ UI. Everything that carries the story along looks like it plays out in the game’s environment.

Not only do I like the UI featured in this game, I haven’t mentioned how amazing it looks. The atmosphere, the frosty breath, the environments, the action make this game look like such an engrossing experience. Can’t wait to try it out.

Check out The Division trailer

Thanks to Allan for sending this through!

4 Responses to “Tom Clancy’s The Division – Interface Design”

  1. Here’s a direct link to the video

    It’s really cool seeing how they imagine wearables and AR within the game itself. Pretty convincingly too.

  2. Jon says:

    Yeah, the team did a great job

  3. Bill says:

    Ubisoft? No thanks keep it.

  4. chris says:

    Great to see games changing as we get used to the way real world interfaces function. Augmented reality might be around the corner (Google glass etc) and exploring these ideas in games first really helps test the waters as to what could work. The map in this game is genius, even the lines showing road names etc are so cool. If it works in the game, it gives weight to creating it for real.

Leave a Reply


To be able to proceed, you need to solve the following simple math (so we know that you are a human) :-)

What is 3 + 4 ?
Please leave these two fields as-is: