theSpatchula Posted March 5, 2015 Share Posted March 5, 2015 (edited) 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 Inactive UI UPDATED 3.12.15 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 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 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 This is an example of an active chat window. A user would be typing or hovered over their chat window. 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 Along with the whistles this feed would provide a captain with shout outs from his crew for collisions, fires, leaks and so on. 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 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 Not much has changed from before except crew status has moved above the map. Customizable UI 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 March 20, 2015 by theSpatchula 25 Link to comment Share on other sites More sharing options...
Greig Posted March 5, 2015 Share Posted March 5, 2015 That a great job done so far! THank you very interesting! Link to comment Share on other sites More sharing options...
Jimieus Posted March 5, 2015 Share Posted March 5, 2015 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!!!! Link to comment Share on other sites More sharing options...
Guest raat Posted March 5, 2015 Share Posted March 5, 2015 I like it. However, the popup bar for decks/ammo type going vertical looks like it'll get very intrusive. Link to comment Share on other sites More sharing options...
theSpatchula Posted March 5, 2015 Author Share Posted March 5, 2015 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 1 Link to comment Share on other sites More sharing options...
Xander Tyrann Posted March 5, 2015 Share Posted March 5, 2015 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. 2 Link to comment Share on other sites More sharing options...
theSpatchula Posted March 5, 2015 Author Share Posted March 5, 2015 (edited) Deleted, moved to top. Edited March 9, 2015 by theSpatchula Link to comment Share on other sites More sharing options...
Jognt Posted March 5, 2015 Share Posted March 5, 2015 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. 1 Link to comment Share on other sites More sharing options...
theSpatchula Posted March 5, 2015 Author Share Posted March 5, 2015 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 Link to comment Share on other sites More sharing options...
Jack Feathersword Posted March 9, 2015 Share Posted March 9, 2015 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. Link to comment Share on other sites More sharing options...
mouse of war Posted March 9, 2015 Share Posted March 9, 2015 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. Link to comment Share on other sites More sharing options...
theSpatchula Posted March 9, 2015 Author Share Posted March 9, 2015 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? Link to comment Share on other sites More sharing options...
theSpatchula Posted March 9, 2015 Author Share Posted March 9, 2015 (edited) Deleted, moved to top. Edited March 9, 2015 by theSpatchula Link to comment Share on other sites More sharing options...
StuffinBeard Posted March 18, 2015 Share Posted March 18, 2015 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. Link to comment Share on other sites More sharing options...
Jack Feathersword Posted March 19, 2015 Share Posted March 19, 2015 Any idea what you would do with the damage indicator? It seems like the hardest part to make useful/small/pretty. Link to comment Share on other sites More sharing options...
theSpatchula Posted March 19, 2015 Author Share Posted March 19, 2015 (edited) 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. Edited March 19, 2015 by theSpatchula Link to comment Share on other sites More sharing options...
Grim DeGrim Posted March 19, 2015 Share Posted March 19, 2015 (edited) 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 March 19, 2015 by Grim DeGrim Link to comment Share on other sites More sharing options...
Prater Posted March 19, 2015 Share Posted March 19, 2015 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. Link to comment Share on other sites More sharing options...
Grim DeGrim Posted March 19, 2015 Share Posted March 19, 2015 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. Link to comment Share on other sites More sharing options...
Grim DeGrim Posted March 19, 2015 Share Posted March 19, 2015 (edited) 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 March 19, 2015 by Grim DeGrim 2 Link to comment Share on other sites More sharing options...
Leviathan Posted March 19, 2015 Share Posted March 19, 2015 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. 1 Link to comment Share on other sites More sharing options...
Prater Posted March 19, 2015 Share Posted March 19, 2015 (edited) 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 March 19, 2015 by Prater 2 Link to comment Share on other sites More sharing options...
theSpatchula Posted March 19, 2015 Author Share Posted March 19, 2015 (edited) 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 March 19, 2015 by theSpatchula Link to comment Share on other sites More sharing options...
Jack Feathersword Posted March 20, 2015 Share Posted March 20, 2015 Seriously i love it. Drag and drop UI is the business. Also tabs on the chat is good too. Link to comment Share on other sites More sharing options...
SueMyChin Posted March 20, 2015 Share Posted March 20, 2015 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 1 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now