Jump to content
AJAX

HUD / UI Design Visual Concepts

Recommended Posts

Nice....can the extra grid lines be toggled until needed for Coms? Would be nice to toggle them because my eyes dont see map clearly with them, unless there is a map zoom function which I dont know if there is one or not.

Share this post


Link to post
Share on other sites

Appreciate the feedback... still nowhere near happy with it yet.

 

I feel it wastes a lot of space, though. It's not as good as it could be for at-a-glance information, either.

 

Do you think if Squad was a separate tab from Team, eliminating one of the lists - would that work better? Just trying to work out what you mean - does it look overly cluttered?

 

 

Nice....can the extra grid lines be toggled until needed for Coms? Would be nice to toggle them because my eyes dont see map clearly with them, unless there is a map zoom function which I dont know if there is one or not.

 

Toggle is a good idea - the line overload annoys me as well.

Share this post


Link to post
Share on other sites

Here's the latest with a few things taken into account that Strepto posted above.

 

Fireteam management would use something like this https://jqueryui.com/sortable/ using the move icon. Ability to tag player, promote to squad leader and kick player are in the dropdown. Example of kick player once selected, option to confirm or cancel. To lock there's a simple lock button (which would be white if it wasn't locked). Greyed out (e.g. Schwarzenegger) is dead dead.

 

UI is an overlay on the gameplay screen with a blur filter to add more focus on the UI. Will keep looking into other stuff so I understand it a bit better and can develop it even further.

 

Squad_TeamSquadMap_UpdatedOverlay3_zpscb

 

This is a sweet UI, just awesome.

 

I like how it has a different tab for your squad, great idea.

 

One thing I can suggest is remove transparency from the text areas.

Share this post


Link to post
Share on other sites

One thing I can suggest is remove transparency from the text areas.

 

 

Yeah - was intending to do an opaque version. I think it'd be a lot more easy on the eyes and remove a lot of the busyness (make it clearer).

Share this post


Link to post
Share on other sites

very nice progress, one direction I'd maybe think would be cool is if it would be a bit less boxy, I alway think it's nice to clean things up without having hard borders, using negative space (whitespace, whatever) is always a good way to seperate things without putting a huge amount of different boxes on the screen.

 

Especially the two left boxes belong together, I think that could be something that shows also in a visual way.

 

Love the drag and drop fireteams though, it's really easy in UE4 as well, so there's that :D

Share this post


Link to post
Share on other sites

Love the stuff in this thread, great work! Really nice designs.

 

I also liked how the earlier designs weren't so similar to PR. People here tend to resort to the PR stuff too much without good reason, so don't be afraid to break away from it. ;)

 

Something I find strange is how in most of the designs, the order of the buttons suggests Role -> Squad selection. In reality, I'm 100% sure it will be the other way around. (Select team -> squad -> role -> spawn). Arranging things in such order could help the UI be more intuitive.

Share this post


Link to post
Share on other sites

Small update - Added on / off toggle for the keypad grid as suggested by XRobinson. Also added the Call/Deny Medic button as suggested by WARti0k0ne -BG-. Also switched the Squad / Role in the main nav as mentioned by Aleon.

 

 

very nice progress, one direction I'd maybe think would be cool is if it would be a bit less boxy, I alway think it's nice to clean things up without having hard borders, using negative space (whitespace, whatever) is always a good way to seperate things without putting a huge amount of different boxes on the screen.

 

Especially the two left boxes belong together, I think that could be something that shows also in a visual way.

 

Love the drag and drop fireteams though, it's really easy in UE4 as well, so there's that :D

 

 

Well this is what I was chatting to you about earlier - I wonder whether there was a completely different way it could be approached. Less boxy is definitely one way but I think with technology these days and what can be done much easier (like the drag and drop for Fireteams) as opposed to what's in PR which is based on 10+ year old tech, whether there'd be a far more simple way to approach the whole UI/UX and the way you go about things (setting up a squad etc). I'm still lacking in both UI/UX skills and knowledge of the game so a lot of it is just guess work. I'm not at all confident yet in what I've done - I'm just relying on the feedback you guys are giving me.

 

Anyway, will take up your challenge (as I enjoy them). Also gotta do a more opaque version as well.

 

Squad_TeamSquadMap_Development_zpsb4pbru

Share this post


Link to post
Share on other sites

Also gotta do a more opaque version as well.

Squad_TeamSquadMap_Development_zpsb4pbru

yes, please. (more opaque version)

also dont forget the keypad grid within each A1 B2 C3 etc grid!

Share this post


Link to post
Share on other sites

One small thing I'd utilize is patterns that are already known and used throughout UI design.

 

If you introduce "filters" to the map, you could even filter more than only the keypads, like what units are shown (only the ones in your squad, or all, or only squadleads), or even if you want to see the capture points, it would be a cool filter system next to the map, I experimented on my topo map with it for a bit and it seemed to have worked out nicely.

 

I wouldn't really choose "on - off" things for it though, a simple Icon that is either opaque (filter = on) or see-through (filter = off) would most likely be enough and save some screen estate if you want to introduce more filter settings.

Share this post


Link to post
Share on other sites

One small thing I'd utilize is patterns that are already known and used throughout UI design.

 

