Jump to content
Game-Labs Forum
theSpatchula

User Interface Ideas (Updated 3.20.15)

Recommended Posts

Hey all,

I am currently working alot with UI/UX and jumping at any chance to mess around with it in real scenarios. 

 

I threw together some ideas for UI and figured I'd share them incase anything is worth consideration :)

 

 

Active UI UPDATED 3.12.15

 

SVX12pU.jpg

 

Inactive UI UPDATED 3.12.15

sVQQBWT.jpg

 

Damage Direction Indicator ^^^

Damage Direction Indicator, Many games have this now. Seems relevant as im sure a broadside would do something to your captain even if its just a little annoyance in your eyes. Im testing with maybe splintering wood instead of just a red gradiant. 

 

 

Ammunition and Cannon Loadout

L5e2hvx.jpg

 

7t5EwUh.jpg

 

 

 

 

This video shows how the images above would be represented in real time. 

Its a little clunky but it gets the point across. Again this would consolidate you cannon loadout to the hotbars and you would have full control of what ammo is loaded into each deck/side.

 

Details are tiny you might want to watch in full screen. 

Also, reload wouldnt be that fast, its just for video purposes  :)

 

I removed crew status from hot keys area, and replaced with full control off ships ammunition and cannon loadout. You can control each individual deck and sides ammunition separately or altogether. 

 

Amount of available cannons on that deck is shown in the center of the hotkey. Reloads take place directly over the hotkey like a cool down in most MMOs. 

 

 

Crew Status

IpZiItD.jpg

 

g6tJYkC.jpg

 

Crew Status was moved above the map, and I have removed the green loading bar/circle loading bar from before. When changing status, current status will deselect and selected status will start a cooldown. Once done that status will remain hightlighted.

 

If a status has multiple options it will pop a second menu up much like ammunition. 

 

I added Flee to replace repair as repair kits dont necessarily make sense and figure it can be handled by survival. Flee is a first attempt at explaining dropping cargo and cannons overboard. Currently this would only be related to cannons. Drop 25% means you drop 25% of your cannons, 50% you drop 50% and so on. 

 

Its not a perfect system but thought it was an interesting start to a discussion that has been going on. 

 

Chat Window

 

iElfWxF.jpg

 

This is an example of an active chat window. A user would be typing or hovered over their chat window.

 

Wx6EP75.jpg

 

This is an example of an inactive chat window. A user would see this as messages came through but wasnt actively interacting with this element.

 

 

Alerts and Warnings

cAxnnDd.jpg

 

Along with the whistles this feed would provide a captain with shout outs from his crew for collisions, fires, leaks and so on. 

RRWOQJc.jpg

 

These Icons will show number of leaks, fires, and whatever other alerts that should be available to a captain.

 

 

Ship Information and Status

 

UPDATED 3.12.15

JzYJ0YG.png

 

 

UPDATED 3.19.15

This is a crude representation of how the compass might work. Im sure the movements arent accurate to how it would actually work, but wanted to show the moving parts (added back in the water level).

 

 

 

This panel much like the one that already exists combines the current seperate ship elements and combines them into one area. This is still rough, but working through how something like this might work.

The Crew, Sail Integrity, and water level are shown on the upper right.

 

Water Pump, Rudder, and Magazine Status are shown on the bottom right along with the speed.

 

Ships Hull integrity is surrounding the ships icon. The thin green circle around the ship is broken up into 4 sections to represent, the left, right, front and rear of the ship. 

Beside the ship is the sail directions and control, laid on top much like its handled now. 

 

Wind and direction is still very much the same of the previous and so is rudder control. 

 

Skipper Auto and Manual sit atop all these elements beside the Icon alerts. 

 

Ship Status and Information  is still being worked out. 

 

Map

0vrLysF.jpg

 

Not much has changed from before except crew status has moved above the map.

 

Customizable UI

 

2tymO5w.png

 

And anyone at GameLabs please dont take this as I don't think you guys can handle the UI/UX side of things. I just am a huge fan of the game and currently trying to get myself into the UI/UX market, and figured I would share some ideas.

 

Thank you to anyone who has read this, and happy sailing :)

Edited by theSpatchula
  • Like 25

Share this post


Link to post
Share on other sites

Nice work! Some constructive feedback!

 

The crew status section is a little redundant - would be more elegant to simply highlight the selected crew status. No need for additional display in that regard :)

 

