Game Career Guide is part of the Informa Tech Division of Informa PLC

This site is operated by a business or businesses owned by Informa PLC and all copyright resides with them. Informa PLC's registered office is 5 Howick Place, London SW1P 1WG. Registered in England and Wales. Number 8860726.


Get the latest Education e-news
 
  • The Long Dark: Survival Game HUD Analysis

    [02.02.21]
    - Iuliana Urechi

  • HUD

    Many Heads-Up Display elements are contextual and some can even be set to fade out over time. The UI can be split in to 7 screen zones: location, wind, inventory, affliction, movement, general information and health.

    Location zone briefly displays names of regions and places you have entered and indicates when you discover a new location. Wind zone shows you indicators for wind changes. If you stand in a wind protected area or you start to attract predators an icon will appear to indicate that. Inventory zone displays messages related to changes in inventory, like harvested materials or items expiring. Affliction zone displays messages for the many afflictions you can aquire or get cured from. Movement has a number of icons to indicate running/stamina, crouching, standing on an incline, weight status, weapon status and others. General information seems to show notifications for a number of events, like ice cracking under you, badges, bonus conditions etc.

    Health zone is one of the only persistent UI elements on the screen, since the 5 status indicators are crucial to player survival in the game. Warmth, fatigue, thirst, hunger and condition along with rising/falling indicators are displayed here.

    Red is used sparingly, but expertly to indicate danger/damage/warnings. It's there in the incline icon to help the player understand that it's a bad thing, without adding text to it. It's there when one of the character needs runs out, like warmth or hunger. The universal color to indicate danger, it helps to convey the icon's impact at a glance.

    Another useful thing we can learn is how to maximize the use of bar indicators. Wrapping health bars in to a circle can save space. It also makes the UI more visually appealing, with icons large and easy to understand quickly. Notice the lack of numbers that we are accustomed to seeing with bar UI elements. They can still be found in the inventory, but in the HUD there is no need for them. Numbers take more time to read, when all the player needs to understand is if a certain condition is high/low, going up/down.

    All UI element groups have their own style to help differentiate between them. Region text is larger than location text to indicate the size of the area. Predator attraction icon is bigger and more prominent than wind protection icon to indicate importance. Afflictions are colored differently to indicate importance - red for damage, yellow for warning, white for minor importance. Every aspect of UI design color/transparency/texture/size/shape is used to communicate with the player effectively.

    Considering that this game has been evolving and changing over many years, it has an impressively good interface. You can see how having a general plan for the UI location, behavior and style helped the game stay useful and visually appealing. No matter how systems change or what new features are added, having a plan can help your designs do the same. This prevents the UI elements becoming a glaring patchwork of text and icons that don't quite fit together or overcrowd the screen.

    The lessons here are:

    • Use the psychology of color to your advantage to indicate states, emotions, impact and importance
    • Get creative with progress bars, using different shapes for a more interesting effect
    • Use visual styles to indicate information type for a better user experience
    • Plan your UI strategy early and keep to it as new features and elements get added

    What can we improve in this HUD design?

    Let's start with element location. The top left corner of the screen will get the most attention. It's currently wasted on location names. Information that is not crucial to gameplay and can be found in the map screen - lowering its importance even further. There are much more important parts of the UI that can be placed here.

    Perhaps the wind indicators can be arranged horizontally to take up less space. Right now they look like separate events even though they are both related to air conditions. The predator attraction level can even be supplemented with color to mark the 3 stages of severity - white, yellow, red.

    Inventory notifications can be made even easier to read with enlarging the item image and number - the two crucial elements. Maybe they can even share the top left corner with location names, to minimize the UI impact on the screen.

    Afflictions can also be moved to the left side, since it's a crucial pieces of information. Currently they disappear no matter the severity or impact on gameplay. This can lead to a situation where the player is unaware of a serious injury that affects health. The only indication of it would be a small mark on the health bar that is not easy to spot. Making severe afflictions into permanent HUD icons while they are in effect would solve that problem.

    Movement is in a good spot that corresponds to its importance. Some icons here can be rearranged to be more effective. The run and crouch icon can occupy the same spot since they are mutually exclusive.

    Some notifications in general information can be moved to the same spot as inventory or afflictions. This will ensure that only the most crucial information is directly in the player's way in the center of the screen.

    Health has been reworked the most as the game was developed, so it's in a pretty good state. The only current problem here is that there is no increase/decrease indication on the condition (health bar), which is a surprising oversight for such an important UI element. Drawing player's attention to decreasing health will help insure there are no frustrated surprise deaths.

Comments

comments powered by Disqus