Research
SMITE 2 is an upcoming sequel to the 2015 MOBA SMITE by Hi-Rez Ventures. Their colour scheme is generally yellow, gold and navy blue with a few browns here and there which matches their godly theme of mythology.
(Colour samples taken from SMITE 2's Key art.)
In SMITE, the UI was complex and often had many unnecessary sections to it. They've opted for a much more minimalistic UI this time with not quite as much art and realistic metallic textures needed.
In terms of design, I really like the simplicity of their closed Alpha sign up modal. It clearly displays the needed information in a way that is easy and intuitive to fill in. It also offers something that the others don't- signing up to newsletters on the game development, which can be handy for user retention. It also uses some of the Gestalt principles of design such as the principle of proximity and common region with the platform symbols- because they are bundled together, we perceive them as like components.
It also uses the Pragnanz principle as we are able to recognise the shapes within the design as different sections such as the squares of the platforms together forming a rectangle and the email input section being another rectangle.
Pros:
Simplistic
Matches the brand and themes
intuitive design
Increases user retention with optional newsletter signup
Cons:
It might be easy to miss the platform selection part of the form- this could be improved by signposting with highlights.
Bitcraft is a sandbox MMORPG survival and crafting game by Clockwork Labs where thousands of players work on the same goal of restoring a civilisation together.
The announcement video was released in 2021 and it is currently in closed Alpha. The following colours are taken from the scheme of their website.
Again, this design is fairly simplistic whilst staying truthful to the brand and the theme of the game and website. I don't know whether this is a 'me thing' bit the information hierarchy of the 'sign up for' and 'closed alpha' text feels odd somehow. The 'sign up for feels' too small to me. I do love the intricate border design of the modal with the information on it as well as the buttons. It helps to immerse the user into the world of the game right from the offset! It does however feel slightly crowded with too much text and the modal itself feels a bit too small for the real estate on the screen and in an odd position.
It does use some UX principles in its design such as the principle of similarity as the text field and button have the same shape to them so they straight away at a glance look as though they're part of the same submission and brand.
Pros:
Nicely themed to the game and brand
simplistic data input- there's only one field
Simplistically intricate detailing brings it together
Cons:
Too much text- crowded
modal too small and oddly placed
Astera is an action RPG focusing on cooperative multiplayer, deep character customization enabled by hero archetype combination, and dungeons with rogue-like elements.
The story takes place in a fantasy world rich in history and flavoured with steam-punk elements. The game is designed around an open world environment that will reward exploration. It seems to be in very early development judging by the limited amount of information I can find on it.
The game tends to use the main colours of gold, black and browns, a common theme appears to be emerging here!
The first thing that hits me with this one is the sheer amount of text on the screen. There is far too much information to take in all in one go. It is also a very basic design in terms of theming, there's just a game picture as the background and then a basic HTML input field and button that don't match the theme or branding of the game. It doesn't really use any of the Gestalt principles other than maybe proximity with the text field and sign up button, but it is easy for the user to see where to put in their details and where they need to click to submit it as it stands out from the dark background.
Pros:
Easy to see where to type and click
Probably a relatively cheap option
If the UX/UI designer is busy it saves on resources
Cons:
Not much theming
Too much text
A bit basic
Marvel Rivals- Microsoft Forms
Marvel Rivals is currently being referred to by gamers as an 'Overwatch clone' where players can battle as their favourite Marvel superheroes and villains against one another. It is currently going through phases of closed alpha testing.
They have a very bright and comic book style theming to them which matches the Marvel brand well- Once again, yellow seems to be the in thing at the moment.
Marvel Rivals seem to have gone for a cost efficient option here that looks decent. Microsoft forms is a way that they can minimise use of resources, it's free and can be customised to an extent. It also already has a good UX design as it is using a system built to use forms. I feel as though if they'd made their own, it may have been more immersive into the story world though.
Pros:
It's free
Frees up UX/UI resources
Already has an intuitive design
Can be customised to an extent
Cons:
Feels like a bit of a cop out
doesn't immerse the user into the story world
A bit boring
In Conclusion
Each of these games in alpha with sign ups do them in different ways so there doesn't particularly seem to be an industry standard as to how these are made. The best ones in my opinion stick to their brand and are well themed, immersing the user into the story world whilst also having an intuitive design. I will now try and create my own closed alpha sign up page by pulling all the best bits from each design together and improving on the cons they have.
Comments