The ammunition section is too intrusive - probably better to fan out horizontally (three levels) as opposed to vertical - would definitely have a better flow cursor-wise.

 

And you can go straight ahead and kill proxima nova with fire. Repeatedly. hehehe.

 

From a humble AD - keep it up!!!! :)

Share this post


Link to post
Share on other sites
Guest raat

I like it.  However, the popup bar for decks/ammo type going vertical looks like it'll get very intrusive.

Share this post


Link to post
Share on other sites

Nice work! Some constructive feedback!

 

The crew status section is a little redundant - would be more elegant to simply highlight the selected crew status. No need for additional display in that regard :)

 

The ammunition section is too intrusive - probably better to fan out horizontally (three levels) as opposed to vertical - would definitely have a better flow cursor-wise.

 

And you can go straight ahead and kill proxima nova with fire. Repeatedly. hehehe.

 

From a humble AD - keep it up!!!! :)

 

 its actually gotham haha but I work for a company that primarily uses proxima nova haha. I'm planning to go through this and possibly theme it a little more to the time era.

 

Crew Status I should of made clear that was on visible while changing states, but its probably something that can be easily handled with showing progression on the button itself.

 

I agree on how ammunition is handled. Was trying to figure out best way to break it out, I will try horizontal and see if it feels any better.

 

Thanks all, for your feedback its a huge help :)

  • Like 1

Share this post


Link to post
Share on other sites

I don't know how relevant it will be come the final game, but I've constantly been thinking i would like hull indicator to change colour while it's repairing.

Just so i can see out of the corner of my eye when its finished rather than consistently having to take my eye off the battle to check. Having your repairs idle during a fight could cost you some valuable hull and even put your gun deck under.  You could also make the sail indicator glow while its repairing in the same way.

  • Like 2

Share this post


Link to post
Share on other sites

Currently finishing my education in the UI/UX field and I appreciate the effort you went through to make these mockups. Nicely done.

 

I do however think that part of the experience for NA is that you don't get too many textual feedback. You have to listen to the ships whistles and bells and the absence of some UI parts helps improve immersion.

 

I fully agree on the chat part, that's a good idea.

I do think the existing visual part for the guns and ammo is better though. You can easily see what ammo is loaded and what mode the crew is in and you can also see which guns are loaded though it could use an indicator for which side of the ship the guns are on. 

I also think the compass is a bit crowded with information though the relocating of the ammo/pump/rudder information is a good idea.

 

Mixed feelings. Less can be more ;), but some of your ideas for relocating stuff and expanding features looks good.

  • Like 1

Share this post


Link to post
Share on other sites

Thanks 

 

Currently finishing my education in the UI/UX field and I appreciate the effort you went through to make these mockups. Nicely done.

 

I do however think that part of the experience for NA is that you don't get too many textual feedback. You have to listen to the ships whistles and bells and the absence of some UI parts helps improve immersion.

 

I fully agree on the chat part, that's a good idea.

I do think the existing visual part for the guns and ammo is better though. You can easily see what ammo is loaded and what mode the crew is in and you can also see which guns are loaded though it could use an indicator for which side of the ship the guns are on. 

I also think the compass is a bit crowded with information though the relocating of the ammo/pump/rudder information is a good idea.

 

Mixed feelings. Less can be more ;), but some of your ideas for relocating stuff and expanding features looks good.

 

Thanks for the feedback, Jognt :) 

I agree compass is crowded but trying to figure out the best way to handle it, lot of information that captains need to know. 

 

The textual feedbacks "Collision Warning" I figured could be something toggled on or off. Not every person can or chooses to play with sound on. Having the option to have something notify visually felt would be a good optional piece. 

 

The alerts for fire, and leaks are just to replace the current Leak 0 | 0 that sits in the current ship avatar window. 

(At least my reasoning behind it)

 

Ammunition and Cannon Loadout is still a tough one. I tried combining them so that its a more condensed system but maybe the current system works better. This version just allows for more control over the ammunition of each deck and combines the current reload of the cannons directly into the hot keys themselves. 

 

Thanks again everyone for the feedback it's a huge help 

Share this post


Link to post
Share on other sites

I really like the effort and work you put in to these. I would think it might fit the feel better if the UI was condensed into some just like what you have in the bottom left.  Maybe if it was more hidden with expanding menus / context menus it would work better.

 

 

The other thing that is missing is the sail details.

Share this post


Link to post
Share on other sites

