Jump to content
AJAX

HUD / UI Design Visual Concepts

Recommended Posts

AJAX   

I like that light spotlight.

Very Hollywood. :)

 

Perhaps some disco lasers and a bat symbol in the background - the guy could do a little dance as well?  :blink:

Share this post


Link to post
Share on other sites
r0tzbua   

So I took your offer and enxanced what I had already lying around with some ideas from you, so bear with me :D

 

First, I think keeping the main navigation on one screen is nice, I think breaking it up into 4 tabs doesn't really fit the way a respawn/spawn plays out in PR (if that gets taken over to Squad, but I guess it won't be too different).

 

While having the huge player model and the text there is sure nice, I think it's more convient and usable if these things stay in one screen.

 

So without even more talking, one of my "older" designs mixed with some visual influences from your Role selection: (it's clickable so you can see the 100% version)

gui--spawn-screen-v2_lhrtu.png

 

I think the main use of the role selection is to quickly see which roles are open and free, which roles are in use and quickly take a look at the equipment I can expect. With this in mind a click on one of the roles expands and selects it. If there is ever the way to customise the role inside the game I think that would be a great use to show the big view to make place for the weapon choices and let the user focus on the customisation of the current role. (Ignore the rough map, that's just me experimenting with topographic maps)

 

The main reasoning behind that screen layout is the steering of the users eye. At least in the "western" culture top->down to left->right is the standard viewflow which is all the reasoning behind me layout shown by this small graphic: (also clickable)

gui--spawn-screen-v2-l9pqn.png

 

For now I left the specialized roles out, since I don't know if they are selectable or only spawnable on crates like in PR.

Share this post


Link to post
Share on other sites
AJAX   

Nice mate - I think that makes a hell of a lot of sense. The main problem I'm having is not understanding the game (as mentioned in the OP). Seems like you know UX design as well.

Share this post


Link to post
Share on other sites
AJAX   

Yeah, it's my day job, so it's kinda cheating :D

 

 

It's obvious why it was designed that way in the first place but I'm wondering whether there'd be an alternative way it could be done? 4 clicks (or steps) seems to be as short as it could be but layout wise, could it change so it's not so 'PR' and differentiates itself? Whilst the game is based on the same (or similar) formula it'd be refreshing to have something new but still just as intuitive... at least then people wouldn't be pointing their fingers saying it's exactly (or very close) to PR.

Share this post


Link to post
Share on other sites
r0tzbua   

It's obvious why it was designed that way in the first place but I'm wondering whether there'd be an alternative way it could be done? 4 clicks (or steps) seems to be as short as it could be but layout wise, could it change so it's not so 'PR' and differentiates itself? Whilst the game is based on the same (or similar) formula it'd be refreshing to so something new but still just as intuitive... and at least people wouldn't be pointing their fingers saying it's exactly (or very close) like PR.

 

One of the questions is if change for the sake of change is useful, or if reworking the things that work (I changed some parts from vanilla PR in sake of Usability like adding the amount of players, or setting an "inactive" state for easier role selection) is maybe the better choice. The second question is how far Squad needs to differentiate itself from PR, since I think old-schoolers don't need a differentiation and new-schoolers may not think "that looks like PR", but rather have a working UI that suits the game that's meant to be played.

 

That said, I'm sure theres other approaches to this that haven't been explored, but seeing that a lot of those games work in the same direction I don't think it's the wrong base direction.

 

The use cases for this type of menu are quite simple:

 

1. I just joined a game and need to select a Squad, then a role

2. I just died and simply need to respawn

3. I just died and want to change my role/squad and then set my spawn point

4. I want to look at something related to my Squad (as a living person)

5. I want to change team, and then all the rest

 

So the way with the two "tabs" for Squad and Role for the left content section and the map/respawn section on the right, makes it possible that most of the use cases can be achieved with 2 or 3 clicks, while keeping the player in a nice visual flow.

 

If we, for example, would reduce the map size and put the squad section next to the Role section we would most likely overload the screen completely and make it hard to understand. If we use 4 tabs (most likely 3, because "Team" would simply switch Team) most of the use cases wouldn't be as easy anymore, while some stay the same (for example simple respawning, you would most likely arrive at the "Map" tab when you are dead).

 

Another approach to the Tabbed Navigation in the left content block could be expandables, though I'm not sure if they work out here :D (quick, very rough draft)

 

guispawnscreenv2.athu7zyzw.png

Share this post


Link to post
Share on other sites
AJAX   

Here's that attempt - but I kinda gave up because it's not really viable...

 

squad_role_tabbed_v2_zpsnas8i6nd.jpg

 

Also looks great r0tzbua - I'll have a stab at putting my spin on yours if you don't mind.

Share this post


Link to post
Share on other sites
r0tzbua   

Also looks great r0tzbua - I'll have a stab at putting my spin on yours if you don't mind.

 

Sure man, grind away, I'd give you the source files, but it was done in Sketch and theres not too many people using that.

 

I like that an awful lot, r0tzbua.

 

Thanks!

Share this post


Link to post
Share on other sites
AJAX   

Sure man, grind away, I'd give you the source files, but it was done in Sketch and theres not too many people using that.

 

 

Thanks mate... in the meantime - the radial menu was one of the first things I was playing around with but never went back and finished. Will return to it eventually (and may even do a dark themed version) but would be good to get some thoughts on it as well. The compass oddly was done before I saw this https://s3.amazonaws.com/media.joinsquadgame.com/BootCamp/hud_design.jpg which is nice as it is.

 

squad_radial_zpsvwmsputa.jpg

 

Apologies for the crappy animation...

 

Radial_Animation_zpsab1hs4ie.gif

Share this post


Link to post
Share on other sites

Yes please, but maybe lower the opacity slightly. It's a rather large element in the middle of the screen, so giving the player a bit more visibility through it would probably be a good idea.

 

Apart from that, I adore it. So much.

Share this post


Link to post
Share on other sites
AJAX   

Yes please, but maybe lower the opacity slightly. It's a rather large element in the middle of the screen, so giving the player a bit more visibility through it would probably be a good idea.

 

Apart from that, I adore it. So much.

 

No worries - will do. Cheers.

Share this post


Link to post
Share on other sites
r0tzbua   

Very nice, like the color scheme on the map, I'd tweak the red and the green a bit though regarding color blindness, because the red and the green are a bit close to each other right now (you wouldn't guess how big of a problem color blindness is in the gaming scene):

 

bildschirmfoto-2015-0lbs50.png

 

(Quick Photoshop screencap, it's resized from Retina, so ignore the blurriness)

Share this post


Link to post
Share on other sites
AJAX   

I'd tweak the red and the green a bit though regarding color blindness, because the red and the green are a bit close to each other right now (you wouldn't guess how big of a problem color blindness is in the gaming scene)

 

 

Thanks mate - really appreciate the invaluable feedback... have learnt so many things I wouldn't have even thought of. I'm re-looking at it from both angles now so whether you're colour blind or not, it should 'hopefully' look half decent.

Share this post


Link to post
Share on other sites
r0tzbua   

Thanks mate - really appreciate the invaluable feedback... have learnt so many things I wouldn't have even thought of. I'm re-looking at it from both angles now so whether you're colour blind or not, it should 'hopefully' look half decent.

 

Yeah there are different approaches to that. Either you go the way of the lowest common denominator which means it should WORK for both types (broken down, "two" types, of course there are so many "different" variants of color blindness), most of the time that means it looks good for people with normal vision and simply works (which means, "distinctable" colors) for people that are color blind, or the way that DICE does it with Battlefield (at least in 3 and 4 it did, haven't really looked at Hardline) where there is a "color blind mode" to those things where they switch up the HUD and GUI colors so they are still distinctable.

Share this post


Link to post
Share on other sites
AJAX   

Yeah there are different approaches to that. Either you go the way of the lowest common denominator which means it should WORK for both types (broken down, "two" types, of course there are so many "different" variants of color blindness), most of the time that means it looks good for people with normal vision and simply works (which means, "distinctable" colors) for people that are color blind, or the way that DICE does it with Battlefield (at least in 3 and 4 it did, haven't really looked at Hardline) where there is a "color blind mode" to those things where they switch up the HUD and GUI colors so they are still distinctable.

 

 

Did a little bit of research into it and it appears some games just have filters which combat this. I've nonetheless changed the colours which should look similar across Protanopia and Deuteranopia - the latter being the most common (apparently). Obviously flushed a lot of the red out of everything. Removed the flags and replaced with icons. Black is the enemy, blue is the ally, yellow is your squad. These are the only two that were supported in PS proof setup as well. Interesting challenge/exercise.

 

SquadMap_sRGB_2_zpssjwtn8vs.jpg

Share this post


Link to post
Share on other sites
Rusty   

That looks great Ajax, Not sure if the compass is needed but I noticed it was removed. Correct me if I am wrong but all PR maps are oriented in the same direction on the slotting screen so having a compass might not be necessary. 

Share this post


Link to post
Share on other sites
AJAX   

That looks great Ajax, Not sure if the compass is needed but I noticed it was removed. Correct me if I am wrong but all PR maps are oriented in the same direction on the slotting screen so having a compass might not be necessary. 

 

Nah - don't think it's essential. 

 

Here's an update - colours more vibrant and punchy. Playing around with the map rather than having satellite image as well...

 

SquadMap_Dev4_zpsolau1ju4.png

Share this post


Link to post
Share on other sites
Kraken   

You've definitely got a great eye for this stuff, every iteration is more and more impressive. Nice work sir.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×