If you introduce "filters" to the map, you could even filter more than only the keypads, like what units are shown (only the ones in your squad, or all, or only squadleads), or even if you want to see the capture points, it would be a cool filter system next to the map, I experimented on my topo map with it for a bit and it seemed to have worked out nicely.

 

I wouldn't really choose "on - off" things for it though, a simple Icon that is either opaque (filter = on) or see-through (filter = off) would most likely be enough and save some screen estate if you want to introduce more filter settings.

 

 

Great idea.

Share this post


Link to post
Share on other sites

Do you think if Squad was a separate tab from Team, eliminating one of the lists - would that work better? Just trying to work out what you mean - does it look overly cluttered?

 

I think that everything in the squad list could be incorporated into the team list, giving more space for the map. I prefer consistency, so if the map re-sized and changed position it would be distracting. Its current size is too small, so that's where I think the space is wasted. In my opinion, the map should take up at least 2/3rds of the screen

 

When it comes to the fireteams, I think it would be better to have the squad member slots color coded instead of having separate fireteam slots. It would also visually differentiate team slots from squad member slots, improving the at-a-glance readability. The levitating buttons at the bottom should probably also be attached to the map and lists, in my opinion.

 

It's not cluttered at all right now, and probably should be.

Share this post


Link to post
Share on other sites

Is this fan art or are you creating these for the game?

neither of those things.

OP is using their creativity and skills to produce 'ideas' for what could potentially inspire the in-game decisions devs make about the UI.

Share this post


Link to post
Share on other sites

I think that everything in the squad list could be incorporated into the team list, giving more space for the map. I prefer consistency, so if the map re-sized and changed position it would be distracting. Its current size is too small, so that's where I think the space is wasted. In my opinion, the map should take up at least 2/3rds of the screen

 

When it comes to the fireteams, I think it would be better to have the squad member slots color coded instead of having separate fireteam slots. It would also visually differentiate team slots from squad member slots, improving the at-a-glance readability. The levitating buttons at the bottom should probably also be attached to the map and lists, in my opinion.

 

It's not cluttered at all right now, and probably should be.

 

Thanks for clarifying that. Currently doing a completely different version. Tabbing the team/squad and map will be much bigger (focused) because of that. Have taken all you've said into account.

 

 

Is this fan art or are you creating these for the game?

 

 

Definitely not for the game mate - I've never done UI design before so it's just practice (a side project) to hopefully improve my skills in that area of design. They'd be better to get someone that specialises in UI/UX... there are even some agencies that do. Here's one I was looking at for inspiration http://work.gmunk.com/filter/Graphics/Medal-of-Honor-Warfighter  At the same time (I hope) devs will read the comments/feedback in this thread to help give a clearer picture of what 'features' the community are after, the people here all seem to have great ideas.

Share this post


Link to post
Share on other sites

Man, that is some sexy UI. I can definitely sound off on the map comments. The map may look fine on your screen being that small, but think of people with smaller monitors than you. All of the elements are squashed down so your dots may not even be visible to them. 

Share this post


Link to post
Share on other sites

Thanks for clarifying that. Currently doing a completely different version. Tabbing the team/squad and map will be much bigger (focused) because of that. Have taken all you've said into account.

 

 

 

 

Definitely not for the game mate - I've never done UI design before so it's just practice (a side project) to hopefully improve my skills in that area of design. They'd be better to get someone that specialises in UI/UX... there are even some agencies that do. Here's one I was looking at for inspiration http://work.gmunk.com/filter/Graphics/Medal-of-Honor-Warfighter  At the same time (I hope) devs will read the comments/feedback in this thread to help give a clearer picture of what 'features' the community are after, the people here all seem to have great ideas.

 

We definitely are, this is Tooners next tasking actually.

Share this post


Link to post
Share on other sites

Your work is pretty damn good. I'd love to see something similar to this in squad. Great job!

Share this post


Link to post
Share on other sites

Here's a completely fresh stab at this... full screen though but bigger map

 

Squad_Flat_FullScreen_zpshkkrqvyd.png

 

One small thing I'd utilize is patterns that are already known and used throughout UI design.

 

If you introduce "filters" to the map, you could even filter more than only the keypads, like what units are shown (only the ones in your squad, or all, or only squadleads), or even if you want to see the capture points, it would be a cool filter system next to the map, I experimented on my topo map with it for a bit and it seemed to have worked out nicely.

 

I wouldn't really choose "on - off" things for it though, a simple Icon that is either opaque (filter = on) or see-through (filter = off) would most likely be enough and save some screen estate if you want to introduce more filter settings.

 

 

Is that what you mean by having filters for the map? Or something along those lines?

Share this post


Link to post
Share on other sites

Is it weird that I keep wanting to ask you to change the color schemes a bit so they're not.. so... i'm not sure how to say it -- flat? I guess if there's one thing I like about the modern Battlefield games, it's their UI. It pops, it's visually stimulating. 

 

Your format's really clean and I dig it -- but could you maybe throw some different color palettes in for the bigger buttons on the left? Or perhaps add some sort of luminosity/transparency to them? Perhaps throw the whole UI over a Squad screenshot and drag the transparency down a little bit?

Share this post


Link to post
Share on other sites

AJAX, please don't stop doing magic. Your stuff is spot on. Devs, hire this guys already!

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

×