Friday 3 April 2015

UI changes - better or worse?

Hello everyone.

Today I've been starting on some UI improvements. One important change is reducing the window's height so it won't cause problems on screens with 1366x768 resolutions.
I've also done a bit of research and it seems that the text lines in Newlife's scene viewer were longer than usability gurus recommend.

So, what I've tried to do is reduce the width of the text window, and save a bit of height by moving most of the buttons to a column on the side of the screen.
Looking at it though, I'm not sure if it's better or not. I've put a few screenshots below, one with a size limit on the buttons and one where they use up all the available space. What do you think, and if you don't like it, then what would you recommend as an alternative?





24 comments:

  1. I really like both, but the first gives a more cleaner and minimalistic style, which is something I love. My vote is for the first.

    ReplyDelete
  2. Logistically, I'd say go with the first one. The buttons are large enough that you're not accidentally clicking anything, but not so large that you need to sweep your desk to get from one button to the other.

    Although, honestly, getting those buttons below the half-way point of the screen would be better still--putting them closer to the interactive fields to, again, minimize the amount of motion needed. But, that feels like it might mess with the aesthetic a bit.

    ReplyDelete
    Replies
    1. "The buttons are large enough that you're not accidentally clicking anything, but not so large that you need to sweep your desk to get from one button to the other."

      ---


      Hahaha, how do you accidentally click huge-ass buttons like that in either layout? I mean the game is text only, buttons stick out already. You'd have to be really clumsy to accidentally click anything.

      Also, large buttons mean you have to sweep less to click them, not the other way around.

      Delete
    2. Larger buttons take less time to click unless you are switching between menus and need to move over them which takes even longer the larger they are.

      I agree that the first one is better.

      Delete
    3. If you're playing using your laptop, you can accidentally click things when using the track pad.

      Delete
  3. I agree about the first one being a cleaner look, and adding a button means not having to resize everything.

    Also, have you thought about having a setting to change between the current setup and a 1366x768 setup? I know it will be difficult to support many resolutions, but you may want to think about a zoom/text size option too, since if you have a high-rez screen (4K monitors are here) or a small (11-inch/28-cm) laptop screen, that might make a difference too.

    ReplyDelete
  4. The second one is better, aesthetically speaking. My vote is for the second one.

    ReplyDelete
  5. I prefer the first one

    ReplyDelete
  6. I think first one is better.

    ReplyDelete
  7. Between the two, I'd go with the first one.

    From a UX perspective, the second one would be good if the game was an app, but it's not. There should also be a "hierarchy" of buttons based on importance and how often you use them. (ie. Button1 and Button2, where Button1 is used for progression such as "take action" and Button2 is used for information) Size is one way to make them stand out from each other, which is one of the reasons layout 1 is better.

    Another thing to consider is the placement of the buttons. You want buttons to be close to other buttons it would be natural to click "while you are at it" so to speak. For instance, "Describe People" and "Describe Places" belong together, but they should also be closer to the "Take Action" button. These are all buttons you use fairly often, so don't make it feel like a chore to guide your mouse a long distance between them each time.

    Character screen and Browse relationships are kind of "inventories" so to say, so they belong together. However, they are less frequently used, so they can be placed further away from the "Take Action" button.

    Since most of the mouse activity will be focused around selecting a choice from the list in the bottom left, and clicking "Take Action" in bottom right, it would feel natural to have the buttons lined up horizontally underneath the text window and extend the window width perhaps.

    Readability is a concern if you do it this way, though - so you might want to add some margin on both sides of the text to make it pleasant for the eyes. There's nothing worse than having a window that extends all across the screen with text all the way.

    I hope that helps. :3

    -Mugunghwa

    ReplyDelete
    Replies
    1. You make a good point about minimizing mouse movement. The Take Action button should be right beside the list of actions. The list of actions is also not tall enough. I hate having to scroll through that list during sex scenes when there are lots of possible actions. The main text box is too wide right now and takes up more space than is needed. I would stack the action description, the list of actions, and Take Action button in a vertical strip.

      Delete
  8. I prefer the look of the first one.

    I also second the notion that the two scene and people buttons should be separated from the Character and Relationship ones. I wonder what the scene and people description buttons would look like as much smaller buttons squeezed between the command choice box and the main screen. Taking an action can be done with the enter key, so I don't necessarily see the need for any other buttons to be lined up with it.

    And one idea to throw out: remove the "Describe People" button altogether and put a people list in the side column, and display individual person descriptions by double clicking on a name. It would give you a constant reminder of who is around to interact with, and also avoid some of the big text dumps you get when you are in a scene with a lot of people present and need a description of them.

    ReplyDelete
    Replies
    1. The problem with the enter key is that it only activates the last used button, so if you have clicked "describe" or "character screen" it won't work for "Take Action".

      I really love the idea of having a people list available though. There's one big problem with it, and it's that it's going to require a lot more clicking. :/ As things are now, you only need one click to get information about everyone in the room and even though you get a big text dump in some places, at least you can quickly see who you want to talk with and not with a single click.

      With a list of names you would have to double click each name twice. So for instance, the dancing lesson would require 8 clicks instead of 1 click to gather the same amount of information.

      A list of buttons with each NPCs name would reduce it to 4 clicks, but that would still be a less efficient solution than the current one.

      A list of names that let you hover the names and display the information in a tooltip would require no clicks, but would be hard to pull off aesthetically and require more mouse activity than the current solution. x-x

      Delete
  9. First one is probably better.
    I understand what you were going for with the second one, having it fill up the entire UI and all that, but with so few buttons it means they have to be way too large to accommodate that design ideology.

    However, I will admit I'm a little torn with both designs. While I do believe a UI overhaul was in order, I can't help but feeling like Describe Scene/People should be closer to the action bar. Might just be me being too used to how it is now though.

    ReplyDelete
  10. Here's three suggestions. :3

    http://s18.postimg.org/5udycto49/Suggestion_1.png
    http://s18.postimg.org/s7lozmp21/suggestion_2.png
    http://s18.postimg.org/j13eccjtl/Suggestion_3.png

    ReplyDelete
    Replies
    1. That first one looks good to me. I think it looks best when the main text box spans the entire length of the game window, which is how the game is currently.

      Delete
  11. I prefer the 1st one. It's neater, cleaner, more minimalist, which are things I like in UIs.

    ReplyDelete
  12. Thanks for your comments! I'll do some more UI work tomorrow and I'll post some more example screens when they're ready. Probably I'll take some inspiration from Mugunghwa's screenshots.

    ReplyDelete
  13. any new content rolling out this month?

    ReplyDelete
    Replies
    1. Sure. The next release is UI-focused, but it won't only be UI changes.

      Delete
  14. From a designer perspective both screenshots are steps in a right direction.

    ReplyDelete
  15. Personally, I like the smaller buttons

    ReplyDelete
  16. So I'm checking this out for the first time and it looks interesting but has one major flaw, there are no instructions of any kind any where that explain how to download or install it. Is this one of those kind of games that's only for professionals or something? I really thought to give it a try but cant even figure out how to start it let alone anything else, so I'll have to pass for now. In the future I would advise adding in a sticky thread with directions for clueless people like me, unless casual gamer's are not what your going for, that is.

    ReplyDelete
    Replies
    1. "For new players - just use one of the links to the right to get either the jar or the exe version. You only need one or the other - not both. I recommend trying the jar first.
      For either version you'll need to have Java installed. A lot of programs use Java so you might well already have it. If the jar shows up as an unrecognised file type, then you probably don't. In that case you can get it from http://www.java.com/.
      The exe should tell you if you don't have the right version on your computer, but you'll still need to install it to run the game."

      Delete