UI Design Help?

24567

Comments

  • Here's a first pass at a UI mockup for Helm.

    Some notes:

    One goal is to create identifiable shapes that a crewman can recognize at a glance as being information (square) or interactive (rounded).

    Another goal is to make the whole UI more "holographic" and a tiny bit glowy without going overboard.

    Overheating of an item would change it's whole color as well as toggle a thermometer icon, which is helpful if you're using a touchscreen and your hand is over the control.

    Every item has been spaced equally from the edges of the screen to create a more balanced layout.

    Icons added to info and buttons to create a visual language that should help the crewman better understand his screen at a glance, the icons are a bit of an abstracted design that mostly keeps to basic geometric shapes without being overly detailed.

    image

    Thoughts? Is this a good direction? Is it even implementable?

    While I was building this in Photoshop I was thinking about it in terms of CSS, which is admittedly probably not the best analog, but it's what I'm most familiar with.
  • Only have 2 seconds to reply. So answering the most important question. Can this be done? YES. No problem. Requires a bunch of code changes, but worry not, that's my skill :-)
  • Nice job indeed.
    I'm bit reserved on usability of sliders as they are somewhat thinner and point of touch seems to be smaller. I would also like to have bit more space between both sliders and "request dock" to avoid touch screen problems.

    As web developer my self I like your "CSS" way of thinking. It also helps us to develop web widgets to game (additional info displays etc) that have similar look and feel than the core game.

  • Nice job indeed.
    I'm bit reserved on usability of sliders as they are somewhat thinner and point of touch seems to be smaller. I would also like to have bit more space between both sliders and "request dock" to avoid touch screen problems.

    As web developer my self I like your "CSS" way of thinking. It also helps us to develop web widgets to game (additional info displays etc) that have similar look and feel than the core game.

    Yeah, showing it to a few of my friends, one of the big suggestions was to increase the size of the sliders, and I completely understand and agree with that, so that'll be top of my list for a v2 mockup. Spacing is also a valid point, especially with consideration to touch screens, that and both impulse and warp kind of bleed together.

    Right now, all elements are 40px wide, I'm thinking that's just fine for the static display items, but I may need to up it to 60px for interactive items.

    I also forgot that the Combat Maneuver bar is a progress bar that drains as it's being used, so that's something I also need to address (and I've got an idea for it.)

    One additional idea I had was to move the station switching to a stacked format on the upper right corner, most of the stations don't utilize this area at all, so it might work well there (I also have icons designed for each station.)

    I'm going to try and avoid moving items as much as possible, but I also think the UI should be as familiar as possible when jumping between stations.
  • Ok here's an updated version with larger buttons and sliders with the addition of the station switcher UI to the top right corner.

    image

    And here's a version with a concept for the Red Alert state

    image

    Thoughts?
  • edited March 2016
    That looks nice and clean! I like those thin lines and the new font. Good work with the icons, too. I like the alert indicator a lot!

    One thing I really dislike in the current design are text that are sideways ("impulse", "warp", and other things in different views). I get that sliders are representing physical sliders and it's only natural that they are vertical. I don't know, it could be only me thinking about it. =D
    Any thoughts about it?

    By the way, you left jump action entirely out of your mockups. It could be a vertical bar at the bottom left corner or something. I'd like it to be big enough that precise jumps could be easier. It's hard enough to try measure the right distance. I quickly drafted something just to show my idea. Feel free to discard. :)

    image

    To get all actions for the helm view set "Warp/Jump" to "Both" as shown in the image when creating server:
    image


    Also I'd like to propose very minor thing for impulse slider. Neutral position indicator could be like that? Better, worse?
    image
  • That's heading in a very very nice direction.

    Some things. The top right corner, I did reserve that a bit for future use. And the current game does use it when you have the "main screen controls" enabled for that station. (It adds a drop-down there). But let's not worry about that too much.

    Implementation wise. The game uses a "virtual" screen of 900 pixels height and a variable width to draw on. And then scales that virtual screen with your monitor resolution. In general, controls are "bound" to the left right or middle of the screen.

    Naturally, I have "widgets". So if I change 1 slider, I change them all. So once I start implementing these changes, it will be quicker to get mockups for the rest of the stations, as they are using the new graphics then.

    For me, it's important the game scales to a 4/3 resolution. As the touch screens we use have that ratio.

    The game can have player ships with both a warp-drive and jump-drive. Right now the game just draws these two next to each other, slightly overlapping the radar view if it has to.
  • New red alert looks great.
    However I would prefer that displaying alerts in screen would be optional as if your bridge have dedicated dmx lights for alerts its quite redundant to have alerts drawn in screen.

    Also there is currently different 5 stations available but nothing states that there couldn't be more. Nobody really plays with all the stations assigned to himself so I don't know if there really is a problem. However it just needs to be taken in account.
  • wooo
    this will boost the feeling of being on a real bridge.
    i total like it
  • @HenriVesala As the red alert will most likely still be an alpha transparent image drawn over the screen, you can simply make that 100% transparent with a mod if you have DMX lighting for this goal.

    And there are 12 different stations ;-) but the station selection could also be a dropdown box, like the mainscreen view controls.
  • Here's a quick WIP of weapons.

    image

    I actually like the idea of the station select being a dropdown-like element, that way it takes up minimum screen real estate, but it's still there if/when you need it.
  • Nice job with the weapons station. Probably front and rear shields could be displayed better since as of now it's not clear which "100%" is telling front shield status. Also some ships might have more than two shields in the future, most likely four. Any thoughts?
  • edited March 2016
    Is it possible to create simple animations to the buttons? Like hover when using mouse and different color/size when button is clicked/pressed? Maybe even sound (which would be easy to toggle off).

    From user experience perspective, it would be nice to have toggleable quick menu in a form of modal. Pressing esc would bring up the modal and there could be couple of buttons like "exit, disconnect, close and volume slider for music and sound effects". The modal could be toggled by pressing esc or a button top right corner next to station switcher dropdown.

    image

    Sketched of quick menu really quickly.
  • Hmm... I like the idea of a more visual display for the shields, is that something you'd be interested in trying out @daid ?

    Alternatively we could just list them down the left side individually:
    (Shield Icon) Fore 100%
    (Shield Icon) Aft 100%
    Which is a simpler solution.

    Would it help at all if I made the mockups as HTML pages? Because I could show animation ideas in that format.
  • Ok, so here's a quick concept for an "all in one" shield widget for Weapons, basically gives you the readouts for each shield array and the center button toggles the shields on and off, if the shields are on, the whole thing would change to a blue color.

    image

    As this would probably be a really massive overhaul, I'm curious to hear what @daid has to say.
  • It would be great if you can create HTML mockup pages.
    We could use your creations as base for web based widgets.

    Also I like the shield "circle". Maybe just bit stronger blue glow when at 100% so graphical difference between percentages would be more obvious.

    Energy bar looks bit orphan now. Do we really need the text "ENERGY" at all?
    Could it just be "⚡ 950"? Its minimalistic and really common way to display energy in games.
  • If the Icons are strong enough to convey exactly what they are, then the text can probably be eschewed.

    Here's the complete v1 mockup of the Weapons station, I split out the shields into "Fore" and "Aft" since that seems like the easier way of doing it at the moment.

    image
  • Note that not all ships have fore and aft shields. For example the player fighter only has a single shield covering the whole ship (in the latest release).

    And most of the code is prepared for having more then 2 shield areas. (Except for engineering)

    I'm looking at how hard some parts are to implement. By just copying part from your mockup. I noticed that as soon as I replace the button with the new style. The early menus also need some cleanup then.

    Also, I'm having this issue:
    image
    When the thin lines are not drawn properly when scaled. Still need to check if my code, or something else is to blame here.

    On close inspection, some of the texts on buttons also have a slight "glow" to them. But my current text rendering method does not support this.
  • I'm so looking forward to these changes. I hope they make it in before my birthday party in a couple weeks.
  • (Also, a copy of that font would really be a good start :) )
  • edited March 2016
    daid said:

    Note that not all ships have fore and aft shields. For example the player fighter only has a single shield covering the whole ship (in the latest release).

    And most of the code is prepared for having more then 2 shield areas. (Except for engineering)

    I'm looking at how hard some parts are to implement. By just copying part from your mockup. I noticed that as soon as I replace the button with the new style. The early menus also need some cleanup then.

    Also, I'm having this issue:
    image
    When the thin lines are not drawn properly when scaled. Still need to check if my code, or something else is to blame here.

    On close inspection, some of the texts on buttons also have a slight "glow" to them. But my current text rendering method does not support this.

    Yeah, thin lines could prove problematic in terms of scaling, and some of the concepts so far do use slight glows, though I don't think the glows are 100% necessary.

    Without knowing how the whole UI actually works and what capabilities it has, I'm just guessing on what's possible. Like I said, I'm most familiar with CSS so my brain is naturally using that as a point of reference. If you want me to slice up some of these UI elements for testing, I can definitely do that (I should probably pull my own repo on github, eh?)

    Two questions:

    A Is it necessary to scale the UI elements (I assume the answer is "yes" primarily because of android phones and smaller screens)

    B Is it possible to just use buttons with text as part of the image? Are there downsides, are there upsides?

    If you're happy with the general direction, I'll keep plugging away on concepts.
  • daid said:

    (Also, a copy of that font would really be a good start :) )

    Bebas Neue
  • edited March 2016
    image
    I created simple power gauge web widget. Element sizes & etc needs some work.
    @Interesting John can you provide some sort of style guide?

  • Two questions:

    A Is it necessary to scale the UI elements (I assume the answer is "yes" primarily because of android phones and smaller screens)

    B Is it possible to just use buttons with text as part of the image? Are there downsides, are there upsides?

    If you're happy with the general direction, I'll keep plugging away on concepts.

    A: Yes. The touchscreens I use are 1024x786. Laptops have different resolutions. I don't think you can make a decent game without scaling. The android version is a nice bonus, but resolutions on phones are quite good actually.
    For now, I'll just accept the defects on smaller resolutions.

    B. There are quite a few places that use "dynamic" text on buttons. Relay for example. Also, translations will be a whole lot more complex. And building new features as well.


    Yes. I like where this is heading.
  • With "native" android you can give the application different assets for different DPI & resolutions, which is generally used to solve the thin line problem.

    As to the powered on shields turning blue and the turned off shields being white; I'd make that clearer. We've been on a lot of missions where newbie players forgot to turn the shields on / off. I don't have any solutions for it though.
  • Shield indicator could be a lot bigger and more visible. Maybe something like proposed alert indicator so it would be around the middle circle?
  • Things should be clear but not enforced as part of the fun are the mistakes that happens. So I wouldn't give shields over the top indication.
  • image
    A change of font, and a quick hack on the button images does quite some wonders.

    While this all looks fine and perfect. It's not. It's a perfectly styled screenshot. The mouse-overs are broken. The buttons are not properly alpha-transparent, which you cannot see due to the background being the proper color on this menu.

    So, if you dare, look at this link:
    https://i.imgur.com/ZJBFUbh.png

    It shows that I can make look the sliders proper as well. It also has "alpha" problems. But I'll worry about the proper artwork later. First I'll fix up the widgets so they can be rendered mostly as in the mockups.

    So, work to do:
    * Add option for icons to buttons (with alignment to the left and right)
    * Improved "key-value" widget. As seen for energy amount, but also vertical for the impulse and warp info.
    * Gradient background with the crosses (more work then you would expect due to tricks I pulled on how the radar is drawn, which is actually square instead of round)
    * "progress bars", as seen for the combat maneuver.

    And most likely shitloads of more things :-)
  • That's looking pretty good!

    I can generate some background images with proper alpha if that helps.

    I can also generate the background gradient with the crosshair grid, I'd assume that this should be built at a fairly large size, and then scaled down to fit dynamically with the display?

    (man, I'd kill for the UI to be written in HTML :P)
  • edited March 2016
    One of the things I like about EE is the clean look of the widgets. I've changed colors of them quite easily for a different look but that's about it. Please don't get too flashy with the displays. If you look at some of the other games the interface is all flashy and glowing making it look very game like. I guess I like the cleaner uncluttered look like Trek LCARS more than the fancy eye candy of Artemis.
Sign In or Register to comment.