Secretly console first: A improved proceed to multi-platform diversion UI design

In the wild

I consider a best proceed to illustrate a proceed that I’m going suggest during a finish of this essay is to go by some real-world examples of how others tackled multi-platform design. I’m about to get specific in referencing certain games and it’s really vicious to me that we make it transparent that I’m not shitting on any of these games or a people who finished them. I don’t do that; it’s a spectacle any diversion gets expelled during all. Also each one of a games I’m about to call out are really successful.

With that let’s get to it. Here are some examples of solutions out there in a wild.

1. Simple Prompt Switch

It has been my regard that a many ordinarily used proceed is what we call a Simple Prompt Switch. I’ve comparison a wonderful Dishonored 2 to illustrate this approach. Here is a side by side of a console and PC versions of one of a menu screens:

Dishonored 2 Powers Menu — Console (left), PC (right)

At a peek we could be forgiven for wondering what a disproportion is. This is given it is a singular pattern with a usually disproportion being that a symbol prompt icons and labels are specific to a stream platform. While in this sold instance there is an evidence for bad legibility of some of a content due to stretch and rise usage, this shade has been designed to be transparent in a common console context of a incomparable observation distance. The categorical giveaway that this is a console-first pattern is in a adored communication method — specific button/key presses on both platforms, where a PC initial diversion would stress proceed submit with a mouse, so withdrawal a actor with usually a dual rodent buttons to worry about.

Here are a same images posted divided for closer inspection:



I consider this proceed works. we suppose a recognition is due to expected being a cheapest method. we also consider that this process is a bit lazy; in bearing a controller submit process this way, it puts a UX weight on a PC actor to review over a garland of pivotal cues instead of enlivening a some-more healthy proceed input. Incidentally, this diversion and many other DO concede proceed input, though in presenting these pivotal prompts they are adversely inspiring find on a height where ‘hotkeys’ are typically an modernized process for a some-more skilful players or those with an accessibility need for keys over rodent input. This is also loyal of a web. In a desktop environment, browsing a web is really mouse-driven affair, with systems like tab-indexing as a apparatus for modernized users or those who with accessibility needs.

2. PC Leaning

Epic Games’ Fortnite Battle Royale has been a speak of a city for a best partial of a year now and interjection to their truly multi-platform growth suite Unreal Engine, Fortnite is on all vital consoles, PC, and hold shade platforms.

I report a solution Fortnite uses as PC disposition as against to PC initial for reasons I’ll get into after a following side by side perspective of a PC and console versions of one of a menu screens:

Fortnite Lobby screen — PC (left), Console (right)

It’s transparent to me that a menu complement in Fortnite was designed with proceed submit around a rodent as priority, and we suppose that a designers of a menu knowledge might have come into games from a web background — there’s even a used-to-be-controversial hamburger menu on there. Nevertheless, we demur to contend this is an all-in PC-first proceed for a following reasons:

  1. Epic Games are a creators of a multi-platform oriented Unreal 4, if anyone has a prophesy to consider multi-platform from a opening a them
  2. Epic Games’ PR had a diversion releasing on consoles as distant behind as 2014
  3. The ubiquitous UI and information pattern both in a menus and tangible gameplay review good during incomparable observation distances and we doubt that this was an accident.

Here are a same images posted divided for closer inspection:



The solve for a controller context is to enlarge a existent array of buttons peppered around a shade with symbol idol prompts. This “works” and substantially works fine — I doubt a millions of Fortnite console players are forward on Epic’s forums with complaints about this implementation. we however consider it lacks a magnificence of a Simple Prompt Switch of Dishonored 2, partly due to a unsuitable chain of controls opposite screens, requiring some scanning work to grasp what happening, and in some cases duplication of a symbol prompts in opposite areas of a shade like in ensign revise shade (which we can’t find a screenshot of right now). There’s other tiny things that chip divided during a console knowledge such as a use of non customary buttons for primary actions. Look during a start symbol on a PS4 picture above and note that it requires a triangle press to start a diversion when it has turn customary to use a cranky idol for those kinds of actions.

In some screens there’s also a miss of a transparent grid blueprint that is useful for a console-style name and dedicate model.

To be honest we remember this being many worse than what it indeed is, though in a suggestion of checking myself before wrecking myself, we only jumped in and played again underneath both control schemes, and while we mount by my assessments, it’s all flattering transparent and learn-able.

In summary, we consider that Fortnite’s PC Leaning doing favors PC players to a border that Dishonored 2’s Console-First proceed favors console players. Both are plain and effective approaches, though we consider we can go one better.

We are about to get to get to a beef of this whole 2000 word and bowel transformation (I don’t consider I’ve combined this many disproportion in a singular sitting given we was during university).

3. Secretly Console First

I used a tenure Secretly Console First in a work assembly while we was going over skeleton for a subsequent miracle of a plan we was operative during Carbine Studios R.I.P.. “Why is it a secret?”, we was asked. It’s a tip given a idea is for a PC actor to never get a feeling that console was adored in a growth of a game. PC gamers tend to be aloud vicious when they feel like they are personification a “shitty console port”. They still remember a original Borderlands port and have been hyper supportive ever since. Dishonored 2 is by no means a shitty console port, though it clearly favors console/controller submit in a messaging in a menus and a savvy PC gamer is going to feel that.

Overwatch exemplifies what it is to be Secretly Console First. To me it is a excellent stream instance of a diversion that addresses a executive problem of multi-platform UI and information design:

How do we pattern and build UI and information systems that demeanour and feel suitable for a height and submit intrigue a actor is regulating while being aware of growth resources?

Here is a side by side of a ‘Select a Hero’ shade on Console and PC:

Overwatch Select a Hero Screen — Console (left), PC (right)

In OverwatchBlizzard has combined all of a layouts, and underling elements in a proceed that creates them clearly entertaining during vast observation distances. The high-level UI layout, a sourroundings and impression indication setup is finished once for both platforms, nonetheless a communication pattern is clearly different:

  1. The console chronicle uses a ordinarily used (to a indicate of being standard) pairing of name and dedicate communication design, with symbol prompts during a feet of a shade for easy cranky referencing
  2. The PC chronicle uses a mouse-centric float and click process that is a many fit browsing and communication process for many PC players

Here are a same images posted divided for closer inspection:



The Overwatch approach is achieved by building two sets of elements that are toggled on and off according to a submit device now being used. Where Dishonored 2 is simply replacing labels and icons, Overwatch is switching out a whole communication design. This means that in and with a high-level blueprint that has respirating room, a communication covering can adjust to a needs of a submit method. Note a tiny idol underneath a impression name on a PC chronicle that looks like “[!]”. This is a some-more mouse-appropriate proceed to hoop a “Hero Details”, generally with a position following a gestalt (oh no he didn’t) element of proximity. One could disagree that this is a categorical certain of Fortnite’s method that leads me to this image:

Some kind of rankings display, PC

Overwatch uses a vicinity formed symbol prompt process seen in Fortnite at several points in their menu systems, though a pivotal disproportion is that it is exclusively for of delegate or tertiary actions. The above shade is about rival rankings, a applicable controls such as fact drill-downs or categorical navigation are placed in along a bottom. Editing actor temperament specifics such as a button is an choice placed as preference for a actor and not a primary duty of a screen. we feel that this approach, used sparingly, helps keep a categorical quarrel during a bottom transparent for a few vicious communication options, while still permitting a actor to simply do other tangential things with a diversion but going behind out and drilling into another menu somewhere.

Posted in
Tagged . Bookmark the permalink.
short link