Great - can't wait but I would really like to see the gun loaded indicators orientated towards the top of the screen. ie. left guns on the left, right guns on the right, bow chasers at top and stern cannons at bottom.

Share this post


Link to post
Share on other sites

Working on Consolidating more, making the UI a little more "pretty" and will also be working on showing the UI in action so you can see how it might work in motion.

 

 

Great - can't wait but I would really like to see the gun loaded indicators orientated towards the top of the screen. ie. left guns on the left, right guns on the right, bow chasers at top and stern cannons at bottom.

Not sure what you mean here?

Share this post


Link to post
Share on other sites

I have always liked a transparent chat window that darkens as things pop up or you hover over. I feel like it draws my attention when it needs to and disappears when I don't need it.

Nice work.

Share this post


Link to post
Share on other sites

The Damage Indicator is actually around the ship on the compass. That green circle is broken up into 4 sections to indicate each side. 

They will gradually go down and change color as a side takes damage.

 

I will be adding a animation to show how would work. 

 

JzYJ0YG.png

Edited by theSpatchula

Share this post


Link to post
Share on other sites

Fabulous work.

#1, I am less a fan of the written warnings (eg, collision warning port side). It is a preference of game play... So I won't bother trying to convince anyone, lol

#2, I love the compass rose, but why the green...? That part confesses me. EDIT: learning to read... It is armour indicator. LOVE IT

Overall - LOVE IT (with small exceptions noted)

Edited by Grim DeGrim

Share this post


Link to post
Share on other sites

I don't like the text for water.  Should fill up like it currently does.  I think the chat should also stay in the current location as it is easier to read that way.

Share this post


Link to post
Share on other sites

Ouu...yeah, I like the water in the compass.

Otherwise I like the layouts. As noted, I'm not big on all the text warnings. I'm off similar opinion to Prater.

This feedback is for the development team. Your work and effort is outstanding theSpatchula.

Share this post


Link to post
Share on other sites

A solution could be to allow the ui to be adjustable.

Meaning, I can drag and drop these little pieces to wherever I want them on screen, and then lock them in place.

Then Prater can put his chat box wherever he likes it!

Edited by Grim DeGrim
  • Like 2

Share this post


Link to post
Share on other sites

That does look nice though honestly I don't mind the one that we have now. I do agree that the water level should be visually represented like it is currently within the compass.

  • Like 1

Share this post


Link to post
Share on other sites

One thing I don't like is the shading of the text.  I like the minimalist UI we have now.  Any changes should be minimalist as well.  That way we can take in the graphics instead of the ui.

 

Also, like the idea of being able to move items.  And to disable parts of the UI we don't want.  I think we should get a 32pt compass with N S NNW, etc instead of degrees.

 

I think we need to also be able to see how many guns we have total on a deck, even when reloading.

Edited by Prater
  • Like 2

Share this post


Link to post
Share on other sites

A solution could be to allow the ui to be adjustable.

Meaning, I can drag and drop these little pieces to wherever I want them on screen, and then lock them in place.

Then Prater can put his chat box wherever he likes it!

 

All great feedback from everyone, super helpful and refining these ideas. 

 

Still working on the compass area as alot is being shown in that one section.

I agree on the customization piece of the UI.

I figured all pieces would be draggable/movable to your preferred position. 

 

Text warnings would be optional say for  those who like to have a text warning, or maybe for someone who is hearing impaired ( always good to have options  for everyone )

 

 

 

I don't like the text for water.  Should fill up like it currently does.  I think the chat should also stay in the current location as it is easier to read that way.

 

I  put the water level back in just trying to not cluster too much into one area.

 

Here is a crude version of how the compass might work. 

 

 

Prater,

I will also add somewhere the number of available cannons currently on your ship, and by shading do you mean the colors? (green)

 

Trying to keep the UI as minimal as possible while providing you all the necessary pieces to your ship. So, hopefully as I hack away at this it gets better each revision. 

I feel the screen might look more convoluted when everything is fully active, but in normal standards is fairly minimal. 

 

Thanks everyone for the feedback. I'm going to keep cracking away at this and try to refine some of the design more, but glad to see everyone giving feedback.

Edited by theSpatchula

Share this post


Link to post
Share on other sites

It might be worth having the water fill the actual ship outline in the centre of the compass rose as it takes on water, rather than the whole of the centre. It's a little more intuitive that way and would intrude less on the background as it's a smaller area... Just a thought

  • Like 1

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


×
×
  • Create New...